import React from "react";
import { testimonials } from "../data/testimonials";

const TestimonialSlider: React.FC = () => {
  return (
    <section className="bg-slate-50">
      <div className="max-w-6xl mx-auto px-6 py-24 space-y-12">
        <div className="flex flex-col items-center gap-4 text-center">
          <span className="inline-flex items-center rounded-full border border-brand-200 bg-brand-50 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
            Loved by scaling teams
          </span>
          <h2 className="text-3xl md:text-4xl font-semibold text-slate-900 leading-tight max-w-2xl">
            Teams ship more content, capture more demand, and see faster ROI with Igny8.
          </h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {testimonials.map((testimonial) => (
            <div
              key={testimonial.name}
              className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-6 relative overflow-hidden shadow-sm hover:shadow-md transition"
            >
              <div className="absolute -top-16 left-1/2 -translate-x-1/2 h-32 w-[140%] rounded-[50%] bg-brand-100 blur-3xl pointer-events-none" />
              <p className="text-base text-slate-700 leading-relaxed relative z-10">
                "{testimonial.quote}"
              </p>
              <div className="flex flex-col text-sm text-slate-600 relative z-10">
                <span className="font-semibold text-slate-900">{testimonial.name}</span>
                <span>
                  {testimonial.title} · {testimonial.company}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TestimonialSlider;

