// CommandSection.jsx — marketing snapshot of the FFmpeg command surface.

const csStyles = {
  section: (mob) => ({
    padding: mob ? '40px 16px' : '64px 32px',
    maxWidth: 1120, margin: '0 auto',
  }),
  head: (mob) => ({
    display: 'flex', flexDirection: 'column', gap: 12,
    marginBottom: mob ? 24 : 36,
    maxWidth: 640,
  }),
  eyebrow: {
    font: 'var(--type-eyebrow)', letterSpacing: '0.12em', textTransform: 'uppercase',
    color: 'var(--accent-press)',
  },
  title: { font: 'var(--type-display-md)', letterSpacing: '-0.02em', color: 'var(--fg)', margin: 0 },
  sub: { font: 'var(--type-body-lg)', color: 'var(--fg-muted)', margin: 0 },
  panel: (mob) => ({
    background: '#0e1011',
    color: '#f3f4f3',
    borderRadius: mob ? 12 : 18,
    padding: mob ? 16 : 28,
    display: 'flex', flexDirection: 'column',
    gap: mob ? 12 : 16,
    border: '1px solid #26282a',
    boxShadow: '0 24px 60px rgba(22,24,26,0.12)',
    minWidth: 0,
  }),
  panelHead: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    font: 'var(--type-caption)', color: '#8a8d87',
    gap: 12,
  },
  dots: { display: 'flex', gap: 6, alignItems: 'center' },
  dot: (c) => ({ width: 10, height: 10, borderRadius: 999, background: c }),
  cmds: {
    display: 'flex', flexDirection: 'column', gap: 8,
    overflowX: 'auto',
    /* iOS momentum scrolling */
    WebkitOverflowScrolling: 'touch',
  },
  cmd: {
    display: 'flex', alignItems: 'flex-start', gap: 10,
    font: 'var(--type-code)',
    color: '#f3f4f3',
    whiteSpace: 'pre',
  },
  prompt: { color: '#79a052', flexShrink: 0 },
  outLine: {
    color: '#8a8d87', font: 'var(--type-code-sm)',
    paddingLeft: 22,
    whiteSpace: 'pre',
  },
  copyBtn: {
    alignSelf: 'flex-end',
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '8px 12px', borderRadius: 6,
    background: 'rgba(255,255,255,0.06)', color: '#b6b8b3',
    border: '1px solid rgba(255,255,255,0.1)',
    font: 'var(--type-code-sm)',
    cursor: 'pointer',
    minHeight: 32,
  },
};

function CommandSection() {
  const { isMobile } = useViewport();
  return (
    <section style={csStyles.section(isMobile)}>
      <div style={csStyles.head(isMobile)}>
        <span style={csStyles.eyebrow}>For power users</span>
        <h2 style={csStyles.title}>The command line you'd write — already written.</h2>
        <p style={csStyles.sub}>
          Every action in Advanced mode reduces to a clean, copy-pasteable FFmpeg invocation. Hit Copy and drop it straight into your shell, your Makefile, or your CI.
        </p>
      </div>
      <div style={csStyles.panel(isMobile)}>
        <div style={csStyles.panelHead}>
          <div style={csStyles.dots}>
            <span style={csStyles.dot('#3b3d38')} />
            <span style={csStyles.dot('#3b3d38')} />
            <span style={csStyles.dot('#3b3d38')} />
          </div>
          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>~/Movies — zsh</span>
        </div>
        <div style={csStyles.cmds}>
          <div style={csStyles.cmd}><span style={csStyles.prompt}>$</span><span>ffmpeg -i screen-recording.mov -c:v libx264 -crf 23 -preset medium -c:a aac out.mp4</span></div>
          <div style={csStyles.outLine}>frame=4017 fps=1244 q=23.0 size=    8128kB time=00:02:14.10 bitrate= 496.4kbits/s speed=41.4x</div>
          <div style={csStyles.outLine}>video:7842kB audio:204kB · muxing overhead 1.2%</div>
          <div style={csStyles.cmd}><span style={csStyles.prompt}>$</span><span style={{ color: '#b6b8b3' }}>ffmpeg -i in.mov -vn -c:a libmp3lame -q:a 2 audio.mp3</span></div>
          <div style={csStyles.cmd}><span style={csStyles.prompt}>$</span><span style={{ color: '#b6b8b3' }}>ffmpeg -i in.mov -vf "fps=12,scale=480:-1:flags=lanczos" -loop 0 share.gif</span></div>
        </div>
        <button style={csStyles.copyBtn}>
          <Icon name="copy" size={12} style={{ filter: 'invert(1) brightness(2)', opacity: 0.7 }} />
          {isMobile ? 'Copy' : 'Copy FFmpeg command'}
        </button>
      </div>
    </section>
  );
}

Object.assign(window, { CommandSection });