import React from "react";

const testimonials = [
  {
    quote:
      "Digitro revamped our entire website with speed, precision, and a modern touch. Our online conversions have noticeably increased.",
    name: "Isabella Martinez",
    title: "Head of Marketing",
    avatar:
      "https://images.unsplash.com/photo-1607746882042-944635dfe10e?auto=format&fit=crop&w=512&q=80",
    companyLogo:
      "https://images.unsplash.com/photo-1633410189542-36d96e3762b8?q=80&w=50",
    companyName: "Nimbus Corp",
  },
  {
    quote:
      "Digitro's SEO audits and keyword strategies pushed our blog traffic to all-time highs. We now rank top 3 for several competitive terms.",
    name: "David Johansson",
    title: "Content Lead",
    avatar:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=512&q=80",
    companyLogo:
      "https://images.unsplash.com/photo-1675348005313-bf4b58d8de68?auto=format&fit=crop&w=60&q=80",
    companyName: "NordicReach",
  },
  {
    quote:
      "The mobile app Digitro built for our team works seamlessly. From onboarding to post-launch support, their team was stellar.",
    name: "Emilia Rossi",
    title: "Product Strategist",
    avatar:
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=512&q=80",
    companyLogo:
      "https://images.unsplash.com/photo-1612810806546-ebbf22b53496?auto=format&fit=crop&w=60&q=80",
    companyName: "Cloudly Labs",
  },
  {
    quote:
      "Digitro helped scale our brand across social media. Their paid ad strategies are data-driven and impactful.",
    name: "Kenji Tanaka",
    title: "CEO & Founder",
    avatar:
      "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?auto=format&fit=crop&w=512&q=80",
    companyLogo:
      "https://images.unsplash.com/photo-1602934445884-da0fa1c9d3b3?w=600?q=80&w=50",
    companyName: "Zenith Ventures",
  },
];

export default function Testimonial() {
  return (
    <section className="bg-gray-50 py-16">
      <div className="container max-w-7xl mx-auto px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-blue-900">
            What Our Clients Say
          </h2>
          <p className="mt-3 text-lg text-gray-600">
            Honest feedback from businesses we've empowered
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {testimonials.map((t, idx) => (
            <div
              key={idx}
              className="bg-white rounded-lg shadow-lg p-6 flex flex-col lg:flex-row items-center lg:items-start text-center lg:text-left"
            >
              <img
                src={t.avatar}
                alt={t.name}
                className="w-32 h-32 lg:w-40 lg:h-40 object-cover rounded-full mb-4 lg:mb-0 lg:mr-6"
              />

              <div className="max-w-xl">
                <p className="text-base md:text-lg text-gray-800 leading-relaxed mb-4">
                  {t.quote}
                </p>
                <div className="text-sm text-gray-500 font-medium">
                  {t.name} <span className="text-gray-400">//</span> {t.title}
                </div>
                <div className="mt-2 inline-flex items-center gap-2 justify-center lg:justify-start">
                  <img
                    src={t.companyLogo}
                    alt={t.companyName}
                    className="w-6 h-6 object-contain"
                  />
                  <span className="text-gray-900 font-semibold">
                    {t.companyName}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
