// configure.jsx — simplified live-swap configurator

const PAINTS = [
  { id: "argento", name: "Argento", sub: "Silver, hand-polished", color: "#cfc9bf", img: "assets/silver-side.jpg" },
  { id: "zaffiro", name: "Edizione Zaffiro", sub: "Sapphire — limited", color: "#2a4f6b", img: "assets/hero-martini-pair.jpg" },
  { id: "topazio", name: "Edizione Topazio", sub: "Topaz — champagne", color: "#c9a76a", img: "assets/hero-dark-gold.jpg" },
  { id: "bordeaux", name: "Edizione Granito", sub: "Bordeaux / oxblood", color: "#6b1f2a", img: "assets/interior-red.jpg" },
];

const LIVERIES = [
  { id: "none", name: "Unpainted", sub: "No livery" },
  { id: "pinstripe", name: "House pinstripe", sub: "Gold + bordeaux inline" },
  { id: "racing", name: "Racing stripe", sub: "Twin over centreline" },
];

const WHEELS = [
  { id: "fuchs5", name: "Fuchs 5", sub: "Silver, 5-spoke" },
  { id: "fuchs14", name: "Fuchs 14", sub: "Silver, 14-spoke" },
  { id: "turbo", name: "Turbo twist", sub: "Gold, 5-spoke" },
];

const INTERIORS = [
  { id: "nero", name: "Nero", sub: "Black leather" },
  { id: "cuoio", name: "Cuoio", sub: "Cognac leather" },
  { id: "bordeaux", name: "Bordeaux", sub: "Oxblood leather" },
];

function Configure({ setPage }) {
  const [paint, setPaint] = React.useState("argento");
  const [livery, setLivery] = React.useState("pinstripe");
  const [wheels, setWheels] = React.useState("fuchs5");
  const [interior, setInterior] = React.useState("cuoio");

  const p = PAINTS.find(x => x.id === paint);
  const l = LIVERIES.find(x => x.id === livery);
  const w = WHEELS.find(x => x.id === wheels);
  const i = INTERIORS.find(x => x.id === interior);

  const summary = `Tipo 01 Corsa · ${p.name} · ${l.name} · ${w.name} · Interior ${i.name}`;

  return (
    <div className="page-enter" data-screen-label="Configurator">
      <section className="tight">
        <div className="wrap">
          <HairlineRow label="— Configurator" right="Tipo 01 Corsa · Working order" />
          <div className="grid-12" style={{ marginTop: 32, alignItems: "end" }}>
            <div style={{ gridColumn: "1 / span 7" }}>
              <Eyebrow>Specify</Eyebrow>
              <h1 className="display-2" style={{ marginTop: 16 }}>Your Tipo 01.</h1>
            </div>
            <div style={{ gridColumn: "9 / span 4", textAlign: "right" }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase" }}>Order</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 32, marginTop: 6 }}>No. 018 / 100</div>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(340px, 1fr)", gap: 32, marginTop: 48 }}>
            {/* STAGE */}
            <div>
              <div className="cfg-stage">
                {PAINTS.map(pp => (
                  <img key={pp.id} src={pp.img} alt={pp.name} style={{ opacity: pp.id === paint ? 1 : 0 }}/>
                ))}
                {/* livery overlay */}
                {livery === "pinstripe" && (
                  <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
                    <div style={{ position: "absolute", left: "8%", right: "8%", top: "54%", height: 2, background: "var(--gold)", opacity: 0.85, mixBlendMode: "screen" }}/>
                    <div style={{ position: "absolute", left: "8%", right: "8%", top: "57%", height: 1, background: "var(--bordeaux)", opacity: 0.9, mixBlendMode: "screen" }}/>
                  </div>
                )}
                {livery === "racing" && (
                  <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
                    <div style={{ position: "absolute", left: "46%", top: 0, bottom: 0, width: 18, background: "var(--paper)", opacity: 0.45, mixBlendMode: "overlay" }}/>
                    <div style={{ position: "absolute", left: "51.5%", top: 0, bottom: 0, width: 6, background: "var(--gold)", opacity: 0.8, mixBlendMode: "screen" }}/>
                  </div>
                )}
                <div className="cfg-hud">
                  <span><span className="dot"/>Live preview</span>
                  <span>Fig. — Edizione {p.name.replace("Edizione ", "")}</span>
                </div>
                <div className="cfg-stamp">— Working order · Saved to workshop</div>
              </div>

              {/* Summary strip */}
              <div style={{ marginTop: 16, padding: "20px 24px", background: "var(--ink)", color: "var(--paper)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.55 }}>— Your specification</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 20, marginTop: 6 }}>{summary}</div>
                </div>
                <a className="btn gold on-dark" href={MM_WA.waLink(`Hello Miniera — I'd like to order this spec: ${summary}`)} target="_blank" rel="noreferrer">
                  Order this spec <span className="arrow">→</span>
                </a>
              </div>
            </div>

            {/* PANEL */}
            <div className="cfg-panel">
              <div className="cfg-section">
                <div className="cfg-section-head">
                  <span className="label">— 01 · Coachwork</span>
                  <span className="value">{p.name}</span>
                </div>
                <div className="swatch-row">
                  {PAINTS.map(pp => (
                    <div key={pp.id}
                      className={`swatch ${pp.id === paint ? "active" : ""}`}
                      style={{ background: pp.color }}
                      onClick={() => setPaint(pp.id)}
                      title={pp.name}
                    />
                  ))}
                </div>
                <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 12, letterSpacing: "0.12em", textTransform: "uppercase" }}>{p.sub}</div>
              </div>

              <div className="cfg-section">
                <div className="cfg-section-head">
                  <span className="label">— 02 · Livery</span>
                  <span className="value">{l.name}</span>
                </div>
                <div className="option-row">
                  {LIVERIES.map(o => (
                    <button key={o.id} className={`option ${o.id === livery ? "active" : ""}`} onClick={() => setLivery(o.id)}>
                      {o.name}<span className="sub">{o.sub}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="cfg-section">
                <div className="cfg-section-head">
                  <span className="label">— 03 · Wheels</span>
                  <span className="value">{w.name}</span>
                </div>
                <div className="option-row">
                  {WHEELS.map(o => (
                    <button key={o.id} className={`option ${o.id === wheels ? "active" : ""}`} onClick={() => setWheels(o.id)}>
                      {o.name}<span className="sub">{o.sub}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="cfg-section">
                <div className="cfg-section-head">
                  <span className="label">— 04 · Interior</span>
                  <span className="value">{i.name}</span>
                </div>
                <div className="option-row">
                  {INTERIORS.map(o => (
                    <button key={o.id} className={`option ${o.id === interior ? "active" : ""}`} onClick={() => setInterior(o.id)}>
                      {o.name}<span className="sub">{o.sub}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div style={{ marginTop: 32, padding: "20px 0 0", borderTop: "1px solid var(--rule)" }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase" }}>— Build window</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 28, marginTop: 8 }}>Ninety-day build</div>
                <p style={{ fontSize: 12, color: "var(--muted)", marginTop: 8 }}>Build window opens the day your order is confirmed. Final figures set by the workshop.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Configure = Configure;