// ==============================================
// Homepage — Inter Supply (1992) v3
// ==============================================

// ─────────────────────────────────────────────────────────────────
// ✏️  แก้แบรนด์ได้ที่นี่เลย  เพิ่ม / ลบ / เปลี่ยนชื่อ
//     logoUrl = ใส่ URL รูปโลโก้จริง (PNG/SVG) ถ้ามี หรือเว้นว่างใช้ข้อความแทน
// ─────────────────────────────────────────────────────────────────
const BRANDS_LIST = [
{ name: "Makita", country: "🇯🇵 Japan", style: "makita", logoUrl: "" },
{ name: "BOSCH", country: "🇩🇪 Germany", style: "bosch", logoUrl: "" },
{ name: "DeWALT", country: "🇺🇸 USA", style: "dewalt", logoUrl: "" },
{ name: "STANLEY", country: "🇺🇸 USA", style: "stanley", logoUrl: "" },
{ name: "Milwaukee", country: "🇺🇸 USA", style: "milwaukee", logoUrl: "" },
{ name: "TOTAL", country: "🇨🇳 China", style: "total", logoUrl: "" },
{ name: "INGCO", country: "🇨🇳 China", style: "ingco", logoUrl: "" },
{ name: "Mitutoyo", country: "🇯🇵 Japan", style: "mitutoyo", logoUrl: "" },
{ name: "KING'S", country: "🇲🇾 Malaysia", style: "kings", logoUrl: "" },
{ name: "3M", country: "🇺🇸 USA", style: "tm", logoUrl: "" },
{ name: "HITACHI", country: "🇯🇵 Japan", style: "hitachi", logoUrl: "" },
{ name: "PUMA", country: "🇮🇹 Italy", style: "puma", logoUrl: "" }
// เพิ่มแบรนด์ใหม่: { name: "ชื่อแบรนด์", country: "🇹🇭 Thailand", style: "newbrand", logoUrl: "https://..." }
];

// ─────────────────────────────────────────────────────────────────
// ✏️  แก้ลูกค้าได้ที่นี่เลย
//     logoUrl = ใส่ URL รูปโลโก้บริษัท ถ้าไม่มีจะแสดงตัวอักษรย่อ
//     color   = สีตัวอักษร (hex), bg = สีพื้นหลัง
// ─────────────────────────────────────────────────────────────────
const CUSTOMERS_LIST = [
{ name: "บมจ. ปูนซิเมนต์ไทย", logoUrl: "", color: "#0a6e3d", bg: "#dcfce7" },
{ name: "ปตท. สำรวจและผลิต", logoUrl: "", color: "#1e3a8a", bg: "#dbeafe" },
{ name: "การไฟฟ้านครหลวง", logoUrl: "", color: "#dc2626", bg: "#fee2e2" },
{ name: "บมจ. ช.การช่าง", logoUrl: "", color: "#7c3aed", bg: "#ede9fe" },
{ name: "บมจ. อิตาเลียนไทย", logoUrl: "", color: "#ea580c", bg: "#fed7aa" },
{ name: "บมจ. ซีพี ออลล์", logoUrl: "", color: "#0f172a", bg: "#e2e8f0" },
{ name: "การประปานครหลวง", logoUrl: "", color: "#0a6e3d", bg: "#dcfce7" },
{ name: "บมจ. ไทยออยล์", logoUrl: "", color: "#1e3a8a", bg: "#dbeafe" },
{ name: "บมจ. ปูนซีเมนต์นครหลวง", logoUrl: "", color: "#dc2626", bg: "#fee2e2" },
{ name: "บมจ. ซีพีเอฟ", logoUrl: "", color: "#7c3aed", bg: "#ede9fe" },
{ name: "การไฟฟ้าฝ่ายผลิต", logoUrl: "", color: "#ea580c", bg: "#fed7aa" },
{ name: "บมจ. แสนสิริ", logoUrl: "", color: "#0f172a", bg: "#e2e8f0" }
// เพิ่มลูกค้าใหม่: { name: "ชื่อบริษัท", logoUrl: "https://...", color: "#xxx", bg: "#yyy" }
];

// Brand visual styles
const brandStyles = {
  makita: { bg: "#0066b3", color: "white", weight: 800, italic: false, ls: "-0.02em" },
  bosch: { bg: "white", color: "#dc2626", weight: 700, italic: false, ls: "0.02em", border: "2px solid #e5e7eb" },
  dewalt: { bg: "#fbbf24", color: "#0f172a", weight: 900, italic: true, ls: "-0.02em" },
  stanley: { bg: "#fbbf24", color: "#0f172a", weight: 800, italic: false, ls: "0.04em" },
  milwaukee: { bg: "#dc2626", color: "white", weight: 700, italic: false, ls: "0.04em" },
  total: { bg: "white", color: "#1e3a8a", weight: 800, italic: false, ls: "0.02em", border: "2px solid #1e3a8a" },
  ingco: { bg: "#ea580c", color: "white", weight: 800, italic: false, ls: "0.04em" },
  mitutoyo: { bg: "white", color: "#0f172a", weight: 600, italic: false, ls: "0.04em", border: "2px solid #e5e7eb" },
  kings: { bg: "#0f172a", color: "#fbbf24", weight: 800, italic: false, ls: "0.04em" },
  tm: { bg: "#dc2626", color: "white", weight: 900, italic: false, ls: "-0.05em" },
  hitachi: { bg: "white", color: "#dc2626", weight: 700, italic: true, ls: "0", border: "2px solid #e5e7eb" },
  puma: { bg: "#0f172a", color: "white", weight: 800, italic: true, ls: "0.02em" }
};

// 8 หมวดหมู่ใหม่
const HOME_CATEGORIES = [
{ id: "power", th: "เครื่องมือไฟฟ้า", en: "Power Tools", icon: "drill", accent: "#1e40af", size: "large" },
{ id: "hand", th: "เครื่องมือช่าง", en: "Hand Tools", icon: "wrench", accent: "#1f2937", size: "small" },
{ id: "air", th: "เครื่องมือลม", en: "Air Tools", icon: "air", accent: "#0891b2", size: "small" },
{ id: "steel", th: "เหล็ก", en: "Steel & Metal", icon: "steel", accent: "#475569", size: "wide" },
{ id: "paint", th: "สี และอุปกรณ์", en: "Paint & Supplies", icon: "paint", accent: "#ea580c", size: "small" },
{ id: "construction", th: "วัสดุก่อสร้าง", en: "Construction", icon: "helmet", accent: "#dc2626", size: "small" },
{ id: "chemical", th: "เคมีภัณฑ์ กาว เทป", en: "Chemical & Adhesive", icon: "chemical", accent: "#7c3aed", size: "small" },
{ id: "other", th: "อื่นๆ", en: "Others", icon: "box", accent: "#64748b", size: "small" }];


