const TESTIMONIALS = [
  {
    quote: 'You should never feel in the dark about your own sale. Clair sets the expectations early, then keeps you updated after every inspection and buyer conversation.',
    name: 'Clear updates',
    suburb: 'Seller experience',
    context: 'Principle 01',
  },
  {
    quote: 'A strong campaign starts before launch. Pricing, presentation, photography and buyer targeting are decided with care instead of being rushed in the final week.',
    name: 'Prepared launch',
    suburb: 'Campaign planning',
    context: 'Principle 02',
  },
  {
    quote: 'Good advice is not always the loudest advice. Sometimes it means waiting, improving the property story, or walking away from the wrong buyer pressure.',
    name: 'Calm negotiation',
    suburb: 'Decision support',
    context: 'Principle 03',
  },
];

function Testimonials() {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const total = TESTIMONIALS.length;

  const go = (n) => setIdx((idx + n + total) % total);
  const goTo = (n) => setIdx(n);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % total), 6500);
    return () => clearInterval(t);
  }, [paused, total]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') go(-1);
      if (e.key === 'ArrowRight') go(1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [idx]);

  return (
    <section
      id="testimonials"
      className="py-24 md:py-32 border-t border-[var(--line)] relative overflow-hidden"
      style={{ background: 'var(--bg-2)' }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div
        className="absolute -top-4 -left-4 md:top-8 md:left-8 opacity-[0.07] pointer-events-none"
        style={{ color: 'var(--accent)' }}
      >
        <div className="font-display text-[300px] md:text-[420px] leading-none">“</div>
      </div>

      <div className="relative max-w-[1240px] mx-auto px-6 md:px-10">
        <div className="flex items-end justify-between flex-wrap gap-6 mb-14 md:mb-20">
          <div>
            <p className="text-[12px] tracking-[0.18em] uppercase text-[var(--accent)] mb-4 reveal">
              The client experience · 04
            </p>
            <h2 className="font-display font-light text-[36px] sm:text-[44px] md:text-[58px] leading-[1.02] tracking-tight reveal reveal-delay-1">
              What working with Clair should feel like.
            </h2>
          </div>

          <div className="flex items-center gap-2 reveal reveal-delay-2">
            <button
              onClick={() => go(-1)}
              className="w-11 h-11 rounded-full grid place-items-center border border-[var(--line)] bg-[var(--bg)] hover:bg-[var(--bg)] hover:border-[var(--ink-2)] transition-colors"
              aria-label="Previous"
            >
              <IconChevronLeft />
            </button>
            <button
              onClick={() => go(1)}
              className="w-11 h-11 rounded-full grid place-items-center border border-[var(--line)] bg-[var(--bg)] hover:border-[var(--ink-2)] transition-colors"
              aria-label="Next"
            >
              <IconChevronRight />
            </button>
          </div>
        </div>

        <div className="relative reveal reveal-delay-2">
          <div className="relative min-h-[330px] md:min-h-[280px]">
            {TESTIMONIALS.map((t, i) => (
              <article
                key={i}
                className={`absolute inset-0 transition-all duration-700 ${
                  i === idx ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-3 pointer-events-none'
                }`}
                aria-hidden={i !== idx}
              >
                <blockquote className="font-display font-light text-[25px] sm:text-[32px] md:text-[44px] leading-[1.22] tracking-tight max-w-[960px]">
                  {t.quote}
                </blockquote>
                <div className="mt-10 flex items-center gap-5">
                  <div
                    className="w-12 h-12 rounded-full grid place-items-center font-display text-[18px]"
                    style={{ background: 'var(--accent)', color: 'var(--accent-ink)' }}
                  >
                    {String(idx + 1).padStart(2, '0')}
                  </div>
                  <div>
                    <div className="font-display text-[17px]">{t.name}, <span className="text-[var(--ink-2)]">{t.suburb}</span></div>
                    <div className="text-[11px] tracking-[0.14em] uppercase text-[var(--muted)] mt-1">{t.context}</div>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div className="mt-12 flex items-center justify-between">
            <div className="flex items-center gap-2">
              {TESTIMONIALS.map((_, i) => (
                <button
                  key={i}
                  onClick={() => goTo(i)}
                  aria-label={`Go to principle ${i + 1}`}
                  className={`dot ${i === idx ? 'active' : ''}`}
                />
              ))}
            </div>
            <div className="text-[11px] tracking-[0.16em] uppercase text-[var(--muted)] font-mono">
              {String(idx + 1).padStart(2, '0')} <span className="text-[var(--line)]">/</span> {String(total).padStart(2, '0')}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });