import { Star } from 'lucide-react';

export default function TestimonialSection() {
  return (
    <section className="py-16 lg:py-32">
      <div className="mx-auto w-full max-w-2xl px-4 sm:px-6 lg:max-w-7xl">
        <div className="bg-muted/50 relative rounded-2xl">
          <div className="p-8 sm:p-12 lg:w-8/12 lg:p-18">
            <div className="inline-flex gap-2 sm:gap-3 [&>svg]:size-4 [&>svg]:fill-amber-400 [&>svg]:text-amber-400 sm:[&>svg]:size-5">
              {[1, 2, 3, 4, 5].map((i) => (
                <Star key={i} />
              ))}
            </div>
            <h2 className="mt-4 text-lg/7 font-medium tracking-tight sm:text-2xl/snug lg:text-3xl/snug">Blookie has revolutionized my workflow. The design blocks are a game changer for building clean and professional designs.</h2>
            <div className="[&>div>p:nth-child(2)]:text-muted-foreground mt-8 inline-flex w-auto gap-4 text-left [&>div]:text-sm/5.5 [&>div>p:first-child]:font-medium [&>img]:size-10 [&>img]:rounded-full [&>img]:object-cover [&>img]:lg:absolute [&>img]:lg:inset-y-0 [&>img]:lg:right-0 [&>img]:lg:h-full [&>img]:lg:w-4/12 [&>img]:lg:rounded-none [&>img]:lg:rounded-r-2xl">
              <img src="https://images.pexels.com/photos/1520760/pexels-photo-1520760.jpeg?auto=compress&cs=tinysrgb&w=640" alt="" />
              <div>
                <p>Sienna Hewitt</p>
                <p>Frontend Developer</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}