import React, { useState, useEffect, useRef } from 'react';
import { 
  Search, Menu, X, ChevronRight, Home, BookOpen, Layers, 
  Database, Layout as LayoutIcon, GitBranch, Map, Eye, 
  FileText, Copy, Check, Terminal, Info, AlertTriangle, 
  ArrowRight, ArrowLeft, Github, Twitter
} from 'lucide-react';

// --- CONFIG & DATA ---

const GROUPS = [
  'GETTING STARTED',
  'CORE CONCEPTS',
  'TECHNICAL DETAILS',
  'IMPLEMENTATION'
];

const PAGES = {
  'home': { 
    id: 'home', 
    title: 'Home', 
    icon: Home,
    group: null 
  },
  'getting-started': { 
    id: 'getting-started', 
    title: 'Getting Started', 
    icon: Terminal,
    group: 'GETTING STARTED',
    excerpt: 'Quick start guide to set up Mixfolio locally and connect to Supabase.'
  },
  'advanced': { 
    id: 'advanced', 
    title: 'Advanced Concepts & Vision', 
    icon: BookOpen,
    group: 'CORE CONCEPTS',
    excerpt: 'The philosophy behind Mixfolio: Magic Switcher, Asset Vault, and more.'
  },
  'project-vision': { 
    id: 'project-vision', 
    title: 'Project Vision', 
    icon: Eye,
    group: 'CORE CONCEPTS',
    excerpt: 'Understand the philosophy behind Mixfolio and the Creative OS concept.'
  },
  'system-architecture': { 
    id: 'system-architecture', 
    title: 'System Architecture', 
    icon: Layers,
    group: 'TECHNICAL DETAILS',
    excerpt: 'Complete guide to how the frontend, backend, and database work together.'
  },
  'database-architecture': { 
    id: 'database-architecture', 
    title: 'Database Architecture', 
    icon: Database,
    group: 'TECHNICAL DETAILS',
    excerpt: 'Deep dive into the 5-table Supabase schema, CASCADE deletion, and logic.'
  },
  'ui-ux-specifications': { 
    id: 'ui-ux-specifications', 
    title: 'UI/UX Specifications', 
    icon: LayoutIcon,
    group: 'TECHNICAL DETAILS',
    excerpt: 'Design specifications for the gallery, detail workspace, and toolbars.'
  },
  'workflows': { 
    id: 'workflows', 
    title: 'Workflows & Logic', 
    icon: GitBranch,
    group: 'TECHNICAL DETAILS',
    excerpt: 'Admin workflows, slugification, template system, and management patterns.'
  },
  'implementation-roadmap': { 
    id: 'implementation-roadmap', 
    title: 'Implementation Roadmap', 
    icon: Map,
    group: 'IMPLEMENTATION',
    excerpt: '4-phase build plan for implementing Mixfolio with timelines and criteria.'
  },
  'prd': { 
    id: 'prd', 
    title: 'Product Requirements (PRD)', 
    icon: FileText,
    group: 'IMPLEMENTATION',
    excerpt: 'The complete product specification, metrics, personas, and business roadmap.'
  }
};

const PAGE_ORDER = Object.keys(PAGES).filter(k => k !== 'home');

// --- SHARED UI COMPONENTS ---

const copyToClipboard = (text) => {
  const textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('Failed to copy text', err);
  }
  document.body.removeChild(textArea);
};

const CodeBlock = ({ language = 'bash', code }) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    copyToClipboard(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="my-6 rounded-lg overflow-hidden bg-[#121212] border border-[#2a2a2a]">
      <div className="flex items-center justify-between px-4 py-2 bg-[#1a1a1a] border-b border-[#2a2a2a]">
        <span className="text-xs font-mono text-gray-400">{language}</span>
        <button 
          onClick={handleCopy}
          className="p-1.5 hover:bg-[#2a2a2a] rounded text-gray-400 hover:text-white transition-colors"
          title="Copy code"
        >
          {copied ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
        </button>
      </div>
      <div className="p-4 overflow-x-auto">
        <pre className="text-sm font-mono text-gray-300">
          <code>{code}</code>
        </pre>
      </div>
    </div>
  );
};

const Callout = ({ type = 'info', title, children }) => {
  const styles = {
    info: 'bg-blue-900/20 border-blue-500/30 text-blue-200',
    warning: 'bg-orange-900/20 border-orange-500/30 text-orange-200',
    important: 'bg-red-900/20 border-red-500/30 text-red-200',
    note: 'bg-gray-800/50 border-gray-600/30 text-gray-300'
  };

  const icons = {
    info: <Info size={20} className="text-blue-400 mt-0.5 mr-3 flex-shrink-0" />,
    warning: <AlertTriangle size={20} className="text-orange-400 mt-0.5 mr-3 flex-shrink-0" />,
    important: <AlertTriangle size={20} className="text-red-400 mt-0.5 mr-3 flex-shrink-0" />,
    note: <Info size={20} className="text-gray-400 mt-0.5 mr-3 flex-shrink-0" />
  };

  return (
    <div className={`my-6 flex p-4 rounded-lg border ${styles[type]}`}>
      {icons[type]}
      <div>
        {title && <h4 className="font-semibold mb-1 text-white">{title}</h4>}
        <div className="text-sm leading-relaxed">{children}</div>
      </div>
    </div>
  );
};

const H2 = ({ id, children }) => (
  <h2 id={id} className="text-2xl font-bold mt-12 mb-4 text-white pb-2 border-b border-[#2a2a2a] scroll-mt-24 group flex items-center">
    {children}
    <a href={`#${id}`} className="ml-2 opacity-0 group-hover:opacity-100 text-gray-500 hover:text-blue-400 transition-opacity">#</a>
  </h2>
);

const H3 = ({ id, children }) => (
  <h3 id={id} className="text-xl font-semibold mt-8 mb-3 text-gray-100 scroll-mt-24">
    {children}
  </h3>
);

// --- DOCUMENTATION PAGES ---

