function Testimonials() {
  const quotes = [
    {
      quote: "Megan is a high achiever and delivers quality outcomes. She is a delivery-focused individual, both strategic and operationally, who always strives to do the right thing for customers in support of the wider business strategy.",
      name: "Tony Kassimiotis",
      role: "COO · Phoenix Group (FTSE 100)",
      initials: "TK",
      photo: "assets/tony.png"
    },
    {
      quote: "We quite simply could not have done it without her. She provided technical expertise, sector insight and excellent team skills whilst delivering to budget and on time. Would like to keep Megan's skills a secret so she's always available to us but that would be very unfair. Highly recommended.",
      name: "Elaine Galston",
      role: "Founder · Bettii (Women's Health Start Up)",
      initials: "EG",
      photo: "assets/elaine.png"
    },
    {
      quote: "One of the most passionate, energetic, dynamic individuals I've ever had the pleasure to work with. She's committed to finding purpose in the work that she does and truly making a lasting impact to customers. This passion is coupled with a limitless drive, intelligence and thirst for knowledge.",
      name: "Jeneen Gill-Graham",
      role: "Head of Strategic Partnerships · Standard Life",
      initials: "JG",
      photo: "assets/jeneen.png"
    }
  ];

  const [active, setActive] = React.useState(0);
  const [fading, setFading] = React.useState(false);

  const selectQuote = (i) => {
    if (i === active) return;
    setFading(true);
    setTimeout(() => {
      setActive(i);
      setFading(false);
    }, 200);
  };

  return (
    <section style={{ background: 'var(--beige)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }} className="testimonial-grid">
          <div>
            <div className="eyebrow">What clients say</div>
            <h2 style={{ fontSize: 'clamp(36px, 4.2vw, 56px)' }}>Trusted by FTSE 100, founders and teams between<span style={{ color: 'var(--navy)' }}>.</span></h2>
          </div>
          <div>
            <div style={{ opacity: fading ? 0 : 1, transform: fading ? 'translateY(6px)' : 'translateY(0)', transition: 'opacity 0.25s ease, transform 0.25s ease', minHeight: 240 }}>
              <div className="testimonial-quote">{quotes[active].quote}</div>
              <div className="testimonial-meta">
                {quotes[active].photo ? (
                  <div className="testimonial-avatar" style={{ padding: 0, overflow: 'hidden' }}>
                    <img src={quotes[active].photo} alt={quotes[active].name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  </div>
                ) : (
                  <div className="testimonial-avatar">{quotes[active].initials}</div>
                )}
                <div>
                  <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 18, color: 'var(--ink)' }}>{quotes[active].name}</div>
                  <div className="mono" style={{ color: 'var(--body-soft)', marginTop: 3 }}>{quotes[active].role}</div>
                </div>
              </div>
            </div>

            {/* Slider controls — under the quote only */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--rule)' }}>
              <button onClick={() => selectQuote((active - 1 + quotes.length) % quotes.length)}
                aria-label="Previous testimonial"
                style={{
                  width: 44, height: 44, borderRadius: '50%',
                  border: '1px solid var(--rule)', background: 'transparent',
                  cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--ink)', transition: 'all 0.2s', flexShrink: 0
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--navy)'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = 'var(--navy)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--rule)'; }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M11 3l-5 5 5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
              <button onClick={() => selectQuote((active + 1) % quotes.length)}
                aria-label="Next testimonial"
                style={{
                  width: 44, height: 44, borderRadius: '50%',
                  border: '1px solid var(--rule)', background: 'transparent',
                  cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--ink)', transition: 'all 0.2s', flexShrink: 0
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--navy)'; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = 'var(--navy)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--rule)'; }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
              <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ flex: 1, height: 1, background: 'var(--rule)', position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${((active + 1) / quotes.length) * 100}%`, background: 'var(--navy)', transition: 'width 0.4s ease' }} />
                </div>
                <span className="mono" style={{ color: 'var(--body-soft)', fontSize: 12, whiteSpace: 'nowrap' }}>
                  0{active + 1} / 0{quotes.length}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Live testimonial wall */}
        <div style={{ marginTop: 96 }}>
          <div className="mono" style={{ color: 'var(--body-soft)', marginBottom: 24, textAlign: 'center' }}>More from clients</div>
          <div style={{ background: '#fff', border: '1px solid var(--rule-soft)', borderRadius: 6, padding: '32px 24px', overflow: 'hidden' }}>
            <iframe
              src="https://embed-v2.testimonial.to/w/megan-hunter?animated=on&theme=light&shadowColor=ffffff&speed=1&tag=all&cc=off"
              title="Client testimonials"
              frameBorder="0"
              scrolling="no"
              style={{ width: '100%', minHeight: 420, border: 'none', display: 'block' }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;

function TrustedBy() {
  const brands = [
    ['Phoenix Group', 'FTSE 100'],
    ['Standard Life', 'FTSE 100'],
    ['Bettii', "Women's Health Start Up"],
    ['Inclusive Outcomes', 'CX & Inclusive Design'],
    ['Octopus Money', 'Financial Coaching'],
    ['Africa Tech Summit', 'Pan-African Tech & Investment'],
    ['Fihri Foundation', 'Period Poverty Nonprofit'],
    ['CHAI', 'Anti-Poverty Charity'],
    ['MentorCruise', ''],
  ];
  return (
    <section style={{ background: 'var(--beige)', padding: '72px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container">
        <div className="mono" style={{ color: 'var(--body-soft)', marginBottom: 32, textAlign: 'center' }}>Trusted by</div>
        <div className="marquee marquee-lg">
          <div className="marquee-track">
            {[...Array(2)].flatMap((_, i) =>
              brands.map(([n, ctx], j) => (
                <div key={`${i}-${j}`} className="logo-bar-item logo-bar-item-lg" style={{ flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}><span className="dot"/>{n}</span>
                  {ctx && <span style={{ color: 'var(--body-soft)', fontFamily: "'Lato', sans-serif", fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{ctx}</span>}
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.TrustedBy = TrustedBy;