// more.jsx — Gallery, Workshop, Order pages

function Gallery({ setPage }) {
  const items = [
    { src: "assets/lineup.jpg", label: "Delivered · 2025", no: "Fig. 07", span: "1 / span 8", rows: "span 2" },
    { src: "assets/render-side-reflect.png", label: "Edizione Topazio", no: "Fig. 02", span: "9 / span 4", rows: "span 1" },
    { src: "assets/silver-side.jpg", label: "Tipo 01 Standard", no: "Fig. 03", span: "9 / span 4", rows: "span 1" },
    { src: "assets/interior-red.jpg", label: "Interior Bordeaux", no: "Fig. 04", span: "1 / span 4", rows: "span 1" },
    { src: "assets/hero-dark-gold.jpg", label: "No. 017 · Topazio", no: "Fig. 05", span: "5 / span 8", rows: "span 1" },
    { src: "assets/martini-closeup.jpg", label: "Livery detail", no: "Fig. 06", span: "1 / span 6", rows: "span 1" },
    { src: "assets/rear-detail.jpg", label: "Rear haunch", no: "Fig. 07", span: "7 / span 6", rows: "span 1" },
    { src: "assets/workshop-pair.jpg", label: "Owner's delivery", no: "Fig. 08", span: "1 / span 12", rows: "span 1" },
  ];

  return (
    <div className="page-enter" data-screen-label="Gallery">
      <section className="tight">
        <div className="wrap">
          <HairlineRow label="— Gallery" right="Owners · Workshop · Deliveries" />
          <div style={{ display: "grid", gridTemplateColumns: "2fr 3fr", gap: 32, alignItems: "end", marginTop: 32, marginBottom: 48 }}>
            <h1 className="display-2">Every one, unearthed.</h1>
            <p className="body-copy" style={{ color: "var(--muted)" }}>
              A partial record of Tipo 01 orders. Every image is our own or our owners'. Never retouched.
            </p>
          </div>
          <div className="gallery-grid">
            {items.map((it, idx) => (
              <div className="gal" key={idx} style={{ gridColumn: it.span, gridRow: it.rows, aspectRatio: it.rows === "span 2" ? "4/5" : "4/3" }}>
                <img src={it.src} alt={it.label}/>
                <div className="gal-caption">
                  <span>{it.label}</span>
                  <span>— {it.no}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function Workshop({ setPage }) {
  return (
    <div className="page-enter" data-screen-label="Workshop">
      <section className="tight">
        <div className="wrap">
          <HairlineRow label="— The Workshop" right="Delivered worldwide" />
          <div className="grid-12" style={{ marginTop: 48 }}>
            <div style={{ gridColumn: "1 / span 5" }}>
              <Eyebrow>Origin</Eyebrow>
              <h1 className="display" style={{ marginTop: 20 }}>Built by hand.<br/>Sent anywhere.</h1>
            </div>
            <div style={{ gridColumn: "7 / span 6" }}>
              <p className="lead" style={{ color: "var(--muted)" }}>
                We are a workshop, not a factory — one bench, one fixture, one set of hands. Each kart is drawn out a little at a time, in the right order, until it is finished. The wait is the craft.
              </p>
              <p className="body-copy" style={{ marginTop: 24, color: "var(--muted)" }}>
                We build in a workshop the size of a large garage, with a team small enough that every kart passes through every pair of hands. No line, no shift, no stock. Orders are taken and delivered worldwide.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: 0 }}>
        <img src="assets/workshop-bw.jpg" alt="Workshop interior" style={{ width: "100%", height: "auto", display: "block" }}/>
      </section>

      <section>
        <div className="wrap">
          <div className="grid-12">
            <div style={{ gridColumn: "2 / span 4" }}>
              <Eyebrow>Values</Eyebrow>
            </div>
            <div style={{ gridColumn: "6 / span 6" }}>
              <div style={{ display: "grid", gap: 0 }}>
                {[
                  ["Handbuilt over mass-produced.", "Every panel, every seam."],
                  ["Patience over speed-to-ship.", "Ninety days, and that is the point."],
                  ["Proprietary over borrowed.", "We invent our own marks, and we stand behind them."],
                  ["Owners over customers.", "The relationship continues after delivery."],
                  ["Quiet over loud.", "We let the photography, the materials, and the wait do the talking."],
                ].map(([h, s], i) => (
                  <div key={i} style={{ padding: "28px 0", borderTop: "1px solid var(--rule)" }}>
                    <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(24px, 2.4vw, 34px)" }}>{h}</div>
                    <div style={{ color: "var(--muted)", fontSize: 14, marginTop: 8 }}>{s}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <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 }}>— Visit</div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: "clamp(28px, 3vw, 40px)", color: "var(--paper)" }}>
              By appointment, with espresso.
            </h3>
          </div>
          <a className="btn gold on-dark" href={MM_WA.waLink("Hello Uogo — I'd like to arrange a workshop visit.")} target="_blank" rel="noreferrer">
            Request a visit <span className="arrow">→</span>
          </a>
        </div>
      </section>
    </div>
  );
}

function Commission({ setPage }) {
  const [name, setName] = React.useState("");
  const [city, setCity] = React.useState("");
  const [note, setNote] = React.useState("");

  const msg = `Hello Uogo — I'd like to place an order.\n\nName: ${name || "—"}\nCity: ${city || "—"}\nNote: ${note || "—"}`;

  return (
    <div className="page-enter" data-screen-label="Order">
      <section className="tight">
        <div className="wrap">
          <HairlineRow label="— Order" right="Orders open · Built to your schedule" />
          <div className="grid-12" style={{ marginTop: 48 }}>
            <div style={{ gridColumn: "1 / span 6" }}>
              <Eyebrow>Begin</Eyebrow>
              <h1 className="display-2" style={{ marginTop: 16 }}>Your order.</h1>
              <p className="lead" style={{ color: "var(--muted)", marginTop: 24, maxWidth: "40ch" }}>
                A short form. Sent via WhatsApp to the workshop. We reply within two working days.
              </p>
              <div style={{ marginTop: 40, padding: 24, background: "var(--paper-2)", border: "1px solid var(--rule)" }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase" }}>— The process</div>
                <ol style={{ paddingLeft: 0, listStyle: "none", margin: "16px 0 0", fontSize: 14, color: "var(--muted)", lineHeight: 2 }}>
                  <li><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", marginRight: 12 }}>01</span>Send your enquiry</li>
                  <li><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", marginRight: 12 }}>02</span>Specification call with the workshop</li>
                  <li><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", marginRight: 12 }}>03</span>Build slot reserved · 25% deposit</li>
                  <li><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", marginRight: 12 }}>04</span>Ninety-day build · photographed throughout</li>
                  <li><span style={{ color: "var(--gold)", fontFamily: "var(--mono)", marginRight: 12 }}>05</span>Delivery, worldwide, crated</li>
                </ol>
              </div>
            </div>

            <div style={{ gridColumn: "8 / span 5" }}>
              <div style={{ padding: 32, border: "1px solid var(--rule)", background: "var(--paper)" }}>
                <Field label="Your name" value={name} onChange={setName} placeholder="Firstname Lastname" />
                <Field label="City / Country" value={city} onChange={setCity} placeholder="Milano, IT" />
                <Field label="A note to the workshop" value={note} onChange={setNote} placeholder="Trim, livery ideas, or delivery window…" textarea />
                <a className="btn gold" style={{ width: "100%", justifyContent: "center", marginTop: 8 }} href={MM_WA.waLink(msg)} target="_blank" rel="noreferrer">
                  Send via WhatsApp <span className="arrow">→</span>
                </a>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--muted)", textTransform: "uppercase", marginTop: 16, textAlign: "center" }}>
                  — Opens a prefilled WhatsApp message —
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function Field({ label, value, onChange, placeholder, textarea }) {
  const Tag = textarea ? "textarea" : "input";
  return (
    <div style={{ marginBottom: 24 }}>
      <label className="mono" style={{ display: "block", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>— {label}</label>
      <Tag
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        rows={textarea ? 4 : undefined}
        style={{
          width: "100%",
          padding: "14px 0",
          border: "0",
          borderBottom: "1px solid var(--rule-strong)",
          background: "transparent",
          fontFamily: "var(--serif)",
          fontSize: 20,
          color: "inherit",
          outline: "none",
          resize: "vertical",
        }}
      />
    </div>
  );
}

function Models({ setPage }) {
  return (
    <div className="page-enter" data-screen-label="Lineup">
      {/* HEADER */}
      <section className="tight">
        <div className="wrap">
          <HairlineRow label="— The Lineup" right="01 model in production · More to come" />
          <div className="grid-12" style={{ marginTop: 48, alignItems: "end" }}>
            <div style={{ gridColumn: "1 / span 7" }}>
              <Eyebrow>House catalogue</Eyebrow>
              <h1 className="display" style={{ marginTop: 20 }}>The lineup.</h1>
              <p className="lead" style={{ marginTop: 32, maxWidth: "44ch", color: "var(--muted)" }}>
                One model in production. Two trims. The Tipo 01 is the first kart from the workshop, and for now it is the only one. The next arrives when it is ready, not before.
              </p>
            </div>
            <div style={{ gridColumn: "9 / span 4", textAlign: "right" }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>In production</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 44, marginTop: 8 }}>01</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--gold)", marginTop: 6 }}>● Tipo 01</div>
            </div>
          </div>
        </div>
      </section>

      {/* TIPO 01 LINEUP CARD */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div
            onClick={() => setPage("tipo01")}
            style={{ position: "relative", cursor: "pointer", overflow: "hidden", background: "var(--ink)", aspectRatio: "21 / 10", minHeight: 380 }}
          >
            <img src="assets/hero-martini-pair.jpg" alt="Tipo 01 lineup hero" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "brightness(0.78) contrast(1.04)" }}/>
            <div style={{ position: "absolute", top: 28, left: "var(--gut)", right: "var(--gut)", display: "flex", justifyContent: "space-between", color: "var(--paper)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.85 }}>
              <span><span style={{ color: "var(--gold)" }}>●</span>&nbsp;&nbsp;Model · Tipo 01</span>
              <span>Open the catalogue →</span>
            </div>
            <div style={{ position: "absolute", left: "var(--gut)", right: "var(--gut)", bottom: 28, color: "var(--paper)" }}>
              <div className="display-2" style={{ color: "var(--paper)" }}>The Tipo 01.</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.7, marginTop: 12 }}>Two trims · 90-day build · Numbered edition of 100</div>
            </div>
          </div>

          {/* Quick spec strip */}
          <div className="lineup-spec-strip" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderBottom: "1px solid var(--rule)" }}>
            {[
              ["Top speed", "65", "mph"],
              ["Range", "18.5", "mi"],
              ["Build", "90", "days"],
              ["Run", "100", "karts"],
            ].map(([l, n, u], i) => (
              <div key={l} style={{ padding: "32px 24px", borderTop: "1px solid var(--rule)", borderRight: i < 3 ? "1px solid var(--rule)" : "0" }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>— {l}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(32px, 3vw, 48px)", lineHeight: 1 }}>
                  {n}<span className="mono" style={{ fontSize: 13, color: "var(--muted)", marginLeft: 8 }}>{u}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TRIMS */}
      <section className="tight" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <HairlineRow label="— Trims" right="Standard · Corsa" />
          <div className="lineup-trim-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 32 }}>
            {[
              { id: "standard", name: "Standard", sub: "3000 W · 45 mph", body: "The calmer of the two. A governed 45 mph top, tuned for owners who will drive it most." },
              { id: "corsa", name: "Corsa", sub: "4000 W · 65 mph", body: "The hotter specification. 4000 W, forged Fuchs, a firmer chassis. Built for the drive you planned the kart around." },
            ].map(t => (
              <div
                key={t.id}
                onClick={() => { window.__mmPendingTrim = t.id; setPage("tipo01"); }}
                className="lineup-trim-card"
                style={{ padding: 32, border: "1px solid var(--rule)", cursor: "pointer", transition: "border-color 220ms" }}
              >
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>Tipo 01 · {t.name}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 40, marginTop: 12 }}>{t.name}</div>
                <div className="mono" style={{ fontSize: 13, marginTop: 8, color: "var(--gold)" }}>{t.sub}</div>
                <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 16, lineHeight: 1.6, maxWidth: "38ch" }}>{t.body}</p>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", marginTop: 24, display: "inline-flex", alignItems: "center", gap: 10 }}>
                  See the {t.name} <span>→</span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMING — workshop only */}
      <section style={{ padding: 0 }}>
        <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "clamp(80px, 10vw, 140px) var(--gut)" }}>
          <div className="wrap">
            <div className="grid-12" style={{ alignItems: "end" }}>
              <div style={{ gridColumn: "1 / span 7" }}>
                <Eyebrow>Next</Eyebrow>
                <h2 className="display-2" style={{ marginTop: 20, color: "var(--paper)" }}>
                  More from the workshop —<br/>
                  <span style={{ color: "var(--gold)" }}>when it is ready.</span>
                </h2>
              </div>
              <div style={{ gridColumn: "9 / span 4" }}>
                <p className="body-copy" style={{ color: "rgba(245,241,234,0.72)" }}>
                  We do not pre-announce. The second model arrives in the catalogue the day the first one is finished, and not before. Until then, the lineup is one.
                </p>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(245,241,234,0.45)", marginTop: 32 }}>
                  — Tipo 02 · status: workshop only
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Gallery, Workshop, Commission, Models });