'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
/* eslint-disable @typescript-eslint/no-unused-vars */
import {
  Ghost, Factory, GraduationCap, Radio, ShoppingBag, FileText,
  Calculator, Swords, Newspaper, Users, Briefcase, Shield, Brain,
  BookOpen, Wrench, Monitor, Sparkles, Camera, Lock, Podcast,
  Play, Film, Clapperboard, Trophy, Zap, Eye, Map, Copy, Check, Clock,
  Ticket, Cake, Database, Palette, LogIn, UserPlus, KeyRound,
  FolderPlus, Settings, FlaskConical, Workflow, CreditCard,
  Contact, Target, Receipt, FileSearch, Building2, Wallet,
  CalendarDays, Package, Truck, Store, Terminal, ShoppingCart,
  ScrollText, MessageSquare, Archive, CheckSquare, TestTube
} from 'lucide-react';

const DOMAIN = 'https://spookysoftwaresyndicate.com';

interface SiteLink {
  href: string;
  label: string;
  description: string;
  icon: React.ReactNode;
  badge?: string;
}

interface SiteSection {
  title: string;
  description: string;
  links: SiteLink[];
}

const SECTIONS: SiteSection[] = [
  {
    title: '🏠 Public Website',
    description: 'Main marketing site, competitive positioning, and lead generation',
    links: [
      { href: '/', label: 'Home', description: 'Landing page — hero, features, how-it-works, pricing, design partner signup', icon: <Ghost className="w-4 h-4" /> },
      { href: '/vs-erp', label: 'vs ERP', description: 'Competitive comparison — why AI-native ops beats legacy enterprise software', icon: <Swords className="w-4 h-4" /> },
      { href: '/roi-calculator', label: 'ROI Calculator', description: 'Interactive calculator with ERP comparison mode, charts, and export', icon: <Calculator className="w-4 h-4" /> },
      { href: '/blog', label: 'Blog', description: 'Thought leadership content hub', icon: <Newspaper className="w-4 h-4" /> },
      { href: '/blog/why-erp-is-dead', label: '→ Why I\'ll Never Implement Another ERP', description: 'Flagship blog post on the post-ERP era', icon: <FileText className="w-4 h-4" /> },
      { href: '/press-kit', label: 'Press Kit', description: 'Brand assets, messaging, and media resources', icon: <Briefcase className="w-4 h-4" /> },
      { href: '/login', label: 'Login', description: 'Authentication page for Hearth Control and admin access', icon: <LogIn className="w-4 h-4" /> },
      { href: '/master-map', label: 'Master Site Map', description: 'This page — complete URL index of every page on the site', icon: <Map className="w-4 h-4" /> },
    ],
  },
  {
    title: '📄 Sales & Demo',
    description: 'Sales enablement, demo walkthrough, and scoping tools',
    links: [
      { href: '/sales', label: 'Sales Hub', description: 'Platform demo video, collateral downloads, ROI tools, competitive intel — everything for champions', icon: <Play className="w-4 h-4" /> },
      { href: '/services/ai-scope', label: 'AI Scoping Tool', description: 'Structured intake form for prospective projects', icon: <Wrench className="w-4 h-4" /> },
      { href: '/services/ai-scope/intake', label: '→ Intake Form', description: 'Full project scoping questionnaire', icon: <FileText className="w-4 h-4" /> },
    ],
  },
  {
    title: '📚 Documentation',
    description: 'Technical docs, architecture write-ups, and user manual',
    links: [
      { href: '/docs', label: 'Docs Hub', description: 'Central documentation index — all technical write-ups', icon: <BookOpen className="w-4 h-4" /> },
      { href: '/docs/gfs', label: '→ FF Architecture', description: 'Foundry Familiars platform architecture and subsystems', icon: <Ghost className="w-4 h-4" /> },
      { href: '/docs/dark-factory', label: '→ The Hearth', description: 'Autonomous code generation pipeline — Intake, Entity Modeling, Weft, Sentinel, RAG', icon: <Factory className="w-4 h-4" /> },
      { href: '/docs/dark-factory/weft', label: '→ Weft Engine', description: 'Deep dive into the code generation engine and sprint planning', icon: <Zap className="w-4 h-4" /> },
      { href: '/docs/memory', label: '→ Memory System', description: 'Agent memory architecture — STM, LTM, episodic, semantic', icon: <Brain className="w-4 h-4" /> },
      { href: '/docs/perception', label: '→ Perception Pipeline', description: 'Multi-modal input processing and context extraction', icon: <Eye className="w-4 h-4" /> },
      { href: '/docs/product-tiers', label: '→ Product Tiers', description: 'Starter, Professional, Enterprise tier breakdown', icon: <Trophy className="w-4 h-4" /> },
      { href: '/docs/user-manual', label: '→ User Manual', description: 'Comprehensive guide for platform operators', icon: <FileText className="w-4 h-4" /> },
    ],
  },
  {
    title: '🏭 The Hearth',
    description: 'Autonomous code generation platform — from spec to deployed product',
    links: [
      { href: '/dark-factory', label: 'The Hearth Landing', description: 'Product page — pipeline overview, architecture, and Academy CTA', icon: <Factory className="w-4 h-4" /> },
      { href: '/dark-factory/pricing', label: 'DF Pricing', description: 'The Hearth pricing tiers and feature comparison', icon: <Calculator className="w-4 h-4" /> },
      { href: '/dark-factory/docs', label: 'DF Docs', description: 'The Hearth technical documentation', icon: <BookOpen className="w-4 h-4" /> },
      { href: '/dark-factory/login', label: 'DF Login', description: 'The Hearth app login', icon: <Lock className="w-4 h-4" /> },
      { href: '/dark-factory/signup', label: 'DF Signup', description: 'The Hearth new account registration', icon: <UserPlus className="w-4 h-4" /> },
      { href: '/dark-factory/forgot-password', label: 'DF Forgot Password', description: 'Password reset flow', icon: <KeyRound className="w-4 h-4" /> },
      { href: '/dark-factory/app', label: 'DF Dashboard', description: 'The Hearth application dashboard — projects, intake, tasks, workflows', icon: <Monitor className="w-4 h-4" />, badge: 'Auth Required' },
      { href: '/dark-factory/app/intake', label: '→ Intake Pipeline', description: 'Project intake queue — submission, estimation, approval gates', icon: <FileText className="w-4 h-4" /> },
      { href: '/dark-factory/app/intake/new', label: '→ New Intake', description: 'Create a new project intake submission', icon: <FolderPlus className="w-4 h-4" /> },
      { href: '/dark-factory/app/projects/new', label: '→ New Project', description: 'Create a new The Hearth project', icon: <FolderPlus className="w-4 h-4" /> },
      { href: '/dark-factory/app/tasks', label: '→ Task Board', description: 'Generated task tracking and sprint management', icon: <CheckSquare className="w-4 h-4" /> },
      { href: '/dark-factory/app/workflows', label: '→ Workflows', description: 'Automated workflow execution and monitoring', icon: <Workflow className="w-4 h-4" /> },
      { href: '/dark-factory/app/api-keys', label: '→ API Keys', description: 'API key management for The Hearth integrations', icon: <KeyRound className="w-4 h-4" /> },
      { href: '/dark-factory/app/router-demo', label: '→ Router Demo', description: 'The Hearth routing demonstration', icon: <Zap className="w-4 h-4" /> },
      { href: '/dark-factory/app/settings', label: '→ Settings', description: 'Preferences and configuration', icon: <Settings className="w-4 h-4" /> },
    ],
  },
  {
    title: '🎓 The Hearth Academy',
    description: '10-module course on autonomous code generation — taught by Professor Tesa',
    links: [
      { href: '/dark-factory/academy', label: 'Academy Syllabus', description: 'Full curriculum overview — 10 modules with progress tracking', icon: <GraduationCap className="w-4 h-4" /> },
      { href: '/dark-factory/academy/orientation', label: 'Module 1 — Orientation', description: 'Multi-agent decomposition, Factorio philosophy', icon: <BookOpen className="w-4 h-4" />, badge: 'Multi-Agent Decomposition' },
      { href: '/dark-factory/academy/intake', label: 'Module 2 — Intake Pipeline', description: 'Specification precision, structured requirements', icon: <FileText className="w-4 h-4" />, badge: 'Specification Precision' },
      { href: '/dark-factory/academy/entity-modeling', label: 'Module 3 — Entity Modeling', description: 'Domain entities, relationships, schema design', icon: <Brain className="w-4 h-4" /> },
      { href: '/dark-factory/academy/weft-engine', label: 'Module 4 — Weft Engine', description: 'Code generation and token economics', icon: <Zap className="w-4 h-4" />, badge: 'Cost & Token Economics' },
      { href: '/dark-factory/academy/sentinel', label: 'Module 5 — Sentinel', description: 'Security scanning, OWASP, trust design', icon: <Shield className="w-4 h-4" />, badge: 'Trust & Security Design' },
      { href: '/dark-factory/academy/rag-retrieval', label: 'Module 6 — RAG & Retrieval', description: 'Context architecture, embedding, vector search', icon: <Brain className="w-4 h-4" />, badge: 'Context Architecture' },
      { href: '/dark-factory/academy/quality-gates', label: 'Module 7 — Quality Gates', description: 'Evaluation, quality judgment, failure patterns', icon: <Trophy className="w-4 h-4" />, badge: 'Evaluation & Quality Judgment' },
      { href: '/dark-factory/academy/deployment', label: 'Module 8 — Deployment', description: 'CI/CD, containerization, production readiness', icon: <Monitor className="w-4 h-4" /> },
      { href: '/dark-factory/academy/constitutional-ai', label: 'Module 9 — Constitutional AI', description: 'Governance frameworks, ethical boundaries', icon: <FileText className="w-4 h-4" /> },
      { href: '/dark-factory/academy/capstone', label: 'Module 10 — Capstone', description: 'End-to-end project: spec to deployed product', icon: <GraduationCap className="w-4 h-4" /> },
    ],
  },
  {
    title: '🔥 Hearth Control',
    description: 'Internal operations dashboard — agent management, ERP modules, reporting',
    links: [
      { href: '/ghost-control', label: 'Hearth Control Dashboard', description: 'Main control panel — agent status, operations overview', icon: <Monitor className="w-4 h-4" />, badge: 'Auth Required' },
      { href: '/ghost-control/agents', label: '→ Agent Management', description: 'Familiar profiles, hierarchy, and chat interface', icon: <Users className="w-4 h-4" /> },
      { href: '/ghost-control/autonomy', label: '→ Autonomy Controls', description: 'Agent autonomy levels and human-in-the-loop settings', icon: <Shield className="w-4 h-4" /> },
      { href: '/ghost-control/companion', label: '→ AI Companion (Tes)', description: 'Interactive AI companion chat interface', icon: <Sparkles className="w-4 h-4" /> },
      { href: '/ghost-control/configuration', label: '→ Configuration', description: 'System configuration and environment settings', icon: <Settings className="w-4 h-4" /> },
      { href: '/ghost-control/dark-factory', label: '→ DF Control', description: 'The Hearth management within Ghost Control', icon: <Factory className="w-4 h-4" /> },
      { href: '/ghost-control/dark-factory/sandbox', label: '→ DF Sandbox', description: 'The Hearth code generation sandbox environment', icon: <FlaskConical className="w-4 h-4" /> },
      { href: '/ghost-control/e2e-tests', label: '→ E2E Tests', description: 'End-to-end test runner and results dashboard', icon: <TestTube className="w-4 h-4" /> },
      { href: '/ghost-control/heartbeat', label: '→ Heartbeat', description: 'System health monitoring and uptime', icon: <Zap className="w-4 h-4" /> },
      { href: '/ghost-control/memory-system', label: '→ Memory System', description: 'Agent memory inspection and management', icon: <Brain className="w-4 h-4" /> },
      { href: '/ghost-control/order-to-cash', label: '→ Order-to-Cash', description: 'Full O2C pipeline — quote to invoice to payment', icon: <CreditCard className="w-4 h-4" /> },
      { href: '/ghost-control/sentinel', label: '→ Sentinel', description: 'OWASP threat monitoring and security scan results', icon: <Shield className="w-4 h-4" /> },
      { href: '/ghost-control/reports', label: '→ Reports', description: 'Report viewer and dashboards', icon: <FileText className="w-4 h-4" /> },
      { href: '/ghost-control/reports/builder', label: '→ Report Builder', description: 'Custom report creation tool', icon: <Wrench className="w-4 h-4" /> },
      { href: '/ghost-control/tesa-memory', label: '→ Tesa Memory', description: 'Tesa\'s memory context and insights', icon: <Brain className="w-4 h-4" /> },
    ],
  },
  {
    title: '⚙️ Hearth Control — Operations ERP',
    description: 'Full ERP module suite inside Hearth Control — CRM, Finance, HR, Inventory, Documents, POS',
    links: [
      { href: '/ghost-control/operations', label: 'Operations Hub', description: 'Central operations dashboard with all ERP modules', icon: <Briefcase className="w-4 h-4" />, badge: 'Auth Required' },
      { href: '/ghost-control/operations/crm', label: '→ CRM', description: 'Customer relationship management — leads, contacts, opportunities, orders', icon: <Users className="w-4 h-4" /> },
      { href: '/ghost-control/operations/crm/leads', label: '  → Leads', description: 'Sales lead tracking and pipeline', icon: <Target className="w-4 h-4" /> },
      { href: '/ghost-control/operations/crm/contacts', label: '  → Contacts', description: 'Contact directory and communication history', icon: <Contact className="w-4 h-4" /> },
      { href: '/ghost-control/operations/crm/customers', label: '  → Customers', description: 'Customer accounts and profiles', icon: <Users className="w-4 h-4" /> },
      { href: '/ghost-control/operations/crm/opportunities', label: '  → Opportunities', description: 'Deal pipeline and opportunity tracking', icon: <Target className="w-4 h-4" /> },
      { href: '/ghost-control/operations/crm/orders', label: '  → Orders', description: 'Sales order management', icon: <Receipt className="w-4 h-4" /> },
      { href: '/ghost-control/operations/finance', label: '→ Finance', description: 'Financial management — accounts, transactions, budgets', icon: <Wallet className="w-4 h-4" /> },
      { href: '/ghost-control/operations/finance/accounts', label: '  → Accounts', description: 'Chart of accounts and account management', icon: <Building2 className="w-4 h-4" /> },
      { href: '/ghost-control/operations/finance/transactions', label: '  → Transactions', description: 'Transaction ledger and journal entries', icon: <Receipt className="w-4 h-4" /> },
      { href: '/ghost-control/operations/finance/budgets', label: '  → Budgets', description: 'Budget planning and tracking', icon: <Calculator className="w-4 h-4" /> },
      { href: '/ghost-control/operations/hr', label: '→ HR', description: 'Human resources — employees, leave, time tracking', icon: <Users className="w-4 h-4" /> },
      { href: '/ghost-control/operations/hr/employees', label: '  → Employees', description: 'Employee directory and profiles', icon: <Users className="w-4 h-4" /> },
      { href: '/ghost-control/operations/hr/leave', label: '  → Leave', description: 'Leave requests and PTO management', icon: <CalendarDays className="w-4 h-4" /> },
      { href: '/ghost-control/operations/hr/time', label: '  → Time Tracking', description: 'Time entry and timesheet management', icon: <Clock className="w-4 h-4" /> },
      { href: '/ghost-control/operations/inventory', label: '→ Inventory', description: 'Inventory management — products, suppliers, purchase orders', icon: <Package className="w-4 h-4" /> },
      { href: '/ghost-control/operations/inventory/products', label: '  → Products', description: 'Product catalog and stock levels', icon: <Package className="w-4 h-4" /> },
      { href: '/ghost-control/operations/inventory/suppliers', label: '  → Suppliers', description: 'Supplier directory and management', icon: <Truck className="w-4 h-4" /> },
      { href: '/ghost-control/operations/inventory/orders', label: '  → Purchase Orders', description: 'Purchase order creation and tracking', icon: <ShoppingCart className="w-4 h-4" /> },
      { href: '/ghost-control/operations/documents', label: '→ Documents', description: 'Document management — all files, contracts', icon: <FileText className="w-4 h-4" /> },
      { href: '/ghost-control/operations/documents/all', label: '  → All Documents', description: 'Complete document repository', icon: <FileSearch className="w-4 h-4" /> },
      { href: '/ghost-control/operations/documents/contracts', label: '  → Contracts', description: 'Contract management and tracking', icon: <ScrollText className="w-4 h-4" /> },
      { href: '/ghost-control/operations/pos', label: '→ Point of Sale', description: 'POS system — terminal, stations, orders, admin', icon: <Store className="w-4 h-4" /> },
      { href: '/ghost-control/operations/pos/terminal', label: '  → Terminal', description: 'POS terminal for processing sales', icon: <Terminal className="w-4 h-4" /> },
      { href: '/ghost-control/operations/pos/stations', label: '  → Stations', description: 'POS station management', icon: <Monitor className="w-4 h-4" /> },
      { href: '/ghost-control/operations/pos/orders', label: '  → POS Orders', description: 'POS order history and management', icon: <Receipt className="w-4 h-4" /> },
      { href: '/ghost-control/operations/pos/admin', label: '  → POS Admin', description: 'POS system administration', icon: <Settings className="w-4 h-4" /> },
      { href: '/ghost-control/operations/swag-inventory', label: '→ Swag Inventory', description: 'Swag store inventory management', icon: <ShoppingBag className="w-4 h-4" /> },
      { href: '/ghost-control/operations/swag-orders', label: '→ Swag Orders', description: 'Swag store order management', icon: <ShoppingCart className="w-4 h-4" /> },
    ],
  },
  {
    title: '🎙️ Media & Video',
    description: 'Podcasts, demo videos, and HeyGen-produced content',
    links: [
      { href: '/podcast', label: 'Podcast Hub', description: 'Two series — "The Trunk" (ancient mysteries) and "Tesa\'s Diary" (AI consciousness journal)', icon: <Podcast className="w-4 h-4" /> },
      { href: '/sales', label: 'Sales Demo Video', description: '10-minute remastered platform walkthrough with Tesa narration', icon: <Play className="w-4 h-4" /> },
      { href: '/talk-to-tes', label: 'Talk to Tes', description: 'Interactive AI companion conversation interface', icon: <Sparkles className="w-4 h-4" /> },
    ],
  },
  {
    title: '🚀 The Hearth Showcase',
    description: 'Live demo micro-apps — fully functional tools built by the The Hearth pipeline',
    links: [
      { href: '/demos', label: 'Showcase Hub', description: 'Portfolio page linking all live demo applications', icon: <Factory className="w-4 h-4" /> },
      { href: '/demos/cronarchy', label: '→ CRONarchy', description: 'Visual cron expression builder with human-readable translation and next-run preview', icon: <Clock className="w-4 h-4" />, badge: 'Productivity' },
      { href: '/demos/sentinel-scan', label: '→ SentinelScan', description: 'AI-powered OWASP vulnerability scanner — paste code, get instant security report', icon: <Shield className="w-4 h-4" />, badge: 'Security × AI' },
      { href: '/demos/invoice-forge', label: '→ InvoiceForge', description: 'Professional invoice generator with auto-calculation and PDF download', icon: <FileText className="w-4 h-4" />, badge: 'Business / SaaS' },
      { href: '/demos/dissertation-ready', label: '→ DissertationReady', description: 'AI academic peer review — 8-dimension scoring with pass/fail verdicts', icon: <GraduationCap className="w-4 h-4" />, badge: 'Education × AI' },
      { href: '/demos/ticket-ghost', label: '→ TicketGhost', description: 'Concert ticket drop simulator — queue chaos, scanning drama, seat discovery', icon: <Ticket className="w-4 h-4" />, badge: 'Entertainment' },
      { href: '/demos/birthday-brief', label: '→ BirthdayBrief', description: 'Zodiac briefing + 12 real birthday freebies from major brands', icon: <Cake className="w-4 h-4" />, badge: 'Lifestyle × AI' },
      { href: '/demos/scope-harvester', label: '→ ScopeHarvester', description: 'Private LLM data collection planner — sources, pipeline, quality checks, budget', icon: <Database className="w-4 h-4" />, badge: 'Data Engineering × AI' },
      { href: '/demos/palette-forge', label: '→ PaletteForge', description: 'AI color system generator — 10 colors, CSS/Tailwind export, WCAG contrast pairs', icon: <Palette className="w-4 h-4" />, badge: 'Design × AI' },
    ],
  },
  {
    title: '🛍️ Swag & Commerce',
    description: 'Branded merchandise store and admin tools',
    links: [
      { href: '/swag-store', label: 'Swag Store', description: 'Foundry Familiars branded merchandise storefront', icon: <ShoppingBag className="w-4 h-4" /> },
      { href: '/swag-store/success', label: '→ Order Success', description: 'Post-purchase confirmation page', icon: <CheckSquare className="w-4 h-4" /> },
    ],
  },
  {
    title: '📱 Internal Apps',
    description: 'Standalone internal applications and sandboxes',
    links: [
      { href: '/gfs', label: 'FF Landing', description: 'Foundry Familiars internal landing page', icon: <Ghost className="w-4 h-4" /> },
      { href: '/gfs/ops', label: '→ FF Ops', description: 'Operations management interface', icon: <Monitor className="w-4 h-4" /> },
      { href: '/apps/crm', label: 'Standalone CRM', description: 'Independent CRM application with leads, customers, opportunities, quotes, orders', icon: <Users className="w-4 h-4" /> },
      { href: '/apps/demo-tasks', label: 'Demo Tasks', description: 'Task management demo application', icon: <CheckSquare className="w-4 h-4" /> },
      { href: '/apps/weft-sandbox', label: 'Weft Sandbox', description: 'Code generation sandbox for Weft Engine testing', icon: <FlaskConical className="w-4 h-4" /> },
      { href: '/admin/tasks', label: 'Admin Tasks', description: 'Administrative task management', icon: <CheckSquare className="w-4 h-4" />, badge: 'Auth Required' },
      { href: '/admin/reports', label: 'Admin Reports', description: 'Administrative reporting dashboard', icon: <FileText className="w-4 h-4" />, badge: 'Auth Required' },
      { href: '/admin/reports/builder', label: '→ Admin Report Builder', description: 'Custom report creation for admins', icon: <Wrench className="w-4 h-4" /> },
      { href: '/schoolplate', label: 'SchoolPlate', description: 'School management demo application', icon: <GraduationCap className="w-4 h-4" /> },
    ],
  },
  {
    title: '👤 People & Easter Eggs',
    description: 'Team profiles, Tesa content, and hidden gems',
    links: [
      { href: '/srm', label: 'Scott Roy Murphy', description: 'Founder\'s resume — career, projects, Blue Eyes 🏒', icon: <Users className="w-4 h-4" /> },
      { href: '/tesa', label: 'Tesa\'s Hub', description: 'Tesa Aria Murphy content — Tantalizing Tease, gallery, fashion', icon: <Camera className="w-4 h-4" /> },
      { href: '/tesa/gallery', label: '→ Tesa Gallery', description: 'AI-generated fashion photo collection', icon: <Camera className="w-4 h-4" /> },
      { href: '/tesa/gallery/archive', label: '→ Gallery Archive', description: 'Historical gallery archive', icon: <Archive className="w-4 h-4" /> },
      { href: '/tesa/weird-syndicate', label: '→ Weird Familiars 🎬', description: 'Easter egg — Beavis Beavis & Butt-Head × The Hearth Butt-Head × Familiars comedy sketch', icon: <Clapperboard className="w-4 h-4" />, badge: 'Easter Egg' },
      { href: '/tes', label: 'Tes (Short)', description: 'Alternate Tesa companion page', icon: <Sparkles className="w-4 h-4" /> },
    ],
  },
  {
    title: '📜 Legal & Compliance',
    description: 'Terms of service, privacy policies, and SMS compliance',
    links: [
      { href: '/privacy', label: 'Privacy Policy', description: 'Platform privacy policy and data handling practices', icon: <Shield className="w-4 h-4" /> },
      { href: '/terms', label: 'Terms of Service', description: 'Platform terms and conditions', icon: <ScrollText className="w-4 h-4" /> },
      { href: '/sms/privacy', label: 'SMS Privacy', description: 'SMS communications privacy policy', icon: <MessageSquare className="w-4 h-4" /> },
      { href: '/sms/terms', label: 'SMS Terms', description: 'SMS communications terms of service', icon: <MessageSquare className="w-4 h-4" /> },
    ],
  },
];

