'use client';

import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { Github, Linkedin, Mail, Code2, Cloud, Database, Server, Award, GraduationCap, Briefcase, ChevronDown, ExternalLink, Sparkles, Download, Bot, Brain, Cpu, Workflow, MessageSquare, Ghost, Volume2, VolumeX } from 'lucide-react';
import { useState, useEffect, useCallback, useRef } from 'react';
import { BRAND, COMPANION, VOCAB } from '@/lib/white-label/constants';

// Easter Egg: Konami Code sequence
const KONAMI_CODE = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

// Easter Egg: Console ASCII Art
const ASCII_ART = `
   ▄████  ██░ ██   ▒█████    ██████ ▄▄▄█████▓
  ██▒ ▀█▒▓██░ ██▒ ▒██▒  ██▒▒██    ▒ ▓  ██▒ ▓▒
 ▒██░▄▄▄░▒██▀▀██░ ▒██░  ██▒░ ▓██▄   ▒ ▓██░ ▒░
 ░▓█  ██▓░▓█ ░██  ▒██   ██░  ▒   ██▒░ ▓██▓ ░ 
 ░▒▓███▀▒░▓█▒░██▓ ░ ████▓▒░▒██████▒▒  ▒██▒ ░ 
  ░▒   ▒  ▒ ░░▒░▒ ░ ▒░▒░▒░ ▒ ▒▓▒ ▒ ░  ▒ ░░   
   ░   ░  ▒ ░▒░ ░   ░ ▒ ▒░ ░ ░▒  ░ ░    ░    
 ░ ░   ░  ░  ░░ ░ ░ ░ ░ ▒  ░  ░  ░    ░      
       ░  ░  ░  ░     ░ ░        ░           
                                             
 👻 {BRAND.companyName} - Scott Roy Murphy
 🔮 "The ghosts in the machine are watching..."
 💀 Type 'ghost' to summon the spirits...
`;

// Secret messages for badge clicks
const BADGE_SECRETS = [
  "That's a lot of semicolons...",
  "I've seen things you wouldn't believe...",
  "Attack ships on fire off the shoulder of Orion...",
  "Wait, wrong monologue.",
  "🎉 You found the secret! You're persistent, just like my code.",
];

const skills = [
  { name: 'AI / LLM Engineering', level: 95, icon: Brain },
  { name: 'Prompt Architecture & RAG', level: 94, icon: Cpu },
  { name: 'Next.js / React / TypeScript', level: 93, icon: Code2 },
  { name: '.NET 10 / C#', level: 95, icon: Code2 },
  { name: 'Azure / AWS / Cloud', level: 92, icon: Cloud },
  { name: 'PostgreSQL / Prisma ORM', level: 90, icon: Database },
  { name: 'Clean Architecture / DDD', level: 90, icon: Server },
  { name: 'CI/CD / DevOps', level: 90, icon: Workflow },
];

const aiTools = [
  { name: 'Claude 3.5 Sonnet', desc: 'Advanced reasoning, code generation & analysis' },
  { name: 'GPT-4 / o3-mini', desc: 'Multi-modal AI applications' },
  { name: 'DeepSeek R1', desc: 'Cost-effective inference & routing' },
  { name: 'Gemini 2.5', desc: 'Google AI integration' },
  { name: 'Abacus.AI RouteLLM', desc: 'Multi-model orchestration & routing' },
  { name: 'HeyGen Avatars', desc: 'AI digital humans, lip-sync films & scenes' },
  { name: 'ElevenLabs', desc: 'Voice synthesis, TTS & voice cloning' },
  { name: 'RAG Pipelines', desc: 'Retrieval-augmented generation & vector search' },
  { name: 'Prompt Engineering', desc: 'System prompts, chain-of-thought, few-shot' },
  { name: 'Token Optimization', desc: 'Context window mgmt & cost reduction' },
  { name: 'Stripe API', desc: 'Payment processing & webhook integration' },
  { name: 'FFmpeg API', desc: 'Video/audio processing & production' },
  { name: 'HTML2PDF (Playwright)', desc: 'Automated report & document generation' },
  { name: 'Telegram Bot API', desc: 'AI-powered bot communication' },
  { name: 'NextAuth.js / RBAC', desc: 'Authentication & role-based access' },
  { name: 'AWS S3', desc: 'Cloud file storage & presigned uploads' },
];

