/* TOT26 · Master 07 — Partner / creator feature, 1080×1350. */
const L07 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_prueba_viajero_4x5_partner_EN_v1',
    eyebrow: 'Meet the festival',
    title: 'Meet the people and places shaping Taste of Tulum.',
    role: 'Venue · role', quote: 'Approved quote — one sentence, in their words.',
    cta: 'Discover more', slot: 'Approved partner or creator photo',
    cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_prueba_viajero_4x5_partner_ES_v1',
    eyebrow: 'Conoce el festival',
    title: 'Conoce a las personas y lugares que dan forma a Taste of Tulum.',
    role: 'Sede · rol', quote: 'Cita aprobada — una frase, en sus palabras.',
    cta: 'Conoce más', slot: 'Foto aprobada de partner o creador',
    cb: 'Con el respaldo de'
  }
};

function PartnerFrame({ t, safe, cb, code }) {
  return (
    <Frame w={1080} h={1350} safeTop={0} safeBottom={130} safeSide={80} safe={safe} cb={cb} cbLabel={t.cb}
      code={code ? t.code : null} codeInk={!cb} style={{ background: 'var(--c26-parchment)' }}>
      <div className="keyline ink" />
      <div className="body">
        <LockBand lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ padding: '48px 84px 116px', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div className="eyebrow26 ink">{t.eyebrow}</div>
          <h2 className="title26 ink" style={{ fontSize: 68, marginTop: 16, maxWidth: 860 }}>{t.title}</h2>
          <div style={{ marginTop: 34, height: 480, border: '1.5px solid var(--c26-gold)', background: '#fffaee', padding: 10 }}>
            <Slot id={'m07-' + t.lg} label={t.slot} style={{ height: 460 }} />
          </div>
          <div style={{ marginTop: 30, display: 'flex', alignItems: 'flex-start', gap: 22 }}>
            <div style={{ flex: 1 }}>
              <Ph>[CONFIRMED VENUE]</Ph>
              <div className="eyebrow26 ink" style={{ fontSize: 20, marginTop: 14, color: '#8a9a90' }}>{t.role}</div>
            </div>
            <FlourishDivider width={140} style={{ marginTop: 20 }} />
          </div>
          <div className="lede26 ink" style={{ fontSize: 30, marginTop: 24, fontStyle: 'italic', maxWidth: 800 }}>“{t.quote}”</div>
          <div style={{ flex: 1 }} />
          <Button variant="primary" size="lg" style={{ width: 'fit-content', fontSize: 28, padding: '24px 40px', letterSpacing: '.12em', border: '2px solid var(--c26-gold)' }}>{t.cta}</Button>
        </div>
      </div>
    </Frame>
  );
}

function App07() {
  return (
    <Chrome title="Master 07 · Partner / creator feature" format="Instagram / Facebook feed · 4:5 · 1080×1350" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L07[k].lang}>
          <PartnerFrame t={L07[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App07 />);