// Footer, clean, no countries, no social icons, made with love
const { useState: useFooterState } = React;

function Footer() {
  // Newsletter state — re-enable when Brevo is connected
  // const [email, setEmail] = useFooterState('');
  // const [done, setDone] = useFooterState(false);

  const navCols = [
    { label: 'Services', links: [
      { label: 'AI Agents',           href: '#services' },
      { label: 'AI Workflows',        href: '#services' },
      { label: 'Process Automation',  href: '#services' },
      { label: 'Custom AI Software',  href: '#services' },
    ]},
    { label: 'Industries', links: [
      { label: 'Med Spas',        href: '#industries' },
      { label: 'CPA Firms',       href: '#industries' },
      { label: 'Real Estate',     href: '#industries' },
      { label: 'Law Firms',       href: '#industries' },
      { label: 'Retail & E-com',  href: '#industries' },
    ]},
    { label: 'Company', links: [
      { label: 'Our Work',    href: '#work' },
      { label: 'Process',     href: '#process' },
      { label: 'Pricing',     href: '#pricing' },
      { label: 'Contact',     href: '#contact' },
    ]},
    { label: 'Legal', links: [
      { label: 'Privacy Policy',   href: '/privacy' },
      { label: 'Terms of Service', href: '/terms'   },
    ]},
  ];

  const linkStyle = {
    fontFamily: 'Inter, sans-serif', fontSize: 13,
    color: 'var(--text-tertiary)', textDecoration: 'none',
    transition: 'color 0.2s ease', display: 'block',
  };

  return (
    <footer style={{
      background: 'var(--bg-primary)',
      borderTop: '1px solid var(--border-subtle)',
      padding: '72px 48px 36px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {/* Top */}
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-start', gap: 48, flexWrap: 'wrap',
          marginBottom: 56, paddingBottom: 40,
          borderBottom: '1px solid var(--border-subtle)',
        }}>
          {/* Brand */}
          <div style={{ maxWidth: 280 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
              <img src="assets/logo.png" alt="Quantaeight" style={{
                width: 30, height: 30, objectFit: 'contain',
                filter: 'var(--logo-filter)', transition: 'filter 0.3s ease',
              }} />
              <span style={{
                fontFamily: '"Plus Jakarta Sans", sans-serif', fontSize: 17, fontWeight: 600,
                color: 'var(--text-primary)', letterSpacing: '0.005em',
              }}>Quantaeight</span>
            </div>
            <p style={{
              fontSize: 13, color: 'var(--text-tertiary)',
              lineHeight: 1.65, marginBottom: 0,
              fontFamily: 'Inter, sans-serif',
            }}>
              We build the AI systems your competitors will buy in 2027. Production-grade, not prototype.
            </p>
          </div>

          {/* Newsletter — hidden until Brevo is connected
          <div style={{ maxWidth: 340 }}>
            ...
          </div>
          */}
        </div>

        {/* Nav columns */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 28, marginBottom: 40,
        }} className="footer-nav">
          {navCols.map((col, i) => (
            <div key={i}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: 'var(--text-secondary)', letterSpacing: '0.1em',
                textTransform: 'uppercase', marginBottom: 14,
              }}>{col.label}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {col.links.map((link, j) => (
                  <a key={j} href={link.href} style={linkStyle}
                    onMouseEnter={e => e.target.style.color = 'var(--text-secondary)'}
                    onMouseLeave={e => e.target.style.color = 'var(--text-tertiary)'}
                  >{link.label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Bottom bar */}
        <div style={{
          borderTop: '1px solid var(--border-subtle)', paddingTop: 22,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 12,
        }}>
          <span style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: 'var(--text-tertiary)',
          }}>
            © {new Date().getFullYear()} Quantaeight. All rights reserved.
          </span>
          <span style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: 'var(--text-tertiary)',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            Made with <span style={{ color: '#FF4D6D', fontSize: 14 }}>♥</span> by Ratan
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 768px) { .footer-nav { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 480px) { .footer-nav { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });