// ─────────── East Wind Social Club — Home page ───────────

// Signature moment: a hand of tiles that "deals" face-up on click
function DealHand() {
  const faces = [
  { char: "東", color: "#B8323A" },
  { char: "南", color: "#0F2A44" },
  { char: "中", color: "#B8323A" },
  { char: "發", color: "#2F4A37" },
  { char: "花", color: "#B8323A", flower: true }];

  const [dealt, setDealt] = useState(false);
  return (
    <div className="ew-deal">
      <div className="ew-deal__rail">
        {faces.map((f, i) =>
        <button
          key={i}
          className={"ew-tile" + (dealt ? " is-dealt" : "")}
          style={{ transitionDelay: (dealt ? i * 90 : (faces.length - i) * 50) + "ms" }}
          onClick={() => setDealt((d) => !d)}
          aria-label={dealt ? f.char : "Face-down tile"}>

            <span className="ew-tile__inner">
              <span className="ew-tile__back">
                <svg width="34" height="34" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="#C9A66B" strokeWidth="3" /><text x="50" y="66" fontFamily="Noto Serif SC, serif" fontSize="46" fontWeight="700" fill="#C9A66B" textAnchor="middle">東</text></svg>
              </span>
              <span className="ew-tile__face">
                {f.flower ?
              <svg width="46" height="64" viewBox="0 0 46 64"><g transform="translate(23,30)">{[0, 72, 144, 216, 288].map((a) => <ellipse key={a} cx="0" cy="-13" rx="7" ry="11" fill="#B8323A" transform={`rotate(${a})`} />)}<circle r="5" fill="#F2EAD3" /><circle r="2.4" fill="#C9A66B" /></g></svg> :
              <span className="ew-tile__char" style={{ color: f.color }}>{f.char}</span>}
              </span>
            </span>
          </button>
        )}
      </div>
      <p className="ew-deal__cap">{dealt ? "A winning hand — East leads." : "Tap to deal."}</p>
    </div>);

}

function HomePage({ products, onNav, onOpen, onQuickAdd, eyebrow, lede }) {
  const featured = products.slice(0, 4);
  const heroProduct = products[0];
  return (
    <div className="ew-home">

      {/* ── HERO ── */}
      <section className="ew-hero">
        <div className="ew-hero__copy">
          <span className="ew-eyebrow">{eyebrow}</span>
          <h1 className="ew-hero__title">East starts<br /><em>the game.</em></h1>
          <p className="ew-hero__lede">{lede}</p>
          <div className="ew-hero__cta">
            <Button variant="solid" onClick={() => onNav({ name: "shop" })}>Shop the line</Button>
            <Button variant="ghost" onClick={() => onNav({ name: "club" })}>Join the club →</Button>
          </div>
          <div className="ew-hero__deal"><DealHand /></div>
        </div>
        <div className="ew-hero__stage">
          <image-slot id="hero-lifestyle" class="ew-hero__photo" shape="rounded" radius="2" placeholder="Drop a lifestyle photo — friends at the table"></image-slot>
          <div className="ew-hero__float" style={{ background: heroProduct.cardBg }}>
            <div className="ew-hero__floatg"><ProductVisual product={heroProduct} /></div>
            <button className="ew-hero__floatbtn" onClick={() => onOpen(heroProduct)}>
              <span>{heroProduct.name}</span><em>{formatMoney(heroProduct.price, heroProduct.currencyCode)} →</em>
            </button>
          </div>
          <span className="ew-hero__seal"><EastMark size={72} ring="#B8323A" char="#B8323A" /></span>
        </div>
      </section>

      {/* ── THE LINE STRIP ── */}
      <section className="ew-strip">
        <div className="ew-sec-head">
          <div>
            <span className="ew-kicker">The line · Spring 2026</span>
            <h2 className="ew-sec-title">One collection, one wind.</h2>
          </div>
          <button className="ew-sec-link" onClick={() => onNav({ name: "shop" })}>View all {products.length} →</button>
        </div>
        <div className="ew-grid ew-grid--4">
          {featured.map((p) => <ProductCard key={p.id} product={p} onOpen={onOpen} onQuickAdd={onQuickAdd} />)}
        </div>
      </section>

      {/* ── STORY BAND ── */}
      <section className="ew-story">
        <div className="ew-story__seal">
          <svg width="280" height="280" viewBox="0 0 300 300" aria-label="East">
            <text x="150" y="208" fontFamily="Noto Serif SC, serif" fontSize="220" fontWeight="700" fill="#B8323A" textAnchor="middle">東</text>
          </svg>
        </div>
        <div className="ew-story__copy">
          <span className="ew-kicker ew-kicker--gold">Why 東</span>
          <h2 className="ew-story__title">East is where every<br />game begins.</h2>
          <p>In mahjong, East is the dealer — the wind that starts the round. We took the character for our name and our mark: one brushstroke that carries the game and the heritage, legible at one inch on a sleeve.</p>
          <p className="ew-story__sig">Quiet enough for dinner, loud enough to win in.</p>
          <Button variant="line" onClick={() => onNav({ name: "story" })}>Read our story</Button>
        </div>
      </section>

      {/* ── CLUB BAND ── */}
      <section className="ew-club-band">
        <div className="ew-club-band__inner">
          <span className="ew-kicker ew-kicker--gold">The Club</span>
          <h2 className="ew-club-band__title"><br />A standing table.</h2>
          <p>Membership means first access to numbered drops, a seat at hosted games in your city, and the hangtag that says you were here for Drop 01.</p>
          <div className="ew-club-band__cta">
            <Button variant="solid-cream" onClick={() => onNav({ name: "club" })}>Become a member</Button>
            <button className="ew-btn ew-btn--line-cream" onClick={() => onNav({ name: "cities" })}>See where we're playing →</button>
            <span className="ew-club-band__note">300 founding seats · 142 remaining</span>
          </div>
        </div>
      </section>

      {/* ── LOOKBOOK ── */}
      <section className="ew-look">
        <div className="ew-sec-head">
          <div>
            <span className="ew-kicker">In the wild</span>
            <h2 className="ew-sec-title">On the table, off the clock.</h2>
          </div>
          <button className="ew-sec-link" onClick={() => onNav({ name: "the-line" })}>The lookbook →</button>
        </div>
        <div className="ew-look__grid">
          <image-slot id="look-1" class="ew-look__a" shape="rounded" radius="2" placeholder="Editorial — tall"></image-slot>
          <image-slot id="look-2" class="ew-look__b" shape="rounded" radius="2" placeholder="Editorial — wide"></image-slot>
          <image-slot id="look-3" class="ew-look__c" shape="rounded" radius="2" placeholder="Detail shot"></image-slot>
        </div>
      </section>
    </div>);

}

Object.assign(window, { HomePage, DealHand });