/* ============================================================
   STORY — cinematic brand narrative
   ============================================================ */
const CHAPTERS = [
{ n: "I", t: "The question", img: "ch1", side: "left",
  p: ["It began, as the best ideas do, with mild outrage at a dinner party.",
  "Why should the most theatrical thing on the table — the glossy pearls, the gentle pop, the spoonful that makes a plain blini feel like a celebration — come from a fish? Why should it cost a small fortune, smell of the harbour, and leave half the guests unable to touch it?",
  "We thought luxury could be kinder than that. And cleverer."] },
{ n: "II", t: "The sea, reconsidered", img: "ch3", side: "right",
  p: ["The answer was already in the water. Seaweed — the ocean's quiet larder — carries the clean, briny, mineral note we associate with the sea, with none of the fish.",
  "We started there: with a clean ocean flavour, and a single, stubborn goal. Make a pearl that behaves like the real thing on the plate, and tastes like the sea at its best."] },
{ n: "III", t: "The craft of the pearl", img: "ch2", side: "left",
  p: ["A good pearl has to earn its place. It has to glisten. It has to hold its shape under a spoon, then give that delicate, satisfying pop against the palate.",
  "Mye Noir is built for exactly that — a short, honest ingredient list and a pearl that looks the part and performs. Ready to serve, straight from the tin, chilled."] },
{ n: "IV", t: "A table for everyone", img: "ch4", side: "right",
  p: ["We are not trying to fool anyone. Mye is inspired by caviar, not pretending to be it. What it offers is the moment — the drama, the elegance, the little gasp around the table — opened up to vegans, the curious, and anyone who'd rather not spend a month's rent on a starter.",
  "That's the whole idea of the house. Quiet luxury, made generous."] }];


function StoryPage() {
  useReveal();
  return (
    <div>
      {/* hero */}
      <section className="story-hero deep on-dark">
        <div className="story-hero-glow"></div>
        <Photo src={IMG.tin} className="story-hero-bg" pos="center" />
        <div className="story-hero-veil"></div>
        <div className="wrap center" style={{ position: "relative", zIndex: 5 }}>
          <div className="eyebrow on-dark no-rule" style={{ justifyContent: "center" }}>Maison Mye · est. 2026</div>
          <h1 className="display reveal" style={{ marginTop: 18, maxWidth: "16ch", marginInline: "auto" }}>The house that made luxury <span className="serif-it">plant-based.</span></h1>
          <p className="lede reveal d1" style={{ marginTop: 20, maxWidth: "50ch", marginInline: "auto" }}>How a moment of dinner-party envy became Mye Noir — a seaweed caviar built for every table.</p>
          <div className="flourish" style={{ maxWidth: 340, margin: "34px auto 0" }}><span className="dot"></span></div>
        </div>
      </section>

      {/* intro with drop cap */}
      <section className="section">
        <div className="wrap story-intro">
          <p className="story-lead reveal"><span className="dropcap">M</span>ye is a small idea with a clear conviction: that the look and feel of caviar — the glisten, the pop, the theatre of it — shouldn't depend on fish roe, on fishing it from the seabed, or on a price that keeps it for the few. So we made it from the sea's most generous ingredient instead.</p>
        </div>
      </section>

      {/* chapters */}
      <section className="section-sm">
        <div className="wrap-wide story-chapters">
          {CHAPTERS.map((c, i) =>
          <div className={"story-ch reveal " + (c.side === "right" ? "flip" : "")} key={c.n}>
              <Photo src={IMG[c.img]} label={"CHAPTER " + c.n} className="story-ch-img" />
              <div className="story-ch-copy">
                <span className="story-ch-n">Chapter {c.n}</span>
                <h2 className="h-lg" style={{ marginTop: 10 }}>{c.t}</h2>
                {c.p.map((para, j) => <p key={j} className="story-ch-p">{para}</p>)}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* pull quote */}
      <section className="section deep on-dark">
        <div className="wrap center">
          <Icon name="quote" size={40} className="story-quote-ic" />
          <p className="story-quote reveal">"The moment the lid lifts, the room changes. Nobody asks if it's vegan. They ask where you got it."</p>
          <p className="eyebrow on-dark no-rule reveal d1" style={{ justifyContent: "center", marginTop: 24 }}>The Mye promise</p>
        </div>
      </section>

      {/* founder note */}
      <section className="section">
        <div className="wrap-wide founder-grid">
          <Photo src={IMG.champagne} label="THE MAISON" className="founder-img reveal" />
          <div className="founder-copy reveal d1">
            <SectionHead eyebrow="A note from the founder" title="Hosting should feel like a gift — to your guests and the planet." />
            <p className="lede" style={{ marginTop: 18 }}>I built Mye for the host in all of us — the one who saves the good bottle, who wants the table to feel like an occasion, who'd rather not choose between elegance and their values.</p>
            <p style={{ marginTop: 14, color: "var(--ink-soft)" }}>Every tin we make is a small argument that luxury can be generous, kind and ready in seconds. Thank you for setting a place for us.</p>
            <p className="founder-sign">Mye</p>
            <p className="small" style={{ color: "var(--muted)" }}>Founder, Maison Mye</p>
            <p className="ph-note" style={{ marginTop: 14 }}>[ Replace with real founder name, portrait &amp; signature before launch. ]</p>
          </div>
        </div>
      </section>

      {/* values */}
      <section className="section cream-bg">
        <div className="wrap">
          <SectionHead center eyebrow="What guides the house" title="Three quiet principles" />
          <div className="grid g-3 mt-4">
            {[["leaf", "Plant-based, always", "No fish roe, no animal products. Caviar theatre everyone at the table can share."],
            ["shield", "Honest by default", "We publish only what we can verify — claims, allergens and press are confirmed before they appear."],
            ["heart", "Generous luxury", "Designed to be opened often, not saved for the few. Ready to serve, fairly priced."]].map(([ic, t, b], i) =>
            <div className="card card-pad reveal" style={{ transitionDelay: i * .08 + "s" }} key={t}>
                <span className="value-ic"><Icon name={ic} size={22} /></span>
                <h3 className="h-sm" style={{ marginTop: 18 }}>{t}</h3>
                <p style={{ marginTop: 10, color: "var(--ink-soft)" }}>{b}</p>
              </div>
            )}
          </div>
          <p className="ph-note center" style={{ display: "block", marginTop: 24, maxWidth: "60ch", marginInline: "auto" }}>[ Sustainability claims should be substantiated before launch — keep this principle qualitative until verified. ]</p>
        </div>
      </section>

      <CtaBand />
    </div>);

}

Object.assign(window, { StoryPage });