"use client";
import { testimonials } from "@/data/testimonials";
import { cn } from "@/lib/utils";
import React from "react";
import Marquee from "react-fast-marquee";

export function Testimonials() {
  const first = testimonials.slice(0, 6);
  const second = testimonials.slice(6, 12);

  return (
    <section className="relative w-full py-24">
      <div className="max-w-7xl mx-auto px-4 md:px-6">
        {/* Section Header */}
        <div className="text-center mb-16 space-y-4">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-slate-900">
            Ils ont arrêté de surpayer.{" "}
            <span className="text-orange-700">Les chiffres.</span>
          </h2>
          <p className="text-slate-900 text-lg max-w-3xl mx-auto">
            Des <span className="font-bold">économies</span> certifiées, basées
            sur l&apos;ingénierie tarifaire.
          </p>
        </div>

        {/* Testimonials Grid with Marquee */}
        <div className="relative">
          <div className="h-full w-full overflow-hidden">
            <TestimonialsGrid first={first} second={second} />
          </div>
        </div>

        {/* Gradient fade at bottom */}
        <div className="absolute inset-x-0 bottom-0 h-40 w-full bg-linear-to-t from-white to-transparent pointer-events-none"></div>
      </div>
    </section>
  );
}

const TestimonialsGrid = ({
  first,
  second,
}: {
  first: typeof testimonials;
  second: typeof testimonials;
}) => {
  return (
    <div className="relative [mask-image:linear-gradient(to_right,transparent_0%,white_10%,white_90%,transparent_100%)]">
      <Marquee direction="right" pauseOnHover speed={50}>
        {first.map((testimonial, index) => (
          <Card key={`testimonial-${testimonial.id}-${index}`}>
            <Quote>{testimonial.quote}</Quote>

            {/* Financial Result - chiffre simple en gros orange */}
            <div className="mt-6">
              <span className="text-5xl font-bold text-orange-700">
                {testimonial.financialResult}
              </span>
            </div>

            {/* Technical Detail - si présent */}
            {testimonial.technicalDetail && (
              <p className="mt-2 text-xs text-slate-900 font-medium italic">
                {testimonial.technicalDetail}
              </p>
            )}

            <div className="mt-8 flex items-center gap-3">
              <div className="text-4xl">{testimonial.icon}</div>
              <div className="flex flex-col">
                <QuoteDescription className="text-slate-900 font-semibold">
                  {testimonial.name}
                </QuoteDescription>
                <QuoteDescription className="text-slate-900 font-medium">
                  {testimonial.designation}
                </QuoteDescription>
              </div>
            </div>
          </Card>
        ))}
      </Marquee>
      <Marquee className="mt-10" direction="right" pauseOnHover speed={70}>
        {second.map((testimonial, index) => (
          <Card key={`testimonial-${testimonial.id}-${index}`}>
            <Quote>{testimonial.quote}</Quote>

            {/* Financial Result - chiffre simple en gros orange */}
            <div className="mt-6">
              <span className="text-5xl font-bold text-orange-700">
                {testimonial.financialResult}
              </span>
            </div>

            {/* Technical Detail - si présent */}
            {testimonial.technicalDetail && (
              <p className="mt-2 text-xs text-slate-900 font-medium italic">
                {testimonial.technicalDetail}
              </p>
            )}

            <div className="mt-8 flex items-center gap-3">
              <div className="text-4xl">{testimonial.icon}</div>
              <div className="flex flex-col">
                <QuoteDescription className="text-slate-900 font-semibold">
                  {testimonial.name}
                </QuoteDescription>
                <QuoteDescription className="text-slate-900 font-medium">
                  {testimonial.designation}
                </QuoteDescription>
              </div>
            </div>
          </Card>
        ))}
      </Marquee>
    </div>
  );
};

const Card = ({
  className,
  children,
}: {
  className?: string;
  children: React.ReactNode;
}) => {
  return (
    <div
      className={cn(
        "group mx-4 h-full min-h-[280px] max-w-md rounded-xl bg-white border border-slate-200 p-6 shadow-lg shadow-slate-200/50 hover:shadow-xl hover:shadow-[#ea580c]/10 hover:border-[#ea580c]/30 transition-all duration-300 md:max-w-lg md:p-8",
        className
      )}
    >
      {children}
    </div>
  );
};

const Quote = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return (
    <h3
      className={cn(
        "py-2 text-sm font-semibold text-slate-900 leading-relaxed md:text-base",
        className
      )}
    >
      {children}
    </h3>
  );
};

const QuoteDescription = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return (
    <p className={cn("max-w-sm text-xs font-normal md:text-sm", className)}>
      {children}
    </p>
  );
};