// Hero.jsx — display-serif headline + download switcher + product shot.

const heroStyles = {
  section: (mob) => ({
    padding: mob ? '48px 16px 32px' : '88px 32px 56px',
    maxWidth: 1120, margin: '0 auto',
    display: 'flex', flexDirection: 'column', alignItems: 'center',
    gap: mob ? 20 : 28,
    textAlign: 'center',
  }),
  eyebrow: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '5px 12px 5px 8px',
    borderRadius: 999,
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border)',
    font: 'var(--type-caption)', color: 'var(--fg-muted)',
  },
  eyebrowDot: { width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' },
  headline: {
    font: 'var(--type-display-xl)',
    letterSpacing: '-0.025em',
    color: 'var(--fg)',
    margin: 0,
    maxWidth: 880,
    textWrap: 'balance',
  },
  emph: {
    fontStyle: 'italic',
    color: 'var(--accent-press)',
  },
  sub: {
    font: 'var(--type-body-lg)',
    color: 'var(--fg-muted)',
    maxWidth: 540,
    margin: 0,
    textWrap: 'pretty',
  },
  downloadBar: (mob) => ({
    display: 'flex',
    flexDirection: mob ? 'column' : 'row',
    alignItems: 'center',
    flexWrap: 'wrap', justifyContent: 'center',
    gap: 12,
    marginTop: 8,
    width: '100%',
  }),
  platforms: {
    display: 'flex',
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border)',
    borderRadius: 12,
    padding: 4,
    gap: 2,
    boxShadow: 'var(--shadow-sm)',
    flexWrap: 'wrap', justifyContent: 'center',
  },
  platformBtn: (on) => ({
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '8px 14px',
    borderRadius: 8,
    border: 0,
    background: on ? 'var(--accent)' : 'transparent',
    color: on ? '#fff' : 'var(--fg-muted)',
    font: 'var(--type-h5)',
    cursor: 'pointer',
    transition: 'background 140ms cubic-bezier(0.22,0.61,0.36,1), color 140ms',
  }),
  meta: {
    font: 'var(--type-caption)', color: 'var(--fg-subtle)',
    marginTop: 2,
    padding: '0 8px',
  },
  shotWrap: (mob) => ({
    marginTop: mob ? 20 : 32,
    width: '100%', maxWidth: 1040,
    borderRadius: mob ? 12 : 16,
    overflow: 'hidden',
    background: '#1F1F1E',
    border: '1px solid #3C3C3B',
    boxShadow: '0 40px 80px rgba(22,24,26,0.18), 0 12px 32px rgba(22,24,26,0.08)',
  }),
};

const PLATFORMS = [
  { id: 'mac',   icon: 'apple',   label: 'macOS',   sub: 'Universal · 18 MB' },
  { id: 'win',   icon: 'monitor', label: 'Windows', sub: 'x64 · 22 MB' },
  { id: 'linux', icon: 'monitor', label: 'Linux',   sub: 'AppImage · 20 MB' },
];

function Hero() {
  const [platform, setPlatform] = React.useState('mac');
  const meta = PLATFORMS.find((p) => p.id === platform);
  const vp = useViewport();
  const mob = vp.isMobile;

  return (
    <header style={heroStyles.section(mob)}>
      <div style={heroStyles.eyebrow}>
        <span style={heroStyles.eyebrowDot} />
        Version 1.0 · open source · free forever
      </div>
      <h1 style={heroStyles.headline}>
        FFmpeg,<br/><span style={heroStyles.emph}>finally clickable.</span>
      </h1>
      <p style={heroStyles.sub}>
        A clean desktop app for compressing and converting video on Windows, macOS, and Linux. Three buttons for everyone, a raw command line for everyone else — running native FFmpeg locally, with no cloud, no upload, no waiting.
      </p>
      <div style={heroStyles.downloadBar(mob)}>
        <div style={heroStyles.platforms} role="radiogroup">
          {PLATFORMS.map((p) => (
            <button
              key={p.id}
              role="radio"
              aria-checked={platform === p.id}
              onClick={() => setPlatform(p.id)}
              style={heroStyles.platformBtn(platform === p.id)}
            >
              <Icon name={p.icon} size={14} style={{ opacity: 1, filter: platform === p.id ? 'invert(1) brightness(2)' : '' }} />
              {p.label}
            </button>
          ))}
        </div>
        <Button variant="primary" size="lg" icon="download">
          {mob ? `Download for ${meta.label}` : `Download for ${meta.label}`}
        </Button>
      </div>
      <div style={heroStyles.meta}>{meta.sub} · works back to {platform === 'mac' ? 'macOS 12' : platform === 'win' ? 'Windows 10' : 'Ubuntu 22.04'}</div>
      <HeroShot vp={vp} />
    </header>
  );
}

function HeroShot({ vp }) {
  const mob = vp.isMobile;
  const narrow = vp.isNarrow;

  return (
    <div style={heroStyles.shotWrap(mob)}>
      <div style={{
        height: mob ? 48 : 56,
        padding: mob ? '0 12px' : '0 22px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: mob ? 8 : 12, minWidth: 0 }}>
          <img src="./assets/ffkit-wordmark.svg" alt="FFkit" style={{ height: mob ? 40 : 60, display: 'block', filter: 'none' }} />
          <span style={{
            display: 'inline-flex', padding: '3px 8px',
            background: 'rgba(95,141,66,0.16)', border: '1px solid rgba(95,141,66,0.4)',
            borderRadius: 5, font: '500 11px/1 var(--font-mono)', color: '#79a052',
          }}>h264_qsv</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {!mob && <ShotTopBtn icon="settings-2">Settings</ShotTopBtn>}
          {!mob && <ShotTopBtn icon="circle-help">Documentation</ShotTopBtn>}
          {mob && <ShotIconBtn icon="settings-2" />}
          {mob && <ShotIconBtn icon="circle-help" />}
        </div>
      </div>

      <div style={{
        padding: mob ? '12px 14px 28px' : narrow ? '20px 28px 40px' : '20px 80px 56px',
        display: 'flex', flexDirection: 'column',
        gap: mob ? 18 : 26, alignItems: 'center',
      }}>
        <h2 style={{
          font: `400 clamp(28px, 6vw, 56px)/1.05 var(--font-serif)`,
          color: '#C0BFB5',
          letterSpacing: '-0.02em',
          margin: 0,
          textAlign: 'center',
        }}>
          Hello, ready to <span style={{ color: '#79a052' }}>compress</span>?
        </h2>

        <div style={{
          width: '100%', maxWidth: 720,
          borderRadius: 14,
          background: '#262624',
          border: '1px solid #3C3C3B',
          position: 'relative',
          display: 'flex', alignItems: 'center',
          gap: mob ? 10 : 14,
          padding: mob ? '12px 56px 12px 12px' : '16px 70px 16px 16px',
        }}>
          <div style={{
            width: mob ? 64 : 88,
            height: mob ? 42 : 56,
            borderRadius: 8,
            background: 'linear-gradient(135deg,#3b3d38,#16181a)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>
            <Icon name="play" size={mob ? 14 : 18} style={{ filter: 'invert(0.85)', opacity: 0.5 }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0, flex: 1 }}>
            <div style={{ font: '500 14px/1.2 var(--font-sans)', color: '#C0BFB5', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>screen-recording.mov</div>
            <div style={{ font: 'var(--type-code-sm)', color: '#8a8a82', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              {mob ? '1080p · 142 MB · 02:14' : '1920 × 1080 · 142 MB · 02:14 · H.264'}
            </div>
          </div>
          <div style={{
            position: 'absolute', right: mob ? 10 : 14, top: '50%', transform: 'translateY(-50%)',
            width: mob ? 32 : 36,
            height: mob ? 32 : 36,
            borderRadius: 8,
            background: '#5F8D42',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 2px 6px rgba(0,0,0,0.35)',
          }}>
            <Icon name="upload-cloud" size={14} style={{ filter: 'invert(1) brightness(2)', opacity: 1 }} />
          </div>
        </div>

        <div style={{
          display: mob ? 'flex' : 'grid',
          gridTemplateColumns: mob ? undefined : '1fr auto',
          flexDirection: mob ? 'column' : undefined,
          alignItems: 'center',
          width: '100%', maxWidth: 720,
          gap: mob ? 12 : 24,
        }}>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' }}>
            <ShotPill icon="wand"  label="Low" />
            <ShotPill icon="gauge" label="Medium" on />
            <ShotPill icon="zap"   label="Lossless" />
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#90908A', font: '500 13px/1 var(--font-sans)' }}>
            Advanced
            <Icon name="chevron-down" size={12} style={{ filter: 'invert(0.6)', opacity: 1 }} />
          </div>
        </div>
      </div>
    </div>
  );
}

function ShotTopBtn({ icon, children }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 30, padding: '0 12px',
      borderRadius: 7,
      border: '1px solid #4F4F4D',
      color: '#C0BFB5',
      font: '500 12px/1 var(--font-sans)',
    }}>
      <Icon name={icon} size={12} style={{ filter: 'invert(0.85)', opacity: 1 }} />
      {children}
    </span>
  );
}

function ShotIconBtn({ icon }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: 30, height: 30,
      borderRadius: 7,
      border: '1px solid #4F4F4D',
      color: '#C0BFB5',
    }}>
      <Icon name={icon} size={12} style={{ filter: 'invert(0.85)', opacity: 1 }} />
    </span>
  );
}

function ShotPill({ icon, label, on }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      height: 36, padding: '0 16px',
      borderRadius: 8,
      background: on ? 'rgba(95,141,66,0.08)' : '#262624',
      border: `1px solid ${on ? '#5F8D42' : '#4F4F4D'}`,
      color: on ? '#79a052' : '#C0BFB5',
      font: '500 13px/1 var(--font-sans)',
    }}>
      <Icon name={icon} size={12} style={{
        opacity: 1,
        filter: on ? 'invert(48%) sepia(56%) saturate(360%) hue-rotate(56deg) brightness(91%)' : 'invert(0.85)',
      }} />
      {label}
    </span>
  );
}

Object.assign(window, { Hero, HeroShot, ShotTopBtn, ShotIconBtn, ShotPill });