// hero.jsx — Hero section. Matches the reference Sort Feed layout:
// big black headline → short subhead → primary CTA → social-proof line → big video placeholder card.

const HERO_TAGLINES = {
  punchy:    {
    eyebrow: 'Chrome extension · Free to install',
    h1: 'Grow fast on Instagram & TikTok',
    sub: 'Find winning content in your niche — sort, export, download, and transcribe top posts.',
  },
  studying:  {
    eyebrow: 'For creators, marketers, and obsessives',
    h1: 'Stop scrolling. Start studying.',
    sub: 'FeedRama turns Instagram and TikTok into a research tool. Sort, filter, download, transcribe — all from one panel.',
  },
  apple:     {
    eyebrow: 'Now sorting Instagram & TikTok',
    h1: 'Grow faster on Instagram & TikTok',
    sub: 'Find winning content ideas in your niche — sort, export, download, and transcribe top posts.',
  },
};

// ============================================================
// HERO
// ============================================================
function Hero({ theme, taglineKey, ctaLabel, onCTA, heroVisual }) {
  const t = HERO_TAGLINES[taglineKey] || HERO_TAGLINES.punchy;
  return (
    <section style={{ paddingTop: 130, paddingBottom: 80, position: 'relative' }}>
      <div style={{ maxWidth: 980, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <h1 style={{
            fontSize: 'clamp(44px, 7vw, 86px)', fontWeight: 800,
            letterSpacing: '-0.04em', lineHeight: 1.0,
            margin: '0 auto 24px',
            color: theme.text,
            maxWidth: 880,
            textWrap: 'balance',
          }}>
            {t.h1}
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.5, color: theme.textDim,
            maxWidth: 560, margin: '0 auto 32px', letterSpacing: '-0.005em',
            textWrap: 'balance',
          }}>{t.sub}</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <CTA theme={theme} primary big onClick={onCTA}>
              {ctaLabel}
            </CTA>
          </div>
          <div style={{
            marginTop: 18, fontSize: 13.5, color: theme.textDim,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <AvatarStack theme={theme}/>
            <span>1,000+ users use FeedRama</span>
          </div>
        </div>

        <VideoPlaceholder theme={theme} aspect="16/10" label="HERO VIDEO PLACEHOLDER" sub="Demo: open Instagram → open FeedRama → sort by likes → download top post"/>
      </div>
    </section>
  );
}

// Stack of placeholder avatar dots for social proof line
function AvatarStack({ theme }) {
  const colors = [
    'oklch(0.7 0.18 35)',
    'oklch(0.65 0.16 250)',
    'oklch(0.7 0.17 155)',
    'oklch(0.68 0.18 320)',
  ];
  return (
    <div style={{ display: 'inline-flex' }}>
      {colors.map((c, i) => (
        <div key={i} style={{
          width: 22, height: 22, borderRadius: '50%',
          background: c,
          border: `2px solid ${theme.dark ? 'oklch(0.1 0.006 240)' : 'white'}`,
          marginLeft: i === 0 ? 0 : -8,
          boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
        }}/>
      ))}
    </div>
  );
}

// Reusable video placeholder card — matches the dark rounded box in the reference
function VideoPlaceholder({ theme, aspect = '16/9', label = 'VIDEO PLACEHOLDER HERE', sub }) {
  return (
    <div style={{
      borderRadius: 22,
      background: theme.dark
        ? 'linear-gradient(180deg, oklch(0.18 0.005 240), oklch(0.13 0.005 240))'
        : 'linear-gradient(180deg, oklch(0.22 0.005 240), oklch(0.16 0.005 240))',
      border: `0.5px solid ${theme.sep}`,
      boxShadow: theme.dark
        ? '0 30px 80px -20px rgba(0,0,0,0.7)'
        : '0 30px 80px -20px rgba(0,0,0,0.25), 0 0 0 0.5px rgba(0,0,0,0.04)',
      aspectRatio: aspect,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 14,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle dot grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)',
        backgroundSize: '24px 24px',
        opacity: 0.6,
      }}/>
      <div style={{
        width: 72, height: 72, borderRadius: '50%',
        background: 'rgba(255,255,255,0.08)',
        border: '1px solid rgba(255,255,255,0.15)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        backdropFilter: 'blur(20px)',
        position: 'relative',
      }}>
        <I name="play" size={28} sw={0} style={{ color: 'white', marginLeft: 4 }}/>
      </div>
      <div style={{
        fontSize: 13, fontWeight: 700, letterSpacing: '0.12em',
        color: 'rgba(255,255,255,0.85)',
        fontFamily: '"SF Mono", monospace',
        textTransform: 'uppercase',
        position: 'relative',
      }}>{label}</div>
      {sub && (
        <div style={{
          fontSize: 13, color: 'rgba(255,255,255,0.5)',
          textAlign: 'center', maxWidth: 480, padding: '0 24px',
          position: 'relative',
        }}>{sub}</div>
      )}
    </div>
  );
}

Object.assign(window, { Hero, HERO_TAGLINES, VideoPlaceholder, AvatarStack });