/* TOT26 · Master 10 — FAQ Story, 1080×1920. */
const L10 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_utilidad_viajero_9x16_faq_EN_v1',
    eyebrow: 'Frequently asked', title: 'How does the pass work? Ask us.',
    qs: [
      { q: 'Do I need a wristband?', a: 'No. Your account is your pass — nothing to print.' },
      { q: 'Where does my pass arrive?', a: 'By email, as a QR code, right after checkout.' },
      { q: 'What does it unlock?', a: 'Welcome drinks, appetizers and desserts at partner venues, admission to ceremonies and special dinners, and member discounts.' }
    ],
    sticker: 'Question box', cta: 'Reply with your question', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_utilidad_viajero_9x16_faq_ES_v1',
    eyebrow: 'Preguntas frecuentes', title: '¿Cómo funciona el pase? Pregúntanos.',
    qs: [
      { q: '¿Necesito pulsera?', a: 'No. Tu cuenta es tu pase: nada que imprimir.' },
      { q: '¿Dónde llega mi pase?', a: 'Por correo, como código QR, justo después de la compra.' },
      { q: '¿Qué incluye?', a: 'Bebidas de bienvenida, entradas y postres en las sedes participantes, entrada a ceremonias y cenas especiales, y descuentos para miembros.' }
    ],
    sticker: 'Caja de preguntas', cta: 'Responde con tu pregunta', cb: 'Con el respaldo de'
  }
};

function FaqFrame({ t, safe, cb, code }) {
  return (
    <Frame w={1080} h={1920} safe={safe} cb={cb} cbLabel={t.cb} code={code ? t.code : null} codeInk={!cb} style={{ background: 'var(--c26-parchment)' }}>
      <img src="assets/flower-deco.png" alt="" style={{ position: 'absolute', top: -120, left: -140, width: 400, mixBlendMode: 'multiply', opacity: .26 }} />
      <div className="keyline ink" />
      <div className="body" style={{ padding: '256px 80px 424px' }}>
        <LockBand lang={t.lg} scale={2.2} h={152} />
        <div className="eyebrow26 ink" style={{ marginTop: 40 }}>{t.eyebrow}</div>
        <h2 className="title26 ink" style={{ fontSize: 84, marginTop: 16, maxWidth: 820 }}>{t.title}</h2>
        <div style={{ marginTop: 40 }}>
          {t.qs.map((x, i) => (
            <div key={i} style={{ borderTop: '1.5px solid var(--c26-line)', padding: '30px 0' }}>
              <div style={{ fontFamily: 'var(--c26-font-title)', fontSize: 46, fontWeight: 700, color: 'var(--c26-teal)' }}>{x.q}</div>
              <div className="lede26 ink" style={{ fontSize: 30, marginTop: 12, maxWidth: 840 }}>{x.a}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, background: '#fffaee', border: '1.5px solid var(--c26-gold)', borderRadius: 4, padding: '26px 28px' }}>
          <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--c26-gold)' }}>{t.sticker}</span>
          <span style={{ flex: 1, height: 1, background: 'var(--c26-line)' }} />
          <span style={{ fontFamily: 'var(--c26-font-title)', fontSize: 34, color: 'var(--c26-teal)' }}>{t.cta}</span>
        </div>
      </div>
    </Frame>
  );
}

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