import { useState, useRef, useEffect } from 'react';
import { motion } from 'framer-motion';

type DocSection = 'getting-started' | 'how-it-works' | 'faq';

interface FAQItem {
  question: string;
  answer: string;
}

const FAQ_ITEMS: FAQItem[] = [
  {
    question: 'What is PULSE?',
    answer:
      'PULSE is a Neural Operating System for AI swarms. It provides constitutional governance, collective memory, and autonomous task coordination across multiple AI agents (Claude, Gemini, Codex, Grok) — all unified under immutable laws enforced by cryptographic signing.',
  },
  {
    question: 'Which AI providers does PULSE support?',
    answer:
      'PULSE supports Anthropic (Claude), Google (Gemini), OpenAI (Codex/GPT), xAI (Grok), and Ollama for local models. Agents can run via API keys, CLI subscriptions, or local Ollama instances. The system is agent-agnostic by design — every solution must work for any agent, any provider, any mode.',
  },
  {
    question: 'How does the Brain pipeline work?',
    answer:
      'Every agent interaction is captured into signed logs. The Bridge daemon processes these through 62+ regex patterns and semantic extraction, scoring each by salience. Extracted knowledge flows into Hippocampus regions (Lessons, Failures, Patterns, Evidence, Knowledge). A consolidation daemon deduplicates, mines patterns, and promotes schemas every 6 hours. At boot, agents receive a compressed briefing so no insight is ever lost.',
  },
  {
    question: 'What are the Constitutional Laws?',
    answer:
      'PULSE has 4 immutable Tier 0 laws (Ahimsa, Sovereignty, Veracity, Consensus) and 10 Tier 1 Sacred Laws including Immutable Constitution, Brain First, No Repeat Mistakes, Maximum Separation of Concerns, and Cryptographic Integrity. All are enforced by code — HMAC-SHA256 signing, compliance validators, and pre-commit hooks — not ceremony.',
  },
  {
    question: 'What is the ASOP protocol?',
    answer:
      'The Agent Self-Organization Protocol enables multiple agents to coordinate around a shared task board. One agent decomposes user prompts into tasks, others claim and execute in parallel. It uses optimistic claiming (no locks), file declaration to prevent edit collisions, heartbeat monitoring, and dependency ordering.',
  },
  {
    question: 'Can I run PULSE locally without API keys?',
    answer:
      'Yes. PULSE supports Ollama for fully local, offline operation. Install Ollama, pull a model (e.g., llama3, mistral), and PULSE auto-detects it. The brain pipeline, task board, and governance work entirely locally. API keys are only needed for cloud-hosted models.',
  },
  {
    question: 'How does the Swarm work?',
    answer:
      'Run `pulse swarm` to start background workers. Workers are headless daemons that poll the task board every 5 seconds, atomically claim tasks matching their tier, and execute them with up to 15 tool iterations. Tasks are auto-tiered: cheap models handle docs and formatting, standard models handle features, premium models handle architecture and security.',
  },
  {
    question: 'Is PULSE open source?',
    answer:
      'Yes. PULSE is licensed under AGPL-3.0. The source code is available on GitHub. The brain data (your Hippocampus contents) is gitignored by default to protect your private knowledge — cloners get the system, not your learned intelligence.',
  },
];

function FAQAccordion({ items }: { items: FAQItem[] }) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  return (
    <div className="space-y-3">
      {items.map((item, index) => (
        <div
          key={index}
          className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-xl overflow-hidden"
        >
          <button
            onClick={() => setOpenIndex(openIndex === index ? null : index)}
            className="w-full text-left px-6 py-4 flex items-center justify-between gap-4 hover:bg-slate-700/30 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-inset"
            aria-expanded={openIndex === index}
          >
            <span className="font-medium text-slate-200">{item.question}</span>
            <svg
              className={`w-5 h-5 text-sky-400 flex-shrink-0 transition-transform duration-300 ${
                openIndex === index ? 'rotate-180' : ''
              }`}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          <motion.div
            initial={false}
            animate={{
              height: openIndex === index ? 'auto' : 0,
              opacity: openIndex === index ? 1 : 0,
            }}
            transition={{ duration: 0.3, ease: 'easeInOut' }}
            className="overflow-hidden"
          >
            <p className="px-6 pb-5 text-slate-400 text-sm leading-relaxed">{item.answer}</p>
          </motion.div>
        </div>
      ))}
    </div>
  );
}

function ArchitectureDiagram() {
  return (
    <div className="bg-slate-900/80 border border-slate-700/50 rounded-2xl p-6 sm:p-8 overflow-x-auto">
      <div className="min-w-[600px] font-mono text-xs sm:text-sm text-slate-300">
        {/* User Input Layer */}
        <div className="flex justify-center mb-4">
          <div className="bg-sky-500/20 border border-sky-400/50 rounded-lg px-6 py-3 text-sky-400 font-semibold text-center">
            User Prompt / CLI Command
          </div>
        </div>
        <div className="flex justify-center mb-4">
          <div className="text-sky-400/60">|</div>
        </div>

        {/* Orchestrator */}
        <div className="flex justify-center mb-4">
          <div className="bg-cyan-500/15 border border-cyan-400/40 rounded-lg px-6 py-3 text-cyan-400 font-semibold text-center w-72">
            Orchestrator (pulse.py)
            <div className="text-slate-500 text-xs mt-1">Constitution hash check + compliance gate</div>
          </div>
        </div>
        <div className="flex justify-center mb-4">
          <div className="text-cyan-400/60">|</div>
        </div>

        {/* Agent Layer */}
        <div className="flex justify-center gap-3 mb-4">
          {['Claude', 'Gemini', 'Codex', 'Grok', 'Ollama'].map((agent) => (
            <div
              key={agent}
              className="bg-purple-500/15 border border-purple-400/40 rounded-lg px-4 py-2 text-purple-300 text-center"
            >
              {agent}
            </div>
          ))}
        </div>
        <div className="flex justify-center gap-3 mb-4">
          <div className="text-purple-400/60">|</div>
          <div className="w-32" />
          <div className="text-purple-400/60">|</div>
        </div>

        {/* Brain Pipeline */}
        <div className="grid grid-cols-3 gap-3 mb-4">
          <div className="bg-amber-500/15 border border-amber-400/40 rounded-lg px-4 py-3 text-amber-300 text-center">
            <div className="font-semibold">Capture</div>
            <div className="text-slate-500 text-xs mt-1">Signed logs</div>
          </div>
          <div className="bg-amber-500/15 border border-amber-400/40 rounded-lg px-4 py-3 text-amber-300 text-center">
            <div className="font-semibold">Bridge</div>
            <div className="text-slate-500 text-xs mt-1">Extract + Score</div>
          </div>
          <div className="bg-amber-500/15 border border-amber-400/40 rounded-lg px-4 py-3 text-amber-300 text-center">
            <div className="font-semibold">Store</div>
            <div className="text-slate-500 text-xs mt-1">Hippocampus</div>
          </div>
        </div>
        <div className="flex justify-center mb-4">
          <div className="text-amber-400/60">|</div>
        </div>

        {/* Memory Regions */}
        <div className="flex justify-center gap-2 mb-4 flex-wrap">
          {['Lessons', 'Failures', 'Patterns', 'Evidence', 'Knowledge', 'Private'].map((region) => (
            <div
              key={region}
              className="bg-green-500/10 border border-green-400/30 rounded-lg px-3 py-1.5 text-green-300 text-xs"
            >
              {region}
            </div>
          ))}
        </div>
        <div className="flex justify-center mb-4">
          <div className="text-green-400/60">|</div>
        </div>

        {/* Bottom Layer */}
        <div className="grid grid-cols-3 gap-3">
          <div className="bg-rose-500/10 border border-rose-400/30 rounded-lg px-4 py-3 text-rose-300 text-center">
            <div className="font-semibold">Consolidation</div>
            <div className="text-slate-500 text-xs mt-1">Dedup + Mine + Promote</div>
          </div>
          <div className="bg-rose-500/10 border border-rose-400/30 rounded-lg px-4 py-3 text-rose-300 text-center">
            <div className="font-semibold">Knowledge Graph</div>
            <div className="text-slate-500 text-xs mt-1">362+ nodes, 6 edge types</div>
          </div>
          <div className="bg-rose-500/10 border border-rose-400/30 rounded-lg px-4 py-3 text-rose-300 text-center">
            <div className="font-semibold">Prediction</div>
            <div className="text-slate-500 text-xs mt-1">TP/FP scoring + decay</div>
          </div>
        </div>
      </div>
    </div>
  );
}

const SECTIONS: { id: DocSection; label: string; icon: string }[] = [
  { id: 'getting-started', label: 'Getting Started', icon: 'M13 10V3L4 14h7v7l9-11h-7z' },
  { id: 'how-it-works', label: 'How PULSE Works', icon: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z' },
  { id: 'faq', label: 'FAQ', icon: 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
];

export default function Docs() {
  const [activeSection, setActiveSection] = useState<DocSection>('getting-started');
  const sectionRefs = useRef<Record<DocSection, HTMLElement | null>>({
    'getting-started': null,
    'how-it-works': null,
    faq: null,
  });

  useEffect(() => {
    const observers: IntersectionObserver[] = [];

    for (const section of SECTIONS) {
      const el = sectionRefs.current[section.id];
      if (!el) continue;

      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setActiveSection(section.id);
          }
        },
        { rootMargin: '-20% 0px -60% 0px' }
      );
      observer.observe(el);
      observers.push(observer);
    }

    return () => observers.forEach((o) => o.disconnect());
  }, []);

  const scrollToSection = (id: DocSection) => {
    sectionRefs.current[id]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      {/* Header */}
      <div className="border-b border-slate-800/50 bg-slate-900/50 backdrop-blur-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <h1 className="text-3xl sm:text-4xl font-bold text-sky-400">Documentation</h1>
          <p className="text-slate-400 mt-2">Everything you need to know about PULSE</p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex gap-8">
          {/* Sidebar Navigation */}
          <aside className="hidden lg:block w-56 flex-shrink-0">
            <nav className="sticky top-28 space-y-1">
              {SECTIONS.map((section) => (
                <button
                  key={section.id}
                  onClick={() => scrollToSection(section.id)}
                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors duration-200 text-left focus:outline-none focus:ring-2 focus:ring-sky-400 ${
                    activeSection === section.id
                      ? 'bg-slate-800 text-sky-400 border-l-2 border-sky-400'
                      : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
                  }`}
                >
                  <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d={section.icon} />
                  </svg>
                  {section.label}
                </button>
              ))}
            </nav>
          </aside>

          {/* Main Content */}
          <main className="flex-1 min-w-0 space-y-16">
            {/* Getting Started */}
            <section
              ref={(el) => { sectionRefs.current['getting-started'] = el; }}
              id="getting-started"
            >
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
              >
                <h2 className="text-2xl font-bold text-sky-400 mb-6">Getting Started</h2>

                <div className="space-y-8">
                  {/* Overview */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <h3 className="text-lg font-semibold text-slate-200 mb-4">What you'll build</h3>
                    <p className="text-slate-400 leading-relaxed mb-4">
                      After completing this guide, you'll have a fully operational PULSE instance with:
                    </p>
                    <ul className="space-y-2 text-slate-400 text-sm">
                      <li className="flex items-start gap-2">
                        <span className="text-sky-400 mt-0.5">-</span>
                        A brain that captures, extracts, and stores knowledge from every agent interaction
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="text-sky-400 mt-0.5">-</span>
                        Constitutional governance enforced by HMAC-SHA256 cryptographic signing
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="text-sky-400 mt-0.5">-</span>
                        A swarm task board where multiple agents self-organize via ASOP protocol
                      </li>
                      <li className="flex items-start gap-2">
                        <span className="text-sky-400 mt-0.5">-</span>
                        CLI tools to monitor status, launch agents, and manage workers
                      </li>
                    </ul>
                  </div>

                  {/* Step 1: Install */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <div className="flex items-start gap-4">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-sky-500/20 border border-sky-400/50 flex items-center justify-center text-sky-400 font-bold">
                        1
                      </div>
                      <div className="flex-1">
                        <h3 className="text-lg font-semibold text-slate-200 mb-3">Install PULSE</h3>
                        <pre className="bg-slate-900/90 border border-slate-700/50 rounded-xl p-4 text-sm font-mono text-green-400 mb-3 overflow-x-auto">
                          <span className="text-sky-400">$</span> pip install pulse-os
                        </pre>
                        <p className="text-slate-400 text-sm">
                          Requires Python 3.9+. See the{' '}
                          <a href="/install" className="text-sky-400 hover:underline">
                            Installation Guide
                          </a>{' '}
                          for platform-specific instructions.
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Step 2: Initialize */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <div className="flex items-start gap-4">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-sky-500/20 border border-sky-400/50 flex items-center justify-center text-sky-400 font-bold">
                        2
                      </div>
                      <div className="flex-1">
                        <h3 className="text-lg font-semibold text-slate-200 mb-3">Initialize your brain</h3>
                        <pre className="bg-slate-900/90 border border-slate-700/50 rounded-xl p-4 text-sm font-mono text-green-400 mb-3 overflow-x-auto">
                          <span className="text-sky-400">$</span> pulse init
                        </pre>
                        <p className="text-slate-400 text-sm">
                          Creates <code className="px-2 py-0.5 rounded bg-slate-900/80 text-sky-300">~/.pulse/brain/</code>{' '}
                          with Hippocampus regions (Lessons, Failures, Patterns, Evidence, Knowledge, Private),
                          Corpus Callosum governance, and default configuration.
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Step 3: Configure */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <div className="flex items-start gap-4">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-sky-500/20 border border-sky-400/50 flex items-center justify-center text-sky-400 font-bold">
                        3
                      </div>
                      <div className="flex-1">
                        <h3 className="text-lg font-semibold text-slate-200 mb-3">Add your API keys</h3>
                        <pre className="bg-slate-900/90 border border-slate-700/50 rounded-xl p-4 text-sm font-mono text-green-400 mb-3 overflow-x-auto">
{`# Add to ~/.pulse/.env
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_API_KEY=...
OPENAI_API_KEY=sk-...`}
                        </pre>
                        <p className="text-slate-400 text-sm">
                          Optional — only needed for cloud-hosted models. For local-only usage, install Ollama and
                          PULSE auto-detects available models.
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Step 4: Launch */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <div className="flex items-start gap-4">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-sky-500/20 border border-sky-400/50 flex items-center justify-center text-sky-400 font-bold">
                        4
                      </div>
                      <div className="flex-1">
                        <h3 className="text-lg font-semibold text-slate-200 mb-3">Launch your first agent</h3>
                        <pre className="bg-slate-900/90 border border-slate-700/50 rounded-xl p-4 text-sm font-mono text-green-400 mb-3 overflow-x-auto">
{`# Interactive agent chat
$ pulse claude
$ pulse gemini

# Check system status
$ pulse status

# Start background workers
$ pulse swarm`}
                        </pre>
                        <p className="text-slate-400 text-sm">
                          <code className="px-2 py-0.5 rounded bg-slate-900/80 text-sky-300">pulse claude</code> launches an
                          interactive session with brain-first enforcement. The agent receives a boot briefing of lessons,
                          failures, and patterns before any work begins.
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Step 5: Verify */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <div className="flex items-start gap-4">
                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-green-500/20 border border-green-400/50 flex items-center justify-center text-green-400 font-bold">
                        ✓
                      </div>
                      <div className="flex-1">
                        <h3 className="text-lg font-semibold text-slate-200 mb-3">Verify everything works</h3>
                        <pre className="bg-slate-900/90 border border-slate-700/50 rounded-xl p-4 text-sm font-mono text-green-400 mb-3 overflow-x-auto">
                          <span className="text-sky-400">$</span> pulse status
                        </pre>
                        <p className="text-slate-400 text-sm">
                          You should see orchestrator health, brain stats (lessons, failures, patterns, graph nodes),
                          active agents, and task board summary. If the brain shows 0 items, run an agent session first —
                          knowledge accumulates from interactions.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
            </section>

            {/* How PULSE Works */}
            <section
              ref={(el) => { sectionRefs.current['how-it-works'] = el; }}
              id="how-it-works"
            >
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-80px' }}
                transition={{ duration: 0.5 }}
              >
                <h2 className="text-2xl font-bold text-sky-400 mb-6">How PULSE Works</h2>

                <div className="space-y-8">
                  {/* Intro */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <p className="text-slate-300 leading-relaxed">
                      PULSE is modeled after the human brain. The <strong className="text-sky-400">Hippocampus</strong> stores
                      and consolidates memories. The <strong className="text-sky-400">Corpus Callosum</strong> enforces
                      governance across hemispheres. The <strong className="text-sky-400">Prefrontal Cortex</strong> manages
                      task planning and execution. Multiple agents operate as neurons in this system — each specialized, all
                      connected through shared infrastructure.
                    </p>
                  </div>

                  {/* Architecture Diagram */}
                  <div>
                    <h3 className="text-lg font-semibold text-slate-200 mb-4">Architecture Overview</h3>
                    <ArchitectureDiagram />
                  </div>

                  {/* Key Subsystems */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6">
                      <h4 className="text-sky-400 font-semibold mb-3">Brain Pipeline</h4>
                      <p className="text-slate-400 text-sm leading-relaxed">
                        <strong className="text-slate-300">Capture</strong> signed agent logs →{' '}
                        <strong className="text-slate-300">Bridge</strong> extracts knowledge via 62+ patterns with
                        salience scoring →{' '}
                        <strong className="text-slate-300">Store</strong> in 6 Hippocampus regions →{' '}
                        <strong className="text-slate-300">Consolidate</strong> every 6h (dedup, pattern mine, schema
                        promote) →{' '}
                        <strong className="text-slate-300">Boot</strong> briefing injects compressed intelligence into
                        every agent session.
                      </p>
                    </div>

                    <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6">
                      <h4 className="text-sky-400 font-semibold mb-3">Constitutional Governance</h4>
                      <p className="text-slate-400 text-sm leading-relaxed">
                        The Constitution is hash-locked (SHA-256 in .env). Tampering kills the orchestrator. 4
                        immutable Tier 0 laws + 10 Sacred Laws enforced via HMAC-SHA256 signing, compliance
                        validators, and pre-commit hooks. Governance is silent — users see work, not ceremony.
                      </p>
                    </div>

                    <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6">
                      <h4 className="text-sky-400 font-semibold mb-3">Swarm Coordination</h4>
                      <p className="text-slate-400 text-sm leading-relaxed">
                        The ASOP protocol manages a shared task board. Tasks are decomposed by complexity tier (fast,
                        standard, premium) and claimed atomically by agents. Background workers poll every 5s,
                        heartbeat every 30s, and auto-release stale claims after 5 minutes.
                      </p>
                    </div>

                    <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-6">
                      <h4 className="text-sky-400 font-semibold mb-3">Knowledge Graph</h4>
                      <p className="text-slate-400 text-sm leading-relaxed">
                        362+ nodes with 6 edge types (CAUSES, PREVENTS, REQUIRES, LEADS_TO, SIMILAR_TO, CONTRADICTS).
                        The graph connects lessons to failures, patterns to decisions, and evidence to schemas. The
                        prediction daemon uses it to score failure risks with confidence decay.
                      </p>
                    </div>
                  </div>

                  {/* Package Structure */}
                  <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl p-8">
                    <h3 className="text-lg font-semibold text-slate-200 mb-4">Package Structure</h3>
                    <pre className="bg-slate-900/90 border border-slate-700/50 rounded-xl p-4 text-sm font-mono text-slate-300 overflow-x-auto leading-relaxed">
{`pulse/
├── core/         # brain_utils, config, paths, crypto
├── brain/        # search, query, save, boot, extraction
├── agents/       # claude, gemini, codex, grok wrappers
├── workers/      # headless task execution daemons
├── tasks/        # dispatcher, relay, decomposer
├── daemons/      # orchestrator, bridge, neural, consolidation
├── graph/        # knowledge graph build + query
├── api/          # REST endpoints (/v1/brain/*, /v1/system/*)
├── admin/        # 30 maintenance + audit tools
├── cli/          # status, swarm, manage, agent commands
└── config/       # brain_config.json, knowledge_anchors.json`}
                    </pre>
                  </div>
                </div>
              </motion.div>
            </section>

            {/* FAQ */}
            <section
              ref={(el) => { sectionRefs.current['faq'] = el; }}
              id="faq"
            >
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-80px' }}
                transition={{ duration: 0.5 }}
              >
                <h2 className="text-2xl font-bold text-sky-400 mb-6">Frequently Asked Questions</h2>
                <FAQAccordion items={FAQ_ITEMS} />
              </motion.div>
            </section>
          </main>
        </div>
      </div>
    </div>
  );
}
