function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="border-t border-[var(--line)]" style={{ background: 'var(--ink)', color: '#EDE6DA' }}>
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-16 md:py-20">
        <div className="grid md:grid-cols-12 gap-10 md:gap-16">
          <div className="md:col-span-6">
            <div className="font-display text-[44px] md:text-[70px] leading-[0.95] tracking-tight">
              Clair Real Estate
            </div>
            <p className="mt-5 max-w-[440px] text-[15px] leading-[1.6] opacity-70">
              Calm property advice, campaign planning and appraisal conversations for Bayside Melbourne homeowners.
            </p>
          </div>

          <div className="md:col-span-3">
            <div className="text-[11px] tracking-[0.18em] uppercase opacity-50 mb-4">Sections</div>
            <ul className="space-y-2 text-[15px]">
              {NAV_ITEMS.map((n) => (
                <li key={n.id}>
                  <a
                    href={`#${n.id}`}
                    onClick={(e) => {
                      e.preventDefault();
                      const el = document.getElementById(n.id);
                      if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: 'smooth' });
                    }}
                    className="link-underline opacity-80 hover:opacity-100"
                  >
                    {n.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div className="md:col-span-3">
            <div className="text-[11px] tracking-[0.18em] uppercase opacity-50 mb-4">Follow</div>
            <div className="flex items-center gap-3">
              {[
                ['Instagram', IconInstagram],
                ['Facebook', IconFacebook],
                ['LinkedIn', IconLinkedIn],
              ].map(([label, Icon]) => (
                <a
                  key={label}
                  href="#"
                  aria-label={label}
                  className="w-11 h-11 rounded-full border border-white/15 grid place-items-center hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors"
                >
                  <Icon />
                </a>
              ))}
            </div>
            <div className="mt-8 text-[11px] tracking-[0.14em] uppercase opacity-50">Get in touch</div>
            <div className="mt-2 text-[14px] opacity-90">0400 000 000</div>
            <div className="text-[14px] opacity-90">hello@clairproperty.com.au</div>
          </div>
        </div>

        <div className="mt-16 pt-8 border-t border-white/10 flex flex-wrap items-center justify-between gap-4 text-[12px] opacity-60">
          <div>© {year} Clair Real Estate. Demo details for presentation only.</div>
          <div className="flex items-center gap-6">
            <a href="#" className="link-underline">Privacy</a>
            <a href="#" className="link-underline">Terms</a>
            <span>Bayside Melbourne</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });