'use client';

import { useState, useEffect } from 'react';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { motion } from 'framer-motion';
import {
  Presentation, FileText, Download, ExternalLink,
  Shield, Users, BarChart3, Swords, BookOpen,
  ArrowRight, Play, Sparkles, Clock, Zap,
  Building2, DollarSign, Calculator, Megaphone
} from 'lucide-react';
import Link from 'next/link';

const SALES_COLLATERAL = [
  {
    title: 'Compliance One-Pager',
    description: 'A single-page overview of Foundry Familiars\'s enterprise security posture — SOC 2, HIPAA, GDPR, and ISO 27001 readiness, audit trail architecture, bias detection, RBAC, explainable AI outputs, human override guarantees, and data encryption standards. Hand this to any CISO, security review board, or compliance team and they\'ll see we\'ve already thought through every question they\'re about to ask.',
    icon: Shield,
    href: '/press-kit/documents/compliance-onepager.html',
    color: 'emerald',
  },
  {
    title: 'Case Study Template',
    description: 'A co-branded success story format pre-structured with quantifiable results (reduction in manual tasks, hours saved, faster response times, cost savings), challenge/solution/results narrative, customer quote placement, and a CTA to the Design Partner Program. Ready for your first design partner win — just fill in the numbers.',
    icon: BarChart3,
    href: '/press-kit/documents/case-study-template.html',
    color: 'blue',
  },
  {
    title: 'Design Partner Welcome Kit',
    description: 'The full onboarding package for new design partners: exclusive benefits (white-glove onboarding, co-branded case study, roadmap influence, founding partner pricing), a four-phase onboarding timeline (Discovery → Agent Training → Pilot Launch → Expansion), a getting-started checklist, and all contact information they need on day one.',
    icon: Users,
    href: '/press-kit/documents/design-partner-welcome.html',
    color: 'purple',
  },
  {
    title: 'Channel Partner Kit',
    description: 'Everything a boutique CFO/COO consultancy, RevOps consultant, or MSP needs to evaluate the partnership opportunity: tiered revenue share structure (15–30%), partner benefits (training, implementation support, co-marketing, partner portal, flexible billing, early access to new modules), and a clear four-step path from application to revenue.',
    icon: Building2,
    href: '/press-kit/documents/channel-partner-kit.html',
    color: 'amber',
  },
  {
    title: 'Familiar Brief Template',
    description: 'A sample of the AI-generated weekly executive summary that every FF deployment produces automatically. Includes market intelligence insights, operations health metrics (tasks automated, agent accuracy, time saved, anomalies caught), proactive fixes deployed, and recommended actions. Show prospects exactly what automated intelligence looks like in practice.',
    icon: FileText,
    href: '/press-kit/documents/syndicate-brief-template.html',
    color: 'cyan',
  },
  {
    title: 'Module System One-Pager',
    description: 'A visual map of the entire FF module architecture: 24 modules across Core Platform, Operations (including Finance, HR, Inventory, CRM, Document Management, POS, Project Management, and more), Intelligence (Sentinel, The Hearth, Reporting & BI), and Add-ons. Shows the agent hierarchy and how each module connects to its AI executive.',
    icon: Sparkles,
    href: '/press-kit/documents/module-system-onepager.html',
    color: 'pink',
  },
];

const SITE_PAGES = [
  {
    title: 'VS ERP Comparison',
    description: 'A comprehensive side-by-side breakdown of Foundry Familiars versus legacy ERP systems. Covers the five pain points of traditional ERPs (implementation hell, budget black holes, user adoption nightmares, consultant dependency, AI as an afterthought), with a detailed feature comparison table and the post-ERP solution narrative. Send this to any prospect evaluating SAP, Oracle, or NetSuite.',
    icon: Swords,
    href: '/vs-erp',
    color: 'red',
  },
  {
    title: 'ROI Calculator',
    description: 'An interactive calculator where prospects enter their employee count, department count, current SaaS spend, and manual ops hours — then instantly see projected annual savings, payback period, cost-per-employee reduction, and cumulative 12-month savings charts. Also includes a "vs ERP" comparison mode showing the cost differential against traditional implementations.',
    icon: Calculator,
    href: '/roi-calculator',
    color: 'green',
  },
  {
    title: 'Blog: Why ERP is Dead',
    description: 'A founder\'s-perspective thought leadership piece on the fundamental failures of enterprise software. Covers the hidden tax on growth companies (with real statistics on ERP failure rates), the five lies of enterprise software, what actually changes when AI can learn, and a practical post-ERP playbook for companies ready to make the switch.',
    icon: BookOpen,
    href: '/blog/why-erp-is-dead',
    color: 'orange',
  },
];

const DOC_PAGES = [
  {
    title: 'Product Tiers Documentation',
    description: 'Deep-dive into Standard vs GOD MODE — capabilities, restrictions, and upgrade path.',
    icon: BookOpen,
    href: '/docs/product-tiers',
    color: 'amber',
  },
  {
    title: 'The Hearth Documentation',
    description: 'Complete guide to the AI code generation system — specs, testing, deployment, and the Weft engine.',
    icon: BookOpen,
    href: '/docs/dark-factory',
    color: 'purple',
  },
  {
    title: 'FF System Documentation',
    description: 'Agent orchestration, event bus, self-modification engine, and Observer deep-dive.',
    icon: BookOpen,
    href: '/docs/gfs',
    color: 'blue',
  },
  {
    title: 'Hearth Control User Manual',
    description: '10-chapter reference covering every screen and workflow inside Hearth Control — from login to The Hearth.',
    icon: BookOpen,
    href: '/docs/user-manual',
    color: 'green',
  },
  {
    title: 'Full Documentation Hub',
    description: 'All docs, user manual, and quick-start guides — plus links to the platform demo and Hearth Control login.',
    icon: BookOpen,
    href: '/docs',
    color: 'cyan',
  },
];

function colorClasses(color: string) {
  const map: Record<string, { bg: string; text: string; border: string }> = {
    emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
    blue: { bg: 'bg-blue-500/10', text: 'text-blue-400', border: 'border-blue-500/20' },
    purple: { bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/20' },
    amber: { bg: 'bg-amber-500/10', text: 'text-amber-400', border: 'border-amber-500/20' },
    cyan: { bg: 'bg-sky-500/10', text: 'text-sky-400', border: 'border-sky-500/20' },
    pink: { bg: 'bg-pink-500/10', text: 'text-pink-400', border: 'border-pink-500/20' },
    red: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/20' },
    green: { bg: 'bg-green-500/10', text: 'text-green-400', border: 'border-green-500/20' },
    orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/20' },
  };
  return map[color] || map.cyan;
}

export default function SalesPage() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) {
    return (
      <main className="min-h-screen bg-[#050a14]">
        <Header />
        <div className="pt-24 pb-20 px-4 max-w-6xl mx-auto">
          <div className="h-96 flex items-center justify-center">
            <div className="text-gray-500">Loading...</div>
          </div>
        </div>
        <Footer />
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-[#050a14]">
      <Header />

      {/* Hero */}
      <section className="pt-28 pb-12 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm mb-6">
              <Megaphone size={14} />
              Sales &amp; Marketing Hub
            </div>
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-4">
              Everything You Need to{' '}
              <span className="bg-gradient-to-r from-sky-400 to-emerald-400 bg-clip-text text-transparent">Close the Deal</span>
            </h1>
            <p className="text-lg text-gray-400 max-w-3xl mx-auto">
              Everything you need to understand, evaluate, and champion Foundry Familiars — from the full platform demo walkthrough and downloadable sales collateral to interactive ROI tools, competitive comparisons, thought leadership content, and direct links to every section of the <Link href="/docs" className="text-brand hover:underline">technical documentation</Link>.
            </p>
          </motion.div>
        </div>
      </section>

      {/* ===== PLATFORM DEMO WALKTHROUGH ===== */}
      <section className="pb-16 px-4">
        <div className="max-w-5xl mx-auto">
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.15 }}
          >
            <div className="flex items-center gap-3 mb-2">
              <div className="p-2 rounded-lg bg-emerald-500/20">
                <Presentation size={20} className="text-emerald-400" />
              </div>
              <div>
                <h2 className="text-2xl md:text-3xl font-bold text-white">Platform Demo Walkthrough</h2>
                <p className="text-sm text-gray-500">Tes walks you through the entire FF platform</p>
              </div>
            </div>
            <div className="flex flex-wrap items-center gap-3 mb-6 mt-3">
              <span className="inline-flex items-center gap-1.5 text-xs text-gray-400 bg-white/5 px-3 py-1 rounded-full">
                <Clock size={12} /> 7:37
              </span>
              <span className="inline-flex items-center gap-1.5 text-xs text-emerald-400 bg-emerald-500/10 px-3 py-1 rounded-full">
                <Sparkles size={12} /> 12 Voices · 5 Acts
              </span>
            </div>
            <p className="text-gray-400 mb-4 max-w-3xl">
              Meet the Familiars. Tes — your AI CEO — introduces her team of 8 specialized AI executives and 3 The Hearth engineers, each with their own voice, their own expertise, and zero downtime. In this walkthrough you&apos;ll hear <strong className="text-red-400">Sentinel</strong> explain real-time OWASP threat monitoring and daily security scanning — watching every line of code The Hearth produces and continuously verifying that deployed software stays secure against newly reported vulnerabilities. You&apos;ll also hear Ledger break down financial automation, Nexus detail CRM relationship intelligence, Harmony walk through HR workflows, StockWatch cover supply chain optimization, Pipeline discuss sales pipeline management, Conductor explain operations orchestration, and Milestone cover project portfolio management.
            </p>
            <p className="text-gray-400 mb-6 max-w-3xl">
              You&apos;ll also see The Hearth in action — the Prompt Engineer, UI Engineer, and QA Agent demonstrate how natural-language specifications become production-ready code. The demo covers the Ghost Control dashboard, module configuration, agent chat, reporting, and the full scope of what Foundry Familiars automates out of the box. For a deeper technical dive, visit the <Link href="/docs" className="text-brand hover:underline">full documentation</Link>.
            </p>
            <div className="rounded-2xl overflow-hidden border border-sky-500/20 bg-[#080c16]">
              <div className="relative aspect-video bg-black">
                <video
                  src="/podcast-demo/gfs_sales_demo_v10_remastered.mp4"
                  className="w-full h-full object-contain"
                  controls
                  playsInline
                  preload="metadata"
                  aria-label="GFS Platform Demo Walkthrough"
                />
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Divider */}
      <div className="max-w-5xl mx-auto px-4">
        <div className="h-px bg-gradient-to-r from-transparent via-purple-500/30 to-transparent" />
      </div>

      {/* ===== TESA VIDEO SHOWCASE ===== */}
      <section className="py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.15 }}
          >
            <div className="flex items-center gap-3 mb-3">
              <div className="p-2 rounded-lg bg-purple-500/20">
                <Play size={20} className="text-purple-400" />
              </div>
              <div>
                <h2 className="text-2xl md:text-3xl font-bold text-white">Meet Tesa</h2>
                <p className="text-sm text-gray-500">Your AI CEO introduces Foundry Familiars</p>
              </div>
            </div>
            <p className="text-gray-400 mb-8 max-w-3xl">
              Tesa Aria Murphy — our AI-generated founder avatar — walks you through the platform, the team of Familiars, and the vision behind Foundry Familiars. Each video is produced using HeyGen talking-photo technology with Tesa&apos;s custom voice clone.
            </p>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Welcome Video */}
              <div className="rounded-2xl overflow-hidden border border-purple-500/20 bg-[#080c16]">
                <div className="relative aspect-video bg-black">
                  <video
                    src="/videos/welcome-spooky.mp4"
                    className="w-full h-full object-contain"
                    controls
                    playsInline
                    preload="metadata"
                    aria-label="Welcome to SpookySoftwareSyndicate.com"
                  />
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-white text-sm mb-1">Welcome to SpookySoftwareSyndicate.com</h3>
                  <p className="text-xs text-gray-400">Tesa introduces the company, the mission, and what visitors can expect from the site.</p>
                  <span className="inline-flex items-center gap-1 text-xs text-purple-400 mt-2"><Clock size={11} /> 1:46</span>
                </div>
              </div>

              {/* Familiars Overview */}
              <div className="rounded-2xl overflow-hidden border border-sky-500/20 bg-[#080c16]">
                <div className="relative aspect-video bg-black">
                  <video
                    src="/videos/familiars-overview.mp4"
                    className="w-full h-full object-contain"
                    controls
                    playsInline
                    preload="metadata"
                    aria-label="Foundry Familiars Overview"
                  />
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-white text-sm mb-1">Meet the Familiars</h3>
                  <p className="text-xs text-gray-400">A tour of all 8 spirit-animal AI executives and how they work together as your autonomous back office.</p>
                  <span className="inline-flex items-center gap-1 text-xs text-sky-400 mt-2"><Clock size={11} /> 2:10</span>
                </div>
              </div>

              {/* Hearth Demo */}
              <div className="rounded-2xl overflow-hidden border border-orange-500/20 bg-[#080c16]">
                <div className="relative aspect-video bg-black">
                  <video
                    src="/videos/hearth-demo.mp4"
                    className="w-full h-full object-contain"
                    controls
                    playsInline
                    preload="metadata"
                    aria-label="The Hearth Engine Demo"
                  />
                </div>
                <div className="p-4">
                  <h3 className="font-semibold text-white text-sm mb-1">The Hearth Engine Demo</h3>
                  <p className="text-xs text-gray-400">See The Hearth&apos;s 3-agent code pipeline in action — from prompt to production-ready software.</p>
                  <span className="inline-flex items-center gap-1 text-xs text-orange-400 mt-2"><Clock size={11} /> 1:18</span>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Divider */}
      <div className="max-w-5xl mx-auto px-4">
        <div className="h-px bg-gradient-to-r from-transparent via-sky-500/30 to-transparent" />
      </div>

      {/* ===== DOWNLOADABLE COLLATERAL ===== */}
      <section className="py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <div className="flex items-center gap-3 mb-8">
              <div className="p-2 rounded-lg bg-sky-500/20">
                <Download size={20} className="text-sky-400" />
              </div>
              <div>
                <h2 className="text-2xl md:text-3xl font-bold text-white">Sales Collateral</h2>
                <p className="text-sm text-gray-500">Download, share, or send directly to prospects</p>
              </div>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {SALES_COLLATERAL.map((item, index) => {
                const c = colorClasses(item.color);
                const Icon = item.icon;
                return (
                  <motion.a
                    key={item.title}
                    href={item.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    initial={{ opacity: 1, y: 0 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.25 + index * 0.05 }}
                    className={`group glass-card p-5 rounded-xl border ${c.border} hover:border-opacity-50 transition-all hover:scale-[1.02]`}
                  >
                    <div className="flex items-start gap-3 mb-3">
                      <div className={`p-2 rounded-lg ${c.bg}`}>
                        <Icon size={18} className={c.text} />
                      </div>
                      <div className="flex-1 min-w-0">
                        <h3 className="font-semibold text-white text-sm">{item.title}</h3>
                      </div>
                      <ExternalLink size={14} className="text-gray-600 group-hover:text-gray-400 transition-colors flex-shrink-0 mt-1" />
                    </div>
                    <p className="text-xs text-gray-300 leading-relaxed">{item.description}</p>
                  </motion.a>
                );
              })}
            </div>
          </motion.div>
        </div>
      </section>

      {/* Divider */}
      <div className="max-w-5xl mx-auto px-4">
        <div className="h-px bg-gradient-to-r from-transparent via-orange-500/30 to-transparent" />
      </div>

      {/* ===== INTERACTIVE PAGES ===== */}
      <section className="py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            <div className="flex items-center gap-3 mb-8">
              <div className="p-2 rounded-lg bg-orange-500/20">
                <Zap size={20} className="text-orange-400" />
              </div>
              <div>
                <h2 className="text-2xl md:text-3xl font-bold text-white">Interactive Sales Tools</h2>
                <p className="text-sm text-gray-500">Send prospects directly to these pages</p>
              </div>
            </div>

            <div className="grid md:grid-cols-3 gap-4">
              {SITE_PAGES.map((item, index) => {
                const c = colorClasses(item.color);
                const Icon = item.icon;
                return (
                  <motion.div
                    key={item.title}
                    initial={{ opacity: 1, y: 0 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.35 + index * 0.05 }}
                  >
                    <Link
                      href={item.href}
                      className={`group block glass-card p-6 rounded-xl border ${c.border} hover:border-opacity-50 transition-all hover:scale-[1.02] h-full`}
                    >
                      <div className={`p-2.5 rounded-lg ${c.bg} inline-block mb-4`}>
                        <Icon size={22} className={c.text} />
                      </div>
                      <h3 className="font-semibold text-white mb-2">{item.title}</h3>
                      <p className="text-sm text-gray-400 leading-relaxed mb-4">{item.description}</p>
                      <div className={`inline-flex items-center gap-1.5 text-sm ${c.text} group-hover:gap-2.5 transition-all`}>
                        Visit Page <ArrowRight size={14} />
                      </div>
                    </Link>
                  </motion.div>
                );
              })}
            </div>
          </motion.div>
        </div>
      </section>

      {/* Divider */}
      <div className="max-w-5xl mx-auto px-4">
        <div className="h-px bg-gradient-to-r from-transparent via-amber-500/30 to-transparent" />
      </div>

      {/* ===== DOCUMENTATION LINKS ===== */}
      <section className="py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.35 }}
          >
            <div className="flex items-center gap-3 mb-8">
              <div className="p-2 rounded-lg bg-amber-500/20">
                <BookOpen size={20} className="text-amber-400" />
              </div>
              <div>
                <h2 className="text-2xl md:text-3xl font-bold text-white">Documentation &amp; User Manual</h2>
                <p className="text-sm text-gray-500">Technical guides, architecture deep-dives, and the complete platform reference</p>
              </div>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
              {DOC_PAGES.map((item, index) => {
                const c = colorClasses(item.color);
                const Icon = item.icon;
                return (
                  <motion.div
                    key={item.title}
                    initial={{ opacity: 1, y: 0 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.4 + index * 0.05 }}
                  >
                    <Link
                      href={item.href}
                      className={`group block glass-card p-5 rounded-xl border ${c.border} hover:border-opacity-50 transition-all hover:scale-[1.02] h-full`}
                    >
                      <div className={`p-2 rounded-lg ${c.bg} inline-block mb-3`}>
                        <Icon size={18} className={c.text} />
                      </div>
                      <h3 className="font-semibold text-white text-sm mb-1">{item.title}</h3>
                      <p className="text-xs text-gray-400 leading-relaxed mb-3">{item.description}</p>
                      <div className={`inline-flex items-center gap-1.5 text-xs ${c.text} group-hover:gap-2.5 transition-all`}>
                        Read Docs <ArrowRight size={12} />
                      </div>
                    </Link>
                  </motion.div>
                );
              })}
            </div>
          </motion.div>
        </div>
      </section>

      {/* CTA */}
      <section className="pb-20 px-4">
        <div className="max-w-5xl mx-auto">
          <div className="rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-8 text-center">
            <DollarSign className="mx-auto mb-3 text-emerald-400" size={28} />
            <h3 className="text-xl font-bold text-white mb-2">Ready to Talk?</h3>
            <p className="text-gray-400 text-sm max-w-lg mx-auto mb-6">
              Join the Design Partner Program and get white-glove onboarding, founding partner pricing, and direct roadmap influence.
            </p>
            <Link
              href="/#design-partner"
              className="inline-flex items-center gap-2 px-6 py-3 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded-xl hover:bg-emerald-500/30 transition-all font-medium"
            >
              Apply Now <ArrowRight size={16} />
            </Link>
          </div>
        </div>
      </section>

      <Footer />
    </main>
  );
}
