// Footer — navy, four columns collapsing to two then one. Membership logos, link
// groups, contact details, legal strip.
const FOOTER_SERVICES = [
  { label: 'Online Wills', href: 'https://futuraplanning.co.uk/services/make-a-will-online/' },
  { label: 'Home Visit Wills', href: 'https://futuraplanning.co.uk/services/make-a-will-at-home/' },
  { label: 'Family & Property Trusts', href: 'https://futuraplanning.co.uk/services/family-property-trusts/' },
  { label: 'Lasting Power of Attorney', href: 'https://futuraplanning.co.uk/services/lasting-power-of-attorney-lpa/' },
  { label: 'Lifetime Trusts', href: 'https://futuraplanning.co.uk/services/lifetime-trusts/' },
  { label: 'Will Storage & Updates', href: 'https://futuraplanning.co.uk/services/will-storage-and-updates/' },
];

const FOOTER_LOGOS = [
  { name: 'Society of Will Writers', short: 'SWW', src: 'https://futuraplanning.co.uk/wp-content/uploads/2024/11/sww-logo.png' },
  { name: 'Federation of Small Businesses', short: 'FSB', src: 'https://futuraplanning.co.uk/wp-content/uploads/2024/11/fsb-member-logo-PNG.png' },
  { name: 'National Will Register', short: 'NWR', src: 'https://futuraplanning.co.uk/wp-content/uploads/2024/11/national-will-register-logo.jpg' },
  { name: 'Safe to do Business With', short: 'Safe', src: 'https://futuraplanning.co.uk/wp-content/uploads/2025/05/Safe-to-do-business-with.png' },
];

const { useState: useStateFt } = React;

function FooterLogo({ b }) {
  const [failed, setFailed] = useStateFt(false);
  if (failed) {
    return <span className="inline-flex h-12 items-center justify-center rounded-lg bg-white/10 px-2 font-sans font-semibold text-white/80" style={{ fontSize: 11 }}>{b.short}</span>;
  }
  return (
    <span className="inline-flex h-12 items-center justify-center rounded-lg bg-white/95 px-2">
      <img
        src={b.src}
        alt={b.name}
        referrerPolicy="no-referrer"
        onError={() => setFailed(true)}
        className="max-h-9 max-w-[72px] object-contain"
        style={{ filter: 'grayscale(1)', opacity: 0.9, transition: 'filter 280ms ' + EASE + ', opacity 280ms ' + EASE }}
        onMouseEnter={(e) => { e.currentTarget.style.filter = 'grayscale(0)'; e.currentTarget.style.opacity = '1'; }}
        onMouseLeave={(e) => { e.currentTarget.style.filter = 'grayscale(1)'; e.currentTarget.style.opacity = '0.9'; }}
      />
    </span>
  );
}

function FooterLink({ href, children, external, onClick }) {
  return (
    <a
      href={href}
      onClick={onClick}
      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
      className="font-sans text-white/70 hover:text-white transition-colors"
      style={{ fontSize: 14.5, lineHeight: 1.9 }}
    >
      {children}
    </a>
  );
}

function Footer() {
  return (
    <footer className="relative overflow-hidden" style={{ background: '#1A3066', color: '#FDFBF6' }}>
      <Grain opacity={0.06} />
      <div className="relative mx-auto max-w-[1180px] px-5 sm:px-7" style={{ paddingTop: 'clamp(56px,8vw,88px)', paddingBottom: 32 }}>
        <div className="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
          {/* Brand */}
          <div className="sm:col-span-2 lg:col-span-1">
            <span className="font-display font-medium text-white" style={{ fontSize: 23 }}>Futura Planning</span>
            <span className="mt-1.5 block font-sans font-medium uppercase" style={{ fontSize: 9, letterSpacing: '0.22em', color: 'rgba(255,255,255,0.6)' }}>Your Legacy. Our Expertise</span>
            <p className="mt-4 font-sans text-white/70" style={{ fontSize: 14, lineHeight: 1.6, maxWidth: '34ch' }}>
              Friendly, plain-English Will writing and estate planning for families across Somerset and beyond.
            </p>
            <div className="mt-6 flex flex-wrap gap-2.5">
              {FOOTER_LOGOS.map((b) => <FooterLogo key={b.name} b={b} />)}
            </div>
          </div>

          {/* Services */}
          <div>
            <p className="font-sans font-semibold uppercase text-white" style={{ fontSize: 12, letterSpacing: '0.14em' }}>Services</p>
            <div className="mt-3 flex flex-col">
              {FOOTER_SERVICES.map((s) => <FooterLink key={s.label} href={s.href} external>{s.label}</FooterLink>)}
            </div>
          </div>

          {/* Company */}
          <div>
            <p className="font-sans font-semibold uppercase text-white" style={{ fontSize: 12, letterSpacing: '0.14em' }}>Company</p>
            <div className="mt-3 flex flex-col">
              <FooterLink href="https://futuraplanning.co.uk/news/" external>News</FooterLink>
              <FooterLink href="#contact" onClick={(e) => smoothTo(e, '#contact')}>Get in touch</FooterLink>
              <FooterLink href="#will-finder" onClick={(e) => smoothTo(e, '#will-finder')}>Online Will</FooterLink>
              <FooterLink href="https://futuraplanning.co.uk/privacy-policy/" external>Privacy Policy</FooterLink>
            </div>
          </div>

          {/* Contact */}
          <div>
            <p className="font-sans font-semibold uppercase text-white" style={{ fontSize: 12, letterSpacing: '0.14em' }}>Contact</p>
            <div className="mt-3 flex flex-col gap-2.5 font-sans text-white/70" style={{ fontSize: 14.5, lineHeight: 1.5 }}>
              <span>6 Tollhouse Road, Churchill, Winscombe, BS25 5AN</span>
              <a href={PHONE_TEL} className="hover:text-white transition-colors">01934 442030</a>
              <a href={'mailto:info@futuraplanning.co.uk'} className="hover:text-white transition-colors">info@futuraplanning.co.uk</a>
              <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Message us on WhatsApp</a>
              <a href="https://g.page/r/CY1R7iOVJnrNEBM/review" target="_blank" rel="noopener noreferrer" className="text-white/60 hover:text-white transition-colors" style={{ fontSize: 13 }}>Leave a Google review</a>
            </div>
          </div>
        </div>

        <div className="mt-12 border-t pt-6" style={{ borderColor: 'rgba(255,255,255,0.12)' }}>
          <p className="font-sans" style={{ fontSize: 12, lineHeight: 1.6, color: 'rgba(255,255,255,0.6)' }}>
            &copy; 2026 Futura Planning Ltd. Company Number 15243334. Members of the Society of Will Writers.
          </p>
          <p className="mt-2 font-sans" style={{ fontSize: 12, lineHeight: 1.6, color: 'rgba(255,255,255,0.45)' }}>
            Information on this site is general guidance, not legal advice. Recommendations depend on your circumstances.
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });