// ET Storefront concept — Home (curated cabinet gallery)
function HomeScreen({ nav, addToCart }) {
  const DS = window.ETDesignSystem_0c923e;
  const { SectionHeader, ProductCard, Button, Tag, Badge } = DS;
  const { PhotoSlot, Icon, money, PRODUCTS, VIBES } = window;

  const hero = window.byId("meteorite");
  const newArrivals = PRODUCTS.slice(0, 5);
  const shelves = [PRODUCTS.slice(0, 2), PRODUCTS.slice(2, 4), PRODUCTS.slice(4, 6)];

  return (
    <div style={{ paddingBottom: 8 }}>
      {/* ── Hero ─────────────────────────────────────────── */}
      <section style={{ background: "var(--surface-band)", padding: "30px 22px 34px" }}>
        <div className="et-kicker" style={{ color: "var(--et-brown)" }}>ตู้ของแปลกที่คัดมาแล้ว</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 34, lineHeight: 1.1, margin: "10px 0 0", letterSpacing: "0.005em" }}>
          ของแปลกจากทั่วโลก<br />ที่เราเลือกมาให้แล้ว
        </h1>
        <p className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--text-secondary)", margin: "12px 0 0", maxWidth: 320 }}>
          ของหายาก-นำเข้าทีละชิ้น มีเรื่องเล่าของมันเอง คัดมาแล้วว่าแปลกพอจะอยู่ในตู้คุณ
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
          <Button variant="primary" size="md" style={{ whiteSpace: "nowrap" }} onClick={() => nav("collection")}>เข้าดูในตู้</Button>
          <Button variant="secondary" size="md" style={{ whiteSpace: "nowrap" }} onClick={() => nav("pdp", "meteorite")}>เรื่องของชิ้นเด่น</Button>
        </div>

        {/* featured vitrine */}
        <div style={{ marginTop: 24, position: "relative" }}>
          <PhotoSlot label="hero · vitrine shot" ratio="4 / 3" radius="var(--r-4)" tone="plain" />
          <div style={{ position: "absolute", left: 14, bottom: 14, width: 218, background: "var(--et-white)", borderRadius: "var(--r-2)", padding: "11px 14px", boxShadow: "var(--shadow-2)", border: "1px solid var(--line-hairline)" }}>
            <div className="et-microlabel">ชิ้นเด่นประจำตู้</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 14.5, lineHeight: 1.2, marginTop: 3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{hero.name}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15 }}>{money(hero.price)}</span>
              <Badge tone="brand">{hero.badge}</Badge>
            </div>
          </div>
        </div>
      </section>

      {/* ── New arrivals rail ────────────────────────────── */}
      <section style={{ padding: "30px 0 8px" }}>
        <div style={{ padding: "0 22px" }}>
          <SectionHeader label="ของเข้าใหม่" title="เพิ่งเข้าตู้" actionText="ดูทั้งหมด" onAction={(e) => { e.preventDefault(); nav("collection"); }} />
        </div>
        <div className="et-rail" style={{ marginTop: 18 }}>
          {newArrivals.map((p) => (
            <div key={p.id} style={{ width: 156, flex: "0 0 auto" }}>
              <ProductCard name={p.name} price={money(p.price)} origin={p.origin} badge={p.badge} badgeTone={p.badgeTone} onClick={() => nav("pdp", p.id)} />
            </div>
          ))}
        </div>
      </section>

      {/* ── Shop by vibe ─────────────────────────────────── */}
      <section style={{ padding: "26px 22px 8px" }}>
        <SectionHeader label="เลือกตามอารมณ์" title="อยากได้แนวไหน" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 18 }}>
          {VIBES.filter((v) => v.id !== "all").map((v) => (
            <button key={v.id} onClick={() => nav("collection", v.id)} className="et-vibe">
              <PhotoSlot label={"vibe · " + v.id} ratio="16 / 10" radius="var(--r-3)" tone="band" />
              <div style={{ padding: "10px 12px 12px" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 17, lineHeight: 1.1 }}>{v.th}</div>
                <div className="et-microlabel" style={{ marginTop: 3 }}>{v.en}</div>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* ── In the cabinet — shelf rhythm ────────────────── */}
      <section style={{ padding: "30px 22px 10px" }}>
        <SectionHeader label="ในตู้ตอนนี้" title="ของที่อยู่บนหิ้ง" actionText="ทั้งตู้" onAction={(e) => { e.preventDefault(); nav("collection"); }} />
        <div className="et-cabinet" style={{ marginTop: 18 }}>
          {shelves.map((row, ri) => (
            <div key={ri} className="et-shelf">
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                {row.map((p) => (
                  <button key={p.id} className="et-shelfitem" onClick={() => nav("pdp", p.id)}>
                    <PhotoSlot label={p.id} ratio="1 / 1" radius="var(--r-2)" tone="plain" />
                    <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, marginTop: 9, lineHeight: 1.35 }}>{p.name}</div>
                    <div className="et-microlabel" style={{ marginTop: 3 }}>{p.rarity}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, marginTop: 5 }}>{money(p.price)}</div>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Featured find story band ─────────────────────── */}
      <section style={{ background: "var(--surface-soft)", padding: "32px 22px", marginTop: 16 }}>
        <div className="et-kicker" style={{ color: "var(--et-brown)" }}>เรื่องของชิ้นนี้</div>
        <div style={{ marginTop: 14 }}>
          <PhotoSlot label="story · campo del cielo" ratio="3 / 2" radius="var(--r-3)" tone="plain" />
        </div>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24, lineHeight: 1.15, margin: "16px 0 0" }}>
          เหล็กที่ตกจากฟ้า เมื่อ 4,500 ปีก่อน
        </h2>
        <p className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-secondary)", margin: "10px 0 0" }}>
          อุกกาบาต Campo del Cielo จากอาร์เจนตินา เจียรเปิดผิวให้เห็นลายผลึกที่เกิดขึ้นได้เฉพาะในอวกาศ — เราเล่าให้ฟังตั้งแต่หลุมที่มันตก จนถึงใบรับรองที่มากับมัน
        </p>
        <button className="et-textlink" onClick={() => nav("pdp", "meteorite")} style={{ marginTop: 14 }}>
          อ่านเรื่องเต็มของชิ้นนี้ <Icon name="arrowR" size={16} stroke="var(--et-brown)" />
        </button>
      </section>

      {/* ── Curator promise / trust ──────────────────────── */}
      <section style={{ padding: "32px 22px 36px" }}>
        <div style={{ textAlign: "center" }}>
          <div className="et-kicker" style={{ color: "var(--et-brown)" }}>ทำไมต้องซื้อกับ ET</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 23, margin: "8px 0 0" }}>เราเลือกมาแล้ว คุณไม่ต้องเดา</h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 22 }}>
          {[
            { i: "sparkle", h: "คัดเองทุกชิ้น", t: "ไม่ดรอปชิป ไม่ขายตามกระแส — ของแปลกที่เราอยากเก็บเองก่อน" },
            { i: "shield", h: "ของแท้ มีที่มา", t: "ทุกชิ้นบอกแหล่งที่มาจริง บางชิ้นมีใบรับรองและการ์ดประจำชิ้น" },
            { i: "chat", h: "ทักถามได้ก่อนซื้อ", t: "ไม่แน่ใจ ทักทาง LINE ถามรูปเพิ่ม สเปก หรือขอวิดีโอได้เลย" },
          ].map((b) => (
            <div key={b.h} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: "16px", background: "var(--surface-card)", border: "1px solid var(--line-hairline)", borderRadius: "var(--r-3)" }}>
              <div style={{ flex: "0 0 auto", width: 38, height: 38, borderRadius: "var(--r-2)", background: "var(--et-brown-soft)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={b.i} size={20} stroke="var(--et-brown)" />
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 16.5 }}>{b.h}</div>
                <div className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-secondary)", marginTop: 3 }}>{b.t}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <window.Footer nav={nav} />
    </div>
  );
}
window.HomeScreen = HomeScreen;