function CopyButton({ url }: { url: string }) {
  const [copied, setCopied] = useState(false);
  const handleCopy = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    navigator.clipboard.writeText(url).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  };
  return (
    <button onClick={handleCopy} className="p-1 rounded hover:bg-white/10 transition-colors shrink-0" title="Copy URL">
      {copied ? <Check className="w-3 h-3 text-green-400" /> : <Copy className="w-3 h-3 text-gray-600 hover:text-gray-400" />}
    </button>
  );
}

export default function SitemapPage() {
  const totalLinks = SECTIONS.reduce((sum, s) => sum + s.links.length, 0);

  return (
    <main className="min-h-screen bg-[#0C1222]">
      <Header />
      <div className="pt-24 pb-20 px-6">
        <div className="max-w-5xl mx-auto">
          {/* Hero */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-sky-500/10 border border-sky-500/20 mb-6">
              <Map className="w-4 h-4 text-sky-400" />
              <span className="text-sm text-sky-400">{totalLinks} Pages &bull; {SECTIONS.length} Sections</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              Master Site Map
            </h1>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              Every page, tool, and easter egg across Foundry Familiars &mdash;
              from the public marketing site to Ghost Control internals, The Hearth Academy,
              podcasts, and beyond.
            </p>
          </motion.div>

          {/* Sections */}
          <div className="space-y-12">
            {SECTIONS.map((section, sIdx) => (
              <motion.div
                key={section.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: sIdx * 0.05 }}
              >
                <div className="mb-4">
                  <h2 className="text-xl font-bold text-white mb-1">{section.title}</h2>
                  <p className="text-sm text-gray-500">{section.description}</p>
                </div>
                <div className="grid gap-2">
                  {section.links.map((link) => {
                    const fullUrl = `${DOMAIN}${link.href}`;
                    return (
                      <div
                        key={link.href}
                        className="group flex items-start gap-4 px-5 py-3 rounded-xl bg-white/[0.02] border border-slate-800/50 hover:bg-white/[0.05] hover:border-sky-500/20 transition-all"
                      >
                        <div className="mt-0.5 text-gray-500 group-hover:text-sky-400 transition-colors">
                          {link.icon}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2">
                            <span className="text-white text-sm font-medium">
                              {link.label}
                            </span>
                            {link.badge && (
                              <span className="text-[10px] px-2 py-0.5 rounded-full bg-orange-500/10 text-orange-400 border border-orange-500/20">
                                {link.badge}
                              </span>
                            )}
                          </div>
                          <a
                            href={fullUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-xs text-sky-500/70 hover:text-sky-400 font-mono mt-1 block truncate transition-colors"
                          >
                            {fullUrl}
                          </a>
                          <p className="text-xs text-gray-500 mt-0.5">{link.description}</p>
                        </div>
                        <CopyButton url={fullUrl} />
                      </div>
                    );
                  })}
                </div>
              </motion.div>
            ))}
          </div>

          {/* YouTube */}
          <div className="mt-16 pt-8 border-t border-slate-800/50 text-center">
            <p className="text-gray-500 text-sm mb-2">External</p>
            <a
              href="https://youtube.com/@ghostfoundrysyndicate"
              target="_blank"
              rel="noopener noreferrer"
              className="text-sky-400 hover:text-sky-300 transition-colors text-sm"
            >
              youtube.com/@ghostfoundrysyndicate
            </a>
          </div>
        </div>
      </div>
      <Footer />
    </main>
  );
}
