'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { ArrowRight, CheckCircle, Zap, FileText, Clock, DollarSign, Brain, Shield, Sparkles, Loader2 } from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';

const BENEFITS = [
  { icon: Clock, title: 'Minutes, Not Weeks', desc: 'Traditional discovery takes 2-6 weeks. Our AI scopes your project in under 10 minutes.' },
  { icon: DollarSign, title: '$197, Not $15,000', desc: 'Consultancies charge $5K-$15K for discovery. You get deeper technical insight for a fraction.' },
  { icon: Brain, title: 'AI-Powered Depth', desc: 'The Hearth\'s code generation engine understands architecture, not just requirements.' },
  { icon: FileText, title: 'Branded PDF Deliverable', desc: 'A professional scope document with entities, workflows, diagrams, and cost estimates.' },
  { icon: Shield, title: 'Actionable, Not Vague', desc: 'No 90-page SOW nobody reads. You get a clean, buildable blueprint.' },
  { icon: Zap, title: 'Ready to Build', desc: 'Hand it to any dev team and they can start building immediately. No interpretation needed.' },
];

const WHAT_YOU_GET = [
  'Complete data model with entities, fields, and relationships',
  'Architecture diagrams (ERD, user flows, sitemaps) — auto-generated',
  'Complexity scoring and risk assessment',
  'Time and cost estimates based on real engineering benchmarks',
  'Target stack recommendations (language, framework, database)',
  'Acceptance criteria and QA checklist',
  'Professional branded PDF — ready to hand to investors or dev teams',
];

const PROCESS_STEPS = [
  { step: '01', title: 'Purchase', desc: 'Click below. Secure checkout via Stripe. $197 one-time — no subscriptions, no upsells.' },
  { step: '02', title: 'Describe Your Project', desc: 'Fill out our guided intake form. Plain English is fine — our AI understands context.' },
  { step: '03', title: 'AI Does the Work', desc: 'The Hearth\'s agents decompose your idea into entities, workflows, and architecture.' },
  { step: '04', title: 'Get Your Scope', desc: 'Download your branded PDF scope document. Delivered to your email within minutes.' },
];

