import React from 'react'
import { Nova40IconAnimated } from './Nova40Icon'
import useReveal from '../hooks/useReveal'

const quotes = [
  {
    text: "You don't need to be perfect. Just show up — one day at a time. That's the whole secret.",
    author: 'The Nova40 Philosophy',
  },
  {
    text: 'Every day you show up, you cast a vote for the person you want to become.',
    author: 'James Clear',
  },
  {
    text: "Your identity isn't fixed. In 40 days, you can rewrite the story of who you are.",
    author: 'Nova40',
  },
]

export default function Testimonial() {
  const ref = useReveal()

  return (
    <section className="py-20 sm:py-28 relative" ref={ref}>
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-px bg-gradient-to-r from-transparent via-nova-primary/30 to-transparent" />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12 reveal">
          <p className="text-nova-warning text-sm font-semibold tracking-widest uppercase mb-3">Philosophy</p>
          <h2 className="text-3xl sm:text-4xl font-bold">
            Words that{' '}
            <span className="text-nova-warning">ignite</span>
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {quotes.map((q, i) => (
            <div key={i} className={`reveal reveal-delay-${i + 1} glass-card p-8 relative overflow-hidden group hover:border-nova-primary/30 transition-all duration-500 hover:-translate-y-1`}>
              {/* Glow */}
              <div className="absolute -top-16 -right-16 w-32 h-32 bg-nova-primary/10 rounded-full blur-[50px] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

              <div className="relative">
                <div className="text-nova-primary/40 text-5xl font-serif leading-none mb-4">"</div>
                <blockquote className="text-white font-medium leading-relaxed mb-6 text-[15px]">
                  {q.text}
                </blockquote>
                <div className="flex items-center gap-3">
                  <div className="w-8 h-px bg-gradient-to-r from-nova-primary to-transparent" />
                  <p className="text-nova-textMuted text-xs font-medium">{q.author}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Center icon */}
        <div className="flex justify-center mt-12 reveal">
          <Nova40IconAnimated size={48} />
        </div>
      </div>
    </section>
  )
}
