// Footer — navy, four columns collapsing to two then one. Membership logos, link
// groups, contact details, legal strip.
const FOOTER_SERVICES = [
  { label: 'Online Wills', href: 'online-wills.html' },
  { label: 'Home Visit Wills', href: 'home-visit-wills.html' },
  { label: 'Wills for Business Owners', href: 'wills-for-business-owners.html' },
  { label: 'Lasting Power of Attorney', href: 'lasting-power-of-attorney.html' },
  { label: 'Business LPA', href: 'business-lasting-power-of-attorney.html' },
  { label: 'Fast-Track LPA', href: 'fast-track-lpa.html' },
  { label: 'Family & Property Trusts', href: 'family-property-trusts.html' },
  { label: 'Property Protection Trusts', href: 'property-protection-trusts.html' },
  { label: 'Lifetime Trusts', href: 'lifetime-trusts.html' },
  { label: 'Inheritance Tax Planning', href: 'inheritance-tax-planning.html' },
  { label: 'Worry-free Probate', href: 'probate.html' },
  { label: 'Will Storage & Updates', href: 'will-storage-and-updates.html' },
];

const FOOTER_SWW_LISTING = 'https://www.willwriters.com/listing/stephen-ryan-futura-planning-ltd/';
const FOOTER_LOGOS = [
  { name: 'Society of Will Writers', short: 'SWW', src: 'images/sww-logo.png', href: FOOTER_SWW_LISTING },
  { name: 'Federation of Small Businesses', short: 'FSB', src: 'images/fsb-member-logo.png', href: 'https://www.fsb.org.uk' },
  { name: 'National Will Register', short: 'NWR', src: 'images/national-will-register.jpg', href: 'https://www.nationalwillregister.co.uk/' },
  { name: 'Safe to do Business With', short: 'Safe', src: 'images/safe-to-do-business.png', href: FOOTER_SWW_LISTING },
];

const FOOTER_SOCIALS = [
  { name: 'Facebook', icon: 'facebook', href: 'https://facebook.com/futuraplanning' },
  { name: 'Instagram', icon: 'instagram', href: 'https://www.instagram.com/futuraplanning/' },
  { name: 'X (Twitter)', icon: 'twitter', href: 'https://twitter.com/futuraplanning' },
  { name: 'LinkedIn', icon: 'linkedin', href: 'https://www.linkedin.com/company/futuraplanning' },
  { name: 'YouTube', icon: 'youtube', href: 'https://www.youtube.com/@futuraplanning' },
  { name: 'Nextdoor', icon: 'nextdoor', href: 'https://nextdoor.co.uk/page/futura-planning-ltd-winscombe-england/' },
];

const { useState: useStateFt } = React;

function FooterLogo({ b }) {
  const [failed, setFailed] = useStateFt(false);
  if (failed) {
    return (
      <a href={b.href} target="_blank" rel="noopener noreferrer" aria-label={b.name + ' (opens in a new tab)'} 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}</a>
    );
  }
  return (
    <a href={b.href} target="_blank" rel="noopener noreferrer" aria-label={b.name + ' (opens in a new tab)'} 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'; }}
      />
    </a>
  );
}

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">
            <img src="images/logo-white.png" alt="Futura Planning — Your Legacy. Our Expertise" style={{ height: 44, width: 'auto', maxWidth: 220, display: 'block' }} />
            <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}>{s.label}</FooterLink>)}
              <FooterLink href="estate-planning.html">Estate Planning</FooterLink>
              <FooterLink href="legal-services.html">Legal Services</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="about-us.html">About us</FooterLink>
              <FooterLink href="news.html">News &amp; guides</FooterLink>
              <FooterLink href="contact.html">Get in touch</FooterLink>
              <FooterLink href="book-an-appointment.html">Book an appointment</FooterLink>
              <FooterLink href="online-wills.html">Online Wills</FooterLink>
              <FooterLink href="areas-we-cover.html">Areas We Cover</FooterLink>
              <FooterLink href="privacy-policy.html">Privacy Policy</FooterLink>
              <FooterLink href="cookie-policy.html">Cookie Policy</FooterLink>
              <FooterLink href="terms-and-conditions.html">Terms &amp; Conditions</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>{ADDRESS}</span>
              <a href={MAPS_DIRECTIONS} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 font-medium text-gold hover:text-white transition-colors" style={{ fontSize: 13.5 }}>
                <Icon name="mapPin" size={14} strokeWidth={2} /> Get directions
              </a>
              <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>
              <div className="mt-2 flex flex-wrap gap-3">
                {FOOTER_SOCIALS.map((s) => (
                  <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.name + ' (opens in a new tab)'} className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/10 text-white/70 hover:bg-white/20 hover:text-white transition-colors">
                    <Icon name={s.icon} size={16} />
                  </a>
                ))}
              </div>
            </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.{' '}
            <a href={FOOTER_SWW_LISTING} target="_blank" rel="noopener noreferrer" className="underline-offset-2 hover:underline" style={{ color: 'rgba(255,255,255,0.7)' }}>
              Members of the Society of Will Writers
            </a>.
          </p>
          <p className="mt-2 font-sans" style={{ fontSize: 12, lineHeight: 1.6, color: 'rgba(255,255,255,0.55)' }}>
            {SWW_DISCLAIMER}
          </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>
          <p className="mt-6 text-center font-sans" style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.7)' }}>
            Designed &amp; Developed by{' '}
            <a href="https://sharpcube.uk/" target="_blank" rel="noopener noreferrer" className="font-semibold text-gold underline-offset-2 hover:underline">SharpCube</a>
          </p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });