/* Shared chrome + primitives for the Taste of Tulum 2026 campaign masters. */
const DS = window.TasteOfTulumDesignSystem_01dcfe;
const { Button, FlourishDivider, RibbonBanner, CoBrandingBand } = DS;

const COBRAND_LOGOS = []; // institutional marks not supplied yet — band renders label + code only

function Chrome({ title, format, natW, stack, children }) {
  const [safe, setSafe] = React.useState(true);
  const [cb, setCb] = React.useState(false);
  const [code, setCode] = React.useState(true);
  const [fit, setFit] = React.useState(true);
  const [z, setZ] = React.useState(1);
  React.useEffect(() => {
    const f = () => setZ(fit ? Math.min(1, (window.innerWidth - 52) / natW) : 1);
    f(); window.addEventListener('resize', f);
    return () => window.removeEventListener('resize', f);
  }, [fit, natW]);
  const T = (p, s, on) => (
    <button className="tg" aria-pressed={p} onClick={() => s(!p)}>{on}</button>
  );
  return (
    <React.Fragment>
      <div className="bar">
        <div className="bartitle">
          <h1>{title}</h1>
          <span className="meta">{format}</span>
        </div>
        <div className="tgs">
          {T(safe, setSafe, 'Safe zones')}
          {T(cb, setCb, 'Co-branding')}
          {T(code, setCode, 'File code')}
          {T(fit, setFit, fit ? 'Fit to width' : '100%')}
        </div>
      </div>
      <div className="stage">
        <div className="board" style={{ zoom: z, flexDirection: stack ? 'column' : 'row' }}>{children({ safe, cb, code })}</div>
      </div>
    </React.Fragment>
  );
}

function Frame({ w, h, safe, safeTop = 250, safeBottom = 420, safeSide = 80, code, codeInk, cb, cbLabel, children, style }) {
  return (
    <div className="frame" style={{ width: w, height: h, ...style }}>
      {children}
      {cb ? <CoBrandingBand label={cbLabel || 'Con el respaldo de'} logos={COBRAND_LOGOS} height={132}
        style={{ position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 8, fontSize: 15 }} /> : null}
      {code ? <div className={'code' + (codeInk && !cb ? ' ink' : '')} style={cb ? { bottom: 152 } : null}>{code}</div> : null}
      {safe ? (
        <div className="safe">
          <i className="t" style={{ height: safeTop }} /><i className="b" style={{ height: safeBottom }} />
          <i className="l" style={{ width: safeSide }} /><i className="r" style={{ width: safeSide }} />
          <span style={{ top: safeTop - 34, left: safeSide + 14, display: safeTop ? 'block' : 'none' }}>Platform UI</span>
          <span style={{ bottom: safeBottom - 34, left: safeSide + 14 }}>Caption + CTA rail</span>
        </div>
      ) : null}
    </div>
  );
}

function Lock({ scale = 3, lang = 'en', style }) {
  const word = lang === 'es' ? 'PRESENTA' : 'PRESENTS';
  return (
    <span className="ttlock" style={{ '--lk': scale, ...style }}>
      <span className="col">
        <img className="ew" src="assets/eatwithme-white.png" alt="Eat With Me" />
        <span className="cap">{word.split('').map((l, i) => <i key={i}>{l}</i>)}</span>
      </span>
      <span className="lock-div" />
      <img className="tulum-mark" src="assets/tulum-logo-gold.png" alt="Taste of Tulum, Food & Wine Festival" />
      <span className="lock-div" />
      <span className="col">
        <span className="cap by">By</span>
        <img className="awm" src="assets/awm-white.png" alt="Art With Me" />
      </span>
    </span>
  );
}

function LockBand({ pad = 0, lang, scale = 2.4, h = 168, flush, style }) {
  return (
    <div className={'lockband' + (flush ? '' : ' ribbon')}
      style={{ height: h, margin: flush ? '0 ' + -pad + 'px' : 0, alignSelf: 'stretch', ...style }}>
      <Lock scale={scale} lang={lang} />
    </div>
  );
}

function Ph({ children, dark, style }) {
  return <span className={'ph' + (dark ? ' on-dark' : '')} style={style}>{children}</span>;
}

function Slot({ id, label, style }) {
  return <image-slot id={id} placeholder={label} style={{ display: 'block', width: '100%', height: '100%', ...style }}></image-slot>;
}

function Col({ label, children }) {
  return <div className="col"><div className="lab"><span>{label}</span><s /></div>{children}</div>;
}

// Shared campaign truth (September pricing; October = full price)
const PRICES = {
  en: [
    { n: 'Day pass', s: 'Any single day', now: '$15', oct: '$20', d: 'Full access to that day\u2019s offers.' },
    { n: 'Week pass', s: 'One themed week', now: '$56', oct: '$75', d: 'Seven days of one themed week.' },
    { n: 'Full festival', s: 'All four weeks', now: '$150', oct: '$200', d: 'Everything, all month. All four themed weeks.' }
  ],
  es: [
    { n: 'Pase de d\u00eda', s: 'Cualquier d\u00eda', now: '$15', oct: '$20', d: 'Acceso completo a las ofertas de ese d\u00eda.' },
    { n: 'Pase semanal', s: 'Una semana tem\u00e1tica', now: '$56', oct: '$75', d: 'Siete d\u00edas de una semana tem\u00e1tica.' },
    { n: 'Pase completo', s: 'Las cuatro semanas', now: '$150', oct: '$200', d: 'Todo, todo el mes. Las cuatro semanas tem\u00e1ticas.' }
  ]
};
const WEEKS = {
  en: [
    { w: 1, dates: 'Oct 28 – Nov 3', t: 'A celebration of spirits', img: 'assets/week1-spirits.jpg' },
    { w: 2, dates: 'Nov 4 – Nov 10', t: 'Authentic Mexican cuisine', img: 'assets/week2-cuisine.jpg' },
    { w: 3, dates: 'Nov 11 – Nov 17', t: 'International delights', img: 'assets/week3-international.jpg' },
    { w: 4, dates: 'Nov 18 – Nov 27', t: 'Gratitude around the world', img: 'assets/week4-gratitude.jpg' }
  ],
  es: [
    { w: 1, dates: '28 oct – 3 nov', t: 'Una celebraci\u00f3n de los destilados', img: 'assets/week1-spirits.jpg' },
    { w: 2, dates: '4 – 10 nov', t: 'Lo mejor de la cocina mexicana', img: 'assets/week2-cuisine.jpg' },
    { w: 3, dates: '11 – 17 nov', t: 'Delicias internacionales', img: 'assets/week3-international.jpg' },
    { w: 4, dates: '18 – 27 nov', t: 'Gratitud por la comida del mundo', img: 'assets/week4-gratitude.jpg' }
  ]
};
const WeekCard = DS.WeekCard;

Object.assign(window, { PRICES, WEEKS, WeekCard, Chrome, Frame, Ph, Slot, Col, Lock, LockBand, Button, FlourishDivider, RibbonBanner, CoBrandingBand });