const HomePage = ({ navigate }) => (
  <div className="max-w-5xl mx-auto">
    {/* Hero Section */}
    <div className="py-20 flex flex-col items-center text-center border-b border-[#2a2a2a] mb-12">
      <div className="inline-block mb-4 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-medium">
        Mixfolio Docs v1.0
      </div>
      <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight mb-6 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-400 to-blue-500">
        Welcome to Mixfolio
      </h1>
      <p className="text-xl text-gray-400 max-w-3xl mb-10 leading-relaxed">
        Mixfolio is a <strong>Universal Asset Manager and Creative OS</strong>. It is a "Second Brain" for your creative work, unifying your images, videos, code, prompts, and docs into one powerful, 5-table Supabase engine.
      </p>
      <div className="flex flex-col sm:flex-row gap-4">
        <button 
          onClick={() => navigate('getting-started')}
          className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors flex items-center justify-center"
        >
          Get Started <ArrowRight size={18} className="ml-2" />
        </button>
        <button 
          onClick={() => navigate('advanced')}
          className="px-6 py-3 bg-transparent border border-[#3a3a3a] hover:border-gray-400 text-gray-200 rounded-lg font-medium transition-colors flex items-center justify-center"
        >
          Explore Concepts
        </button>
      </div>
    </div>

    {/* Quick Links */}
    <div className="flex flex-wrap gap-4 mb-16 justify-center text-sm font-medium text-gray-400">
      <button onClick={() => navigate('getting-started')} className="hover:text-white transition-colors flex items-center">
        <Terminal size={16} className="mr-2" /> Set up Mixfolio
      </button>
      <span className="text-[#3a3a3a] hidden sm:inline">•</span>
      <button onClick={() => navigate('project-vision')} className="hover:text-white transition-colors flex items-center">
        <Eye size={16} className="mr-2" /> Understand the vision
      </button>
      <span className="text-[#3a3a3a] hidden sm:inline">•</span>
      <button onClick={() => navigate('system-architecture')} className="hover:text-white transition-colors flex items-center">
        <Layers size={16} className="mr-2" /> System design
      </button>
    </div>

    {/* Grid */}
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-20">
      {PAGE_ORDER.map(key => {
        const page = PAGES[key];
        const Icon = page.icon;
        return (
          <div 
            key={key}
            onClick={() => navigate(key)}
            className="group p-6 rounded-xl bg-[#151515] border border-[#2a2a2a] hover:border-blue-500/50 hover:bg-[#1a1a1a] transition-all cursor-pointer hover:-translate-y-1 hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)]"
          >
            <div className="w-12 h-12 rounded-lg bg-[#222] border border-[#333] flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
              <Icon size={24} className="text-gray-300 group-hover:text-blue-400 transition-colors" />
            </div>
            <h3 className="text-lg font-semibold text-white mb-2">{page.title}</h3>
            <p className="text-gray-400 text-sm leading-relaxed">{page.excerpt}</p>
          </div>
        );
      })}
    </div>
  </div>
);

const GettingStarted = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8">
      Welcome to the official setup guide for Mixfolio. This guide will walk you through setting up your local development environment, connecting to your Supabase instance, and preparing your "Creative OS."
    </p>

    <H2 id="prerequisites">Prerequisites</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6 text-gray-300">
      <li>Node.js (v18.0.0 or higher)</li>
      <li>npm, yarn, pnpm, or bun</li>
      <li>A Supabase account (free tier is sufficient for initial launch)</li>
      <li>Basic knowledge of React and Next.js/Vite</li>
    </ul>

    <H2 id="step-1-clone">Step 1: Clone the Repository</H2>
    <CodeBlock language="bash" code={`git clone https://github.com/yourusername/mixfolio.git\ncd mixfolio\nnpm install`} />

    <H2 id="step-2-supabase">Step 2: Set up Supabase Data</H2>
    <p className="mb-4">Mixfolio relies on a highly interconnected 5-table architecture. You need to create a project and set up the schema.</p>
    <ol className="list-decimal pl-6 space-y-2 mb-6">
      <li>Go to <a href="https://supabase.com" className="text-blue-400 hover:underline">supabase.com</a> and create a new project.</li>
      <li>Navigate to the SQL Editor and paste the contents of <code>schema.sql</code>.</li>
      <li>Ensure all Foreign Keys are mapped correctly with <code>CASCADE</code> for deletions and <code>SET NULL</code> for templates.</li>
      <li>Go to "Authentication" -&gt; "Policies" and ensure <code>Enable read access for all users</code> is active on all 5 tables so the public can see your portfolio.</li>
    </ol>

    <H2 id="step-3-storage">Step 3: The Storage Bucket (Crucial)</H2>
    <p className="mb-4">Your database only stores text links. The actual images need a physical warehouse.</p>
    <ol className="list-decimal pl-6 space-y-2 mb-6">
      <li>Go to the Storage tab (the folder icon) in Supabase.</li>
      <li>Click "New bucket" and name it exactly <code>artwork</code> (all lowercase).</li>
      <li><strong>Crucial:</strong> Toggle the "Public bucket" switch to ON. If this is OFF, your images will be invisible to visitors.</li>
    </ol>

    <H2 id="step-4-dummy">Step 4: The Dummy Data (The Sandbox)</H2>
    <Callout type="warning" title="Don't Skip This Step">
      Before connecting a visual UI builder like Figma Make, you <strong>must</strong> have dummy data. If your tables are empty, the UI will crash trying to fetch foreign keys.
    </Callout>
    <ol className="list-decimal pl-6 space-y-2 mb-6">
      <li>In the <code>templates</code> table, insert one row: Name = "Standard", active_specs = <code>["Software", "Tools"]</code>.</li>
      <li>In the <code>entities</code> table, insert one row: Title = "Test Project", Slug = "test-project", template_id = 1.</li>
    </ol>

    <H2 id="step-5-env">Step 5: Configure Environment Variables</H2>
    <CodeBlock language="env" code={`NEXT_PUBLIC_SUPABASE_URL=your_project_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key`} />

    <H2 id="step-6-run">Step 6: Run the Development Server</H2>
    <CodeBlock language="bash" code={`npm run dev`} />
  </div>
);

