// Lumen: Made of Memories — dedicated product page
const { useState, useEffect } = React;

function LumenHero({ accent, headlineStyle }) {
  return (
    <section className="hero" data-screen-label="01 Lumen Hero">
      <window.HeroGrid accent={accent} density={18} />
      <div className="vignette" />
      <div className="content">
        <div>
          <div className="breadcrumb">
            <a href="index.html">Studio WIBI</a>
            <span className="sep">/</span>
            <a href="index.html#work">Work</a>
            <span className="sep">/</span>
            <span style={{ color: "var(--ink)" }}>Lumen — Edition 001</span>
          </div>
          <h1>
            {headlineStyle === "sans" && (
              <>
                <span className="lumen">Lumen.</span>
                <span className="lumen" style={{ color: "var(--amber-deep)" }}>Made of Memories.</span>
              </>
            )}
            {headlineStyle === "mixed" && (
              <>
                <span className="lumen">Lumen.</span>
                <span className="made">Made of Memories.</span>
              </>
            )}
            {headlineStyle === "serif" && (
              <>
                <span className="made" style={{ color: "var(--ink)" }}>Lumen.</span>
                <span className="made">Made of Memories.</span>
              </>
            )}
          </h1>
        </div>

        <div>
          <div className="sub-row">
            <p className="sub">
              <strong>Framed scale models of the places that made you.</strong> A single route lights up — a street you walked, a turn you took — rendered from open city data, finished by hand in matte acrylic and brushed brass.
            </p>
            <div className="cta-row">
              <a href="#reserve" className="cta primary">
                <span>Reserve a Lumen</span>
                <span className="arrow">→</span>
              </a>
              <a href="#process" className="cta">
                <span>How it's made</span>
              </a>
            </div>
          </div>

          <div style={{ height: 56 }} />

          <div className="bottom-bar">
            <div className="stat"><span className="k">Edition</span><span className="v">001 / 200 — Reserved 87%</span></div>
            <div className="stat"><span className="k">Materials</span><span className="v">Matte acrylic · Brushed brass</span></div>
            <div className="stat"><span className="k">Lead time</span><span className="v">14 weeks · hand-finished</span></div>
            <div className="stat"><span className="k">From</span><span className="v">€ 2,400</span></div>
            <div className="scroll-hint"><span>Scroll</span><span className="bar" /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function LumenIntro() {
  return (
    <section className="block editorial" id="story" data-screen-label="02 Lumen Story">
      <div className="row">
        <div className="reveal">
          <div className="eyebrow"><span className="dot" />The Object · 01</div>
        </div>
        <div className="reveal" style={{ transitionDelay: "60ms" }}>
          <h2>
            A <span className="em">precise object</span> for an imprecise feeling. <br/>
            One route. <span className="em">One light.</span> One frame.
          </h2>
        </div>
      </div>

      <div className="row" style={{ marginTop: 56 }}>
        <div />
        <div className="reveal" style={{ transitionDelay: "120ms" }}>
          <p className="lede">
            Lumen begins with a place — a city, a neighborhood, the few streets that matter to one person. We pull open data for that fabric, generate a parametric mesh of every block within a kilometre, and mill it from a single billet of matte acrylic at 1:2400.
          </p>
          <p className="lede">
            Inside the model, a single conductive channel follows the route you give us. A 2700&nbsp;Kelvin filament is hand-aligned along it, behind brushed brass. Switch it on and the city stays dark — except for the line that made you.
          </p>
        </div>
      </div>
    </section>
  );
}

function LumenShowcase({ accent }) {
  return (
    <section className="showcase section-alt" id="object" data-screen-label="03 Lumen Showcase">
      <div className="head reveal">
        <div>
          <div className="eyebrow"><span className="dot" />Object · 02</div>
          <h3>
            From a <span className="em">parametric mesh</span><br />to a hand-finished frame.
          </h3>
        </div>
        <p>
          Two halves of the same idea. The cold computational source on the left; the warm, glowing object on the right. The same coordinates, in two languages.
        </p>
      </div>

      <div className="split">
        <div className="panel reveal">
          <div>
            <div className="lbl"><span className="lbl-dot" />Phase 01 — Computation</div>
          </div>
          <div className="viz">
            <window.ParametricMesh accent={accent} />
          </div>
          <div className="meta">
            <div className="row-meta"><span className="k">Source</span><span className="v">OpenStreetMap · NL3D</span></div>
            <div className="row-meta"><span className="k">Resolution</span><span className="v">1:2400 — 0.2mm tolerance</span></div>
            <div className="row-meta"><span className="k">Output</span><span className="v">Parametric mesh · G-code</span></div>
            <div className="row-meta"><span className="k">Compute</span><span className="v">~42 min · 1.2M vertices</span></div>
          </div>
        </div>

        <div className="panel warm reveal" style={{ transitionDelay: "120ms" }}>
          <div>
            <div className="lbl"><span className="lbl-dot" />Phase 02 — Object</div>
          </div>
          <div className="viz">
            <window.LumenFrame accent={accent} />
          </div>
          <div className="meta">
            <div className="row-meta"><span className="k">Body</span><span className="v">Milled matte acrylic</span></div>
            <div className="row-meta"><span className="k">Bezel</span><span className="v">Brushed brass · oil-rubbed</span></div>
            <div className="row-meta"><span className="k">Light</span><span className="v">2700K · hand-aligned filament</span></div>
            <div className="row-meta"><span className="k">Edition</span><span className="v">Numbered · signed verso</span></div>
          </div>
        </div>
      </div>

      <div className="closing reveal">
        <h4>
          The cold object remembers something <span className="em">warm.</span> That is the entire idea.
        </h4>
        <div className="specs">
          <div className="spec"><span className="k">Sizes</span><span>320 × 240 mm · 480 × 360 mm · 720 × 540 mm</span></div>
          <div className="spec"><span className="k">Cities Available</span><span>Rotterdam, Amsterdam, Antwerp, London, Paris, Berlin. Others on request.</span></div>
          <div className="spec"><span className="k">From</span><span>€ 2,400 — bespoke route, frame & install included</span></div>
        </div>
      </div>
    </section>
  );
}

function LumenProcess() {
  return (
    <section className="block editorial" id="process" data-screen-label="04 Process">
      <div className="row reveal" style={{ marginBottom: 64 }}>
        <div>
          <div className="eyebrow"><span className="dot" />Process · 03</div>
        </div>
        <div>
          <h2 style={{ fontSize: "clamp(32px, 4.4vw, 64px)" }}>
            Fourteen weeks. <span className="em">Four pairs of hands.</span>
          </h2>
        </div>
      </div>

      <div className="process reveal" style={{ transitionDelay: "120ms" }}>
        <div className="step">
          <span className="num">01 — Week 1</span>
          <h5>Coordinate.</h5>
          <p>You send us an address and the route that matters. We confirm scale, framing, and the city's data coverage.</p>
        </div>
        <div className="step">
          <span className="num">02 — Week 2–5</span>
          <h5>Compute.</h5>
          <p>We pull every block within a kilometre, generate a parametric mesh, and toolpath it for the five-axis mill.</p>
        </div>
        <div className="step">
          <span className="num">03 — Week 6–11</span>
          <h5>Mill & light.</h5>
          <p>The city is milled from a single billet of matte acrylic. A conductive channel and 2700K filament follow your route.</p>
        </div>
        <div className="step">
          <span className="num">04 — Week 12–14</span>
          <h5>Frame & ship.</h5>
          <p>Brushed brass bezel, oil-rubbed. Engraved nameplate. Numbered, signed verso, hand-delivered where we can.</p>
        </div>
      </div>
    </section>
  );
}

function LumenReserve() {
  const [email, setEmail] = useState("");
  const [city, setCity] = useState("Rotterdam");
  const [focus, setFocus] = useState(false);
  const [sent, setSent] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email || !email.includes("@")) return;
    setSent(true);
  };

  return (
    <section className="waitlist" id="reserve" data-screen-label="05 Reserve">
      <div className="wl-glow" />
      <div className="inner">
        <div className="eyebrow reveal" style={{ color: "var(--grey-1)" }}>
          <span className="dot" />Priority Access · Edition 001
        </div>
        <h2 className="reveal" style={{ transitionDelay: "60ms" }}>
          Be among the first <span className="em">two hundred.</span>
        </h2>
        <p className="lede reveal" style={{ transitionDelay: "120ms" }}>
          The inaugural Lumen run is limited and hand-numbered. Priority Access holders are contacted before public release and receive a one-time founding price.
        </p>

        <form className={`form reveal ${focus ? "focus" : ""} ${sent ? "sent" : ""}`} onSubmit={submit} style={{ transitionDelay: "180ms" }}>
          <input
            type="email"
            placeholder={sent ? "You're on the list." : "your@email.com"}
            value={sent ? "" : email}
            onChange={(e) => setEmail(e.target.value)}
            onFocus={() => setFocus(true)}
            onBlur={() => setFocus(false)}
            disabled={sent}
            aria-label="Email address"
          />
          <button type="submit">
            {sent ? <><span>Confirmed</span><span>✓</span></> : <><span>Request Access</span><span>→</span></>}
          </button>
        </form>
        <div className="form-meta reveal" style={{ transitionDelay: "240ms" }}>
          {sent
            ? <>We'll reach out from <span className="ok">studio@wibi.nl</span> within 48 hours.</>
            : <>No spam, ever. We write once per quarter, when there is something to say.</>}
        </div>
      </div>
    </section>
  );
}

function App() {
  window.useReveal();
  const [t, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS);
  useEffect(() => { window.applyAccent(t.accent); }, [t.accent]);
  useEffect(() => {
    document.documentElement.dataset.headline = t.headlineStyle;
    document.documentElement.dataset.density = t.density;
    document.documentElement.dataset.altbg = String(t.altBg);
  }, [t.headlineStyle, t.density, t.altBg]);

  return (
    <>
      <window.Nav active="lumen" />
      <LumenHero accent={t.accent} headlineStyle={t.headlineStyle} />
      <LumenIntro />
      <LumenShowcase accent={t.accent} />
      <LumenProcess />
      <LumenReserve />
      <window.Footer />
      <window.SiteTweaks t={t} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);