// Story page

const Story = ({ navigate }) => (
  <main>
    {/* Hero */}
    <section style={{ padding: "100px var(--pad-x) 80px", maxWidth: "var(--max)", margin: "0 auto" }}>
      <div className="grid12">
        <div className="col-span-3">
          <span className="caption">Our story · 2024 →</span>
        </div>
        <div className="col-span-9">
          <h1 className="d-xxl" style={{ margin: 0, fontStyle: "italic", lineHeight: 0.92 }}>
            Two thirds<br/>
            <span style={{ fontStyle: "normal", fontWeight: 500 }}>of a perfume</span><br/>
            is what<br/>
            <span style={{ fontStyle: "italic" }}>we control.</span>
          </h1>
        </div>
      </div>
    </section>

    {/* Long opening — single column on a 12-col grid (asymmetric) */}
    <section style={{ padding: "60px var(--pad-x) 120px", maxWidth: "var(--max)", margin: "0 auto" }}>
      <div className="grid12">
        <div className="col-span-7 col-start-3">
          <p style={{ fontFamily: "var(--serif)", fontSize: 28, lineHeight: 1.4, fontStyle: "italic", margin: 0, textWrap: "pretty" }}>
            Onethird started in a one-room studio in Tebet, on a Saturday in September 2024. We were supposed to make a candle that year.
          </p>
          <p style={{ marginTop: 28, fontSize: 16, lineHeight: 1.7, color: "var(--ink-soft)", margin: "28px 0 0", maxWidth: 60 + "ch" }}>
            The plan had been smaller, a candle, maybe, for a friend. But we started talking about what we'd actually want to wear. Not the loud, sweet, vanilla-shelf kind. Something quiet. Something that didn't try to be French. Something that smelled honest on Indonesian skin in Jakarta humidity.
          </p>
          <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7, color: "var(--ink-soft)", maxWidth: 60 + "ch" }}>
            We made the first batch of <em style={{ fontFamily: "var(--serif)" }}>Holy Dust</em> in eight weeks. We threw away the second. The third one we kept, and it's still here, on the shelf.
          </p>
        </div>
      </div>
    </section>

    {/* Manifesto / honest */}
    <section className="inverse" style={{ padding: "160px var(--pad-x)" }}>
      <div style={{ maxWidth: "var(--max)", margin: "0 auto" }}>
        <div className="grid12">
          <div className="col-span-3">
            <SectionTag index="01" total="02" label="What we build" />
          </div>
          <div className="col-span-9">
            <h2 className="d-l" style={{ margin: 0, fontStyle: "italic" }}>
              The honest list.<br/>
              <span style={{ fontStyle: "normal", fontWeight: 500, color: "rgba(241,235,223,0.55)" }}>What you hold, not just what you smell.</span>
            </h2>
          </div>
        </div>

        <div className="grid12" style={{ marginTop: 64, rowGap: 0 }}>
          {[
            { we: "Solid glass bottle, weighted, balanced, built to last", they: "Lightweight plastic that feels hollow at half-full" },
            { we: "Solid wood cap, hand-turned, closes flush every time", they: "Magnetic plastic cap that loosens after two weeks" },
            { we: "Precision metal atomiser, even mist, no drip, no clog", they: "Cheap plastic sprayer that misfires and stains" },
            { we: "Same build standard as perfumes at 2–3× the price", they: "You're paying for the name, not what's in the bottle" },
          ].map(({ we, they }, i) => (
            <React.Fragment key={i}>
              <div className="col-span-6" style={{ borderTop: "1px solid rgba(241,235,223,0.2)", padding: "24px 0", display: "grid", gridTemplateColumns: "32px 1fr", gap: 16, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1 }}>+</span>
                <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.3, margin: 0 }}>{we}</p>
              </div>
              <div className="col-span-6" style={{ borderTop: "1px solid rgba(241,235,223,0.2)", padding: "24px 0", display: "grid", gridTemplateColumns: "32px 1fr", gap: 16, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, lineHeight: 1, opacity: 0.4 }}>−</span>
                <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.3, margin: 0, opacity: 0.4 }}>{they}</p>
              </div>
            </React.Fragment>
          ))}
        </div>

        <p className="mono upper" style={{ fontSize: 11, letterSpacing: ".18em", marginTop: 64, opacity: 0.6 }}>
          Indie price. No-compromise build. That's the whole point.
        </p>
      </div>
    </section>

    {/* Closing CTA */}
    <section style={{ padding: "180px var(--pad-x)", maxWidth: "var(--max)", margin: "0 auto" }}>
      <div className="grid12" style={{ alignItems: "end" }}>
        <div className="col-span-7">
          <SectionTag index="02" total="02" label="Now, your third" />
          <h2 className="d-xl" style={{ margin: "12px 0 0", fontStyle: "italic" }}>
            We've made the first two thirds.
          </h2>
          <h2 className="d-xl" style={{ margin: "16px 0 0", fontStyle: "normal", fontWeight: 500, color: "var(--ink-mute)" }}>
            Bring the rest.
          </h2>
        </div>
        <div className="col-span-5" style={{ textAlign: "right", display: "flex", flexDirection: "column", gap: 16, alignItems: "flex-end" }}>
          <button className="btn solid" onClick={() => navigate("/products")}>See the six <span className="arr">→</span></button>
          <button className="btn" onClick={() => navigate("/find")}>Find a store to try</button>
        </div>
      </div>
    </section>
  </main>
);

window.Story = Story;