"use client";

import * as React from "react";

import { Container } from "@workspace/ui/components/layout";
import { Navbar, Footer } from "@workspace/ui/components/layout";
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';

export default function CaseStudiesPage() {
  const caseStudies = [
    {
      title: "VFX Studio Migration",
      description:
        "Migrated a major VFX studio from cloud rendering to a colocated HPC cluster, reducing costs by 65%.",
      kpi1: { value: "65%", label: "Cost ↓" },
      kpi2: { value: "2x", label: "Performance ↑" },
      ctaText: "See build",
      ctaHref: "/case-studies/vfx-studio",
    },
    {
      title: "Legal Document Management",
      description:
        "Consolidated scattered legal tech stack into a secure, private Nextcloud instance with AI search.",
      kpi1: { value: "$120k/mo", label: "Saved" },
      kpi2: { value: "0", label: "Egress Fees" },
      ctaText: "See build",
      ctaHref: "/case-studies/legal-firm",
    },
    {
      title: "Research Data Pipeline",
      description:
        "Built a local ML training environment for a research institute, eliminating data transfer bottlenecks.",
      kpi1: { value: "90%", label: "Time-to-Train ↓" },
      kpi2: { value: "Break-even: 8mo", label: "" },
      ctaText: "See build",
      ctaHref: "/case-studies/research-institute",
    },
  ];

  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      
      {/* Hero Section */}
      <AnimatedSection className="border-b border-muted">
        <Container maxWidth="10xl">
          <div className="py-20 md:py-28">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Case Studies</h1>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl">
              Context → constraints → architecture → migration → outcomes. Real numbers, real stacks.
            </p>
          </div>
        </Container>
      </AnimatedSection>
      
      {/* Case Studies */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <div className="space-y-8 max-w-4xl">
            {caseStudies.map((study, index) => (
              <a
                key={index}
                href={study.ctaHref}
                className="group block w-full border-b border-muted pb-8 transition-all duration-300 hover:border-foreground/70"
              >
                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                  <div>
                    <div className="text-4xl font-light text-muted-foreground mb-2">
                      {index < 9 ? `0${index + 1}` : index + 1}
                    </div>
                    <h2 className="text-3xl font-bold">{study.title}</h2>
                    <p className="text-xl text-muted-foreground mt-3 max-w-3xl">{study.description}</p>
                  </div>
                  <div className="flex items-center gap-8 shrink-0">
                    <div className="text-lg"><span className="font-semibold">{study.kpi1.value}</span> <span className="text-muted-foreground">{study.kpi1.label}</span></div>
                    <div className="text-lg"><span className="font-semibold">{study.kpi2.value}</span> <span className="text-muted-foreground">{study.kpi2.label}</span></div>
                    <span className="text-primary text-lg">See build →</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </Container>
      </AnimatedSection>
      
      <Footer />
    </div>
  );
}