'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import {
  Factory, Check, Zap, Users, Building2, ArrowRight,
  Sparkles, Shield, Code, Rocket, MessageSquare
} from 'lucide-react';
import { BRAND, VOCAB } from '@/lib/white-label/constants';

export default function DarkFactoryPricing() {
  const plans = [
    {
      name: 'Starter',
      price: 'Free',
      period: '',
      description: `Perfect for trying out ${VOCAB.factory}`,
      features: [
        '50 generations per month',
        'Basic code generation',
        'Community support',
        '1 project',
        'API access',
      ],
      cta: 'Get Started Free',
      ctaLink: '/dark-factory/signup',
      highlighted: false,
    },
    {
      name: 'Pro',
      price: '$49',
      period: '/month',
      description: 'For individual developers and small teams',
      features: [
        '500 generations per month',
        'Advanced code generation',
        'Code sandbox & preview',
        'One-click deployment',
        '10 projects',
        'Priority support',
        'Custom patterns',
      ],
      cta: 'Start Pro Trial',
      ctaLink: '/dark-factory/signup?plan=pro',
      highlighted: true,
    },
    {
      name: 'Team',
      price: '$199',
      period: '/month',
      description: 'For growing teams that ship fast',
      features: [
        '2,000 generations per month',
        'Everything in Pro',
        '20 team members',
        'Team workspaces',
        'Shared patterns library',
        'Advanced analytics',
        'Webhook integrations',
      ],
      cta: 'Start Team Trial',
      ctaLink: '/dark-factory/signup?plan=team',
      highlighted: false,
    },
    {
      name: 'Enterprise',
      price: 'Custom',
      period: '',
      description: 'For organizations with advanced needs',
      features: [
        'Unlimited generations',
        'Everything in Team',
        'Unlimited team members',
        'SSO / SAML',
        'Custom SLA',
        'On-premise deployment',
        'White-label option',
        'Dedicated support',
      ],
      cta: 'Contact Sales',
      ctaLink: 'mailto:sales@ghostfoundry.ai',
      highlighted: false,
    },
  ];

  const faqs = [
    {
      q: 'What counts as a generation?',
      a: `One generation is a single request to the ${VOCAB.factory} API, regardless of how many files it produces. A complex request that generates 10 files counts as one generation.`,
    },
    {
      q: 'Can I change plans later?',
      a: 'Yes, you can upgrade or downgrade at any time. Changes take effect at the start of your next billing cycle.',
    },
    {
      q: 'Do unused generations roll over?',
      a: 'No, generation limits reset at the start of each billing month. We recommend choosing a plan that fits your regular usage.',
    },
    {
      q: 'Is there a free trial for paid plans?',
      a: 'Yes, Pro and Team plans come with a 14-day free trial. No credit card required to start.',
    },
  ];

  return (
    <div className="min-h-screen bg-brand-bg">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-brand-bg/90 backdrop-blur-lg border-b border-white/5">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <Link href="/dark-factory" className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-deep to-brand-secondary-deep flex items-center justify-center">
                <Factory className="w-6 h-6 text-white" />
              </div>
              <span className="text-xl font-bold text-white">{VOCAB.factory}</span>
            </Link>
            
            <div className="flex items-center gap-4">
              <Link href="/dark-factory/docs" className="text-gray-400 hover:text-white transition-colors">
                Docs
              </Link>
              <Link
                href="/dark-factory/login"
                className="text-gray-300 hover:text-white transition-colors"
              >
                Sign In
              </Link>
              <Link
                href="/dark-factory/signup"
                className="px-5 py-2 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-lg text-white font-medium hover:opacity-90 transition-opacity"
              >
                Get Started
              </Link>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-16">
        {/* Hero */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-16"
        >
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
            Simple, Transparent Pricing
          </h1>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
            Start free, scale as you grow. No hidden fees, no surprises.
          </p>
        </motion.div>

        {/* Pricing Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
          {plans.map((plan, i) => (
            <motion.div
              key={plan.name}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className={`glass-card p-6 rounded-2xl border ${
                plan.highlighted
                  ? 'border-brand-deep/50 bg-gradient-to-b from-brand-deep/10 to-transparent'
                  : 'border-white/5'
              } relative`}
            >
              {plan.highlighted && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-full text-xs font-medium text-white">
                  Most Popular
                </div>
              )}
              
              <h3 className="text-xl font-bold text-white mb-2">{plan.name}</h3>
              <div className="mb-4">
                <span className="text-4xl font-bold text-white">{plan.price}</span>
                <span className="text-gray-400">{plan.period}</span>
              </div>
              <p className="text-gray-400 text-sm mb-6">{plan.description}</p>
              
              <ul className="space-y-3 mb-8">
                {plan.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-2 text-sm">
                    <Check className="w-4 h-4 text-brand mt-0.5 flex-shrink-0" />
                    <span className="text-gray-300">{feature}</span>
                  </li>
                ))}
              </ul>
              
              <Link
                href={plan.ctaLink}
                className={`block w-full text-center py-3 rounded-lg font-medium transition-colors ${
                  plan.highlighted
                    ? 'bg-gradient-to-r from-brand-deep to-brand-secondary-deep text-white hover:opacity-90'
                    : 'bg-white/5 border border-white/10 text-white hover:bg-white/10'
                }`}
              >
                {plan.cta}
              </Link>
            </motion.div>
          ))}
        </div>

        {/* Feature Comparison */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mb-20"
        >
          <h2 className="text-3xl font-bold text-white text-center mb-12">What&apos;s Included</h2>
          
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: Code,
                title: 'Full-Stack Generation',
                description: 'APIs, components, models, types, and tests—all from one prompt',
              },
              {
                icon: Sparkles,
                title: 'Pattern Learning',
                description: `${VOCAB.factory} learns your codebase conventions and applies them`,
              },
              {
                icon: Shield,
                title: 'Auto Validation',
                description: 'Every generation is type-checked, linted, and tested automatically',
              },
              {
                icon: Rocket,
                title: 'One-Click Deploy',
                description: 'Deploy to preview or production directly from the interface',
              },
              {
                icon: Users,
                title: 'Team Collaboration',
                description: 'Share projects, patterns, and workspaces with your team',
              },
              {
                icon: MessageSquare,
                title: 'Priority Support',
                description: 'Get help when you need it from our engineering team',
              },
            ].map((feature, i) => (
              <div key={i} className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-brand-deep/10 flex items-center justify-center flex-shrink-0">
                  <feature.icon className="w-5 h-5 text-brand" />
                </div>
                <div>
                  <h3 className="text-white font-semibold mb-1">{feature.title}</h3>
                  <p className="text-gray-400 text-sm">{feature.description}</p>
                </div>
              </div>
            ))}
          </div>
        </motion.div>

        {/* FAQs */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mb-20"
        >
          <h2 className="text-3xl font-bold text-white text-center mb-12">Frequently Asked Questions</h2>
          
          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {faqs.map((faq, i) => (
              <div key={i} className="glass-card p-6 rounded-xl border border-white/5">
                <h3 className="text-white font-semibold mb-2">{faq.q}</h3>
                <p className="text-gray-400 text-sm">{faq.a}</p>
              </div>
            ))}
          </div>
        </motion.div>

        {/* CTA */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="glass-card p-12 rounded-3xl border border-white/10 text-center relative overflow-hidden"
        >
          <div className="absolute inset-0 bg-gradient-to-r from-brand-deep/10 via-brand-secondary/10 to-brand-deep/10" />
          
          <div className="relative z-10">
            <h2 className="text-3xl font-bold text-white mb-4">
              Ready to Ship Faster?
            </h2>
            <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
              Join thousands of developers using {VOCAB.factory} to multiply their output.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link
                href="/dark-factory/signup"
                className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-xl text-white font-semibold text-lg hover:opacity-90 transition-opacity"
              >
                Start Free <ArrowRight className="w-5 h-5" />
              </Link>
              <Link
                href="mailto:sales@ghostfoundry.ai"
                className="inline-flex items-center gap-2 px-8 py-4 bg-white/5 border border-white/10 rounded-xl text-white font-semibold text-lg hover:bg-white/10 transition-colors"
              >
                Talk to Sales
              </Link>
            </div>
          </div>
        </motion.div>
      </main>

      {/* Footer */}
      <footer className="py-12 px-6 border-t border-white/5">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-deep to-brand-secondary-deep flex items-center justify-center">
                <Factory className="w-4 h-4 text-white" />
              </div>
              <span className="text-white font-semibold">{VOCAB.factory}</span>
              <span className="text-gray-500">|</span>
              <span className="text-gray-400 text-sm">Part of {BRAND.companyName}</span>
            </div>
            
            <div className="text-sm text-gray-500">
              © 2026 {BRAND.companyName}. All rights reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
