/* Footer */
const Footer = () => {
  return (
    <footer className="relative border-t border-line2 pt-20 pb-10 bg-panel">
      <div className="mx-auto max-w-[1400px] px-6">
        <div className="grid md:grid-cols-12 gap-10 pb-16">
          <div className="md:col-span-5">
            <a href="index.html" className="inline-flex items-center gap-2.5 mb-6" aria-label="Grippy Code — home">
              <GrippyMark size={38}/>
              <GrippyWordmark suffix="CODE" size="lg"/>
            </a>
            <p className="text-white/60 max-w-md leading-relaxed">
              One agency. Four products. <span className="text-white">Grippy Code</span> builds the website, <span className="text-white">Grippy Voice</span> answers the phone, <span className="text-white">Grippy Hub</span> runs the CRM, and Addons plug it into everything else.
            </p>
            <div className="mt-8 font-mono text-[10px] tracking-[0.25em] text-white/40 uppercase">
              GRIPPY CODE LLC · ARLINGTON, VA · MMXXVI
            </div>
          </div>
          {[
            { h: 'SERVICES',  l: [
              ['Grippy Code · Websites',     'services.html#code'],
              ['Grippy Voice · Receptionist','services.html#voice'],
              ['Grippy Hub · CRM',           'services.html#hub'],
              ['Addons · Integrations',      'services.html#addons'],
            ] },
            { h: 'COMPANY',   l: [
              ['About',   'about.html'],
              ['Services','services.html'],
              ['Blog',    'blog.html'],
              ['Contact', 'contact.html'],
            ] },
            { h: 'RESOURCES', l: [
              ['Help',    '#'],
              ['Status',  '#'],
              ['Privacy', '#'],
              ['Terms',   '#'],
            ] },
          ].map((col) => (
            <div key={col.h} className="md:col-span-2">
              <div className="font-mono text-[10px] tracking-[0.3em] text-white/40 mb-4">{col.h}</div>
              <ul className="space-y-2.5">
                {col.l.map(([label, href]) => (
                  <li key={label}><a href={href} className="text-white/80 hover:text-flame transition-colors text-sm">{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
          <div className="md:col-span-1">
            <div className="font-mono text-[10px] tracking-[0.3em] text-white/40 mb-4">SAY HI</div>
            <a href="mailto:info@grippycode.com" className="text-white hover:text-flame transition-colors block text-sm break-all">info@grippycode.com</a>
          </div>
        </div>
        <div className="pt-8 border-t border-line2 flex justify-between items-center flex-wrap gap-4 text-xs text-white/40 font-mono tracking-wider">
          <div>© 2026 GRIPPY CODE · ALL RIGHTS RESERVED</div>
          <div>v0.5 · creative engineering co.</div>
        </div>
      </div>

      <div className="relative mt-16 overflow-hidden">
        <div data-py="0.18" data-px="-14" className="text-center font-bold tracking-[-0.04em] leading-[0.85] text-[clamp(80px,18vw,300px)] text-flame/10 select-none">
          GRIPPY
        </div>
      </div>
    </footer>
  );
};
window.Footer = Footer;