// DualMode.jsx — the "Two doors. Same engine." comparison.

const dmStyles = {
  section: (mob) => ({
    padding: mob ? '40px 16px' : '64px 32px',
    maxWidth: 1120, margin: '0 auto',
  }),
  head: (mob) => ({
    display: 'flex', flexDirection: 'column', gap: 14,
    maxWidth: 720, marginBottom: mob ? 28 : 48,
  }),
  eyebrow: {
    font: 'var(--type-eyebrow)', letterSpacing: '0.12em', textTransform: 'uppercase',
    color: 'var(--accent-press)',
  },
  title: {
    font: 'var(--type-display-lg)', letterSpacing: '-0.02em',
    color: 'var(--fg)', margin: 0,
  },
  intro: {
    font: 'var(--type-body-lg)', color: 'var(--fg-muted)',
    margin: 0, maxWidth: 600,
  },
  grid: (cols) => ({
    display: 'grid',
    gridTemplateColumns: cols === 1 ? '1fr' : '1fr 1fr',
    gap: cols === 1 ? 16 : 24,
  }),
  card: (mob) => ({
    padding: mob ? 20 : 28,
    background: 'var(--bg-elevated)',
    border: '1px solid var(--border)',
    borderRadius: 16,
    display: 'flex', flexDirection: 'column', gap: 20,
    boxShadow: 'var(--shadow-sm)',
    minWidth: 0,
  }),
  cardHead: { display: 'flex', flexDirection: 'column', gap: 8 },
  cardLabel: {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    font: 'var(--type-eyebrow)', letterSpacing: '0.12em', textTransform: 'uppercase',
    color: 'var(--fg-subtle)',
  },
  cardLabelOn: { color: 'var(--accent-press)' },
  cardTitle: {
    font: 'var(--type-h1)', letterSpacing: '-0.01em',
    color: 'var(--fg)', margin: 0,
  },
  cardSub: { font: 'var(--type-body)', color: 'var(--fg-muted)', margin: 0 },
  mockSimple: {
    padding: 20,
    background: 'var(--bg-sunken)',
    borderRadius: 12,
    display: 'flex', flexDirection: 'column', gap: 14,
  },
  segDemo: {
    display: 'inline-flex', padding: 3, gap: 2,
    background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 10,
    alignSelf: 'center',
    flexWrap: 'wrap', justifyContent: 'center',
  },
  segItem: (on) => ({
    padding: '8px 18px', borderRadius: 7,
    font: '500 13px/1 var(--font-sans)',
    color: on ? 'var(--fg)' : 'var(--fg-muted)',
    background: on ? 'var(--accent-soft)' : 'transparent',
    border: on ? '1px solid rgba(95,141,66,0.4)' : '1px solid transparent',
  }),
  bigBtn: {
    alignSelf: 'center',
    padding: '12px 32px',
    background: 'var(--accent)',
    color: '#fff',
    borderRadius: 10,
    font: 'var(--type-h4)',
    display: 'inline-flex', alignItems: 'center', gap: 8,
  },
  mockAdv: {
    padding: 16,
    background: 'var(--bg-sunken)',
    borderRadius: 12,
    display: 'flex', flexDirection: 'column', gap: 10,
    font: 'var(--type-code-sm)',
    minWidth: 0,
  },
  advChips: { display: 'flex', flexWrap: 'wrap', gap: 6 },
  advChip: { padding: '3px 8px', borderRadius: 6, background: 'var(--bg-elevated)', border: '1px solid var(--border)', color: 'var(--fg-muted)', font: '500 11px/1 var(--font-sans)' },
  advCmd: {
    background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 8,
    padding: '10px 12px',
    font: 'var(--type-code-sm)', color: 'var(--fg)',
    overflowX: 'auto', whiteSpace: 'nowrap',
  },
  bullets: { display: 'flex', flexDirection: 'column', gap: 10, padding: 0, margin: 0, listStyle: 'none' },
  bullet: { display: 'flex', alignItems: 'flex-start', gap: 10, font: 'var(--type-body-sm)', color: 'var(--fg-muted)' },
  bulletCheck: { width: 16, height: 16, borderRadius: 999, background: 'var(--accent-soft)', color: 'var(--accent-press)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 },
};

function DualMode() {
  const { isMobile, w } = useViewport();
  const cols = w < 880 ? 1 : 2;

  return (
    <section style={dmStyles.section(isMobile)}>
      <div style={dmStyles.head(isMobile)}>
        <span style={dmStyles.eyebrow}>For everyone, and everyone else</span>
        <h2 style={dmStyles.title}>Two doors. Same engine.</h2>
        <p style={dmStyles.intro}>
          One app, two modes. The same native FFmpeg binary underneath — whichever door you walk through, the output is identical.
        </p>
      </div>

      <div style={dmStyles.grid(cols)}>
        <div style={dmStyles.card(isMobile)}>
          <div style={dmStyles.cardHead}>
            <span style={{ ...dmStyles.cardLabel, ...dmStyles.cardLabelOn }}>
              <Icon name="circle-dot" size={12} />
              Simple mode
            </span>
            <h3 style={dmStyles.cardTitle}>Drop. Pick. Compress.</h3>
            <p style={dmStyles.cardSub}>Three buttons. The right defaults. Anyone in your team can use it without a tutorial.</p>
          </div>
          <div style={dmStyles.mockSimple}>
            <div style={dmStyles.segDemo}>
              <span style={dmStyles.segItem(false)}>Low</span>
              <span style={dmStyles.segItem(true)}>Medium</span>
              <span style={dmStyles.segItem(false)}>Lossless</span>
            </div>
            <span style={dmStyles.bigBtn}>
              <Icon name="zap" size={14} style={{ filter: 'invert(1) brightness(2)', opacity: 1 }} />
              Convert
            </span>
          </div>
          <ul style={dmStyles.bullets}>
            <ListItem>One-click presets — no codec talk, no CRF, no decision fatigue.</ListItem>
            <ListItem>Live size estimate before you hit Convert.</ListItem>
            <ListItem>Done in seconds, written to a folder you can predict.</ListItem>
          </ul>
        </div>

        <div style={dmStyles.card(isMobile)}>
          <div style={dmStyles.cardHead}>
            <span style={dmStyles.cardLabel}>
              <Icon name="terminal" size={12} />
              Advanced mode
            </span>
            <h3 style={dmStyles.cardTitle}>The full command line.</h3>
            <p style={dmStyles.cardSub}>Every FFmpeg flag, every codec, your full muscle memory. Plus one-click recipes for what you actually do.</p>
          </div>
          <div style={dmStyles.mockAdv}>
            <div style={dmStyles.advChips}>
              <span style={dmStyles.advChip}>Convert</span>
              <span style={dmStyles.advChip}>Extract audio</span>
              <span style={dmStyles.advChip}>Trim</span>
              <span style={dmStyles.advChip}>Resize</span>
              <span style={dmStyles.advChip}>GIF</span>
              <span style={dmStyles.advChip}>Frame</span>
            </div>
            <div style={dmStyles.advCmd}>
              <span style={{ color: 'var(--accent)' }}>$</span> FFmpeg -i in.mov -c:v libx264 -crf 23 -preset medium out.mp4
            </div>
          </div>
          <ul style={dmStyles.bullets}>
            <ListItem>Edit the command directly. No round trip through a settings dialog.</ListItem>
            <ListItem>Six one-click recipes for the operations everyone does daily.</ListItem>
            <ListItem>Copy the final command — paste it into your terminal, your script, your CI.</ListItem>
          </ul>
        </div>
      </div>
    </section>
  );
}

function ListItem({ children }) {
  return (
    <li style={dmStyles.bullet}>
      <span style={dmStyles.bulletCheck}>
        <svg width="10" height="10" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
      </span>
      <span>{children}</span>
    </li>
  );
}

Object.assign(window, { DualMode, ListItem });