"use client";

import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { SectionHeading } from "@/components/shared/SectionHeading";

export function TestimonialsSection() {
  const testimonials = [
    {
      text: "Working with Aiero has been a game-changer for our business. Their AI solutions have revolutionized our operations, enabling us to automate repetitive tasks and make data-driven decisions. The level of efficiency we've achieved is unprecedented.",
      author: "David Smith",
      role: "CEO Company",
    },
    {
      text: "Aiero has been a game-changer for our business. Their AI solutions have revolutionized our operations, enabling us to automate repetitive tasks and make data-driven decisions. The level of efficiency we've achieved is unprecedented.",
      author: "Mark Dowson",
      role: "Manager",
    },
  ];

  return (
    <SectionContainer paddingY="lg" className="bg-aiero-card-dark">
      <PageContainer>
        <div className="mb-16">
          <SectionHeading
            tag="testimonials"
            title="Discover what our clients have to say about our AI solutions"
            titleClassName="text-white max-w-[650px]"
          />
        </div>

        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
          {testimonials.map((t, i) => (
            <div
              key={i}
              className="flex flex-col justify-between rounded-[25px] border border-aiero-card-border bg-[#1A1A1A] p-10 lg:p-12"
            >
              <div className="mb-8">
                <div className="mb-6 flex gap-1 text-aiero-teal">
                  {[...Array(5)].map((_, index) => (
                    <svg key={index} width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                  ))}
                </div>
                <p className="text-[18px] leading-[1.8] text-white">&quot;{t.text}&quot;</p>
              </div>
              <div className="flex items-center gap-4">
                <div className="h-[60px] w-[60px] overflow-hidden rounded-full bg-aiero-dark">
                  <img
                    src={`/images/aiero/client-${i + 1}.jpg`}
                    alt={t.author}
                    className="h-full w-full object-cover"
                    onError={(e) => {
                      (e.target as HTMLImageElement).src = "/images/aiero/home-9-img.png";
                    }}
                  />
                </div>
                <div>
                  <h5 className="text-[18px] font-bold text-white" style={{ fontFamily: "var(--font-dm-sans)" }}>
                    {t.author}
                  </h5>
                  <p className="text-[14px] text-aiero-teal">{t.role}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </SectionContainer>
  );
}