/* Multiligo Social Studio — 2026 layout pack (May 2026 trends)
 * Adds 6 trending layouts to window.LAYOUTS:
 *   highlight  — keyword highlight tape (marker style)
 *   arrow      — brutalist directional
 *   mono       — monospace terminal / data callout
 *   compare    — before/after side-by-side
 *   hook       — reels/TikTok hook+payoff (works with video bg)
 *   editorial  — magazine-style serif + image
 */

const _S = (v, s) => Math.round(v * s);
const _sc = (w, h) => Math.min(w, h) / 1080;
const _szPad = (w, h, s, def) => {
  const sz = (window.__resources || {}).safeZone;
  if (!sz || h <= w * 1.5) return { padding: _S(def, s) };
  return { paddingTop: _S(260, s), paddingBottom: _S(420, s), paddingLeft: _S(def, s), paddingRight: _S(160, s) };
};
const _muted = (b) => b === 'paper' ? 'var(--ml-ink-3)' : 'rgba(255,255,255,0.72)';
const _line  = (b) => b === 'paper' ? 'var(--ml-line)' : 'rgba(255,255,255,0.18)';
const _acc   = (b) => b === 'red' ? 'white' : 'var(--ml-red)';
const _bgSt  = (b) => b === 'overlay' ? { background: 'linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.80) 100%)', color: 'white' }
  : b === 'ink' ? { background: 'var(--ml-ink)', color: 'white' }
  : b === 'red' ? { background: 'var(--ml-red)', color: 'white' }
  : { background: 'var(--ml-paper)', color: 'var(--ml-ink)' };

function _Logo({ pos, bg, scale }) {
  if (pos === 'none') return null;
  const onDark = bg !== 'paper';
  const res = window.__resources || {};
  const src = res[onDark ? 'logoWhite' : 'logo'] || (onDark ? 'assets/logo_white.png' : 'assets/logo.png');
  const invert = onDark && res.invertOnDark;
  const lScale = res.logoScale || 1;
  const o = _S(72, scale);
  const p = { tl: { top: o, left: o }, tc: { top: o, left: '50%', transform: 'translateX(-50%)' }, tr: { top: o, right: o },
              bl: { bottom: o, left: o }, bc: { bottom: o, left: '50%', transform: 'translateX(-50%)' }, br: { bottom: o, right: o } };
  return <img src={src} alt="Brand" style={{
    position: 'absolute', ...p[pos],
    height: _S(36 * lScale, scale), width: 'auto',
    filter: invert ? 'brightness(0) invert(1)' : undefined,
  }} />;
}

function _BrandingWatermark({ slide, bg, s }) {
  const res = window.__resources || {};
  const text = slide.footer || res.website || '';
  if (!text) return null;
  const bPos = res.brandingPos || 'bl';
  const bScale = res.brandingScale || 1;
  const o = _S(56, s);
  const h = _S(96, s);
  const posMap = {
    tl: { top: o, left: h },
    tc: { top: o, left: '50%', transform: 'translateX(-50%)' },
    tr: { top: o, right: h },
    bl: { bottom: o, left: h },
    bc: { bottom: o, left: '50%', transform: 'translateX(-50%)' },
    br: { bottom: o, right: h },
  };
  return (
    <div style={{
      position: 'absolute',
      ...(posMap[bPos] || posMap.bl),
      fontSize: _S(18 * bScale, s),
      color: _muted(bg), fontWeight: 500,
    }}>{text}</div>
  );
}

function _BgVideo({ video, overlayOpacity = 0.5 }) {
  if (!video || !video.url) return null;
  const o = overlayOpacity;
  const gradient = `linear-gradient(180deg, rgba(0,0,0,${(o*0.1).toFixed(2)}) 0%, rgba(0,0,0,${(o*1.3).toFixed(2)}) 70%, rgba(0,0,0,${Math.min(o*1.7,0.95).toFixed(2)}) 100%)`;
  return (
    <>
      <video src={video.url} muted autoPlay loop playsInline data-bg-overlay="1"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0 }} />
      <div data-bg-overlay="1" style={{ position: 'absolute', inset: 0, zIndex: 0, background: gradient }} />
    </>
  );
}