const AdvancedConcepts = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8">
      Mixfolio is a "Portfolio on Steroids." It moves beyond a static gallery into an interactive, app-like experience designed to maximize engagement and monetize your assets instantly.
    </p>

    <H2 id="triple-state">1. The Triple-State Logic (The Core Filter)</H2>
    <p className="mb-4">Every asset in Mixfolio is governed by three primary boolean flags. This transforms the platform from a simple website into a Universal Asset Manager:</p>
    <ul className="list-disc pl-6 space-y-4 mb-6">
      <li><strong><code>is_managed</code> (The Private State):</strong> The asset is in your personal library. It’s used for archiving, organizing, and work-in-progress. It acts as your private "Second Brain."</li>
      <li><strong><code>is_project</code> (The Showcase State):</strong> The asset is visible in your public portfolio grid. It’s designed to build your brand and professional clout.</li>
      <li><strong><code>is_product</code> (The Commercial State):</strong> The asset is listed in the Shop section. It automatically activates the paywall logic for linked files.</li>
    </ul>

    <H2 id="magic-switcher">2. The Magic Switcher (Interaction)</H2>
    <p className="mb-4"><strong>Problem:</strong> Traditional portfolios force users to scroll through 5 separate images to see color variations of the same logo or design.</p>
    <p className="mb-4"><strong>Solution:</strong> You show one main image. Below it, there is a row of clean, interactive circles (UI dots) representing different versions. Clicking a "Gold" circle instantly swaps the main image to the Gold version smoothly.</p>

    <H2 id="asset-vault">3. The Asset Vault (Micro-Transactions)</H2>
    <p className="mb-4">We don't put a paywall on the whole project; we put it on the <em>specific files</em>.</p>
    <Callout type="info" title="Format-Specific Paywalls">
      You can make the PNG free (for clout and sharing) but keep the SVG or Source File premium (for professional use). The system automatically checks the <code>is_premium</code> status of a file to decide whether to show a download icon or a checkout button.
    </Callout>

    <H2 id="god-mode-admin">4. The God-Mode Admin (Efficiency)</H2>
    <p className="mb-4"><strong>Goal:</strong> Upload a complex project with 10 colors and 30 file formats in under 2 minutes.</p>
    <p className="mb-4"><strong>Solution:</strong> A template-based admin panel. Instead of manually typing out "Software," "Resolution," and "Time Spent" every time, you select a "Rulebook" template. The UI dynamically generates the exact input fields needed based on a JSONB configuration.</p>

    <H2 id="deep-dive">5. Advanced Features (Deep Dive)</H2>
    <ul className="list-disc pl-6 space-y-4 mb-6">
      <li><strong>Deep Linking Variation System:</strong> Each color version is its own "state." The URL changes when a user clicks a color circle (e.g., <code>mixfolio.com/logo?color=gold</code>). This allows you to send a link to a client that opens directly to the version you want them to see.</li>
      <li><strong>SEO-Friendly Slug System:</strong> Clean, readable URLs automatically generated from project titles using regex logic, avoiding messy database IDs.</li>
    </ul>
  </div>
);

const SystemArchitecture = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8">
      Mixfolio's architecture bridges the gap between complex relational databases and seamless frontend interactions.
    </p>

    <H2 id="frontend-logic">1. Frontend Logic</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6">
      <li><strong>Swappable Cover Concept:</strong> The site reads the <code>variations</code> table. It maps out the <code>hex_color</code> codes into clickable circles. Clicking one instantly replaces the <code>main_image_url</code> with that variation's <code>preview_image_url</code> without refreshing the page.</li>
      <li><strong>Contextual Sidebar:</strong> The site looks at the project's <code>template_id</code>. If it's a "Standard" template, it knows to only pull "Software" and "Resolution" from the <code>specs_pool</code> table, ignoring irrelevant data like "Video FPS."</li>
    </ul>

    <H2 id="backend-logic">2. Backend Logic</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6">
      <li><strong>JSONB Trick:</strong> In the <code>templates</code> table, the <code>active_specs</code> column is a <code>jsonb</code> type (storing data like <code>["Software", "Tools"]</code>). This allows the Admin Panel code to instantly read that list and generate dynamic input boxes on the fly without complex database joins.</li>
      <li><strong>Direct-to-Storage Uploading:</strong> The Admin Panel bypasses the database for heavy lifting. It sends the physical file (.jpg, .png) to the public <code>artwork</code> bucket, grabs the generated URL, and pastes that text link into the table.</li>
    </ul>

    <H2 id="cascade">3. The Database Wiring (The Glue & Cascade)</H2>
    <div className="bg-[#1a1a1a] p-4 rounded-lg border border-[#333] mb-6 font-mono text-sm text-gray-300 overflow-x-auto">
      entities (Grandparent)<br/>
      &nbsp;├─→ variations (Child) ------ [FK: entity_id → CASCADE]<br/>
      &nbsp;│&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└─→ files_and_formats (Grandchild) -- [FK: variation_id → CASCADE]<br/>
      &nbsp;├─→ specs_pool (Details) ---- [FK: entity_id → CASCADE]<br/>
      &nbsp;└─→ templates (Rulebook) ---- [FK: template_id → SET NULL]
    </div>
    <Callout type="important" title="The Domino Effect (CASCADE vs SET NULL)">
      <strong>CASCADE:</strong> We set deletion rules for variations, files, and specs to CASCADE. If you delete a core Project, the database automatically hunts down and deletes every color circle, download link, and technical spec associated with it. Zero ghost data.<br/><br/>
      <strong>SET NULL:</strong> We set the deletion rule for the Template connection to SET NULL. If you decide you don't like the "Icons" template anymore and delete it, you don't want your Project to be deleted too! The project stays alive but just loses its "Template" instructions.
    </Callout>

    <H2 id="security">4. Security & Permissions Logic</H2>
    <p className="mb-4"><strong>Read-Only Public Access:</strong> We wrote <code>SELECT</code> policies for all 5 tables targeting the public role. Your frontend website is allowed to read the data and draw the screen, but random visitors cannot overwrite your database.</p>
  </div>
);

