/* TOT26 · Master 09 — Countdown Story, 1080×1920. Operator edits the numeral daily. */
const L09 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_urgencia_viajero_9x16_cuenta_EN_v1',
    eyebrow: 'Countdown', num: '09', unit: 'days',
    title: 'to Taste of Tulum.', dates: 'Oct 28 – Nov 27, 2026',
    sub: 'Have you chosen your pass?', cta: 'Buy your pass',
    field: 'Operator field · edit daily', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_urgencia_viajero_9x16_cuenta_ES_v1',
    eyebrow: 'Cuenta regresiva', num: '09', unit: 'días',
    title: 'para Taste of Tulum.', dates: '28 oct – 27 nov, 2026',
    sub: '¿Ya elegiste tu pase?', cta: 'Compra tu pase',
    field: 'Campo del operador · edita a diario', cb: 'Con el respaldo de'
  }
};

function CountdownFrame({ t, safe, cb, code }) {
  return (
    <Frame w={1080} h={1920} safe={safe} cb={cb} cbLabel={t.cb} code={code ? t.code : null}>
      <img className="bgimg" src="assets/moments/moment-08-fire.jpg" alt="" style={{ objectPosition: '50% 44%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.7) 0%,rgba(11,36,31,.44) 26%,rgba(11,36,31,.92) 68%,#08201c 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={t.lg} scale={2.2} h={152} />
        <div className="eyebrow26" style={{ marginTop: 40 }}>{t.eyebrow}</div>
        <div style={{ flex: 1 }} />
        <div style={{ position: 'relative', border: '2px dashed rgba(227,192,113,.55)', padding: '10px 44px' }}>
          <span className="tnum" style={{ fontFamily: 'var(--c26-font-title)', fontSize: 300, fontWeight: 700, lineHeight: .95, color: '#e3c071', fontVariantNumeric: 'tabular-nums' }}>{t.num}</span>
          {code ? <span style={{ position: 'absolute', top: -34, left: 0, fontSize: 18, fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(227,192,113,.8)' }}>{t.field}</span> : null}
        </div>
        <div className="eyebrow26" style={{ fontSize: 34, marginTop: 18 }}>{t.unit}</div>
        <h2 className="title26" style={{ fontSize: 88, marginTop: 22, maxWidth: 800 }}>{t.title}</h2>
        <FlourishDivider width={340} color="rgba(227,192,113,.7)" style={{ marginTop: 34 }} />
        <div className="lede26" style={{ fontSize: 32, marginTop: 26 }}>{t.dates}</div>
        <div className="script26" style={{ fontSize: 56, marginTop: 20 }}>{t.sub}</div>
        <div style={{ flex: 1 }} />
        <Button variant="gold" size="lg" style={{ width: 640, justifyContent: 'center', fontSize: 32, padding: '30px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
      </div>
    </Frame>
  );
}

function App09() {
  return (
    <Chrome title="Master 09 · Countdown Story" format="Instagram Stories · 9:16 · 1080×1920" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L09[k].lang}>
          <CountdownFrame t={L09[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App09 />);