'use client';

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Rocket, Building2, TrendingUp, Users, Shield, Cog } from 'lucide-react';

const audiences = [
  {
    icon: Rocket,
    title: 'VC-Backed Startups',
    subtitle: '20\u2013200 employees, scaling fast',
    description: 'You raised capital to build product\u2014not to hire ops headcount. Familiars absorb the CRUD across every department so your entire team stays focused on the work that actually drives growth.',
    benefits: ['Ship faster without adding ops hires', 'Investors see lean, scalable operations', 'Go from connected to live in under 2 weeks'],
    color: 'cyan',
  },
  {
    icon: Building2,
    title: 'Mature SMBs',
    subtitle: 'Complex compliance, lean teams',
    description: 'Your team is already stretched thin. Your Familiars give them back the hours lost to manual reconciliation, reporting, and audit prep\u2014with full transparency baked in.',
    benefits: ['Audit-ready from day one', 'No new tools for your team to learn', 'Sniff-check any decision, override in one click'],
    color: 'purple',
  },
];

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

  return (
    <section className="py-24 relative" ref={ref}>
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-brand-deep/5 to-transparent" />
      
      <div className="max-w-[1200px] mx-auto px-6 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          className="text-center mb-16"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Is This <span className="gradient-text">You</span>?
          </h2>
          <p className="text-gray-400 max-w-2xl mx-auto">
            If your team spends more time on data entry than on building your product, your Familiars were made for you.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-8">
          {audiences.map((audience, index) => (
            <motion.div
              key={audience.title}
              initial={{ opacity: 0, y: 30 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: index * 0.2 }}
              className="glass-card rounded-2xl p-8 hover:border-white/20 transition-all group"
            >
              <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${audience.color === 'cyan' ? 'from-brand-deep/30 to-brand-deep/10' : 'from-brand-secondary/30 to-brand-secondary/10'} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
                <audience.icon className={`w-8 h-8 ${audience.color === 'cyan' ? 'text-brand' : 'text-brand-secondary-light'}`} />
              </div>
              
              <div className="mb-4">
                <h3 className="text-2xl font-bold text-white">{audience.title}</h3>
                <p className={`text-sm ${audience.color === 'cyan' ? 'text-brand' : 'text-brand-secondary-light'}`}>{audience.subtitle}</p>
              </div>
              
              <p className="text-gray-400 mb-6">{audience.description}</p>
              
              <ul className="space-y-2">
                {audience.benefits.map((benefit) => (
                  <li key={benefit} className="flex items-center gap-3 text-gray-300">
                    <div className={`w-1.5 h-1.5 rounded-full ${audience.color === 'cyan' ? 'bg-brand' : 'bg-brand-secondary-light'}`} />
                    {benefit}
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