const DatabaseArchitecture = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8">
      The Mixfolio database is built on a <strong>5-table relational structure</strong> designed for maximum automation and clean data management. Here is the exact ELI5 breakdown of every table.
    </p>

    <H2 id="entities">1. entities Table (The Grandparent)</H2>
    <p className="mb-4">The core record for every project or asset. The absolute heart of the project. If this doesn't exist, nothing else can exist.</p>
    <div className="overflow-x-auto mb-8">
      <table className="w-full text-left text-sm border-collapse">
        <thead>
          <tr className="bg-[#1a1a1a] border-y border-[#333]">
            <th className="p-3">Column</th>
            <th className="p-3">Settings</th>
            <th className="p-3">ELI5 Purpose</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-[#2a2a2a]">
          <tr><td className="p-3 font-mono text-blue-400">id</td><td className="p-3">int8, Primary, Identity ON</td><td className="p-3 text-gray-400">The "Social Security Number" for every project. Auto-counts 1, 2, 3.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">title</td><td className="p-3">text, Not Null</td><td className="p-3 text-gray-400">Project name. A project without a name is just a ghost.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">slug</td><td className="p-3">text, Unique, Not Null</td><td className="p-3 text-gray-400">The URL-friendly name (e.g., my-cool-logo).</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">main_image_url</td><td className="p-3">text, Not Null</td><td className="p-3 text-gray-400">The "Front Door" image link from your storage bucket.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">is_managed</td><td className="p-3">bool, Default: false</td><td className="p-3 text-gray-400">Visible only to the owner (Private Archive).</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">is_project</td><td className="p-3">bool, Default: false</td><td className="p-3 text-gray-400">Puts this on the Portfolio home page.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">is_product</td><td className="p-3">bool, Default: false</td><td className="p-3 text-gray-400">Puts this in the Shop.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">template_id</td><td className="p-3">int8, Nullable</td><td className="p-3 text-gray-400">Links to rulebook (FK). Set Null on delete.</td></tr>
        </tbody>
      </table>
    </div>

    <H2 id="variations">2. variations Table (The Children)</H2>
    <p className="mb-4">This is where you store the different versions of a project, like the Gold, Silver, or Sketch versions. It powers the Magic Switcher.</p>
    <div className="overflow-x-auto mb-8">
      <table className="w-full text-left text-sm border-collapse">
        <tbody className="divide-y divide-[#2a2a2a]">
          <tr><td className="p-3 font-mono text-blue-400 w-1/4">id</td><td className="p-3">int8, Primary, Identity ON</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">entity_id</td><td className="p-3">The "Glue". Connects to entities.id. Action: <strong>CASCADE</strong>.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">name</td><td className="p-3">text (e.g., "Deep Space Blue")</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">hex_color</td><td className="p-3">text, Nullable. The color code for your UI circles.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">preview_image_url</td><td className="p-3">text. The image that pops up when this variation is selected.</td></tr>
        </tbody>
      </table>
    </div>

    <H2 id="files">3. files_and_formats Table (The Vault)</H2>
    <p className="mb-4">The "Delivery Room". Stores the actual downloadable files. This enables your "Add to Cart" or "Download" checkbox logic.</p>
    <div className="overflow-x-auto mb-8">
      <table className="w-full text-left text-sm border-collapse">
        <tbody className="divide-y divide-[#2a2a2a]">
          <tr><td className="p-3 font-mono text-blue-400 w-1/4">variation_id</td><td className="p-3">The "Glue". Connects to variations.id. Action: <strong>CASCADE</strong>.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">file_url</td><td className="p-3">text. Link to the file in your Supabase bucket.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">format_type</td><td className="p-3">text. Extension (e.g., "SVG", "PNG", "PDF").</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">is_premium</td><td className="p-3">bool, Default: false. If true, shows a "Buy" button instead of "Download".</td></tr>
        </tbody>
      </table>
    </div>

    <H2 id="specs">4. specs_pool Table (The Details)</H2>
    <p className="mb-4">Your technical "Backpack". Stores dry facts like "Software Used" or "Resolution".</p>
    <div className="overflow-x-auto mb-8">
      <table className="w-full text-left text-sm border-collapse">
        <tbody className="divide-y divide-[#2a2a2a]">
          <tr><td className="p-3 font-mono text-blue-400 w-1/4">entity_id</td><td className="p-3">The "Glue". Connects to entities.id. Action: <strong>CASCADE</strong>.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">label</td><td className="p-3">text. The "Question" (e.g., "Software").</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">value</td><td className="p-3">text. The "Answer" (e.g., "Figma").</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">is_hidden</td><td className="p-3">bool, Default: false. Toggle to hide a stat without deleting it.</td></tr>
        </tbody>
      </table>
    </div>

    <H2 id="templates">5. templates Table (The Rulebook)</H2>
    <p className="mb-4">Your "God-Mode" control center. Master instructions for your uploads.</p>
    <div className="overflow-x-auto mb-8">
      <table className="w-full text-left text-sm border-collapse">
        <tbody className="divide-y divide-[#2a2a2a]">
          <tr><td className="p-3 font-mono text-blue-400 w-1/4">name</td><td className="p-3">text. Preset name (e.g., "For Fun", "Client Project").</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">active_specs</td><td className="p-3">jsonb. The "Swiss Army Knife" array: <code>["Software", "Resolution"]</code>.</td></tr>
          <tr><td className="p-3 font-mono text-blue-400">default_layout</td><td className="p-3">text, Nullable. Tells the website how to arrange images (e.g., "Grid").</td></tr>
        </tbody>
      </table>
    </div>
  </div>
);

