// Stannox section components — Stannox DS aligned

const Ribbon = () => (
  <div className="ribbon">
    <div className="container ribbon-inner">
      <span>✦  ของแท้ 100% · จัดส่งทั่วประเทศจาก marketplace · เทียบสเปกได้ทุก SKU</span>
      <span>LINE OA: @stannox</span>
    </div>
  </div>
);

const Nav = () => {
  const [openMega, setOpenMega] = React.useState(false);
  const mps = ["shopee", "lazada", "tiktok"];
  return (
    <div className="nav-wrap">
      <Ribbon/>
      <div className="container">
        <div className="nav-bar">
          <a href="#" className="logo">
            <img src="assets/logo-wordmark-white.png" alt="Stannox"/>
          </a>
          <nav>
            <ul className="nav-links" onMouseLeave={() => setOpenMega(false)}>
              <li data-open={openMega ? "true" : "false"} onMouseEnter={() => setOpenMega(true)}>
                <button>Products <span style={{ marginLeft: 6 }}><IconChevron open={openMega}/></span></button>
                <div className="mega">
                  <div className="container">
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 20 }}>
                      <span className="eyebrow" style={{ color: "var(--stx-yellow-500)" }}>หมวดสินค้า / Catalog 2026</span>
                      <a href="#" className="label" style={{ color: "var(--stx-yellow-500)" }}>ดูทั้งหมด →</a>
                    </div>
                    <div className="mega-grid">
                      {CATEGORIES.slice(0,8).map(c => (
                        <a key={c.id} href="#" className="mega-tile">
                          <Photo dark tag={c.idx} caption={c.sub}/>
                          <div>
                            <h4>{c.name}</h4>
                            <p>{c.skus} SKUs · {c.sub}</p>
                          </div>
                        </a>
                      ))}
                    </div>
                  </div>
                </div>
              </li>
              <li><a href="#about">About</a></li>
              <li><a href="#where">Where to Buy</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </nav>
          <div className="nav-right">
            <button className="icon-btn" aria-label="search"><IconSearch/></button>
            {mps.map(mp => (
              <a key={mp} className="nav-mp" data-mp={mp} href="#">{MarketplaceLabel[mp]}</a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Hero = () => {
  // Drop a real file at assets/hero-loop.mp4 (and optional .webm) and the placeholder gets out of the way.
  const VIDEO_SRC = "assets/hero-loop.mp4";
  const [hasVideo, setHasVideo] = React.useState(false);
  return (
    <section className="hero">
      <div className="hero-video" data-placeholder={hasVideo ? "false" : "true"}>
        <div className="hv-stage">
          <div className="hv-spot"></div>
          <div className="hv-spot2"></div>
          <div className="hv-grid"></div>
          <div className="hv-scan"></div>
          <div className="hv-particles"></div>
          <div className="hv-pulse"></div>
          <div className="hv-tag"><b>● Live Preview · Motion Placeholder</b>drop hero-loop.mp4 in /assets to replace</div>
        </div>
        <video
          autoPlay loop muted playsInline preload="metadata"
          onCanPlay={() => setHasVideo(true)}
          onError={() => setHasVideo(false)}
          style={{ opacity: hasVideo ? 1 : 0 }}
        >
          <source src={VIDEO_SRC} type="video/mp4"/>
        </video>
      </div>
      <div className="hero-overlay"></div>
      <div className="hero-corners">
        <span className="hero-corner tl"></span>
        <span className="hero-corner tr"></span>
        <span className="hero-corner bl"></span>
        <span className="hero-corner br"></span>
      </div>
      <div className="hero-stamp">
        <b>STX-AT102</b>
        <span>Heavy-Duty Tire Inflator</span>
      </div>
      <div className="container">
        <div className="hero-head">
          <span className="hero-eyebrow"><span className="bar"></span> LEAD THE INNOVATION · Catalog 2026</span>
          <h1>เครื่องมือช่าง<br/><span className="accent">มืออาชีพ</span><br/>ในราคาที่ทำงานได้</h1>
          <p className="hero-sub">Stannox — เครื่องมือช่างระดับกลางสำหรับช่างที่ใช้งานจริง ครบทุกหมวด ทนทาน คุ้มราคา หาซื้อได้ทั่วประเทศ</p>
          <div className="hero-ctas">
            <a href="#categories" className="btn btn--accent btn--lg">ดูสินค้าทั้งหมด <IconArrow/></a>
            <a href="#where" className="btn btn--ghost-light btn--lg">สนใจเป็นตัวแทน</a>
          </div>
        </div>
        <div className="hero-meta">
          <div><span className="n">217</span><span className="lbl">SKUs in catalog</span></div>
          <div><span className="n">218<span className="plus">+</span></span><span className="lbl">ตัวแทนทั่วประเทศ</span></div>
          <div><span className="n">8</span><span className="lbl">หมวดสินค้า</span></div>
        </div>
      </div>
    </section>
  );
};

const Categories = () => (
  <section className="section section--soft" id="categories">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow">02 / Catalog</span>
          <h2>เลือกหมวดที่ต้องการ</h2>
        </div>
        <a href="#" className="btn btn--ghost btn--sm">ดูทั้งหมด <IconArrow/></a>
      </div>
      <div className="cat-grid">
        {CATEGORIES.map(c => (
          <a key={c.id} href="#" className="cat-tile">
            <span className="cat-idx">{c.idx} / 08</span>
            <Photo caption={c.sub}/>
            <div className="cat-meta">
              <div>
                <h3>{c.name}</h3>
                <div className="sku">{c.skus} SKUs</div>
              </div>
              <span className="cat-arrow"><IconArrow/></span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const BestSellers = () => {
  const mps = ["shopee","lazada","tiktok"];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">03 / Best Sellers · Q1 2026</span>
            <h2>ขายดีตลอดทั้งปี</h2>
          </div>
          <a href="#" className="btn btn--ghost btn--sm">ดูสินค้าทั้งหมด <IconArrow/></a>
        </div>
        <div className="bs-grid">
          {BEST_SELLERS.map(p => (
            <article key={p.id} className="bs-card">
              {p.tag && <span className="bs-badge">{p.tag}</span>}
              <Photo tag={p.id} caption={p.name}/>
              <div className="bs-body">
                <div className="bs-code">{p.id}</div>
                <h4>{p.name}</h4>
                <p className="bs-spec">{p.spec}</p>
                <div className="bs-mp">
                  {mps.map(mp => (
                    <a key={mp} data-mp={mp} href="#">{mp === "tiktok" ? "TIKTOK" : MarketplaceLabel[mp]}</a>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const WhyStannox = () => (
  <section className="section section--dark" id="why">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow">04 / Why Stannox</span>
          <h2>เหตุผลที่ช่างเลือก</h2>
        </div>
      </div>
      <div className="pillars">
        {PILLARS.map(p => (
          <div key={p.idx} className="pillar">
            <div className={"glyph " + p.glyph}></div>
            <div className="idx">{p.idx}</div>
            <h3>{p.title}</h3>
            <p>{p.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Trusted = () => (
  <section className="section section--soft">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow">05 / Distribution · ทั่วประเทศ</span>
          <h2>ยี่ปั๊วซาปั๊วทั่วประเทศไว้ใจ</h2>
        </div>
        <a href="#dealer" className="btn btn--ghost btn--sm">เป็นตัวแทนจำหน่าย <IconArrow/></a>
      </div>
      <div className="trusted-grid">
        <div className="trusted-stat">
          <div className="label-line"><span className="bar"></span>Across Thailand · 2026</div>
          <div className="big">218<span className="plus">+</span></div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, position: "relative", zIndex: 2 }}>
            <span style={{ color: "#fff", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, letterSpacing: "0.06em", textTransform: "uppercase" }}>ร้านค้า stock สินค้า Stannox</span>
            <span className="label" style={{ color: "rgba(255,255,255,0.55)" }}>77 จังหวัด · 6 ภูมิภาค</span>
          </div>
          <p>เครือข่ายตัวแทนของเรากระจายครบทุกภูมิภาค — ยี่ปั๊วใหม่สั่งของได้จากศูนย์กระจายที่ใกล้ที่สุด พร้อมทีม sales ลงพื้นที่</p>
          <a href="#where" className="btn btn--accent" style={{ alignSelf: "flex-start", position: "relative", zIndex: 2 }}>หาตัวแทนใกล้คุณ <IconArrow/></a>
        </div>
        <div className="regions">
          {REGIONS.map(r => (
            <div key={r.name} className="region">
              <div className="name">{r.name}</div>
              <div className="count">{r.count}</div>
              <div className="lbl">{r.prov}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="logo-wall">
        {DEALER_LOGOS.map((name, i) => (
          <div key={i} className="logo-cell">{name}</div>
        ))}
      </div>
    </div>
  </section>
);

const InAction = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow">06 / In Action · ใช้จริง ในงานจริง</span>
          <h2>เครื่องมือที่ลงไซต์ทุกวัน</h2>
        </div>
      </div>
      <div className="action-grid">
        <Photo tag="ON-SITE"     caption="ช่างกำลังใช้ STX-AT102 · ปั๊มลมล้อรถบรรทุก"/>
        <Photo tag="WORKSHOP"    caption="คีมตัดสาย STX-PC308"/>
        <Photo tag="OUTDOOR"     caption="งานสวน · เอ็นตัดหญ้า STX-TL022"/>
        <Photo tag="HOME-REPAIR" caption="ชุดไขควง · งานเฟอร์นิเจอร์"/>
        <Photo tag="METAL-CUT"   caption="ใบเลื่อยตัดเหล็ก STX-SB244"/>
      </div>
    </div>
  </section>
);

const WhereToBuy = () => (
  <section className="section section--soft" id="where">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow">07 / Where to Buy</span>
          <h2>ซื้อ Stannox ได้ที่ไหน?</h2>
        </div>
      </div>
      <div className="where-grid">
        <div className="where-col" data-kind="retail">
          <div>
            <span className="label" style={{ color: "var(--stx-blue-700)" }}>Retail · ซื้อปลีก</span>
            <h3 style={{ marginTop: 12 }}>ซื้อปลีกที่ marketplace ที่คุณใช้ประจำ</h3>
            <p style={{ marginTop: 16 }}>ทุก SKU มีจำหน่ายบน 3 marketplace หลัก — ของแท้จากแบรนด์ ส่งฟรีตามโปรของแต่ละแพลตฟอร์ม</p>
          </div>
          <div className="where-mp-list">
            <a className="where-mp" data-mp="shopee" href="#"><div>Shopee<span className="meta">stannox.official · 4.9 ★ · 12k followers</span></div><IconArrow/></a>
            <a className="where-mp" data-mp="lazada" href="#"><div>Lazada<span className="meta">stannox.lazmall · LazMall verified</span></div><IconArrow/></a>
            <a className="where-mp" data-mp="tiktok" href="#"><div>TikTok Shop<span className="meta">@stannox.th · live ทุกเย็น</span></div><IconArrow/></a>
          </div>
        </div>
        <div className="where-col" data-kind="b2b" id="dealer">
          <div style={{ position: "relative", zIndex: 2 }}>
            <span className="label" style={{ color: "var(--stx-yellow-500)" }}>B2B · ตัวแทนจำหน่าย</span>
            <h3 style={{ marginTop: 12 }}>เปิดร้าน? ขายให้คนอื่น?</h3>
            <p style={{ marginTop: 16 }}>เปิดรับยี่ปั๊ว ซาปั๊ว และร้านค้าปลีกที่ต้องการ stock สินค้า Stannox — margin ดี exclusive territory ทีม sales support</p>
            <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "rgba(255,255,255,0.8)" }}>
              <li style={{ display: "flex", gap: 12 }}><span style={{ color: "var(--stx-yellow-500)", fontFamily: "var(--font-mono)" }}>+</span> Margin 25-40% สำหรับร้านปลีก</li>
              <li style={{ display: "flex", gap: 12 }}><span style={{ color: "var(--stx-yellow-500)", fontFamily: "var(--font-mono)" }}>+</span> Exclusive territory ในจังหวัดที่ตกลง</li>
              <li style={{ display: "flex", gap: 12 }}><span style={{ color: "var(--stx-yellow-500)", fontFamily: "var(--font-mono)" }}>+</span> ทีม Sales ลงพื้นที่ + POS materials</li>
              <li style={{ display: "flex", gap: 12 }}><span style={{ color: "var(--stx-yellow-500)", fontFamily: "var(--font-mono)" }}>+</span> เงื่อนไขเครดิตที่ยืดหยุ่น</li>
            </ul>
          </div>
          <div className="where-b2b-cta">
            <a href="#" className="btn btn--accent btn--lg">สนใจเป็นตัวแทนจำหน่าย <IconArrow/></a>
            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
              <a href="#" className="btn btn--ghost-light btn--sm">LINE @stannox-b2b</a>
              <a href="#" className="btn btn--ghost-light btn--sm">โทร 02-xxx-xxxx</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer" id="contact">
    <div className="container">
      <div className="footer-cols">
        <div>
          <div className="footer-logo"><img src="assets/logo-wordmark-white.png" alt="Stannox"/></div>
          <p className="about-line">Stannox — เครื่องมือช่างมืออาชีพระดับกลาง ครบทุกหมวด หาซื้อได้ทั่วประเทศ</p>
          <div className="socials">
            <a href="#">FB</a><a href="#">IG</a><a href="#">TT</a><a href="#">YT</a><a href="#">L</a>
          </div>
        </div>
        <div>
          <h5>Catalog</h5>
          <ul>
            <li><a href="#">เครื่องมือตัด</a></li>
            <li><a href="#">ไขควง · กุญแจ</a></li>
            <li><a href="#">เครื่องมือลม</a></li>
            <li><a href="#">เลื่อย · ใบเลื่อย</a></li>
            <li><a href="#">ดูทั้งหมด →</a></li>
          </ul>
        </div>
        <div>
          <h5>Where to Buy</h5>
          <ul>
            <li><a href="#">Shopee Official</a></li>
            <li><a href="#">Lazada LazMall</a></li>
            <li><a href="#">TikTok Shop</a></li>
            <li><a href="#">ตัวแทนในจังหวัดคุณ</a></li>
            <li><a href="#">เป็นตัวแทนจำหน่าย</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li>02-xxx-xxxx (จ-ศ 9:00–17:30)</li>
            <li>LINE OA: @stannox</li>
            <li>hello@stannox.com</li>
            <li>กรุงเทพมหานคร · ประเทศไทย</li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 STANNOX CO., LTD. · ALL RIGHTS RESERVED</span>
        <span>LEAD THE INNOVATION</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Categories, BestSellers, WhyStannox, Trusted, InAction, WhereToBuy, Footer });

/* ============================================================
   HeroV2 — Product slider (yellow stage, slide L/R interaction)
   ============================================================ */
const HERO_SLIDES = [
  {
    idx: "01", category: "Power Tools · เครื่องมือไฟฟ้า",
    titleLines: ["HAMMER", "DRILL", "20V MAX"],
    code: "STX-HD205",
    spec: "20V LITHIUM-ION · 3-SPEED HAMMER DRILL · ALL-METAL CHUCK",
    stat: { tag: "20V", figure: "MAX", plus: false },
    desc: "สว่านกระแทกไร้สาย Stannox — แรง ทน ใช้งานหนัก เหมาะกับช่างมืออาชีพทุกประเภท",
    video: { title: "ดูสาธิตการใช้งาน", sub: "VIDEO · 1:42" },
    img: "assets/hero/drill.png",
  },
  {
    idx: "02", category: "Measuring · เครื่องมือวัด",
    titleLines: ["TAPE", "MEASURE", "8 METER"],
    code: "STX-MT826",
    spec: "8 M / 26 FT · AUTO-LOCK · NYLON COATED · IMPACT SHELL",
    stat: { tag: "AUTO", figure: "8M", plus: false },
    desc: "ตลับเมตร 8 ม. ตัวเรือนยางกันกระแทก — เทป Nylon Coated ทนสึก อ่านง่ายในทุกสภาพแสง",
    video: { title: "วิธีอ่านสเกล", sub: "VIDEO · 0:48" },
    img: "assets/hero/tape.png",
  },
  {
    idx: "03", category: "Hand Tools · ไขควง",
    titleLines: ["PRO-GRIP", "SCREWDRIVER", "PH2"],
    code: "STX-SD200",
    spec: "S2 STEEL SHAFT · TPR DUAL-GRIP · MAGNETIC TIP · PHILLIPS PH2",
    stat: { tag: "S2", figure: "PH2", plus: false },
    desc: "ไขควงด้าม Dual-Grip ปลายแม่เหล็ก ก้านเหล็ก S2 — ทนแรงบิด ใช้งานทุกวันไม่เสื่อมสภาพ",
    video: { title: "เทคนิคจับด้าม", sub: "VIDEO · 0:52" },
    img: "assets/hero/screwdriver.png",
  },
  {
    idx: "04", category: "Cutting · ใบตัด",
    titleLines: ["DIAMOND", "CUTTING", "DISC"],
    code: "STX-CD115",
    spec: "4.5\" / 115 MM · 13,300 RPM MAX · GRANITE · MARBLE · MASONRY",
    stat: { tag: "RPM", figure: "13.3K", plus: false },
    desc: "ใบตัดเพชร 4.5 นิ้ว ฟันเทอร์โบ — สำหรับงานหิน แกรนิต และวัสดุก่อสร้างทุกประเภท",
    video: { title: "วิธีติดตั้ง", sub: "VIDEO · 1:05" },
    img: "assets/hero/disc.png",
  },
];

/* ============================================================
   ProductArt — bold flat silhouette art for each hero slide.
   No photoreal — intentional industrial graphics on yellow stage.
   ============================================================ */
const ProductArt = ({ kind }) => {
  const INK = "#0E1A4F";       // brand deep navy
  const BLUE = "#1B2A78";      // primary
  const YEL = "#FFD60A";       // brand yellow accent
  const HI = "#FFFFFF";        // highlight
  const SHADE = "rgba(14,26,79,.18)";

  const wrap = (children) => (
    <svg viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet"
         style={{ width: "100%", height: "100%", filter: "drop-shadow(0 36px 60px rgba(14,26,79,.32))" }}>
      {children}
    </svg>
  );

  if (kind === "inflator") return wrap(<g>
    {/* Gauge dial */}
    <circle cx="300" cy="170" r="110" fill={INK}/>
    <circle cx="300" cy="170" r="86" fill={HI}/>
    <circle cx="300" cy="170" r="80" fill="none" stroke={INK} strokeWidth="4"/>
    {/* tick marks */}
    {Array.from({length:12}).map((_,n)=>{
      const a = (n / 12) * Math.PI * 1.5 - Math.PI * 1.75;
      const x1 = 300 + Math.cos(a) * 64, y1 = 170 + Math.sin(a) * 64;
      const x2 = 300 + Math.cos(a) * 76, y2 = 170 + Math.sin(a) * 76;
      return <line key={n} x1={x1} y1={y1} x2={x2} y2={y2} stroke={INK} strokeWidth={n%3===0?5:2}/>;
    })}
    {/* needle */}
    <line x1="300" y1="170" x2="346" y2="124" stroke={YEL} strokeWidth="6" strokeLinecap="round"/>
    <circle cx="300" cy="170" r="9" fill={INK}/>
    {/* Body cylinder */}
    <rect x="240" y="270" width="120" height="80" fill={INK}/>
    <rect x="240" y="270" width="120" height="14" fill={YEL}/>
    {/* Trigger handle */}
    <path d="M250 340 L250 580 Q250 620 290 620 L370 620 Q400 620 400 590 L400 340 Z" fill={INK}/>
    <rect x="280" y="380" width="90" height="180" rx="6" fill={SHADE}/>
    {/* Trigger */}
    <path d="M280 360 Q330 380 360 420 L360 460 Q340 450 320 450 L280 450 Z" fill={YEL}/>
    {/* Hose nozzle going down */}
    <rect x="186" y="320" width="60" height="36" rx="4" fill={INK}/>
    <path d="M186 330 Q140 360 130 420 Q124 470 96 510 Q70 540 60 600 L20 660 L40 670 L84 614 Q120 580 134 530 Q160 470 192 446" fill="none" stroke={INK} strokeWidth="22" strokeLinecap="round"/>
    {/* Wordmark detail */}
    <rect x="296" y="478" width="80" height="14" fill={YEL}/>
    <text x="336" y="490" textAnchor="middle" fontFamily="Kanit" fontWeight="700" fontSize="11" fill={INK} letterSpacing="2">STANNOX</text>
  </g>);

  if (kind === "plier") return wrap(<g>
    {/* Top jaw cluster */}
    <path d="M200 90 L280 60 L320 170 L290 220 L240 200 Z" fill={INK}/>
    <path d="M400 90 L320 60 L280 170 L310 220 L360 200 Z" fill={INK}/>
    {/* small teeth gap */}
    <path d="M298 130 L302 130 L302 175 L298 175 Z" fill={YEL}/>
    {/* pivot bolt */}
    <circle cx="300" cy="270" r="40" fill={INK}/>
    <circle cx="300" cy="270" r="22" fill={YEL}/>
    <circle cx="300" cy="270" r="6" fill={INK}/>
    {/* Handles (crossed) */}
    <path d="M270 290 L120 720 L180 740 L330 320 Z" fill={INK}/>
    <path d="M330 290 L480 720 L420 740 L270 320 Z" fill={INK}/>
    {/* Grip overmolds */}
    <path d="M168 600 L230 380 L268 392 L208 612 Z" fill={BLUE}/>
    <path d="M432 600 L370 380 L332 392 L392 612 Z" fill={BLUE}/>
    {/* Grip dots */}
    {Array.from({length:6}).map((_,n)=>(
      <React.Fragment key={n}>
        <circle cx={186 + (n%2)*20} cy={420 + n*30} r="4" fill={YEL}/>
        <circle cx={414 - (n%2)*20} cy={420 + n*30} r="4" fill={YEL}/>
      </React.Fragment>
    ))}
    {/* End caps */}
    <rect x="142" y="700" width="60" height="22" rx="3" fill={YEL}/>
    <rect x="398" y="700" width="60" height="22" rx="3" fill={YEL}/>
  </g>);

  if (kind === "tape") return wrap(<g>
    {/* Body shell */}
    <path d="M110 240 L490 240 Q510 240 510 260 L510 620 Q510 640 490 640 L110 640 Q90 640 90 620 L90 260 Q90 240 110 240 Z" fill={INK}/>
    {/* Yellow inset front */}
    <path d="M130 280 L470 280 Q485 280 485 295 L485 580 Q485 595 470 595 L130 595 Q115 595 115 580 L115 295 Q115 280 130 280 Z" fill={YEL}/>
    {/* Big dial circle */}
    <circle cx="300" cy="438" r="135" fill={INK}/>
    <circle cx="300" cy="438" r="110" fill={HI}/>
    {/* Inner ring */}
    <circle cx="300" cy="438" r="60" fill={YEL} stroke={INK} strokeWidth="4"/>
    <text x="300" y="450" textAnchor="middle" fontFamily="Kanit" fontWeight="800" fontSize="38" fill={INK} letterSpacing="-1">5M</text>
    {/* Wordmark strip */}
    <rect x="150" y="306" width="300" height="32" fill={INK}/>
    <text x="300" y="330" textAnchor="middle" fontFamily="Kanit" fontWeight="700" fontSize="20" fill={YEL} letterSpacing="4">STANNOX</text>
    {/* Lock button on top */}
    <rect x="260" y="200" width="80" height="44" rx="6" fill={INK}/>
    <rect x="278" y="216" width="44" height="12" rx="2" fill={YEL}/>
    {/* Clip on bottom */}
    <rect x="220" y="640" width="160" height="38" rx="4" fill={INK}/>
    <rect x="290" y="678" width="20" height="44" fill={INK}/>
    {/* Tape exit slot */}
    <rect x="92" y="430" width="20" height="50" fill="#000"/>
    <rect x="20" y="446" width="80" height="18" fill={BLUE}/>
  </g>);

  if (kind === "blade") return wrap(<g>
    {/* Main blade body — slight perspective angle */}
    <g transform="rotate(-8 300 400)">
      <path d="M80 320 L520 300 L530 360 L80 380 Z" fill={INK}/>
      {/* Top edge highlight */}
      <path d="M80 320 L520 300 L520 312 L80 332 Z" fill={SHADE}/>
      {/* Teeth strip on bottom */}
      <path d={(() => {
        let d = "M80 380 ";
        for (let x = 80; x < 520; x += 18) d += `L${x+9} 410 L${x+18} 380 `;
        d += "L520 380 Z";
        return d;
      })()} fill={INK}/>
      {/* Mount hole left */}
      <circle cx="115" cy="350" r="12" fill={YEL}/>
      {/* Mount hole right */}
      <circle cx="495" cy="332" r="10" fill={YEL}/>
      {/* Wordmark on blade */}
      <rect x="180" y="338" width="220" height="20" fill={YEL}/>
      <text x="290" y="354" textAnchor="middle" fontFamily="Kanit" fontWeight="700" fontSize="15" fill={INK} letterSpacing="3">STANNOX HSS · 24T</text>
    </g>
    {/* Second blade behind */}
    <g transform="rotate(8 300 540) translate(0 40)" opacity="0.7">
      <path d="M80 480 L520 460 L530 520 L80 540 Z" fill={BLUE}/>
      <path d={(() => {
        let d = "M80 540 ";
        for (let x = 80; x < 520; x += 18) d += `L${x+9} 568 L${x+18} 540 `;
        d += "L520 540 Z";
        return d;
      })()} fill={BLUE}/>
    </g>
    {/* Pack count badge */}
    <g transform="translate(440 620)">
      <circle r="60" fill={INK}/>
      <text textAnchor="middle" dy="-6" fontFamily="Kanit" fontWeight="700" fontSize="36" fill={YEL}>10</text>
      <text textAnchor="middle" dy="22" fontFamily="Kanit" fontWeight="500" fontSize="12" fill={HI} letterSpacing="2">PACK</text>
    </g>
  </g>);

  if (kind === "trimmer") return wrap(<g>
    {/* Outer ring */}
    <circle cx="300" cy="400" r="240" fill={INK}/>
    <circle cx="300" cy="400" r="200" fill={YEL}/>
    {/* Inner ring of nylon line — concentric rings */}
    {Array.from({length:14}).map((_,n)=>{
      const r = 200 - n*12;
      return <circle key={n} cx="300" cy="400" r={r} fill="none" stroke={INK} strokeWidth="2" opacity={0.5 - n*0.025}/>;
    })}
    {/* End tail of line */}
    <path d="M510 400 L590 380 L590 420 L510 412 Z" fill={INK}/>
    <path d="M520 392 Q560 380 588 396" fill="none" stroke={INK} strokeWidth="4"/>
    {/* Center label */}
    <circle cx="300" cy="400" r="84" fill={INK}/>
    <circle cx="300" cy="400" r="68" fill={YEL} stroke={INK} strokeWidth="3"/>
    <text x="300" y="392" textAnchor="middle" fontFamily="Kanit" fontWeight="700" fontSize="20" fill={INK} letterSpacing="1.5">STANNOX</text>
    <text x="300" y="416" textAnchor="middle" fontFamily="Kanit" fontWeight="700" fontSize="28" fill={INK}>2.4 MM</text>
    <text x="300" y="436" textAnchor="middle" fontFamily="Kanit" fontWeight="500" fontSize="11" fill={INK} letterSpacing="3">15 METER SPOOL</text>
    {/* Cross-hatch over coil suggesting texture */}
    <g opacity="0.25">
      <line x1="120" y1="280" x2="480" y2="520" stroke={INK} strokeWidth="1"/>
      <line x1="120" y1="520" x2="480" y2="280" stroke={INK} strokeWidth="1"/>
    </g>
  </g>);

  return null;
};

Object.assign(window, { ProductArt });

const HeroV2 = () => {
  const [i, setI] = React.useState(0);
  const total = HERO_SLIDES.length;
  const touchStart = React.useRef(null);

  const go = (next) => setI((next + total) % total);

  React.useEffect(() => {
    const t = setInterval(() => setI(x => (x + 1) % total), 7500);
    return () => clearInterval(t);
  }, [total]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowLeft") go(i - 1);
      if (e.key === "ArrowRight") go(i + 1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [i]);

  const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchStart.current == null) return;
    const dx = e.changedTouches[0].clientX - touchStart.current;
    if (dx > 40) go(i - 1);
    else if (dx < -40) go(i + 1);
    touchStart.current = null;
  };

  const slide = HERO_SLIDES[i];

  return (
    <section className="hero2" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
      {/* Industrial backdrop — yellow stage + watermark wordmark texture */}
      <div className="hero2-backdrop" aria-hidden="true">
        <div className="hero2-watermark">
          {Array.from({length: 6}).map((_,n) => (
            <div key={n} className="hero2-watermark-row">STANNOX · LEAD THE INNOVATION · STANNOX · LEAD THE INNOVATION · STANNOX</div>
          ))}
        </div>
        <div className="hero2-light"></div>
      </div>
      <div className="hero2-bg-num">{slide.idx}</div>
      <button className="hero2-nav hero2-nav--prev" onClick={() => go(i - 1)} aria-label="Previous">‹</button>
      <button className="hero2-nav hero2-nav--next" onClick={() => go(i + 1)} aria-label="Next">›</button>
      <div className="hero2-meta-top">
        <span className="hero2-counter">{String(i + 1).padStart(2, "0")} <span style={{ opacity: 0.4 }}>/ {String(total).padStart(2, "0")}</span></span>
      </div>

      <div className="hero2-stage">
        <div className="container">
          <div className="hero2-left">
            <div className="hero2-idx">
              <span className="num">{slide.idx}</span>
              <span className="rule"></span>
              <span>{slide.category}</span>
            </div>
            <h1 className="hero2-title">
              {slide.titleLines.map((t, n) => <span key={n}>{t}</span>)}
            </h1>
            <div className="hero2-cta">
              <a href="#categories" className="btn" style={{ background: "var(--stx-blue-deep)", color: "var(--stx-yellow-500)" }}>ดูสินค้าทั้งหมด <IconArrow/></a>
              <a href="#where" className="btn btn--ghost" style={{ borderColor: "var(--stx-blue-deep)", color: "var(--stx-blue-deep)" }}>เป็นตัวแทน</a>
            </div>
          </div>

          <div className="hero2-product">
            <div className="hero2-product-stage">
              <div className="hero2-product-slot is-active" key={i}>
                <img src={slide.img} alt={slide.code} className="hero2-product-img"/>
              </div>
            </div>
          </div>

          <div className="hero2-right">
            <div className="hero2-dots">
              {HERO_SLIDES.map((_, n) => (
                <button
                  key={n}
                  className={"hero2-dot " + (n === i ? "is-active" : "")}
                  onClick={() => go(n)}
                  aria-label={"Slide " + (n + 1)}
                />
              ))}
            </div>
            <div className="hero2-spec">
              <div className="code">{slide.code}</div>
              <div className="heavy">{slide.spec}</div>
            </div>
          </div>
        </div>
      </div>

      <div className="hero2-bar">
        <div className="container">
          <div className="hero2-bar-stat">
            <span className="badge">{slide.stat.tag}</span>
            <span className="figure">{slide.stat.figure}{slide.stat.plus && <span className="plus">+</span>}</span>
          </div>
          <p className="hero2-bar-desc">{slide.desc}</p>
          <button className="hero2-bar-video">
            <span className="play">▶</span>
            <span>{slide.video.title}<small>{slide.video.sub}</small></span>
          </button>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HeroV2 });