// Testimonials — "What others say": two columns floating in opposite
// directions (col 1 top→down, col 2 down→up) with iOS-style verified badges.
const { useRef: useRefTesti, useEffect: useEffectTesti } = React;

// ── Data ─────────────────────────────────────────────────────────────────
// Each quote is an array of paragraphs; "\n" inside a paragraph renders as a
// soft line break (used for the bullet-style recommendations). photo = the
// image-slot id the user drops a headshot into.
const TESTIMONIALS = [
  {
    id: "testi-priyam",
    photo: "testi-priyam",
    src: "uploads/priyam-parikh-headshot.png",
    name: "Dr. Priyam A. Parikh",
    role: "Assistant Professor, Institute of Design, Nirma University",
    verified: true,
    quote: [
      "Devarsh is one of the most assiduous students I’ve taught. He showed excellent design thinking and research abilities, developing a smart IoT-based solar panel cleaner with real-world impact. He considers human factors in everything he designs, and his inquisitive, collaborative nature makes him stand out. I wholeheartedly endorse his capabilities.",
    ],
  },
  {
    id: "testi-mithun",
    photo: "testi-mithun",
    src: "uploads/pasted-1782530926657-0.png",
    name: "Mithun Darji",
    role: "Creative Director, Invent India Innovations & Visiting Faculty, Nirma University",
    verified: true,
    quote: [
      "Devarsh is diligent, energetic, and a true solution seeker. I was blown away by his ability to apply his skills across a variety of assignments and projects, including the Smart Solar Panels Cleaner—a fantastic product with brilliant presentation. His determination and dedication are matched only by his human qualities. A delight to have in class.",
    ],
  },
  {
    id: "testi-pawan",
    photo: "testi-pawan",
    src: "uploads/pasted-1782531208711-0.png",
    name: "Pawan Tarachandani",
    role: "Project Manager, AllEvents Information Pvt. Ltd.",
    verified: true,
    quote: [
      "Devarsh is a highly talented and creative UX & Product designer who consistently delivered outstanding results. His ability to understand user needs and translate them into intuitive, visually appealing interfaces is truly impressive. He collaborates seamlessly with cross-functional teams and brings a genuine passion for learning to every project. I highly recommend him.",
    ],
  },
  {
    id: "testi-sangita",
    photo: "testi-sangita",
    src: "uploads/pasted-1782531508493-0.png",
    name: "Prof. Sangita Shroff",
    role: "Dean & Director, Institute of Design, Nirma University",
    verified: true,
    quote: [
      "Tinkering, making, prototyping, thinking with hands—this is Devarsh’s design methodology. He is intelligent, grounded, and hardworking, with a natural drive to build a contemporary design career. He approaches every problem with curiosity and determination, and I strongly recommend him for further growth and learning.",
    ],
  },
  {
    id: "testi-brian",
    photo: "testi-brian",
    src: "uploads/brian-sullivan-headshot.png",
    name: "Brian Sullivan, MBA, MA",
    role: "UX Research & Design Strategy Leader",
    verified: true,
    quote: [
      "Devarsh Patel is a strong UX person and future leader. You will want to follow him as he progresses in his career.",
      "His capstone project was well researched and designed. When it becomes available on his portfolio site, I highly recommend you look at Solie.",
    ],
  },
];

// iOS-style verified seal: blue scalloped badge with a white check.
function VerifiedBadge({ size = 17 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      className="shrink-0"
      aria-label="Verified"
      role="img"
    >
      <path
        fill="#3B9DF6"
        d="M12 1.2l2.42 1.83 3.02-.27 1.18 2.79 2.79 1.18-.27 3.02L23 12l-1.83 2.42.27 3.02-2.79 1.18-1.18 2.79-3.02-.27L12 22.8l-2.42-1.83-3.02.27-1.18-2.79-2.79-1.18.27-3.02L1 12l1.83-2.42-.27-3.02 2.79-1.18 1.18-2.79 3.02.27L12 1.2z"
      ></path>
      <path
        fill="none"
        stroke="#fff"
        strokeWidth="2.1"
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M8 12.3l2.7 2.7L16.4 9"
      ></path>
    </svg>
  );
}

// Shared component is loaded from both / (index.html) and /about/ — so
// relative "uploads/..." paths must be prefixed with "../" on sub-pages.
const TESTI_ASSET_PREFIX = /\/about\//.test(window.location.pathname) ? "../" : "";
function testiSrc(src) {
  if (!src || /^(https?:|data:|\/|\.\.\/)/.test(src)) return src;
  return TESTI_ASSET_PREFIX + src;
}

