// 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\nInstagram & TikTok',
    sub: 'Research winning content across Instagram & TikTok — sort, save, 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: 100, paddingBottom: 80, position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <h1 className="hero-h1" style={{
            fontSize: 'clamp(36px, 4.5vw, 62px)', fontWeight: 800,
            letterSpacing: '-0.04em', lineHeight: 1.0,
            margin: '0 auto 20px',
            color: theme.text,
            whiteSpace: 'pre-line',
          }}>
            {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,
          }}>
            <span>1,000+ users use FeedRama</span>
          </div>
        </div>

        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <VideoPlaceholder theme={theme} aspect="16/9" src="Landing Page : Assets/Video 1.mp4"/>
        </div>
      </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 card — renders a looping autoplay video when src is provided, otherwise a dark placeholder
function VideoPlaceholder({ theme, aspect = '16/9', label = 'VIDEO PLACEHOLDER HERE', sub, src }) {
  const containerStyle = {
    borderRadius: 22,
    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,
    position: 'relative',
    overflow: 'hidden',
  };

  if (src) {
    const videoRef = React.useRef(null);
    React.useEffect(() => {
      const video = videoRef.current;
      if (!video) return;
      const observer = new IntersectionObserver(
        (entries) => { if (entries[0].isIntersecting) video.play().catch(() => {}); },
        { threshold: 0.1 }
      );
      observer.observe(video);
      return () => observer.disconnect();
    }, []);
    return (
      <div style={containerStyle}>
        <video
          ref={videoRef}
          src={src}
          autoPlay
          loop
          muted
          playsInline
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      </div>
    );
  }

  return (
    <div style={{
      ...containerStyle,
      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))',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      gap: 14,
    }}>
      <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 });