Testimonials Section

"use client"

import { useState } from "react"
import { ChevronLeft, ChevronRight, Star } from 'lucide-react'

const testimonials = [
  {
    name: "Sarah Chen",
    role: "CTO at TechFlow",
    avatar: "/placeholder.svg",
    content: "This platform has completely transformed how our team builds products.",
    rating: 5,
  },
  // ... more testimonials
]

export function TestimonialsSection() {
  const [current, setCurrent] = useState(0)

  return (
    <section className="w-full bg-zinc-950 px-4 py-24">
      <div className="mx-auto max-w-4xl">
        <div className="overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-12">
          <div className="flex gap-1">
            {Array.from({ length: testimonials[current].rating }).map((_, i) => (
              <Star key={i} className="h-5 w-5 fill-yellow-400 text-yellow-400" />
            ))}
          </div>
          <blockquote className="mt-6 text-2xl text-white">
            "{testimonials[current].content}"
          </blockquote>
          <div className="mt-8 flex items-center gap-4">
            <img src={testimonials[current].avatar || "/placeholder.svg"} alt={String(testimonials[current].name)} className="h-12 w-12 rounded-full" />
            <div>
              <div className="font-semibold text-white">{testimonials[current].name}</div>
              <div className="text-sm text-zinc-400">{testimonials[current].role}</div>
            </div>
          </div>
        </div>
        {/* Navigation buttons */}
      </div>
    </section>
  )
}