// 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;

// Badge links: SWW and "Safe to do Business With" go to Stephen's verifiable SWW
// member listing; NWR and FSB have no member-specific pages, so they link to the
// organisations' homepages (still lets a sceptical visitor confirm the body is real).
const SWW_LISTING = 'https://www.willwriters.com/listing/stephen-ryan-futura-planning-ltd/';

const BADGES = [
  { name: 'Society of Will Writers', short: 'SWW', src: 'images/sww-logo.png', href: 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: 'National Will Register', src: 'images/national-will-register.jpg', href: 'https://www.nationalwillregister.co.uk/' },
  { name: 'Safe to do Business With', short: 'Safe to do Business With', src: 'images/safe-to-do-business.png', href: SWW_LISTING },
];

function Badge({ b }) {
  const [failed, setFailed] = useStateTr(false);
  return (
    <a
      href={b.href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={b.name + ' (opens in a new tab)'}
      className="group flex h-[96px] w-[140px] items-center justify-center rounded-2xl bg-white p-4 ring-1 ring-navy/5 md:h-[116px] md:w-[168px]"
      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'; }}
        />
      )}
    </a>
  );
}

function TrustBadges() {
  return (
    <section className="relative overflow-hidden bg-paper" style={{ paddingTop: 'clamp(32px,5vw,52px)', paddingBottom: 'clamp(36px,5vw,56px)' }}>
      <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: 24, letterSpacing: '-0.01em' }}>
          Proud to be a member of
        </Reveal>
        <Reveal delay={80} className="mt-7 flex flex-wrap items-center justify-center gap-4">
          {BADGES.map((b) => <Badge key={b.name} b={b} />)}
        </Reveal>
        <Reveal delay={160} as="p" className="mx-auto mt-7 font-sans text-stone" style={{ fontSize: 14, lineHeight: 1.6, maxWidth: '64ch' }}>
          Fully qualified, fully insured, and regulated to recognised professional standards as{' '}
          <a href={SWW_LISTING} target="_blank" rel="noopener noreferrer" className="font-medium text-navy underline-offset-2 hover:underline">
            members of the Society of Will Writers
          </a>.
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { TrustBadges });