// 01 · TikTok ad creatives — 8 hook variants in iPhone frames.
// Each ad mocks: status bar, video frame with hook caption, sidebar UI
// (avatar, like, comment, share), and bottom username + caption.

const TIKTOK_ADS = [
  {
    id: 'a',
    hook: 'POV: you tore your shoulder lifting and the orthopod said "rest."',
    angle: 'Pattern-interrupt POV',
    subhook: 'I didn\'t. Watch what happened in 14 days.',
    bg: 'gym',
    creator: 'kyle.recovered',
    badge: 'sponsored',
    caption: '#bpc157 #peptides #recovery',
    sound: 'original audio · 2.1M',
    likes: '184K',
    comments: '3,421',
    shares: '8,902',
    cta: 'Take the 60-sec quiz',
  },
  {
    id: 'b',
    hook: 'My PT charges $180/visit. I spent $97 and never went back.',
    angle: 'Price-anchor / contrarian',
    subhook: 'The peptide nobody in PT will tell you about.',
    bg: 'kitchen',
    creator: 'dr.matt.dpt',
    badge: 'creator',
    caption: 'not medical advice — research compound',
    sound: 'documentary · trending',
    likes: '72K',
    comments: '1,108',
    shares: '4,210',
    cta: 'Find my protocol',
  },
  {
    id: 'c',
    hook: 'I\'m 47. I deadlift 4 plates. This is the only "supplement" I take.',
    angle: 'Authority + identity',
    subhook: 'And it costs less than a steak dinner.',
    bg: 'gym',
    creator: 'old.man.lifts',
    badge: 'sponsored',
    caption: 'BPC-157 → 30 day starter ↓',
    sound: 'original audio',
    likes: '412K',
    comments: '9,840',
    shares: '22.1K',
    cta: 'See the protocol',
  },
  {
    id: 'd',
    hook: '3 things doctors won\'t prescribe for joint pain (#2 shocked me)',
    angle: 'Listicle / curiosity gap',
    subhook: 'Number 2 is the one bodybuilders quietly use.',
    bg: 'desk',
    creator: 'biohackdaily',
    badge: 'sponsored',
    caption: 'save this before it gets taken down',
    sound: 'tense piano · 142K',
    likes: '298K',
    comments: '12.4K',
    shares: '41K',
    cta: 'Watch the breakdown',
  },
  {
    id: 'e',
    hook: 'Day 1 vs Day 14 of my BPC-157 protocol.',
    angle: 'Transformation / before-after',
    subhook: 'No filter. Same lighting. Same shorts.',
    bg: 'mirror',
    creator: 'rachael.runs',
    badge: 'creator',
    caption: 'comparison in caption — read it',
    sound: 'lofi beat · trending',
    likes: '521K',
    comments: '14.2K',
    shares: '38K',
    cta: 'Get the protocol',
  },
  {
    id: 'f',
    hook: 'Stop. If your knees crack going downstairs — watch this.',
    angle: 'Direct call-out',
    subhook: 'It\'s not arthritis. It\'s collagen turnover.',
    bg: 'stairs',
    creator: 'jointlab',
    badge: 'sponsored',
    caption: 'study link in bio',
    sound: 'whoosh swipe · trending',
    likes: '89K',
    comments: '2,304',
    shares: '11.6K',
    cta: 'Take the 60-sec quiz',
  },
  {
    id: 'g',
    hook: 'I got my peptides tested at a 3rd-party lab. Here\'s what I found.',
    angle: 'Trust / investigation',
    subhook: '4 of 5 brands failed. Only one passed clean.',
    bg: 'lab',
    creator: 'labrat.tested',
    badge: 'sponsored',
    caption: 'COAs on the website. zero hidden.',
    sound: 'original audio · 880K',
    likes: '247K',
    comments: '5,910',
    shares: '19K',
    cta: 'See the COAs',
  },
  {
    id: 'h',
    hook: 'My wife: "You\'re 39. Stop acting 60." So I tried this.',
    angle: 'Story-driven / emotional',
    subhook: 'Two weeks later I out-ran our 9 year old.',
    bg: 'park',
    creator: 'dad.bod.upgrade',
    badge: 'creator',
    caption: 'son still mad about it',
    sound: 'sentimental · 41K',
    likes: '631K',
    comments: '18.9K',
    shares: '52K',
    cta: 'Get the starter kit',
  },
];

