import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  PhoneCall,
  Bot,
  Database,
  Zap,
  ShieldCheck,
  Globe,
  CheckCircle,
  ArrowRight,
  Menu,
  X,
  Calendar,
  ChevronDown,
  Lock,
  Sparkles,
  Headphones,
  Building2,
  CheckCircle2,
  Clock,
} from 'lucide-react';

const DASHBOARD_URL =
  import.meta.env.VITE_DASHBOARD_URL ||
  (typeof window !== 'undefined' &&
  window.location.hostname !== 'localhost' &&
  window.location.hostname !== '127.0.0.1'
    ? window.location.origin
    : 'http://localhost:5174');

export const ChurchillLogo = ({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) => {
  const boxClass =
    size === 'lg' ? 'w-12 h-12' : size === 'sm' ? 'w-9 h-9' : 'w-10 h-10';
  const svgClass =
    size === 'lg' ? 'w-7 h-7' : size === 'sm' ? 'w-5 h-5' : 'w-6 h-6';

  return (
    <div className="flex items-center gap-3">
      <div
        className={`${boxClass} rounded-xl bg-gradient-to-br from-indigo-600 via-indigo-500 to-purple-600 flex items-center justify-center shadow-md shadow-indigo-500/20 border border-indigo-400/30 shrink-0`}
      >
        <svg viewBox="0 0 64 64" fill="none" className={`${svgClass} text-white`}>
          <path
            d="M32 8L52 17V31C52 44.5 43.4 55.6 32 59C20.6 55.6 12 44.5 12 31V17L32 8Z"
            fill="currentColor"
            fillOpacity="0.22"
            stroke="currentColor"
            strokeWidth="3.5"
          />
          <path
            d="M22 31V35M27 24V42M32 17V49M37 24V42M42 29V37"
            stroke="currentColor"
            strokeWidth="4"
            strokeLinecap="round"
          />
        </svg>
      </div>
      <div>
        <span className="text-xl font-extrabold tracking-tight text-slate-900 block leading-none">
          Churchill <span className="text-indigo-600">AI</span>
        </span>
        <span className="text-[10px] uppercase tracking-widest text-indigo-600 font-bold block mt-0.5">
          Autonomous Voice Cloud
        </span>
      </div>
    </div>
  );
};

const Nav = ({ onOpenDemo }: { onOpenDemo: () => void }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <header>
      <nav
        aria-label="Primary Navigation"
        className="fixed top-0 w-full z-50 border-b border-slate-200 px-6 py-4 backdrop-blur-xl bg-white/90 shadow-xs"
      >
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <a href="#" aria-label="Churchill AI Home" className="hover:opacity-95 transition-opacity">
            <ChurchillLogo />
          </a>

        <div className="hidden lg:flex items-center gap-7 text-sm font-semibold text-slate-600">
          <a href="#how-it-works" className="hover:text-indigo-600 transition-colors">
            How It Works
          </a>
          <a href="#features" className="hover:text-indigo-600 transition-colors">
            Platform
          </a>
          <a href="#industries" className="hover:text-indigo-600 transition-colors">
            Industries
          </a>
          <a href="#integrations" className="hover:text-indigo-600 transition-colors">
            Integrations
          </a>
          <a href="#pricing" className="hover:text-indigo-600 transition-colors">
            Pricing
          </a>
          <a href="#faq" className="hover:text-indigo-600 transition-colors">
            FAQ
          </a>
        </div>

        <div className="hidden md:flex items-center gap-3">
          <button
            onClick={onOpenDemo}
            className="text-sm font-semibold text-slate-700 hover:text-indigo-600 px-3.5 py-2 rounded-xl hover:bg-slate-100 transition-colors"
          >
            Book a Demo
          </button>
          <a
            href={`${DASHBOARD_URL}/login`}
            className="text-sm font-semibold text-slate-700 hover:text-indigo-600 px-3.5 py-2 transition-colors"
          >
            Sign In
          </a>
          <a
            href={`${DASHBOARD_URL}/login`}
            className="bg-indigo-600 hover:bg-indigo-500 text-white px-5 py-2.5 rounded-xl font-semibold text-sm transition-all shadow-md shadow-indigo-600/20 flex items-center gap-2"
          >
            Start Free Trial <ArrowRight className="w-4 h-4" />
          </a>
        </div>

        <button
          aria-label="Toggle navigation menu"
          aria-expanded={isOpen}
          className="lg:hidden text-slate-800"
          onClick={() => setIsOpen(!isOpen)}
        >
          {isOpen ? <X /> : <Menu />}
        </button>
      </div>

      {isOpen && (
        <div className="lg:hidden mt-4 pt-4 border-t border-slate-200 flex flex-col gap-4 text-slate-700 font-medium">
          <a href="#how-it-works" onClick={() => setIsOpen(false)}>
            How It Works
          </a>
          <a href="#features" onClick={() => setIsOpen(false)}>
            Platform
          </a>
          <a href="#industries" onClick={() => setIsOpen(false)}>
            Industries
          </a>
          <a href="#integrations" onClick={() => setIsOpen(false)}>
            Integrations
          </a>
          <a href="#pricing" onClick={() => setIsOpen(false)}>
            Pricing
          </a>
          <a href="#faq" onClick={() => setIsOpen(false)}>
            FAQ
          </a>
          <div className="flex flex-col gap-2 pt-2 border-t border-slate-200">
            <button
              onClick={() => {
                setIsOpen(false);
                onOpenDemo();
              }}
              className="w-full py-2.5 rounded-xl bg-slate-100 text-slate-800 font-semibold text-sm"
            >
              Book a Demo
            </button>
            <a
              href={`${DASHBOARD_URL}/login`}
              className="bg-indigo-600 text-white px-5 py-2.5 rounded-xl font-semibold text-center text-sm"
            >
              Start 14-Day Free Trial
            </a>
          </div>
        </div>
      )}
      </nav>
    </header>
  );
};

const Hero = ({ onOpenDemo }: { onOpenDemo: () => void }) => (
  <section className="relative pt-32 pb-20 lg:pt-40 lg:pb-28 overflow-hidden bg-gradient-to-b from-indigo-50/70 via-white to-slate-50">
    <div className="absolute top-16 left-1/2 -translate-x-1/2 w-[900px] h-[420px] bg-indigo-400/15 blur-[130px] rounded-full pointer-events-none" />
    <div className="max-w-7xl mx-auto px-6 relative z-10">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
        {/* Left Column */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="lg:col-span-7 text-center lg:text-left"
        >
          <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold bg-indigo-50 text-indigo-700 border border-indigo-200 mb-6 shadow-2xs">
            <Sparkles className="w-3.5 h-3.5 text-indigo-600" /> Churchill AI 2.0 &bull; Enter Website URL &rarr; Live AI Receptionist in 3 Mins
          </span>
          <h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6 leading-[1.08] text-slate-900">
            Your 24/7 Autonomous{' '}
            <span className="gradient-text">AI Phone Receptionist</span> That Books, Qualifies &amp; Resolves.
          </h1>
          <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
            Churchill AI answers every inbound call in under 650ms with natural voice interruption,
            books appointments directly into your calendar, answers complex questions from your
            PDF knowledge base, and transfers urgent calls to your team.
          </p>

          <div className="flex flex-col sm:flex-row justify-center lg:justify-start items-center gap-4">
            <a
              href={`${DASHBOARD_URL}/login`}
              className="w-full sm:w-auto px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl font-bold text-base transition-all shadow-lg shadow-indigo-600/25 flex items-center justify-center gap-3"
            >
              Generate Your AI Agent Free <ArrowRight className="w-5 h-5" />
            </a>
            <button
              onClick={onOpenDemo}
              className="w-full sm:w-auto px-8 py-4 bg-white hover:bg-slate-50 text-slate-800 rounded-2xl font-bold text-base transition-all border border-slate-200 shadow-sm flex items-center justify-center gap-2"
            >
              <Headphones className="w-5 h-5 text-indigo-600" />
              Book Live Executive Demo
            </button>
          </div>

          <div className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-4 pt-8 border-t border-slate-200 text-left">
            <div>
              <p className="text-2xl font-extrabold text-slate-900">&lt; 650ms</p>
              <p className="text-xs text-slate-500 font-medium mt-0.5">Voice-to-Voice Latency</p>
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-900">99.98%</p>
              <p className="text-xs text-slate-500 font-medium mt-0.5">Dual-TTS Uptime SLA</p>
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-900">3 Mins</p>
              <p className="text-xs text-slate-500 font-medium mt-0.5">URL-to-Agent Setup</p>
            </div>
            <div>
              <p className="text-2xl font-extrabold text-emerald-600">100%</p>
              <p className="text-xs text-slate-500 font-medium mt-0.5">GDPR &amp; EU AI Act Ready</p>
            </div>
          </div>
        </motion.div>

        {/* Right Column: Interactive Live Call & AI Summary Card */}
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.7, delay: 0.15 }}
          className="lg:col-span-5"
        >
          <div className="bg-white rounded-3xl p-6 border border-slate-200 shadow-xl relative overflow-hidden">
            <div className="flex items-center justify-between pb-4 mb-5 border-b border-slate-100">
              <div className="flex items-center gap-3">
                <div className="w-3 h-3 rounded-full bg-emerald-500 animate-pulse" />
                <div>
                  <p className="text-xs font-bold text-slate-900 uppercase tracking-wider">
                    Churchill AI Live Call Stream
                  </p>
                  <p className="text-[11px] text-slate-500">
                    Apex Dental &amp; Implant Center &bull; +1 (800) 555-0199
                  </p>
                </div>
              </div>
              <span className="px-2.5 py-1 rounded-full text-[10px] font-bold bg-indigo-50 text-indigo-700 border border-indigo-200">
                Nova-3 + Turbo v2.5
              </span>
            </div>

            {/* Simulated Live Dialogue */}
            <div className="space-y-3.5 text-xs">
              <div className="p-3.5 rounded-2xl bg-slate-50 border border-slate-200 text-slate-700">
                <span className="text-[10px] font-bold uppercase tracking-wider text-indigo-600 block mb-1">
                  Churchill AI Receptionist (Clara)
                </span>
                &ldquo;Thank you for calling Apex Dental Clinic! I&rsquo;m Clara, our AI
                receptionist. How can I help you today?&rdquo;
              </div>

              <div className="p-3.5 rounded-2xl bg-indigo-600 text-white ml-6 shadow-sm">
                <span className="text-[10px] font-bold uppercase tracking-wider text-indigo-100 block mb-1">
                  Caller (+1 415-890-2211)
                </span>
                &ldquo;Hi Clara, do you accept Bupa dental insurance, and do you have an opening
                tomorrow morning for a checkup?&rdquo;
              </div>

              <div className="p-3.5 rounded-2xl bg-slate-50 border border-slate-200 text-slate-700">
                <div className="flex items-center justify-between mb-1">
                  <span className="text-[10px] font-bold uppercase tracking-wider text-indigo-600">
                    Churchill AI Receptionist (Clara)
                  </span>
                  <span className="text-[10px] text-emerald-600 font-bold">
                    ✓ RAG Policy Verified &bull; Calendar Checked
                  </span>
                </div>
                &ldquo;Yes, we accept Bupa, AXA, and Vitality insurance! I have 10:00 AM or 11:30
                AM available tomorrow with Dr. Carter. Would you like me to book 10:00 AM for
                you?&rdquo;
              </div>
            </div>

            {/* Real-time Action Pills */}
            <div className="mt-5 pt-4 border-t border-slate-100 grid grid-cols-2 gap-2.5 text-[11px]">
              <div className="p-2.5 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-700 flex items-center gap-2 font-semibold">
                <CheckCircle2 className="w-4 h-4 shrink-0 text-emerald-600" />
                Appointment Booked
              </div>
              <div className="p-2.5 rounded-xl bg-indigo-50 border border-indigo-200 text-indigo-700 flex items-center gap-2 font-semibold">
                <Sparkles className="w-4 h-4 shrink-0 text-indigo-600" />
                HubSpot Lead Synced
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  </section>
);

const HowItWorks = () => {
  const steps = [
    {
      step: '01',
      title: 'Enter Website URL or Pick an Industry Playbook',
      desc: 'Paste your website URL. Churchill AI safely crawls your site and automatically drafts your greeting, system persona, and FAQs in under 30 seconds.',
      icon: Globe,
    },
    {
      step: '02',
      title: 'Upload RAG Docs & Test in Browser Simulator',
      desc: 'Drop in PDF price lists or policies for zero-hallucination Vector RAG, then speak to your agent right in your browser before connecting a phone line.',
      icon: Bot,
    },
    {
      step: '03',
      title: 'Forward Your Number (*72 / SIP) & Go Live 24/7',
      desc: 'Provision a dedicated number or forward your existing business line. Every call produces a full transcript, AI summary, outcome tag, and CRM webhook.',
      icon: PhoneCall,
    },
  ];

  return (
    <section id="how-it-works" className="py-20 bg-white border-y border-slate-200">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center max-w-3xl mx-auto mb-14">
          <span className="text-xs font-bold uppercase tracking-widest text-indigo-600">
            3-Minute Deployment
          </span>
          <h2 className="text-3xl lg:text-5xl font-extrabold text-slate-900 mt-2 mb-4">
            How Churchill AI Works
          </h2>
          <p className="text-slate-600">
            No flowcharts or complex prompt engineering required. Go from website URL to a live
            autonomous phone receptionist in three steps.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {steps.map((s) => {
            const Icon = s.icon;
            return (
              <div
                key={s.step}
                className="bg-slate-50/80 p-8 rounded-3xl border border-slate-200 relative overflow-hidden group hover:border-indigo-400 hover:bg-white hover:shadow-lg transition-all"
              >
                <div className="flex items-center justify-between mb-6">
                  <div className="w-12 h-12 rounded-2xl bg-indigo-50 border border-indigo-200 flex items-center justify-center text-indigo-600">
                    <Icon className="w-6 h-6" />
                  </div>
                  <span className="text-3xl font-black text-slate-200 group-hover:text-indigo-200 transition-colors">
                    {s.step}
                  </span>
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-3">{s.title}</h3>
                <p className="text-sm text-slate-600 leading-relaxed">{s.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const Features = () => {
  const features = [
    {
      icon: <Zap className="w-6 h-6 text-indigo-600" />,
      title: 'Sub-Second Voice & Barge-In',
      desc: 'Powered by Deepgram Nova-3 VAD and ElevenLabs Turbo v2.5 with automatic Deepgram Aura failover. Callers can interrupt naturally at any moment.',
    },
    {
      icon: <Database className="w-6 h-6 text-indigo-600" />,
      title: 'Hybrid Vector + Keyword RAG',
      desc: 'Upload PDFs, fee schedules, or SOPs. Churchill AI retrieves exact facts during the live call using OpenAI embeddings and cosine + keyword scoring.',
    },
    {
      icon: <Calendar className="w-6 h-6 text-indigo-600" />,
      title: 'In-Call Appointment Booking',
      desc: 'Checks real-time slot availability, prevents double-bookings, records customer details, and generates Google & Outlook calendar invites.',
    },
    {
      icon: <PhoneCall className="w-6 h-6 text-indigo-600" />,
      title: 'Multi-Department Warm Transfer',
      desc: 'Escalates urgent or high-value callers to Sales, Support, Billing, or Emergency human lines via live Twilio warm/cold call routing.',
    },
    {
      icon: <Bot className="w-6 h-6 text-indigo-600" />,
      title: 'Post-Call AI Summary & Tags',
      desc: 'Every call is automatically summarized, scored for caller sentiment, and tagged (Appointment Booked, Lead Qualified, FAQ Resolved, Escalated).',
    },
    {
      icon: <ShieldCheck className="w-6 h-6 text-indigo-600" />,
      title: 'Enterprise RBAC & GDPR Center',
      desc: 'Multi-tenant isolation, 4-tier RBAC, SSRF guard, immutable AuditLog, 1-click GDPR Art. 20 JSON Data Export, and Art. 17 Right-to-Erasure.',
    },
  ];

  return (
    <section id="features" className="py-24 relative bg-slate-50">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <span className="text-xs font-bold uppercase tracking-widest text-indigo-600">
            Enterprise Voice Architecture
          </span>
          <h2 className="text-3xl lg:text-5xl font-extrabold text-slate-900 mt-2 mb-4">
            Built for Mission-Critical Call Resolution
          </h2>
          <p className="text-slate-600">
            Everything your organization needs to automate inbound reception, lead qualification,
            and scheduling at scale.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((f, i) => (
            <motion.div
              key={i}
              whileHover={{ y: -4 }}
              className="bg-white p-8 rounded-3xl border border-slate-200 shadow-xs hover:shadow-md hover:border-indigo-300 transition-all"
            >
              <div className="w-12 h-12 bg-indigo-50 rounded-2xl flex items-center justify-center mb-6 border border-indigo-100">
                {f.icon}
              </div>
              <h3 className="text-xl font-bold mb-3 text-slate-900">{f.title}</h3>
              <p className="text-slate-600 leading-relaxed text-sm">{f.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Industries = () => {
  const verticals = [
    {
      title: 'Medical & Dental Practices',
      badge: 'Healthcare & Clinics',
      greeting: '“Thank you for calling Apex Dental. Would you like to book a checkup or speak with triage?”',
      desc: 'Triage urgent symptoms, book patient checkups, answer insurance coverage FAQs, and route emergencies to on-call clinicians.',
      bullets: ['24/7 Patient Scheduling', 'Insurance & Fee FAQ Lookup', 'Emergency Warm Transfer'],
    },
    {
      title: 'Legal, Tax & Accounting Firms',
      badge: 'Professional Services',
      greeting: '“Welcome to Churchill Tax & Legal Advisory. Are you calling regarding a new consultation?”',
      desc: 'Perform structured client intake, conflict checks, and consultation booking while keeping your partners focused on billable work.',
      bullets: ['Structured Case & Tax Intake', 'Partner Calendar Sync', 'Instant Post-Call Briefs'],
    },
    {
      title: 'HVAC, Plumbing & Home Trades',
      badge: 'Field Services',
      greeting: '“Thanks for calling Metro HVAC. Do you have an urgent heating/cooling outage or need a quote?”',
      desc: 'Capture every high-ticket dispatch call while your technicians are on-site. Filter emergencies and book service windows.',
      bullets: ['Emergency Dispatch Escalation', 'Service Area Verification', 'Instant SMS/Email Lead Alerts'],
    },
    {
      title: 'Real Estate & Property Management',
      badge: 'Real Estate',
      greeting: '“Hello! Calling about a property listing, a viewing appointment, or a tenant maintenance request?”',
      desc: 'Qualify buyer and renter inquiries 24/7, schedule property viewings, and triage urgent tenant maintenance requests.',
      bullets: ['Property Viewing Bookings', 'Buyer Pre-Qualification', 'Tenant Maintenance Triage'],
    },
    {
      title: 'E-Commerce & Retail Support',
      badge: 'Commerce',
      greeting: '“Welcome to Customer Care! I can help with order status, returns, or product availability.”',
      desc: 'Resolve return policies, warranty claims, and store hours instantly using your Vector RAG product catalog.',
      bullets: ['Return & Warranty RAG', 'VIP Escalation Routing', 'Multilingual Support'],
    },
    {
      title: 'Automotive & Service Centers',
      badge: 'Automotive',
      greeting: '“Thanks for calling Premier Auto Service. Would you like to schedule an inspection or test drive?”',
      desc: 'Book service bay appointments, test drives, and recall inspections automatically without putting callers on hold.',
      bullets: ['Service Bay Scheduling', 'Test Drive Bookings', 'Status Callback Logging'],
    },
  ];

  return (
    <section id="industries" className="py-24 bg-white border-y border-slate-200">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <span className="text-xs font-bold uppercase tracking-widest text-indigo-600">
            6 Pre-Built Industry Playbooks
          </span>
          <h2 className="text-3xl lg:text-5xl font-extrabold text-slate-900 mt-2 mb-4">
            Tailored for Your Industry Out of the Box
          </h2>
          <p className="text-slate-600">
            Launch in one click with domain-trained prompts, objection handling, and escalation
            rules built for your sector.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {verticals.map((v, i) => (
            <div
              key={i}
              className="bg-slate-50/70 p-7 rounded-3xl border border-slate-200 flex flex-col justify-between hover:bg-white hover:shadow-lg hover:border-indigo-300 transition-all"
            >
              <div>
                <span className="inline-block text-xs font-bold text-indigo-700 bg-indigo-50 border border-indigo-200 px-3 py-1 rounded-full mb-4">
                  {v.badge}
                </span>
                <h3 className="text-xl font-bold mb-2 text-slate-900">{v.title}</h3>
                <p className="text-xs italic text-indigo-900 bg-indigo-50/60 p-3 rounded-xl border border-indigo-100 mb-4">
                  {v.greeting}
                </p>
                <p className="text-slate-600 text-sm mb-5 leading-relaxed">{v.desc}</p>
              </div>
              <div>
                <ul className="space-y-2 border-t border-slate-200 pt-4 mb-5">
                  {v.bullets.map((b, idx) => (
                    <li key={idx} className="flex items-center gap-2 text-xs text-slate-700 font-medium">
                      <CheckCircle className="w-4 h-4 text-emerald-600 shrink-0" />
                      {b}
                    </li>
                  ))}
                </ul>
                <a
                  href={`${DASHBOARD_URL}/company-registration`}
                  className="w-full py-2.5 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-xs font-semibold text-white flex items-center justify-center gap-2 transition-colors shadow-xs"
                >
                  Deploy {v.badge} Template <ArrowRight className="w-3.5 h-3.5" />
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const IntegrationsSection = () => {
  const integrations = [
    { name: 'Google Calendar', category: 'Real-Time Booking & .ics Invites' },
    { name: 'Microsoft Outlook 365', category: 'Calendar & Exchange Sync' },
    { name: 'HubSpot CRM', category: 'Contacts, Deals & Call Notes' },
    { name: 'Salesforce & Zoho', category: 'Enterprise CRM Sync' },
    { name: 'Zapier / Make Webhooks', category: '5,000+ App Automations' },
    { name: 'Twilio & BYO SIP Trunk', category: 'PSTN & *72 Call Forwarding' },
  ];

  return (
    <section id="integrations" className="py-24 bg-slate-50">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <span className="text-xs font-bold uppercase tracking-widest text-indigo-600">
            Connected Ecosystem
          </span>
          <h2 className="text-3xl lg:text-5xl font-extrabold text-slate-900 mt-2 mb-4">
            Plugs Directly Into Your Existing Stack
          </h2>
          <p className="text-slate-600">
            Bring your own phone number via simple call forwarding (*72 / GSM) or provision a
            dedicated number, and push every call summary and appointment straight to your CRM.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {integrations.map((item, i) => (
            <a
              key={i}
              href={`${DASHBOARD_URL}/crm`}
              className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex items-center justify-between hover:border-indigo-400 hover:shadow-md transition-all"
            >
              <div>
                <h4 className="font-bold text-slate-900 text-lg">{item.name}</h4>
                <p className="text-xs text-slate-500 mt-1">{item.category}</p>
              </div>
              <span className="px-3 py-1 rounded-full text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">
                Native
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

const Pricing = () => {
  const [annual, setAnnual] = useState(true);

  const plans = [
    {
      name: '14-Day Free Trial',
      price: '$0',
      period: '/14 days',
      desc: 'Test Churchill AI with your website URL and browser simulator.',
      features: [
        '60 AI Voice Minutes included',
        '1-Click Website-to-Agent Generator',
        'Browser Voice & Text Simulator',
        'In-Call Appointment Booking',
      ],
      cta: 'Start Free Trial',
      popular: false,
    },
    {
      name: 'Solo Reception',
      price: annual ? '$79' : '$99',
      period: '/month',
      desc: 'Ideal for clinics, law offices, and solo businesses.',
      features: [
        '1,000 AI Voice Minutes / mo ($0.15/min overage)',
        'Up to 2 AI Agents & Phone Lines',
        '2 Team Workspace Seats',
        '24/7 Inbound Handling & Calendar Sync',
        'Post-Call AI Summaries & Email Delivery',
      ],
      cta: 'Choose Solo Plan',
      popular: false,
    },
    {
      name: 'Team Growth',
      price: annual ? '$239' : '$299',
      period: '/month',
      desc: 'For growing multi-department teams with CRM & transfer workflows.',
      features: [
        '3,600 AI Voice Minutes / mo ($0.15/min overage)',
        'Up to 10 AI Agents & Phone Lines',
        '10 Team Workspace Seats with RBAC',
        'Multi-Department Warm/Cold Call Transfer',
        'CRM Webhooks (HubSpot, Salesforce, Zapier)',
        'Vector RAG PDF & Policy Knowledge Base',
      ],
      cta: 'Start Team Growth',
      popular: true,
    },
    {
      name: 'Enterprise Scale',
      price: annual ? '$479' : '$599',
      period: '/month',
      desc: 'High-volume call centers & multi-location enterprises.',
      features: [
        '7,500 AI Voice Minutes / mo ($0.12/min overage)',
        'Unlimited AI Agents & Workspace Seats',
        'Dual-Engine TTS Auto-Failover SLA',
        'Full GDPR Art. 20 Export & Art. 17 Erasure',
        'Immutable Security Audit Logs',
      ],
      cta: 'Deploy Enterprise Scale',
      popular: false,
    },
  ];

  return (
    <section id="pricing" className="py-24 bg-white border-t border-slate-200">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center max-w-3xl mx-auto mb-12">
          <span className="text-xs font-bold uppercase tracking-widest text-indigo-600">
            Transparent SaaS + Usage Pricing
          </span>
          <h2 className="text-3xl lg:text-5xl font-extrabold text-slate-900 mt-2 mb-4">
            Predictable Plans That Scale With Your Call Volume
          </h2>
          <p className="text-slate-600 mb-8">
            Start with a 14-day free trial. Upgrade or switch plans anytime in your Billing Center.
          </p>

          {/* Monthly / Annual Toggle */}
          <div className="inline-flex items-center gap-2 p-1.5 rounded-2xl bg-slate-100 border border-slate-200">
            <button
              type="button"
              onClick={() => setAnnual(false)}
              className={`px-4 py-2 rounded-xl text-xs font-bold transition-all ${
                !annual ? 'bg-indigo-600 text-white shadow-xs' : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Monthly Billing
            </button>
            <button
              type="button"
              onClick={() => setAnnual(true)}
              className={`px-4 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-2 ${
                annual ? 'bg-indigo-600 text-white shadow-xs' : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Annual Billing
              <span className="px-2 py-0.5 rounded-full text-[10px] bg-emerald-100 text-emerald-800 border border-emerald-300">
                Save 20%
              </span>
            </button>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-stretch">
          {plans.map((p, i) => (
            <div
              key={i}
              className={`p-7 rounded-3xl border flex flex-col justify-between transition-all ${
                p.popular
                  ? 'border-indigo-600 ring-2 ring-indigo-600/15 relative bg-indigo-50/40 shadow-lg'
                  : 'border-slate-200 bg-white shadow-xs'
              }`}
            >
              {p.popular && (
                <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-[11px] font-bold px-3.5 py-1 rounded-full shadow-sm">
                  Most Popular
                </span>
              )}
              <div>
                <h3 className="text-xl font-bold mb-2 text-slate-900">{p.name}</h3>
                <p className="text-slate-600 text-xs mb-5 min-h-[32px]">{p.desc}</p>
                <div className="mb-6">
                  <span className="text-4xl font-extrabold text-slate-900">{p.price}</span>
                  <span className="text-slate-500 text-xs font-medium">{p.period}</span>
                </div>
                <ul className="space-y-3 mb-8">
                  {p.features.map((f, j) => (
                    <li key={j} className="flex items-start gap-2.5 text-slate-700 text-xs font-medium">
                      <CheckCircle className="w-4 h-4 text-indigo-600 shrink-0 mt-0.5" />
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <a
                href={`${DASHBOARD_URL}/login`}
                className={`block w-full py-3.5 rounded-xl font-bold text-center text-xs transition-all ${
                  p.popular
                    ? 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-md shadow-indigo-600/20'
                    : 'bg-slate-900 hover:bg-slate-800 text-white'
                }`}
              >
                {p.cta}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FaqSection = () => {
  const [openIdx, setOpenIdx] = useState<number | null>(0);
  const faqs = [
    {
      q: 'How fast can I set up my Churchill AI phone agent?',
      a: 'Under 3 minutes. Simply enter your business website URL in the onboarding wizard or choose one of our 6 industry templates. Churchill AI automatically drafts your welcome greeting, system prompt, and initial FAQs, which you can test immediately in the browser voice simulator.',
    },
    {
      q: 'Can I keep my existing business phone number?',
      a: 'Yes! You can either provision a dedicated number inside Churchill AI or use standard call forwarding (*72 or conditional busy/no-answer forwarding) from your existing landline, mobile, or VoIP PBX directly to your Churchill AI receptionist.',
    },
    {
      q: 'What happens if a caller interrupts the AI mid-sentence?',
      a: 'Our streaming voice pipeline uses Deepgram Nova-3 Voice Activity Detection (VAD) to detect speech onset in under 100ms, immediately clearing the outbound audio buffer so the conversation feels completely natural.',
    },
    {
      q: 'How is our data protected for GDPR and the EU AI Act?',
      a: 'We enforce strict multi-tenant data isolation, configurable call recording consent announcements, automatic PII redaction in logs, immutable security audit trails, 1-click GDPR Article 20 JSON data portability export, and Article 17 right-to-erasure.',
    },
  ];

  return (
    <section id="faq" className="py-24 bg-slate-50 border-t border-slate-200">
      <div className="max-w-4xl mx-auto px-6">
        <div className="text-center mb-14">
          <span className="text-xs font-bold uppercase tracking-widest text-indigo-600">
            Questions &amp; Answers
          </span>
          <h2 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mt-2 mb-3">
            Frequently Asked Questions
          </h2>
          <p className="text-slate-600 text-sm">
            Everything you need to know about deploying Churchill AI in your organization.
          </p>
        </div>
        <div className="space-y-4">
          {faqs.map((item, idx) => (
            <div key={idx} className="bg-white rounded-2xl border border-slate-200 shadow-2xs overflow-hidden">
              <button
                onClick={() => setOpenIdx(openIdx === idx ? null : idx)}
                className="w-full px-6 py-5 text-left flex items-center justify-between font-bold text-slate-900 hover:bg-slate-50 transition-colors"
              >
                <span>{item.q}</span>
                <ChevronDown
                  className={`w-5 h-5 text-slate-500 transition-transform ${
                    openIdx === idx ? 'rotate-180' : ''
                  }`}
                />
              </button>
              {openIdx === idx && (
                <div className="px-6 pb-5 text-sm text-slate-600 leading-relaxed border-t border-slate-100 pt-4">
                  {item.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

function App() {
  const [legalModal, setLegalModal] = useState<'privacy' | 'terms' | null>(null);
  const [demoModalOpen, setDemoModalOpen] = useState(false);
  const [demoSubmitted, setDemoSubmitted] = useState(false);
  const [demoForm, setDemoForm] = useState({
    name: '',
    email: '',
    company: '',
    phone: '',
    volume: '1,000 - 5,000 mins/mo',
  });

  const handleDemoSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setDemoSubmitted(true);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 selection:bg-indigo-600 selection:text-white">
      <Nav onOpenDemo={() => { setDemoSubmitted(false); setDemoModalOpen(true); }} />
      <main id="main-content">
        <Hero onOpenDemo={() => { setDemoSubmitted(false); setDemoModalOpen(true); }} />
        <HowItWorks />
        <Features />
        <Industries />
        <IntegrationsSection />
        <Pricing />
        <FaqSection />

        {/* Pre-Footer Executive CTA Banner */}
        <section className="py-16 px-6 bg-white">
          <div className="max-w-6xl mx-auto rounded-3xl bg-gradient-to-r from-indigo-600 via-indigo-700 to-purple-700 p-10 lg:p-14 text-center shadow-xl">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-white mb-4">
              Ready to Deploy Your Churchill AI Phone Receptionist?
            </h2>
            <p className="text-indigo-100 max-w-2xl mx-auto mb-8 text-sm sm:text-base">
              Join clinics, law firms, and enterprise teams automating 24/7 inbound reception with
              sub-second latency and zero missed calls.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <a
                href={`${DASHBOARD_URL}/login`}
                className="px-8 py-4 rounded-2xl bg-white hover:bg-slate-50 text-indigo-700 font-bold text-sm shadow-lg flex items-center gap-2"
              >
                Launch Free 14-Day Trial <ArrowRight className="w-4 h-4" />
              </a>
              <button
                onClick={() => {
                  setDemoSubmitted(false);
                  setDemoModalOpen(true);
                }}
                className="px-8 py-4 rounded-2xl bg-indigo-500/30 hover:bg-indigo-500/40 text-white font-bold text-sm border border-white/25"
              >
                Schedule Architecture Walkthrough
              </button>
            </div>
          </div>
        </section>
      </main>

      {/* Enterprise 5-Column Footer (Light Theme) */}
      <footer className="border-t border-slate-200 bg-white pt-16 pb-12 text-slate-600 text-sm">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-slate-200">
            {/* Brand Column */}
            <div className="lg:col-span-2 space-y-4">
              <ChurchillLogo />
              <p className="text-xs text-slate-600 max-w-sm leading-relaxed">
                Churchill AI is an enterprise autonomous voice platform delivering sub-second AI
                phone receptionists, Hybrid Vector RAG, in-call calendar scheduling, and
                GDPR-compliant call intelligence.
              </p>
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-semibold">
                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                All Voice Nodes Operational (99.98% SLA)
              </div>
            </div>

            {/* Platform Column */}
            <div className="space-y-2.5">
              <h4 className="text-xs font-bold uppercase tracking-wider text-slate-900 mb-3">
                Platform
              </h4>
              <ul className="space-y-2 text-xs font-medium">
                <li>
                  <a href="#how-it-works" className="hover:text-indigo-600 transition-colors">
                    Website-to-Agent Generator
                  </a>
                </li>
                <li>
                  <a href="#features" className="hover:text-indigo-600 transition-colors">
                    Sub-Second Voice &amp; Barge-In
                  </a>
                </li>
                <li>
                  <a href="#features" className="hover:text-indigo-600 transition-colors">
                    Hybrid Vector RAG Engine
                  </a>
                </li>
                <li>
                  <a href={`${DASHBOARD_URL}/simulator`} className="hover:text-indigo-600 transition-colors">
                    Browser Voice Simulator
                  </a>
                </li>
                <li>
                  <a href="#pricing" className="hover:text-indigo-600 transition-colors">
                    Pricing &amp; Usage Plans
                  </a>
                </li>
              </ul>
            </div>

            {/* Solutions Column */}
            <div className="space-y-2.5">
              <h4 className="text-xs font-bold uppercase tracking-wider text-slate-900 mb-3">
                Industries
              </h4>
              <ul className="space-y-2 text-xs font-medium">
                <li>
                  <a href="#industries" className="hover:text-indigo-600 transition-colors">
                    Medical &amp; Dental Clinics
                  </a>
                </li>
                <li>
                  <a href="#industries" className="hover:text-indigo-600 transition-colors">
                    Legal, Tax &amp; Advisory
                  </a>
                </li>
                <li>
                  <a href="#industries" className="hover:text-indigo-600 transition-colors">
                    HVAC &amp; Field Services
                  </a>
                </li>
                <li>
                  <a href="#industries" className="hover:text-indigo-600 transition-colors">
                    Real Estate &amp; Property
                  </a>
                </li>
                <li>
                  <a href="#industries" className="hover:text-indigo-600 transition-colors">
                    E-Commerce &amp; Automotive
                  </a>
                </li>
              </ul>
            </div>

            {/* Security & Legal Column */}
            <div className="space-y-2.5">
              <h4 className="text-xs font-bold uppercase tracking-wider text-slate-900 mb-3">
                Security &amp; Legal
              </h4>
              <ul className="space-y-2 text-xs font-medium">
                <li>
                  <button
                    onClick={() => setLegalModal('privacy')}
                    className="hover:text-indigo-600 transition-colors"
                  >
                    Privacy Policy &amp; GDPR
                  </button>
                </li>
                <li>
                  <button
                    onClick={() => setLegalModal('terms')}
                    className="hover:text-indigo-600 transition-colors"
                  >
                    Terms of Service &amp; DPA
                  </button>
                </li>
                <li>
                  <a href={`${DASHBOARD_URL}/billing`} className="hover:text-indigo-600 transition-colors">
                    GDPR Data Export Center
                  </a>
                </li>
                <li>
                  <a href={`${DASHBOARD_URL}/login`} className="hover:text-indigo-600 transition-colors">
                    Command Center Sign In
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div className="pt-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-slate-500">
            <p>&copy; {new Date().getFullYear()} Churchill AI Inc. All rights reserved.</p>
            <div className="flex items-center gap-6 font-medium text-slate-600">
              <span className="flex items-center gap-1.5">
                <ShieldCheck className="w-4 h-4 text-emerald-600" />
                GDPR Art. 15/17/20 &amp; EU AI Act Ready
              </span>
              <span className="flex items-center gap-1.5">
                <Lock className="w-3.5 h-3.5 text-indigo-600" />
                TLS 1.3 &amp; Multi-Tenant RBAC
              </span>
            </div>
          </div>
        </div>
      </footer>

      {/* Book a Live Demo Modal (Light Theme) */}
      <AnimatePresence>
        {demoModalOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-xs flex items-center justify-center p-6"
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-white border border-slate-200 rounded-3xl max-w-lg w-full p-8 shadow-2xl space-y-5"
            >
              <div className="flex items-center justify-between border-b border-slate-200 pb-4">
                <div className="flex items-center gap-2.5">
                  <Building2 className="w-5 h-5 text-indigo-600" />
                  <h3 className="text-xl font-bold text-slate-900">
                    Book a Churchill AI Executive Demo
                  </h3>
                </div>
                <button
                  onClick={() => setDemoModalOpen(false)}
                  className="text-slate-400 hover:text-slate-700"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>

              {demoSubmitted ? (
                <div className="py-6 text-center space-y-4">
                  <div className="w-12 h-12 rounded-2xl bg-emerald-50 border border-emerald-200 flex items-center justify-center text-emerald-600 mx-auto">
                    <CheckCircle2 className="w-6 h-6" />
                  </div>
                  <h4 className="text-lg font-bold text-slate-900">
                    Demo Request Received, {demoForm.name}!
                  </h4>
                  <p className="text-xs text-slate-600 leading-relaxed">
                    Our solutions engineering team has reserved a priority walkthrough for{' '}
                    <strong className="text-slate-900">{demoForm.company}</strong>. Want to test the
                    live voice engine right now? You can launch the interactive simulator
                    immediately.
                  </p>
                  <div className="pt-2 flex justify-center gap-3">
                    <a
                      href={`${DASHBOARD_URL}/login`}
                      className="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-xs font-bold text-white"
                    >
                      Open Live Command Center Now
                    </a>
                    <button
                      onClick={() => setDemoModalOpen(false)}
                      className="px-4 py-2.5 rounded-xl bg-slate-100 text-xs font-semibold text-slate-700"
                    >
                      Close
                    </button>
                  </div>
                </div>
              ) : (
                <form onSubmit={handleDemoSubmit} className="space-y-4 text-xs">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                      <label className="block text-slate-700 font-semibold mb-1">Full Name</label>
                      <input
                        type="text"
                        required
                        value={demoForm.name}
                        onChange={(e) => setDemoForm({ ...demoForm, name: e.target.value })}
                        placeholder="Jane Doe"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900"
                      />
                    </div>
                    <div>
                      <label className="block text-slate-700 font-semibold mb-1">Work Email</label>
                      <input
                        type="email"
                        required
                        value={demoForm.email}
                        onChange={(e) => setDemoForm({ ...demoForm, email: e.target.value })}
                        placeholder="jane@company.com"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900"
                      />
                    </div>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                      <label className="block text-slate-700 font-semibold mb-1">Company Name</label>
                      <input
                        type="text"
                        required
                        value={demoForm.company}
                        onChange={(e) => setDemoForm({ ...demoForm, company: e.target.value })}
                        placeholder="Churchill Advisory LLP"
                        className="w-full px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900"
                      />
                    </div>
                    <div>
                      <label className="block text-slate-700 font-semibold mb-1">
                        Monthly Call Volume
                      </label>
                      <select
                        value={demoForm.volume}
                        onChange={(e) => setDemoForm({ ...demoForm, volume: e.target.value })}
                        className="w-full px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-300 text-slate-900"
                      >
                        <option>Under 1,000 mins/mo</option>
                        <option>1,000 - 5,000 mins/mo</option>
                        <option>5,000 - 25,000 mins/mo</option>
                        <option>25,000+ mins/mo (Enterprise)</option>
                      </select>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 text-slate-600 pt-1">
                    <Clock className="w-4 h-4 text-indigo-600" />
                    <span>Includes custom Website-to-Agent live build for your domain.</span>
                  </div>
                  <button
                    type="submit"
                    className="w-full py-3 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm shadow-md shadow-indigo-600/20"
                  >
                    Confirm Executive Demo
                  </button>
                </form>
              )}
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Legal & GDPR Modals (Light Theme) */}
      <AnimatePresence>
        {legalModal && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 bg-slate-900/50 backdrop-blur-xs flex items-center justify-center p-6"
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-white border border-slate-200 rounded-3xl max-w-2xl w-full p-8 max-h-[80vh] overflow-y-auto space-y-4 shadow-2xl"
            >
              <div className="flex items-center justify-between border-b border-slate-200 pb-4">
                <div className="flex items-center gap-2">
                  <Lock className="w-5 h-5 text-indigo-600" />
                  <h3 className="text-xl font-bold text-slate-900">
                    {legalModal === 'privacy'
                      ? 'Churchill AI — Privacy Policy, GDPR & EU AI Act Compliance'
                      : 'Churchill AI — Terms of Service & Data Processing Agreement (DPA)'}
                  </h3>
                </div>
                <button
                  onClick={() => setLegalModal(null)}
                  className="text-slate-400 hover:text-slate-700"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>
              {legalModal === 'privacy' ? (
                <div className="text-xs text-slate-600 space-y-3 leading-relaxed">
                  <p>
                    <strong className="text-slate-900">1. Data Controller &amp; Processor Roles:</strong> Your organization
                    acts as the Data Controller for inbound caller interactions; Churchill AI acts
                    as the Data Processor under GDPR Article 28.
                  </p>
                  <p>
                    <strong className="text-slate-900">2. Call Recording Consent &amp; EU AI Act Transparency:</strong> Every
                    AI agent greeting can announce AI assistance and recording consent prior to
                    capturing conversation turns.
                  </p>
                  <p>
                    <strong className="text-slate-900">3. Automatic PII Redaction:</strong> Payment card numbers, SSNs, and
                    sensitive identifiers are masked in system logs via our `redactPii` security
                    pipeline.
                  </p>
                  <p>
                    <strong className="text-slate-900">4. Data Portability (Art. 20) &amp; Right to Erasure (Art. 17):</strong>{' '}
                    Workspace owners can export all tenant data as machine-readable JSON or
                    permanently purge call transcripts at any time via the Churchill AI Billing
                    &amp; Privacy Center.
                  </p>
                </div>
              ) : (
                <div className="text-xs text-slate-600 space-y-3 leading-relaxed">
                  <p>
                    <strong className="text-slate-900">1. Service Scope:</strong> Churchill AI provides real-time AI phone
                    reception, RAG knowledge retrieval, calendar scheduling, and webhook delivery
                    on a metered SaaS subscription basis.
                  </p>
                  <p>
                    <strong className="text-slate-900">2. Usage Metering &amp; Overages:</strong> Call duration is metered to
                    the second and billed per minute against your plan&rsquo;s monthly allowance.
                  </p>
                  <p>
                    <strong className="text-slate-900">3. Acceptable Use &amp; Security:</strong> Customers must not use the
                    Website-to-Agent crawler against internal/private networks (enforced by our
                    automated SSRF Guard) or for unlawful outbound robocalling.
                  </p>
                </div>
              )}
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default App;