function HomePage({ session, cart, addToCart, navigate, openLogin, products }) {
  const isDealer = session?.role === "dealer";

  return (
    <div className="home">

      {/* ══════════════════════════════════════════
                HERO — Bold Quotation Banner
             ══════════════════════════════════════════ */}
      <section className="hero-main">
        {/* Background layers */}
        <div className="hero-main-bg">
          <div className="hmb-grid"></div>
          <div className="hmb-glow hmb-glow-l"></div>
          <div className="hmb-glow hmb-glow-r"></div>
          <div className="hmb-diagonal"></div>
        </div>

        <div className="hero-main-inner">
          {/* Left: Big headline */}
          <div className="hero-main-copy">
            <div className="hero-tag">
              <span className="hero-tag-dot"></span>
              INTER SUPPLY (1992) CO.,LTD.
            </div>

            <h1 className="hero-main-h1">
              ขอใบเสนอราคา<br />
              <span className="hero-main-accent" style={{ lineHeight: "1.2" }}>ได้ทันที</span>
            </h1>

            <p className="hero-main-sub">
              ผู้จำหน่ายเครื่องมือช่าง เหล็ก สี น็อต-สกรู<br />
              อุปกรณ์ฮาร์ดแวร์ ที่ใช้ในโรงงานอุตสาหกรรม ทุกชนิด
            </p>

            <div className="hero-main-cta">
              <button className="hm-btn-primary" onClick={() => navigate("catalog")}>
                <Icon name="grid" size={17} />
                ดูสินค้าทั้งหมด
              </button>
              <button className="hm-btn-quote" onClick={() => navigate("cart")}>
                <Icon name="file-text" size={17} />
                ขอใบเสนอราคา
              </button>
            </div>

            <div className="hero-main-trust">
              {[
              { icon: "shield", label: "ของแท้ 100%" },
              { icon: "truck", label: "ส่งฟรี ฿2,000+" },
              { icon: "tag", label: "Dealer ส่วนลด 20%" },
              { icon: "phone", label: "02-323-3710" }].
              map((t) =>
              <div key={t.label} className="hm-trust-pill">
                  <Icon name={t.icon} size={13} />
                  <span>{t.label}</span>
                </div>
              )}
            </div>
          </div>

          {/* Right: Quick-quote form */}
          <div className="hero-main-right">
            <HeroQuoteCard navigate={navigate} />
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
                METRICS BAR
             ══════════════════════════════════════════ */}
      <section className="metrics-bar">
        <div className="container">
          <div className="metrics-grid">
            {[
            { num: 32, suffix: "+", label: "ปีแห่งประสบการณ์", note: "ก่อตั้งปี 2535" },
            { num: 8500, suffix: "+", label: "รายการสินค้า", note: "พร้อมส่งทันที" },
            { num: 2400, suffix: "+", label: "ลูกค้าองค์กร", note: "โรงงาน · รับเหมา" },
            { num: 42, suffix: "", label: "Dealer ทั่วประเทศ", note: "ตัวแทนอย่างเป็นทางการ" }].
            map((m, i) =>
            <div key={i} className="metric-cell reveal" data-delay={i + 1}>
                <div className="metric-num"><AnimatedCounter end={m.num} suffix={m.suffix} /></div>
                <div className="metric-label">{m.label}</div>
                <div className="metric-note">{m.note}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
                CATEGORIES — 8 หมวดหมู่ใหม่
             ══════════════════════════════════════════ */}
      <section className="container" style={{ paddingTop: 72, paddingBottom: 64 }}>
        <SectionHead
          eyebrow="สินค้าของเรา"
          title="หมวดหมู่สินค้า"
          subtitle="เครื่องมือช่างและอุปกรณ์อุตสาหกรรมครบทุกประเภท"
          cta={{ label: "ดูสินค้าทั้งหมด", onClick: () => navigate("catalog") }} />
        

        <div className="cat8-grid">
          {HOME_CATEGORIES.map((c, i) =>
          <div
            key={c.id}
            className={`cat8-card reveal`}
            data-delay={i % 4 + 1}
            onClick={() => navigate("catalog", { category: c.id })}
            style={{ "--c8-accent": c.accent }}>
            
              <div className="cat8-icon">
                <CatGlyph8 kind={c.icon} color={c.accent} />
              </div>
              <div className="cat8-body">
                <div className="cat8-en">{c.en}</div>
                <div className="cat8-th">{c.th}</div>
              </div>
              <div className="cat8-arrow"><Icon name="chevron-right" size={15} /></div>
              <div className="cat8-stripe"></div>
            </div>
          )}
        </div>
      </section>

      {/* ══════════════════════════════════════════
                DEALER BANNER
             ══════════════════════════════════════════ */}
      <section className="dealer-banner">
        <div className="container">
          <div className="dealer-banner-inner">
            <div className="dealer-banner-left">
              <div className="dealer-banner-tag">INTER DEALER PROGRAM</div>
              <h2 className="dealer-banner-h2">ราคาส่ง <span></span> สำหรับ Dealer</h2>
              <p>รับสินค้าหน้าร้าน · เงินสด · เช็คราคาออนไลน์ได้ตลอด 24 ชั่วโมง</p>
            </div>
            <div className="dealer-tiers">
              {[
              { name: "Bronze", pct: "5%", req: "เริ่มต้น", color: "#a16207" },
              { name: "Silver", pct: "10%", req: "฿100K+/ปี", color: "#64748b" },
              { name: "Gold", pct: "15%", req: "฿200K+/ปี", color: "#d97706" },
              { name: "Platinum", pct: "20%", req: "฿500K+/ปี", color: "#7c3aed" }].
              map((t) =>
              <div key={t.name} className="tier-pill" style={{ "--tier-color": t.color }}>
                  <div className="tier-pill-name">{t.name}</div>
                  <div className="tier-pill-pct">{t.pct}</div>
                  <div className="tier-pill-req">{t.req}</div>
                </div>
              )}
            </div>
            <button className="btn-dealer-cta" onClick={openLogin}>
              สมัคร Dealer <Icon name="chevron-right" size={14} />
            </button>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
                OUR CUSTOMERS — แก้ได้ที่ CUSTOMERS_LIST
             ══════════════════════════════════════════ */}
      <section className="customers-v2">
        <div className="container">
          <SectionHead
            eyebrow="OUR CUSTOMERS"
            title="ลูกค้าของเรา"
            subtitle="แก้ไขรายชื่อลูกค้าและโลโก้ได้ที่ตัวแปร CUSTOMERS_LIST ในไฟล์ src/home.jsx" />
          

          <div className="customers-v2-grid">
            {CUSTOMERS_LIST.map((c, i) => {
              const letter = c.name.replace(/^(บริษัท|บมจ\.|บจก\.|การ|ห้าง)/, "").trim().charAt(0);
              return (
                <div key={i} className="customer-v2-card reveal" data-delay={i % 4 + 1}>
                  {c.logoUrl ?
                  <div className="customer-v2-logo" style={{ background: "white", padding: 6 }}>
                      <img src={c.logoUrl} alt={c.name} style={{ width: "100%", height: "100%", objectFit: "contain", display: "block", borderRadius: 4 }} />
                    </div> :

                  <div className="customer-v2-logo" style={{ color: c.color, background: c.bg }}>
                      {letter}
                    </div>
                  }
                  <div className="customer-v2-name">{c.name}</div>
                </div>);

            })}
          </div>

          <p className="brands-v2-note" style={{ color: "var(--ink-500)", marginTop: 16 }}>
            <Icon name="info" size={12} />
            แก้ไขรายชื่อลูกค้า / ใส่โลโก้ได้ที่ตัวแปร <code style={{ background: "var(--ink-100)", padding: "1px 6px", borderRadius: 4 }}>CUSTOMERS_LIST</code> บรรทัดบนสุดของ <code style={{ background: "var(--ink-100)", padding: "1px 6px", borderRadius: 4 }}>src/home.jsx</code>
          </p>
        </div>
      </section>

    </div>);

}