// Background "video frame" — mimics a paused TikTok video without
// drawing fake humans. Uses gradient + grain + label.
function VideoBg({ kind, dark }) {
  const map = {
    gym:     { from: '#1a1a1a', to: '#2b1a14', tag: 'gym · interior · low light' },
    kitchen: { from: '#3a2a1a', to: '#1a1410', tag: 'kitchen · morning' },
    desk:    { from: '#0c1428', to: '#1a2438', tag: 'desk · overhead shot' },
    mirror:  { from: '#221a1a', to: '#3a2620', tag: 'mirror · selfie · daylight' },
    stairs:  { from: '#181818', to: '#262626', tag: 'staircase · pov' },
    lab:     { from: '#0a1812', to: '#162820', tag: 'lab · pipette closeup' },
    park:    { from: '#1a2818', to: '#2a3a1f', tag: 'park · golden hour' },
  };
  const c = map[kind] || map.gym;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(160deg, ${c.from}, ${c.to})`,
      overflow: 'hidden',
    }}>
      {/* film grain */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px),
                          repeating-radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03) 0 1px, transparent 1px 5px)`,
        opacity: 0.7,
      }} />
      {/* vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%)',
      }} />
      {/* footage tag */}
      <div style={{
        position: 'absolute', top: 56, left: 12,
        fontFamily: 'var(--font-mono)', fontSize: 8,
        color: 'rgba(255,255,255,0.4)',
        letterSpacing: '0.1em', textTransform: 'uppercase',
      }}>[ ugc footage · {c.tag} ]</div>
    </div>
  );
}

// TikTok right-side action rail (heart, comment, share, audio disc)
function ActionRail({ ad }) {
  return (
    <div style={{
      position: 'absolute', right: 8, bottom: 92,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      color: '#fff',
    }}>
      {/* avatar w/ + */}
      <div style={{ position: 'relative' }}>
        <div style={{
          width: 38, height: 38, borderRadius: '50%',
          border: '1.5px solid #fff',
          background: 'linear-gradient(135deg, #555, #222)',
        }} />
        <div style={{
          position: 'absolute', bottom: -6, left: '50%', transform: 'translateX(-50%)',
          width: 16, height: 16, borderRadius: 999, background: 'var(--tp-cta)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 12, fontWeight: 700,
        }}>+</div>
      </div>
      {[
        { icon: '♥', count: ad.likes },
        { icon: '💬', count: ad.comments },
        { icon: '↗', count: ad.shares },
      ].map((b, i) => (
        <div key={i} style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 24, lineHeight: 1, marginBottom: 2 }}>{b.icon}</div>
          <div style={{ fontSize: 10, fontWeight: 600, textShadow: '0 1px 2px rgba(0,0,0,0.6)' }}>{b.count}</div>
        </div>
      ))}
      {/* spinning disc */}
      <div style={{
        width: 28, height: 28, borderRadius: '50%',
        background: 'radial-gradient(circle at center, #000 0 6px, #444 6px 100%)',
        border: '1.5px solid #fff',
      }} />
    </div>
  );
}

