/* TOT26 · Master 08 — Week Pass post, 1080×1350. */
const L08 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_valor_viajero_4x5_weekpass_EN_v1',
    eyebrow: 'Week pass', title: 'Choose your Tulum week.',
    sub: 'Seven days. One themed week.', label: 'September price', cur: 'USD',
    oct: '$75 in October', cta: 'Get the Week Pass',
    trust: 'Secure checkout · Your QR pass arrives by email', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_valor_viajero_4x5_weekpass_ES_v1',
    eyebrow: 'Pase semanal', title: 'Elige tu semana en Tulum.',
    sub: 'Siete días. Una semana temática.', label: 'Precio de septiembre', cur: 'USD',
    oct: '$75 en octubre', cta: 'Obtén el Pase semanal',
    trust: 'Pago seguro · Tu pase con código QR llega por correo', cb: 'Con el respaldo de'
  }
};
const WC8 = { 1: '#b23226', 2: '#d4772a', 3: '#1d6b5e', 4: '#c08a2e' };

function WeekPassFrame({ 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}>
      <img className="bgimg" src="assets/moments/moment-02-beach-eat.jpg" alt="" style={{ objectPosition: '50% 34%' }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.52) 0%,rgba(11,36,31,.42) 30%,rgba(11,36,31,.95) 74%,#08201c 100%)' }} />
      <div className="keyline" />
      <div className="body">
        <LockBand lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ padding: '0 84px 118px', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div style={{ flex: 1 }} />
          <div className="eyebrow26">{t.eyebrow}</div>
          <h2 className="title26" style={{ fontSize: 92, marginTop: 18, maxWidth: 800 }}>{t.title}</h2>
          <div className="script26" style={{ fontSize: 52, marginTop: 20 }}>{t.sub}</div>
          <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
            {WEEKS[t.lg].map(w => (
              <div key={w.w} style={{ flex: 1, borderTop: '6px solid ' + WC8[w.w], paddingTop: 14 }}>
                <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(244,234,212,.66)' }}>{w.dates}</div>
                <div style={{ fontFamily: 'var(--c26-font-title)', fontSize: 30, lineHeight: 1.15, color: 'var(--c26-parchment)', marginTop: 8 }}>{w.t}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 42, display: 'flex', alignItems: 'flex-end', gap: 24 }}>
            <div>
              <div className="eyebrow26" style={{ fontSize: 20 }}>{t.label}</div>
              <div className="money26" style={{ marginTop: 8 }}>
                <span className="big" style={{ fontSize: 128 }}>$56</span>
                <span className="cur">{t.cur}</span>
              </div>
              <div style={{ fontSize: 24, color: 'rgba(244,234,212,.6)', textDecoration: 'line-through', marginTop: 6 }}>{t.oct}</div>
            </div>
            <div style={{ flex: 1 }} />
            <Ph dark style={{ fontSize: 18, marginBottom: 10 }}>MXN price · pending approval</Ph>
          </div>
          <Button variant="gold" size="lg" style={{ marginTop: 34, width: '100%', justifyContent: 'center', fontSize: 30, padding: '28px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
          <div className="trust26" style={{ marginTop: 24, fontSize: 21 }}>{t.trust}</div>
        </div>
      </div>
    </Frame>
  );
}

function App08() {
  return (
    <Chrome title="Master 08 · Week Pass post" format="Instagram / Facebook feed · 4:5 · 1080×1350" natW={2208}>
      {({ safe, cb, code }) => ['en', 'es'].map(k => (
        <Col key={k} label={L08[k].lang}>
          <WeekPassFrame t={L08[k]} safe={safe} cb={cb} code={code} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App08 />);