import { Card, CardContent } from '@gib/ui';

import type { LandingTestimonialsContent } from './content';

interface TestimonialsProps {
  content: LandingTestimonialsContent;
}

export const Testimonials = ({ content }: TestimonialsProps) => (
  <section className='border-border/40 bg-muted/20 border-y'>
    <div className='container mx-auto px-4 py-24'>
      <div className='mx-auto max-w-6xl'>
        <div className='mb-16 text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl'>
            {content.heading}
          </h2>
          <p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
            {content.description}
          </p>
        </div>

        <div className='grid gap-6 lg:grid-cols-3'>
          {content.items.map((item) => (
            <Card
              key={`${item.name}-${item.company}`}
              className='border-border/50'
            >
              <CardContent className='flex h-full flex-col gap-6 p-6'>
                <div className='text-4xl'>{item.avatarEmoji}</div>
                <blockquote className='text-lg leading-8'>
                  &ldquo;{item.quote}&rdquo;
                </blockquote>
                <div className='mt-auto'>
                  <div className='font-semibold'>{item.name}</div>
                  <div className='text-muted-foreground text-sm'>
                    {item.role} at {item.company}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  </section>
);
