/* TOT26 · Campaign 2 — layouts. Every frame is photo + overlay: the photo drops into a slot. */
const LANGS = [['en', 'English'], ['es', 'Español']];
const W_COL = { 1: '#b23226', 2: '#d4772a', 3: '#1d6b5e', 4: '#c08a2e' };

function Photo({ a, lang }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#0e2a24' }}>
      <image-slot id={'c2-' + a.id + '-' + lang} placeholder={'Drop ' + a.file + '.jpg'}
        style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
      <div style={{ position: 'absolute', inset: 0, border: '2px dashed rgba(227,192,113,.3)', pointerEvents: 'none' }} />
    </div>
  );
}

function Veil({ from = .34, mid = .2, to = .95 }) {
  return <div className="scrim" style={{ background: `linear-gradient(180deg,rgba(11,36,31,${from}) 0%,rgba(11,36,31,${mid}) 34%,rgba(11,36,31,${to}) 78%,#08201c 100%)` }} />;
}

function Ghost({ label, wide }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      border: '1.5px solid var(--c26-gold-bright)', color: 'var(--c26-gold-bright)',
      fontFamily: 'var(--c26-font-info)', fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase',
      fontSize: wide ? 20 : 28, padding: wide ? '16px 28px' : '26px 44px', borderRadius: 3,
      background: 'rgba(11,36,31,.34)'
    }}>{label}</span>
  );
}

/* 1 — bottom-anchored: the headline sits low, the photograph carries the frame. */
function Anchor({ a, t, lang, tall, ...o }) {
  return (
    <Frame w={a.w} h={a.h} safeTop={tall ? 250 : 0} safeBottom={tall ? 420 : 130} safeSide={80} {...o}>
      <Photo a={a} lang={lang} /><Veil />
      <div className="keyline" />
      <div className="body" style={{ padding: tall ? '256px 80px 424px' : '0 84px 118px' }}>
        <LockBand pad={tall ? 0 : 84} lang={lang} scale={tall ? 2.2 : 2.1} h={tall ? 152 : 144} flush={!tall} />
        <div style={{ flex: 1 }} />
        <div className="eyebrow26">{C2_DATES[lang]}</div>
        <h2 className="title26" style={{ fontSize: tall ? 100 : 86, marginTop: 20, maxWidth: 860 }}>{t.h}</h2>
        <div className="lede26" style={{ fontSize: tall ? 36 : 32, marginTop: 22, maxWidth: 780 }}>{t.s}</div>
        <FlourishDivider width={280} color="rgba(227,192,113,.7)" style={{ marginTop: 34 }} />
        <div style={{ marginTop: 34 }}><Ghost label={t.c} /></div>
      </div>
    </Frame>
  );
}

/* 2 — poster: centred, atmospheric, one script line. */
function Poster({ a, t, lang, ...o }) {
  return (
    <Frame w={a.w} h={a.h} {...o}>
      <Photo a={a} lang={lang} /><Veil from={.5} mid={.3} to={.9} />
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={lang} scale={2.2} h={152} />
        <div className="eyebrow26" style={{ marginTop: 40 }}>{C2_DATES[lang]}</div>
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 112, maxWidth: 840 }}>{t.h}</h2>
        <div className="script26" style={{ fontSize: 62, marginTop: 30 }}>{t.s}</div>
        <div style={{ flex: 1 }} />
        <Ghost label={t.c} />
      </div>
    </Frame>
  );
}

/* 3 — weeks: the month as four choices. */
function Weeks({ a, t, lang, ...o }) {
  return (
    <Frame w={a.w} h={a.h} safeTop={0} safeBottom={130} safeSide={80} {...o}>
      <Photo a={a} lang={lang} /><Veil from={.44} mid={.4} to={.96} />
      <div className="keyline" />
      <div className="body" style={{ padding: '0 84px 118px' }}>
        <LockBand pad={84} lang={lang} scale={2.1} h={144} flush />
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 84, maxWidth: 840 }}>{t.h}</h2>
        <div className="lede26" style={{ fontSize: 30, marginTop: 18, maxWidth: 760 }}>{t.s}</div>
        <div style={{ display: 'flex', gap: 14, marginTop: 40 }}>
          {WEEKS[lang].map(w => (
            <div key={w.w} style={{ flex: 1, borderTop: '6px solid ' + W_COL[w.w], paddingTop: 14 }}>
              <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(244,234,212,.66)' }}>{w.dates}</div>
              <div style={{ fontFamily: 'var(--c26-font-title)', fontSize: 29, lineHeight: 1.16, color: 'var(--c26-parchment)', marginTop: 8 }}>{w.t}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 38 }}><Ghost label={t.c} /></div>
      </div>
    </Frame>
  );
}

