import Link from "next/link";
import Button from "@/components/ui/Button";

// --- Visual Components ---

function TerminalWindow({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="overflow-hidden rounded-xl border border-slate-800 bg-[#0F172A] shadow-2xl shadow-slate-900/50">
      <div className="flex items-center gap-2 border-b border-slate-800 bg-slate-900/50 px-4 py-3">
        <div className="flex gap-1.5">
          <div className="h-3 w-3 rounded-full bg-rose-500/80" />
          <div className="h-3 w-3 rounded-full bg-amber-500/80" />
          <div className="h-3 w-3 rounded-full bg-emerald-500/80" />
        </div>
        <div className="ml-2 font-mono text-[10px] text-slate-500 uppercase tracking-wider">{title}</div>
      </div>
      <div className="p-4 sm:p-6 overflow-x-auto">
        <pre className="font-mono text-xs sm:text-sm leading-relaxed text-slate-300">
          {children}
        </pre>
      </div>
    </div>
  );
}

function LiveArchitectureGraph() {
  return (
    <div className="relative w-full h-[300px] overflow-hidden rounded-3xl border border-slate-200 bg-white/50 backdrop-blur-sm shadow-xl shadow-cyan-900/5">
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
      
      <svg viewBox="0 0 600 300" className="w-full h-full select-none">
        <defs>
          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="4" result="blur" />
            <feComposite in="SourceGraphic" in2="blur" operator="over" />
          </filter>
        </defs>

        {/* Connections */}
        <g stroke="#E2E8F0" strokeWidth="2" fill="none">
          <path d="M100 150 L250 150" /> {/* User -> LB */}
          <path d="M350 150 L450 80" />  {/* LB -> API 1 */}
          <path d="M350 150 L450 220" /> {/* LB -> API 2 */}
          <path d="M550 80 L550 220" />  {/* Sync */}
        </g>

        {/* Data Packets Animation */}
        <circle r="3" fill="#06B6D4">
          <animateMotion dur="2s" repeatCount="indefinite" path="M100 150 L250 150" />
        </circle>
        <circle r="3" fill="#3B82F6">
          <animateMotion begin="0.5s" dur="2s" repeatCount="indefinite" path="M350 150 L450 80" />
        </circle>
        <circle r="3" fill="#3B82F6">
          <animateMotion begin="0.5s" dur="2s" repeatCount="indefinite" path="M350 150 L450 220" />
        </circle>

        {/* Nodes */}
        <g transform="translate(100,150)">
           <circle r="20" fill="white" stroke="#CBD5E1" strokeWidth="2" />
           <text x="0" y="35" textAnchor="middle" className="text-[10px] font-sans fill-slate-500 font-bold">Client</text>
        </g>

        <g transform="translate(300,150)">
           <rect x="-50" y="-25" width="100" height="50" rx="12" fill="white" stroke="#06B6D4" strokeWidth="2" filter="url(#glow)" />
           <text x="0" y="5" textAnchor="middle" className="text-[10px] font-sans fill-slate-900 font-bold">Load Balancer</text>
        </g>

        <g transform="translate(500,80)">
           <rect x="-40" y="-20" width="80" height="40" rx="8" fill="white" stroke="#CBD5E1" strokeWidth="2" />
           <text x="0" y="5" textAnchor="middle" className="text-[9px] font-sans fill-slate-600">Core API</text>
        </g>

        <g transform="translate(500,220)">
           <rect x="-40" y="-20" width="80" height="40" rx="8" fill="white" stroke="#CBD5E1" strokeWidth="2" />
           <text x="0" y="5" textAnchor="middle" className="text-[9px] font-sans fill-slate-600">Worker</text>
        </g>
      </svg>
    </div>
  );
}

