// Testimonials — real Google reviews (name, star rating and review text only).
// The long review collapses behind a "Read more" toggle so the cards stay balanced.
const { useState: useStateTs } = React;

const TESTIMONIALS = [
  {
    quote: 'Steve was extremely helpful and explained everything to me in a very relaxed manner. He is extremely knowledgeable I am so glad I used him for my LPA’s. He visited me and helped me through the whole procedure, pointing out the pros and cons of several decisions that needed to be made. He made the whole procedure easy and I had every confidence that he was looking after my best interest, making sure that I understood everything. His response has always been very prompt from my first contact with him. I have no hesitation in recommending him.',
    name: 'Ann Fox',
    stars: 5,
    long: true,
  },
  {
    quote: 'I had a very good experience with Stephen, his advice was very useful, and I would highly recommend him. He has a very good knowledge of the system.',
    name: 'David Freeman',
    stars: 5,
  },
  {
    quote: 'Great service from Steve from start to finish, very thorough and highly professional, I would totally recommend him.',
    name: 'Sean Phipps',
    stars: 5,
  },
];

function Stars({ count = 5 }) {
  return (
    <div className="flex gap-1" aria-label={count + ' out of five stars'}>
      {Array.from({ length: count }).map((_, i) => <Icon key={i} name="star" size={18} className="text-gold-deep" />)}
    </div>
  );
}

// Simple "G" roundel so each card reads as a verified Google review at a glance.
function GoogleMark() {
  return (
    <span
      className="inline-flex items-center gap-1.5 font-sans font-medium text-stone"
      style={{ fontSize: 12 }}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47a5.57 5.57 0 0 1-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z" />
        <path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09A11.99 11.99 0 0 0 12 24z" />
        <path fill="#FBBC05" d="M5.27 14.29A7.16 7.16 0 0 1 4.89 12c0-.8.14-1.57.38-2.29V6.62H1.29a11.99 11.99 0 0 0 0 10.76l3.98-3.09z" />
        <path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.69 1.29 6.62l3.98 3.09c.95-2.85 3.6-4.96 6.73-4.96z" />
      </svg>
      Google review
    </span>
  );
}

function ReviewCard({ t, featured }) {
  const [expanded, setExpanded] = useStateTs(false);
  const staticRender = useStaticRender();
  const collapsed = t.long && !expanded && !staticRender;
  return (
    <figure
      className="relative flex h-full flex-col rounded-2xl bg-white"
      style={{
        padding: featured ? '44px 40px 32px' : '36px 30px 28px',
        boxShadow: featured ? '0 34px 80px -38px rgba(26,48,102,0.5)' : '0 22px 56px -34px rgba(26,48,102,0.4)',
      }}
    >
      <span aria-hidden="true" className="absolute font-display select-none" style={{ top: 6, left: 22, fontSize: featured ? 110 : 84, lineHeight: 1, color: 'rgba(255,204,87,0.5)' }}>&ldquo;</span>
      <Stars count={t.stars} />
      <blockquote className="relative mt-4 font-display italic text-ink" style={{ fontSize: featured ? 18 : 15.5, lineHeight: 1.7 }}>
        <span
          style={collapsed ? {
            display: '-webkit-box',
            WebkitLineClamp: 6,
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
          } : {}}
        >
          {t.quote}
        </span>
      </blockquote>
      {t.long && !staticRender ? (
        <button
          type="button"
          onClick={() => setExpanded((v) => !v)}
          aria-expanded={expanded}
          className="mt-3 self-start font-sans font-semibold text-blue underline-offset-4 hover:underline"
          style={{ fontSize: 13.5 }}
        >
          {expanded ? 'Read less' : 'Read more'}
        </button>
      ) : null}
      <figcaption className="mt-auto flex items-center justify-between gap-3 pt-5">
        <span className="font-sans font-semibold text-navy" style={{ fontSize: 14 }}>{t.name}</span>
        <GoogleMark />
      </figcaption>
    </figure>
  );
}

function Testimonials() {
  const mag = useMagnetic(3);
  return (
    <section id="testimonials" className="relative overflow-hidden bg-cream" style={{ paddingTop: 'clamp(56px,8vw,92px)', paddingBottom: 'clamp(56px,8vw,92px)' }}>
      <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' }}>Google reviews</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 items-stretch gap-6 lg:grid-cols-12">
          <Reveal className="lg:col-span-7">
            <ReviewCard t={TESTIMONIALS[0]} featured />
          </Reveal>
          <div className="flex flex-col gap-6 lg:col-span-5">
            <Reveal delay={110} className="flex-1">
              <ReviewCard t={TESTIMONIALS[1]} />
            </Reveal>
            <Reveal delay={200} className="flex-1">
              <ReviewCard t={TESTIMONIALS[2]} />
            </Reveal>
          </div>
        </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 on Google</p>
          <div className="flex flex-col gap-3 sm:flex-row">
            <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 });