// 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)" }}>
                The name <em>Miniera</em> comes from the word for a mine — the place where something precious is drawn out and refined, a little at a time. That is the pace we work at. 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 car 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 Miniera — 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 Miniera — 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 }) {
  // Alias to Tipo 01 overview — single-model house at launch
  return <Tipo01 setPage={setPage}/>;
}

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