import Link from "next/link";
import Button from "@/components/ui/Button";
import SystemArchitectureMap from "@/components/system/SystemArchitectureMap";
import ProcessSection from "@/components/process/ProcessSection";

// --- Components ---

function TechBadge({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-flex items-center justify-center px-3 py-1.5 rounded-md border border-slate-200 bg-slate-50/50 text-[11px] font-bold text-slate-600 uppercase tracking-wider font-mono hover:border-cyan-500/30 hover:bg-cyan-50/30 hover:text-cyan-700 transition-colors cursor-default">
      {children}
    </span>
  );
}

function BentoCard({
  title,
  desc,
  icon,
  children,
  className,
}: {
  title: string;
  desc: string;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={`group relative overflow-hidden rounded-3xl border border-slate-200 bg-white p-8 shadow-sm hover:shadow-2xl hover:shadow-cyan-900/5 transition-all duration-300 ${className}`}>
      {/* iOS-style Hover Glow */}
      <div className="pointer-events-none absolute -inset-px opacity-0 group-hover:opacity-100 transition-opacity duration-500" style={{ background: 'radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(34,211,238,0.06), transparent 40%)' }} />
      
      <div className="relative z-10 h-full flex flex-col">
        <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-slate-50 text-slate-900 ring-1 ring-slate-900/5 group-hover:bg-cyan-50 group-hover:text-cyan-600 transition-colors">
          {icon || (
            <svg className="h-5 w-5" 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="text-lg font-bold text-slate-900 tracking-tight">{title}</h3>
        <p className="mt-2 text-sm leading-relaxed text-slate-500 flex-1">{desc}</p>
        
        {children && <div className="mt-6 pt-6 border-t border-slate-100">{children}</div>}
      </div>
    </div>
  );
}

export default function HomePage() {
  return (
    <div className="bg-[#FAFAFA]">
      
      {/* ================= HERO SECTION ================= */}
      <section className="relative pt-24 pb-20 sm:pt-32 sm:pb-24 overflow-hidden">
        
        {/* Soft Background Orbs (Mac-like wallpaper feel) */}
        <div className="pointer-events-none absolute inset-0 overflow-hidden">
           <div className="absolute top-[-10%] left-[20%] h-[600px] w-[600px] rounded-full bg-cyan-400/5 blur-[120px] mix-blend-multiply" />
           <div className="absolute top-[10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/5 blur-[120px] mix-blend-multiply" />
           {/* Grid Texture */}
           <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] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
        </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-12 lg:gap-20 items-center">
            
            {/* Left Content */}
            <div className="max-w-2xl">
              <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/60 px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-slate-600 backdrop-blur-md shadow-sm mb-8">
                <span className="relative flex h-2 w-2">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
                </span>
                Engineering Studio
              </div>

              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tighter text-slate-900 leading-[1.05] mb-6">
                Engineering <br/>
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-slate-900 via-slate-700 to-cyan-800">
                  scalable software.
                </span>
              </h1>
              
              <p className="text-lg leading-relaxed text-slate-600 max-w-lg mb-8">
                We design and ship production-grade systems. From React Native apps to high-throughput Laravel backends.
              </p>

              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-5">
                <Button href="/contact" size="lg" className="w-full sm:w-auto shadow-xl shadow-cyan-900/10">
                  Discuss your system
                </Button>
                <Button href="/work" variant="secondary" size="lg" className="w-full sm:w-auto">
                  View case studies
                </Button>
              </div>

              {/* Compact Metrics - "System Monitor" Style */}
              <div className="mt-10 inline-flex items-center gap-4 rounded-xl border border-slate-200 bg-white/50 px-4 py-2 backdrop-blur-sm">
                 <div className="flex items-center gap-2 pr-4 border-r border-slate-200">
                    <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
                    <span className="text-xs font-mono font-medium text-slate-600">99.9% Uptime</span>
                 </div>
                 <div className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-blue-500" />
                    <span className="text-xs font-mono font-medium text-slate-600">&lt;100ms Latency</span>
                 </div>
              </div>
            </div>

            {/* Right Content (Diagram) */}
            <div className="relative">
               {/* Glass Container for SVG */}
               <div className="relative rounded-3xl bg-white/40 p-2 ring-1 ring-white/60 shadow-2xl shadow-slate-200/50 backdrop-blur-xl">
                  <div className="rounded-2xl bg-white/80 overflow-hidden">
                    <SystemArchitectureMap />
                  </div>
               </div>
            </div>

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

      {/* ================= TECH STACK "CODE STREAM" ================= */}
      {/* High-tech, minimal, feels like a config file */}
      <div className="border-y border-slate-200 bg-white py-8 overflow-hidden relative">
        <div className="mx-auto max-w-7xl px-4 flex flex-wrap justify-center gap-3 opacity-90">
           <TechBadge>Laravel</TechBadge>
           <TechBadge>Next.js</TechBadge>
           <TechBadge>TypeScript</TechBadge>
           <TechBadge>React Native</TechBadge>
           <TechBadge>PostgreSQL</TechBadge>
           <TechBadge>Redis</TechBadge>
           <TechBadge>Docker</TechBadge>
           <TechBadge>AWS</TechBadge>
           <TechBadge>Stripe</TechBadge>
           <TechBadge>SaaS Architecture</TechBadge>
           <TechBadge>// Production Grade</TechBadge>
        </div>
      </div>

      {/* ================= BENTO GRID: PHILOSOPHY ================= */}
      <section className="py-24 relative">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 md:text-center max-w-3xl md:mx-auto">
            <h2 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
              Built with Senior Discipline.
            </h2>
            <p className="mt-4 text-lg text-slate-600">
              We don&apos;t just write code. We engineer assets. Our approach is grounded in clarity, resilience, and long-term thinking.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            <BentoCard 
              title="Clarity over Cleverness" 
              desc="We avoid 'magic' code. We build readable, maintainable modules with stable contracts so your team can take over easily."
              icon={<span className="font-mono font-bold text-sm">01</span>}
            />
            <BentoCard 
              title="Resilience by Design" 
              desc="Systems fail. We build them to recover. Idempotency, retries, queues, and monitoring hooks are standard deliverables."
              icon={<span className="font-mono font-bold text-sm">02</span>}
            />
            <BentoCard 
              title="Performance as a Feature" 
              desc="Slow software kills trust. We optimize database queries, caching strategies, and payload sizes from day one."
              icon={<span className="font-mono font-bold text-sm">03</span>}
            />
          </div>
        </div>
      </section>

      {/* ================= CAPABILITIES (iOS Cards) ================= */}
      <section className="py-24 bg-white border-t border-slate-100">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-12 gap-16 items-start">
            
            {/* Sticky Narrative */}
            <div className="lg:col-span-4 lg:sticky lg:top-32">
              <h2 className="text-3xl font-bold tracking-tight text-slate-900">
                Full-Stack Capabilities
              </h2>
              <p className="mt-4 text-slate-600 leading-7 mb-8">
                From the first line of code to the final production deploy, we handle the complex details of modern software engineering.
              </p>
              <Link href="/capabilities" className="group inline-flex items-center text-sm font-semibold text-cyan-700 hover:text-cyan-800">
                 Explore all capabilities 
                 <span className="ml-1 transition-transform group-hover:translate-x-1">→</span>
              </Link>
            </div>

            {/* Right Grid - 2x2 */}
            <div className="lg:col-span-8 grid sm:grid-cols-2 gap-6">
              <BentoCard 
                title="Product Engineering"
                desc="High-conversion web apps and dashboards designed for clarity."
                className="bg-slate-50/50"
              >
                <div className="flex flex-wrap gap-2">
                  <TechBadge>Next.js</TechBadge>
                  <TechBadge>React</TechBadge>
                  <TechBadge>Tailwind</TechBadge>
                </div>
              </BentoCard>

              <BentoCard 
                title="SaaS Platforms"
                desc="Scalable foundations supporting multi-tenancy, subscriptions, and RBAC."
                className="bg-slate-50/50"
              >
                <div className="flex flex-wrap gap-2">
                  <TechBadge>Laravel</TechBadge>
                  <TechBadge>Postgres</TechBadge>
                  <TechBadge>Stripe</TechBadge>
                </div>
              </BentoCard>

              <BentoCard 
                title="Mobile & Native"
                desc="Cross-platform mobile applications with native performance feel."
                className="bg-slate-50/50"
              >
                <div className="flex flex-wrap gap-2">
                  <TechBadge>React Native</TechBadge>
                  <TechBadge>Expo</TechBadge>
                  <TechBadge>iOS/Android</TechBadge>
                </div>
              </BentoCard>

              <BentoCard 
                title="Cloud Infrastructure"
                desc="Secure, automated deployment pipelines and scalable server architecture."
                className="bg-slate-50/50"
              >
                <div className="flex flex-wrap gap-2">
                  <TechBadge>AWS</TechBadge>
                  <TechBadge>Docker</TechBadge>
                  <TechBadge>CI/CD</TechBadge>
                </div>
              </BentoCard>
            </div>

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

      {/* ================= PROCESS ================= */}
      <ProcessSection />

      {/* ================= BIG CTA CARD (Mac Style) ================= */}
      <section className="py-24 px-4 sm:px-6">
        <div className="mx-auto max-w-5xl relative overflow-hidden rounded-[2.5rem] bg-[#0F172A] text-center px-6 py-20 sm:px-16 shadow-2xl shadow-slate-900/20">
          
          {/* Glowing Orb Background behind CTA */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[500px] w-[500px] bg-cyan-500/20 blur-[100px] rounded-full pointer-events-none" />
          
          <div className="relative z-10">
            <h2 className="text-4xl sm:text-5xl font-bold tracking-tight text-white mb-6">
              Ready to ship something <br className="hidden sm:block"/>
              <span className="text-cyan-400">world-class?</span>
            </h2>
            <p className="text-lg text-slate-300 mb-10 max-w-2xl mx-auto leading-relaxed">
              Stop wrestling with technical debt. Let&apos;s engineer a system that scales with your ambition from day one.
            </p>
            
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              {/* FIX: Used variant="secondary" to ensure dark text, added border-none */}
              <Button 
                href="/contact" 
                size="lg" 
                variant="secondary" 
                className="bg-white text-slate-900 hover:bg-slate-50 border-none shadow-xl shadow-cyan-500/10 font-bold"
              >
                  Start your project
              </Button>
              
              <Link href="/work" className="px-8 py-4 text-base font-medium text-slate-300 hover:text-white transition-colors">
                  Browse case studies →
              </Link>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}