/* TOT26 · Master 06 — Four themed weeks carousel, 6 × 1080×1350. */
const L06 = {
  en: {
    lg: 'en', lang: 'English', code: 'TOT26_novedad_viajero_4x5_semanas_EN_v1',
    eyebrow: 'Four weeks. Four themes.', cover: 'Four weeks. Four ways to taste Tulum.',
    weekLabel: 'Week', end: 'Choose your Tulum week.',
    endSub: 'Seven days. One themed week.', cta: 'Choose your week', cur: 'USD',
    weekPass: 'Week pass', cb: 'Supported by'
  },
  es: {
    lg: 'es', lang: 'Español', code: 'TOT26_novedad_viajero_4x5_semanas_ES_v1',
    eyebrow: 'Cuatro semanas. Cuatro temas.', cover: 'Cuatro semanas. Cuatro formas de saborear Tulum.',
    weekLabel: 'Semana', end: 'Elige tu semana en Tulum.',
    endSub: 'Siete días. Una semana temática.', cta: 'Elige tu semana', cur: 'USD',
    weekPass: 'Pase semanal', cb: 'Con el respaldo de'
  }
};
const F6 = { w: 1080, h: 1350, safeTop: 0, safeBottom: 130, safeSide: 80 };
const WC = { 1: '#b23226', 2: '#d4772a', 3: '#1d6b5e', 4: '#c08a2e' };

function Dots6({ i, ink }) {
  return <div className={'dots' + (ink ? ' ink' : '')}>{[0, 1, 2, 3, 4, 5].map(n => <i key={n} className={n === i ? 'on' : ''} />)}</div>;
}

function Cover6({ t, ...o }) {
  return (
    <Frame {...F6} {...o} code={o.code ? t.code + '_01' : null} cbLabel={t.cb}>
      <div className="scrim" style={{ background: 'var(--c26-teal)' }} />
      <img className="bgimg" src="assets/moments/moment-07-drums.jpg" alt="" style={{ objectPosition: '50% 40%', opacity: .5 }} />
      <div className="scrim" style={{ background: 'linear-gradient(180deg,rgba(11,36,31,.6) 0%,rgba(11,36,31,.5) 40%,#0b241f 100%)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '0 84px 118px' }}>
        <LockBand pad={84} lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ flex: 1 }} />
        <div className="eyebrow26">{t.eyebrow}</div>
        <h2 className="title26" style={{ fontSize: 90, marginTop: 20, maxWidth: 820 }}>{t.cover}</h2>
        <div style={{ display: 'flex', gap: 12, marginTop: 40 }}>
          {[1, 2, 3, 4].map(w => <span key={w} style={{ flex: 1, height: 8, background: WC[w] }} />)}
        </div>
        <div style={{ marginTop: 36 }}><Dots6 i={0} /></div>
      </div>
    </Frame>
  );
}

function WeekSlide({ t, wk, i, ...o }) {
  const c = WC[wk.w];
  return (
    <Frame {...F6} {...o} code={o.code ? t.code + '_0' + (i + 2) : null} codeInk={!o.cb} cbLabel={t.cb} style={{ background: 'var(--c26-parchment)' }}>
      <div className="body">
        <LockBand lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ height: 620, position: 'relative', borderBottom: '8px solid ' + c }}>
          <img className="bgimg" src={wk.img} alt="" style={{ objectPosition: '50% 45%' }} />
        </div>
        <div style={{ padding: '46px 84px 116px', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 20 }}>
            <span style={{ fontFamily: 'var(--c26-font-title)', fontSize: 72, fontWeight: 700, lineHeight: 1, color: c }}>{'0' + wk.w}</span>
            <span className="eyebrow26 ink" style={{ color: c }}>{t.weekLabel}</span>
            <span style={{ flex: 1 }} />
            <span style={{ fontSize: 26, fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase', color: '#4a5b52' }}>{wk.dates}</span>
          </div>
          <h2 className="title26 ink" style={{ fontSize: 74, marginTop: 22, maxWidth: 820 }}>{wk.t}</h2>
          <div style={{ flex: 1 }} />
          <Ph style={{ fontSize: 18, marginBottom: 24 }}>Confirmed programming · pending approval</Ph>
          <Dots6 i={i + 1} ink />
        </div>
      </div>
    </Frame>
  );
}

function End6({ t, ...o }) {
  return (
    <Frame {...F6} {...o} code={o.code ? t.code + '_06' : null} cbLabel={t.cb}>
      <div className="scrim" style={{ background: 'var(--c26-teal)' }} />
      <div className="keyline" />
      <div className="body" style={{ padding: '0 84px 118px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand pad={84} lang={t.lg} scale={2.1} h={144} flush />
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 84, maxWidth: 780 }}>{t.end}</h2>
        <div className="script26" style={{ fontSize: 52, marginTop: 22 }}>{t.endSub}</div>
        <div className="money26" style={{ marginTop: 38, justifyContent: 'center' }}>
          <span className="cur">{t.weekPass}</span>
          <span className="big" style={{ fontSize: 116 }}>$56</span>
          <span className="cur">{t.cur}</span>
        </div>
        <Button variant="gold" size="lg" style={{ marginTop: 40, width: 620, justifyContent: 'center', fontSize: 30, padding: '28px 0', letterSpacing: '.12em', borderWidth: 2 }}>{t.cta}</Button>
        <div style={{ flex: 1 }} />
        <Dots6 i={5} />
      </div>
    </Frame>
  );
}

function App06() {
  return (
    <Chrome title="Master 06 · Four themed weeks carousel" format="Instagram / Facebook feed · 4:5 · 1080×1350 · 6 slides" natW={2208} stack>
      {({ safe, cb, code }) => ['en', 'es'].map(k => {
        const t = L06[k], o = { safe, cb, code };
        return (
          <Col key={k} label={t.lang}>
            <div style={{ display: 'flex', gap: 48 }}>
              <Cover6 t={t} {...o} />
              {WEEKS[k].map((wk, i) => <WeekSlide key={wk.w} t={t} wk={wk} i={i} {...o} />)}
              <End6 t={t} {...o} />
            </div>
          </Col>
        );
      })}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App06 />);