'use client';

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Bot, Brain, Shield, FileText, Sparkles, Zap, Eye, RefreshCw } from 'lucide-react';
import { useBrand } from '@/components/providers/brand-provider';

function useFeatures() {
  const { brand, t } = useBrand();
  return [
    {
      icon: Bot,
      title: t('Your Team Builds. The {secondaryName} Grinds.'),
      description: t('{agents} absorb the CRUD across Finance, Help Desk, Email, and Strategy so every employee spends their day on the product and the customer\u2014not copy-pasting between spreadsheets.'),
      color: 'cyan',
      gradient: 'from-brand-deep/20 to-brand-deep/5',
    },
    {
      icon: Brain,
      title: 'It Adapts. You Don\u2019t Retrain.',
      description: t('Change a policy, shift a workflow, update your tone\u2014{secondaryName} maps it automatically. Zero retraining sessions. Zero downtime. It just evolves with you.'),
      color: 'purple',
      gradient: 'from-brand-secondary/20 to-brand-secondary/5',
    },
    {
      icon: Shield,
      title: 'Full Audit Trail. Zero Extra Work.',
      description: 'Every AI decision is explainable, every action logged. Your team becomes the sniff-checkers\u2014one glance to confirm correctness, one click to override\u2014without adding a single step to their workflow.',
      color: 'cyan',
      gradient: 'from-brand-deep/20 to-brand-deep/5',
    },
    {
      icon: FileText,
      title: 'Weekly Intel, Delivered.',
      description: 'Every Monday, stakeholders get an automated brief blending market intel, operations health, and proactive fixes. No one has to pull a report again.',
      color: 'purple',
      gradient: 'from-brand-secondary/20 to-brand-secondary/5',
    },
  ];
}

export default function FeaturesSection() {
  const { brand, t } = useBrand();
  const features = useFeatures();
  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-secondary/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 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            The Outcome: <span className="gradient-text">A Team That Only Does What Matters</span>
          </h2>
          <p className="text-gray-400 max-w-2xl mx-auto">
            {t(brand.marketing.featuresSubheadline)}
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-6">
          {features.map((feature, index) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 30 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="group relative"
            >
              <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500`} />
              <div className="relative glass-card rounded-2xl p-8 h-full hover:border-white/20 transition-all duration-300">
                <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${feature.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`}>
                  <feature.icon className={`w-7 h-7 ${feature.color === 'cyan' ? 'text-brand' : 'text-brand-secondary-light'}`} />
                </div>
                <h3 className="text-xl font-semibold text-white mb-3">{feature.title}</h3>
                <p className="text-gray-400 leading-relaxed">{feature.description}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