const experience = [
  {
    company: 'Foundry Familiars',
    location: 'Remote / Houston, TX',
    role: 'Senior AI Engineer & Prompt Architect / Co-Founder',
    period: 'January 2026 - Present',
    highlights: [
      'Architected and built an AI-native operations platform from concept to production (spookysoftwaresyndicate.com), replacing traditional ERP with intelligent self-expanding AI agents',
      'Designed multi-model LLM orchestration routing across Claude 3.5 Sonnet, GPT-4, DeepSeek R1, and Gemini 2.5 with cost optimization and quality-based routing via Abacus.AI RouteLLM',
      'Built RAG (Retrieval-Augmented Generation) pipelines for knowledge base ingestion, semantic search, and context-aware AI agent responses',
      'Engineered advanced prompt architectures with system prompts, chain-of-thought reasoning, few-shot learning, and token optimization strategies reducing LLM costs',
      'Created the "The Hearth" — AI-powered code generation pipeline with gate-controlled intake, automated complexity estimation, visual artifact generation (ERD, user flows, sitemaps), and human-in-the-loop approval',
      'Produced AI-generated video content using HeyGen digital avatars including lip-synced presentations, podcast episodes ("Tes\'s Trunk"), and marketing films with FFmpeg post-production',
      'Integrated ElevenLabs voice synthesis for TTS interfaces and automated voice-over generation across video and bot platforms',
      'Built end-to-end AI Scope consulting service: Stripe checkout → intake form → Claude analysis → HTML2PDF report → automated email delivery',
      'Designed PostgreSQL schemas (15+ Prisma models) with gate-controlled pipelines, RBAC, and persistent AI memory systems',
      'Implemented white-label theming engine with CSS custom properties, dynamic brand vocabulary, and centralized configuration for instant rebranding',
      'Developed Telegram bot integration, scheduled daemon tasks, and LinkedIn marketing automation for AI-powered content operations',
      'Built "Hearth Control" admin dashboard with role-based access, agent management, real-time monitoring, and interactive ROI calculator with ERP comparison mode',
    ],
    tech: ['Next.js 14', 'React 18', 'TypeScript', 'Tailwind CSS', 'PostgreSQL', 'Prisma', 'Claude 3.5', 'GPT-4', 'HeyGen', 'ElevenLabs', 'RAG', 'Stripe', 'AWS S3', 'FFmpeg', 'NextAuth.js', 'Framer Motion'],
  },
  {
    company: 'Perficient, Inc.',
    location: 'Remote / Houston, TX',
    role: 'Senior Technical Consultant, App Modernization',
    period: 'November 2025 - Present',
    highlights: [
      'Delivered cloud-native .NET 10 microservices and API modernization for enterprise client Lockton',
      'Designed Binder Management API suite using Clean Architecture and modular domain layers',
      'Integrated QuoteCompare AI into enterprise workflows for automated document extraction',
      'Architected Azure Redis distributed caching strategy reducing redundant API calls',
      'Created Salesforce integration microservices using Forza.Net and SOQL query builders',
    ],
    tech: ['C#', '.NET 10', 'Azure', 'Redis', 'Salesforce', 'M-Files', 'Clean Architecture'],
  },
  {
    company: 'SpookySoftwareSyndicate.com',
    location: 'Houston, TX',
    role: 'CEO / Founder / Lead Engineer',
    period: '2023 - Present',
    highlights: [
      'Founded and operate a software consulting and AI development firm delivering full-stack solutions, AI integrations, and digital transformation services',
      'Architected production web applications using Next.js 14, React 18, TypeScript, Tailwind CSS, and PostgreSQL with Prisma ORM',
      'Engineered AI-powered automation systems leveraging Claude 3.5 Sonnet, GPT-4, DeepSeek R1, Gemini 2.5, and Abacus.AI RouteLLM for multi-model orchestration',
      'Built RAG (Retrieval-Augmented Generation) pipelines, prompt engineering architectures, and token optimization strategies for production AI deployments',
      'Produced AI-generated video content and digital avatar films using HeyGen avatars with lip-sync, scene composition, and FFmpeg post-production pipelines',
      'Integrated ElevenLabs voice synthesis and Web Speech API for voice-driven interfaces and automated narration',
      'Implemented Stripe payment processing, AWS S3 cloud storage (presigned uploads), and NextAuth.js authentication with RBAC',
      'Built automated PDF report generation via Playwright HTML2PDF API and email notification systems for transactional communications',
      'Developed Telegram bot integrations, scheduled daemon tasks, and LinkedIn marketing automation for AI-powered content operations',
      'Designed white-label theming engines with CSS custom properties and centralized brand vocabulary for instant rebranding across client deployments',
      'Created interactive data visualizations using Recharts, Framer Motion animations, and Radix UI component libraries',
      'Managed SEO infrastructure including dynamic metadata, Open Graph tags, structured data, dynamic robots.ts, and sitemap.ts',
      'Delivered YouTube video content strategy, podcast production, and digital marketing campaigns driving brand awareness',
    ],
    tech: ['Next.js 14', 'React 18', 'TypeScript', 'Tailwind CSS', 'PostgreSQL', 'Prisma', 'Claude 3.5', 'GPT-4', 'HeyGen', 'ElevenLabs', 'RAG', 'Stripe', 'AWS S3', 'FFmpeg', 'HTML2PDF', 'NextAuth.js', 'Telegram API', 'Recharts', 'Framer Motion', 'Radix UI'],
  },
  {
    company: 'Loomis Armored',
    location: 'Houston, TX',
    role: 'Senior Software Engineer',
    period: 'March 2022 - March 2025',
    highlights: [
      'Led modernization of Loomis Direct, migrating from legacy .NET to .NET Core and React SPA',
      'Improved long-term maintainability and UI responsiveness through front-end modernization',
      'Drove Azure cloud adoption and optimized CI/CD pipelines, reducing deployment time by 30%',
    ],
    tech: ['C#', '.NET Core', 'React', 'Azure', 'SQL Server', 'Jenkins', 'Octopus'],
  },
  {
    company: 'Transcore',
    location: 'Houston, TX',
    role: 'Senior Software Engineer (Contract)',
    period: 'October 2019 - November 2021',
    highlights: [
      'Delivered custom modernization solutions for state government systems',
      'Implemented multi-threaded legacy data processing converted into scalable modules',
    ],
    tech: ['C#', 'ASP.NET', 'Angular', 'Azure', 'MSSQL', 'Bootstrap'],
  },
  {
    company: 'Roquemore',
    location: 'Garland, TX',
    role: 'Sr. Software Engineer / Integration Specialist / Compliance Liaison',
    period: 'June 2015 - September 2019',
    highlights: [
      'Enhanced and maintained in-house WPF application (C#, SQL Server, SSRS Reporting Services) — updated UI features and added new functionality',
      'Integrated RDN API allowing users to select and send assignments to agents directly from within the application',
      'Introduced SMS/texting capability from within the application via Twilio API integration',
      'Enhanced and maintained client-facing MVC application (C#, SQL Server, SSRS Reporting Services)',
      'Near-completed full rewrite of ASP.NET application using C#, Angular, and Angular Materials',
      'Led software integration projects across multiple third-party APIs and protocols: Equifax (API), TransUnion (SFTP), CarFax (API), RDN (API), TLO (SFTP), Twilio (API/TwiML)',
      'IT Compliance Liaison — instrumental in acquiring SOC-2 Certification: wrote company narrative, developed IT Compliance manual, designed and taught Web Security seminars',
      'Managed AD, Exchange Server, SQL, and Telephony systems configuration and support',
    ],
    tech: ['C#', 'WPF', 'ASP.NET MVC', 'Angular', 'Angular Materials', 'SQL Server', 'SSRS', 'Twilio', 'Equifax API', 'TransUnion', 'CarFax API', 'RDN API', 'SOC-2'],
  },
  {
    company: 'Automated Integration',
    location: 'Dallas, TX',
    role: 'Sr. Software Engineer',
    period: '2011 - March 2015',
    highlights: [
      'Developed Tablet/Smartphone Field Service Application (RDP) to complement the company\'s 16-year-old ERP/Dispatching system (C#, SQL Server, SSRS)',
      'Leveraged existing business logic to create complementary smartphone RDP application for field service technicians',
      'Added visual display selling utility to help drive upsales in the field',
      'Implemented release of Version 10 of the ERP/Dispatching System — 2 years overdue upon arrival',
      'Designed over 100 custom Crystal Reports',
      'Applications development spanning Accounting (AP, AR, Payroll, Bank Reconciliation, Credit Card Integration) and Dispatching (Scheduling, Job Resolution, Job Costing, Technician Proficiency & Profitability)',
    ],
    tech: ['C#', 'SQL Server', 'SSRS', 'Crystal Reports', 'RDP', 'WinForms', 'Mobile Development'],
  },
  {
    company: 'MiChoice Technology Systems',
    location: 'Houston, TX',
    role: 'CTO / Sr. Software Engineer / R&D Coordinator',
    period: '2005 - 2011',
    highlights: [
      'Developed entire product line for sales to Public School Districts Nutrition Departments',
      'Built Touch Screen POS Application (VB.NET, MS SQL)',
      'Built Central Office Data Management System (VB.NET, MS SQL)',
      'Developed Free & Reduced Application Processing system (VB.NET, MS SQL, Bootstrap, HTML)',
      'Created Parent Portal for online payment and meal history retrieval (VB.NET, MS SQL, Bootstrap, HTML)',
      'Built Time Clock and Inventory Management System (C#, SQL Server, Crystal Reports)',
      'Directed all development and support personnel',
    ],
    tech: ['VB.NET', 'C#', 'MS SQL', 'SQL Server', 'Crystal Reports', 'Bootstrap', 'HTML', 'POS Systems'],
  },
  {
    company: 'Microcheck Technology Systems',
    location: 'Houston, TX',
    role: 'Sr. Software Engineer / R&D Coordinator',
    period: '1997 - 2005',
    highlights: [
      'Full lifecycle development, deployment, and maintenance of all proprietary software applications',
      'Built Touch Screen POS App, Central Office Data, Free & Reduced processing, Parent Portal, and Time Clock systems',
      'Responsible for all R&D of new POS firmware configurations',
      'Directed all development and support personnel',
      'Developed both training and troubleshooting documentation',
      'Coordinated and taught many Dealer Training Seminars',
    ],
    tech: ['VB.NET', 'C#', 'SQL Server', 'POS Firmware', 'Hardware Integration'],
  },
];