function PipelineAnimation() {
  return (
    <div className="w-full overflow-hidden">
      <svg viewBox="0 0 800 100" className="w-full h-auto">
        {/* Track */}
        <line x1="50" y1="50" x2="750" y2="50" stroke="#E2E8F0" strokeWidth="4" strokeLinecap="round" />
        
        {/* Progress Line */}
        <line x1="50" y1="50" x2="750" y2="50" stroke="#06B6D4" strokeWidth="4" strokeLinecap="round" strokeDasharray="10 10" className="animate-pulse opacity-50" />

        {/* Nodes */}
        {[
          { x: 50, label: "Commit" },
          { x: 283, label: "Test" },
          { x: 516, label: "Build" },
          { x: 750, label: "Deploy" }
        ].map((node, i) => (
          <g key={i}>
            <circle cx={node.x} cy="50" r="12" fill="white" stroke="#0F172A" strokeWidth="2" />
            <circle cx={node.x} cy="50" r="4" fill="#06B6D4" className="animate-ping" style={{ animationDelay: `${i * 0.5}s` }} />
            <text x={node.x} y="80" textAnchor="middle" className="text-[10px] font-bold fill-slate-500 uppercase tracking-widest">{node.label}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

// --- Main Page ---

export default function EngineeringPage() {
  return (
    <main className="bg-[#FAFAFA]">
      
      {/* ================= HERO ================= */}
      <section className="relative overflow-hidden pt-24 pb-20">
        {/* Background Gradients */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute top-[-10%] right-[-5%] h-[600px] w-[600px] rounded-full bg-cyan-400/5 blur-[120px]" />
          <div className="absolute bottom-[-10%] left-[-5%] h-[500px] w-[500px] rounded-full bg-blue-500/5 blur-[120px]" />
        </div>

        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            
            {/* Left: Content */}
            <div className="max-w-xl">
              <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-bold uppercase tracking-widest text-slate-600 mb-8 shadow-sm">
                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
                Engineering Standard v2.0
              </div>
              
              <h1 className="text-5xl sm:text-6xl font-bold tracking-tighter text-slate-900 mb-6 leading-[1.1]">
                Production grade <br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-slate-900 to-cyan-600">by default.</span>
              </h1>
              
              <p className="text-lg text-slate-600 leading-relaxed mb-8">
                We don't just write code. We engineer assets. Our systems are built on a foundation of strict types, automated tests, and scalable architecture.
              </p>

              <div className="flex flex-wrap gap-4">
                <Button href="/contact" size="lg">Start a Project</Button>
                <Button href="/work" variant="ghost" className="px-0 hover:bg-transparent">
                   Read our playbook <span aria-hidden="true" className="ml-1">→</span>
                </Button>
              </div>
            </div>

            {/* Right: Interactive SVG */}
            <div>
               <LiveArchitectureGraph />
               <div className="mt-6 flex justify-between text-xs font-mono text-slate-400 px-2">
                  <span>Latency: &lt;50ms</span>
                  <span>Uptime: 99.99%</span>
               </div>
            </div>

          </div>
        </div>
      </section>

      {/* ================= THE STANDARD (Bento Grid) ================= */}
      <section className="py-24 bg-white border-y border-slate-100">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          
          <div className="mb-16 md:flex md:items-end md:justify-between">
             <div className="max-w-2xl">
               <h2 className="text-3xl font-bold tracking-tight text-slate-900">The Technical Standard</h2>
               <p className="mt-4 text-slate-600 leading-relaxed">
                 We avoid "fragile magic." Every project we ship adheres to a strict set of architectural principles designed for long-term maintainability.
               </p>
             </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            {/* Card 1: Architecture */}
            <div className="md:col-span-2 rounded-3xl border border-slate-200 bg-slate-50/50 p-8 hover:border-cyan-500/20 transition-all">
               <div className="flex items-center gap-3 mb-6">
                  <div className="h-8 w-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600">
                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
                  </div>
                  <h3 className="font-bold text-slate-900">Modular Architecture</h3>
               </div>
               <p className="text-sm text-slate-600 mb-6 leading-relaxed">
                 We separate concerns strictly. Business logic lives in Services, not Controllers. UI is decoupled from data fetching. This makes the system testable and easy to upgrade.
               </p>
               <TerminalWindow title="Service Layer Pattern">
{`// Controller: Dumb & Slim
public function store(Request $req) {
  return $this->billingService->subscribe(
    $req->user(), 
    $req->plan_id
  );
}`}
               </TerminalWindow>
            </div>

            {/* Card 2: Security */}
            <div className="rounded-3xl border border-slate-200 bg-slate-50/50 p-8 hover:border-cyan-500/20 transition-all">
               <div className="flex items-center gap-3 mb-6">
                  <div className="h-8 w-8 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
                  </div>
                  <h3 className="font-bold text-slate-900">Security First</h3>
               </div>
               <ul className="space-y-3">
                 {['RBAC Permissions', 'Input Validation', 'Rate Limiting', 'CSRF Protection'].map(item => (
                   <li key={item} className="flex items-center gap-2 text-sm text-slate-600">
                     <svg className="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
                     {item}
                   </li>
                 ))}
               </ul>
            </div>

            {/* Card 3: Performance */}
            <div className="rounded-3xl border border-slate-200 bg-slate-50/50 p-8 hover:border-cyan-500/20 transition-all">
               <div className="flex items-center gap-3 mb-6">
                  <div className="h-8 w-8 rounded-lg bg-amber-100 flex items-center justify-center text-amber-600">
                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                  </div>
                  <h3 className="font-bold text-slate-900">Performance</h3>
               </div>
               <p className="text-sm text-slate-600 leading-relaxed">
                 Caching strategies, database indexing, and queue workers for heavy lifting are implemented from day one, not as an afterthought.
               </p>
            </div>

            {/* Card 4: Type Safety */}
            <div className="md:col-span-2 rounded-3xl border border-slate-200 bg-slate-50/50 p-8 hover:border-cyan-500/20 transition-all">
               <div className="flex items-center gap-3 mb-6">
                  <div className="h-8 w-8 rounded-lg bg-cyan-100 flex items-center justify-center text-cyan-600">
                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
                  </div>
                  <h3 className="font-bold text-slate-900">Strict Typing</h3>
               </div>
               <p className="text-sm text-slate-600 mb-6 leading-relaxed">
                 We use TypeScript on the frontend and strict typing in PHP/Node. This catches bugs at compile time, not runtime.
               </p>
               <TerminalWindow title="TypeScript Interface">
{`interface User {
  id: string;
  role: 'admin' | 'editor';
  permissions: Permission[];
}`}
               </TerminalWindow>
            </div>

          </div>
        </div>
      </section>

      {/* ================= PIPELINE ================= */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-2xl mx-auto mb-16">
             <h2 className="text-3xl font-bold tracking-tight text-slate-900">Delivery Workflow</h2>
             <p className="mt-4 text-slate-600">
               Automated confidence. We use CI/CD pipelines to ensure every commit is tested, built, and deployed safely.
             </p>
          </div>
          
          <div className="bg-white rounded-3xl border border-slate-200 p-12 shadow-sm">
             <PipelineAnimation />
          </div>
        </div>
      </section>

      {/* ================= BOTTOM CTA ================= */}
      <section className="border-t border-slate-200 bg-white py-20 text-center">
        <div className="mx-auto max-w-4xl px-6">
          <h2 className="text-3xl font-bold text-slate-900">Ready to build on this foundation?</h2>
          <p className="mt-4 text-slate-600 mb-8">
            Tell us about your system requirements. We'll provide a technical roadmap.
          </p>
          <Button href="/contact" size="lg" className="shadow-xl shadow-slate-900/10">
            Discuss Architecture
          </Button>
        </div>
      </section>

    </main>
  );
}