function _Foot({ bg, idx, total, s, slide, showBranding = true, width = 1080, height = 1080 }) {
  return (
    <>
      {showBranding && <_BrandingWatermark slide={slide} bg={bg} s={s} />}
      {total > 1 && width >= height && (
        <div style={{
          position: 'absolute', right: _S(96, s), bottom: _S(56, s),
          fontSize: _S(18, s), color: _muted(bg), fontWeight: 500,
          fontFamily: 'var(--ml-font-mono)',
        }}>{String(idx + 1).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
      )}
    </>
  );
}

// ============ 13. HIGHLIGHT TAPE ============
function LayoutHighlight({ slide, bg, logoPos, index, total, width, height, lang, showBranding = true, textScale = 1, overlayOpacity = 0.5 }) {
  const s = _sc(width, height);
  const ts = s * textScale;
  const t = slide.title || '';
  const hl = slide.highlight || t.split(/\s+/).sort((a,b)=>b.length-a.length)[0] || '';
  const i = hl ? t.toLowerCase().indexOf(hl.toLowerCase()) : -1;
  const parts = i >= 0 ? [t.slice(0,i), t.slice(i,i+hl.length), t.slice(i+hl.length)] : [t,'',''];
  const hasV = slide.video && slide.video.url;
  const root = hasV ? { background: '#0e0e0f', color: 'white' } : _bgSt(bg);
  const eBg = hasV ? 'ink' : bg;
  return (
    <div style={{ width, height, position: 'relative', overflow: 'hidden', ...root }}>
      {hasV && <_BgVideo video={slide.video} overlayOpacity={overlayOpacity} />}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, ..._szPad(width, height, s, 96),
        display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <_Logo pos={logoPos} bg={eBg} scale={s} />
        {slide.eyebrow && (
          <div style={{ fontSize: _S(20, ts), fontWeight: 600, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: _acc(eBg), marginBottom: _S(28, s) }}>{slide.eyebrow}</div>
        )}
        <h1 style={{ margin: 0, fontSize: _S(100, ts), fontWeight: 700, lineHeight: 1.12,
          letterSpacing: '-0.03em', textWrap: 'balance', maxWidth: '94%' }}>
          {parts[0]}
          {parts[1] && (
            <span style={{
              background: _acc(eBg), color: eBg === 'red' ? 'var(--ml-red)' : 'white',
              padding: `0 ${_S(18, s)}px`, marginInline: _S(4, s),
              display: 'inline-block', transform: 'rotate(-1.5deg)',
              borderRadius: _S(8, s),
            }}>{parts[1]}</span>
          )}
          {parts[2]}
        </h1>
        {slide.body && (
          <p style={{ margin: `${_S(40, s)}px 0 0`, fontSize: _S(28, ts), lineHeight: 1.45,
            color: _muted(eBg), maxWidth: '78%' }}>{slide.body}</p>
        )}
        {slide.cta && (
          <div style={{ marginTop: _S(32, s), display: 'inline-flex', alignItems: 'center',
            gap: _S(12, s), fontSize: _S(22, ts), fontWeight: 600, color: _acc(eBg) }}>
            {slide.cta} <span>→</span>
          </div>
        )}
        <_Foot bg={eBg} idx={index} total={total} s={s} slide={slide} showBranding={showBranding} width={width} height={height} />
      </div>
    </div>
  );
}

// ============ 14. ARROW ============
function LayoutArrow({ slide, bg, logoPos, index, total, width, height, lang, showBranding = true, textScale = 1, overlayOpacity = 0.5 }) {
  const s = _sc(width, height);
  const ts = s * textScale;
  return (
    <div style={{ width, height, position: 'relative', overflow: 'hidden', ..._szPad(width, height, s, 96),
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between', ..._bgSt(bg) }}>
      <_Logo pos={logoPos} bg={bg} scale={s} />
      {slide.eyebrow && (
        <div style={{ fontSize: _S(22, ts), fontWeight: 600, letterSpacing: '0.12em',
          textTransform: 'uppercase', color: _muted(bg) }}>{slide.eyebrow}</div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: _S(40, s) }}>
        <svg width={_S(220, s)} height={_S(120, s)} viewBox="0 0 220 120" style={{ flexShrink: 0 }}>
          <line x1="0" y1="60" x2="180" y2="60" stroke={_acc(bg)} strokeWidth="12" />
          <polyline points="140,20 200,60 140,100" fill="none" stroke={_acc(bg)} strokeWidth="12" strokeLinejoin="miter" />
        </svg>
        <h1 style={{ margin: 0, fontSize: _S(80, ts), fontWeight: 700, lineHeight: 1.05,
          letterSpacing: '-0.03em', textWrap: 'balance', flex: 1 }}>{slide.title}</h1>
      </div>
      <div>
        {slide.body && (
          <p style={{ margin: 0, fontSize: _S(26, ts), lineHeight: 1.45, color: _muted(bg), maxWidth: '70%' }}>{slide.body}</p>
        )}
        {slide.cta && (
          <div style={{ marginTop: _S(28, s), display: 'inline-flex', alignItems: 'center',
            gap: _S(12, s), fontSize: _S(22, ts), fontWeight: 600, color: _acc(bg) }}>
            {slide.cta} <span>→</span>
          </div>
        )}
        <_Foot bg={bg} idx={index} total={total} s={s} slide={slide} showBranding={showBranding} width={width} height={height} />
      </div>
    </div>
  );
}

// ============ 15. MONO ============
function LayoutMono({ slide, bg, logoPos, index, total, width, height, lang, showBranding = true, textScale = 1, overlayOpacity = 0.5 }) {
  const s = _sc(width, height);
  const ts = s * textScale;
  const card = bg === 'paper' ? 'var(--ml-paper-2)' : 'rgba(0,0,0,0.22)';
  const lines = slide.items && slide.items.length ? slide.items : [slide.body || '> ' + (slide.title || '')];
  return (
    <div style={{ width, height, position: 'relative', overflow: 'hidden', ..._szPad(width, height, s, 96),
      display: 'flex', flexDirection: 'column', justifyContent: 'center', ..._bgSt(bg) }}>
      <_Logo pos={logoPos} bg={bg} scale={s} />
      {slide.eyebrow && (
        <div style={{ fontSize: _S(20, ts), fontWeight: 600, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: _acc(bg), marginBottom: _S(28, s),
          fontFamily: 'var(--ml-font-mono)' }}>// {slide.eyebrow}</div>
      )}
      <h2 style={{ margin: 0, fontSize: _S(60, ts), fontWeight: 700, lineHeight: 1.15,
        letterSpacing: '-0.02em', maxWidth: '90%', textWrap: 'balance' }}>{slide.title}</h2>
      <div style={{ marginTop: _S(40, s), background: card,
        border: `1px solid ${_line(bg)}`, borderRadius: _S(14, s), padding: _S(36, s),
        fontFamily: 'var(--ml-font-mono)', fontSize: _S(24, ts), lineHeight: 1.7,
        color: bg === 'paper' ? 'var(--ml-ink-2)' : 'rgba(255,255,255,0.94)' }}>
        {lines.slice(0, 5).map((line, i) => (
          <div key={i} style={{ display: 'flex', gap: _S(18, s) }}>
            <span style={{ color: _acc(bg) }}>›</span>
            <span style={{ flex: 1 }}>{line}</span>
          </div>
        ))}
      </div>
      {slide.cta && (
        <div style={{ marginTop: _S(32, s), display: 'inline-flex', alignItems: 'center',
          gap: _S(12, s), fontSize: _S(22, ts), fontWeight: 600, color: _acc(bg) }}>
          {slide.cta} <span>→</span>
        </div>
      )}
      <_Foot bg={bg} idx={index} total={total} s={s} slide={slide} showBranding={showBranding} width={width} height={height} />
    </div>
  );
}

// ============ 16. COMPARE ============
function LayoutCompare({ slide, bg, logoPos, index, total, width, height, lang, showBranding = true, textScale = 1, overlayOpacity = 0.5 }) {
  const s = _sc(width, height);
  const ts = s * textScale;
  const it = (slide.items && slide.items.length >= 2) ? slide.items
    : [lang === 'tr' ? 'Eski yol' : 'Old way', lang === 'tr' ? 'Yeni yol' : 'New way'];
  const cards = [
    { lbl: lang === 'tr' ? 'Önce' : 'Before', txt: it[0], chk: false },
    { lbl: lang === 'tr' ? 'Sonra' : 'After',  txt: it[1], chk: true  },
  ];
  return (
    <div style={{ width, height, position: 'relative', overflow: 'hidden', ..._szPad(width, height, s, 80),
      display: 'flex', flexDirection: 'column', ..._bgSt(bg) }}>
      <_Logo pos={logoPos} bg={bg} scale={s} />
      {slide.eyebrow && (
        <div style={{ fontSize: _S(20, ts), fontWeight: 600, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: _muted(bg), marginBottom: _S(20, s) }}>{slide.eyebrow}</div>
      )}
      <h2 style={{ margin: 0, fontSize: _S(56, ts), fontWeight: 700, lineHeight: 1.15,
        letterSpacing: '-0.02em', maxWidth: '92%', textWrap: 'balance' }}>{slide.title}</h2>
      <div style={{ marginTop: _S(40, s), flex: 1, display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: _S(24, s) }}>
        {cards.map((c, i) => (
          <div key={i} style={{
            background: c.chk ? _acc(bg) : (bg === 'paper' ? 'var(--ml-paper-2)' : 'rgba(0,0,0,0.18)'),
            color: c.chk ? (bg === 'red' ? 'var(--ml-red)' : 'white') : 'inherit',
            borderRadius: _S(20, s), padding: _S(40, s),
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            border: c.chk ? 'none' : `1px solid ${_line(bg)}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: _S(12, s) }}>
              <span style={{ width: _S(36, s), height: _S(36, s), borderRadius: '50%',
                background: c.chk ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.08)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: _S(20, ts), fontWeight: 700 }}>{c.chk ? '✓' : '×'}</span>
              <span style={{ fontSize: _S(18, ts), fontWeight: 600, letterSpacing: '0.12em',
                textTransform: 'uppercase', opacity: 0.85 }}>{c.lbl}</span>
            </div>
            <div style={{ fontSize: _S(34, ts), fontWeight: 600, lineHeight: 1.25,
              letterSpacing: '-0.015em', marginTop: _S(40, s) }}>{c.txt}</div>
          </div>
        ))}
      </div>
      {slide.cta && (
        <div style={{ marginTop: _S(20, s), display: 'inline-flex', alignItems: 'center',
          gap: _S(12, s), fontSize: _S(22, ts), fontWeight: 600, color: _acc(bg) }}>
          {slide.cta} <span>→</span>
        </div>
      )}
      {showBranding && <_BrandingWatermark slide={slide} bg={bg} s={s} />}
      {total > 1 && width >= height && (
        <div style={{
          position: 'absolute', right: _S(96, s), bottom: _S(56, s),
          fontSize: _S(18, ts), color: _muted(bg), fontWeight: 500,
          fontFamily: 'var(--ml-font-mono)',
        }}>{String(index + 1).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
      )}
    </div>
  );
}

// ============ 17. HOOK (Reels) ============
function LayoutHook({ slide, bg, logoPos, index, total, width, height, lang, textScale = 1, overlayOpacity = 0.5 }) {
  const s = _sc(width, height);
  const ts = s * textScale;
  const hasV = slide.video && slide.video.url;
  const root = hasV ? { background: '#0e0e0f', color: 'white' } : _bgSt(bg);
  const eBg = hasV ? 'ink' : bg;
  const hook = slide.eyebrow || (lang === 'tr' ? 'Çoğu marka bunu kaçırıyor' : 'Most brands miss this');
  return (
    <div style={{ width, height, position: 'relative', overflow: 'hidden', ...root }}>
      {hasV && <_BgVideo video={slide.video} overlayOpacity={overlayOpacity} />}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, ..._szPad(width, height, s, 72),
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <_Logo pos={logoPos} bg={eBg} scale={s} />
        {/* HOOK — top */}
        <div style={{
          alignSelf: 'flex-start',
          background: 'white', color: 'var(--ml-ink)',
          padding: `${_S(20, s)}px ${_S(28, s)}px`,
          borderRadius: _S(16, s),
          fontSize: _S(36, ts), fontWeight: 700, letterSpacing: '-0.015em',
          lineHeight: 1.2, maxWidth: '88%',
          boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
          marginTop: _S(60, s),
        }}>{hook}</div>
        {/* PAYOFF — bottom big text */}
        <div style={{ marginBottom: _S(80, s) }}>
          <h1 style={{
            margin: 0, fontSize: _S(92, ts), fontWeight: 700, lineHeight: 1.1,
            letterSpacing: '-0.03em', textWrap: 'balance', color: 'white',
            textShadow: hasV ? '0 4px 20px rgba(0,0,0,0.4)' : 'none',
          }}>{slide.title}</h1>
          {slide.body && (
            <p style={{ margin: `${_S(28, s)}px 0 0`, fontSize: _S(28, ts), lineHeight: 1.4,
              color: hasV ? 'rgba(255,255,255,0.92)' : _muted(eBg) }}>{slide.body}</p>
          )}
          {slide.cta && (
            <div style={{
              marginTop: _S(32, s),
              display: 'inline-flex', alignItems: 'center', gap: _S(14, s),
              padding: `${_S(16, s)}px ${_S(26, s)}px`,
              background: _acc(eBg), color: eBg === 'red' ? 'var(--ml-red)' : 'white',
              borderRadius: 999, fontSize: _S(24, ts), fontWeight: 600,
            }}>{slide.cta} →</div>
          )}
        </div>
      </div>
    </div>
  );
}

// ============ 18. EDITORIAL — magazine cover style ============
function LayoutEditorial({ slide, bg, logoPos, index, total, width, height, lang, showBranding = true, textScale = 1, overlayOpacity = 0.5 }) {
  const s = _sc(width, height);
  const ts = s * textScale;
  const sz = (window.__resources || {}).safeZone && height > width * 1.5;
  return (
    <div style={{ width, height, position: 'relative', overflow: 'hidden', ..._bgSt(bg),
      display: 'flex', flexDirection: 'column' }}>
      <_Logo pos={logoPos} bg={bg} scale={s} />
      {/* Top metadata strip */}
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        padding: sz
          ? `${_S(260, s)}px ${_S(160, s)}px ${_S(24, s)}px`
          : `${_S(48, s)}px ${_S(72, s)}px ${_S(24, s)}px`,
        fontSize: _S(18, ts), fontFamily: 'var(--ml-font-mono)', color: _muted(bg),
        borderBottom: `1px solid ${_line(bg)}`,
        letterSpacing: '0.04em',
      }}>
        <span>Vol. {String(index + 1).padStart(2,'0')}{slide.footer ? ' — ' + slide.footer : ''}</span>
        <span>{slide.eyebrow || (lang === 'tr' ? 'Bülten' : 'Bulletin')}</span>
        <span>{new Date().toLocaleDateString(lang === 'tr' ? 'tr-TR' : 'en-US', { year: 'numeric', month: 'short' })}</span>
      </div>
      <div style={{ flex: 1, padding: sz ? `${_S(72, s)}px ${_S(160, s)}px` : _S(72, s), display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <h1 style={{
          margin: 0,
          fontFamily: 'Georgia, "Times New Roman", serif',
          fontSize: _S(108, ts), fontWeight: 600, lineHeight: 1.0,
          letterSpacing: '-0.03em', textWrap: 'balance',
        }}>{slide.title}</h1>
        {slide.body && (
          <p style={{
            margin: `${_S(48, s)}px 0 0`,
            maxWidth: '70%', fontSize: _S(28, ts), lineHeight: 1.5,
            color: _muted(bg),
            columnCount: 1,
          }}>{slide.body}</p>
        )}
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        padding: sz
          ? `${_S(24, s)}px ${_S(160, s)}px ${_S(420, s)}px`
          : `${_S(24, s)}px ${_S(72, s)}px ${_S(48, s)}px`,
        fontSize: _S(18, ts), color: _muted(bg),
        borderTop: `1px solid ${_line(bg)}`,
      }}>
        {showBranding && <span style={{ fontWeight: 600 }}>{slide.footer || (window.__resources || {}).website || ''}</span>}
        {slide.cta && <span style={{ color: _acc(bg), fontWeight: 600 }}>{slide.cta} →</span>}
        {total > 1 && width >= height && <span style={{ fontFamily: 'var(--ml-font-mono)' }}>p. {String(index + 1).padStart(2,'0')}</span>}
      </div>
    </div>
  );
}

// Register
const extra2026 = [
  { id: 'highlight', name: 'Highlight', component: LayoutHighlight, desc: '2026 · Marker tape on keyword' },
  { id: 'arrow',     name: 'Arrow',     component: LayoutArrow,     desc: '2026 · Brutalist directional' },
  { id: 'mono',      name: 'Mono',      component: LayoutMono,      desc: '2026 · Terminal data callout' },
  { id: 'compare',   name: 'Compare',   component: LayoutCompare,   desc: '2026 · Before / After' },
  { id: 'hook',      name: 'Reels Hook',component: LayoutHook,      desc: '2026 · Reels hook + payoff' },
  { id: 'editorial', name: 'Editorial', component: LayoutEditorial, desc: '2026 · Magazine cover' },
];
if (window.LAYOUTS) {
  window.LAYOUTS.push(...extra2026);
}