"use client";

import { PageHeader } from "../../src/components/PageHeader";
import { Section } from "../../src/components/Section";
import { Reveal } from "../../src/components/Reveal";
import { H3, LeadText, BodyText, Label } from "../../src/components/Typography";
import { Card } from "../../src/components/Layout";
import { Button } from "../../src/components/Button";
import { GradientMesh, 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 />

      <PageHeader
        title={
          <>
            Case <span className="text-slate-400">Studies.</span>
          </>
        }
        description="Ergebnisse statt Versprechen. Was ich gebaut habe und was es bewirkt."
        backgroundSymbol="C"
      />

      {/* Featured Case Study */}
      <Section
        number="01"
        title="Showcase"
        borderTop
        effects={<GradientMesh variant="metallic" className="opacity-70" />}
      >
        <Reveal>
          <a href="/case-studies/klz-cables" className="block group">
            <Card
              variant="glass"
              padding="none"
              techBorder
              className="overflow-hidden relative group 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-8 md:p-12 relative z-10 flex flex-col justify-between">
                <div className="space-y-8">
                  <div className="flex items-center gap-4">
                    <img
                      src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
                      alt="KLZ Logo"
                      className="h-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
                    />
                    <div className="h-px w-12 bg-slate-100" />
                    <Label className="text-slate-400">Case Study 2025</Label>
                  </div>

                  <div className="space-y-4">
                    <H3 className="text-4xl md:text-6xl tracking-tighter">
                      KLZ <span className="text-slate-300">Cables</span>
                    </H3>
                    <LeadText className="text-slate-500 text-lg 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-2">
                    {["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
                      (tag, i) => (
                        <span
                          key={i}
                          className="px-2.5 py-1 border border-slate-100 bg-white/50 rounded-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-12">
                  <div className="inline-flex items-center gap-3 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 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-[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: 10 })
                        .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-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-8 right-8 text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
                  Industrial Grade
                </div>
              </div>
            </Card>
          </a>
        </Reveal>
      </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-6 py-8">
              <div className="flex items-center justify-center 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-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>
  );
}