// Marmar Halim — Home page
const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH } = React;

function Home({ go, openProduct }) {
  const { PRODUCTS, COLLECTIONS, LINES, fmtAED } = window.MMH_DATA;
  const featured = useMemoH(() => [PRODUCTS[5], PRODUCTS[3], PRODUCTS[7], PRODUCTS[13], PRODUCTS[10], PRODUCTS[14]], []);

  return (
    <div className="page-enter" data-screen-label="Home">
      {/* Hero */}
      <section className="hero">
        <img src="media/campaign-ss25-my-girl.webp" alt="SS25 — My Girl campaign" />
        <div className="container hero-inner">
          <div>
            <div className="hero-pill"><span className="dot"></span><span>SS25 · An Ode to Womanhood</span></div>
          </div>
          <div>
            <h1>An ode to <em>womanhood.</em></h1>
            <p className="hero-sub">
              Sculptural, hand-pleated eveningwear and couture — designed in Dubai by Marmar Halim. Each manipulation done by hand, inspired by the twists and curves of nature.
            </p>
            <div className="hero-ctas">
              <button className="btn btn--ivory btn--lg" onClick={() => go("appointments")}>Book a Fitting <span className="arrow"></span></button>
              <button className="btn btn--gold btn--lg" onClick={() => go("collections")}>Explore Collections <span className="arrow"></span></button>
            </div>
          </div>
          <div className="hero-meta">
            <div className="mono" style={{ color: "rgba(251,247,241,0.7)" }}>01 — Spring/Summer 2026</div>
            <div className="mono" style={{ color: "rgba(251,247,241,0.7)" }}>Dubai · Milan · Cairo</div>
          </div>
        </div>
      </section>

      {/* Strip */}
      <div className="strip" aria-hidden="true">
        <div className="strip-track">
          {Array.from({ length: 2 }).map((_, k) => (
            <React.Fragment key={k}>
              <span className="strip-item"><span style={{ fontFamily: "var(--serif)", fontSize: 20, textTransform: "none", letterSpacing: 0.02 + "em" }}>Made to Order</span><span className="sep"></span><span>4–6 Weeks</span></span>
              <span className="strip-item"><span style={{ fontFamily: "var(--serif)", fontSize: 20, textTransform: "none" }}>Hand Pleated · Hand Draped</span></span>
              <span className="strip-item"><span style={{ fontFamily: "var(--serif)", fontSize: 20, textTransform: "none" }}>Stocked at Moda Operandi</span></span>
              <span className="strip-item"><span style={{ fontFamily: "var(--serif)", fontSize: 20, textTransform: "none" }}>Shown at Dubai Fashion Week 2019</span></span>
              <span className="strip-item"><span style={{ fontFamily: "var(--serif)", fontSize: 20, textTransform: "none" }}>Atelier · Dubai Design District</span></span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Collections grid */}
      <section className="section container">
        <SectionHead
          eyebrow="Seasons · Lines"
          title={<span>Four <em>collections,</em><br/>one hand.</span>}
          meta={
            <>
              <p>Two seasonal lines a year, the on-going couture book, and a quietly distinct modest range. Every gown comes off the same atelier table in Dubai Design District.</p>
              <button className="link-under" onClick={() => go("collections")}>All Collections →</button>
            </>
          }
        />
        <div className="collections-grid">
          {COLLECTIONS.map((c, i) => (
            <div key={c.id} className={"collection-card " + (i === 0 ? "tall" : "")} onClick={() => go(i === 0 ? "collections" : c.id === "bridal-25" ? "bridal" : c.id === "couture-25" ? "couture" : "collections")}>
              <span className="num">{String(i + 1).padStart(2, "0")} / 04</span>
              <div className="ratio"><img src={c.img} alt={c.title + " — " + c.season} loading="lazy" /></div>
              <div className="label">
                <div>
                  <div className="meta">{c.season} · {c.looks} looks</div>
                  <div className="season">{c.title}</div>
                </div>
                <div className="mono" style={{ color: "rgba(251,247,241,0.85)" }}>→</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Craft */}
      <section className="section container">
        <div className="craft">
          <div className="img">
            <img src="media/campaign-02.webp" alt="Hand pleating detail" loading="lazy" />
          </div>
          <div className="copy">
            <div className="eyebrow gold" style={{ marginBottom: 18 }}>The Craft · 02</div>
            <h2>Each pleat shaped <em>by hand,</em> from a single length of cloth.</h2>
            <p>
              Pleating and draping are not finishes in this house — they are the design. The atelier folds silk taffeta and chiffon by hand, working from a sculpted body block rather than a flat pattern. Nothing is heat-set into permanence; the fabric is allowed to keep its breath.
            </p>
            <dl className="list">
              <div><dt>Technique</dt><dd>Hand pleating &amp; draping</dd></div>
              <div><dt>Fabrics</dt><dd>Silk taffeta · georgette · chiffon</dd></div>
              <div><dt>Lead Time</dt><dd>4–6 weeks ready-to-order</dd></div>
              <div><dt>Atelier</dt><dd>Dubai Design District</dd></div>
            </dl>
            <button className="btn btn--ghost" onClick={() => go("designer")}>The Designer's Story <span className="arrow"></span></button>
          </div>
        </div>
      </section>

      {/* Lines */}
      <section className="section--tight container">
        <SectionHead
          eyebrow="The Four Lines"
          title={<span>Four ways into the <em>house.</em></span>}
          meta={<p>Every line draws from the same hands — the difference is the moment it dresses. Choose a path; we'll meet you at the next fitting.</p>}
        />
      </section>
      <section className="lines">
        {LINES.map((l) => (
          <button key={l.id} className="line-card" onClick={() => go(l.route)}>
            <div className="num">— {l.num}</div>
            <div className="name">{l.name}</div>
            <div className="desc">{l.desc}</div>
            <div className="more">View · <span className="arrow" style={{ display: "inline-block", width: 16, height: 1, background: "currentColor", position: "relative" }}></span></div>
          </button>
        ))}
      </section>

      {/* Featured pieces */}
      <section className="section container">
        <SectionHead
          eyebrow="From SS25 · My Girl"
          title={<span>Pieces in the <em>atelier</em> this month.</span>}
          meta={
            <>
              <p>A small edit of the SS25 ready-to-order book. Every gown is made for you over four to six weeks. Customisation is welcome — speak to the atelier before placing your order.</p>
              <button className="link-under" onClick={() => go("shop")}>Shop Eveningwear →</button>
            </>
          }
        />
        <div className="products-grid">
          {featured.map((p) => <ProductCard key={p.id} p={p} onOpen={openProduct} />)}
        </div>
      </section>

      {/* Founder quote */}
      <section className="quote-band">
        <div className="container">
          <div className="eyebrow gold" style={{ marginBottom: 28 }}>The Designer</div>
          <q>
            My process always begins with a feeling. Then I turn to fabric — the way it moves often tells me what it wants to become.
          </q>
          <div className="cite"><span className="rule"></span><span>Marmar Halim · Founder &amp; Creative Director</span></div>
        </div>
      </section>

      {/* Press strip dark */}
      <section className="dark section--tight">
        <div className="container">
          <SectionHead
            eyebrow="Recognition"
            title={<span style={{ color: "var(--ivory)" }}>The house, <em style={{ color: "rgba(251,247,241,0.7)" }}>in good company.</em></span>}
            meta={<p style={{ color: "rgba(251,247,241,0.7)" }}>Stocked, shown and read where the eveningwear conversation is happening.</p>}
          />
          <div className="press" style={{ borderColor: "rgba(251,247,241,0.14)" }}>
            <span className="press-item">Moda Operandi</span>
            <span className="press-item small">·</span>
            <span className="press-item">Dubai Fashion Week 2019</span>
            <span className="press-item small">·</span>
            <span className="press-item">SheerLuxe ME</span>
            <span className="press-item small">·</span>
            <span className="press-item">THE WED</span>
            <span className="press-item small">·</span>
            <span className="press-item">New Couture</span>
          </div>
          <div style={{ textAlign: "center", marginTop: 36 }}>
            <button className="link-under" style={{ color: "var(--accent)" }} onClick={() => go("stockists")}>Stockists &amp; Press →</button>
          </div>
        </div>
      </section>

      {/* Closing CTA */}
      <section className="closing">
        <img src="media/editorial-campaign-eye.webp" alt="" />
        <div className="closing-inner">
          <div className="eyebrow gold" style={{ marginBottom: 24, color: "var(--accent)" }}>By Appointment</div>
          <h2>Come to the <em>atelier.</em></h2>
          <p>A fitting at Dubai Design District is by appointment and unhurried. For couture and bridal, the first conversation usually happens before a single measurement is taken.</p>
          <div className="closing-ctas">
            <button className="btn btn--ivory btn--lg" onClick={() => go("appointments")}>Book a Fitting <span className="arrow"></span></button>
            <a className="btn btn--gold btn--lg" href="https://wa.me/971564973497" target="_blank" rel="noreferrer">WhatsApp +971 56 497 3497 <span className="arrow"></span></a>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });