// ==============================================
// Homepage - Modern Industrial landing page
// ==============================================

function HomePage({ session, cart, addToCart, navigate, openLogin, products }) {
  const isDealer = session?.role === "dealer";
  const productList = (products && products.length) ? products : PRODUCTS;
  const featured = productList.filter(p => p.tag === "hot" || p.tag === "new" || p.tag === "sale").slice(0, 6);
  const bestSellers = [...productList].sort((a, b) => (b.reviews || b.reviews_count || 0) - (a.reviews || a.reviews_count || 0)).slice(0, 4);
  const inCartIds = new Set(cart.map(c => c.id));

  return (
    <div className="home">
      {/* ============ HERO ============ */}
      <section className="hero">
        <div className="hero-grid-bg"></div>
        <div className="hero-inner">
          <div className="hero-copy">
            <div className="hero-eyebrow">
              <span className="dot"></span>
              <span>EST. 1992 · TIS-CERTIFIED SUPPLIER · 32+ YEARS</span>
            </div>
            <h1 className="hero-h1">
              เครื่องมือช่าง<br/>
              <span className="hero-h1-accent">มืออาชีพ</span> สำหรับคน<br/>
              ทำงานจริง
            </h1>
            <p className="hero-sub">
              ผู้จำหน่ายเครื่องมือช่าง อุปกรณ์อุตสาหกรรม และเซฟตี้ครบวงจร
              สำหรับผู้รับเหมา โรงงาน และช่างมืออาชีพ ราคาส่ง · ใบเสนอราคาออนไลน์ทันที
            </p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={() => navigate("catalog")}>
                <Icon name="grid" size={16}/> ดูสินค้าทั้งหมด
              </button>
              <button className="btn btn-outline btn-lg" onClick={() => navigate("cart")}>
                <Icon name="file-text" size={16}/> ขอใบเสนอราคา
              </button>
            </div>
            <div className="hero-trust">
              {[
                { ic: "shield", t: "TIS · ISO 9001", d: "มาตรฐานอุตสาหกรรม" },
                { ic: "truck", t: "ส่งฟรี ฿2,000+", d: "ทั่วประเทศ 1-3 วัน" },
                { ic: "tag", t: "ราคา Dealer", d: "ส่วนลด 5-20% สำหรับ Dealer" },
              ].map(f => (
                <div className="trust-item" key={f.t}>
                  <Icon name={f.ic} size={18}/>
                  <div>
                    <div className="bold">{f.t}</div>
                    <div className="muted tiny">{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="hero-visual">
            <HeroToolboxVisual/>
          </div>
        </div>
      </section>

      {/* ============ STATS STRIP ============ */}
      <section className="stats-strip">
        <div className="container">
          <div className="stats-grid">
            {[
              { num: "32+", end: 32, suffix: "+", label: "ปีแห่งประสบการณ์", sub: "ตั้งแต่ปี 2535" },
              { num: "8,500+", end: 8500, suffix: "+", label: "รายการสินค้า", sub: "ในคลังพร้อมส่ง" },
              { num: "2,400+", end: 2400, suffix: "+", label: "ลูกค้าองค์กร", sub: "โรงงาน · รับเหมา" },
              { num: "42", end: 42, suffix: "", label: "Dealer ทั่วประเทศ", sub: "ตัวแทนจำหน่าย" },
            ].map((s, i) => (
              <div className="stat-cell reveal" data-delay={i + 1} key={s.label}>
                <div className="stat-num"><AnimatedCounter end={s.end} suffix={s.suffix}/></div>
                <div className="stat-label">{s.label}</div>
                <div className="stat-sub">{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ FEATURED CATEGORIES ============ */}
      <section className="container" style={{ paddingTop: 60, paddingBottom: 40 }}>
        <SectionHead
          eyebrow="CATEGORIES"
          title="หมวดหมู่สินค้าหลัก"
          subtitle="6 หมวดหมู่ครอบคลุมงานช่างและงานอุตสาหกรรม"
          cta={{ label: "ดูสินค้าทั้งหมด", onClick: () => navigate("catalog") }}
        />

        <div className="cat-grid">
          {[
            { id: "power", th: "เครื่องมือไฟฟ้า", en: "Power Tools", count: 8, icon: "drill", color: "#0a6e3d" },
            { id: "hand", th: "เครื่องมือช่าง", en: "Hand Tools", count: 6, icon: "wrench", color: "#1f2937" },
            { id: "measure", th: "เครื่องมือวัด", en: "Measuring", count: 4, icon: "ruler", color: "#16a34a" },
            { id: "fasten", th: "อุปกรณ์ยึดติด", en: "Fasteners", count: 4, icon: "screw", color: "#475569" },
            { id: "safety", th: "อุปกรณ์เซฟตี้", en: "Safety Equip.", count: 4, icon: "helmet", color: "#dc2626" },
            { id: "storage", th: "กล่อง / ตู้เก็บ", en: "Storage", count: 4, icon: "box", color: "#0a6e3d" },
          ].map((c, i) => (
            <div key={c.id} className="cat-card reveal" data-delay={(i % 3) + 1} onClick={() => navigate("catalog", { category: c.id })} style={{"--cat-color": c.color}}>
              <div className="cat-card-icon">
                <CatGlyph kind={c.icon} color={c.color}/>
              </div>
              <div className="cat-card-body">
                <div className="cat-card-en">{c.en}</div>
                <div className="cat-card-th">{c.th}</div>
                <div className="cat-card-foot">
                  <span className="muted small">{c.count} รายการ</span>
                  <span className="cat-card-arrow"><Icon name="chevron-right" size={14}/></span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ PROMO BANNER ============ */}
      <section className="container" style={{ paddingBottom: 60 }}>
        <div className="promo-banner">
          <div className="promo-content">
            <div className="hero-eyebrow" style={{color:"#fbbf24"}}>
              <span className="dot" style={{background:"#fbbf24"}}></span>
              <span>SPECIAL FOR DEALERS</span>
            </div>
            <h2 style={{margin:"8px 0 8px", fontSize: 32, lineHeight: 1.15, letterSpacing:"-0.02em"}}>
              เป็น Dealer วันนี้<br/>รับส่วนลดสูงสุด <span style={{color:"#fbbf24"}}>20%</span>
            </h2>
            <p style={{margin:"0 0 20px", opacity: 0.85, maxWidth: 480, lineHeight: 1.6}}>
              สมัครเป็นตัวแทนจำหน่ายฟรี · เครดิตเทอม 30 วัน · ราคาพิเศษ Bronze/Silver/Gold/Platinum · สั่งซื้อซ้ำเร็ว
            </p>
            <div className="flex gap-12">
              <button className="btn btn-lg" style={{background:"#fbbf24", color:"#0a1224", borderColor:"#fbbf24"}} onClick={openLogin}>
                <Icon name="tag" size={15}/> สมัคร Dealer
              </button>
              <button className="btn btn-lg btn-ghost" style={{color:"white", border:"1px solid rgba(255,255,255,0.2)"}}>
                เรียนรู้เพิ่มเติม <Icon name="chevron-right" size={14}/>
              </button>
            </div>
          </div>
          <div className="promo-visual">
            <div className="promo-tier-stack">
              {[
                { name: "Platinum", disc: "20%", desc: "ยอดซื้อ ฿500K+/ปี" },
                { name: "Gold", disc: "15%", desc: "ยอดซื้อ ฿200K+/ปี" },
                { name: "Silver", disc: "10%", desc: "ยอดซื้อ ฿100K+/ปี" },
                { name: "Bronze", disc: "5%", desc: "เริ่มต้น" },
              ].map((t, i) => (
                <div key={t.name} className={"tier-card tier-" + t.name.toLowerCase()}>
                  <div className="tier-name">{t.name}</div>
                  <div className="tier-disc">-{t.disc}</div>
                  <div className="tier-desc">{t.desc}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ============ FEATURED PRODUCTS ============ */}
      <section className="container" style={{ paddingBottom: 60 }}>
        <SectionHead
          eyebrow="HOT THIS WEEK"
          title="สินค้าโปรโมชั่นและขายดี"
          subtitle="คัดสรรสินค้าจากแบรนด์ชั้นนำ ราคาพิเศษเฉพาะเดือนนี้"
          cta={{ label: "ดูทั้งหมด", onClick: () => navigate("catalog", { sale: true }) }}
        />
        <div className="product-grid">
          {featured.map(p => (
            <ProductCard key={p.id} product={p}
              onAdd={addToCart}
              onView={() => navigate("product", { id: p.id })}
              inCart={inCartIds.has(p.id)}
              isDealer={isDealer}/>
          ))}
        </div>
      </section>

      {/* ============ BRANDS WE CARRY ============ */}
      <section className="brands-section">
        <div className="container">
          <SectionHead
            eyebrow="OFFICIAL DISTRIBUTOR"
            title="แบรนด์ที่เราจำหน่าย"
            subtitle="ตัวแทนจำหน่ายอย่างเป็นทางการ · ของแท้ 100% · รับประกันโดยศูนย์บริการ"
            light
          />
          <div className="marquee-wrap fade-edges" style={{marginBottom: 32}}>
            <div className="marquee-track">
              {[
                { name: "Makita", country: "🇯🇵 Japan", style: "makita" },
                { name: "BOSCH", country: "🇩🇪 Germany", style: "bosch" },
                { name: "DeWALT", country: "🇺🇸 USA", style: "dewalt" },
                { name: "STANLEY", country: "🇺🇸 USA", style: "stanley" },
                { name: "Milwaukee", country: "🇺🇸 USA", style: "milwaukee" },
                { name: "TOTAL", country: "🇨🇳 China", style: "total" },
                { name: "INGCO", country: "🇨🇳 China", style: "ingco" },
                { name: "Mitutoyo", country: "🇯🇵 Japan", style: "mitutoyo" },
                { name: "KING'S", country: "🇲🇾 Malaysia", style: "kings" },
                { name: "3M", country: "🇺🇸 USA", style: "tm" },
                { name: "HITACHI", country: "🇯🇵 Japan", style: "hitachi" },
                { name: "PUMA", country: "🇮🇹 Italy", style: "puma" },
              ].concat([
                { name: "Makita", country: "🇯🇵 Japan", style: "makita" },
                { name: "BOSCH", country: "🇩🇪 Germany", style: "bosch" },
                { name: "DeWALT", country: "🇺🇸 USA", style: "dewalt" },
                { name: "STANLEY", country: "🇺🇸 USA", style: "stanley" },
                { name: "Milwaukee", country: "🇺🇸 USA", style: "milwaukee" },
                { name: "TOTAL", country: "🇨🇳 China", style: "total" },
              ]).map((b, i) => (
                <div key={i} className="marquee-item">
                  <BrandLogo brand={b}/>
                </div>
              ))}
            </div>
          </div>

          <div className="brand-grid">
            {[
              { name: "Makita", country: "🇯🇵 Japan", style: "makita" },
              { name: "BOSCH", country: "🇩🇪 Germany", style: "bosch" },
              { name: "DeWALT", country: "🇺🇸 USA", style: "dewalt" },
              { name: "STANLEY", country: "🇺🇸 USA", style: "stanley" },
              { name: "Milwaukee", country: "🇺🇸 USA", style: "milwaukee" },
              { name: "TOTAL", country: "🇨🇳 China", style: "total" },
              { name: "INGCO", country: "🇨🇳 China", style: "ingco" },
              { name: "Mitutoyo", country: "🇯🇵 Japan", style: "mitutoyo" },
              { name: "KING'S", country: "🇲🇾 Malaysia", style: "kings" },
              { name: "3M", country: "🇺🇸 USA", style: "tm" },
              { name: "HITACHI", country: "🇯🇵 Japan", style: "hitachi" },
              { name: "PUMA", country: "🇮🇹 Italy", style: "puma" },
            ].map((b, i) => (
              <div key={b.name} className="brand-card reveal" data-delay={(i % 4) + 1}>
                <BrandLogo brand={b}/>
                <div className="brand-meta">
                  <span className="brand-country">{b.country}</span>
                  <span className="muted tiny">Authorized</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ BESTSELLERS ============ */}
      <section className="container" style={{ paddingTop: 60, paddingBottom: 60 }}>
        <SectionHead
          eyebrow="BESTSELLERS"
          title="สินค้าขายดีตลอดกาล"
          subtitle="ยอดนิยมจากลูกค้ามากกว่า 2,400 องค์กร"
          cta={{ label: "ดูสินค้าทั้งหมด", onClick: () => navigate("catalog") }}
        />
        <div className="product-grid" style={{gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))"}}>
          {bestSellers.map(p => (
            <ProductCard key={p.id} product={p}
              onAdd={addToCart}
              onView={() => navigate("product", { id: p.id })}
              inCart={inCartIds.has(p.id)}
              isDealer={isDealer}/>
          ))}
        </div>
      </section>

      {/* ============ OUR CUSTOMERS ============ */}
      <section className="customers-section">
        <div className="container">
          <SectionHead
            eyebrow="OUR CUSTOMERS · ลูกค้าของเรา"
            title="กว่า 2,400 องค์กรไว้วางใจเรา"
            subtitle="โรงงานอุตสาหกรรม ผู้รับเหมา ส่วนราชการ และร้านวัสดุก่อสร้างชั้นนำ"
          />

          <div className="customer-grid">
            {[
              "บริษัท ปูนซิเมนต์ไทย",
              "ปตท. สำรวจและผลิต",
              "การไฟฟ้านครหลวง",
              "บมจ. ช.การช่าง",
              "บมจ. อิตาเลียนไทย",
              "บมจ. ซีพี ออลล์",
              "การประปานครหลวง",
              "บมจ. ไทยออยล์",
              "บมจ. ปูนซีเมนต์นครหลวง",
              "บมจ. ซีพีเอฟ",
              "การไฟฟ้าฝ่ายผลิต",
              "บมจ. แสนสิริ",
            ].map((c, i) => (
              <div key={c} className="customer-card reveal" data-delay={(i % 4) + 1}>
                <CustomerLogo name={c} idx={i}/>
                <div className="customer-name">{c}</div>
              </div>
            ))}
          </div>

          <div className="testimonial-strip">
            {[
              {
                quote: "ใช้บริการ Inter Supply มากว่า 10 ปี ส่งของตรงเวลา ใบเสนอราคาเร็ว เป็น Dealer Gold ของเขา ขอบคุณครับ",
                name: "คุณวีระ ผู้รับเหมา",
                co: "บริษัท ก่อสร้างไทยรุ่งเรือง",
              },
              {
                quote: "ราคาสมเหตุสมผล มีของพร้อมส่งตลอด ทีมงานให้คำปรึกษาได้ดี เลือกซื้ออะไหล่และเครื่องมือช่างที่นี่เจ้าเดียว",
                name: "ฝ่ายจัดซื้อ",
                co: "โรงงานอุตสาหกรรม XYZ",
              },
              {
                quote: "ระบบใบเสนอราคาออนไลน์ใช้ง่ายมาก กดไม่กี่ครั้งก็ได้ PDF เลย เปิดเครดิตเทอม 30 วันสะดวก",
                name: "คุณแอน · ผู้จัดการ",
                co: "บริษัท ABC Construction",
              },
            ].map((t, i) => (
              <div key={i} className="testimonial-card reveal" data-delay={i + 1}>
                <div className="testimonial-quote">
                  <Icon name="check" size={16}/>
                  <span style={{fontSize:32, lineHeight:0.6, fontFamily:"serif", color:"var(--navy-700)"}}>"</span>
                </div>
                <p>{t.quote}</p>
                <div className="testimonial-by">
                  <div className="avatar">{t.name.charAt(0)}</div>
                  <div>
                    <div className="bold small">{t.name}</div>
                    <div className="muted tiny">{t.co}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ CTA ============ */}
      <section className="container" style={{ paddingBottom: 80 }}>
        <div className="cta-final">
          <div>
            <h2 style={{margin:"0 0 8px", fontSize: 28, letterSpacing:"-0.01em"}}>พร้อมเริ่มต้นใช้บริการ?</h2>
            <p style={{margin:0, color:"var(--ink-500)", maxWidth: 480}}>ขอใบเสนอราคาฟรีออนไลน์ · ตอบกลับภายใน 1 ชั่วโมงทำการ · ทีมงานพร้อมให้คำปรึกษา</p>
          </div>
          <div className="flex gap-12">
            <button className="btn btn-primary btn-lg" onClick={() => navigate("catalog")}>
              <Icon name="grid" size={15}/> เริ่มเลือกสินค้า
            </button>
            <button className="btn btn-outline btn-lg">
              <Icon name="phone" size={15}/> 02-555-1992
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============ Section Head helper ============
function SectionHead({ eyebrow, title, subtitle, cta, light }) {
  return (
    <div className="section-head" data-light={light ? "true" : "false"}>
      <div>
        {eyebrow && <div className="hero-eyebrow"><span className="dot"></span><span>{eyebrow}</span></div>}
        <h2>{title}</h2>
        {subtitle && <p>{subtitle}</p>}
      </div>
      {cta && (
        <button className="btn btn-outline" onClick={cta.onClick}>
          {cta.label} <Icon name="chevron-right" size={14}/>
        </button>
      )}
    </div>
  );
}

// ============ Hero visual: stylized industrial scene ============
function HeroToolboxVisual() {
  return (
    <div className="hero-visual-card">
      <svg viewBox="0 0 480 420" style={{ width: "100%", height: "auto", display:"block" }}>
        <defs>
          <linearGradient id="hv-bg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#0a6e3d"/>
            <stop offset="100%" stopColor="#02240e"/>
          </linearGradient>
          <linearGradient id="hv-metal" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#475569"/>
            <stop offset="100%" stopColor="#1e293b"/>
          </linearGradient>
          <linearGradient id="hv-orange" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#fbbf24"/>
            <stop offset="100%" stopColor="#d97706"/>
          </linearGradient>
          <pattern id="hv-grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="0.5"/>
          </pattern>
        </defs>

        <rect width="480" height="420" rx="20" fill="url(#hv-bg)"/>
        <rect width="480" height="420" fill="url(#hv-grid)"/>

        {/* drill body */}
        <g transform="translate(80 140)">
          <rect x="0" y="20" width="180" height="80" rx="10" fill="url(#hv-orange)"/>
          <rect x="170" y="35" width="60" height="50" rx="4" fill="#1f2937"/>
          <circle cx="230" cy="60" r="22" fill="#0f172a" stroke="#475569" strokeWidth="2"/>
          <circle cx="230" cy="60" r="14" fill="#1e293b"/>
          <rect x="252" y="55" width="60" height="10" rx="2" fill="#475569"/>
          {/* handle */}
          <path d="M 40 100 L 30 180 L 90 180 L 80 100 Z" fill="url(#hv-orange)"/>
          {/* trigger */}
          <rect x="48" y="105" width="20" height="20" rx="3" fill="#1e293b"/>
          {/* battery */}
          <rect x="20" y="178" width="80" height="22" rx="4" fill="#1f2937"/>
          <rect x="25" y="183" width="14" height="3" fill="#10b981"/>
          <rect x="42" y="183" width="14" height="3" fill="#10b981"/>
          <rect x="59" y="183" width="14" height="3" fill="#10b981"/>
          <rect x="76" y="183" width="14" height="3" fill="#475569"/>
        </g>

        {/* sparks */}
        <g opacity="0.7">
          {[
            [340, 195], [355, 188], [365, 200], [375, 195], [385, 205], [395, 195],
            [368, 175], [378, 215], [395, 180],
          ].map(([x, y], i) => (
            <circle key={i} cx={x} cy={y} r={1.4} fill="#fbbf24"/>
          ))}
        </g>

        {/* sub tool: spanner crossed */}
        <g transform="translate(50 290) rotate(-12)" opacity="0.9">
          <rect x="0" y="14" width="120" height="8" rx="3" fill="url(#hv-metal)"/>
          <path d="M 0 18 L -16 6 L -16 30 Z" fill="url(#hv-metal)"/>
          <circle cx="120" cy="18" r="10" fill="none" stroke="url(#hv-metal)" strokeWidth="3"/>
        </g>
        <g transform="translate(280 320) rotate(28)" opacity="0.9">
          <rect x="0" y="14" width="100" height="6" rx="2" fill="#cbd5e1"/>
          <circle cx="100" cy="17" r="8" fill="none" stroke="#cbd5e1" strokeWidth="3"/>
          <path d="M 0 17 L -12 8 L -12 26 Z" fill="#cbd5e1"/>
        </g>

        {/* bolts */}
        <g fill="#cbd5e1" opacity="0.55">
          <circle cx="420" cy="60" r="5"/>
          <circle cx="440" cy="80" r="3"/>
          <circle cx="60" cy="60" r="3"/>
          <circle cx="40" cy="100" r="4"/>
          <circle cx="430" cy="350" r="4"/>
        </g>

        {/* spec corner */}
        <g transform="translate(310 50)" fill="rgba(255,255,255,0.5)" fontFamily="JetBrains Mono" fontSize="10">
          <text x="0" y="0">SKU: ISP-PWR-1001</text>
          <text x="0" y="14">TORQUE: 60 N·m</text>
          <text x="0" y="28">VOLTAGE: 18V</text>
          <text x="0" y="42">WARRANTY: 12 MO</text>
        </g>
      </svg>

      <div className="hero-floating-badge">
        <div className="badge-icon"><Icon name="zap" size={16}/></div>
        <div>
          <div className="badge-title">ราคา Dealer</div>
          <div className="badge-sub">เริ่ม ฿3,590 / ชิ้น</div>
        </div>
      </div>
      <div className="hero-floating-badge hero-floating-badge-2">
        <div className="badge-icon" style={{background:"#10b981"}}><Icon name="check" size={16}/></div>
        <div>
          <div className="badge-title">พร้อมส่งทันที</div>
          <div className="badge-sub">คลังลาดกระบัง 24 ชิ้น</div>
        </div>
      </div>
    </div>
  );
}

// ============ Category icon ============
function CatGlyph({ kind, color }) {
  const common = { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", stroke: color, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  const fill = color + "20";
  switch (kind) {
    case "drill":
      return <svg {...common}>
        <rect x="8" y="16" width="24" height="12" rx="2" fill={fill}/>
        <rect x="32" y="19" width="10" height="6" rx="1" fill={color}/>
        <path d="M14 28v8h8v-8" fill={fill}/>
        <circle cx="42" cy="22" r="2" fill={color}/>
      </svg>;
    case "wrench":
      return <svg {...common}>
        <path d="M30 8a8 8 0 0 0-11 11l-12 12 4 4 12-12a8 8 0 0 0 11-11l-5 5-4-4 5-5z" fill={fill}/>
      </svg>;
    case "ruler":
      return <svg {...common}>
        <rect x="6" y="18" width="36" height="14" rx="2" fill={fill}/>
        <path d="M10 18v4M16 18v6M22 18v4M28 18v6M34 18v4M40 18v6"/>
      </svg>;
    case "screw":
      return <svg {...common}>
        <circle cx="16" cy="14" r="6" fill={fill}/>
        <path d="M16 20v18M12 38h8"/>
        <path d="M14 14h4M14 12l4 4M14 16l4-4"/>
      </svg>;
    case "helmet":
      return <svg {...common}>
        <path d="M10 30c0-8 6-14 14-14s14 6 14 14" fill={fill}/>
        <rect x="8" y="30" width="32" height="4" fill={color + "60"}/>
        <path d="M22 16h4v8h-4z"/>
      </svg>;
    case "box":
      return <svg {...common}>
        <rect x="8" y="14" width="32" height="22" rx="2" fill={fill}/>
        <path d="M8 22h32M20 14v-2h8v2"/>
        <circle cx="24" cy="29" r="1.5" fill={color}/>
      </svg>;
    default:
      return null;
  }
}

// ============ Brand logo (typographic) ============
function BrandLogo({ brand }) {
  const { name, style } = brand;
  // Each brand gets a distinct typographic treatment
  const styles = {
    makita: { bg: "#0066b3", color: "white", font: "Inter", weight: 800, italic: false, letterSp: "-0.02em" },
    bosch: { bg: "white", color: "#dc2626", font: "Inter", weight: 700, italic: false, letterSp: "0.02em", border: "1px solid var(--ink-200)" },
    dewalt: { bg: "#fbbf24", color: "#0f172a", font: "Inter", weight: 900, italic: true, letterSp: "-0.02em" },
    stanley: { bg: "#fbbf24", color: "#0f172a", font: "Inter", weight: 800, italic: false, letterSp: "0.04em" },
    milwaukee: { bg: "#dc2626", color: "white", font: "Inter", weight: 700, italic: false, letterSp: "0.06em" },
    total: { bg: "white", color: "#0b3a82", font: "Inter", weight: 800, italic: false, letterSp: "0.02em", border: "2px solid #1e3a8a" },
    ingco: { bg: "#ea580c", color: "white", font: "Inter", weight: 800, italic: false, letterSp: "0.04em" },
    mitutoyo: { bg: "white", color: "#0f172a", font: "Inter", weight: 600, italic: false, letterSp: "0.05em", border: "1px solid var(--ink-200)" },
    kings: { bg: "#0f172a", color: "#fbbf24", font: "Inter", weight: 800, italic: false, letterSp: "0.04em" },
    tm: { bg: "#dc2626", color: "white", font: "Inter", weight: 900, italic: false, letterSp: "-0.05em" },
    hitachi: { bg: "white", color: "#dc2626", font: "Inter", weight: 700, italic: true, letterSp: "0", border: "1px solid var(--ink-200)" },
    puma: { bg: "#0f172a", color: "white", font: "Inter", weight: 800, italic: true, letterSp: "0.02em" },
  };
  const s = styles[style] || styles.bosch;
  return (
    <div className="brand-logo-tile" style={{
      background: s.bg,
      color: s.color,
      fontFamily: s.font,
      fontWeight: s.weight,
      fontStyle: s.italic ? "italic" : "normal",
      letterSpacing: s.letterSp,
      border: s.border || "none",
    }}>
      {name}
    </div>
  );
}

// ============ Customer logo placeholder ============
function CustomerLogo({ name, idx }) {
  // generate stylized monogram from name
  const first = name.replace(/^(บริษัท|บมจ\.|บจก\.|การ|ห้าง)/, "").trim().charAt(0);
  const palette = [
    ["#0a6e3d", "#dcfce7"],
    ["#dc2626", "#fee2e2"],
    ["#1e3a8a", "#dbeafe"],
    ["#7c3aed", "#ede9fe"],
    ["#ea580c", "#fed7aa"],
    ["#0f172a", "#e2e8f0"],
  ];
  const [fg, bg] = palette[idx % palette.length];
  return (
    <div className="customer-logo" style={{ color: fg, background: bg }}>
      <span style={{ fontFamily: "Inter", fontWeight: 800, fontSize: 22, letterSpacing: "-0.02em" }}>{first}</span>
    </div>
  );
}

// ============ Animated Counter (counts up when in view) ============
function AnimatedCounter({ end, suffix = "", duration = 1200 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);

  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const step = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.floor(eased * end));
            if (t < 1) requestAnimationFrame(step);
            else setVal(end);
          };
          requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [end, duration]);

  return <span ref={ref}>{val.toLocaleString("en-US")}{suffix}</span>;
}

Object.assign(window, { HomePage, SectionHead, HeroToolboxVisual, CatGlyph, BrandLogo, CustomerLogo, AnimatedCounter });