/* AMBER & ZAFRAN — Our Story (reuses Homepage Brand Story content) */
function Story({ t, lang, go }) {
  return (
    <div>
      <section style={{ background: 'radial-gradient(120% 90% at 50% 0%,#2a1116,#160a0d)', color: 'var(--white)', padding: '78px 24px 38px', textAlign: 'center' }}>
        <div className="kicker solo center" style={{ justifyContent: 'center', color: 'var(--gold)' }}>{t.storyK}</div>
        <h1 className="sec-title" style={{ fontSize: 'clamp(44px,14vw,58px)', color: 'var(--white)', marginTop: 14, whiteSpace: 'pre-line' }}>{t.storyT}</h1>
      </section>

      <section className="sec">
        <Reveal className="body" style={{ fontSize: 16 }}>{t.storyB}</Reveal>
        <Reveal style={{ display: 'flex', gap: 30, marginTop: 44 }}>
          {[['1962', lang === 'ar' ? 'سنة التأسيس' : 'Est.'], ['3', lang === 'ar' ? 'أجيال' : 'Generations'], ['60+', lang === 'ar' ? 'تركيبة' : 'Compositions']].map(([n, l], i) => (
            <div key={i}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 34, color: 'var(--burgundy)' }}>{n}</div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </Reveal>
        <Reveal style={{ marginTop: 40 }}>
          <button className="btn btn-burg" onClick={() => go('shop')}>{t.heroCta2} <Icon.arrow className="arr" /></button>
        </Reveal>
      </section>

      <Footer t={t} lang={lang} go={go} />
    </div>
  );
}

Object.assign(window, { Story });