/* ============================================================
   LINGEA — The Edition (story / brand)
   ============================================================ */
function StoryPage({ nav }) {
  useReveal("story");
  const P = window.LINGEA.products;
  const dragon = P.find((p) => p.id === "libellule");
  const ring = P.find((p) => p.id === "volute-floraison");

  return (
    <main className="story-page">
      <section className="story-hero wrap">
        <span className="eyebrow accent fade-up in">The Edition</span>
        <h1 className="display story-h1 fade-up in" style={{ animationDelay: "70ms" }}>
          Seven, and<br />only seven.
        </h1>
        <p className="body story-lede fade-up in" style={{ animationDelay: "140ms" }}>
          Lingea began with a refusal — to make jewellery by the season, in
          volumes no one could love individually. Edition 01 is the answer: a
          closed collection of seven pieces, each made to order, each finished by
          a single pair of hands.
        </p>
      </section>

      <section className="story-cols wrap">
        <div className="story-col fade-up">
          <span className="story-num">01</span>
          <h3>Curation over choice</h3>
          <p className="body">
            A small house should make few things, well. We design an edition,
            close it, and move on. There is no endless catalogue to wade through —
            only seven pieces that earned their place.
          </p>
        </div>
        <div className="story-col fade-up" style={{ animationDelay: "90ms" }}>
          <span className="story-num">02</span>
          <h3>Colour as the subject</h3>
          <p className="body">
            Where most fine jewellery hides behind white diamonds, Edition 01 is
            built around colour — cabochon sapphires, chalcedony, kunzite,
            tsavorite — set so the stone, not the setting, is the point.
          </p>
        </div>
        <div className="story-col fade-up" style={{ animationDelay: "180ms" }}>
          <span className="story-num">03</span>
          <h3>Made when ordered</h3>
          <p className="body">
            Nothing sits in a drawer. When you commission a piece it is made for
            you over three to four weeks, in solid 18k gold, then independently
            certified before it ships.
          </p>
        </div>
      </section>

      <section className="story-feature">
        <button className="story-feat-img" onClick={() => nav({ page: "product", id: dragon.id })} aria-label="View Libellule">
          <img src={dragon.images[0]} alt="Libellule dragonfly brooch" loading="lazy" />
        </button>
        <div className="story-feat-text fade-up">
          <span className="eyebrow accent">The objet · {dragon.edition}</span>
          <h2 className="display">Libellule</h2>
          <p className="body">{dragon.story}</p>
          <button className="ulink" onClick={() => nav({ page: "product", id: dragon.id })}>
            View the brooch <span className="arr"><Icon name="arrow" size={16} /></span>
          </button>
        </div>
      </section>

      <section className="story-materials wrap">
        <div className="story-mat-head fade-up">
          <span className="eyebrow accent">Materials &amp; certification</span>
          <h2 className="display section-title">What you actually own.</h2>
          <p className="body" style={{ maxWidth: 560 }}>
            At this price, you deserve to know precisely what is in your hand. Every
            specification is disclosed, stamped, and independently verified.
          </p>
        </div>
        <dl className="mat-list">
          {[
            ["Gold", "Solid 18k throughout — never plated, never gold-filled. Yellow, white and rose, each stamped 750."],
            ["Stones", "Natural coloured stones, hand-selected. Each piece ships with an independent coloured-stone report."],
            ["Weight", "Exact gram weight disclosed on every piece and stamped where the form allows."],
            ["Making", "Hand-finished to order in three to four weeks. Rings re-sized once, complimentary, in the first year."],
          ].map(([k, v], i) => (
            <div className="mat-row fade-up" key={k} style={{ animationDelay: i * 70 + "ms" }}>
              <dt>{k}</dt><dd className="body">{v}</dd>
            </div>
          ))}
        </dl>
      </section>

      <section className="story-derisk">
        <div className="wrap story-derisk-in">
          <div className="story-derisk-img fade-up">
            <img src={ring.images[0]} alt="Volute Floraison ring" loading="lazy" />
          </div>
          <div className="story-derisk-text fade-up" style={{ animationDelay: "90ms" }}>
            <span className="eyebrow accent">The purchase</span>
            <h2 className="display section-title">Buying should feel as considered as the piece.</h2>
            <ul className="story-derisk-list body">
              <li><strong>Insured overnight delivery.</strong> FedEx Priority, signature required, fully insured to your door.</li>
              <li><strong>Thirty days to decide.</strong> Prepaid, insured returns with a tamper-evident security tag.</li>
              <li><strong>Care for life.</strong> Complimentary cleaning, re-polishing and prong-checks, always.</li>
            </ul>
            <button className="btn ghost" onClick={() => nav({ page: "collection" })}>Begin with the collection</button>
          </div>
        </div>
      </section>

      <section className="story-cta wrap">
        <span className="eyebrow accent fade-up">Private viewings</span>
        <h2 className="display story-cta-h fade-up" style={{ animationDelay: "70ms" }}>
          Prefer to see it in person?
        </h2>
        <p className="body fade-up" style={{ animationDelay: "120ms", maxWidth: 480, margin: "0 auto" }}>
          We hold private, by-appointment viewings in New York. A piece, your
          light, no pressure.
        </p>
        <div className="fade-up" style={{ animationDelay: "180ms", marginTop: 30 }}>
          <button className="btn" onClick={() => alert("This is a design prototype — appointment booking is not connected.")}>Book an appointment</button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { StoryPage });