// ── Hero Quote Card (right side) ───────────────────────────────────
function HeroQuoteCard({ navigate }) {
  return (
    <div className="hq-card">
      {/* top accent bar */}
      <div className="hq-top-bar"></div>

      <div className="hq-body">
        <div className="hq-title">
          <Icon name="file-text" size={20} style={{ color: "var(--navy-700)" }} />
          ขอใบเสนอราคาออนไลน์
        </div>
        <p className="hq-desc">
          เลือกสินค้า → กรอกข้อมูล → รับ PDF ทันที<br />
          ไม่ต้องรอ · ดาวน์โหลดและพิมพ์ได้เลย
        </p>

        <div className="hq-steps">
          {[
          { n: 1, label: "เลือกสินค้าที่ต้องการ" },
          { n: 2, label: "กรอกข้อมูลบริษัท" },
          { n: 3, label: "รับ PDF ใบเสนอราคาทันที" }].
          map((s) =>
          <div key={s.n} className="hq-step">
              <div className="hq-step-num">{s.n}</div>
              <div className="hq-step-label">{s.label}</div>
            </div>
          )}
        </div>

        <button className="hm-btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 16 }}
        onClick={() => navigate("catalog")}>
          เริ่มเลือกสินค้า <Icon name="chevron-right" size={15} />
        </button>

        <div className="hq-features">
          {[
          { icon: "download", label: "ดาวน์โหลด PDF" },
          { icon: "print", label: "พิมพ์ได้ทันที" },
          { icon: "send", label: "ส่ง Email" }].
          map((f) =>
          <div key={f.label} className="hq-feat">
              <Icon name={f.icon} size={14} style={{ color: "var(--navy-700)" }} />
              <span>{f.label}</span>
            </div>
          )}
        </div>
      </div>
    </div>);

}

