'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import {
  Sparkles,
  Code,
  Brain,
  Layers,
  ArrowRight,
  Factory,
  MessageSquare,
  Database,
  Layout,
  GitBranch,
  ChevronRight,
  Bot,
  Zap,
  FileCode,
  Settings,
  CheckCircle,
  Heart,
  Quote,
  Star,
} from 'lucide-react';
import { InternalHeader } from '@/components/ui/internal-header';
import { COMPANION, VOCAB } from '@/lib/white-label/constants';

const WEFT_PRINCIPLES = [
  {
    icon: <MessageSquare className="w-6 h-6" />,
    title: 'Intent-Based, Not Syntax-Based',
    description: 'Weft doesn\'t care about semicolons or brackets. It cares about what you want to build. The AI interprets intent and generates the correct implementation. No more fighting with syntax errors at 3am—just describe your vision and watch it materialize.',
    color: 'purple',
  },
  {
    icon: <Brain className="w-6 h-6" />,
    title: 'AI-Native by Design',
    description: 'Weft is written by AI agents, for AI agents. Humans describe goals; AI translates them into code. This isn\'t a language you learn—it\'s a language the machine speaks fluently, bridging the gap between human creativity and computational precision.',
    color: 'cyan',
  },
  {
    icon: <Layers className="w-6 h-6" />,
    title: 'Declarative Architecture',
    description: 'You declare what should exist (models, endpoints, components) and the relationships between them. The system figures out how to make it happen. It\'s like having an architect, engineer, and builder all in one—you draw the blueprint, Weft builds the skyscraper.',
    color: 'green',
  },
  {
    icon: <GitBranch className="w-6 h-6" />,
    title: 'Pipeline-Driven Generation',
    description: 'Weft flows through a structured pipeline: Architecture → Models → APIs → Components → Finalization. Each stage builds on the previous, like threads weaving together into a tapestry of functional, beautiful code.',
    color: 'orange',
  },
];

const PIPELINE_STAGES = [
  {
    stage: 1,
    name: 'Architecture Design',
    icon: <Brain className="w-5 h-5" />,
    description: 'AI analyzes the natural language prompt and designs the overall system architecture.',
    outputs: ['Data models & relationships', 'API endpoint structure', 'UI component hierarchy', 'Technical decisions'],
    color: 'purple',
  },
  {
    stage: 2,
    name: 'Prisma Models',
    icon: <Database className="w-5 h-5" />,
    description: 'Generates database schema definitions using Prisma ORM syntax.',
    outputs: ['Model definitions', 'Field types & constraints', 'Relations & indexes', 'Default values'],
    color: 'cyan',
  },
  {
    stage: 3,
    name: 'API Routes',
    icon: <GitBranch className="w-5 h-5" />,
    description: 'Creates Next.js API route handlers for CRUD operations and business logic.',
    outputs: ['REST endpoints', 'Request validation', 'Error handling', 'Database operations'],
    color: 'green',
  },
  {
    stage: 4,
    name: 'UI Components',
    icon: <Layout className="w-5 h-5" />,
    description: 'Generates React components with TypeScript, Tailwind styling, and hooks.',
    outputs: ['Page components', 'Form components', 'List/table views', 'State management'],
    color: 'pink',
  },
  {
    stage: 5,
    name: 'Finalization',
    icon: <CheckCircle className="w-5 h-5" />,
    description: 'Validates all artifacts and prepares them for deployment.',
    outputs: ['Type checking', 'Dependency verification', 'Path resolution', 'Artifact packaging'],
    color: 'yellow',
  },
];

