// Testimonials — two real quotes in cards with star rows and a big quote glyph.
const TESTIMONIALS = [
  {
    quote: 'We both would like to thank you for the high level of service you provided when we requested that you at Futura Planning draw up mirror Wills for us both. We recommend your services to other potential clients without reservation. Thank you again, and best wishes.',
    name: 'Mr & Mrs J.A. Robbins',
  },
  {
    quote: 'I am very happy that we chose Futura Planning / Stephen Ryan to do our LPAs and update our Wills. Stephen was at all times both prompt and professional, very helpful and patient in explaining the details of such documents. He was also financially competitive. We are very happy to recommend Futura Planning to friends and family, in fact we already have.',
    name: 'Mr & Mrs Whitehouse',
  },
];

function Stars() {
  return (
    <div className="flex gap-1" aria-label="Five out of five stars">
      {[0, 1, 2, 3, 4].map((i) => <Icon key={i} name="star" size={18} className="text-gold-deep" />)}
    </div>
  );
}

function Testimonials() {
  const mag = useMagnetic(3);
  return (
    <section id="testimonials" className="relative overflow-hidden bg-cream" style={{ paddingTop: 'clamp(72px,10vw,116px)', paddingBottom: 'clamp(72px,10vw,116px)' }}>
      <Grain opacity={0.045} />
      <Blob color="#FFCC57" size={320} opacity={0.18} blur={10} speed={28} rotate={6} style={{ top: '-70px', right: '-80px' }} />
      <Blob color="#EAF1FA" size={320} opacity={0.7} blur={8} speed={-20} rotate={-4} style={{ bottom: '20px', left: '-90px' }} />

      <div className="relative mx-auto max-w-[1080px] px-5 sm:px-7">
        <Reveal className="text-center">
          <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 13, letterSpacing: '0.18em' }}>Kind words</p>
          <h2 className="mt-3 font-display font-normal text-navy" style={{ fontSize: 'clamp(30px,4.2vw,46px)', lineHeight: 1.12, letterSpacing: '-0.01em' }}>
            Trusted by Somerset families
          </h2>
        </Reveal>

        <div className="mt-11 grid grid-cols-1 gap-6 md:grid-cols-2">
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={t.name} delay={i * 110}>
              <figure className="relative flex h-full flex-col rounded-2xl bg-white p-8 pt-10" style={{ boxShadow: '0 26px 64px -36px rgba(26,48,102,0.45)' }}>
                <span aria-hidden="true" className="absolute font-display select-none" style={{ top: 6, left: 22, fontSize: 92, lineHeight: 1, color: 'rgba(255,204,87,0.55)' }}>&ldquo;</span>
                <Stars />
                <blockquote className="relative mt-4 flex-1 font-display italic text-ink" style={{ fontSize: 16, lineHeight: 1.65 }}>{t.quote}</blockquote>
                <figcaption className="mt-5 font-sans font-semibold text-navy" style={{ fontSize: 14 }}>{t.name}</figcaption>
              </figure>
            </Reveal>
          ))}
        </div>

        <Reveal delay={120} className="mt-11 flex flex-col items-center gap-5">
          <p className="font-sans text-stone" style={{ fontSize: 14 }}>Rated by our clients</p>
          <div className="flex flex-col gap-3 sm:flex-row">
            <a
              href="https://g.page/r/CY1R7iOVJnrNEBM/review"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center rounded-full px-7 py-3.5 font-sans font-semibold text-[16px] text-navy"
              style={{ boxShadow: 'inset 0 0 0 1.5px #1A3066', transition: 'background-color 250ms ' + EASE }}
              onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(26,48,102,0.06)')}
              onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
            >
              Leave us a Google review
            </a>
            <a
              ref={mag.ref}
              onMouseMove={mag.onMouseMove}
              onMouseLeave={mag.onMouseLeave}
              href="#contact"
              onClick={(e) => smoothTo(e, '#contact')}
              className="inline-flex items-center justify-center rounded-full bg-gold px-7 py-3.5 font-sans font-semibold text-[16px] text-navy hover:bg-gold-deep"
              style={{ boxShadow: '0 14px 30px -12px rgba(240,184,60,0.85)', transition: 'transform 250ms ' + EASE + ', background-color 250ms ' + EASE }}
            >
              Get in touch
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });