// Studio WIBI — Home page
const { useState, useEffect } = React;

function HomeHero({ headlineStyle = "mixed" }) {
  return (
    <section className="hero" data-screen-label="01 Home Hero">
      <div className="vignette" />
      <div className="content">
        <div>
          <div className="top-eyebrow">
            <span className="line" />
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase" }}>
              Studio WIBI · Rotterdam · est. MMXXVI
            </span>
          </div>
          <h1>
            {headlineStyle === "sans" && (
              <>
                <span className="lumen">Data into form.</span>
                <span className="lumen" style={{ color: "var(--amber-deep)" }}>Form into feeling.</span>
              </>
            )}
            {headlineStyle === "mixed" && (
              <>
                <span className="lumen">Data into form.</span>
                <span className="made">Form into feeling.</span>
              </>
            )}
            {headlineStyle === "serif" && (
              <>
                <span className="made" style={{ color: "var(--ink)" }}>Data into form.</span>
                <span className="made">Form into feeling.</span>
              </>
            )}
          </h1>
        </div>

        <div>
          <div className="sub-row">
            <p className="sub">
              <strong>Studio WIBI is a Rotterdam practice</strong> for data-driven, performance-driven design. We work across architecture, urban systems, and limited-edition objects — finishing each by hand.
            </p>
            <div className="cta-row">
              <a href="lumen.html" className="cta primary">
                <span>Discover Lumen</span>
                <span className="arrow">→</span>
              </a>
              <a href="#manifesto" className="cta">
                <span>Our Manifesto</span>
              </a>
            </div>
          </div>

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

          <div className="bottom-bar">
            <div className="stat"><span className="k">Practice</span><span className="v">Architecture · Urban · Product</span></div>
            <div className="stat"><span className="k">Studio</span><span className="v">Wilhelminakade 308, Rotterdam</span></div>
            <div className="stat"><span className="k">In production</span><span className="v">Lumen Edition 001 — 200 pieces</span></div>
            <div className="scroll-hint"><span>Scroll</span><span className="bar" /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="block editorial" id="manifesto" data-screen-label="02 Manifesto">
      <div className="row">
        <div className="reveal">
          <div className="eyebrow"><span className="dot" />Manifesto · 01</div>
        </div>
        <div className="reveal" style={{ transitionDelay: "60ms" }}>
          <h2>
            We generate ideas for a better tomorrow through <span className="em">complex data</span> and the most <span className="em">minimal form</span>.
          </h2>
        </div>
      </div>

      <div className="row" style={{ marginTop: 56 }}>
        <div />
        <div className="reveal" style={{ transitionDelay: "120ms" }}>
          <p className="lede">
            Studio WIBI operates at the intersection of computation and craft. We treat the city as a dataset and the home as a gallery — designing objects whose precision is invisible and whose meaning is intimate.
          </p>
          <p className="lede">
            Every line we draw begins as a measurement. Every object we ship ends as something quietly personal. Form follows function. Function, here, is feeling.
          </p>
        </div>
      </div>

      <div className="pillars reveal" style={{ transitionDelay: "180ms" }}>
        <div className="pillar">
          <span className="num">01</span>
          <h4>Data-driven.</h4>
          <p>Every line is a measurement. Every block is a coordinate. We start with the data the city already gives us.</p>
        </div>
        <div className="pillar">
          <span className="num">02</span>
          <h4>Performance-driven.</h4>
          <p>Material, light, weight, finish. Each object has to earn its place — for a decade, not a season.</p>
        </div>
        <div className="pillar">
          <span className="num">03</span>
          <h4>Less, more carefully.</h4>
          <p>One route. One light. One frame. Restraint is the loudest signal we know how to send.</p>
        </div>
      </div>
    </section>
  );
}

function Practice() {
  return (
    <section className="block interconnect section-alt" id="practice" data-screen-label="03 Practice">
      <div className="head reveal">
        <div>
          <div className="eyebrow"><span className="dot" />Data · 02</div>
          <h3>The city as <span className="em">raw material.</span></h3>
        </div>
        <p>
          We scan, sample, and structure the built environment before we draw a single line. Every project begins as a point cloud — the city reduced to coordinates, then rebuilt with intention.
        </p>
      </div>
      <div className="web">
        <window.PointCloudViewer src="Erasmus Brug.ply" />
      </div>
    </section>
  );
}

function Work() {
  return (
    <section className="block editorial" id="work" data-screen-label="04 Work">
      <div className="row reveal" style={{ marginBottom: 64 }}>
        <div>
          <div className="eyebrow"><span className="dot" />Work · 03</div>
        </div>
        <div>
          <h2 style={{ fontSize: "clamp(32px, 4.4vw, 64px)" }}>
            Selected studio work, and what's <span className="em">in production now.</span>
          </h2>
        </div>
      </div>

      {/* Featured Lumen card */}
      <div className="featured reveal" style={{ marginBottom: 80 }}>
        <div className="visual">
          <div style={{ width: "100%", maxWidth: 480 }}>
            <window.LumenFrame accent="var(--amber)" />
          </div>
        </div>
        <div className="copy">
          <div>
            <div className="eyebrow"><span className="dot" />Edition 001 — In production</div>
            <h3>Lumen. <span className="em">Made of Memories.</span></h3>
            <p>
              Framed scale models of the places that made you. A single route lights up — a street you walked, a turn you took — generated from computational data, finished by hand in matte acrylic and brushed brass.
            </p>
          </div>
          <div className="meta">
            <div><span className="k">From</span><span className="v">€ 2,400</span></div>
            <div><span className="k">Edition</span><span className="v">200 numbered pieces</span></div>
            <div><span className="k">Lead time</span><span className="v">14 weeks</span></div>
            <div><span className="k">Cities</span><span className="v">6 available, more on request</span></div>
          </div>
          <div className="actions">
            <a href="lumen.html" className="primary">Explore Lumen <span>→</span></a>
            <a href="lumen.html#reserve">Reserve a frame</a>
          </div>
        </div>
      </div>

      {/* Work list */}
      <div className="work-list reveal" style={{ transitionDelay: "120ms" }}>
        <a href="lumen.html" className="work-item">
          <span className="idx">001</span>
          <span className="title">Lumen <span className="em">— Made of Memories</span></span>
          <span className="desc">Limited-edition framed scale models with conductive route lighting.</span>
          <span className="status"><span className="dot" />In production</span>
          <span className="arrow">→</span>
        </a>
        <a href="#" className="work-item">
          <span className="idx">002</span>
          <span className="title">Kade — <span className="em">Wharf-side housing study</span></span>
          <span className="desc">Mixed-use master-plan exploring tidal data and timber assemblies along the Maashaven.</span>
          <span className="status dev"><span className="dot" />In development</span>
          <span className="arrow">→</span>
        </a>
        <a href="#" className="work-item">
          <span className="idx">003</span>
          <span className="title">Voor — <span className="em">Urban legibility index</span></span>
          <span className="desc">Open dataset & visual atlas of how Rotterdam neighborhoods are read on foot, in light.</span>
          <span className="status dev"><span className="dot" />Research</span>
          <span className="arrow">→</span>
        </a>
        <a href="#" className="work-item">
          <span className="idx">004</span>
          <span className="title">Loop — <span className="em">Architectural pendant</span></span>
          <span className="desc">A pendant light derived from a single closed geodesic. Brass, blown glass, single edition.</span>
          <span className="status dev"><span className="dot" />Concept</span>
          <span className="arrow">→</span>
        </a>
      </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="home" />
      <HomeHero headlineStyle={t.headlineStyle} />
      <Manifesto />
      <Practice />
      <Work />

      <window.Footer />
      <window.SiteTweaks t={t} setTweak={setTweak} />
    </>
  );
}

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