"use client";

import { useMessages } from "@/components/LocaleProvider";
import { motion } from "framer-motion";
import { SectionLabel, AnimatedHeading } from "./Features";

export function Testimonials() {
  const messages = useMessages();
  const reviews = messages.testimonials.reviews;
  const marqueeItems = messages.testimonials.marquee;

  return (
    <section id="reviews" className="relative py-20 md:py-28">
      <div className="relative mx-auto max-w-7xl px-6">
        <div className="mb-12 max-w-3xl md:mb-16">
          <SectionLabel>{messages.testimonials.label}</SectionLabel>
          <AnimatedHeading>
            <span className="flex flex-col gap-2 md:gap-3">
              <span>{messages.testimonials.titleLine1}</span>
              <span className="text-muted-strong">
                {messages.testimonials.titleLine2}
              </span>
            </span>
          </AnimatedHeading>
        </div>

        <div className="columns-1 gap-5 md:columns-2 lg:columns-3">
          {reviews.map((r, i) => (
            <ReviewCard key={r.author} review={r} index={i} />
          ))}
        </div>
      </div>

      <Marquee items={marqueeItems} />
    </section>
  );
}

function ReviewCard({
  review,
  index,
}: {
  review: {
    quote: string;
    author: string;
    role: string;
    avatar: string;
    rating: number;
  };
  index: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{
        duration: 0.8,
        delay: (index % 3) * 0.1,
        ease: [0.22, 1, 0.36, 1],
      }}
      className="group mb-5 break-inside-avoid rounded-2xl border border-white/[0.06] bg-surface/40 p-7 backdrop-blur-sm transition-all duration-500 hover:border-white/15 hover:bg-surface/60"
      data-cursor-hover
    >
      <div className="mb-4 flex gap-0.5">
        {Array.from({ length: review.rating }).map((_, i) => (
          <svg
            key={i}
            viewBox="0 0 24 24"
            className="h-3.5 w-3.5 fill-accent-bright"
            aria-hidden
          >
            <path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.5L6 22l1.5-7.2L2 10l7.1-1.1L12 2z" />
          </svg>
        ))}
      </div>

      <p className="mb-6 text-sm leading-relaxed text-foreground/90 md:text-[15px]">
        &ldquo;{review.quote}&rdquo;
      </p>

      <div className="flex items-center gap-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-gradient-to-br from-accent/30 to-accent-deep/30 text-sm font-medium">
          {review.avatar}
        </div>
        <div>
          <div className="text-sm font-medium">{review.author}</div>
          <div className="text-xs text-muted">{review.role}</div>
        </div>
      </div>
    </motion.div>
  );
}

function Marquee({ items }: { items: string[] }) {
  const loop = [...items, ...items, ...items, ...items];

  return (
    <div
      aria-hidden
      className="pointer-events-none mt-16 overflow-hidden border-y border-white/5 py-6"
    >
      <div className="flex gap-10 whitespace-nowrap will-change-transform [animation:marquee_6s_linear_infinite]">
        {loop.map((txt, i) => (
          <div
            key={i}
            className="flex items-center gap-10 text-3xl font-light tracking-tight text-muted md:text-5xl"
          >
            <span>{txt}</span>
            <span className="inline-block h-1.5 w-1.5 rounded-full bg-accent" />
          </div>
        ))}
      </div>
      <style jsx>{`
        @keyframes marquee {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(-25%);
          }
        }
      `}</style>
    </div>
  );
}