// Features.jsx — 6-up icon grid.

const fStyles = {
  section: (mob) => ({
    padding: mob ? '40px 16px' : '64px 32px',
    maxWidth: 1120, margin: '0 auto',
  }),
  head: (mob) => ({
    display: 'flex', flexDirection: 'column', gap: 12,
    marginBottom: mob ? 28 : 40,
    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 },
  grid: (cols) => ({
    display: 'grid',
    gridTemplateColumns: `repeat(${cols}, 1fr)`,
    gap: cols === 1 ? 12 : 20,
  }),
  card: (mob) => ({
    padding: mob ? 20 : 24,
    border: '1px solid var(--border)',
    borderRadius: 14,
    background: 'var(--bg-elevated)',
    display: 'flex', flexDirection: 'column', gap: 10,
    boxShadow: 'var(--shadow-sm)',
  }),
  ico: {
    width: 36, height: 36, borderRadius: 8,
    background: 'var(--accent-soft)',
    color: 'var(--accent-press)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    marginBottom: 6,
  },
  cardTitle: { font: 'var(--type-h3)', color: 'var(--fg)', margin: 0 },
  cardBody: { font: 'var(--type-body-sm)', color: 'var(--fg-muted)', margin: 0 },
};

const FEATURES = [
  { icon: 'lock', title: 'Local-first',          body: "Files stay on your machine. No upload, no cloud, no temp bucket in someone else's data centre." },
  { icon: 'cpu',  title: 'Hardware-accelerated', body: 'Apple VideoToolbox, NVENC, QSV — automatic when available. Same speed as command-line FFmpeg.' },
  { icon: 'zap',  title: 'Free, forever',        body: 'No accounts. No tracking. No upsell to a Pro tier. Free is the product.' },
  { icon: 'github', title: 'Open source',        body: 'MIT-licensed, every line on GitHub. Read it, audit it, fork it.' },
  { icon: 'film', title: 'Every format',         body: 'Whatever FFmpeg reads, FFkit reads. From obscure broadcast codecs to your phone clip.' },
  { icon: 'monitor', title: 'Native on three',   body: 'Windows, macOS, Linux. Built native on each, not Electron on top of guesswork.' },
];

function Features() {
  const { isMobile, isTablet } = useViewport();
  const cols = isMobile ? 1 : isTablet ? 2 : 3;

  return (
    <section id="features" style={{ ...fStyles.section(isMobile), scrollMarginTop: 80 }}>
      <div style={fStyles.head(isMobile)}>
        <span style={fStyles.eyebrow}>What's inside</span>
        <h2 style={fStyles.title}>Built like the tools you keep open.</h2>
      </div>
      <div style={fStyles.grid(cols)}>
        {FEATURES.map((f) => (
          <article key={f.title} style={fStyles.card(isMobile)}>
            <span style={fStyles.ico}>
              <Icon name={f.icon} size={18} style={{ opacity: 1 }} />
            </span>
            <h3 style={fStyles.cardTitle}>{f.title}</h3>
            <p style={fStyles.cardBody}>{f.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Features });