// TitanFooter.jsx — footer

const TitanFooter = () => {
  const cols = [
    {
      heading: 'Services',
      links: [
        { label: 'Monthly Bookkeeping', href: '#services' },
        { label: 'Reconciliations', href: '#services' },
        { label: 'Financial Statements', href: '#services' },
        { label: 'AP & AR Management', href: '#services' },
        { label: 'Payroll Support', href: '#services' },
        { label: 'Catch-up & Clean-up', href: '#services' },
        { label: 'QuickBooks Setup', href: '#services' },
      ],
    },
    {
      heading: 'Practice',
      links: [
        { label: 'About', href: '#about' },
        { label: 'Pricing', href: '#pricing' },
        { label: 'Reviews', href: '#reviews' },
        { label: 'Integrations', href: '#integrations' },
        { label: 'FAQ', href: '#faq' },
        { label: 'Contact', href: '#contact' },
      ],
    },
  ];

  return (
    <footer style={{
      background: '#0F1A2E', padding: '40px 32px 24px',
      fontFamily: "'DM Sans', sans-serif",
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        {/* Top row */}
        <div className="footer-top" style={{ display: 'flex', gap: 48, marginBottom: 28, alignItems: 'flex-start' }}>
          <div className="footer-brand" style={{ minWidth: 240 }}>
            <div style={{ marginBottom: 14 }}>
              <img
                src="brand/logo-horizontal-on-navy.svg"
                alt="Titan Ledgers"
                style={{ display: 'block', height: 36, width: 'auto', maxWidth: '100%' }}
              />
            </div>
            <div style={{ fontSize: 13, fontWeight: 300, color: 'rgba(255,255,255,0.55)', lineHeight: 1.5 }}>Accounting designed to grow with you</div>
          </div>
          <div className="footer-cols" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48, flex: 1 }}>
            {cols.map(col => (
              <div key={col.heading}>
                <div style={{ fontSize: 11, fontWeight: 500, color: 'rgba(255,255,255,0.92)', marginBottom: 12, letterSpacing: 1.2, textTransform: 'uppercase' }}>{col.heading}</div>
                {col.links.map(l => (
                  <a key={l.label} href={l.href} style={{ display: 'block', fontSize: 13, fontWeight: 300, color: 'rgba(255,255,255,0.55)', textDecoration: 'none', marginBottom: 7, transition: 'color 150ms', cursor: 'pointer' }}
                    onMouseEnter={e => e.currentTarget.style.color = '#D0B270'}
                    onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}
                  >{l.label}</a>
                ))}
              </div>
            ))}

            {/* Have Questions column */}
            <div>
              <div style={{ fontSize: 11, fontWeight: 500, color: 'rgba(255,255,255,0.92)', marginBottom: 12, letterSpacing: 1.2, textTransform: 'uppercase' }}>Have Questions?</div>
              <a href="mailto:matthew.austin@titanledgers.com" style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 300, color: 'rgba(255,255,255,0.55)', textDecoration: 'none', marginBottom: 7, transition: 'color 150ms' }}
                onMouseEnter={e => e.currentTarget.style.color = '#D0B270'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}
              >
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/>
                </svg>
                matthew.austin@titanledgers.com
              </a>
              <a href="tel:2813063638" style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 300, color: 'rgba(255,255,255,0.55)', textDecoration: 'none', marginBottom: 14, transition: 'color 150ms' }}
                onMouseEnter={e => e.currentTarget.style.color = '#D0B270'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}
              >
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.61 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 5.49 5.49l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
                281-306-3638
              </a>
              <a href="https://maps.app.goo.gl/4HhpcWp62Jr28zfF8" target="_blank" rel="noopener noreferrer" style={{ display: 'flex', alignItems: 'center', gap: 6, textDecoration: 'none', transition: 'opacity 150ms' }}
                onMouseEnter={e => e.currentTarget.style.opacity = '0.75'}
                onMouseLeave={e => e.currentTarget.style.opacity = '1'}
              >
                {[1,2,3,4,5].map(i => (
                  <svg key={i} width="13" height="13" viewBox="0 0 24 24" fill="#BD9748" stroke="none">
                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                  </svg>
                ))}
                <span style={{ fontSize: 12, fontWeight: 300, color: 'rgba(255,255,255,0.55)', marginLeft: 2 }}>5.0 Google Reviews</span>
              </a>
            </div>
          </div>
        </div>

        {/* Bottom bar */}
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 16, textAlign: 'center' }}>
          <div style={{ fontSize: 12, fontWeight: 300, color: 'rgba(255,255,255,0.32)' }}>
            &copy; 2026 Titan Ledgers, LLC. Founded in Sugar Land, Texas. Serving clients nationwide remotely.
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 768px) {
          footer { padding: 32px 20px 20px !important; }
          .footer-top { flex-direction: column !important; gap: 32px !important; }
          .footer-brand { min-width: unset !important; }
          .footer-cols { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 480px) {
          .footer-cols { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </footer>
  );
};

Object.assign(window, { TitanFooter });