"use client";

import { useRef } from "react";

type Testimonial = {
  quote: string;
  author: string;
};

const testimonials: Testimonial[] = [
  {
    quote:
      "I love the Coast app because I get to enjoy zero charges on the first 50 transfers every month. I also love the fact that my balance stays the same all through the month. When they said no hidden charges, they definitely meant that.",
    author: "Bankole Wole",
  },
  {
    quote:
      "I love the Coast app because I get to enjoy zero charges on the first 50 transfers every month. I also love the fact that my balance stays the same all through the month. When they said no hidden charges, they definitely meant that.",
    author: "Chioma Okafor",
  },
  {
    quote:
      "I love the Coast app because I get to enjoy zero charges on the first 50 transfers every month. I also love the fact that my balance stays the same all through the month. When they said no hidden charges, they definitely meant that.",
    author: "Tunde Adebayo",
  },
  {
    quote:
      "I love the Coast app because I get to enjoy zero charges on the first 50 transfers every month. I also love the fact that my balance stays the same all through the month. When they said no hidden charges, they definitely meant that.",
    author: "Amara Eze",
  },
];

function QuoteIcon() {
  return (
    <svg width="36" height="28" viewBox="0 0 36 28" fill="none" aria-hidden>
      <path
        d="M0 28V18.5C0 13.7333 0.866667 9.46667 2.6 5.7C4.4 1.9 7.13333 -0.0666666 10.8 0L13.6 4C11.0667 4.6 9.06667 5.93333 7.6 8C6.13333 10 5.46667 12.4 5.6 15.2H13.6V28H0ZM20.4 28V18.5C20.4 13.7333 21.2667 9.46667 23 5.7C24.8 1.9 27.5333 -0.0666666 31.2 0L34 4C31.4667 4.6 29.4667 5.93333 28 8C26.5333 10 25.8667 12.4 26 15.2H34V28H20.4Z"
        fill="#004D9F"
      />
    </svg>
  );
}

function ArrowButton({
  direction,
  onClick,
}: {
  direction: "left" | "right";
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={direction === "left" ? "Previous testimonials" : "Next testimonials"}
      className="flex h-12 w-12 items-center justify-center rounded-full bg-coast-navy text-white transition hover:bg-coast-navy-deep md:h-14 md:w-14"
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden>
        {direction === "left" ? (
          <path
            d="M15 6L9 12L15 18"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        ) : (
          <path
            d="M9 6L15 12L9 18"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        )}
      </svg>
    </button>
  );
}

export default function Testimonials() {
  const scrollerRef = useRef<HTMLDivElement>(null);

  const scrollByCard = (dir: "left" | "right") => {
    const el = scrollerRef.current;
    if (!el) return;
    const card = el.querySelector<HTMLElement>("[data-testimonial-card]");
    const step = card ? card.offsetWidth + 24 : el.clientWidth * 0.8;
    el.scrollBy({ left: dir === "left" ? -step : step, behavior: "smooth" });
  };

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-[#374EF9] via-[#374EF9] to-[#8BA4FF] text-white">
      <div className="mx-auto max-w-[1280px] px-5 py-16 md:px-10 md:py-14">
        <div className="flex flex-col gap-8 md:flex-row md:items-end md:justify-between">
          <h2 className="max-w-[720px] text-[28px] font-bold leading-tight md:text-[40px] lg:text-[44px]">
            Here&rsquo;s What Our Customers Are Saying about the Coast Experience
          </h2>
          <div className="flex items-center gap-3">
            <ArrowButton direction="left" onClick={() => scrollByCard("left")} />
            <ArrowButton direction="right" onClick={() => scrollByCard("right")} />
          </div>
        </div>

        <div
          ref={scrollerRef}
          className="mt-12 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
        >
          {testimonials.map((t, i) => (
            <article
              key={i}
              data-testimonial-card
              className="w-[88%] shrink-0 snap-start rounded-3xl bg-white p-7 text-coast-ink shadow-[0_20px_40px_-20px_rgba(2,16,58,0.4)] sm:w-[60%] md:w-[46%] lg:w-[31%] md:p-9"
            >
              <QuoteIcon />
              <p className="mt-5 text-[15px] leading-relaxed text-coast-ink/85 md:text-base">
                {t.quote}
              </p>
              <p className="mt-8 text-[15px] font-bold text-coast-ink md:text-base">
                {t.author}
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}