/* 4 — nights: a long weekend, laid out night by night. */
function Nights({ a, t, lang, ...o }) {
  const nights = lang === 'es'
    ? [['Jue', '[PROGRAMA CONFIRMADO]'], ['Vie', '[PROGRAMA CONFIRMADO]'], ['Sáb', '[PROGRAMA CONFIRMADO]'], ['Dom', '[PROGRAMA CONFIRMADO]']]
    : [['Thu', '[CONFIRMED PROGRAMMING]'], ['Fri', '[CONFIRMED PROGRAMMING]'], ['Sat', '[CONFIRMED PROGRAMMING]'], ['Sun', '[CONFIRMED PROGRAMMING]']];
  return (
    <Frame w={a.w} h={a.h} safeTop={0} safeBottom={130} safeSide={80} {...o}>
      <Photo a={a} lang={lang} /><Veil from={.4} mid={.34} to={.96} />
      <div className="keyline" />
      <div className="body" style={{ padding: '0 84px 118px' }}>
        <LockBand pad={84} lang={lang} scale={2.1} h={144} flush />
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 78, maxWidth: 820 }}>{t.h}</h2>
        <div style={{ marginTop: 34 }}>
          {nights.map(([d, x]) => (
            <div key={d} style={{ display: 'flex', alignItems: 'baseline', gap: 24, padding: '18px 0', borderTop: '1px solid rgba(227,192,113,.3)' }}>
              <span style={{ width: 96, fontSize: 22, fontWeight: 800, letterSpacing: '.18em', textTransform: 'uppercase', color: '#e3c071' }}>{d}</span>
              <Ph dark style={{ fontSize: 22 }}>{x}</Ph>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 12 }}><Ph dark style={{ fontSize: 18 }}>{lang === 'es' ? 'Programa por noche · pendiente de aprobación' : 'Programming per night · pending approval'}</Ph></div>
        <div className="lede26" style={{ fontSize: 28, marginTop: 26, maxWidth: 720 }}>{t.s}</div>
        <div style={{ marginTop: 30 }}><Ghost label={t.c} /></div>
      </div>
    </Frame>
  );
}

/* 5 — triptych: three photographs, three words, one table in between. */
function Triptych({ a, t, lang, ...o }) {
  return (
    <Frame w={a.w} h={a.h} {...o} style={{ background: 'var(--c26-teal)' }}>
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px' }}>
        <LockBand lang={lang} scale={2.2} h={152} />
        <div style={{ display: 'flex', gap: 16, marginTop: 44 }}>
          {t.words.map((wd, i) => (
            <div key={wd} style={{ flex: 1, minWidth: 0 }}>
              <div style={{ height: 300, border: '1.5px solid var(--c26-gold)', background: '#fffaee', padding: 8 }}>
                <image-slot id={'c2-' + a.id + '-' + lang + '-' + i} placeholder={wd}
                  style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
              </div>
              <div style={{ fontFamily: 'var(--c26-font-title)', fontSize: 40, color: '#e3c071', marginTop: 16 }}>{wd}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <h2 className="title26" style={{ fontSize: 88, maxWidth: 860 }}>{t.h}</h2>
        <div className="script26" style={{ fontSize: 56, marginTop: 24 }}>{t.s}</div>
        <div style={{ flex: 1 }} />
        <Ghost label={t.c} />
      </div>
    </Frame>
  );
}

/* 6 — calendar: the festival month, Oct 28 → Nov 27 (Oct 28, 2026 is a Wednesday). */
function CalendarFrame({ a, t, lang, ...o }) {
  const heads = lang === 'es' ? ['L', 'M', 'M', 'J', 'V', 'S', 'D'] : ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
  const days = [];
  for (let d = 28; d <= 31; d++) days.push({ n: d, m: 10 });
  for (let d = 1; d <= 27; d++) days.push({ n: d, m: 11 });
  const cells = [null, null].concat(days.map((d, i) => ({ n: d.n, m: d.m, w: i < 7 ? 1 : i < 14 ? 2 : i < 21 ? 3 : 4 })));
  while (cells.length < 35) cells.push(null);
  return (
    <Frame w={a.w} h={a.h} safeTop={0} safeBottom={130} safeSide={80} {...o} style={{ background: 'var(--c26-parchment)' }} codeInk>
      <div className="keyline ink" />
      <div className="body">
        <LockBand lang={lang} scale={2.1} h={144} flush />
        <div style={{ padding: '52px 84px 116px', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <h2 className="title26 ink" style={{ fontSize: 76, maxWidth: 820 }}>{t.h}</h2>
          <div className="lede26 ink" style={{ fontSize: 30, marginTop: 16, maxWidth: 740 }}>{t.s}</div>
          <div style={{ marginTop: 40, border: '1.5px solid var(--c26-gold)', background: 'rgba(255,255,255,.5)', padding: 18 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6 }}>
              {heads.map((x, i) => <div key={'h' + i} style={{ textAlign: 'center', fontSize: 19, fontWeight: 800, letterSpacing: '.12em', color: '#8a9a90', paddingBottom: 8 }}>{x}</div>)}
              {cells.map((c, i) => (
                <div key={i} style={{
                  aspectRatio: '1', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
                  fontFamily: 'var(--c26-font-title)', fontSize: 26, fontVariantNumeric: 'tabular-nums',
                  color: c ? '#fdf3e0' : 'transparent', background: c ? W_COL[c.w] : 'transparent', borderRadius: 2
                }}>
                  {c ? <span>{c.n}</span> : null}
                  {c && ((c.n === 28 && c.m === 10) || (c.n === 1 && c.m === 11)) ? <span style={{ fontFamily: 'var(--c26-font-info)', fontSize: 12, fontWeight: 800, letterSpacing: '.1em', opacity: .85 }}>{c.m === 10 ? 'OCT' : 'NOV'}</span> : null}
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 18, marginTop: 18, flexWrap: 'wrap' }}>
              {WEEKS[lang].map(w => (
                <span key={w.w} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 19, color: '#4a5b52' }}>
                  <i style={{ width: 14, height: 14, background: W_COL[w.w], borderRadius: 2 }} />{w.dates}
                </span>
              ))}
            </div>
          </div>
          <div style={{ flex: 1 }} />
          <span style={{
            display: 'inline-flex', alignSelf: 'flex-start', border: '1.5px solid var(--c26-gold)', color: 'var(--c26-teal)',
            fontWeight: 800, letterSpacing: '.14em', textTransform: 'uppercase', fontSize: 26, padding: '22px 38px', borderRadius: 3
          }}>{t.c}</span>
        </div>
      </div>
    </Frame>
  );
}

/* 7 — countdown: the numeral is the image. */
function Countdown({ a, t, lang, ...o }) {
  return (
    <Frame w={a.w} h={a.h} {...o}>
      <Photo a={a} lang={lang} /><Veil from={.6} mid={.44} to={.94} />
      <div className="keyline" />
      <div className="body" style={{ padding: '256px 80px 424px', alignItems: 'center', textAlign: 'center' }}>
        <LockBand lang={lang} scale={2.2} h={152} />
        <div style={{ flex: 1 }} />
        <span className="tnum" style={{ fontFamily: 'var(--c26-font-title)', fontSize: 300, fontWeight: 700, lineHeight: .95, color: '#e3c071', fontVariantNumeric: 'tabular-nums' }}>{t.num}</span>
        <div className="eyebrow26" style={{ fontSize: 32, marginTop: 14 }}>{t.unit}</div>
        <h2 className="title26" style={{ fontSize: 88, marginTop: 26, maxWidth: 820 }}>{t.h}</h2>
        <FlourishDivider width={320} color="rgba(227,192,113,.7)" style={{ marginTop: 32 }} />
        <div className="lede26" style={{ fontSize: 34, marginTop: 26, maxWidth: 760 }}>{t.s}</div>
        <div style={{ flex: 1 }} />
        <Ghost label={t.c} />
      </div>
    </Frame>
  );
}

/* 8 — banner: 1200×628 warm return. */
function BannerC2({ a, t, lang, ...o }) {
  return (
    <Frame w={a.w} h={a.h} safeTop={0} safeBottom={0} safeSide={0} {...o}>
      <Photo a={a} lang={lang} />
      <div className="scrim" style={{ background: 'linear-gradient(90deg,#0b241f 0%,rgba(11,36,31,.92) 46%,rgba(11,36,31,.3) 100%)' }} />
      <div style={{ position: 'absolute', inset: 18, border: '1.5px solid rgba(227,192,113,.4)', zIndex: 6 }} />
      <div className="body" style={{ padding: '56px 60px', width: 720 }}>
        <Lock scale={1.5} lang={lang} />
        <div style={{ flex: 1 }} />
        <div className="eyebrow26" style={{ fontSize: 15 }}>{C2_DATES[lang]}</div>
        <h2 className="title26" style={{ fontSize: 56, marginTop: 14 }}>{t.h}</h2>
        <div className="lede26" style={{ fontSize: 22, marginTop: 14 }}>{t.s}</div>
        <div style={{ marginTop: 26 }}><Ghost label={t.c} wide /></div>
      </div>
    </Frame>
  );
}

const LAYOUTS = { anchor: Anchor, poster: Poster, weeks: Weeks, nights: Nights, triptych: Triptych, calendar: CalendarFrame, countdown: Countdown, banner: BannerC2 };

function AssetPage() {
  const id = document.querySelector('meta[name="asset-id"]').content;
  const a = C2.filter(x => x.id === id)[0];
  const L = LAYOUTS[a.layout];
  const n = C2.map(x => x.id).indexOf(id);
  return (
    <Chrome title={'Asset ' + a.id + ' · ' + a.en.h} format={a.ch + ' · ' + a.r + ' · ' + a.w + '×' + a.h + ' · ' + a.date} natW={a.w * 2 + 48}>
      {({ safe, cb, code }) => LANGS.map(([lg, label]) => (
        <Col key={lg} label={label}>
          <L a={a} t={a[lg]} lang={lg} tall={a.h > a.w * 1.4} safe={safe} cb={cb}
            code={code ? a.file + '_' + lg.toUpperCase() + '_v1' : null}
            cbLabel={lg === 'es' ? 'Con el respaldo de' : 'Supported by'} />
        </Col>
      ))}
    </Chrome>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<AssetPage />);