'use client'

import { Quote } from 'lucide-react'
import { SectionHeader } from './section-header'

const TESTIMONIALS = [
  {
    quote:
      'Nitish is one of the most thorough and patient instructors I have had. He broke down complex Laravel concepts into clear, practical lessons that I still use daily in my job.',
    name: 'Arun Shrestha',
    title: 'Backend Developer, Kathmandu',
    initials: 'AS',
  },
  {
    quote:
      'Working with Nitish on our eCommerce platform was a great experience. He delivered clean, maintainable code on time and proactively flagged potential issues before they became problems.',
    name: 'James O.',
    title: 'Product Owner, Lagos',
    initials: 'JO',
  },
  {
    quote:
      'Nitish mentored me through the MERN stack course and genuinely changed the trajectory of my career. I went from zero to landing my first developer job within six months of his training.',
    name: 'Priya Maharjan',
    title: 'Frontend Engineer, Lalitpur',
    initials: 'PM',
  },
  {
    quote:
      'Exceptional freelancer. He understood our travel platform requirements quickly and built features we did not even know we needed. Highly recommended for any web project.',
    name: 'Sarah K.',
    title: 'Co-founder, ClouTravel',
    initials: 'SK',
  },
]

export function Testimonials() {
  return (
    <section id="testimonials" className="py-24 px-6 max-w-5xl mx-auto">
      <SectionHeader label="Testimonials" />

      <div className="mt-4 mb-12">
        <h2 className="font-serif text-3xl font-semibold text-foreground text-balance">
          What people say
        </h2>
      </div>

      <div className="grid sm:grid-cols-2 gap-6">
        {TESTIMONIALS.map((t) => (
          <blockquote
            key={t.name}
            className="flex flex-col gap-5 bg-card border border-border rounded-xl p-6 hover:border-primary/30 transition-colors"
          >
            <Quote size={20} className="text-primary shrink-0" aria-hidden="true" />
            <p className="text-sm text-muted-foreground leading-relaxed flex-1 italic">
              &ldquo;{t.quote}&rdquo;
            </p>
            <footer className="flex items-center gap-3 pt-2 border-t border-border">
              <div
                className="flex items-center justify-center w-9 h-9 rounded-full bg-primary text-primary-foreground text-xs font-semibold shrink-0"
                aria-hidden="true"
              >
                {t.initials}
              </div>
              <div>
                <p className="text-sm font-medium text-foreground">{t.name}</p>
                <p className="text-xs text-muted-foreground">{t.title}</p>
              </div>
            </footer>
          </blockquote>
        ))}
      </div>
    </section>
  )
}
