const TESTIMONIALS = [
  {
    quote: "They told me the boring truth at exactly the moment I wanted to do something exciting. That's the whole job — and it's saved me from at least three expensive mistakes.",
    name: "Anaya Krishnan",
    role: "Founder · Bangalore",
    since: "Client since 2014",
    image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&q=80",
  },
  {
    quote: "I'm an NRI in Toronto and managing my Indian assets used to mean a stack of WhatsApp messages with five people. MaxWealth replaced all of that with one quarterly call and a clean dashboard.",
    name: "Karan Sethi",
    role: "Software Architect · NRI Canada",
    since: "Client since 2019",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&q=80",
  },
  {
    quote: "We moved our company's ₹8 crore reserves from a 3.5% sweep-in to a properly designed treasury portfolio. The yield went up; the access didn't change. Highly recommended.",
    name: "Meera Bansal",
    role: "CFO · D2C Brand, Delhi NCR",
    since: "Client since 2022",
    image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=200&q=80",
  },
  {
    quote: "Honest, patient and proactive. They restructured our SIPs, fixed two insurance overlaps we didn't know we had, and built a retirement plan I actually understand.",
    name: "Dr. Ravinder Singh",
    role: "Cardiologist · Mohali",
    since: "Client since 2016",
    image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=200&q=80",
  },
];

const Stars = () => (
  <div style={{ display: "flex", gap: 4 }}>
    {[0,1,2,3,4].map(i => (
      <svg key={i} width="14" height="14" viewBox="0 0 14 14" fill="var(--gold-500)">
        <path d="M7 0.5 L8.5 5 L13 5 L9.5 7.5 L11 12 L7 9 L3 12 L4.5 7.5 L1 5 L5.5 5 Z"/>
      </svg>
    ))}
  </div>
);

const Testimonials = () => {
  const [idx, setIdx] = useState(0);
  const cur = TESTIMONIALS[idx];

  return (
    <section id="testimonials" className="block" style={{ background: "var(--cream)", color: "var(--ink)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }} className="tes-grid">
          {/* Left column */}
          <div>
            <Marker index={4} total={7} label="What clients say"/>
            <h2 className="display" style={{ fontSize: "clamp(33px, 3.5vw, 42px)", marginTop: 28, lineHeight: 1.02, maxWidth: "12ch" }}>
              Quiet trust. Built over decades.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--muted)", marginTop: 24, maxWidth: 380 }}>
              94% of our clients have been with us for more than five years. Here's what a few of them have to say — unedited, used with permission.
            </p>

            {/* Overall rating card */}
            <div style={{ marginTop: 48, padding: "28px 28px", background: "var(--green-900)", color: "var(--cream)", borderRadius: 8 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14 }}>
                <Stars/>
                <span style={{ fontWeight: 600, fontSize: 18 }}>4.9 / 5.0</span>
              </div>
              <p style={{ fontSize: 13, color: "rgba(250,246,236,0.7)", lineHeight: 1.55 }}>
                Based on 312 verified client reviews on Google, JustDial and direct surveys (FY 2024-25).
              </p>
            </div>
          </div>

          {/* Right column: testimonial carousel */}
          <div>
            <div key={idx} style={{ animation: "fadeUp .45s ease forwards", minHeight: 320, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              {/* Big quote mark */}
              <div className="display" style={{ fontSize: 87, lineHeight: 0.7, color: "var(--gold-500)", marginBottom: -20, fontWeight: 700 }}>“</div>

              <blockquote className="display-light" style={{ fontSize: "clamp(24px, 3vw, 36px)", lineHeight: 1.3, color: "var(--ink)", textWrap: "balance", maxWidth: "24ch", marginBottom: 40 }}>
                {cur.quote}
              </blockquote>

              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                <div style={{ width: 60, height: 60, borderRadius: "50%", overflow: "hidden", flexShrink: 0, border: "2px solid var(--gold-500)" }}>
                  <img src={cur.image} alt={cur.name} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 17 }}>{cur.name}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.12em", marginTop: 4, textTransform: "uppercase" }}>
                    {cur.role} · {cur.since}
                  </div>
                </div>
              </div>
            </div>

            {/* Controls */}
            <div style={{ marginTop: 56, display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "1px solid var(--hairline)", paddingTop: 24 }}>
              <div style={{ display: "flex", gap: 8 }}>
                {TESTIMONIALS.map((_, i) => (
                  <button key={i} onClick={() => setIdx(i)} aria-label={`Testimonial ${i+1}`} style={{
                    width: i === idx ? 28 : 8, height: 8, borderRadius: 999,
                    background: i === idx ? "var(--green-800)" : "var(--hairline)",
                    transition: "width .3s, background .3s"
                  }}/>
                ))}
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <button onClick={() => setIdx((idx - 1 + TESTIMONIALS.length) % TESTIMONIALS.length)} aria-label="Previous" style={{
                  width: 44, height: 44, borderRadius: "50%", border: "1px solid var(--hairline)", display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}>
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2 L4 7 L9 12" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
                </button>
                <button onClick={() => setIdx((idx + 1) % TESTIMONIALS.length)} aria-label="Next" style={{
                  width: 44, height: 44, borderRadius: "50%", background: "var(--green-800)", color: "var(--cream)", display: "inline-flex", alignItems: "center", justifyContent: "center"
                }}>
                  <svg width="14" height="14" viewBox="0 0 14 14"><path d="M5 2 L10 7 L5 12" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .tes-grid{ grid-template-columns: 1fr !important; gap: 48px !important }
        }
      `}</style>
    </section>
  );
};

window.Testimonials = Testimonials;