import ScrollReveal from "./ScrollReveal";
import { Quote } from "lucide-react";

export default function Testimonial() {
  return (
    <section className="py-24 md:py-32 bg-surface relative overflow-hidden">
      {/* Radial glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-accent/[0.04] rounded-full blur-[100px]" />

      {/* Subtle background texture */}
      <div className="absolute inset-0 opacity-[0.03]">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.4) 1px, transparent 0)`,
            backgroundSize: "40px 40px",
          }}
        />
      </div>

      <div className="relative z-10 max-w-4xl mx-auto px-6">
        <ScrollReveal>
          <div className="text-center">
            <Quote
              size={36}
              className="text-accent/30 mx-auto mb-8"
              strokeWidth={1}
            />
            <blockquote className="text-xl md:text-2xl lg:text-3xl font-light text-white/85 leading-relaxed mb-10">
              &ldquo;The best broadcast infrastructure is invisible to the people who use it every day.
              It just works&mdash;reliably, intuitively, and at scale. That&apos;s what I design for.&rdquo;
            </blockquote>
            <div className="flex items-center justify-center gap-4">
              <div className="w-10 h-px bg-accent/40 glow-accent-sm" />
              <div>
                <p className="text-sm font-medium text-white">Zachary Gaetano</p>
                <p className="text-xs text-white/45">Principal Systems Designer</p>
              </div>
              <div className="w-10 h-px bg-accent/40 glow-accent-sm" />
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
}