'use client';

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import Link from 'next/link';
import {
  Shield, Crown, Check, Sparkles, Bot, Brain, Factory,
  Building2, Eye, Zap, Lock, Users, ArrowRight
} from 'lucide-react';
import { VOCAB } from '@/lib/white-label/constants';

const tiers = [
  {
    name: 'Standard',
    subtitle: 'The Invisible Hand',
    price: 'Contact Us',
    description: 'Connect your tools, and the grind disappears. Your team gets their time back without changing how they work.',
    icon: <Shield className="w-8 h-8" />,
    color: 'cyan',
    features: [
      { text: 'Clean ERP Interface', icon: <Building2 className="w-4 h-4" /> },
      { text: 'Autonomous Learning', icon: <Brain className="w-4 h-4" /> },
      { text: 'Pattern Detection', icon: <Eye className="w-4 h-4" /> },
      { text: 'Anomaly Alerts', icon: <Sparkles className="w-4 h-4" /> },
      { text: 'Sniff-Check Approvals', icon: <Check className="w-4 h-4" /> },
      { text: 'Enterprise Security', icon: <Lock className="w-4 h-4" /> },
    ],
    cta: 'Get Started',
    ctaHref: '#design-partner',
  },
  {
    name: 'Enterprise',
    subtitle: 'GOD MODE',
    price: 'Custom',
    description: 'Everything in Standard, plus you command the entire platform. Build custom agents, modify core systems, create standalone apps.',
    icon: <Crown className="w-8 h-8" />,
    color: 'amber',
    featured: true,
    features: [
      { text: 'Everything in Standard', icon: <Check className="w-4 h-4" /> },
      { text: `Full ${VOCAB.factory} Access`, icon: <Factory className="w-4 h-4" /> },
      { text: 'System Evolution Dashboard', icon: <Sparkles className="w-4 h-4" /> },
      { text: 'Create Custom Micro-Apps', icon: <Zap className="w-4 h-4" /> },
      { text: 'Modify GFS Core Systems', icon: <Bot className="w-4 h-4" /> },
      { text: 'API & Integration Builder', icon: <Building2 className="w-4 h-4" /> },
      { text: 'Dedicated Success Manager', icon: <Users className="w-4 h-4" /> },
      { text: 'Custom Agent Development', icon: <Brain className="w-4 h-4" /> },
    ],
    cta: 'Contact Sales',
    ctaHref: '#design-partner',
  },
];

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

  return (
    <section ref={ref} className="py-24 px-4 relative overflow-hidden">
      {/* Background Effects */}
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-brand-secondary/5 to-transparent" />
      
      <div className="max-w-6xl mx-auto 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-4xl md:text-5xl font-bold gradient-text mb-6">
            One Investment. Every Employee Unlocked.
          </h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            Standard gives your team the time back. Enterprise gives you <span className="text-amber-400">total control</span> over the machine.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {tiers.map((tier, index) => (
            <motion.div
              key={tier.name}
              initial={{ opacity: 0, y: 30 }}
              animate={inView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: index * 0.2 }}
              className={`relative glass-card p-8 border ${
                tier.featured
                  ? 'border-amber-500/50 bg-gradient-to-b from-amber-500/10 to-transparent'
                  : 'border-brand-deep/30'
              }`}
            >
              {tier.featured && (
                <div className="absolute -top-4 left-1/2 -translate-x-1/2">
                  <span className="px-4 py-1 bg-gradient-to-r from-amber-500 to-brand-secondary text-black text-sm font-bold rounded-full">
                    RECOMMENDED
                  </span>
                </div>
              )}

              <div className="flex items-center gap-4 mb-6">
                <div className={`p-3 rounded-xl ${
                  tier.color === 'amber' ? 'bg-amber-500/20 text-amber-400' : 'bg-brand-deep/20 text-brand'
                }`}>
                  {tier.icon}
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-white">{tier.name}</h3>
                  <p className={`text-sm ${
                    tier.color === 'amber' ? 'text-amber-400' : 'text-brand'
                  }`}>{tier.subtitle}</p>
                </div>
              </div>

              <p className="text-gray-400 mb-6">{tier.description}</p>

              <div className="mb-8">
                <span className="text-3xl font-bold text-white">{tier.price}</span>
              </div>

              <ul className="space-y-3 mb-8">
                {tier.features.map((feature, i) => (
                  <li key={i} className="flex items-center gap-3">
                    <div className={`${
                      tier.color === 'amber' ? 'text-amber-400' : 'text-brand'
                    }`}>
                      {feature.icon}
                    </div>
                    <span className="text-gray-300">{feature.text}</span>
                  </li>
                ))}
              </ul>

              <Link
                href={tier.ctaHref}
                className={`w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${
                  tier.featured
                    ? 'bg-gradient-to-r from-amber-500 to-brand-secondary text-black hover:from-amber-400 hover:to-brand-secondary-light'
                    : 'bg-brand-deep/20 text-brand border border-brand-deep/50 hover:bg-brand-deep/30'
                }`}
              >
                {tier.cta}
                <ArrowRight className="w-4 h-4" />
              </Link>
            </motion.div>
          ))}
        </div>

        {/* God Mode Teaser */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={inView ? { opacity: 1 } : {}}
          transition={{ delay: 0.8 }}
          className="mt-16 text-center"
        >
          <div className="inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-brand-secondary/10 to-amber-500/10 rounded-full border border-brand-secondary/30">
            <Crown className="w-5 h-5 text-amber-400" />
            <span className="text-gray-300">
              <span className="text-amber-400 font-semibold">GOD MODE</span> unlocks the full {VOCAB.factory}—build new modules, modify GFS, create standalone apps
            </span>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
