// OUR STORY
function StoryPage({ arabicAccent }) {
  const { navigate } = useRouter();
  return (
    <div className="page-enter">
      <style>{`
        .st-hero {
          position: relative; padding: 180px 0 60px;
        }
        .st-hero__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
        @media (max-width: 760px) { .st-hero__row { grid-template-columns: 1fr; } }
        .st-hero__title { font-family: var(--display, var(--serif)); font-weight: 300; font-size: clamp(64px, 11vw, 180px); line-height: 0.92; letter-spacing: -0.02em; }
        .st-hero__title em { color: var(--accent); }
        .st-hero__arabic { font-family: var(--arabic); color: var(--accent); font-size: clamp(40px, 6vw, 96px); margin-top: 12px; display: ${arabicAccent ? 'block' : 'none'}; }
        .st-hero__lede { font-size: 22px; line-height: 1.55; color: var(--fg); font-family: var(--display, var(--serif)); max-width: 480px; }
        .st-hero__lede em { color: var(--accent); }

        .st-feature {
          aspect-ratio: 16/9;
          background: url('media/founders-gafla-portrait.webp') center 30%/cover no-repeat;
          margin: 60px 0;
          filter: contrast(1.06);
        }

        .st-meta {
          display: grid; grid-template-columns: repeat(4, 1fr);
          padding: 30px 0;
          gap: 0;
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
        }
        @media (max-width: 760px) { .st-meta { grid-template-columns: 1fr 1fr; } }
        .st-meta__cell { padding: 8px 28px; border-right: 1px solid var(--rule); }
        .st-meta__cell:last-child { border-right: none; }
        .st-meta__label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 8px; }
        .st-meta__value { font-family: var(--display, var(--serif)); font-size: 24px; }

        .st-essay { padding: clamp(80px, 11vw, 140px) 0; }
        .st-essay__inner { max-width: 760px; margin: 0 auto; }
        .st-essay__inner p { font-size: 19px; line-height: 1.75; color: var(--fg); margin-bottom: 1.6em; }
        .st-essay__inner p:first-letter {
          font-family: var(--display, var(--serif));
          font-size: 5em;
          line-height: 0.9;
          float: left;
          padding: 6px 14px 0 0;
          color: var(--accent);
        }
        .st-essay__inner em { color: var(--accent); }
        .st-pullquote {
          font-family: var(--display, var(--serif));
          font-style: italic;
          font-size: clamp(28px, 4vw, 48px);
          line-height: 1.25;
          color: var(--fg);
          border-left: 1px solid var(--accent);
          padding: 14px 0 14px 40px;
          margin: 60px 0;
          max-width: 760px;
        }
        .st-pullquote__attr { font-style: normal; font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-mute); margin-top: 20px; }

        .st-founders { padding: clamp(60px, 8vw, 100px) 0; background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
        .st-founders__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); }
        @media (max-width: 760px) { .st-founders__grid { grid-template-columns: 1fr; } }
        .st-founder__name { font-family: var(--display, var(--serif)); font-size: clamp(28px, 3.5vw, 44px); }
        .st-founder__role { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
        .st-founder__bio { color: var(--fg-mute); margin-top: 18px; font-size: 15px; line-height: 1.7; max-width: 460px; }

        .st-tl { padding: clamp(80px, 10vw, 130px) 0; }
        .st-tl__head { margin-bottom: 60px; }
        .st-tl__head h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; }
        .st-tl__head em { color: var(--accent); }
        .st-tl__rail {
          position: relative;
          padding: 0 0 40px;
        }
        .st-tl__item {
          display: grid; grid-template-columns: 120px 1fr;
          gap: 32px;
          padding: 28px 0;
          border-top: 1px solid var(--rule);
          align-items: baseline;
        }
        .st-tl__item:last-child { border-bottom: 1px solid var(--rule); }
        .st-tl__year { font-family: var(--display, var(--serif)); font-size: 36px; color: var(--accent); font-feature-settings: "tnum"; }
        .st-tl__title { font-family: var(--display, var(--serif)); font-size: 22px; line-height: 1.2; margin-bottom: 4px; }
        .st-tl__body { color: var(--fg-mute); font-size: 15px; line-height: 1.6; max-width: 600px; }
        .st-tl__flag { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--rule-strong); color: var(--fg-mute); margin-left: 12px; }
      `}</style>

      <section className="container st-hero">
        <Reveal className="st-hero__row">
          <div>
            <div className="eyebrow" style={{ color: 'var(--accent)' }}>Our Story</div>
            <h1 className="st-hero__title">A house named <em>caravan.</em></h1>
            <div className="st-hero__arabic">قافِلة</div>
          </div>
          <p className="st-hero__lede">
            Gafla — <em>caravan</em> in Arabic. A contemporary fine‑jewellery house in Dubai, gathering the symbols of Arabian tradition and carrying them forward, slowly, intentionally.
          </p>
        </Reveal>
        <div className="st-feature"></div>
        <div className="st-meta">
          <div className="st-meta__cell"><div className="st-meta__label">Publicly launched</div><div className="st-meta__value">2015</div></div>
          <div className="st-meta__cell"><div className="st-meta__label">Designed in</div><div className="st-meta__value">Dubai · d3</div></div>
          <div className="st-meta__cell"><div className="st-meta__label">Active story lines</div><div className="st-meta__value">7</div></div>
          <div className="st-meta__cell"><div className="st-meta__label">Live catalogue</div><div className="st-meta__value">137 pieces</div></div>
        </div>
      </section>

      <section className="st-essay">
        <div className="container st-essay__inner">
          <p>
            The Arabic word <em>gafla</em> describes a caravan in motion — a procession of trade, story, and slow company that once moved across the peninsula. The house borrowed the word for a reason: jewellery, in this part of the world, has always been an inheritance‑in‑transit, passing from a grandmother's wrist to a granddaughter's, gathering stories as it goes.
          </p>
          <p>
            Gafla was publicly launched in 2015 by founders who came together around Emirati heritage and modern jewellery design — Hamad Bin Shaiban and Abdulla Beljafla, with press history naming Bushra bint Darwish among the early founding team. The first studio sat inside Dubai Design District, and that is still where the house draws its lines today.
          </p>
          <div className="st-pullquote">
            "Each piece reinvents the countless stories and symbols of Arabian traditions, for the international collector."
            <div className="st-pullquote__attr">— Gafla, on its own work</div>
          </div>
          <p>
            The work is organised into seven living lines — Bahar, Hiam, Sak, Fanoos, Salasil, Merwad, Thumani — each one taking a single Emirati or wider Arabian motif and worrying it slowly into wearable form. Pearling in Bahar. The Ottoman lira in Sak. The lantern in Fanoos. The chain itself in Salasil.
          </p>
          <p>
            What unites them, beyond gold and stone, is the pace. Gafla works with hand drawings, with the Majlis as a meeting place, with the long lead times of a piece that was never meant to be disposable. The Bespoke service runs alongside the collections, translating a private idea — a marriage, an inscription, a returned child — into a single fine‑jewellery object.
          </p>
        </div>
      </section>

      <section className="st-founders">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 40 }}>The Founders</div>
          <div className="st-founders__grid">
            <Reveal>
              <div className="st-founder__name">Hamad Bin Shaiban</div>
              <div className="st-founder__role">Co‑founder · Managing Director</div>
              <p className="st-founder__bio">Steward of the house's commercial and operational life, from the Majlis to the boutique partnerships at Tryano and Louvre Abu Dhabi.</p>
            </Reveal>
            <Reveal delay={80}>
              <div className="st-founder__name">Abdulla Beljafla</div>
              <div className="st-founder__role">Co‑founder · Creative Director</div>
              <p className="st-founder__bio">Leads the design language of every line — the motifs, the drawings, and the slow conversion from sketch to setting.</p>
            </Reveal>
          </div>
          <p style={{ color: 'var(--fg-mute)', fontSize: 13, marginTop: 40, maxWidth: 640, lineHeight: 1.6 }}>
            <em>Press history</em> — Harper's Bazaar Arabia and Arab News have profiled the early founding team as including <strong style={{ color: 'var(--fg)' }}>Bushra bint Darwish</strong>. The official Our Story page currently names Hamad and Abdulla.
          </p>
        </div>
      </section>

      <section className="st-tl">
        <div className="container">
          <Reveal className="st-tl__head">
            <div className="eyebrow" style={{ marginBottom: 16 }}>The Timeline</div>
            <h2>A caravan, in <em>five staging posts.</em></h2>
          </Reveal>
          {[
            { y: '2013', t: 'The founders meet', b: 'Hamad, Abdulla, and the early team gather around the idea of an Emirati fine‑jewellery house.', flag: 'Press history' },
            { y: '2015', t: 'Public launch', b: "Gafla launches publicly during Dubai Design Week, with debut collections rooted in Arabian motif." },
            { y: '2017', t: 'Specular at d3', b: 'A featured maison at Dubai Design Week, deepening the studio\'s presence in d3.' },
            { y: '2020', t: 'Louvre Abu Dhabi', b: 'Gafla joins the museum boutique at Saadiyat Cultural District as an institutional partner.' },
            { y: '2024', t: 'Fanoos 1446 Al Ain', b: 'The lantern line receives its 1446 Al Ain capsule, extending the architectural motif.' },
          ].map((i) => (
            <div key={i.y} className="st-tl__item">
              <div className="st-tl__year">{i.y}</div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div className="st-tl__title">{i.t}</div>
                  {i.flag && <span className="st-tl__flag">{i.flag}</span>}
                </div>
                <div className="st-tl__body">{i.b}</div>
              </div>
            </div>
          ))}
          <div style={{ marginTop: 40 }}>
            <button className="btn btn--ghost arrow" onClick={() => navigate('collections')}>Browse the Collections</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { StoryPage });