// components/Footer.jsx

function Footer() {
  return (
    <footer style={{ background: 'var(--sb-ink)', color: 'var(--sb-cream)', paddingBlock: 64 }}>
      <div className="sb-container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 48,
          paddingBottom: 48,
          borderBottom: '1px solid rgba(251, 247, 241, 0.12)',
        }}>
          <div style={{ gridColumn: '1 / -1', maxWidth: 460 }}>
            <Logo size={22} color="var(--sb-cream)" accent="var(--sb-amber-soft)" />
            <p style={{ marginTop: 18, color: 'rgba(251, 247, 241, 0.65)', fontSize: 15, lineHeight: 1.6, maxWidth: 380 }}>
              Bookkeeping for small businesses who want their books handled — quietly, on time, without the back-and-forth.
            </p>
          </div>

          <div>
            <div className="sb-caption" style={{ color: 'rgba(251, 247, 241, 0.5)', marginBottom: 14 }}>Practice</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href="#/services" onClick={(e)=>{e.preventDefault();window.SBNav('/services');}} style={{ color: 'var(--sb-cream)', fontSize: 14 }}>Services</a></li>
              <li><a href="#/about" onClick={(e)=>{e.preventDefault();window.SBNav('/about');}} style={{ color: 'var(--sb-cream)', fontSize: 14 }}>About</a></li>
              <li><a href="#/contact" onClick={(e)=>{e.preventDefault();window.SBNav('/contact');}} style={{ color: 'var(--sb-cream)', fontSize: 14 }}>Contact</a></li>
            </ul>
          </div>

          <div>
            <div className="sb-caption" style={{ color: 'rgba(251, 247, 241, 0.5)', marginBottom: 14 }}>Service area</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, color: 'rgba(251, 247, 241, 0.7)', fontSize: 14 }}>
              <li>Houston</li>
              <li>The Woodlands</li>
              <li>Conroe</li>
              <li>Montgomery County</li>
            </ul>
          </div>

          <div>
            <div className="sb-caption" style={{ color: 'rgba(251, 247, 241, 0.5)', marginBottom: 14 }}>Sister practice</div>
            <a href="https://directcfoadvisory.com" target="_blank" rel="noopener noreferrer"
               style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--sb-cream)', fontSize: 14, borderBottom: '1px solid rgba(251, 247, 241, 0.25)', paddingBottom: 4 }}>
              DirectCFO Advisory
              <span style={{ color: 'var(--sb-amber-soft)' }}>↗</span>
            </a>
            <p style={{ marginTop: 10, fontSize: 13, color: 'rgba(251, 247, 241, 0.55)', lineHeight: 1.5 }}>
              Fractional CFO services for businesses ready for strategic finance.
            </p>
          </div>
        </div>

        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 18, justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 28,
        }}>
          <div className="sb-mono" style={{ color: 'rgba(251, 247, 241, 0.5)', fontSize: 13 }}>
            © 2026 Settled Books · Veteran-owned · Montgomery County, TX
          </div>
          <div className="sb-caption" style={{ color: 'rgba(251, 247, 241, 0.4)' }}>
            Reconciled monthly · Closed on time
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;