const UIUXSpecs = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8">
      The visual language of Mixfolio draws heavy inspiration from top-tier creative tools like Midjourney, Framer, and Freepik. It is built as a <em>Pro-Tool</em>, not just a blog.
    </p>

    <H2 id="masonry">1. Masonry Intelligence</H2>
    <ul className="list-disc pl-6 space-y-4 mb-6">
      <li><strong>Aspect Ratio Intelligence:</strong> The grid does not crop images into boring squares. It reads the metadata and places assets in a dense, Pinterest-style layout based on their native ratio (1:1, 16:9, 9:16, 2:3, etc.).</li>
      <li><strong>Multi-Select Filter Chips:</strong> Located at the top, these pill-shaped toggles allow users to combine filters. For example, selecting "Motion" + "Free" will instantly filter the <code>entities</code> table for assets where <code>type=video</code> AND <code>is_product=false</code>.</li>
    </ul>

    <H2 id="workspace">2. The Detail Workspace</H2>
    <p className="mb-4">Clicking an asset opens a multi-pane overlay that functions like a workspace.</p>
    <ul className="list-disc pl-6 space-y-4 mb-6">
      <li><strong>The Viewport:</strong> A large, central area for the asset against a deep #0f0f0f background.</li>
      <li><strong>The Dynamic Sidebar (The "Backpack"):</strong> The right 30% acts as the control panel. It fetches data from <code>specs_pool</code>. If it's an AI project, it shows the Prompt and Seed. If it's a coding project, it shows the Language and Framework.</li>
    </ul>

    <H2 id="toolbars">3. Floating Toolbars & Inputs</H2>
    <ul className="list-disc pl-6 space-y-4 mb-6">
      <li><strong>Adaptive Actions:</strong> Contextual menus that float over the preview (e.g., "Use as Style," "Copy Prompt," "Download Source") with subtle glassmorphism (<code>backdrop-blur</code>) effects.</li>
      <li><strong>Color Visualization:</strong> The <code>hex_color</code> input in the Admin Panel isn't just a text box; it renders a visual Color Picker UI so you can see the exact shade.</li>
      <li><strong>Toggle Switches:</strong> <code>is_project</code>, <code>is_product</code>, and <code>is_premium</code> shouldn't be boring dropdowns—they need to be slick iOS-style toggle switches for fast, frictionless editing.</li>
    </ul>

    <H2 id="accessibility">4. Global Navigation & Interactions</H2>
    <p className="mb-4">Inspired by Freepik's pro-tool layout, the navigation is a collapsible vertical bar on the far left. Users can "pin" their most-used categories. The entire UI relies on smooth spring animations for opening/closing panels.</p>
  </div>
);

const WorkflowsLogic = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8">
      Mixfolio utilizes a phased, systematic approach to data management to prevent "prompt bloat" and ensure the database stays perfectly clean.
    </p>

    <H2 id="admin-workflow">1. The "God-Mode" Admin Workflow</H2>
    <p className="mb-4">Uploading a massive project with 3 colors and 2 files each generates <strong>14 database rows</strong> instantly linked together safely. The workflow follows 4 steps:</p>
    <ol className="list-decimal pl-6 space-y-2 mb-6">
      <li><strong>Select Template:</strong> Choose the rulebook (e.g., "UI Kit").</li>
      <li><strong>Basic Info:</strong> Fill out Title, Description. Slug auto-generates. Upload the main cover.</li>
      <li><strong>Variations & Files:</strong> Add the Hex Colors. Drag and drop source files (SVG, PNG). Flip the <code>is_premium</code> switches.</li>
      <li><strong>Specs:</strong> Fill in the dynamically generated fields dictated by the Template's JSON array.</li>
    </ol>

    <H2 id="storage-workflow">2. Direct-to-Storage Workflow</H2>
    <Callout type="info" title="The Digital Warehouse">
      The Admin Panel doesn't save images directly into the PostgreSQL tables. It sends the physical file (.jpg, .png) to the public <code>artwork</code> Supabase bucket, grabs the public URL that Supabase generates, and pastes that text link into the <code>entities</code> or <code>variations</code> table.
    </Callout>

    <H2 id="slugification">3. Slugification</H2>
    <p className="mb-4">To ensure clean URLs for SEO (e.g. <code>/logo-design-for-startup</code> instead of messy database IDs), a robust slugify utility runs on the Title input automatically:</p>
    <CodeBlock language="javascript" code={`function slugify(text) {
  return text.toString().toLowerCase()
    .replace(/\\s+/g, '-')           // Replace spaces with -
    .replace(/[^\\w\\-]+/g, '')       // Remove all non-word chars
    .replace(/\\-\\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}`} />

    <H2 id="cascade">4. Data Management Patterns (Cascade)</H2>
    <p className="mb-4">By utilizing Foreign Keys with <code>ON DELETE CASCADE</code>, we automate housekeeping. If you decide a project is "old" and delete it from the Admin Panel, the system automatically hunts down and deletes all 10 color variations, all 30 download files, and all 5 tech specs linked to it.</p>
  </div>
);

const ImplementationRoadmap = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8">
      Building Mixfolio requires a strictly phased, modular approach. Giving an AI builder a giant "God-Prompt" will result in a buggy mess. This roadmap isolates the 5 different tables into 4 sprints.
    </p>

    <H2 id="phase-1">Sprint 1: The Core Foundation (Projects & Storage)</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6">
      <li><strong>The Goal:</strong> Build a page to create, edit, and delete entries in the <code>entities</code> table.</li>
      <li><strong>Key Tasks:</strong> Input fields for title, slug. A drag-and-drop box that sends files to the <code>artwork</code> bucket and saves the URL. Toggles for <code>is_project</code> and <code>is_product</code>.</li>
      <li><strong>Success Check:</strong> Can I upload a title and a cover image and see it appear in Supabase?</li>
    </ul>

    <H2 id="phase-2">Sprint 2: The Variation Engine (Colors & Versions)</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6">
      <li><strong>The Goal:</strong> Connect the <code>variations</code> table to each project.</li>
      <li><strong>Key Tasks:</strong> Use the <code>entity_id</code> to "glue" a variation to its parent. Add a Hex Color Picker and a secondary uploader for the preview image.</li>
      <li><strong>Success Check:</strong> Can I add a "Gold" version and a "Sketch" version to Project A?</li>
    </ul>

    <H2 id="phase-3">Sprint 3: The Asset Delivery (Downloads & Formats)</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6">
      <li><strong>The Goal:</strong> Connect the <code>files_and_formats</code> table to the variations.</li>
      <li><strong>Key Tasks:</strong> An interface to upload specific files and label them (SVG/PNG). A switch for <code>is_premium</code> (Buy vs Free). Links to <code>variation_id</code>.</li>
      <li><strong>Success Check:</strong> If I delete a Variation, do all its linked files disappear too (Cascade rule)?</li>
    </ul>

    <H2 id="phase-4">Sprint 4: Technical Specs & Rules (The Finishing Touches)</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6">
      <li><strong>The Goal:</strong> Link <code>templates</code> and <code>specs_pool</code>.</li>
      <li><strong>Key Tasks:</strong> A dropdown to choose the layout template. A way to add "Label: Software" and "Value: Figma" pairs linked by <code>entity_id</code>.</li>
      <li><strong>Success Check:</strong> Does the project show the correct technical specs based on the chosen template?</li>
    </ul>
  </div>
);

