// TESTIMONIALS
function Testimonials() {
  const list = [
    {
      name: "Sanket",
      role: "Founder · D2C Apparel",
      quote: "Walked in dependent on me for everything. Walked out with a 90-day operator plan.",
      video: "https://risewithbg.com/wp-content/uploads/2025/03/Testimonial-1.mp4",
      poster: "https://risewithbg.com/wp-content/uploads/2025/03/saket-agarwal.jpg",
    },
    {
      name: "Shubham Gupta",
      role: "MD · Manufacturing",
      quote: "We restructured pricing the next Monday. EBITDA up 14% in two quarters.",
      video: "https://risewithbg.com/wp-content/uploads/2025/03/Testimonial-5.mp4",
      poster: "https://risewithbg.com/wp-content/uploads/2025/03/shubham-gupta.jpg",
    },
    {
      name: "Himanshu",
      role: "CEO · SaaS",
      quote: "Best ₹4,999 I’ve spent. The IPO-readiness framework alone was worth 50×.",
      video: "https://risewithbg.com/wp-content/uploads/2025/03/Testimonial-10.mp4",
      poster: "https://risewithbg.com/wp-content/uploads/2025/03/himanshu.jpg",
    },
    {
      name: "Ratandeep Chavan",
      role: "Co-founder · Logistics",
      quote: "Basesh doesn’t teach theory. He hands you the playbook he’s used 60 times.",
      video: "https://risewithbg.com/wp-content/uploads/2025/05/ratandeep-chauhan-horizontal-1.mp4",
      poster: "https://risewithbg.com/wp-content/uploads/2026/04/ratandip.jpg.jpeg",
    },
    {
      name: "Pankaj Chaudhari",
      role: "Director · F&B Chain",
      quote: "I’ve done MBA, EO, YPO. This day was sharper than all of it. Period.",
      video: "https://risewithbg.com/wp-content/uploads/2025/03/Testimonial-6.mp4",
      poster: "https://risewithbg.com/wp-content/uploads/2025/03/pankaj.jpg",
    },
    {
      name: "Jigesh Gandhi",
      role: "Founder · Fintech",
      quote: "We raised our pre-Series A six months later. The deck framework here was the unlock.",
      video: "https://risewithbg.com/wp-content/uploads/2025/03/Testimonial-3.mp4",
      poster: "https://risewithbg.com/wp-content/uploads/2025/03/jigesh.jpg",
    },
  ];

  return (
    <section id="testimonials" className="relative py-20 lg:py-28">
      <div className="mx-auto max-w-[1320px] px-5 lg:px-10">
        <div className="reveal flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
          <div>
            <SectionEyebrow>Social proof</SectionEyebrow>
            <h2 className="mt-5 text-[40px] lg:text-[54px] leading-[1.05] font-semibold tracking-tight max-w-[820px]">
              Here&rsquo;s what <span className="grad-text">industry experts</span> are saying.
            </h2>
          </div>
          <div className="flex items-center gap-3 text-[13px] text-mute">
            <span className="inline-flex items-center gap-1 text-amber">
              {[0,1,2,3,4].map((i) => <Icon.Star key={i} size={14} strokeWidth={2.5} />)}
            </span>
            4.9 / 5 across 1,800+ post-event surveys
          </div>
        </div>

        <div className="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-5 reveal">
          {list.map((t, i) => <TestimonialCard key={i} t={t} />)}
        </div>
      </div>
    </section>
  );
}

function TestimonialCard({ t }) {
  const [playing, setPlaying] = _useState(false);
  const videoRef = _useRef(null);

  function toggle() {
    const v = videoRef.current;
    if (!v) return;
    if (playing) { v.pause(); setPlaying(false); }
    else { v.play(); setPlaying(true); }
  }

  return (
    <article className="group glass rounded-2xl p-6 hover:border-teal/40 hover:scale-[1.015] transition origin-bottom">
      {/* Video */}
      <div className="relative rounded-xl overflow-hidden aspect-video mb-5 bg-black">
        <video
          ref={videoRef}
          src={t.video}
          poster={t.poster}
          className="absolute inset-0 w-full h-full object-cover"
          playsInline
          onEnded={() => setPlaying(false)}
        />
        {/* Dark overlay when paused for better play button visibility */}
        {!playing && (
          <div className="absolute inset-0 bg-black/20 pointer-events-none" />
        )}
        {/* Play / Pause button */}
        <button
          onClick={toggle}
          className="absolute inset-0 grid place-items-center"
          aria-label={playing ? "Pause" : "Play"}
        >
          <span className={
            "w-12 h-12 rounded-full bg-white text-ink-900 grid place-items-center shadow-glow transition-all duration-300 " +
            (playing ? "opacity-0 group-hover:opacity-80 scale-90 group-hover:scale-100" : "opacity-100 group-hover:scale-110")
          }>
            <Icon.Play size={18} strokeWidth={2.5} />
          </span>
        </button>
        {/* Video label */}
        {!playing && (
          <div className="absolute top-3 left-3 text-[10px] font-mono uppercase tracking-widest px-2 py-0.5 rounded glass text-teal pointer-events-none">
            Video Testimonial
          </div>
        )}
      </div>

      {/* Author */}
      <div className="flex items-center gap-3">
        <div
          className="w-11 h-11 rounded-full overflow-hidden border border-white/10 shrink-0"
          style={{ backgroundImage: `url('${t.poster}')`, backgroundSize: "cover", backgroundPosition: "center top" }}
        />
        <div>
          <div className="font-semibold text-[15px]">{t.name}</div>
          <div className="text-[12px] text-mute" dangerouslySetInnerHTML={{__html: t.role}} />
        </div>
      </div>
      <p className="mt-4 text-[15px] leading-relaxed text-white/90"
         dangerouslySetInnerHTML={{__html:`&ldquo;${t.quote}&rdquo;`}} />
    </article>
  );
}

window.Testimonials = Testimonials;