'use client';

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Quote } from 'lucide-react';
import { BRAND } from '@/lib/white-label/constants';

export function VsErpQuote() {
  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1 });

  return (
    <section className="py-20 px-6 bg-gradient-to-r from-brand-deep/10 via-brand-secondary/10 to-brand-deep/10" ref={ref}>
      <div className="max-w-4xl mx-auto">
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={inView ? { opacity: 1, scale: 1 } : {}}
          transition={{ duration: 0.6 }}
          className="glass-card p-10 text-center relative"
        >
          <Quote className="w-12 h-12 text-brand-deep/30 absolute top-6 left-6" />
          
          <blockquote className="text-2xl md:text-3xl font-medium text-white mb-8 leading-relaxed">
            &ldquo;ERPs were built on the assumption that AI is jagged&mdash;good at some things, terrible at others. 
            <span className="gradient-text">We proved that wrong.</span> 
            Put AI in the right harness and the work is smooth. All of it. The companies that win next will be the ones where every employee builds&mdash;and the machine handles the rest.&rdquo;
          </blockquote>
          
          <div className="flex items-center justify-center gap-4">
            <div className="w-12 h-12 rounded-full bg-gradient-to-r from-brand-deep to-brand-secondary-deep flex items-center justify-center text-white font-bold text-lg">
              GF
            </div>
            <div className="text-left">
              <p className="font-semibold text-white">{BRAND.companyName}</p>
              <p className="text-gray-400 text-sm">The Post-ERP Operations Platform</p>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