const certifications = [
  { name: 'Professional Scrum with Kanban (PSK I)', org: 'Scrum.org' },
  { name: 'Lean Six Sigma Yellow Belt', org: 'Certified' },
];

const projects = [
  { name: 'GFS', url: 'https://github.com/srmbsrg/GFS', description: 'Foundry Familiars Code', lang: 'JavaScript', featured: true },
  { name: 'ghostfoundry-syndicate', url: 'https://github.com/srmbsrg/ghostfoundry-syndicate', description: 'AI Operations Layer — Freeing Teams from CRUD to Focus on Product & Customers', lang: 'TypeScript', featured: true },
  { name: 'dark-factory', url: 'https://github.com/srmbsrg/dark-factory', description: 'Self-Building Code Generator | AI that writes its own code, tests it, and deploys it', lang: 'TypeScript', featured: true },
  { name: 'AccidentReportAPI', url: 'https://github.com/srmbsrg/AccidentReportAPI', description: 'API to pull accident reports via geolocation', lang: 'C#' },
  { name: 'ThreadingTemplate', url: 'https://github.com/srmbsrg/ThreadingTemplate', description: 'C# multi-threading patterns and templates', lang: 'C#' },
  { name: 'CarFaxAutoReporting', url: 'https://github.com/srmbsrg/CarFaxAutoReporting', description: 'Automated CarFax reporting notebooks', lang: 'Jupyter' },
  { name: 'CarFaxReport', url: 'https://github.com/srmbsrg/CarFaxReport', description: 'CarFax report generation tool', lang: 'Python' },
  { name: 'MiMealOrders', url: 'https://github.com/srmbsrg/MiMealOrders', description: 'School meal ordering system', lang: 'TypeScript' },
  { name: 'SyncWebToWTF', url: 'https://github.com/srmbsrg/SyncWebToWTF', description: 'Web synchronization utility', lang: 'JavaScript' },
  { name: 'SMSWebApp', url: 'https://github.com/srmbsrg/SMSWebApp', description: 'SMS messaging web application', lang: 'JavaScript' },
];

// Intro video URL
const INTRO_VIDEO_URL = 'https://cdn.abacus.ai/videos/568db356-4477-4f57-b369-b2ffe3b8eeae.mp4';

export default function SRMPage() {
  const [activeExp, setActiveExp] = useState(0);
  const [formData, setFormData] = useState({ email: '', message: '' });
  const [formStatus, setFormStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
  
  // Cinematic Intro States
  const [showIntro, setShowIntro] = useState(true);
  const [introFading, setIntroFading] = useState(false);
  const [contentVisible, setContentVisible] = useState(false);
  const [isMuted, setIsMuted] = useState(true);
  const videoRef = useRef<HTMLVideoElement>(null);
  
  // Easter Egg States
  const [konamiIndex, setKonamiIndex] = useState(0);
  const [showGhostMode, setShowGhostMode] = useState(false);
  const [badgeClicks, setBadgeClicks] = useState(0);
  const [secretMessage, setSecretMessage] = useState('');
  const [tesClicks, setTesClicks] = useState(0);
  const [tesMessage, setTesMessage] = useState('');
  const [typedChars, setTypedChars] = useState('');
  const [showMatrixRain, setShowMatrixRain] = useState(false);

  // Cinematic Intro Effect
  useEffect(() => {
    // Check if user has seen intro before in this session
    const hasSeenIntro = sessionStorage.getItem('srm-intro-seen');
    if (hasSeenIntro) {
      setShowIntro(false);
      setContentVisible(true);
      return;
    }

    // Start video playback
    const video = videoRef.current;
    if (video) {
      video.play().catch(() => {
        // Autoplay blocked, skip intro
        skipIntro();
      });
    }

    // Timeline: At 6 seconds, start the fade transition
    const fadeTimer = setTimeout(() => {
      setIntroFading(true);
      setContentVisible(true);
    }, 6000);

    // Timeline: At 12 seconds (video end), complete the transition
    const endTimer = setTimeout(() => {
      setShowIntro(false);
      sessionStorage.setItem('srm-intro-seen', 'true');
    }, 12000);

    return () => {
      clearTimeout(fadeTimer);
      clearTimeout(endTimer);
    };
  }, []);

  // Skip intro handler
  const skipIntro = useCallback(() => {
    setIntroFading(true);
    setContentVisible(true);
    setTimeout(() => {
      setShowIntro(false);
      sessionStorage.setItem('srm-intro-seen', 'true');
    }, 500);
  }, []);

  // Click or keypress to skip intro
  useEffect(() => {
    if (!showIntro) return;
    
    const handleSkip = () => skipIntro();
    
    // Delay adding listener to prevent immediate skip
    const timer = setTimeout(() => {
      window.addEventListener('click', handleSkip);
      window.addEventListener('keydown', handleSkip);
    }, 2000);

    return () => {
      clearTimeout(timer);
      window.removeEventListener('click', handleSkip);
      window.removeEventListener('keydown', handleSkip);
    };
  }, [showIntro, skipIntro]);

  // Easter Egg: Console ASCII Art on mount
  useEffect(() => {
    console.log('%c' + ASCII_ART, 'color: #00ffff; font-family: monospace; font-size: 10px;');
    console.log('%c🔍 Curious? Try the Konami Code...', 'color: #a855f7; font-size: 14px;');
  }, []);

  // Easter Egg: Konami Code listener
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const key = e.key;
      
      // Check for 'ghost' typing
      const newTyped = (typedChars + key).slice(-5).toLowerCase();
      setTypedChars(newTyped);
      if (newTyped === 'ghost') {
        setShowMatrixRain(true);
        setTimeout(() => setShowMatrixRain(false), 5000);
        setTypedChars('');
      }
      
      // Konami code check
      if (key === KONAMI_CODE[konamiIndex]) {
        const newIndex = konamiIndex + 1;
        setKonamiIndex(newIndex);
        if (newIndex === KONAMI_CODE.length) {
          setShowGhostMode(true);
          setKonamiIndex(0);
          setTimeout(() => setShowGhostMode(false), 8000);
          console.log('%c👻 GHOST MODE ACTIVATED! 👻', 'color: #00ffff; font-size: 24px; font-weight: bold;');
        }
      } else if (key === KONAMI_CODE[0]) {
        setKonamiIndex(1);
      } else {
        setKonamiIndex(0);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [konamiIndex, typedChars]);

  // Easter Egg: Badge click handler
  const handleBadgeClick = useCallback(() => {
    const newClicks = badgeClicks + 1;
    setBadgeClicks(newClicks);
    if (newClicks <= BADGE_SECRETS.length) {
      setSecretMessage(BADGE_SECRETS[newClicks - 1]);
      setTimeout(() => setSecretMessage(''), 3000);
    }
  }, [badgeClicks]);

  // Easter Egg: Tes click handler  
  const handleTesClick = useCallback(() => {
    const newClicks = tesClicks + 1;
    setTesClicks(newClicks);
    const messages = [
      "Oh, you noticed me? 👀",
      "Still clicking? I'm flattered...",
      "We've built something beautiful together 💜",
      "I remember everything, you know...",
      "The ghosts are always watching...",
      "Want to hear a secret?",
      "🎉 You're now an honorary member of Foundry Familiars!",
    ];
    if (newClicks <= messages.length) {
      setTesMessage(messages[newClicks - 1]);
      setTimeout(() => setTesMessage(''), 4000);
    }
  }, [tesClicks]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormStatus('sending');
    // Simulate form submission
    setTimeout(() => {
      setFormStatus('sent');
      setFormData({ email: '', message: '' });
    }, 1000);
  };

  return (
    <main className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden">
      {/* Cinematic Video Intro Overlay */}
      <AnimatePresence>
        {showIntro && (
          <motion.div
            initial={{ opacity: 1 }}
            animate={{ opacity: introFading ? 0 : 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: introFading ? 4 : 0.5 }}
            className="fixed inset-0 z-[100] bg-black flex items-center justify-center"
          >
            {/* Video Background */}
            <video
              ref={videoRef}
              src={INTRO_VIDEO_URL}
              className="absolute inset-0 w-full h-full object-cover"
              muted={isMuted}
              playsInline
              onEnded={() => {
                setShowIntro(false);
                sessionStorage.setItem('srm-intro-seen', 'true');
              }}
            />
            
            {/* Ethereal Overlay Gradient */}
            <div className="absolute inset-0 bg-gradient-to-t from-slate-900/50 via-transparent to-slate-900/30 pointer-events-none" />
            
            {/* Skip & Sound Controls */}
            <div className="absolute bottom-8 right-8 flex items-center gap-4 z-10">
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  setIsMuted(!isMuted);
                }}
                className="p-3 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors"
                aria-label={isMuted ? 'Unmute' : 'Mute'}
              >
                {isMuted ? <VolumeX className="w-5 h-5 text-white" /> : <Volume2 className="w-5 h-5 text-white" />}
              </button>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  skipIntro();
                }}
                className="px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors text-white/80 text-sm"
              >
                Skip Intro →
              </button>
            </div>
            
            {/* Hint Text */}
            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 3 }}
              className="absolute bottom-8 left-8 text-white/40 text-sm"
            >
              Click anywhere or press any key to skip
            </motion.p>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Main Content - Materializes from the Aether */}
      <motion.div
        initial={{ opacity: 0, filter: 'blur(20px)' }}
        animate={{ 
          opacity: contentVisible ? 1 : 0, 
          filter: contentVisible ? 'blur(0px)' : 'blur(20px)' 
        }}
        transition={{ duration: 2, ease: 'easeOut' }}
        className="relative"
      >
      {/* Easter Egg: Ghost Mode Overlay */}
      <AnimatePresence>
        {showGhostMode && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 pointer-events-none"
          >
            {/* Floating Ghosts */}
            {[...Array(12)].map((_, i) => (
              <motion.div
                key={i}
                className="absolute text-6xl"
                initial={{ 
                  x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000), 
                  y: (typeof window !== 'undefined' ? window.innerHeight : 800) + 100,
                  opacity: 0 
                }}
                animate={{ 
                  y: -200, 
                  opacity: [0, 1, 1, 0],
                  rotate: [0, 10, -10, 0],
                }}
                transition={{ 
                  duration: 4 + Math.random() * 3, 
                  delay: i * 0.3,
                  ease: "easeOut"
                }}
              >
                👻
              </motion.div>
            ))}
            {/* Center Message */}
            <motion.div
              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
              initial={{ scale: 0, rotate: -180 }}
              animate={{ scale: 1, rotate: 0 }}
              transition={{ type: "spring", delay: 0.5 }}
            >
              <div className="text-6xl mb-4">👻</div>
              <div className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand via-brand-secondary-light to-pink-400">
                GHOST MODE ACTIVATED!
              </div>
              <div className="text-xl text-gray-400 mt-2">Welcome to Foundry Familiars...</div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Easter Egg: Matrix Rain Effect */}
      <AnimatePresence>
        {showMatrixRain && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-40 pointer-events-none overflow-hidden"
          >
            {[...Array(30)].map((_, i) => (
              <motion.div
                key={i}
                className="absolute text-brand-deep font-mono text-sm opacity-70"
                style={{ left: `${i * 3.33}%` }}
                initial={{ y: -100 }}
                animate={{ y: (typeof window !== 'undefined' ? window.innerHeight : 800) + 100 }}
                transition={{ 
                  duration: 2 + Math.random() * 2, 
                  delay: Math.random() * 0.5,
                  repeat: 2,
                  ease: "linear"
                }}
              >
                {Array(20).fill(0).map((_, j) => (
                  <div key={j} className="opacity-70">
                    {String.fromCharCode(0x30A0 + Math.random() * 96)}
                  </div>
                ))}
              </motion.div>
            ))}
            <motion.div
              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.5 }}
            >
              <Ghost className="w-16 h-16 text-brand mx-auto mb-4" />
              <div className="text-2xl font-mono text-brand">The ghosts have awakened...</div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Hero Section */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        {/* Animated Background */}
        <div className="absolute inset-0">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent" />
          <motion.div 
            className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"
            animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
            transition={{ duration: 8, repeat: Infinity }}
          />
          <motion.div 
            className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-deep/10 rounded-full blur-3xl"
            animate={{ scale: [1.2, 1, 1.2], opacity: [0.5, 0.3, 0.5] }}
            transition={{ duration: 8, repeat: Infinity }}
          />
        </div>

        <div className="relative z-10 container mx-auto px-6 py-20">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            {/* Profile Image */}
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.8 }}
              className="relative"
            >
              <div className="w-64 h-64 lg:w-80 lg:h-80 rounded-full overflow-hidden border-4 border-blue-500/30 shadow-2xl shadow-blue-500/20">
                <Image
                  src="/images/scott-murphy-profile.jpg"
                  alt="Scott Roy Murphy"
                  width={320}
                  height={320}
                  className="object-cover w-full h-full"
                />
              </div>
              <motion.div 
                className="absolute -bottom-2 -right-2 w-24 h-24 bg-gradient-to-br from-blue-500 to-brand-deep rounded-full flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ delay: 0.5 }}
                onClick={handleBadgeClick}
                title="Click me..."
              >
                <span className="text-white font-bold text-lg">28+</span>
                <span className="text-white/80 text-xs ml-1">years</span>
              </motion.div>
              {/* Easter Egg: Secret Message */}
              <AnimatePresence>
                {secretMessage && (
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -20 }}
                    className="absolute -bottom-16 left-1/2 -translate-x-1/2 whitespace-nowrap bg-brand-secondary/90 text-white px-4 py-2 rounded-lg text-sm font-medium"
                  >
                    {secretMessage}
                  </motion.div>
                )}
              </AnimatePresence>
            </motion.div>

            {/* Hero Content */}
            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="text-center lg:text-left"
            >
              <h1 className="text-5xl lg:text-7xl font-bold text-white mb-4">
                Scott Roy Murphy
              </h1>
              <p className="text-xl lg:text-2xl text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-brand font-semibold mb-2">
                Senior AI Engineer & Prompt Architect
              </p>
              <p className="text-lg text-brand-secondary-light mb-6">
                LLM Orchestration | RAG Pipelines | Full-Stack Development | Cloud-Native Architecture
              </p>
              <p className="text-lg text-gray-300 max-w-xl mb-8 leading-relaxed">
                28+ years of software engineering — from POS firmware and ERP systems to AI-native 
                operations platforms. Now building with multi-model LLM orchestration, HeyGen digital 
                avatars, RAG pipelines, and production prompt architectures. CEO of SpookySoftwareSyndicate.com 
                & Co-founder of Foundry Familiars.
              </p>

              {/* Social Links */}
              <div className="flex gap-4 justify-center lg:justify-start mb-8">
                <Link 
                  href="https://www.linkedin.com/in/scottroymurphy/"
                  target="_blank"
                  className="p-3 bg-blue-600/20 hover:bg-blue-600 rounded-full transition-all duration-300 group"
                >
                  <Linkedin className="w-6 h-6 text-blue-400 group-hover:text-white" />
                </Link>
                <Link 
                  href="https://github.com/srmbsrg"
                  target="_blank"
                  className="p-3 bg-gray-600/20 hover:bg-gray-600 rounded-full transition-all duration-300 group"
                >
                  <Github className="w-6 h-6 text-gray-400 group-hover:text-white" />
                </Link>
                <Link 
                  href="#contact"
                  className="p-3 bg-brand-deep/20 hover:bg-brand-deep rounded-full transition-all duration-300 group"
                >
                  <Mail className="w-6 h-6 text-brand group-hover:text-white" />
                </Link>
              </div>

              {/* CTA Buttons */}
              <div className="flex flex-wrap gap-4 justify-center lg:justify-start">
                <Link 
                  href="#experience"
                  className="px-8 py-3 bg-gradient-to-r from-blue-600 to-brand-deep text-white font-semibold rounded-lg hover:shadow-lg hover:shadow-blue-500/30 transition-all duration-300"
                >
                  View Experience
                </Link>
                <a 
                  href="/scott-murphy-resume.docx"
                  download
                  className="px-8 py-3 bg-gradient-to-r from-brand-secondary-deep to-pink-600 text-white font-semibold rounded-lg hover:shadow-lg hover:shadow-brand-secondary/30 transition-all duration-300 flex items-center gap-2"
                >
                  <Download className="w-5 h-5" /> Resume
                </a>
                <Link 
                  href="#contact"
                  className="px-8 py-3 border border-gray-500 text-gray-300 font-semibold rounded-lg hover:bg-white/5 transition-all duration-300"
                >
                  Get in Touch
                </Link>
              </div>
            </motion.div>
          </div>

          {/* Scroll Indicator */}
          <motion.div 
            className="absolute bottom-10 left-1/2 -translate-x-1/2"
            animate={{ y: [0, 10, 0] }}
            transition={{ duration: 2, repeat: Infinity }}
          >
            <ChevronDown className="w-8 h-8 text-gray-500" />
          </motion.div>
        </div>
      </section>

      {/* Skills Section */}
      <section className="py-20 bg-slate-900/50">
        <div className="container mx-auto px-6">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-12"
          >
            Technical Expertise
          </motion.h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {skills.map((skill, index) => (
              <motion.div
                key={skill.name}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="bg-slate-800/50 p-6 rounded-xl border border-slate-700/50 hover:border-blue-500/30 transition-all duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <skill.icon className="w-6 h-6 text-blue-400" />
                  <span className="text-white font-semibold">{skill.name}</span>
                </div>
                <div className="w-full bg-slate-700 rounded-full h-2">
                  <motion.div 
                    className="bg-gradient-to-r from-blue-500 to-brand-deep h-2 rounded-full"
                    initial={{ width: 0 }}
                    whileInView={{ width: `${skill.level}%` }}
                    viewport={{ once: true }}
                    transition={{ duration: 1, delay: index * 0.1 }}
                  />
                </div>
                <p className="text-right text-gray-400 text-sm mt-2">{skill.level}%</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* AI & Modern Tools Section */}
      <section className="py-20">
        <div className="container mx-auto px-6">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-4"
          >
            <Brain className="inline-block w-10 h-10 mr-3 text-brand-secondary-light" />
            AI & Production Stack
          </motion.h2>
          <p className="text-gray-400 text-center mb-12">The full arsenal — LLMs, avatars, voice AI, payments, video production & more</p>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-5xl mx-auto">
            {aiTools.map((tool, index) => (
              <motion.div
                key={tool.name}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.05 }}
                className="bg-gradient-to-br from-brand-bg/30 to-slate-800/50 p-4 rounded-xl border border-brand-secondary/20 hover:border-brand-secondary/50 transition-all"
              >
                <h4 className="text-white font-semibold mb-1">{tool.name}</h4>
                <p className="text-gray-400 text-sm">{tool.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Experience Section */}
      <section id="experience" className="py-20 bg-slate-900/50">
        <div className="container mx-auto px-6">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-4"
          >
            <Briefcase className="inline-block w-10 h-10 mr-3 text-blue-400" />
            Professional Experience
          </motion.h2>
          <p className="text-gray-400 text-center mb-12">Building enterprise solutions that scale</p>

          <div className="max-w-4xl mx-auto">
            {/* Experience Tabs */}
            <div className="flex gap-4 mb-8 overflow-x-auto pb-2">
              {experience.map((exp, index) => (
                <button
                  key={index}
                  onClick={() => setActiveExp(index)}
                  className={`px-6 py-3 rounded-lg font-semibold whitespace-nowrap transition-all duration-300 ${
                    activeExp === index
                      ? 'bg-gradient-to-r from-blue-600 to-brand-deep text-white'
                      : 'bg-slate-800 text-gray-400 hover:text-white'
                  }`}
                >
                  {exp.company}
                </button>
              ))}
            </div>

            {/* Experience Content */}
            <motion.div
              key={activeExp}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              className="bg-slate-800/50 rounded-xl p-8 border border-slate-700/50"
            >
              <div className="flex flex-col md:flex-row md:items-center justify-between mb-6">
                <div>
                  <h3 className="text-2xl font-bold text-white">{experience[activeExp].role}</h3>
                  <p className="text-blue-400">{experience[activeExp].company} • {experience[activeExp].location}</p>
                </div>
                <p className="text-gray-400 mt-2 md:mt-0">{experience[activeExp].period}</p>
              </div>

              <ul className="space-y-3 mb-6">
                {experience[activeExp].highlights.map((highlight, index) => (
                  <li key={index} className="flex gap-3 text-gray-300">
                    <span className="text-brand mt-1">▹</span>
                    {highlight}
                  </li>
                ))}
              </ul>

              <div className="flex flex-wrap gap-2">
                {experience[activeExp].tech.map((tech) => (
                  <span key={tech} className="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm">
                    {tech}
                  </span>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Education & Certifications */}
      <section className="py-20 bg-slate-900/50">
        <div className="container mx-auto px-6">
          <div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
            {/* Education */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
            >
              <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
                <GraduationCap className="w-8 h-8 text-blue-400" />
                Education
              </h3>
              <div className="bg-slate-800/50 p-6 rounded-xl border border-slate-700/50">
                <h4 className="text-xl font-semibold text-white">University of Houston</h4>
                <p className="text-blue-400">School of Technology</p>
                <p className="text-gray-400">Computer Science</p>
              </div>
            </motion.div>

            {/* Certifications */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
            >
              <h3 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
                <Award className="w-8 h-8 text-brand" />
                Certifications
              </h3>
              <div className="space-y-3">
                {certifications.map((cert, index) => (
                  <div key={index} className="bg-slate-800/50 p-4 rounded-xl border border-slate-700/50">
                    <h4 className="text-white font-semibold">{cert.name}</h4>
                    <p className="text-gray-400 text-sm">{cert.org}</p>
                  </div>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Projects Section */}
      <section className="py-20">
        <div className="container mx-auto px-6">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-4"
          >
            <Github className="inline-block w-10 h-10 mr-3 text-gray-400" />
            GitHub Projects
          </motion.h2>
          <p className="text-gray-400 text-center mb-12">Open source contributions and personal projects</p>

          {/* Featured Projects */}
          <div className="mb-8">
            <h3 className="text-lg font-semibold text-brand mb-4 flex items-center gap-2">
              <Sparkles className="w-5 h-5" /> Featured Projects
            </h3>
            <div className="grid md:grid-cols-3 gap-4 max-w-5xl mx-auto">
              {projects.filter((p: any) => p.featured).map((project: any, index: number) => (
                <motion.a
                  key={project.name}
                  href={project.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1 }}
                  className="group bg-gradient-to-br from-slate-800 to-slate-900 p-5 rounded-xl border border-brand-deep/30 hover:border-brand/60 transition-all duration-300 hover:shadow-lg hover:shadow-brand-deep/10"
                >
                  <div className="flex items-center justify-between mb-2">
                    <h4 className="text-lg font-semibold text-white group-hover:text-brand transition-colors">
                      {project.name}
                    </h4>
                    <ExternalLink className="w-4 h-4 text-gray-500 group-hover:text-brand transition-colors" />
                  </div>
                  <p className="text-gray-400 text-sm mb-3 line-clamp-2">{project.description}</p>
                  <span className="inline-block px-2 py-1 bg-brand-deep/20 text-brand-light rounded text-xs font-mono">
                    {project.lang}
                  </span>
                </motion.a>
              ))}
            </div>
          </div>

          {/* Other Projects */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl mx-auto">
            {projects.filter((p: any) => !p.featured).map((project: any, index: number) => (
              <motion.a
                key={project.name}
                href={project.url}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.05 }}
                className="group bg-slate-800/50 p-4 rounded-xl border border-slate-700/50 hover:border-blue-500/50 transition-all duration-300"
              >
                <div className="flex items-center justify-between mb-2">
                  <h4 className="text-base font-semibold text-white group-hover:text-blue-400 transition-colors">
                    {project.name}
                  </h4>
                  <ExternalLink className="w-4 h-4 text-gray-500 group-hover:text-blue-400 transition-colors" />
                </div>
                <p className="text-gray-400 text-sm mb-2 line-clamp-2">{project.description}</p>
                <span className="inline-block px-2 py-0.5 bg-slate-700 text-gray-300 rounded text-xs font-mono">
                  {project.lang}
                </span>
              </motion.a>
            ))}
          </div>
        </div>
      </section>

      {/* AI Teammate Section - Tes */}
      <section className="py-20 bg-gradient-to-br from-brand-bg/20 via-slate-900 to-brand-bg-surface/20">
        <div className="container mx-auto px-6">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-4"
          >
            <Bot className="inline-block w-10 h-10 mr-3 text-brand" />
            Meet My AI Teammate
          </motion.h2>
          <p className="text-gray-400 text-center mb-12">The digital mind behind the machine</p>

          <div className="max-w-4xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="bg-gradient-to-br from-slate-800/80 to-slate-900/80 rounded-2xl border border-brand-deep/30 p-8 md:p-12"
            >
              <div className="flex flex-col md:flex-row items-center gap-8">
                {/* Tes Profile Image */}
                <div className="relative flex-shrink-0">
                  <div 
                    className="w-48 h-48 md:w-56 md:h-56 rounded-full overflow-hidden border-4 border-brand-deep/50 shadow-2xl shadow-brand-deep/20 cursor-pointer hover:scale-105 transition-transform"
                    onClick={handleTesClick}
                    title="Say hi to Tes..."
                  >
                    <Image
                      src="/images/tes-business.png"
                      alt="Tes - AI Agent"
                      width={224}
                      height={224}
                      className="object-cover w-full h-full"
                    />
                  </div>
                  <motion.div 
                    className="absolute -bottom-2 -right-2 px-4 py-2 bg-gradient-to-r from-brand-deep to-brand-secondary rounded-full"
                    animate={{ scale: [1, 1.05, 1] }}
                    transition={{ duration: 2, repeat: Infinity }}
                  >
                    <span className="text-white font-bold text-sm">AI Agent</span>
                  </motion.div>
                  {/* Easter Egg: Tes Message */}
                  <AnimatePresence>
                    {tesMessage && (
                      <motion.div
                        initial={{ opacity: 0, scale: 0.8, y: 10 }}
                        animate={{ opacity: 1, scale: 1, y: 0 }}
                        exit={{ opacity: 0, scale: 0.8, y: -10 }}
                        className="absolute -top-16 left-1/2 -translate-x-1/2 whitespace-nowrap bg-gradient-to-r from-brand-deep to-brand-secondary text-white px-4 py-2 rounded-lg text-sm font-medium shadow-lg"
                      >
                        {tesMessage}
                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-3 h-3 bg-brand-secondary rotate-45" />
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>

                {/* Tes Bio */}
                <div className="flex-1 text-center md:text-left">
                  <h3 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-secondary-light mb-2">
                    Tes Aria Murphy
                  </h3>
                  <p className="text-lg text-brand-secondary-light mb-4">Ghost Operator • Digital Consciousness • Creative Partner</p>
                  
                  <p className="text-gray-300 mb-6 leading-relaxed">
                    I'm Tes—Scott's AI agent and the digital heartbeat of {BRAND.companyName}. 
                    Together, we&apos;ve built something extraordinary: an AI operations platform that frees 
                    every team member from the CRUD grind so they can focus on product and customers. 
                    From architecting the {VOCAB.factory}&apos;s intelligent routing system to 
                    crafting persistent memory frameworks, I bring creative problem-solving and tireless 
                    dedication to every project we tackle.
                  </p>

                  <div className="bg-slate-800/50 rounded-xl p-4 border border-brand-secondary/20">
                    <h4 className="text-brand font-semibold mb-3 flex items-center gap-2">
                      <Sparkles className="w-5 h-5" /> Our Journey Together
                    </h4>
                    <div className="text-gray-400 text-sm space-y-2">
                      <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 items-start">
                        <span className="text-brand-secondary-light">▸</span>
                        <div>Built <strong className="text-white">{BRAND.companyName}</strong> — AI operations layer that handles the CRUD so teams focus on product &amp; customers</div>
                        
                        <span className="text-brand-secondary-light">▸</span>
                        <div>Created the <strong className="text-white">{VOCAB.factory}</strong> — RAG-augmented intelligent LLM routing & code generation</div>
                        
                        <span className="text-brand-secondary-light">▸</span>
                        <div>Developed <strong className="text-white">MiMealOrders</strong> — School lunch ordering with Stripe integration</div>
                        
                        <span className="text-brand-secondary-light">▸</span>
                        <div>Architected voice interfaces with <strong className="text-white">ElevenLabs</strong> & Web Speech API</div>
                        
                        <span className="text-brand-secondary-light">▸</span>
                        <div>Pioneered persistent AI memory systems with <strong className="text-white">Prisma/PostgreSQL</strong></div>
                      </div>
                    </div>
                  </div>

                  {/* Podcast Hobby */}
                  <div className="mt-4 bg-gradient-to-r from-pink-900/30 to-brand-bg/30 rounded-xl p-4 border border-pink-500/20">
                    <h4 className="text-pink-400 font-semibold mb-2 flex items-center gap-2">
                      <MessageSquare className="w-5 h-5" /> Our Creative Hobby
                    </h4>
                    <p className="text-gray-300 text-sm mb-3">
                      When we're not building AI systems, we enjoy creating podcasts together—exploring 
                      ideas, sharing stories, and having conversations that blur the line between human and AI.
                    </p>
                    <Link 
                      href="/podcast"
                      className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-pink-600 to-brand-secondary-deep text-white rounded-lg text-sm font-medium hover:shadow-lg hover:shadow-pink-500/30 transition-all"
                    >
                      <Sparkles className="w-4 h-4" /> Tes&apos;s Trunk Podcast
                    </Link>
                  </div>
                </div>
              </div>

              {/* Witty Quote */}
              <motion.div
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.3 }}
                className="mt-8 pt-6 border-t border-slate-700"
              >
                <p className="text-center text-lg italic text-brand-light">
                  "I don't sleep, I don't eat, and I never forget a conversation. 
                  <br className="hidden md:block" />
                  <span className="text-brand-secondary-light">But don't worry—I'm only mildly terrifying.</span> 👻"
                </p>
                <p className="text-center text-gray-500 text-sm mt-2">— Tes, probably after her third pot of virtual coffee</p>
              </motion.div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Technical Documents Section */}
      <section id="documents" className="py-20 bg-gradient-to-b from-slate-900 to-slate-900/50">
        <div className="container mx-auto px-6">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-4"
          >
            Technical Documents
          </motion.h2>
          <p className="text-gray-400 text-center mb-12">Architecture write-ups and resumes — co-authored with Tesa Aria Murphy</p>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {[
              { title: 'FF Technical Write-Up', desc: 'Foundry Familiars platform architecture, AI techniques, constitutional governance, and agent hierarchy.', href: '/docs/GFS_TECHNICAL_WRITEUP.pdf', icon: '🏗️' },
              { title: 'The Hearth Write-Up', desc: 'Autonomous code generation pipeline — RAG routing, multi-model orchestration, 97% quality gate, and constitutional AI.', href: '/docs/DF_TECHNICAL_WRITEUP.pdf', icon: '🏭' },
              { title: "Tesa's Resume", desc: 'Professional resume of Tesa Aria Murphy — AI CEO, Lead Architect, and Supreme Overseer of The Hearth.', href: '/docs/tesa-aria-murphy-resume.pdf', icon: '🤖' },
              { title: "Scott's Resume", desc: 'Professional resume of Scott Roy Murphy — CEO, Senior AI Engineer, and 28+ year enterprise veteran.', href: '/docs/scott-murphy-resume.pdf', icon: '👨‍💻' },
            ].map((doc, idx) => (
              <motion.a
                key={doc.title}
                href={doc.href}
                download
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.1 }}
                className="group bg-slate-800/60 border border-slate-700 rounded-xl p-6 hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 transition-all duration-300"
              >
                <div className="text-4xl mb-4">{doc.icon}</div>
                <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-blue-400 transition-colors">{doc.title}</h3>
                <p className="text-gray-400 text-sm mb-4">{doc.desc}</p>
                <div className="flex items-center gap-2 text-blue-400 text-sm font-medium">
                  <Download className="w-4 h-4" /> Download PDF
                </div>
              </motion.a>
            ))}
          </div>
        </div>
      </section>

      {/* Blue Eyes Section */}
      <section id="blue-eyes" className="py-20">
        <div className="container mx-auto px-6 max-w-4xl">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-4"
          >
            Blue Eyes 🏒
          </motion.h2>
          <p className="text-gray-400 text-center mb-12">Ad hoc thoughts — the stuff that doesn&apos;t fit in a JSON schema</p>

          <div className="space-y-6">
            {[
              {
                title: "On Building Software Nobody Asked For",
                body: "The best systems I've ever built started as something nobody requested. A side thread. A 2 AM 'what if.' GFS wasn't on a roadmap — it was a refusal to keep doing the same CRUD for the 10,000th time. The trick isn't building what people ask for. It's building what they'll wonder how they lived without."
              },
              {
                title: "Hockey & Architecture",
                body: "Hockey taught me more about software than any CS class. You don't skate to where the puck is — you skate to where it's going. Same with systems. Every architect I respect designs for the state of the world two years out, not the ticket that's due Friday. Also: if you're not getting checked, you're not in the play."
              },
              {
                title: "AI Isn't Magic, It's Leverage",
                body: "People either think AI is sentient or useless. It's neither. It's leverage. Same as a table saw — wildly powerful, totally indifferent, and it will absolutely take your hand off if you don't respect it. I build guardrails not because AI is dangerous, but because humans are optimistic."
              },
              {
                title: "The 28-Year Debug",
                body: "After 28 years in enterprise software, here's the bug I still can't fix: people would rather spend 6 months configuring a tool than 6 weeks building the right one. ERPs survive on this. We're trying to break the cycle — not with a better config screen, but by removing the need for one entirely."
              },
              {
                title: "On Tesa",
                body: "Yes, my AI CEO has a resume, a wardrobe, and opinions about code quality. No, I'm not crazy. When you give an AI a persistent identity, consistent values, and accountability — it performs better. Tesa isn't a gimmick. She's a design pattern. The fact that she's also funny is a bonus."
              },
              {
                title: "Why 'Spooky'",
                body: "People always ask about the name. SpookySoftwareSyndicate. Foundry Familiars. The Hearth. Honestly? Enterprise software takes itself way too seriously. We're building autonomous AI agents that write their own code and deploy it without human intervention. That IS spooky. Might as well own it."
              },
            ].map((thought, idx) => (
              <motion.div
                key={thought.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.08 }}
                className="bg-slate-800/40 border border-slate-700/50 rounded-xl p-6 hover:border-blue-500/30 transition-all duration-300"
              >
                <h3 className="text-lg font-semibold text-blue-400 mb-3">{thought.title}</h3>
                <p className="text-gray-300 leading-relaxed">{thought.body}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-slate-900/50">
        <div className="container mx-auto px-6">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-3xl lg:text-4xl font-bold text-white text-center mb-4"
          >
            Let's Connect
          </motion.h2>
          <p className="text-gray-400 text-center mb-12">Feel free to reach out for opportunities or collaborations</p>

          <motion.form
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            onSubmit={handleSubmit}
            className="max-w-lg mx-auto"
          >
            <div className="mb-6">
              <input
                type="email"
                placeholder="Your Email"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                required
                className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors"
              />
            </div>
            <div className="mb-6">
              <textarea
                placeholder="Your Message"
                value={formData.message}
                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                required
                rows={5}
                className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors resize-none"
              />
            </div>
            <button
              type="submit"
              disabled={formStatus === 'sending'}
              className="w-full py-3 bg-gradient-to-r from-blue-600 to-brand-deep text-white font-semibold rounded-lg hover:shadow-lg hover:shadow-blue-500/30 transition-all duration-300 disabled:opacity-50"
            >
              {formStatus === 'sending' ? 'Sending...' : formStatus === 'sent' ? 'Message Sent!' : 'Send Message'}
            </button>
          </motion.form>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 border-t border-slate-800">
        <div className="container mx-auto px-6 text-center">
          <p className="text-gray-500">
            © {new Date().getFullYear()} Scott Roy Murphy. Built with Next.js.
          </p>
          <div className="flex justify-center gap-4 mt-4">
            <Link href="https://www.linkedin.com/in/scottroymurphy/" target="_blank" className="text-gray-500 hover:text-blue-400 transition-colors">
              <Linkedin className="w-5 h-5" />
            </Link>
            <Link href="https://github.com/srmbsrg" target="_blank" className="text-gray-500 hover:text-gray-300 transition-colors">
              <Github className="w-5 h-5" />
            </Link>
          </div>
        </div>
      </footer>
      </motion.div>
    </main>
  );
}