function TestimonialCard({ t }) {
  return (
    <div className="testi-card rounded-[28px] bg-surface/40 hover:bg-surface border border-stroke p-6 md:p-7 transition-colors duration-300">
      <div className="flex items-center gap-3.5 mb-4">
        <div className="relative shrink-0 w-12 h-12 rounded-full overflow-hidden border border-stroke">
          <image-slot
            id={t.photo}
            src={testiSrc(t.src)}
            shape="circle"
            fit="cover"
            placeholder="Photo"
            class="absolute inset-0"
          ></image-slot>
        </div>
        <div className="min-w-0">
          <div className="flex items-center gap-1.5">
            <span className="font-medium text-text-primary leading-tight truncate">{t.name}</span>
            {t.verified && <VerifiedBadge />}
          </div>
          <div className="text-sm text-muted leading-tight mt-0.5">{t.role}</div>
        </div>
      </div>
      <div className="space-y-3 text-[15px] leading-relaxed text-text-primary/85">
        {t.quote.map((p, i) => (
          <p key={i} className="whitespace-pre-line">{p}</p>
        ))}
      </div>
    </div>
  );
}

// A single floating column. `items` are rendered twice back-to-back so the
// translateY(-50%) loop is seamless; the second set is aria-hidden.
function TestiColumn({ items, direction, duration }) {
  return (
    <div className="testi-col relative overflow-hidden">
      <div
        className="testi-track flex flex-col gap-5"
        style={{ animation: `testi-${direction} ${duration}s linear infinite` }}
      >
        {items.map((t) => (
          <TestimonialCard key={t.id} t={t} />
        ))}
        {items.map((t) => (
          <div key={t.id + "-dup"} aria-hidden="true">
            <TestimonialCard t={t} />
          </div>
        ))}
      </div>
    </div>
  );
}

// Mobile: a single horizontal marquee drifting right → left. Cards get a fixed
// width + right margin (instead of flex gap) so the two back-to-back copies are
// an exact half-track and the translateX(-50%) loop is seamless.
function TestiRowMobile({ items, duration }) {
  const row = [...items, ...items];
  return (
    <div className="testi-hmask md:hidden overflow-hidden">
      <div
        className="testi-htrack flex w-max"
        style={{ animation: `testi-left ${duration}s linear infinite` }}
      >
        {row.map((t, i) => (
          <div
            key={t.id + "-" + i}
            className="shrink-0 w-[300px] mr-4 flex"
            aria-hidden={i >= items.length ? "true" : undefined}
          >
            <TestimonialCard t={t} />
          </div>
        ))}
      </div>
    </div>
  );
}

function Testimonials() {
  const ref = useRefTesti(null);

  useEffectTesti(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const els = ref.current.querySelectorAll(".reveal-up");
    const anims = [];
    els.forEach((el, i) => {
      anims.push(
        window.gsap.to(el, {
          opacity: 1, y: 0, duration: 0.8, ease: "power2.out", delay: i * 0.06,
          scrollTrigger: { trigger: el, start: "top 90%", once: true },
        })
      );
    });
    return () => anims.forEach((a) => a.scrollTrigger && a.scrollTrigger.kill());
  }, []);

  const colA = [TESTIMONIALS[0], TESTIMONIALS[1], TESTIMONIALS[4]];
  const colB = [TESTIMONIALS[2], TESTIMONIALS[3]];

  return (
    <section id="Testimonials" ref={ref} className="bg-bg py-16 md:py-24 overflow-hidden">
      <div className="max-w-content mx-auto px-6 md:px-10 lg:px-16">
        {/* Header: "What others say (6)" with a trailing rule */}
        <div className="reveal-up flex items-end gap-5 mb-12 md:mb-16">
          <h2
            className="tracking-tight text-text-primary leading-[1.05]"
            style={{ fontSize: "clamp(30px, 7.5vw, 48px)" }}
          >
            What others <span className="font-display italic" style={{ color: "rgb(80, 134, 191)" }}>say</span>
            <sup className="ml-2 text-base align-super text-muted" style={{ fontSize: "18px" }}>({TESTIMONIALS.length})</sup>
          </h2>
          <span className="flex-1 h-px bg-stroke mb-3"></span>
        </div>

        {/* Desktop: two vertical columns drifting in opposite directions */}
        <div className="testi-mask hidden md:grid grid-cols-2 gap-5 h-[720px]">
          <TestiColumn items={colA} direction="down" duration={44} />
          <TestiColumn items={colB} direction="up" duration={44} />
        </div>

        {/* Mobile: a single horizontal marquee drifting right → left */}
        <TestiRowMobile items={TESTIMONIALS} duration={42} />
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });