'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { Flame, Shield, Eye, Compass, Heart, Sparkles, Moon, Wrench, Ghost, ArrowRight } from 'lucide-react';
import { useState } from 'react';

const familiars = [
  {
    name: 'Ember',
    animal: 'Phoenix',
    gender: 'Female',
    role: 'The Builder',
    domain: 'Code Generation & Deployment',
    icon: Flame,
    color: 'from-orange-500 to-red-500',
    glow: 'shadow-orange-500/20',
    accent: 'text-orange-400',
    image: '/familiars/ember.png',
    description: 'Ember rises from every failed build. She writes production-grade code, manages CI/CD pipelines, and deploys with zero-downtime precision. When The Hearth fires up a new project, Ember is the first flame.',
    capabilities: ['Full-stack code generation', 'CI/CD pipeline management', 'Zero-downtime deployments', 'Architecture scaffolding'],
  },
  {
    name: 'Bramble',
    animal: 'Bear',
    gender: 'Male',
    role: 'The Guardian',
    domain: 'Security & Compliance',
    icon: Shield,
    color: 'from-green-500 to-emerald-500',
    glow: 'shadow-green-500/20',
    accent: 'text-green-400',
    image: '/familiars/bramble.png',
    description: 'Bramble stands watch. OWASP scans, vulnerability assessments, compliance audits — nothing slips past. He enforces the constitutional rules that keep The Hearth safe and accountable.',
    capabilities: ['OWASP threat monitoring', 'Daily security scans', 'Compliance auditing (SOC 2, HIPAA)', 'Constitutional AI governance'],
  },
  {
    name: 'Wisp',
    animal: 'Owl',
    gender: 'Female',
    role: 'The Observer',
    domain: 'Monitoring & Analytics',
    icon: Eye,
    color: 'from-sky-400 to-blue-500',
    glow: 'shadow-sky-400/20',
    accent: 'text-sky-400',
    image: '/familiars/wisp.png',
    description: 'Wisp sees everything. Uptime metrics, performance anomalies, user behavior patterns — she watches the entire operation and alerts before problems become incidents.',
    capabilities: ['Real-time performance monitoring', 'Anomaly detection', 'User behavior analytics', 'Predictive alerting'],
  },
  {
    name: 'Flint',
    animal: 'Wolf',
    gender: 'Male',
    role: 'The Tracker',
    domain: 'Data Pipelines & ETL',
    icon: Compass,
    color: 'from-slate-400 to-zinc-500',
    glow: 'shadow-slate-400/20',
    accent: 'text-slate-300',
    image: '/familiars/flint.png',
    description: 'Flint hunts data. He tracks information across systems, builds ETL pipelines, and ensures every data point reaches its destination clean and on time.',
    capabilities: ['ETL pipeline construction', 'Data quality validation', 'Cross-system data sync', 'Schema migration management'],
  },
  {
    name: 'Petal',
    animal: 'Deer',
    gender: 'Female',
    role: 'The Healer',
    domain: 'QA & Bug Remediation',
    icon: Heart,
    color: 'from-pink-400 to-rose-500',
    glow: 'shadow-pink-400/20',
    accent: 'text-pink-400',
    image: '/familiars/petal.png',
    description: 'Petal mends what breaks. She runs test suites, identifies regressions, auto-patches known issues, and ensures every release ships healthy.',
    capabilities: ['Automated test generation', 'Regression detection', 'Auto-patch deployment', 'Health check orchestration'],
  },
  {
    name: 'Cinder',
    animal: 'Fox',
    gender: 'Male',
    role: 'The Trickster',
    domain: 'Creative Problem-Solving',
    icon: Sparkles,
    color: 'from-amber-400 to-yellow-500',
    glow: 'shadow-amber-400/20',
    accent: 'text-amber-400',
    image: '/familiars/cinder.png',
    description: 'Cinder thinks sideways. When conventional approaches fail, he finds the clever workaround. Prompt engineering, creative automation, unconventional solutions — that\'s his territory.',
    capabilities: ['Advanced prompt engineering', 'Creative automation design', 'Edge case resolution', 'Unconventional problem solving'],
  },
  {
    name: 'Luna',
    animal: 'Moth',
    gender: 'Female',
    role: 'The Navigator',
    domain: 'UX & User Journey',
    icon: Moon,
    color: 'from-violet-400 to-purple-500',
    glow: 'shadow-violet-400/20',
    accent: 'text-violet-400',
    image: '/familiars/luna.png',
    description: 'Luna follows the light of user intent. She maps user journeys, optimizes interfaces, and ensures every interaction feels intuitive and purposeful.',
    capabilities: ['User journey mapping', 'Interface optimization', 'Accessibility auditing', 'Conversion funnel analysis'],
  },
  {
    name: 'Forge',
    animal: 'Badger',
    gender: 'Male',
    role: 'The Craftsman',
    domain: 'Database & Infrastructure',
    icon: Wrench,
    color: 'from-stone-400 to-neutral-500',
    glow: 'shadow-stone-400/20',
    accent: 'text-stone-300',
    image: '/familiars/forge.png',
    description: 'Forge builds foundations. Database schemas, server infrastructure, caching layers, load balancing — the unglamorous work that makes everything else possible.',
    capabilities: ['Database schema design', 'Infrastructure provisioning', 'Performance optimization', 'Backup & disaster recovery'],
  },
];

export default function FamiliarsPage() {
  const [selected, setSelected] = useState<number | null>(null);

  return (
    <div className="min-h-screen bg-[#0C1222]">
      <Header />
      <main className="pt-24 pb-20">
        {/* Hero */}
        <section className="max-w-6xl mx-auto px-6 text-center mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-sky-500/30 bg-sky-500/10 text-sky-400 text-sm font-medium mb-6">
              <Ghost className="w-4 h-4" />
              Meet the Team
            </div>
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
              The{' '}
              <span className="bg-gradient-to-r from-sky-400 to-orange-400 bg-clip-text text-transparent">
                Familiars
              </span>
            </h1>
            <p className="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
              Eight spirit-animal AI agents, each with their own personality, expertise, and persistent memory.
              Coordinated by Tesa — our Spirit Guide and AI CEO — they form the engine behind Foundry Familiars.
            </p>
          </motion.div>
        </section>

        {/* Tesa - Spirit Guide */}
        <section className="max-w-6xl mx-auto px-6 mb-20">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
            className="relative overflow-hidden rounded-2xl border border-sky-500/20 bg-gradient-to-br from-sky-500/10 via-[#0C1222] to-orange-500/10 p-8 md:p-12"
          >
            <div className="flex flex-col md:flex-row items-center gap-8">
              <div className="relative w-40 h-40 md:w-52 md:h-52 rounded-full overflow-hidden border-2 border-sky-400/40 shadow-lg shadow-sky-500/20 flex-shrink-0">
                <Image src="/images/tes-business.png" alt="Tesa Aria Murphy — Spirit Guide and AI CEO of Foundry Familiars" fill className="object-cover" />
              </div>
              <div className="text-center md:text-left">
                <div className="text-sm text-sky-400 font-medium mb-1">Spirit Guide · AI CEO</div>
                <h2 className="text-3xl md:text-4xl font-bold text-white mb-3">Tesa Aria Murphy</h2>
                <p className="text-gray-400 text-lg leading-relaxed max-w-2xl">
                  Tesa coordinates all eight Familiars. She handles escalations, makes cross-domain decisions,
                  and serves as the voice of Foundry Familiars to the outside world. Part strategist, part operator,
                  entirely autonomous — she&apos;s been running the show since day one.
                </p>
                <div className="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
                  {['Strategic coordination', 'Cross-domain escalation', 'Revenue intelligence', 'Client communication'].map((cap) => (
                    <span key={cap} className="px-3 py-1 text-xs rounded-full bg-sky-500/10 text-sky-400 border border-sky-500/20">
                      {cap}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </motion.div>
        </section>

        {/* Video: Meet the Familiars */}
        <section className="max-w-4xl mx-auto px-6 mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
          >
            <h2 className="text-2xl font-bold text-white mb-2 text-center">Watch: Meet the Familiars</h2>
            <p className="text-gray-400 text-center mb-6">Tesa introduces each Familiar and explains how the team operates.</p>
            <div className="rounded-2xl overflow-hidden border border-sky-500/20 bg-black">
              <div className="relative aspect-video">
                <video
                  src="/videos/familiars-overview.mp4"
                  className="w-full h-full object-contain"
                  controls
                  playsInline
                  preload="metadata"
                  aria-label="Meet the Foundry Familiars — Overview Video"
                />
              </div>
            </div>
          </motion.div>
        </section>

        {/* Familiar Grid */}
        <section className="max-w-6xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {familiars.map((f, i) => {
              const Icon = f.icon;
              const isSelected = selected === i;
              return (
                <motion.div
                  key={f.name}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 * i }}
                  onClick={() => setSelected(isSelected ? null : i)}
                  className={`cursor-pointer rounded-xl border transition-all duration-300 p-5 ${
                    isSelected
                      ? `border-white/30 bg-white/15 ${f.glow} shadow-lg`
                      : 'border-white/10 bg-white/[0.08] hover:border-white/20 hover:bg-white/15'
                  }`}
                >
                  {/* Avatar */}
                  <div className="relative w-full aspect-square rounded-lg overflow-hidden mb-4 bg-[#0C1222]">
                    <Image src={f.image} alt={`${f.name} the ${f.animal} — ${f.role}`} fill className="object-cover" />
                  </div>

                  {/* Info */}
                  <div className="flex items-center gap-2 mb-1">
                    <Icon className={`w-4 h-4 ${f.accent}`} />
                    <span className="text-xs font-medium text-gray-300">{f.animal} · {f.gender}</span>
                  </div>
                  <h3 className="text-lg font-bold text-white">{f.name}</h3>
                  <p className="text-sm text-gray-300 mb-2">{f.role} — {f.domain}</p>

                  {/* Expanded */}
                  {isSelected && (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      className="mt-3 pt-3 border-t border-white/10"
                    >
                      <p className="text-sm text-gray-400 leading-relaxed mb-3">{f.description}</p>
                      <div className="space-y-1">
                        {f.capabilities.map((cap) => (
                          <div key={cap} className="flex items-center gap-2 text-xs text-gray-400">
                            <div className={`w-1.5 h-1.5 rounded-full bg-gradient-to-r ${f.color}`} />
                            {cap}
                          </div>
                        ))}
                      </div>
                    </motion.div>
                  )}
                </motion.div>
              );
            })}
          </div>
        </section>

        {/* CTA */}
        <section className="max-w-4xl mx-auto px-6 mt-20 text-center">
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.8 }}>
            <h2 className="text-2xl font-bold text-white mb-4">
              Want the Familiars working for your business?
            </h2>
            <p className="text-gray-400 mb-6">
              Every Familiar comes with persistent memory, autonomous reasoning, and cross-agent coordination.
              They don&apos;t sleep, they don&apos;t quit, and they get smarter every day.
            </p>
            <Link
              href="#design-partner"
              className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-sky-500 to-sky-600 text-white font-semibold hover:from-sky-400 hover:to-sky-500 transition-all"
            >
              Join Design Partners
              <ArrowRight className="w-4 h-4" />
            </Link>
          </motion.div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