// ── Category Glyphs 8 (new icons) ─────────────────────────────────
function CatGlyph8({ kind, color }) {
  const c = { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", stroke: color, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  const f = color + "20";
  switch (kind) {
    case "drill":
      return <svg {...c}><rect x="8" y="16" width="24" height="12" rx="2" fill={f} /><rect x="32" y="19" width="10" height="6" rx="1" fill={color} /><path d="M14 28v8h8v-8" /><circle cx="42" cy="22" r="2" fill={color} /></svg>;
    case "wrench":
      return <svg {...c}><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={f} /></svg>;
    case "air":
      return <svg {...c}><rect x="6" y="18" width="28" height="20" rx="4" fill={f} /><circle cx="34" cy="28" r="8" fill="none" /><circle cx="34" cy="28" r="5" fill={color + "40"} /><path d="M6 28h28M34 6v22" /></svg>;
    case "steel":
      return <svg {...c}><rect x="6" y="20" width="36" height="14" rx="1" fill={f} /><rect x="6" y="14" width="36" height="6" rx="1" fill={color + "50"} /><path d="M12 34v6M24 34v6M36 34v6M12 8v6M24 8v6M36 8v6" /></svg>;
    case "paint":
      return <svg {...c}><path d="M14 6h16l4 4v12H10V10z" fill={f} /><rect x="20" y="22" width="8" height="16" rx="2" fill={color + "60"} /><circle cx="24" cy="32" r="2" fill={color} /></svg>;
    case "helmet":
      return <svg {...c}><path d="M10 30c0-8 6-14 14-14s14 6 14 14" fill={f} /><rect x="8" y="30" width="32" height="4" fill={color + "60"} /><path d="M22 16h4v8h-4z" /></svg>;
    case "chemical":
      return <svg {...c}><path d="M18 6h12v10l6 18H12L18 16V6z" fill={f} /><circle cx="20" cy="28" r="2" fill={color} /><circle cx="28" cy="32" r="1.5" fill={color} /><circle cx="24" cy="24" r="1.5" fill={color} /></svg>;
    case "box":
      return <svg {...c}><rect x="8" y="14" width="32" height="22" rx="2" fill={f} /><path d="M8 22h32M20 14v-2h8v2" /><circle cx="24" cy="29" r="1.5" fill={color} /></svg>;
    default:
      return <svg {...c}><rect x="8" y="14" width="32" height="22" rx="2" fill={f} /></svg>;
  }
}

// ── SectionHead ────────────────────────────────────────────────────
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>);

}

// ── AnimatedCounter ────────────────────────────────────────────────
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 t0 = performance.now();
          const step = (now) => {
            const t = Math.min(1, (now - t0) / duration);
            setVal(Math.floor((1 - Math.pow(1 - t, 3)) * 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>;
}

// ── Keep compat stubs ──────────────────────────────────────────────
function BrandLogo() {return null;}
function CustomerLogo() {return null;}
function HeroStatsCards() {return null;}
function CatGlyph({ kind, color }) {return <CatGlyph8 kind={kind} color={color} />;}

Object.assign(window, {
  HomePage, SectionHead, HeroQuoteCard, HeroStatsCards,
  AnimatedCounter, CatGlyph, CatGlyph8, BrandLogo, CustomerLogo,
  BRANDS_LIST, CUSTOMERS_LIST, HOME_CATEGORIES, brandStyles
});