// tipo01.jsx — Tipo 01 product page

function Tipo01({ setPage }) {
  // Allow the homepage teaser to preselect a trim via window.__mmPendingTrim
  const initial = (typeof window !== "undefined" && window.__mmPendingTrim) || "corsa";
  if (typeof window !== "undefined") window.__mmPendingTrim = null;
  const [trim, setTrim] = React.useState(initial);
  const active = trim === "corsa"
    ? { name: "Corsa", top: "65", power: "4000", zero: "6.8", wheels: "Fuchs, 14-spoke", price: "On request" }
    : { name: "Standard", top: "45", power: "3000", zero: "9.4", wheels: "Fuchs, 5-spoke", price: "On request" };

  return (
    <div className="page-enter" data-screen-label="Tipo 01">
      {/* HEADER */}
      <section className="tight">
        <div className="wrap">
          <HairlineRow label="— Miniera Motors · Model Catalogue" right="Tipo 01 · Made to order" />
          <div className="grid-12" style={{ marginTop: 48, alignItems: "end" }}>
            <div style={{ gridColumn: "1 / span 7" }}>
              <Eyebrow>Model · Tipo 01</Eyebrow>
              <h1 className="display" style={{ marginTop: 20 }}>The Tipo 01.</h1>
              <p className="lead" style={{ marginTop: 32, maxWidth: "40ch", color: "var(--muted)" }}>
                Rear engine, rear drive. Up to 65 miles per hour. Up to 18.5 miles per charge. Built to order, in ninety days, to your specification.
              </p>
            </div>
            <div style={{ gridColumn: "9 / span 4", textAlign: "right" }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>Build slot</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 44, marginTop: 8 }}>No. 018 / 100</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--gold)", marginTop: 6 }}>● Orders open</div>
            </div>
          </div>
        </div>
      </section>

      {/* HERO IMAGE */}
      <section style={{ padding: 0 }}>
        <div style={{ position: "relative", background: "var(--paper-2)" }}>
          <img src="assets/front-silver.jpg" alt="Tipo 01 front" style={{ width: "100%", height: "auto", maxHeight: "80vh", objectFit: "cover", display: "block" }}/>
          <div style={{ position: "absolute", bottom: 24, left: "var(--gut)", right: "var(--gut)", display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink)" }}>
            <span><span style={{ color: "var(--gold)" }}>●</span>&nbsp; Tipo 01 — Edizione Argento</span>
            <span>Fig. 01 / 04</span>
          </div>
        </div>
      </section>

      {/* TRIM SELECTOR */}
      <section>
        <div className="wrap">
          <HairlineRow label="— Specification" right={`Trim · ${active.name}`} />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 32, marginBottom: 48 }}>
            {[
              ["standard", "Standard", "3000 W · 45 mph", "The everyday trim."],
              ["corsa", "Corsa", "4000 W · 65 mph", "The hotter specification."],
            ].map(([k, label, sub, desc]) => (
              <div
                key={k}
                onClick={() => setTrim(k)}
                style={{
                  padding: 32,
                  border: `1px solid ${trim === k ? "var(--ink)" : "var(--rule)"}`,
                  background: trim === k ? "var(--ink)" : "transparent",
                  color: trim === k ? "var(--paper)" : "inherit",
                  cursor: "pointer",
                  transition: "all 300ms",
                }}
              >
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.6 }}>Tipo 01 · {label}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 40, marginTop: 12 }}>{label}</div>
                <div className="mono" style={{ fontSize: 13, marginTop: 8, opacity: 0.7 }}>{sub}</div>
                <div style={{ fontSize: 13, marginTop: 16, opacity: 0.8, maxWidth: "28ch" }}>{desc}</div>
              </div>
            ))}
          </div>

          {/* BIG SPEC TABLE */}
          <div>
            {[
              ["Top speed", active.top, "mph", "Governed. Private-use only."],
              ["Range", "18.5", "mi", "Per full charge, on a mixed cycle."],
              ["Power", active.power, "W", "Brushless rear motor."],
              ["0 — 30 mph", active.zero, "s", "Manufacturer figure."],
              ["Layout", "RR", "", "Rear engine, rear drive."],
              ["Wheels", active.wheels, "", "16-inch, forged."],
              ["Length", "86.61", "in", "2200 mm · single-seat coachwork."],
              ["Width", "43.31", "in", "1100 mm across the front arches."],
              ["Height", "27.56", "in", "700 mm to the roof line."],
              ["Kerb weight", "242.5", "lb", "110 kg dry."],
              ["Load capacity", "650", "lb", "Single-seat, adult-rated."],
              ["Build", "90", "days", "Made to order, numbered, catalogued."],
              ["Price", active.price, "", "All figures exclusive of livery and interior upgrades."],
            ].map(([l, n, u, note], i) => (
              <div className="spec-row" key={i}>
                <span className="label">— {l}</span>
                <span className="big">{n}<span className="unit">{u}</span></span>
                <span></span>
                <span className="note">{note}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURES — the real product details, in Miniera voice */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <HairlineRow label="— Features" right="Every Tipo 01, as standard" />
          <div className="features-grid">
            {[
              {
                n: "F/01",
                title: "Electric drivetrain",
                body: "Two power specifications. The Standard develops 3000 W for a governed top of 45 mph. The Corsa develops 4000 W for a governed top of 65 mph. Fully electric, zero-emission, silent until asked otherwise.",
              },
              {
                n: "F/02",
                title: "Adjustable speed limiter",
                body: "A driver-selectable limiter, set by key at the workshop or by the owner at home. Three stages, from a walking pace to the full governed top speed. Intended for owners who share the car between experience levels.",
              },
              {
                n: "F/03",
                title: "Range · 18.5 miles",
                body: "Up to 18.5 miles on a full charge, on a mixed cycle. Charging is from a standard domestic outlet. No proprietary dock, no subscription.",
              },
              {
                n: "F/04",
                title: "Responsive braking",
                body: "A proportional hydraulic braking system tuned at the workshop for predictable, linear response from the first millimetre of pedal travel. Regenerative retardation on lift-off, blended into the pedal.",
              },
              {
                n: "F/05",
                title: "LED lighting, front and rear",
                body: "Headlights and taillights in full LED. Shaped to read as a motor car, not an appliance — round front lenses, a continuous rear bar. Daytime running on as standard.",
              },
              {
                n: "F/06",
                title: "Engine-voice system",
                body: "A tuned sound system returns a mechanical note to the driver when asked — configurable, from silent to the throaty register of the cars the Tipo 01 draws from. The car answers back when you ask it to.",
              },
              {
                n: "F/07",
                title: "Rear-engine, rear-drive layout",
                body: "The drivetrain sits behind the driver, over the rear axle. The same architecture as the cars that inspired the Tipo 01. Weight distribution, turn-in, and the voice of the machine all follow from this one decision.",
              },
              {
                n: "F/08",
                title: "Dimensions · 2200 × 1100 × 700 mm",
                body: "86.61 × 43.31 × 27.56 inches. Small enough to live in a garage. Large enough to be taken seriously on a private road. Kerb weight 242.5 lb (110 kg). Load capacity up to 650 lb.",
              },
              {
                n: "F/09",
                title: "Paint, livery, wheels, interior",
                body: "Four base paint colours, three hand-applied liveries, three wheel sets, four interior leathers. Specified in the configurator, confirmed on the build sheet, hand-finished in the workshop.",
              },
            ].map((f, i) => (
              <div className="feature-card" key={i}>
                <div className="mono feature-num">{f.n}</div>
                <div className="feature-title">{f.title}</div>
                <p className="feature-body">{f.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DETAIL GALLERY */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <HairlineRow label="— Coachwork, in detail" right="Photographed in the workshop" />
          <div className="grid-12" style={{ marginTop: 32, gap: 16 }}>
            <div style={{ gridColumn: "1 / span 7", aspectRatio: "4/3", overflow: "hidden" }}>
              <img src="assets/rear-detail.jpg" alt="Rear haunch detail" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            </div>
            <div style={{ gridColumn: "8 / span 5", display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ aspectRatio: "4/3", overflow: "hidden" }}>
                <img src="assets/render-top.jpg" alt="Interior" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              </div>
              <div style={{ aspectRatio: "4/3", overflow: "hidden" }}>
                <img src="assets/martini-closeup.jpg" alt="Livery detail" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CONFIGURE CTA */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center", padding: "48px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
            <div>
              <Eyebrow>Next</Eyebrow>
              <h3 className="display-3" style={{ marginTop: 16 }}>Specify your Tipo 01.</h3>
              <p style={{ color: "var(--muted)", marginTop: 8, maxWidth: "48ch" }}>Paint, livery, wheels, interior. Live preview, saved to your build sheet.</p>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <span className="btn" onClick={() => setPage("configure")}>Build yours <span className="arrow">→</span></span>
              <a className="btn ghost" href={MM_WA.waLink("Hello Miniera — I'd like to discuss a Tipo 01 Corsa order.")} target="_blank" rel="noreferrer">Talk to the workshop</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Tipo01 = Tipo01;