// One TikTok ad mockup
function TikTokAd({ ad, idx }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: 252 }}>
      {/* Variant label above the phone */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 2px' }}>
        <SectionLabel idx={`AD ${String.fromCharCode(64 + idx + 1)}`} label={ad.angle} />
        <Mono style={{ fontSize: 9, color: '#8a8a8a' }}>9:16</Mono>
      </div>

      {/* Fake phone — we draw a thin phone shell ourselves at this scale */}
      <div style={{
        width: 252, height: 448, borderRadius: 28,
        background: '#000', padding: 4,
        boxShadow: '0 20px 40px -20px rgba(0,0,0,0.4), 0 4px 0 #d4d0c8',
        position: 'relative',
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 24,
          background: '#0a0a0a', overflow: 'hidden', position: 'relative',
          color: '#fff', fontFamily: 'var(--font-body)',
        }}>
          <VideoBg kind={ad.bg} />

          {/* Status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 32,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '0 18px',
            fontSize: 11, fontWeight: 700, color: '#fff',
            zIndex: 5,
          }}>
            <span>9:41</span>
            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
              <span style={{ fontSize: 9 }}>●●●●</span>
              <span style={{ fontSize: 9 }}>5G</span>
              <span style={{ fontSize: 9 }}>▮</span>
            </div>
          </div>

          {/* TikTok top tabs */}
          <div style={{
            position: 'absolute', top: 36, left: 0, right: 0,
            display: 'flex', justifyContent: 'center', gap: 16,
            fontSize: 11, fontWeight: 600, color: 'rgba(255,255,255,0.7)',
            zIndex: 5,
          }}>
            <span>Following</span>
            <span style={{ color: '#fff', borderBottom: '2px solid #fff', paddingBottom: 2 }}>For You</span>
          </div>

          {/* Sponsored chip */}
          {ad.badge === 'sponsored' && (
            <div style={{
              position: 'absolute', top: 72, left: 12,
              background: 'rgba(255,255,255,0.15)',
              backdropFilter: 'blur(8px)',
              padding: '2px 8px', borderRadius: 4,
              fontSize: 9, fontWeight: 600, color: '#fff',
              letterSpacing: '0.04em',
              zIndex: 5,
            }}>Sponsored</div>
          )}

          {/* Hook caption — overlaid in TikTok-style text */}
          <div style={{
            position: 'absolute', top: '32%', left: 12, right: 60,
            zIndex: 5,
          }}>
            <div style={{
              display: 'inline',
              background: '#000',
              color: '#fff',
              padding: '4px 6px',
              fontFamily: 'var(--font-display)',
              fontWeight: 800,
              fontSize: 17, lineHeight: 1.25,
              boxDecorationBreak: 'clone',
              WebkitBoxDecorationBreak: 'clone',
              letterSpacing: '-0.01em',
            }}>{ad.hook}</div>
          </div>

          {/* Subhook lower-third */}
          <div style={{
            position: 'absolute', bottom: 152, left: 12, right: 60,
            zIndex: 5,
          }}>
            <div style={{
              display: 'inline',
              background: 'var(--tp-cta)',
              color: '#fff',
              padding: '3px 5px',
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              fontSize: 12, lineHeight: 1.3,
              boxDecorationBreak: 'clone',
              WebkitBoxDecorationBreak: 'clone',
            }}>{ad.subhook}</div>
          </div>

          {/* Action rail */}
          <ActionRail ad={ad} />

          {/* Bottom username + caption + audio */}
          <div style={{
            position: 'absolute', bottom: 56, left: 12, right: 76,
            zIndex: 5,
          }}>
            <div style={{ fontSize: 12, fontWeight: 700, marginBottom: 4 }}>@{ad.creator}</div>
            <div style={{ fontSize: 10, opacity: 0.9, lineHeight: 1.4 }}>{ad.caption}</div>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 4,
              fontSize: 9, marginTop: 6, opacity: 0.85,
            }}>
              <span>♪</span>
              <span>{ad.sound}</span>
            </div>
          </div>

          {/* Ad CTA strip (TikTok ad format) */}
          <div style={{
            position: 'absolute', bottom: 18, left: 12, right: 12,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            background: 'rgba(255,255,255,0.95)',
            color: '#0a0a0a',
            padding: '8px 12px', borderRadius: 6,
            fontSize: 11, fontWeight: 700,
            zIndex: 5,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 22, height: 22, borderRadius: 4, background: '#0a0a0a',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 9, fontWeight: 900,
              }}>TP</div>
              <div>
                <div style={{ fontSize: 10, color: '#8a8a8a', fontWeight: 500 }}>tested-peptides.com</div>
                <div style={{ fontSize: 11, fontWeight: 800 }}>{ad.cta}</div>
              </div>
            </div>
            <div style={{
              fontSize: 14, color: 'var(--tp-cta)', fontWeight: 900,
            }}>›</div>
          </div>

          {/* Home indicator */}
          <div style={{
            position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
            width: 100, height: 3, borderRadius: 2, background: '#fff', opacity: 0.6, zIndex: 5,
          }} />
        </div>
      </div>

      {/* Metric strip below */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4,
        padding: '8px 6px',
        background: '#fff', border: `1px solid ${TP.c.line2}`,
      }}>
        {[
          { l: 'Hook', v: ad.angle.split(' ')[0] },
          { l: 'CPM', v: '$' + (3 + idx * 0.4).toFixed(2) },
          { l: 'CTR', v: (1.2 + idx * 0.15).toFixed(2) + '%' },
          { l: 'ROAS', v: (1.8 + idx * 0.25).toFixed(1) + 'x' },
        ].map((m, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 8, color: '#8a8a8a', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{m.l}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, color: '#0a0a0a' }}>{m.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Rendered directly into the #ads tab (no ScaledFrame downscale). The 8 hooks
// lay out as a responsive grid of native-size phone cards — 4-up on desktop,
// reflowing to 2/1-up on narrower screens — so the captions stay readable.
function Ads() {
  return (
    <div style={{
      width: '100%',
      background: TP.c.bg,
      fontFamily: 'var(--font-body)', color: TP.c.ink,
    }}>
      {/* Header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        flexWrap: 'wrap', gap: 16, marginBottom: 28,
      }}>
        <div>
          <Eyebrow style={{ marginBottom: 10 }}>Stage 01 · TikTok creative</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 36, letterSpacing: '-0.03em', margin: 0,
          }}>The hook matrix.</h2>
          <p style={{ fontSize: 13, color: TP.c.ink2, maxWidth: 560, marginTop: 8 }}>
            8 atomic angles. Same offer, eight different mental on-ramps. Ship all 8 at $20/day, kill bottom 4 at day 3, scale top 2 to $500/day at 2x ROAS.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <Pill color={TP.c.trust} bg="#1f5d3a14">target CPM &lt; $4</Pill>
          <Pill color={TP.c.cta} bg="#e6394614">target CTR &gt; 1.5%</Pill>
          <Pill color={TP.c.ink2}>kill rule: ROAS &lt; 1.5x @ $100 spent</Pill>
        </div>
      </div>

      {/* 8-up responsive grid of native-size cards */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(252px, 1fr))',
        gap: 24, justifyItems: 'center',
      }}>
        {TIKTOK_ADS.map((ad, i) => (
          <TikTokAd key={ad.id} ad={ad} idx={i} />
        ))}
      </div>
    </div>
  );
}

window.Ads = Ads;