export default function AIProjectScopePage() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleCheckout = async () => {
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/services/ai-scope/checkout', { method: 'POST' });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Failed to create checkout session');
      if (data.sessionUrl) {
        window.location.href = data.sessionUrl;
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong');
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-[#0C1222]">
      <Header />
      <main className="pt-24">
        {/* Hero */}
        <section className="relative overflow-hidden px-4 py-20 md:py-28">
          <div className="absolute inset-0 hero-gradient opacity-50" />
          <div className="relative max-w-5xl mx-auto text-center">
            <motion.div initial={{ opacity: 1 }} animate={{ opacity: 1 }}>
              <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-brand-deep/20 border border-brand-deep/30 text-brand-deep text-sm font-medium mb-6">
                <Sparkles className="w-4 h-4" /> AI-Powered Project Scoping
              </span>
              <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
                Get a Professional Project Scope<br />
                <span className="gradient-text">In Minutes, Not Months</span>
              </h1>
              <p className="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-8">
                Our AI code generation engine analyzes your project idea and delivers a complete
                technical scope document — data models, architecture diagrams, cost estimates,
                and a buildable blueprint. All for <strong className="text-white">$197</strong>.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button
                  onClick={handleCheckout}
                  disabled={loading}
                  className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-brand-deep hover:bg-brand-deep/80 disabled:opacity-50 text-white rounded-xl font-semibold text-lg transition-all shadow-lg shadow-brand-deep/25"
                >
                  {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : <Zap className="w-5 h-5" />}
                  {loading ? 'Redirecting to Checkout...' : 'Get Your AI Scope — $197'}
                </button>
                <Link
                  href="#how-it-works"
                  className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-slate-600 text-gray-300 hover:text-white hover:border-slate-400 rounded-xl font-medium text-lg transition-all"
                >
                  See How It Works <ArrowRight className="w-5 h-5" />
                </Link>
              </div>
              {error && <p className="mt-4 text-red-400 text-sm">{error}</p>}
              <p className="mt-4 text-gray-500 text-sm">Secure payment via Stripe · One-time purchase · No subscription</p>
            </motion.div>
          </div>
        </section>

        {/* Benefits Grid */}
        <section className="px-4 py-16 md:py-20">
          <div className="max-w-6xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold text-white text-center mb-4">Why AI Scoping Beats Traditional Discovery</h2>
            <p className="text-gray-400 text-center max-w-2xl mx-auto mb-12">Traditional consultancies send junior analysts with clipboards. We send an AI engine that understands software architecture.</p>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {BENEFITS.map((b, i) => (
                <div key={i} className="glass-card p-6 rounded-xl">
                  <b.icon className="w-8 h-8 text-brand-deep mb-3" />
                  <h3 className="text-lg font-semibold text-white mb-2">{b.title}</h3>
                  <p className="text-gray-400 text-sm leading-relaxed">{b.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* What You Get */}
        <section className="px-4 py-16 md:py-20 bg-slate-900/50">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold text-white text-center mb-4">What You Get</h2>
            <p className="text-gray-400 text-center max-w-2xl mx-auto mb-12">A complete, professional scope document that any development team can build from.</p>
            <div className="space-y-4">
              {WHAT_YOU_GET.map((item, i) => (
                <div key={i} className="flex items-start gap-3 p-4 glass-card rounded-lg">
                  <CheckCircle className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" />
                  <span className="text-gray-200">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* How It Works */}
        <section id="how-it-works" className="px-4 py-16 md:py-20">
          <div className="max-w-5xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold text-white text-center mb-4">How It Works</h2>
            <p className="text-gray-400 text-center max-w-2xl mx-auto mb-12">Four steps. Under 10 minutes. Professional results.</p>
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              {PROCESS_STEPS.map((s, i) => (
                <div key={i} className="relative">
                  <div className="glass-card p-6 rounded-xl h-full">
                    <span className="text-5xl font-black text-brand-deep/20">{s.step}</span>
                    <h3 className="text-lg font-semibold text-white mt-2 mb-2">{s.title}</h3>
                    <p className="text-gray-400 text-sm leading-relaxed">{s.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Comparison */}
        <section className="px-4 py-16 md:py-20 bg-slate-900/50">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl md:text-4xl font-bold text-white text-center mb-12">The Math Speaks for Itself</h2>
            <div className="grid md:grid-cols-2 gap-8">
              <div className="glass-card p-8 rounded-xl border-red-500/20">
                <h3 className="text-xl font-bold text-red-400 mb-4">Traditional Consultancy</h3>
                <ul className="space-y-3 text-gray-400">
                  <li className="flex items-start gap-2"><span className="text-red-400 mt-1">✕</span> $5,000 — $15,000</li>
                  <li className="flex items-start gap-2"><span className="text-red-400 mt-1">✕</span> 2-6 weeks turnaround</li>
                  <li className="flex items-start gap-2"><span className="text-red-400 mt-1">✕</span> Junior analysts with templates</li>
                  <li className="flex items-start gap-2"><span className="text-red-400 mt-1">✕</span> 90-page SOW nobody reads</li>
                  <li className="flex items-start gap-2"><span className="text-red-400 mt-1">✕</span> Requires follow-up meetings</li>
                </ul>
              </div>
              <div className="glass-card p-8 rounded-xl border-brand-deep/30 ring-1 ring-brand-deep/20">
                <h3 className="text-xl font-bold text-brand-deep mb-4">AI Project Scoping — $197</h3>
                <ul className="space-y-3 text-gray-300">
                  <li className="flex items-start gap-2"><CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" /> One-time $197 payment</li>
                  <li className="flex items-start gap-2"><CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" /> Delivered in minutes</li>
                  <li className="flex items-start gap-2"><CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" /> AI that understands architecture</li>
                  <li className="flex items-start gap-2"><CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" /> Clean, actionable PDF</li>
                  <li className="flex items-start gap-2"><CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" /> Ready to hand to any dev team</li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="px-4 py-20 md:py-28">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Ready to Scope Your Project?</h2>
            <p className="text-gray-400 text-lg mb-8">
              Stop guessing. Stop paying consultants to guess for you. Get a real, AI-powered technical scope document for $197.
            </p>
            <button
              onClick={handleCheckout}
              disabled={loading}
              className="inline-flex items-center justify-center gap-2 px-10 py-5 bg-brand-deep hover:bg-brand-deep/80 disabled:opacity-50 text-white rounded-xl font-semibold text-xl transition-all shadow-lg shadow-brand-deep/25"
            >
              {loading ? <Loader2 className="w-6 h-6 animate-spin" /> : <Zap className="w-6 h-6" />}
              {loading ? 'Redirecting...' : 'Get Your AI Scope — $197'}
            </button>
            <p className="mt-4 text-gray-500 text-sm">Powered by The Hearth · Foundry Familiars</p>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
