// home.jsx — Miniera Motors homepage

function Home({ setPage }) {
  return (
    <div className="page-enter" data-screen-label="Home">
      {/* HERO */}
      <section className="hero" style={{ padding: 0 }} data-screen-label="Hero">
        <img className="hero-img" src="assets/hero-martini-pair.jpg" alt="Miniera Motors Tipo 01 pair"/>
        <div className="hero-grain"/>
        <div className="hero-overlay"/>
        <div className="hero-top">
          <span>No. 017 / 100 — Edizione Zaffiro</span>
          <span>Workshop · Emilia-Romagna · IT</span>
        </div>
        <div className="hero-content">
          <div>
            <h1 className="display">Small,<br/>by design.</h1>
          </div>
          <div>
            <p className="lead" style={{ marginBottom: 32 }}>
              Miniera Motors builds hand-assembled electric motor cars in small numbers. Each takes ninety days. Each is yours alone.
            </p>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
              <a className="btn gold on-dark" href={MM_WA.waLink("Hello Miniera — I'd like to order a Tipo 01.")} target="_blank" rel="noreferrer">
                Order your Tipo 01
                <span className="arrow">→</span>
              </a>
              <span className="btn ghost on-dark" onClick={() => setPage("workshop")}>
                Inside the workshop
                <span className="arrow">→</span>
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* OPENING EDITORIAL */}
      <section className="tight">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: "start" }}>
            <div style={{ gridColumn: "2 / span 3" }}>
              <Eyebrow>The House</Eyebrow>
            </div>
            <div style={{ gridColumn: "5 / span 7" }}>
              <h2 className="display-2" style={{ marginBottom: 32 }}>
                Built small.<br/>Built by hand.
              </h2>
              <p className="lead" style={{ maxWidth: "52ch", color: "var(--muted)" }}>
                Miniera Motors was founded on a contradiction. The most rewarding drives don't require the largest cars — they require the right ones. So we began making the right ones, at workshop scale, in small numbers, where every build is made to order and no two leave the same.
              </p>
              <div style={{ marginTop: 40 }}>
                <span className="link-arrow" onClick={() => setPage("workshop")}>
                  Inside the workshop <span>→</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* THE FILM — showcase video */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <HairlineRow label="— In motion" right="Silent loop · the Tipo 01 on film" />
          <div style={{ marginTop: 32 }}>
            <FilmShowcase />
          </div>
        </div>
      </section>

      {/* PILLARS */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="pillar-row">
            {[
              ["01", "Handbuilt in small numbers", "Each car is assembled in our workshop. Ninety days, from order to delivery. Production numbered."],,
              ["02", "Personal by default", "Paint, livery, wheels, interior — the car is specified by the owner, not by a trim level."],
              ["03", "Electric, and serious about it", "Up to 65 mph. Up to 18.5 miles per charge. Rear-engine, rear-drive layout."],
              ["04", "For your garage, not your commute", "Private use, private property. No license required. No apologies."],
            ].map(([n, h, p]) => (
              <div className="pillar" key={n}>
                <span className="num">— {n}</span>
                <h3>{h}</h3>
                <p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FULL-BLEED EDITORIAL IMAGE + SPEC CALLOUTS */}
      <section style={{ padding: 0 }}>
        <div style={{ position: "relative", background: "var(--ink)" }}>
          <img src="assets/hero-dark-gold.jpg" alt="Tipo 01 in Edizione Topazio, rear three-quarters" style={{ width: "100%", height: "auto", display: "block", opacity: 0.96 }}/>
          <div style={{ position: "absolute", top: 40, left: "var(--gut)", color: "var(--paper)" }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.7 }}>
              <span style={{ color: "var(--gold)" }}>●</span>&nbsp;&nbsp;Tipo 01 Corsa — Edizione Topazio
            </div>
          </div>
          <div style={{ position: "absolute", bottom: 40, left: "var(--gut)", right: "var(--gut)", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, color: "var(--paper)" }}>
            {[
              ["Top speed", "65", "mph"],
              ["Range", "18.5", "mi"],
              ["Build time", "90", "days"],
              ["Run size", "100", "cars"],
            ].map(([l, n, u]) => (
              <div key={l}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.55, marginBottom: 12 }}>— {l}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(36px, 4vw, 64px)", lineHeight: 1 }}>
                  {n}<span className="mono" style={{ fontSize: 14, opacity: 0.55, marginLeft: 8 }}>{u}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* THE ORDER PROCESS */}
      <section>
        <div className="wrap">
          <div className="grid-12" style={{ marginBottom: 56 }}>
            <div style={{ gridColumn: "1 / span 6" }}>
              <Eyebrow>The Process</Eyebrow>
              <h2 className="display-2" style={{ marginTop: 20 }}>Ninety days.<br/>One car.</h2>
            </div>
            <div style={{ gridColumn: "8 / span 5" }}>
              <p className="body-copy" style={{ color: "var(--muted)" }}>
                Every Miniera is made to order. We don't hold stock, and we don't discount. The wait is not a queue — it is the process itself.
              </p>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }}>
            {[
              ["Day 001", "Order", "You specify trim, paint, livery, wheels, interior. A build slot is reserved."],,
              ["Day 014", "Coachwork", "Body panels prepared. Paint laid in three coats, hand-polished, catalogued."],
              ["Day 057", "Assembly", "Drivetrain, interior, electronics. Tested on the workshop road. Build log photographed."],
              ["Day 090", "Delivery", "Crated with leather portfolio, build sheet, and the signed production plate."],,
            ].map(([day, step, desc], i) => (
              <div key={i} style={{ padding: "40px 28px", borderBottom: "1px solid var(--rule)", borderRight: i < 3 ? "1px solid var(--rule)" : "0" }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--gold)" }}>— {day}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 28, margin: "16px 0 10px" }}>{step}</div>
                <p style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.6, margin: 0 }}>{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* THE CAR — one model, two trims */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <HairlineRow label="— The Car" right="Tipo 01 · One model · Two trims" />

          {/* Intro strip */}
          <div className="grid-12" style={{ marginTop: 48, alignItems: "end" }}>
            <div style={{ gridColumn: "1 / span 6" }}>
              <Eyebrow>Model · Tipo 01</Eyebrow>
              <h2 className="display-2" style={{ marginTop: 20 }}>One car.<br/>Two temperaments.</h2>
            </div>
            <div style={{ gridColumn: "8 / span 5" }}>
              <p className="body-copy" style={{ color: "var(--muted)" }}>
                The Tipo 01 is our only car. It is built to a single set of proportions, in a single workshop, to a single standard. Where it splits is in how you choose to drive it — the calmer <em>Standard</em>, or the harder <em>Corsa</em>.
              </p>
            </div>
          </div>

          {/* Big single hero + two trim cards */}
          <div className="catalogue-split">
            <div className="catalogue-hero" onClick={() => setPage("tipo01")}>
              <img src="assets/front-silver.jpg" alt="Tipo 01"/>
              <div className="catalogue-hero-caption">
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.7 }}>— The Tipo 01</div>
                  <div className="display-3" style={{ marginTop: 6 }}>Our only car.</div>
                </div>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em" }}>Open the catalogue →</span>
              </div>
            </div>

            <div className="catalogue-trims">
              <div
                className="trim-card"
                onClick={(e) => { e.stopPropagation(); window.__mmPendingTrim = "standard"; setPage("tipo01"); }}
              >
                <div className="trim-head">
                  <div className="mono">Trim · I</div>
                  <div className="mono trim-rule">— Everyday</div>
                </div>
                <div className="trim-name">Standard</div>
                <div className="trim-stats">
                  <div><div className="trim-num">45</div><div className="trim-unit">mph</div></div>
                  <div><div className="trim-num">3,000</div><div className="trim-unit">W</div></div>
                </div>
                <p className="trim-body">The calmer of the two. A governed 45 mph top, tuned for owners who will drive it most.</p>
                <span className="trim-arrow">See the Standard <span className="arrow">→</span></span>
              </div>

              <div
                className="trim-card trim-card--dark"
                onClick={(e) => { e.stopPropagation(); window.__mmPendingTrim = "corsa"; setPage("tipo01"); }}
              >
                <div className="trim-head">
                  <div className="mono">Trim · II</div>
                  <div className="mono trim-rule" style={{ color: "var(--gold)" }}>— The harder spec</div>
                </div>
                <div className="trim-name">Corsa</div>
                <div className="trim-stats">
                  <div><div className="trim-num">65</div><div className="trim-unit">mph</div></div>
                  <div><div className="trim-num">4,000</div><div className="trim-unit">W</div></div>
                </div>
                <p className="trim-body">The hotter specification. 4,000 W, forged Fuchs, a firmer chassis. Built for the drive you planned the car around.</p>
                <span className="trim-arrow">See the Corsa <span className="arrow">→</span></span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PULL QUOTE */}
      <section className="quote-block" style={{ padding: 0 }}>
        <div style={{ padding: "clamp(100px, 12vw, 180px) var(--gut)" }}>
          <div className="wrap" style={{ textAlign: "center" }}>
            <div style={{ maxWidth: "22ch", margin: "0 auto" }}>
              <h2 className="display-2" style={{ color: "var(--paper)" }}>
                Patience is the price.<br/>
                <span style={{ color: "var(--gold)" }}>The car is the prize.</span>
              </h2>
            </div>
            <div className="author">— Miniera Motors · Brand Foundation, Art. 05</div>
          </div>
        </div>
      </section>

      {/* OWNERS' EDITORIAL */}
      <section>
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: "center" }}>
            <div style={{ gridColumn: "1 / span 6", aspectRatio: "4/5", overflow: "hidden" }}>
              <img src="assets/workshop-pair.jpg" alt="Tipo 01 and a museum 964" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            </div>
            <div style={{ gridColumn: "8 / span 5" }}>
              <Eyebrow>Owners</Eyebrow>
              <h2 className="display-2" style={{ margin: "20px 0 32px" }}>
                Not customers.<br/>Not users.
              </h2>
              <p className="body-copy" style={{ color: "var(--muted)", marginBottom: 32 }}>
                A Miniera Motors car is not a transaction. The relationship continues after delivery — through servicing, the owners' register, and the events we host each summer in the hills above the workshop.
              </p>
              <span className="link-arrow" onClick={() => setPage("commission")}>Join the owners' register →</span>
            </div>
          </div>
        </div>
      </section>

      {/* ORDER CTA BAR */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="commission-bar">
          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.55, marginBottom: 12 }}>— Orders open</div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 40px)", color: "var(--paper)" }}>
              Orders are open. The next build slot is yours to claim.
            </h3>
          </div>
          <a className="btn gold on-dark" href={MM_WA.waLink("Hello Miniera — I'd like to order a Tipo 01 for 2026.")} target="_blank" rel="noreferrer">
            Order yours
            <span className="arrow">→</span>
          </a>
        </div>
      </section>
    </div>
  );
}

function FilmShowcase() {
  // Silent showcase reel — autoplays muted, loops, no controls.
  // Editorial chrome (top meta + bottom caption) stays visible at all times.
  return (
    <div className="film film--ambient">
      <img className="film-poster" src="assets/hero-dark-gold.jpg" alt="" aria-hidden="true"/>
      <video
        src="assets/showcase.mp4"
        poster="assets/hero-dark-gold.jpg"
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        aria-label="Tipo 01 showcase reel"
        onError={(e) => { e.currentTarget.style.display = "none"; }}
      />
      <div className="film-overlay film-overlay--light"/>
      <div className="film-top">
        <span>
          <span className="film-dot"/>&nbsp;&nbsp;Now rolling
        </span>
        <span>MM · 2026 · Silent reel</span>
      </div>
      <div className="film-bottom">
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.6, marginBottom: 8 }}>— The Tipo 01, in motion</div>
          <div className="title">Body. Colour.<br/>Scale.</div>
        </div>
        <div className="meta">No audio · by design</div>
      </div>
    </div>
  );
}

window.Home = Home;