"use client";

import Image from "next/image";
import { Section } from "../../src/components/Section";
import { Reveal } from "../../src/components/Reveal";
import { H3, LeadText, Label, BodyText } from "../../src/components/Typography";
import { Card } from "../../src/components/Layout";
import { Button } from "../../src/components/Button";
import { AbstractCircuit } from "../../src/components/Effects";
import { ArrowRight } from "lucide-react";
import { motion } from "framer-motion";

export default function CaseStudiesPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      <AbstractCircuit />

      {/* Featured Case Study Hero */}
      <Section className="pt-24 pb-12 md:pt-40 md:pb-24">
        <div className="space-y-12 md:space-y-24">
          <Reveal>
            <div className="space-y-6 max-w-4xl">
              <H3 className="text-4xl md:text-8xl tracking-tighter leading-none">
                Case <span className="text-slate-400">Studies.</span>
              </H3>
              <LeadText className="text-lg md:text-2xl text-slate-400 max-w-2xl">
                Ergebnisse statt Versprechen. Dokumentierte Architektur-Lösungen
                für komplexe Anforderungen.
              </LeadText>
            </div>
          </Reveal>

          <Reveal>
            <a href="/case-studies/klz-cables" className="block group">
              <Card
                variant="glass"
                padding="none"
                techBorder
                className="overflow-hidden relative group min-h-[400px] md:min-h-[500px] flex flex-col md:flex-row"
              >
                {/* Brand Gradient Background */}
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(14,165,233,0.08)_0%,transparent_50%),radial-gradient(circle_at_70%_70%,rgba(99,102,241,0.05)_0%,transparent_50%)]" />

                {/* Left Column: Content */}
                <div className="flex-1 p-4 md:p-12 relative z-10 flex flex-col justify-between">
                  <div className="space-y-4 md:space-y-8">
                    <div className="flex items-center gap-3 md:gap-4">
                      <Image
                        src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
                        alt="KLZ Logo"
                        width={32}
                        height={32}
                        className="h-6 md:h-8 w-auto invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
                      />
                      <div className="h-px w-8 md:w-12 bg-slate-100" />
                      <Label className="text-slate-400 text-[9px] md:text-[10px]">
                        Case Study 2025
                      </Label>
                    </div>

                    <div className="space-y-3 md:space-y-4">
                      <H3 className="text-3xl md:text-6xl tracking-tighter">
                        KLZ <span className="text-slate-300">Cables</span>
                      </H3>
                      <LeadText className="text-slate-500 text-base md:text-xl max-w-xl leading-relaxed">
                        Engineering eines industriellen B2B-Systems mit
                        <span className="text-slate-900 font-medium">
                          {" "}
                          automatisierter Asset-Pipeline
                        </span>{" "}
                        und hochperformantem Headless-Stack.
                      </LeadText>
                    </div>

                    <div className="flex flex-wrap gap-2 pt-1 md:pt-2">
                      {["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
                        (tag, i) => (
                          <span
                            key={i}
                            className="px-2 py-0.5 md:px-2.5 md:py-1 border border-slate-100 bg-white/50 rounded-md text-[8px] md:text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
                          >
                            {tag}
                          </span>
                        ),
                      )}
                    </div>
                  </div>

                  <div className="pt-8 md:pt-12">
                    <div className="inline-flex items-center gap-2 md:gap-3 text-[10px] md:text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
                      <span>EXPLORE PROJECT</span>
                      <ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" />
                    </div>
                  </div>
                </div>

                {/* Right Column: Visual/Technical Decor */}
                <div className="w-full md:w-1/3 min-h-[150px] md:min-h-0 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100">
                  <div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[6px] md:text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
                    {Array.from({ length: 40 }).map((_, i) => (
                      <div key={i} className="whitespace-nowrap">
                        {Array.from({ length: 15 })
                          .map((_, j) => (
                            <span
                              key={j}
                              className={
                                Math.random() > 0.5
                                  ? "text-slate-900"
                                  : "text-slate-400"
                              }
                            >
                              {Math.floor(Math.random() * 2)}
                            </span>
                          ))
                          .join(" ")}
                      </div>
                    ))}
                  </div>

                  {/* Abstract "Cable" lines */}
                  <div className="absolute inset-0 flex items-center justify-center p-8 md:p-12">
                    <div className="w-full h-full relative">
                      {[1, 2, 3].map((v) => (
                        <motion.div
                          key={v}
                          initial={{ scaleY: 0 }}
                          whileInView={{ scaleY: 1 }}
                          transition={{ duration: 2, delay: 0.5 + v * 0.2 }}
                          className="absolute inset-y-0 border-r border-slate-200 origin-top"
                          style={{ right: `${v * 25}%` }}
                        />
                      ))}
                    </div>
                  </div>

                  <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 text-[8px] md:text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
                    Industrial Grade
                  </div>
                </div>
              </Card>
            </a>
          </Reveal>
        </div>
      </Section>

      {/* Coming Soon */}
      <Section number="02" title="Kommt bald" borderTop>
        <Reveal>
          <Card
            variant="glass"
            padding="large"
            techBorder
            className="text-center relative overflow-hidden group"
          >
            <div className="relative z-10 space-y-4 py-4 md:py-8">
              <div className="flex items-center justify-center gap-2 md:gap-3">
                <div className="w-2 h-2 rounded-full bg-slate-300 animate-pulse" />
                <Label className="text-slate-400">In Arbeit</Label>
              </div>
              <H3 className="text-2xl md:text-3xl text-slate-400">
                Weitere Case Studies in Kürze.
              </H3>
              <BodyText className="text-slate-400 max-w-md mx-auto">
                Ich dokumentiere laufende Projekte – schauen Sie bald wieder
                vorbei oder kontaktieren Sie mich direkt.
              </BodyText>
              <div className="pt-4">
                <Button href="/contact" variant="outline">
                  Kontakt aufnehmen
                </Button>
              </div>
            </div>
          </Card>
        </Reveal>
      </Section>
    </div>
  );
}