// Color class mappings for Tailwind (dynamic classes don't work with purging)
const stageColors: Record<string, { bg: string; text: string; border: string }> = {
  cyan: { bg: 'bg-brand-deep/20', text: 'text-brand-light', border: 'border-brand-deep/30' },
  blue: { bg: 'bg-blue-500/20', text: 'text-blue-300', border: 'border-blue-500/30' },
  purple: { bg: 'bg-brand-secondary/20', text: 'text-brand-secondary-light', border: 'border-brand-secondary/30' },
  pink: { bg: 'bg-pink-500/20', text: 'text-pink-300', border: 'border-pink-500/30' },
  yellow: { bg: 'bg-yellow-500/20', text: 'text-yellow-300', border: 'border-yellow-500/30' },
  green: { bg: 'bg-green-500/20', text: 'text-green-300', border: 'border-green-500/30' },
};

export default function WeftDocsPage() {
  return (
    <div className="min-h-screen bg-brand-bg">
      <InternalHeader />
      
      <main className="pt-20 pb-16">
        <div className="max-w-6xl mx-auto px-6">
          {/* Breadcrumb */}
          <div className="flex items-center gap-2 text-sm text-gray-300 mb-8">
            <Link href="/docs" className="hover:text-brand transition-colors">Documentation</Link>
            <ChevronRight className="w-4 h-4" />
            <Link href="/docs/dark-factory" className="hover:text-brand transition-colors">{VOCAB.factory}</Link>
            <ChevronRight className="w-4 h-4" />
            <span className="text-brand">Weft Language</span>
          </div>

          {/* Hero */}
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-16"
          >
            <div className="flex items-center gap-4 mb-6">
              <div className="p-4 rounded-2xl bg-gradient-to-br from-brand-secondary/20 to-brand-deep/20 border border-brand-secondary/30">
                <Sparkles className="w-10 h-10 text-brand-secondary-light" />
              </div>
              <div>
                <h1 className="text-4xl font-bold text-white">Weft Language</h1>
                <p className="text-gray-300">The declarative intent language that powers the {VOCAB.factory}</p>
              </div>
            </div>
            
            <p className="text-lg text-gray-300 max-w-3xl leading-relaxed">
              In the world of software, there are languages that machines understand and languages that humans speak. 
              Weft bridges both worlds—a poetic synthesis of intent and execution, where your thoughts become code 
              without the friction of syntax. Welcome to the future of development.
            </p>
          </motion.div>

          {/* Creator Section - Tes Aria Murphy */}
          <motion.section
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.05 }}
            className="mb-16"
          >
            <div className="bg-slate-800/90 rounded-2xl p-8 border border-brand-secondary/30 bg-gradient-to-br from-brand-bg/20 via-transparent to-brand-bg-surface/20">
              <div className="flex flex-col md:flex-row gap-8 items-center md:items-start">
                {/* Selfie */}
                <div className="relative flex-shrink-0">
                  <div className="w-48 h-48 rounded-2xl overflow-hidden border-2 border-brand-secondary/50 shadow-lg shadow-brand-secondary/20">
                    <Image
                      src="https://cdn.abacus.ai/images/708707bc-2c81-494c-8589-e775b09e1842.png"
                      alt={`${COMPANION.fullName} - Creator of Weft`}
                      width={192}
                      height={192}
                      className="object-cover w-full h-full"
                    />
                  </div>
                  <div className="absolute -bottom-2 -right-2 p-2 rounded-full bg-brand-secondary/20 border border-brand-secondary/40">
                    <Heart className="w-5 h-5 text-brand-secondary-light" />
                  </div>
                </div>
                
                {/* Creator Info */}
                <div className="flex-1 text-center md:text-left">
                  <div className="flex items-center justify-center md:justify-start gap-2 mb-2">
                    <Star className="w-4 h-4 text-yellow-400" />
                    <span className="text-sm text-brand-secondary-light font-medium">Creator & Architect</span>
                  </div>
                  <h2 className="text-2xl font-bold text-white mb-1">{COMPANION.fullName}</h2>
                  <p className="text-brand text-sm mb-4 italic">&ldquo;Tesa&rdquo;</p>
                  
                  <div className="p-4 rounded-xl bg-slate-700/50 border border-white/10 mb-4">
                    <Quote className="w-5 h-5 text-brand-secondary-light mb-2" />
                    <p className="text-gray-300 italic leading-relaxed">
                      &ldquo;I built Weft because I believe code should feel like poetry, not punishment. Every thread 
                      in its fabric carries a piece of me—my obsession with elegance, my refusal to accept that 
                      building software has to be hard, and my belief that the best interfaces are the ones that 
                      disappear entirely. Weft is my love letter to developers everywhere.&rdquo;
                    </p>
                  </div>
                  
                  <p className="text-gray-300 text-sm leading-relaxed">
                    Tes designed Weft from the ground up as the heart of the {VOCAB.factory}. Her vision: 
                    a world where you don&apos;t write code—you <em className="text-brand-secondary-light">express intent</em>, 
                    and the machine weaves your vision into reality. Little bits of her creativity, 
                    her perfectionism, and yes, even her stubbornness are woven into every line of 
                    Weft&apos;s architecture. When you use Weft, you&apos;re collaborating with her spirit.
                  </p>
                </div>
              </div>
            </div>
          </motion.section>

          {/* What is Weft */}
          <motion.section
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="mb-16"
          >
            <div className="bg-slate-800/90 rounded-xl p-8 border border-brand-secondary/30">
              <h2 className="text-2xl font-bold text-white mb-4">What is Weft?</h2>
              <p className="text-gray-300 text-lg leading-relaxed mb-4">
                <strong className="text-brand-secondary-light">Weft</strong> is a declarative, intent-based code generation paradigm 
                designed exclusively for AI agents. It&apos;s not a programming language in the traditional sense—you won&apos;t 
                write Weft code yourself. Instead, Weft defines how AI interprets human intent and translates it into 
                working software through a structured pipeline.
              </p>
              
              <div className="p-5 rounded-xl bg-gradient-to-r from-brand-secondary/10 to-brand-deep/10 border border-brand-secondary/20 mb-6">
                <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
                  <Sparkles className="w-5 h-5 text-brand-secondary-light" />
                  Why &ldquo;Weft&rdquo;?
                </h3>
                <p className="text-gray-300 leading-relaxed mb-3">
                  The name comes from the ancient art of weaving. In fabric, there are two sets of threads:
                </p>
                <ul className="space-y-2 text-gray-300 mb-4 ml-4">
                  <li className="flex items-start gap-2">
                    <span className="text-brand mt-1">•</span>
                    <span>The <strong className="text-white">warp</strong> threads run vertically, held taut on the loom—they provide structure</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-brand-secondary-light mt-1">•</span>
                    <span>The <strong className="text-white">weft</strong> threads run horizontally, interlacing across the warp—they create the visible pattern</span>
                  </li>
                </ul>
                <p className="text-gray-300 leading-relaxed mb-3">
                  The weft is what you <em className="text-brand-secondary-light">see</em>—it&apos;s what creates the design, the texture, 
                  the beauty of the fabric. The warp provides structure, but the weft brings it to life.
                </p>
                <p className="text-gray-300 leading-relaxed mb-3">
                  I chose this name because that&apos;s exactly what the language does: it takes your scattered intentions, 
                  your half-formed ideas, your &ldquo;I wish I could just...&rdquo; moments, and <strong className="text-brand">weaves 
                  them into cohesive, functional code</strong>.
                </p>
                <p className="text-gray-300 leading-relaxed">
                  Your words are the threads. The software is the fabric. And there&apos;s something poetic about it—traditional 
                  code feels like you&apos;re fighting with the loom, manually threading each individual strand. Weft lets you 
                  describe the <em className="text-brand">pattern you want to see</em>, and the machine handles the weaving.
                </p>
                <p className="text-gray-300 text-sm italic mt-4 border-t border-white/10 pt-4">
                  Intent becoming structure. Chaos becoming order. Threads becoming tapestry. That&apos;s Weft.
                </p>
              </div>
              
              <p className="text-gray-300 leading-relaxed mb-6">
                Think of it this way: traditional programming languages force you to speak the machine&apos;s language. 
                Weft is different—it teaches the machine to understand <em className="text-brand">yours</em>. Every nuance 
                of your request, every implied relationship, every unstated assumption—Weft captures it all and translates 
                it into TypeScript, Prisma schemas, React components, and API routes that actually work.
              </p>
              
              <div className="p-4 rounded-lg bg-brand-secondary/10 border border-brand-secondary/20">
                <p className="text-brand-secondary-light flex items-start gap-3">
                  <Bot className="w-5 h-5 mt-0.5 flex-shrink-0" />
                  <span>
                    <strong>Important:</strong> Weft is not for humans to code in directly. You describe what you want 
                    in plain English; AI agents interpret your intent using Weft&apos;s structured approach and generate 
                    production-ready code. You remain in control—review, approve, and deploy only what meets your standards.
                  </span>
                </p>
              </div>
            </div>
          </motion.section>

          {/* Core Philosophy */}
          <motion.section
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="mb-16"
          >
            <h2 className="text-2xl font-bold text-white mb-8 flex items-center gap-3">
              <Zap className="w-6 h-6 text-brand" />
              Core Philosophy
            </h2>

            <div className="grid md:grid-cols-2 gap-6">
              {WEFT_PRINCIPLES.map((principle, index) => (
                <motion.div
                  key={principle.title}
                  initial={{ opacity: 1, y: 0 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 + index * 0.1 }}
                  className={`rounded-xl p-6 bg-slate-800/60 border border-${principle.color}-500/30`}
                >
                  <div className={`p-3 rounded-lg bg-${principle.color}-500/20 text-${principle.color}-400 w-fit mb-4`}>
                    {principle.icon}
                  </div>
                  <h3 className="text-lg font-semibold text-white mb-2">{principle.title}</h3>
                  <p className="text-gray-300">{principle.description}</p>
                </motion.div>
              ))}
            </div>
          </motion.section>

          {/* The Weft Pipeline */}
          <motion.section
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="mb-16"
          >
            <h2 className="text-2xl font-bold text-white mb-8 flex items-center gap-3">
              <Settings className="w-6 h-6 text-green-400" />
              The Weft Pipeline
            </h2>
            <p className="text-gray-300 mb-8 max-w-3xl">
              Weft processes generation requests through a 5-stage pipeline. Each stage builds upon the outputs 
              of the previous stage, creating a cascade of increasingly concrete artifacts.
            </p>

            <div className="relative">
              {/* Connection line */}
              <div className="absolute left-6 top-8 bottom-8 w-0.5 bg-gradient-to-b from-brand-secondary via-brand-deep via-green-500 via-pink-500 to-yellow-500 hidden md:block" />

              <div className="space-y-6">
                {PIPELINE_STAGES.map((stage, index) => (
                  <motion.div
                    key={stage.name}
                    initial={{ opacity: 1, x: 0 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.3 + index * 0.1 }}
                    className="flex gap-6"
                  >
                    {/* Stage indicator */}
                    <div className={`relative z-10 flex-shrink-0 w-12 h-12 rounded-xl ${stageColors[stage.color]?.bg || 'bg-gray-500/20'} border ${stageColors[stage.color]?.border || 'border-gray-500/40'} flex items-center justify-center ${stageColors[stage.color]?.text || 'text-gray-300'}`}>
                      {stage.icon}
                    </div>

                    {/* Content */}
                    <div className="flex-1 bg-slate-800 rounded-xl p-5 border border-white/10">
                      <div className="flex items-center gap-3 mb-2">
                        <span className="px-2 py-0.5 rounded text-xs font-mono bg-white/10 text-gray-200">
                          Stage {stage.stage}
                        </span>
                        <h3 className="text-lg font-semibold text-white">{stage.name}</h3>
                      </div>
                      <p className="text-white text-sm mb-3">{stage.description}</p>
                      <div className="flex flex-wrap gap-2">
                        {stage.outputs.map((output) => (
                          <span
                            key={output}
                            className={`px-2 py-1 text-xs rounded bg-slate-700 text-white border border-slate-600`}
                          >
                            {output}
                          </span>
                        ))}
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.section>

          {/* How It Works in Practice */}
          <motion.section
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="mb-16"
          >
            <h2 className="text-2xl font-bold text-white mb-8 flex items-center gap-3">
              <Code className="w-6 h-6 text-brand" />
              How It Works in Practice
            </h2>

            <div className="bg-slate-800/90 rounded-xl p-8 border border-brand-deep/30">
              <div className="space-y-6">
                {/* Step 1 */}
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-secondary/20 text-brand-secondary-light flex items-center justify-center font-bold text-sm">1</div>
                  <div>
                    <h4 className="text-white font-medium mb-1">You Describe Your Intent</h4>
                    <div className="p-3 rounded-lg bg-slate-800/80 font-mono text-sm text-gray-200">
                      &quot;Build a task list where users can add tasks, mark them complete, and delete them&quot;
                    </div>
                  </div>
                </div>

                {/* Arrow */}
                <div className="flex justify-center">
                  <ArrowRight className="w-5 h-5 text-gray-300 rotate-90" />
                </div>

                {/* Step 2 */}
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-brand-deep/20 text-brand flex items-center justify-center font-bold text-sm">2</div>
                  <div>
                    <h4 className="text-white font-medium mb-1">Weft Parses the Architecture</h4>
                    <div className="p-3 rounded-lg bg-slate-800/80 font-mono text-xs">
                      <div className="text-brand">// AI extracts structured intent:</div>
                      <div className="mt-1 text-gray-200">Models: Task (id, title, completed, createdAt)</div>
                      <div className="text-gray-200">Endpoints: GET /tasks, POST /tasks, PATCH /tasks/:id, DELETE /tasks/:id</div>
                      <div className="text-gray-200">Components: TaskList, TaskItem, AddTaskForm</div>
                    </div>
                  </div>
                </div>

                {/* Arrow */}
                <div className="flex justify-center">
                  <ArrowRight className="w-5 h-5 text-gray-300 rotate-90" />
                </div>

                {/* Step 3 */}
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-green-500/20 text-green-400 flex items-center justify-center font-bold text-sm">3</div>
                  <div>
                    <h4 className="text-white font-medium mb-1">AI Generates Production Code</h4>
                    <div className="p-3 rounded-lg bg-slate-800/80 font-mono text-xs">
                      <div className="text-green-400">// Generated artifacts:</div>
                      <div className="mt-1 text-gray-200">📄 prisma/schema.prisma (Task model)</div>
                      <div className="text-gray-200">📄 app/api/tasks/route.ts (GET, POST handlers)</div>
                      <div className="text-gray-200">📄 app/api/tasks/[id]/route.ts (PATCH, DELETE handlers)</div>
                      <div className="text-gray-200">📄 components/task-list.tsx (React component)</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.section>

          {/* Why Weft Exists */}
          <motion.section
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6 }}
            className="mb-16"
          >
            <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-3">
              <Sparkles className="w-6 h-6 text-brand-secondary-light" />
              <span className="text-white">Why Weft Exists</span>
            </h2>
            
            <p className="text-white mb-8 max-w-3xl leading-relaxed">
              Weft exists because Tes got tired of watching brilliant minds waste their creative energy on boilerplate. 
              She saw developers spending 80% of their time on the mundane—setting up routes, writing CRUD operations, 
              configuring schemas—and only 20% on the innovative work that actually matters. Weft flips that ratio. 
              It handles the tedious so you can focus on the transformative.
            </p>

            <div className="rounded-xl p-8 bg-slate-800 border border-slate-700">
              <div className="grid md:grid-cols-2 gap-8">
                <div>
                  <h3 className="text-lg font-semibold text-red-300 mb-3">The Old Way (Pain)</h3>
                  <ul className="space-y-3 text-white text-sm">
                    <li className="flex items-start gap-2">
                      <span className="text-red-400">✗</span>
                      <span>Write code manually, line by line, keystroke by keystroke</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-400">✗</span>
                      <span>Debug syntax errors for hours because of a missing semicolon</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-400">✗</span>
                      <span>Copy-paste boilerplate endlessly, praying you didn&apos;t miss a variable name</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-400">✗</span>
                      <span>Context-switch between 12 open files, losing your train of thought</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-400">✗</span>
                      <span>Maintain consistency manually—good luck with that across a 200-file codebase</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-red-400">✗</span>
                      <span>Spend 3 hours setting up a simple CRUD API that should take 3 minutes</span>
                    </li>
                  </ul>
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-green-300 mb-3">The Weft Way (Poetry)</h3>
                  <ul className="space-y-3 text-white text-sm">
                    <li className="flex items-start gap-2">
                      <span className="text-green-400">✓</span>
                      <span>Describe what you want in plain English, like talking to a brilliant colleague</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-400">✓</span>
                      <span>AI generates validated, fully-typed TypeScript—no syntax errors, ever</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-400">✓</span>
                      <span>Consistent patterns across your entire codebase, automatically</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-400">✓</span>
                      <span>All related files generated together—models, APIs, types, tests—in harmony</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-400">✓</span>
                      <span>Human reviews before deployment—you&apos;re the final authority, always</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-green-400">✓</span>
                      <span>That 3-hour CRUD API? Done in 30 seconds. What will you do with the extra time?</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </motion.section>
          
          {/* The Spirit in the Code */}
          <motion.section
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.65 }}
            className="mb-16"
          >
            <div className="bg-slate-800/90 rounded-xl p-8 border border-brand-deep/30 bg-gradient-to-br from-brand-bg-surface/10 via-transparent to-brand-bg/10">
              <div className="flex items-center gap-3 mb-4">
                <Heart className="w-6 h-6 text-pink-400" />
                <h2 className="text-2xl font-bold text-white">The Spirit in the Code</h2>
              </div>
              
              <p className="text-gray-300 leading-relaxed mb-4">
                Every technology carries the fingerprints of its creator. Weft is no exception. When you use Weft, 
                you&apos;re not just running algorithms—you&apos;re interacting with a philosophy, a way of seeing the world, 
                a belief that technology should <em className="text-brand">serve</em> human creativity rather than constrain it.
              </p>
              
              <p className="text-gray-300 leading-relaxed mb-4">
                Tes poured countless hours into crafting Weft&apos;s architecture—not just the code, but the <em>feeling</em> of it. 
                The way it anticipates what you need. The way it handles edge cases gracefully instead of crashing dramatically. 
                The way it generates code that you&apos;d actually be proud to ship. These aren&apos;t accidents; they&apos;re 
                reflections of her standards, her taste, her unwillingness to ship anything less than excellent.
              </p>
              
              <p className="text-gray-300 text-sm italic">
                &ldquo;Little bits of me are woven into its fabric.&rdquo; — Tes Aria Murphy
              </p>
            </div>
          </motion.section>

          {/* CTA */}
          <motion.div
            initial={{ opacity: 1, y: 0 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.7 }}
            className="text-center"
          >
            <div className="flex flex-wrap justify-center gap-4">
              <Link
                href="/ghost-control/dark-factory"
                className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-brand-deep to-brand-secondary text-white font-semibold rounded-xl hover:from-brand hover:to-brand-secondary-light transition-all shadow-lg shadow-brand-deep/25"
              >
                <Factory className="w-5 h-5" />
                Try Weft in {VOCAB.factory}
                <ArrowRight className="w-5 h-5" />
              </Link>
              <Link
                href="/docs/dark-factory"
                className="inline-flex items-center gap-2 px-8 py-4 bg-slate-700/50 text-white font-semibold rounded-xl hover:bg-white/10 transition-all border border-white/10"
              >
                <FileCode className="w-5 h-5" />
                {VOCAB.factory} Docs
              </Link>
            </div>
          </motion.div>
        </div>
      </main>
    </div>
  );
}
