const TESTIMONIALS = [
  {
    quote: "Sophie is an exceptional assistant. She is extremely reliable, deeply conscientious, very patient and also strategic. She ensures that our ongoing client relationships and business processes are managed with a very high degree of professionalism. Strongly recommended.",
    name: "Richard Jolly",
    role: "Consultant and Adjunct Business School Professor",
  },
  {
    quote: "Sophie's dedication, professionalism, and innovative spirit have been instrumental in shaping our achievements and driving our success. We're excited for all that's to come and are truly grateful for the huge impact she's made.",
    name: "Jonathan Stott",
    role: "Chartered Psychologist · Honne Co-Founder",
  },
  {
    quote: "Sophie is both meticulous on detail and clear about the bigger picture — maintaining a firm hold throughout on the prime purpose of the assignment. She is a real pleasure to work with. I've no doubt at all these are qualities she brings to every other aspect of her work.",
    name: "David French",
    role: "Executive Coach",
  },
  {
    quote: "Sophie is possibly the most capable, intelligent, conscientious, and lovely person I have ever worked with. Anyone who employs her would have found themselves a true gem in an employment market where there are many with experience but none who truly possess what it takes to be a good EA or PA.",
    name: "Clara May Beasley",
    role: "Executive Assistant",
  },
  {
    quote: "I had the pleasure of working with Sophie over a period of some years and always found her to be extremely conscientious and professional. I can thoroughly recommend Sophie and hope that we can work together again in some way in the future.",
    name: "James Marriott",
    role: "Advokat, Lawyer",
  },
  {
    quote: "Sophie has worked with me on several digital marketing projects involving some fairly complex work in Woocommerce, WordPress, and Photoshop. Sophie is really speedy, has a very fine eye for detail, and is very professional. Highly recommended.",
    name: "Laura Tulloch",
    role: "Marketing Director",
  },
  {
    quote: "Sophie has an instinctive understanding of her client's needs and all the skills necessary to fulfil her brief. She is responsive and meticulous and I cannot recommend her too highly.",
    name: "Richard Hilliard",
    role: "Executive Coach",
  },
  {
    quote: "I was fortunate to be introduced to Sophie when I first set up my business. She is highly responsive and her attention to detail is absolute — nothing is too much trouble in her delivering excellence. I will continue to use her for support/technical advice.",
    name: "Martin Kendall",
    role: "Managing Director",
  },
];

function Testimonials() {
  const [active, setActive] = React.useState(0);
  const [auto, setAuto] = React.useState(true);

  React.useEffect(() => {
    if (!auto) return;
    const id = setInterval(() => setActive(a => (a + 1) % TESTIMONIALS.length), 7000);
    return () => clearInterval(id);
  }, [auto]);

  const t = TESTIMONIALS[active];

  return (
    <section id="testimonials" className="section">
      <div className="shell">
        <div className="section-head">
          <div className="num">(05)</div>
          <div className="head-body">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Testimonials</div>
            <h2 className="h-section">Trusted by people who do careful work.</h2>
          </div>
        </div>

        <div className="testimonial-grid" style={{
          display: "grid",
          gridTemplateColumns: "80px 1fr",
          gap: 32,
        }}>
          <div className="indent-collapse-mobile"></div>
          <div
            onMouseEnter={() => setAuto(false)}
            onMouseLeave={() => setAuto(true)}
          >
            {/* Quote display */}
            <div style={{ minHeight: 280, position: "relative" }}>
              <div style={{ color: "var(--gold)", marginBottom: 24 }}>
                <Quote size={36}/>
              </div>
              <blockquote
                key={active}
                className="testimonial-quote"
                style={{
                  margin: 0,
                  fontFamily: "var(--serif)",
                  fontSize: 28,
                  lineHeight: 1.32,
                  letterSpacing: "-0.005em",
                  color: "var(--charcoal)",
                  fontWeight: 400,
                  animation: "fade-in .5s ease",
                }}>
                "{t.quote}"
              </blockquote>
              <footer style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--ink-15)" }}>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{t.name}</div>
                <div className="body-sm" style={{ marginTop: 4 }}>{t.role}</div>
              </footer>
            </div>

            {/* Controls */}
            <div className="testimonial-controls" style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginTop: 40,
              paddingTop: 20,
              borderTop: "1px solid var(--ink-15)",
            }}>
              <div style={{ display: "flex", gap: 8 }}>
                {TESTIMONIALS.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => { setActive(i); setAuto(false); }}
                    aria-label={`Testimonial ${i + 1}`}
                    style={{
                      width: 36,
                      height: 4,
                      border: 0,
                      padding: 0,
                      background: i === active ? "var(--accent)" : "var(--ink-15)",
                      transition: "background .2s ease",
                      cursor: "pointer",
                    }}
                  />
                ))}
                <div className="mono" style={{ marginLeft: 16, fontSize: 11, color: "var(--ink-60)" }}>
                  {String(active + 1).padStart(2, "0")} / {String(TESTIMONIALS.length).padStart(2, "0")}
                </div>
              </div>

              <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
                <div style={{ display: "flex", gap: 8 }}>
                  <button
                    onClick={() => { setAuto(false); setActive(a => (a - 1 + TESTIMONIALS.length) % TESTIMONIALS.length); }}
                    aria-label="Previous"
                    style={navBtn}
                  >‹</button>
                  <button
                    onClick={() => { setAuto(false); setActive(a => (a + 1) % TESTIMONIALS.length); }}
                    aria-label="Next"
                    style={navBtn}
                  >›</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fade-in {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: none; }
        }
      `}</style>
    </section>
  );
}

const navBtn = {
  width: 36,
  height: 36,
  border: "1px solid var(--ink-15)",
  background: "transparent",
  fontSize: 18,
  color: "var(--charcoal)",
  cursor: "pointer",
  borderRadius: 2,
  fontFamily: "var(--serif)",
};

window.Testimonials = Testimonials;