// Footer.jsx — shared across all pages.

const GITHUB_REPO = 'PaulMarchiset/ffkit';

const footStyles = {
  outer: (mob) => ({
    borderTop: '1px solid var(--border)',
    padding: mob ? '32px 16px 40px' : '40px 32px 56px',
    background: 'var(--bg-elevated)',
  }),
  inner: {
    maxWidth: 1120, margin: '0 auto',
    display: 'flex', flexDirection: 'column', gap: 32,
  },
  top: (cols) => ({
    display: 'grid',
    gridTemplateColumns: cols === 4
      ? '1fr 1fr 1fr 1fr'
      : cols === 3
        ? '1fr'
        : '1fr',
    gap: 24,
  }),
  cols: (n) => ({
    display: 'grid',
    gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))`,
    gap: 24,
  }),
  brandCol: { display: 'flex', flexDirection: 'column', gap: 12 },
  brandLogo: {
    height: 80, width: 'auto', display: 'block',
    alignSelf: 'flex-start',
    filter: 'invert(1)',
  },
  tag: { font: 'var(--type-body-sm)', color: 'var(--fg-muted)', maxWidth: 260 },
  col: { display: 'flex', flexDirection: 'column', gap: 10 },
  colLabel: { font: 'var(--type-eyebrow)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 4 },
  link: { font: 'var(--type-body-sm)', color: 'var(--fg-muted)', textDecoration: 'none' },
  bottom: (stacked) => ({
    display: 'flex',
    flexDirection: stacked ? 'column' : 'row',
    alignItems: stacked ? 'flex-start' : 'center',
    justifyContent: 'space-between',
    gap: stacked ? 8 : 0,
    paddingTop: 24,
    borderTop: '1px solid var(--border-subtle)',
    font: 'var(--type-caption)', color: 'var(--fg-subtle)',
  }),
  disclaimer: {
    padding: '16px 18px',
    background: 'var(--bg-sunken)',
    border: '1px solid var(--border-subtle)',
    borderRadius: 10,
    font: 'var(--type-body-sm)',
    color: 'var(--fg-muted)',
    lineHeight: 1.55,
  },
};

const FOOTER_COLS = [
  {
    label: 'Product',
    items: [
      { label: 'Features',  href: './index.html#features' },
      { label: 'Download',  href: './download.html' },
      { label: 'Changelog', href: './changelog.html' },
    ],
  },
  {
    label: 'Docs',
    items: [
      { label: 'Getting started', href: './docs.html#getting-started' },
      { label: 'Simple mode',     href: './docs.html#simple-mode' },
      { label: 'Advanced mode',   href: './docs.html#advanced-mode' },
      { label: 'Recipes',         href: './docs.html#recipes' },
      { label: 'FAQ',             href: './docs.html#faq' },
    ],
  },
  {
    label: 'Source',
    items: [
      { label: 'GitHub',           href: `https://github.com/${GITHUB_REPO}`, external: true },
      { label: 'License (GPL-3.0)', href: './docs.html#license' },
      { label: 'Report an issue',  href: `https://github.com/${GITHUB_REPO}/issues`, external: true },
    ],
  },
];

function Footer() {
  const { isMobile, w } = useViewport();
  const fourUp = w >= 760;
  const linkCols = isMobile ? 2 : 3;

  return (
    <footer style={footStyles.outer(isMobile)}>
      <div style={footStyles.inner}>
        {fourUp ? (
          <div style={footStyles.top(4)}>
            <BrandCol />
            {FOOTER_COLS.map((c) => <LinkCol key={c.label} {...c} />)}
          </div>
        ) : (
          <React.Fragment>
            <BrandCol />
            <div style={footStyles.cols(linkCols)}>
              {FOOTER_COLS.map((c) => <LinkCol key={c.label} {...c} />)}
            </div>
          </React.Fragment>
        )}
        <div style={footStyles.disclaimer}>
          FFkit is an independent third-party app. It is <strong>not affiliated with, endorsed by, or approved by the FFmpeg project</strong>. It runs the official FFmpeg binary as a separate process. Built by one human in their spare time.
        </div>
        <div style={footStyles.bottom(isMobile)}>
          <span>© FFkit · 1.0.0 · GPL-3.0 licensed</span>
          <span>Built on top of FFmpeg 7.1 · made by <a href="https://paulmarchiset.me" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent-press)', textDecoration: 'none'}}>Paul Marchiset</a> </span>
        </div>
      </div>
    </footer>
  );
}

function BrandCol() {
  return (
    <div style={footStyles.brandCol}>
      <a href="./index.html" style={{ display: 'block' }}>
        <img src="./assets/ffkit-wordmark.svg" alt="FFkit" style={footStyles.brandLogo} />
      </a>
      <span style={footStyles.tag}>FFmpeg, finally clickable.</span>
    </div>
  );
}

function LinkCol({ label, items }) {
  return (
    <div style={footStyles.col}>
      <span style={footStyles.colLabel}>{label}</span>
      {items.map((it) => (
        <a
          key={it.label}
          href={it.href}
          target={it.external ? '_blank' : undefined}
          rel={it.external ? 'noopener noreferrer' : undefined}
          style={footStyles.link}
        >
          {it.label}
        </a>
      ))}
    </div>
  );
}

Object.assign(window, { Footer, BrandCol, LinkCol });