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

// --- Components ---

function CapabilityCard({
  title,
  desc,
  icon,
  tags,
}: {
  title: string;
  desc: string;
  icon: React.ReactNode;
  tags: string[];
}) {
  return (
    <div className="group relative overflow-hidden rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition-all duration-300 hover:shadow-xl hover:shadow-slate-200/40 hover:-translate-y-1">
      
      {/* Icon Area */}
      <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-50 text-slate-700 ring-1 ring-slate-900/5 group-hover:bg-slate-900 group-hover:text-white transition-colors duration-300">
        {icon}
      </div>

      <h3 className="text-lg font-bold text-slate-900 mb-3 tracking-tight">{title}</h3>
      <p className="text-sm leading-7 text-slate-600 mb-8">{desc}</p>

      {/* Tags */}
      <div className="flex flex-wrap gap-2 mt-auto">
        {tags.map((t) => (
          <span key={t} className="inline-flex items-center px-2.5 py-1 rounded-md border border-slate-100 bg-slate-50/50 text-[10px] font-bold text-slate-500 uppercase tracking-wider group-hover:border-slate-200 transition-colors">
            {t}
          </span>
        ))}
      </div>
    </div>
  );
}

export default function CapabilitiesPage() {
  return (
    <main className="bg-[#FAFAFA]">
      
      {/* ================= HERO ================= */}
      <section className="relative overflow-hidden pt-28 pb-24 border-b border-slate-200 bg-white">
        {/* Subtle Engineering Grid Background */}
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:24px_24px]"></div>
        
        {/* Ambient Glow */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute top-[-20%] left-[-10%] h-[600px] w-[600px] rounded-full bg-slate-200/20 blur-[120px]" />
          <div className="absolute bottom-[-20%] right-[-10%] h-[600px] w-[600px] rounded-full bg-cyan-500/5 blur-[120px]" />
        </div>

        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 mb-8 shadow-sm backdrop-blur-sm">
            <span className="h-1.5 w-1.5 rounded-full bg-slate-900"></span>
            Technical Capabilities
          </div>
          
          <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tighter text-slate-900 mb-8 max-w-4xl mx-auto leading-[1.05]">
            Engineering digital <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-slate-800 to-slate-500">
              infrastructure.
            </span>
          </h1>
          
          <p className="max-w-2xl mx-auto text-lg text-slate-600 leading-relaxed mb-12">
            We architect and build complex software systems. From high-performance mobile applications to scalable cloud backends, we deliver production-grade code.
          </p>

          <div className="flex flex-col sm:flex-row justify-center gap-4">
             <Button href="/contact" size="lg">Discuss Architecture</Button>
             <Button href="/work" variant="secondary" size="lg">View Case Studies</Button>
          </div>
        </div>
      </section>

      {/* ================= CAPABILITIES GRID ================= */}
      <section className="py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            
            {/* 1. Mobile Apps */}
            <CapabilityCard 
              title="Native & Cross-Platform Mobile"
              desc="We build high-performance mobile applications using React Native and Flutter. We handle the entire lifecycle: from architectural patterns and offline-first logic to App Store compliance."
              tags={["React Native", "Flutter", "iOS / Android", "Expo"]}
              icon={
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
              }
            />

            {/* 2. SaaS Platforms */}
            <CapabilityCard 
              title="SaaS & Web Platforms"
              desc="Multi-tenant architectures designed for scale. We implement complex subscription billing, role-based access control (RBAC), and team management features."
              tags={["Laravel", "Next.js", "Stripe Connect", "RBAC"]}
              icon={
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
              }
            />

            {/* 3. Cloud Infrastructure */}
            <CapabilityCard 
              title="Cloud Infrastructure"
              desc="We don't just write code; we deploy it. We design secure, auto-scaling infrastructure on AWS/DigitalOcean, including Docker containerization and CI/CD pipelines."
              tags={["AWS", "Docker", "Redis", "Horizontal Scaling"]}
              icon={
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                </svg>
              }
            />

            {/* 4. API Systems */}
            <CapabilityCard 
              title="High-Throughput APIs"
              desc="Robust REST & GraphQL APIs that serve as the backbone of your business. Built with strict validation, OpenAPI documentation, and caching strategies."
              tags={["Microservices", "REST", "GraphQL", "Swagger"]}
              icon={
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              }
            />

            {/* 5. Headless E-commerce */}
            <CapabilityCard 
              title="Complex E-commerce"
              desc="Beyond basic templates. We build headless storefronts with custom inventory logic, integrating payments, logistics, and ERP systems directly into the core."
              tags={["Headless", "Shopify API", "Inventory Logic", "ERP Sync"]}
              icon={
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
              }
            />

            {/* 6. Automation */}
            <CapabilityCard 
              title="Backend Automation"
              desc="Eliminate manual ops. We engineer background workers and event-driven systems to handle reporting, data syncing, and notifications asynchronously."
              tags={["Queues", "Webhooks", "Cron Jobs", "Event Bus"]}
              icon={
                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
              }
            />

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

      {/* ================= BOTTOM CTA ================= */}
      <section className="border-t border-slate-200 bg-white py-24">
        <div className="mx-auto max-w-4xl px-6 text-center">
          <h2 className="text-3xl font-bold text-slate-900 tracking-tight mb-6">
            Ready to engineer something scalable?
          </h2>
          <p className="text-lg text-slate-600 mb-10 max-w-2xl mx-auto">
            We help technical teams and founders build software that lasts.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
             <Button href="/contact" size="lg" className="shadow-xl shadow-slate-900/10">
                Book a Technical Call
             </Button>
             <Link href="/engineering" className="text-sm font-semibold text-slate-600 hover:text-slate-900 transition-colors">
                See our engineering standards →
             </Link>
          </div>
        </div>
      </section>

    </main>
  );
}