import React from "react";
import { createRoot } from "react-dom/client";

/**
 * Animated testimonials marquee (3 columns, vertical infinite scroll).
 * Adapted from the framer-motion reference into vanilla React + CSS keyframes,
 * styled with project tokens to match the rest of the site.
 */

const TESTIMONIALS = [
  {
    text: "Most binding-affinity tools give us a number we can't argue with and can't reproduce. With DrugRepAI we can point to the exact motif-residue interaction driving a prediction. That's the difference between a black box and a hypothesis we can take into the lab.",
    name: "Dr. Rohan Mehta",
    role: "Principal Investigator, Structural Biology",
    image: "assets/Users%20pic/Rectangle%207.jpg",
  },
  {
    text: "We were screening approved compounds against a new oncology target and getting hits we couldn't explain to the discovery committee. The motif × residue map became the slide we presented. We went from \"the model says yes\" to \"here's the chemistry.\"",
    name: "Marcus Brennan",
    role: "Director of Computational Biology",
    image: "assets/Users%20pic/Rectangle%208.jpg",
  },
  {
    text: "For a neglected tropical disease program, we don't have the budget for a de novo campaign. DrugRepAI gave us a ranked list of approved drugs, with the biological pathway from compound to disease, in an afternoon. That's the kind of tool that makes our work possible.",
    name: "Dr. Daniel Park",
    role: "Scientific Lead",
    image: "assets/Users%20pic/Rectangle%209.jpg",
  },
  {
    text: "Our medicinal chemists used to dismiss in-silico hits without a structural rationale. The motif-pocket evidence changed that conversation entirely — now they treat the score as a starting hypothesis instead of a verdict.",
    name: "James Kowalski",
    role: "Head of Drug Discovery",
    image: "assets/Users%20pic/Rectangle%2010.jpg",
  },
  {
    text: "We integrated DrugRepAI into our pipeline as a triage step before wet-lab validation. The hit rate on follow-up assays moved from 8% to 31% over the first quarter we used it.",
    name: "Alex Verma",
    role: "Senior Bioinformatician",
    image: "assets/Users%20pic/Rectangle%2011.jpg",
  },
  {
    text: "I needed to defend a repurposing candidate to a clinical advisory board. Having residue-level binding context — and the path through the protein graph — made the case in minutes, not hours.",
    name: "Dr. Lucas Romero",
    role: "Research Fellow",
    image: "assets/Users%20pic/Rectangle%2012.jpg",
  },
];

function TestimonialsColumn({ items, duration = 30, className = "" }) {
  return (
    <div className={`testimonials-column ${className}`.trim()}>
      <div
        className="testimonials-column__inner"
        style={{ animationDuration: `${duration}s` }}
      >
        {[0, 1].map((dup) => (
          <React.Fragment key={dup}>
            {items.map((t, i) => (
              <article className="testimonial-card" key={`${dup}-${i}`} aria-hidden={dup === 1 ? true : undefined}>
                <p className="testimonial-card__body">{t.text}</p>
                <div className="testimonial-card__divider" />
                <div className="testimonial-card__attr">
                  <img
                    className="testimonial-card__avatar"
                    src={t.image}
                    alt=""
                    loading="lazy"
                    decoding="async"
                  />
                  <div className="testimonial-card__attr-text">
                    <div className="testimonial-card__name">{t.name}</div>
                    <div className="testimonial-card__role">{t.role}</div>
                  </div>
                </div>
              </article>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function TestimonialsMarquee() {
  const col1 = TESTIMONIALS.slice(0, 2);
  const col2 = TESTIMONIALS.slice(2, 4);
  const col3 = TESTIMONIALS.slice(4, 6);

  return (
    <div className="testimonials-marquee" aria-label="What researchers and partners say about DrugRepAI">
      <TestimonialsColumn items={col1} duration={26} />
      <TestimonialsColumn items={col2} duration={32} className="testimonials-column--md" />
      <TestimonialsColumn items={col3} duration={29} className="testimonials-column--lg" />
    </div>
  );
}

const container = document.getElementById("testimonials-mount");
if (container) {
  createRoot(container).render(<TestimonialsMarquee />);
} else {
  console.warn("[testimonials-mount] #testimonials-mount not found");
}