const ProjectVision = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <p className="text-lg mb-8 leading-relaxed font-light">
      "Most portfolios are dead ends. Most digital shops are clinical. Mixfolio is the bridge."
    </p>

    <H2 id="philosophy">The Philosophy: A Creative Second Brain</H2>
    <p className="mb-4">Mixfolio was born from a simple frustration: Creative professionals have to split their identity across platforms. You put your pretty pictures on Behance. You put your source files on Gumroad. You write your case studies on Medium.</p>
    <p className="mb-6">This fragmentation destroys context. Mixfolio is not just a custom portfolio or a shop. It is a <strong>Universal Asset Manager</strong> designed to house <em>everything</em> you ever created: Photos, Videos, GIFs, Motions, Code snippets, Texts, AI Prompts, and Docs.</p>

    <H2 id="creative-os">A "Creative OS"</H2>
    <p className="mb-4">Mixfolio isn't a theme; it's an operating system for your creative assets.</p>
    <ul className="list-disc pl-6 space-y-4 mb-6">
      <li><strong>Asset Centralization:</strong> Every logo, script, 3D model, and UI kit lives in one tightly linked PostgreSQL database.</li>
      <li><strong>Frictionless Distribution:</strong> When someone sees a beautiful 3D icon you rendered, that is the exact moment of highest intent. The distance between "Wow, that looks cool" and "I want the SVG" is exactly one click.</li>
      <li><strong>Professional Perception:</strong> The Magic Switcher, Floating Toolbars, and immersive dark-mode UI signal high value, allowing creators to charge premium rates for their assets.</li>
    </ul>
  </div>
);

const PRD = () => (
  <div className="prose prose-invert max-w-none text-gray-300">
    <div className="bg-[#1a1a1a] p-6 rounded-xl border border-[#333] mb-8">
      <h3 className="text-white font-bold mb-4 border-b border-[#333] pb-2">Document Info</h3>
      <div className="grid grid-cols-2 gap-4 text-sm">
        <div><span className="text-gray-500 block">Product</span>Mixfolio OS</div>
        <div><span className="text-gray-500 block">Status</span>In Development</div>
        <div><span className="text-gray-500 block">Target Launch</span>Q3</div>
        <div><span className="text-gray-500 block">Lead</span>Product Team</div>
      </div>
    </div>

    <H2 id="overview">Product Overview</H2>
    <p className="mb-6">A self-hosted, headless CMS and frontend explicitly designed for digital creators to showcase multi-variant assets and monetize specific file formats seamlessly.</p>

    <H2 id="personas">Target Users</H2>
    <ul className="list-disc pl-6 space-y-2 mb-6">
      <li><strong>The Asset Creator:</strong> 3D artists, UI designers, and illustrators with high-volume, multi-format outputs.</li>
      <li><strong>The Hybrid Engineer:</strong> Developers who create both visual templates and premium code snippets.</li>
    </ul>

    <H2 id="metrics">Success Metrics (KPIs)</H2>
    <div className="overflow-x-auto mb-8">
      <table className="w-full text-left text-sm border-collapse">
        <tbody className="divide-y divide-[#2a2a2a]">
          <tr><td className="p-3 font-semibold text-white">Upload Time</td><td className="p-3 text-gray-400">&lt; 2 minutes for a complex 3-variant project via Admin.</td></tr>
          <tr><td className="p-3 font-semibold text-white">Lighthouse Score</td><td className="p-3 text-gray-400">90+ Performance (critical for visual heavy sites).</td></tr>
          <tr><td className="p-3 font-semibold text-white">Conversion Rate</td><td className="p-3 text-gray-400">Increase asset sales by 15% vs separate storefronts.</td></tr>
        </tbody>
      </table>
    </div>

    <H2 id="constraints">Technical Constraints</H2>
    <Callout type="warning" title="Supabase Free Tier Limits">
      Must operate entirely within the Supabase Free Tier limits for initial deployment (<strong>500MB DB space, 1GB Storage</strong>). Asset optimization before upload to the <code>artwork</code> bucket is mandatory.
    </Callout>
  </div>
);

// --- MAIN APPLICATION ---

