// Trust badges — real membership logos in soft cards, grayscale that lifts to
// full colour + a -2px lift on hover. Each logo has onError fallback (text chip).
const { useState: useStateTr } = React;

const BADGES = [
  { 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: 'National Will Register', src: 'https://futuraplanning.co.uk/wp-content/uploads/2024/11/national-will-register-logo.jpg' },
  { name: 'Safe to do Business With', short: 'Safe to do Business With', src: 'https://futuraplanning.co.uk/wp-content/uploads/2025/05/Safe-to-do-business-with.png' },
];

function Badge({ b }) {
  const [failed, setFailed] = useStateTr(false);
  return (
    <div
      className="group flex h-[120px] w-[160px] items-center justify-center rounded-2xl bg-white p-5 ring-1 ring-navy/5"
      style={{ boxShadow: '0 12px 30px -20px rgba(26,48,102,0.4)', transition: 'transform 300ms ' + EASE + ', box-shadow 300ms ' + EASE }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 18px 38px -20px rgba(26,48,102,0.5)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 12px 30px -20px rgba(26,48,102,0.4)'; }}
    >
      {failed ? (
        <span className="text-center font-display font-medium text-navy text-[15px] leading-tight">{b.short}</span>
      ) : (
        <img
          src={b.src}
          alt={b.name}
          referrerPolicy="no-referrer"
          onError={() => setFailed(true)}
          className="max-h-full max-w-full object-contain"
          style={{ filter: 'grayscale(1)', opacity: 0.85, transition: 'filter 300ms ' + EASE + ', opacity 300ms ' + 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.85'; }}
        />
      )}
    </div>
  );
}

function TrustBadges() {
  return (
    <section className="relative overflow-hidden bg-paper" style={{ paddingTop: 'clamp(56px,8vw,88px)', paddingBottom: 'clamp(56px,8vw,88px)' }}>
      <Grain opacity={0.035} />
      <Blob color="#EAF1FA" size={340} opacity={0.7} blur={6} speed={22} rotate={4} style={{ top: '-120px', left: '8%' }} />
      <div className="relative mx-auto max-w-[1100px] px-5 text-center sm:px-7">
        <Reveal as="h2" className="font-display font-normal text-navy" style={{ fontSize: 30, letterSpacing: '-0.01em' }}>
          Proud to be a member of
        </Reveal>
        <Reveal delay={80} className="mt-9 flex flex-wrap items-center justify-center gap-4 sm:gap-6">
          {BADGES.map((b) => <Badge key={b.name} b={b} />)}
        </Reveal>
        <Reveal delay={160} as="p" className="mx-auto mt-9 font-sans text-stone" style={{ fontSize: 14, lineHeight: 1.6, maxWidth: '60ch' }}>
          Fully qualified, fully insured, and regulated to recognised professional standards.
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { TrustBadges });