vyndr/web/src/components/Footer.tsx

import { Wordmark } from '@/components/vyndr';

// VYNDR 2.0 footer (§C.4). System language, not marketing — mono, uppercase
// labels, the Detroit signature, and the legal/21+ line. Server component
// (no interactivity); link hover is handled by the global .footer-link rule.
const COLUMNS: { head: string; links: { label: string; href: string }[] }[] = [
  {
    head: 'PRODUCT',
    links: [
      { label: 'Slate', href: '/dashboard' },
      { label: 'The Terminal', href: '/terminal' },
      { label: 'Pricing', href: '/pricing' },
      { label: 'Invite friends', href: '/invite' },
    ],
  },
  {
    head: 'COMPANY',
    links: [
      { label: 'About', href: '/about' },
      { label: 'Methodology', href: '/methodology' },
      { label: 'The Report', href: '/blog' },
      { label: 'Help & FAQ', href: '/help' },
    ],
  },
  {
    head: 'LEGAL',
    links: [
      { label: 'Responsible Play', href: '/responsible-gambling' },
      { label: 'Terms', href: '/terms' },
      { label: 'Privacy', href: '/privacy' },
    ],
  },
];

const mono = { fontFamily: 'var(--mono)' } as const;

export default function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border)', marginTop: 40, padding: '34px 24px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 28 }}>
          <div style={{ maxWidth: 300 }}>
            <a href="/" aria-label="VYNDR — home" style={{ display: 'inline-flex' }}>
              <Wordmark size="sm" beta />
            </a>
            <div style={{ ...mono, fontSize: 11.5, color: 'var(--text-2)', lineHeight: 1.7, marginTop: 14 }}>
              Prop intelligence the books don&apos;t want you to have. Analytics tool, not a sportsbook.
            </div>
          </div>

          <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
            {COLUMNS.map((col) => (
              <div key={col.head}>
                <div className="label" style={{ fontSize: 9.5, marginBottom: 12 }}>{col.head}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {col.links.map((l) => (
                    <a key={l.label} href={l.href} className="footer-link" style={{ ...mono, fontSize: 12, color: 'var(--text-1)', textDecoration: 'none' }}>
                      {l.label}
                    </a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexWrap: 'wrap',
            gap: 12,
            marginTop: 30,
            paddingTop: 20,
            borderTop: '1px solid var(--border)',
          }}
        >
          <div style={{ ...mono, fontSize: 11, color: 'var(--text-2)' }}>
            VYNDR is an analytics tool, not a sportsbook. Not financial advice. Gamble responsibly. 21+ ·{' '}
            <a href="tel:18004262537" style={{ color: 'var(--amber)', textDecoration: 'none' }}>1-800-GAMBLER</a>
          </div>
          <div style={{ ...mono, fontSize: 11, color: 'var(--text-2)' }}>
            BUILT BY KEVON BUTLER · DETROIT · © 2026 VYNDR
          </div>
        </div>
      </div>

      <style>{`
        .footer-link { transition: color .15s; }
        .footer-link:hover { color: var(--text-0); }
      `}</style>
    </footer>
  );
}