/* Footer — ink background, four columns per nav spec section 8.
   Logo top-left, four columns of links, social + © bottom row. */

function Footer() {
  const { isMobile, isTablet } = useBreakpoint();
  const { theme } = useTheme();
  const logoSrc = theme === 'dark' ? 'assets/vizo-logo-black.png' : 'assets/vizo-logo-white.png';
  const compact = isMobile;
  const cols = {
    Product: [
      { l: 'How It Works',       to: '/platform' },
      { l: 'Pricing',            to: '/pricing' },
      { l: 'Gallery',            to: '/gallery' },
      { l: 'Join Now',           href: 'https://app.vizostudio.ai' },
    ],
    Solutions: null,
    Company: [
      { l: 'About',               to: '/' },
      { l: 'Contact',             to: '/contact' },
    ],
    Resources: [
      { l: 'FAQ',                 to: '/' },
      { l: 'Help Centre',         to: '/' },
    ],
  };
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--canvas)', padding: `clamp(56px, 8vw, 96px) var(--pad-x) clamp(28px, 4vw, 48px)` }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : isTablet ? 'repeat(2, 1fr)' : '1.4fr 1fr 1fr 1fr',
          gap: 'clamp(24px, 3vw, 48px)',
        }}>
          <div style={{ gridColumn: (isMobile || isTablet) ? '1 / -1' : 'auto' }}>
            <img src={logoSrc} alt="ViZO Studio" style={{ height: 28 }} />
            <p style={{ marginTop: 20, fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1.4, color: 'var(--mist)', maxWidth: '24ch' }}>
              Studio-quality fashion images. On demand.
            </p>
          </div>
          {Object.entries(cols).filter(([, items]) => items).map(([title, items]) => (
            <div key={title}>
              <Eyebrow color="var(--ash)">{title}</Eyebrow>
              <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {items.map(i => (
                  <li key={i.l}>
                    {i.href
                      ? <a href={i.href} style={{ color: 'var(--mist)', textDecoration: 'none', fontSize: 14 }}>{i.l}</a>
                      : <Link to={i.to} style={{ color: 'var(--mist)', textDecoration: 'none', fontSize: 14 }}>{i.l}</Link>}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 'clamp(40px, 7vw, 96px)', paddingTop: 32, borderTop: '1px solid var(--ink-soft)',
          display: 'flex', flexDirection: compact ? 'column' : 'row', gap: compact ? 16 : 0,
          justifyContent: 'space-between', alignItems: compact ? 'flex-start' : 'center',
          fontSize: 13, color: 'var(--slate)', flexWrap: 'wrap',
        }}>
          <span>© 2026 ViZO Studio. All rights reserved.</span>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            {/* Social */}
            <a href="https://www.instagram.com/vizostudio.ai/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{ color: 'var(--mist)' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
            </a>
            <a href="https://www.linkedin.com/company/vizo-studio-limited" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" style={{ color: 'var(--mist)' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
            </a>
            <a href="https://x.com/vizostudioai" target="_blank" rel="noopener noreferrer" aria-label="X" style={{ color: 'var(--mist)' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <span style={{ width: 1, height: 16, background: 'var(--ink-soft)', margin: '0 6px' }} />
            <Link to="/privacy-policy" style={{ color: 'var(--slate)', textDecoration: 'none' }}>Privacy</Link>
            <Link to="/terms" style={{ color: 'var(--slate)', textDecoration: 'none' }}>Terms</Link>
            <Link to="/privacy-policy#cookies" style={{ color: 'var(--slate)', textDecoration: 'none' }}>Cookies</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;