// Footer.jsx — dark footer with real links to every page.
function Footer() {
  
  const linkA = { display: 'block', fontFamily: 'var(--font-sans)', fontSize: '0.9rem',
    color: 'rgba(243,239,230,0.74)', textDecoration: 'none', marginBottom: 11,
    transition: 'color var(--dur-fast)' };
  const colTitle = { fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.72rem',
    letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--brass-400)', marginBottom: 16 };

  const Col = ({ title, items }) => (
    <div>
      <div style={colTitle}>{title}</div>
      {items.map(([label, href]) => (
        <a key={label} href={href} style={linkA}
          onMouseEnter={(e) => (e.target.style.color = '#fff')}
          onMouseLeave={(e) => (e.target.style.color = 'rgba(243,239,230,0.74)')}>{label}</a>
      ))}
    </div>
  );

  return (
    <footer style={{ background: 'var(--navy-950)', padding: '70px 32px 34px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, paddingBottom: 44, borderBottom: '1px solid rgba(243,239,230,0.14)' }} className="footer-grid">
          <div>
            <a href="/" style={{ textDecoration: 'none' }}>
              <div style={{ fontFamily: 'var(--font-nameplate)', fontSize: '1.5rem', letterSpacing: '0.12em', color: '#fff' }}>ALEX NARAYAN</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 7 }}>
                <span style={{ height: 1, width: 24, background: 'var(--brass-500)' }}></span>
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.55rem', letterSpacing: '0.32em', color: 'var(--brass-400)' }}>ATTORNEY AT LAW</span>
              </div>
            </a>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: '1.05rem', lineHeight: 1.55, color: 'rgba(243,239,230,0.7)', marginTop: 20, maxWidth: 290 }}>
              Experienced, personal legal counsel — when the stakes are too high for anything less.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 22 }}>
              {[['Facebook', 'f', '#'], ['Instagram', 'ig', '#'], ['LinkedIn', 'in', '#']].map(([label, ab, href]) => (
                <a key={label} href={href} onClick={(e) => e.preventDefault()} aria-label={label} style={{ width: 38, height: 38, borderRadius: 'var(--radius-pill)', border: '1px solid rgba(243,239,230,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(243,239,230,0.8)', textDecoration: 'none', fontFamily: 'var(--font-nameplate)', fontSize: '0.8rem', letterSpacing: '0.02em', transition: 'all var(--dur-fast)' }}
                  onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--brass-400)'; e.currentTarget.style.color = 'var(--brass-300)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(243,239,230,0.22)'; e.currentTarget.style.color = 'rgba(243,239,230,0.8)'; }}>
                  {ab}
                </a>
              ))}
            </div>
          </div>

          <Col title="Practice Areas" items={PRACTICES.slice(0, 4).map((p) => [p.name, `/${p.slug}.html`])} />
          <Col title="More" items={[
            ...PRACTICES.slice(4).map((p) => [p.name, `/${p.slug}.html`]),
            ['About Alex', '/about.html'],
            ['Results', '/results.html'],
          ]} />
          <div>
            <div style={colTitle}>Contact</div>
            <a href={`tel:${FIRM.phoneHref.replace('tel:','')}`} style={{ ...linkA, fontWeight: 600 }}
              onMouseEnter={(e) => (e.target.style.color = 'var(--brass-300)')}
              onMouseLeave={(e) => (e.target.style.color = 'rgba(243,239,230,0.74)')}>{FIRM.phone}</a>
            <a href={`mailto:${FIRM.email}`} style={linkA}
              onMouseEnter={(e) => (e.target.style.color = 'var(--brass-300)')}
              onMouseLeave={(e) => (e.target.style.color = 'rgba(243,239,230,0.74)')}>{FIRM.email}</a>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: '0.85rem', color: 'rgba(243,239,230,0.6)', lineHeight: 1.55, marginTop: 14 }}>
              {FIRM.address}
            </p>
            <a href="/#contact" style={{ display: 'inline-block', marginTop: 18, padding: '11px 18px', background: 'var(--crimson-600)', color: '#fff', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.82rem', letterSpacing: '0.04em', borderRadius: 'var(--radius-sm)' }}
              onMouseEnter={(e) => (e.target.style.background = 'var(--crimson-700)')}
              onMouseLeave={(e) => (e.target.style.background = 'var(--crimson-600)')}>
              Free consultation
            </a>
          </div>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'space-between', alignItems: 'center', paddingTop: 26 }}>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: '0.75rem', color: 'rgba(243,239,230,0.5)', maxWidth: 760, lineHeight: 1.55 }}>
            © {new Date().getFullYear()} The Law Offices of Alex Narayan. All rights reserved. The information on this site is for general informational purposes only and is not legal advice. Prior results do not guarantee a similar outcome. Contacting the firm does not create an attorney-client relationship.
          </p>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: '0.75rem', color: 'rgba(243,239,230,0.5)' }}>
            Serving Sherman Oaks & Greater Los Angeles
          </p>
        </div>
      </div>
    </footer>
  );
}