export default function App() {
  const [currentPage, setCurrentPage] = useState('home');
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const searchInputRef = useRef(null);

  // Scroll to top on page change
  useEffect(() => {
    window.scrollTo(0, 0);
    setIsSidebarOpen(false);
  }, [currentPage]);

  // Handle Cmd+K
  useEffect(() => {
    const handleKeyDown = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        setIsSearchOpen(true);
      }
      if (e.key === 'Escape' && isSearchOpen) {
        setIsSearchOpen(false);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isSearchOpen]);

  // Focus search input when modal opens
  useEffect(() => {
    if (isSearchOpen && searchInputRef.current) {
      setTimeout(() => searchInputRef.current.focus(), 100);
    }
  }, [isSearchOpen]);

  const navigate = (pageId) => {
    setCurrentPage(pageId);
    setIsSearchOpen(false);
  };

  // Extract headings for TOC dynamically based on the component being rendered
  const generateTOC = (pageId) => {
    const tocMap = {
      'getting-started': [
        { id: 'prerequisites', text: 'Prerequisites' },
        { id: 'step-1-clone', text: 'Step 1: Clone' },
        { id: 'step-2-supabase', text: 'Step 2: Supabase Schema' },
        { id: 'step-3-storage', text: 'Step 3: Storage Bucket' },
        { id: 'step-4-dummy', text: 'Step 4: Dummy Data' },
        { id: 'step-5-env', text: 'Step 5: Env Vars' },
        { id: 'step-6-run', text: 'Step 6: Run' },
      ],
      'advanced': [
        { id: 'triple-state', text: 'Triple-State Logic' },
        { id: 'magic-switcher', text: 'The Magic Switcher' },
        { id: 'asset-vault', text: 'The Asset Vault' },
        { id: 'god-mode-admin', text: 'The God-Mode Admin' },
        { id: 'deep-dive', text: 'Advanced Features' },
      ],
      'system-architecture': [
        { id: 'frontend-logic', text: 'Frontend Logic' },
        { id: 'backend-logic', text: 'Backend Logic' },
        { id: 'cascade', text: 'Database Wiring & Cascade' },
        { id: 'security', text: 'Security Logic' },
      ],
      'database-architecture': [
        { id: 'entities', text: 'entities Table' },
        { id: 'variations', text: 'variations Table' },
        { id: 'files', text: 'files_and_formats Table' },
        { id: 'specs', text: 'specs_pool Table' },
        { id: 'templates', text: 'templates Table' },
      ],
      'ui-ux-specifications': [
        { id: 'masonry', text: 'Masonry Intelligence' },
        { id: 'workspace', text: 'Detail Workspace' },
        { id: 'toolbars', text: 'Floating Toolbars' },
        { id: 'accessibility', text: 'Global Nav & Interactions' },
      ],
      'workflows': [
        { id: 'admin-workflow', text: 'Admin Workflow' },
        { id: 'storage-workflow', text: 'Storage Workflow' },
        { id: 'slugification', text: 'Slugification' },
        { id: 'cascade', text: 'Cascade Patterns' },
      ],
      'implementation-roadmap': [
        { id: 'phase-1', text: 'Sprint 1: Projects & Storage' },
        { id: 'phase-2', text: 'Sprint 2: Variation Engine' },
        { id: 'phase-3', text: 'Sprint 3: Asset Delivery' },
        { id: 'phase-4', text: 'Sprint 4: Tech Specs' },
      ],
      'project-vision': [
        { id: 'philosophy', text: 'The Philosophy' },
        { id: 'creative-os', text: 'A "Creative OS"' },
      ],
      'prd': [
        { id: 'overview', text: 'Overview' },
        { id: 'personas', text: 'Target Users' },
        { id: 'metrics', text: 'Success Metrics' },
        { id: 'constraints', text: 'Constraints' },
      ]
    };
    return tocMap[pageId] || [];
  };

  const getPageNav = () => {
    const currentIndex = PAGE_ORDER.indexOf(currentPage);
    if (currentIndex === -1) return { prev: null, next: null };
    return {
      prev: currentIndex > 0 ? PAGES[PAGE_ORDER[currentIndex - 1]] : null,
      next: currentIndex < PAGE_ORDER.length - 1 ? PAGES[PAGE_ORDER[currentIndex + 1]] : null
    };
  };

  const searchResults = searchQuery.trim() === '' ? [] : Object.values(PAGES).filter(p => 
    p.id !== 'home' && 
    (p.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
     p.excerpt.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  const renderContent = () => {
    switch (currentPage) {
      case 'home': return <HomePage navigate={navigate} />;
      case 'getting-started': return <GettingStarted />;
      case 'advanced': return <AdvancedConcepts />;
      case 'project-vision': return <ProjectVision />;
      case 'system-architecture': return <SystemArchitecture />;
      case 'database-architecture': return <DatabaseArchitecture />;
      case 'ui-ux-specifications': return <UIUXSpecs />;
      case 'workflows': return <WorkflowsLogic />;
      case 'implementation-roadmap': return <ImplementationRoadmap />;
      case 'prd': return <PRD />;
      default: return <HomePage navigate={navigate} />;
    }
  };

  return (
    <div className="min-h-screen bg-[#0f0f0f] text-[#e0e0e0] font-sans selection:bg-blue-500/30">
      
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 h-16 bg-[#0f0f0f]/80 backdrop-blur-md border-b border-[#2a2a2a] z-40 flex items-center justify-between px-4 lg:px-8">
        <div className="flex items-center">
          <button 
            onClick={() => setIsSearchOpen(true)}
            className="hidden sm:flex items-center bg-[#1a1a1a] border border-[#333] hover:border-blue-500/50 text-gray-400 px-4 py-1.5 rounded-lg text-sm transition-colors group"
          >
            <Search size={16} className="mr-2 group-hover:text-blue-400 transition-colors" />
            <span>Search docs...</span>
            <span className="ml-8 text-xs font-mono bg-[#2a2a2a] px-1.5 py-0.5 rounded text-gray-500">⌘K</span>
          </button>
          <button 
            onClick={() => setIsSearchOpen(true)}
            className="sm:hidden p-2 text-gray-400 hover:text-white"
          >
            <Search size={20} />
          </button>
        </div>
      </header>

      {/* Main Layout */}
      <div className="pt-16 flex max-w-[1600px] mx-auto">
        
        {/* Left Sidebar */}
        <aside className={`
          fixed md:sticky top-16 left-0 h-[calc(100vh-4rem)] w-72 bg-[#0f0f0f] md:bg-transparent border-r border-[#2a2a2a] z-30
          overflow-y-auto pb-10 transition-transform duration-300 ease-in-out
          ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
        `}>
          <div className="p-6">
            <button 
              onClick={() => navigate('home')}
              className={`flex items-center w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors mb-6
                ${currentPage === 'home' ? 'bg-blue-500/10 text-blue-400' : 'text-gray-400 hover:text-white hover:bg-[#1a1a1a]'}`}
            >
              <Home size={18} className="mr-3" /> Home
            </button>

            {GROUPS.map(group => (
              <div key={group} className="mb-8">
                <h4 className="text-xs font-bold text-gray-500 tracking-wider mb-3 px-3 uppercase">{group}</h4>
                <div className="space-y-1">
                  {PAGE_ORDER.filter(key => PAGES[key].group === group).map(key => {
                    const isActive = currentPage === key;
                    return (
                      <button
                        key={key}
                        onClick={() => navigate(key)}
                        className={`flex w-full text-left px-3 py-2 rounded-lg text-sm transition-colors
                          ${isActive 
                            ? 'bg-blue-500/10 text-blue-400 font-medium' 
                            : 'text-gray-400 hover:text-gray-200 hover:bg-[#1a1a1a]'
                          }`}
                      >
                        {PAGES[key].title}
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </aside>

        {/* Mobile Sidebar Overlay */}
        {isSidebarOpen && (
          <div 
            className="fixed inset-0 bg-black/60 z-20 md:hidden backdrop-blur-sm"
            onClick={() => setIsSidebarOpen(false)}
          />
        )}

        {/* Main Content Area */}
        <main className="flex-1 min-w-0">
          <div className="px-6 py-10 md:py-16 lg:px-12 xl:px-20 max-w-4xl mx-auto">
            
            {currentPage !== 'home' && (
              <>
                {/* Breadcrumbs */}
                <div className="flex items-center text-sm text-gray-500 mb-8 font-medium">
                  <span className="hover:text-white cursor-pointer transition-colors" onClick={() => navigate('home')}>Docs</span>
                  <ChevronRight size={14} className="mx-2" />
                  <span>{PAGES[currentPage].group}</span>
                  <ChevronRight size={14} className="mx-2" />
                  <span className="text-gray-300">{PAGES[currentPage].title}</span>
                </div>

                <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-6 tracking-tight">
                  {PAGES[currentPage].title}
                </h1>
                <p className="text-xl text-gray-400 mb-12 border-b border-[#2a2a2a] pb-10 leading-relaxed">
                  {PAGES[currentPage].excerpt}
                </p>
              </>
            )}

            <div className="content-rendered">
              {renderContent()}
            </div>

            {/* Pagination / Prev Next */}
            {currentPage !== 'home' && (
              <div className="mt-20 pt-8 border-t border-[#2a2a2a] flex flex-col sm:flex-row justify-between gap-4">
                {getPageNav().prev ? (
                  <button 
                    onClick={() => navigate(getPageNav().prev.id)}
                    className="flex-1 text-left p-4 rounded-xl border border-[#2a2a2a] hover:border-gray-500 hover:bg-[#1a1a1a] transition-all group"
                  >
                    <span className="text-xs text-gray-500 font-medium uppercase tracking-wider mb-1 block group-hover:text-gray-400">Previous</span>
                    <span className="text-blue-400 font-medium flex items-center">
                      <ArrowLeft size={16} className="mr-2 transform group-hover:-translate-x-1 transition-transform" />
                      {getPageNav().prev.title}
                    </span>
                  </button>
                ) : <div className="flex-1"></div>}
                
                {getPageNav().next ? (
                  <button 
                    onClick={() => navigate(getPageNav().next.id)}
                    className="flex-1 text-right p-4 rounded-xl border border-[#2a2a2a] hover:border-gray-500 hover:bg-[#1a1a1a] transition-all group"
                  >
                    <span className="text-xs text-gray-500 font-medium uppercase tracking-wider mb-1 block group-hover:text-gray-400">Next</span>
                    <span className="text-blue-400 font-medium flex items-center justify-end">
                      {getPageNav().next.title}
                      <ArrowRight size={16} className="ml-2 transform group-hover:translate-x-1 transition-transform" />
                    </span>
                  </button>
                ) : <div className="flex-1"></div>}
              </div>
            )}

            {/* Footer */}
            <footer className="mt-24 pt-8 border-t border-[#2a2a2a] flex flex-col md:flex-row items-center justify-between text-sm text-gray-500 pb-12">
              <div className="mb-4 md:mb-0">
                &copy; {new Date().getFullYear()} Mixfolio OS. All rights reserved.
              </div>
              <div className="flex gap-6">
                <a href="#" className="hover:text-white transition-colors flex items-center">
                  <Github size={16} className="mr-2" /> GitHub
                </a>
                <a href="#" className="hover:text-white transition-colors flex items-center">
                  <Twitter size={16} className="mr-2" /> Twitter
                </a>
              </div>
            </footer>
          </div>
        </main>

        {/* Right Sidebar (Table of Contents) */}
        {currentPage !== 'home' && generateTOC(currentPage).length > 0 && (
          <aside className="hidden xl:block w-64 shrink-0 py-16 pr-8">
            <div className="sticky top-24">
              <h4 className="text-xs font-bold text-gray-500 tracking-wider uppercase mb-4">On this page</h4>
              <ul className="space-y-2.5 border-l border-[#2a2a2a]">
                {generateTOC(currentPage).map(item => (
                  <li key={item.id}>
                    <a 
                      href={`#${item.id}`} 
                      className="block pl-4 text-sm text-gray-400 hover:text-white hover:border-blue-500 border-l-2 border-transparent -ml-[1px] transition-colors"
                    >
                      {item.text}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        )}
      </div>

      {/* Search Modal */}
      {isSearchOpen && (
        <div className="fixed inset-0 z-50 flex items-start justify-center pt-[10vh]">
          <div 
            className="absolute inset-0 bg-black/80 backdrop-blur-sm" 
            onClick={() => setIsSearchOpen(false)}
          ></div>
          <div className="relative w-full max-w-2xl bg-[#151515] rounded-xl border border-[#333] shadow-2xl overflow-hidden mx-4 animate-in fade-in zoom-in-95 duration-200">
            <div className="flex items-center px-4 py-3 border-b border-[#2a2a2a]">
              <Search size={20} className="text-blue-500 mr-3" />
              <input
                ref={searchInputRef}
                type="text"
                placeholder="Search documentation..."
                className="flex-1 bg-transparent border-none outline-none text-white text-lg placeholder-gray-500"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <button 
                onClick={() => setIsSearchOpen(false)}
                className="p-1 text-gray-500 hover:text-white rounded-md bg-[#222] text-xs font-mono px-2"
              >
                ESC
              </button>
            </div>
            
            <div className="max-h-[60vh] overflow-y-auto p-2">
              {searchQuery.trim() === '' ? (
                <div className="p-8 text-center text-gray-500">
                  <Search size={32} className="mx-auto mb-3 opacity-20" />
                  <p>Start typing to search across all documentation.</p>
                </div>
              ) : searchResults.length > 0 ? (
                <div className="space-y-1">
                  {searchResults.map((page) => (
                    <div 
                      key={page.id}
                      onClick={() => navigate(page.id)}
                      className="p-3 rounded-lg hover:bg-blue-500/10 cursor-pointer group flex items-center"
                    >
                      <div className="w-8 h-8 rounded bg-[#222] flex items-center justify-center mr-4 group-hover:text-blue-400 group-hover:bg-[#1a1a1a]">
                        <page.icon size={16} />
                      </div>
                      <div className="flex-1">
                        <div className="text-gray-200 font-medium group-hover:text-blue-400">{page.title}</div>
                        <div className="text-xs text-gray-500 truncate">{page.excerpt}</div>
                      </div>
                      <ChevronRight size={16} className="text-gray-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </div>
                  ))}
                </div>
              ) : (
                <div className="p-8 text-center text-gray-500">
                  No results found for "{searchQuery}".
                </div>
              )}
            </div>
          </div>
        </div>
      )}

    </div>
  );
}