'use client';

import React from 'react';
import Link from 'next/link';
import { PageHeader } from '../../../src/components/PageHeader';
import { Reveal } from '../../../src/components/Reveal';
import { H2, H3, H4, LeadText, BodyText, Label } from '../../../src/components/Typography';
import { BackgroundGrid, Container } from '../../../src/components/Layout';
import { IframeSection } from '../../../src/components/IframeSection';
import { MotionButton } from '../../../src/components/Button';
import { cn } from '../../../src/utils/cn';
import { Check, Zap, Shield, Globe, Layout, Cpu, Smartphone, Truck, Users, MessageSquare } from 'lucide-react';
import Image from 'next/image';

export default function KLZCablesCaseStudy() {
    const showcasePath = "/showcase/klz-cables/index.html";

    return (
        <div className="bg-white min-h-screen font-sans selection:bg-slate-200 dark:bg-slate-900 overflow-x-hidden text-slate-900">
            <BackgroundGrid />

            {/* Hero Section - Immersive Presentation */}
            <section className="relative min-h-[90vh] flex items-center pt-20 overflow-hidden bg-slate-50">
                {/* Immersive Background: Technical Blueprint */}
                <div className="absolute inset-0 pointer-events-none z-0">
                    <IframeSection
                        src={showcasePath}
                        height="120%"
                        desktopWidth={1920}
                        allowScroll={false}
                        minimal
                        className="h-full opacity-[0.12] grayscale scale-110 blur-[8px]"
                    />
                    <div className="absolute inset-0 bg-gradient-to-tr from-white via-white/80 to-transparent backdrop-blur-[12px]" />
                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,transparent,white_70%)] backdrop-blur-[4px]" />
                </div>

                <Container className="relative z-10">
                    <div className="max-w-4xl space-y-10">
                        <Reveal>
                            <div className="inline-flex items-center gap-3 px-4 py-1.5 rounded-full bg-slate-900 text-white text-[10px] font-black tracking-[0.2em] uppercase mb-4 shadow-xl shadow-slate-900/20">
                                <Zap className="w-3.5 h-3.5" />
                                Project Archive 01
                            </div>
                            <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-slate-900 leading-[0.8] mb-4">
                                KLZ <span className="text-slate-200">CABLES</span>
                            </h1>
                            <p className="text-2xl md:text-3xl text-slate-400 font-medium max-w-2xl leading-tight">
                                Breaking the limitations of legacy WordPress for a <span className="text-slate-900">global power infrastructure leader.</span>
                            </p>
                        </Reveal>

                        <Reveal delay={0.4}>
                            <div className="flex flex-wrap gap-4">
                                <Link href="/technologies/next-js-14" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
                                    NEXT.JS 14
                                </Link>
                                <Link href="/technologies/typescript" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
                                    TYPESCRIPT
                                </Link>
                                <Link href="/technologies/directus-cms" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
                                    DIRECTUS
                                </Link>
                                <Link href="/technologies/tailwind-css" className="group px-6 py-3 bg-white border border-slate-200 shadow-sm rounded-2xl text-xs font-black text-slate-400 hover:text-slate-900 hover:border-slate-900 transition-all">
                                    TAILWIND
                                </Link>
                            </div>
                        </Reveal>
                    </div>
                </Container>
            </section>

            {/* Section 01: The Migration Strategy */}
            <section className="py-32 bg-white">
                <Container>
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
                        <div className="space-y-10">
                            <Reveal>
                                <div className="text-[10px] font-black tracking-[0.3em] text-slate-400 uppercase">Legacy Out. Architecture In.</div>
                                <H2 className="text-7xl font-black tracking-tighter leading-none mb-8">WP is not specialized.</H2>
                                <LeadText className="text-slate-500">
                                    WordPress was slowing down KLZ's global growth. They needed a technical foundation that understands structured industrial data.
                                </LeadText>
                                <div className="grid grid-cols-2 gap-10 pt-8">
                                    <div className="space-y-2 border-l-2 border-slate-900 pl-6">
                                        <div className="text-4xl font-black text-slate-900">3x</div>
                                        <div className="text-xs font-bold text-slate-400 uppercase tracking-widest">Faster Load</div>
                                    </div>
                                    <div className="space-y-2 border-l-2 border-slate-200 pl-6">
                                        <div className="text-4xl font-black text-slate-900">0</div>
                                        <div className="text-xs font-bold text-slate-400 uppercase tracking-widest">Plugins Needed</div>
                                    </div>
                                </div>
                                <div className="pt-10">
                                    <MotionButton href="/technologies/next-js-14" variant="outline" className="rounded-2xl px-8" showArrow={false}>
                                        Explore the Stack
                                    </MotionButton>
                                </div>
                            </Reveal>
                        </div>

                        <div className="relative">
                            <Reveal delay={0.3}>
                                <div className="space-y-6">
                                    <IframeSection
                                        src="/showcase/klz-cables/index.html"
                                        height="700px"
                                        desktopWidth={1440}
                                        browserFrame
                                        allowScroll={true}
                                        perspective
                                        rotate={-5}
                                        title="The Global Hub"
                                        description="Full-width industrial presentation for decision makers."
                                    />
                                </div>
                            </Reveal>
                        </div>
                    </div>
                </Container>
            </section>

            {/* Section 02: Localization & Global Reach */}
            <section className="py-32 bg-slate-900 text-white overflow-hidden">
                <Container>
                    <div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-20">
                        <Reveal>
                            <Label className="text-slate-500 mb-4 tracking-[0.4em]">MULTI-LANG INFRASTRUCTURE</Label>
                            <H2 className="text-6xl font-black text-white leading-none">Global Native.</H2>
                            <LeadText className="text-slate-400 mt-6">
                                KLZ Cables operates from Germany with a global reach. I implemented a headless localization strategy that serves both markets without data duplication.
                            </LeadText>
                        </Reveal>
                    </div>

                    <div className="space-y-32">
                        <Reveal className="relative group">
                            <IframeSection
                                src="/showcase/klz-cables/de/start/index.html"
                                height="700px"
                                desktopWidth={1440}
                                browserFrame
                                allowScroll
                                perspective
                                rotate={5}
                                title="DE: German Expertise"
                                description="Engineered for the domestic power grid."
                                className="grayscale-0 group-hover:scale-[1.01] transition-all duration-700"
                            />
                            <div className="absolute top-1/2 left-4 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
                                <span className="bg-slate-900 text-white px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-widest shadow-2xl">Deutsch</span>
                            </div>
                        </Reveal>
                        <Reveal delay={0.2} className="relative group">
                            <IframeSection
                                src="/showcase/klz-cables/index.html"
                                height="700px"
                                desktopWidth={1440}
                                browserFrame
                                allowScroll
                                perspective
                                rotate={-5}
                                title="EN: International Standard"
                                description="Supporting global energy projects."
                                className="grayscale-0 group-hover:scale-[1.01] transition-all duration-700"
                            />
                            <div className="absolute top-1/2 right-4 -translate-y-1/2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
                                <span className="bg-slate-900 text-white px-8 py-4 rounded-2xl font-black text-xs uppercase tracking-widest shadow-2xl">English</span>
                            </div>
                        </Reveal>
                    </div>
                </Container>
            </section>

            {/* Section 03: Product Engineering Detail */}
            <section className="py-32 bg-white relative">
                <Container>
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-20 items-start">
                        <div className="lg:col-span-4 sticky top-32 space-y-10">
                            <Reveal>
                                <Label className="text-slate-400 tracking-[0.3em]">CABLE TAXONOMY</Label>
                                <H2 className="text-6xl font-black tracking-tighter leading-none">Engineering Accuracy.</H2>
                                <BodyText className="text-slate-500 text-lg">
                                    Each cable has hundreds of attributes. I designed a technical layout that makes "NA2XS(F)2Y" specs as readable as a news article.
                                </BodyText>
                                <ul className="space-y-6 pt-6">
                                    <li className="flex gap-4 items-start">
                                        <div className="w-12 h-12 shrink-0 bg-slate-900 rounded-2xl flex items-center justify-center text-white font-black">01</div>
                                        <div>
                                            <h4 className="font-black text-slate-900">Dynamic Tables</h4>
                                            <p className="text-sm text-slate-400">Spec-sheets generated from CMS data.</p>
                                        </div>
                                    </li>
                                    <li className="flex gap-4 items-start">
                                        <div className="w-12 h-12 shrink-0 bg-slate-100 rounded-2xl flex items-center justify-center text-slate-900 font-black">02</div>
                                        <div>
                                            <h4 className="font-black text-slate-900">Category Logic</h4>
                                            <p className="text-sm text-slate-400">Low, Medium, and High Voltage separation.</p>
                                        </div>
                                    </li>
                                </ul>
                            </Reveal>
                        </div>

                        <div className="lg:col-span-8 space-y-32 pt-10 lg:pt-0">
                            <Reveal delay={0.3}>
                                <IframeSection
                                    src="/showcase/klz-cables/power-cables/low-voltage-cables/index.html"
                                    height="700px"
                                    desktopWidth={1440}
                                    browserFrame
                                    allowScroll
                                    perspective
                                    rotate={5}
                                    title="Low Voltage Detail"
                                    description="Focus on NA2XY performance data."
                                />
                            </Reveal>
                            <Reveal delay={0.5}>
                                <IframeSection
                                    src="/showcase/klz-cables/power-cables/medium-voltage-cables/index.html"
                                    height="700px"
                                    desktopWidth={1440}
                                    browserFrame
                                    allowScroll
                                    perspective
                                    rotate={-5}
                                    title="Medium Voltage Overview"
                                    description="Grid distribution infrastructure."
                                />
                            </Reveal>
                        </div>
                    </div>
                </Container>
            </section>

            {/* Section 04: Performance Visualization */}
            <section className="py-32 bg-slate-50 border-y border-slate-200">
                <Container>
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
                        <div className="order-2 lg:order-1">
                            <Reveal>
                                <div className="grid grid-cols-2 gap-4">
                                    {[
                                        { l: 'Performance', v: '99', c: 'text-green-500' },
                                        { l: 'Accessibility', v: '100', c: 'text-green-500' },
                                        { l: 'Best Practices', v: '100', c: 'text-green-500' },
                                        { l: 'SEO', v: '98', c: 'text-green-500' }
                                    ].map((m, i) => (
                                        <div key={i} className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm text-center">
                                            <div className={cn("text-5xl font-black mb-1", m.c)}>{m.v}</div>
                                            <div className="text-[10px] font-black tracking-widest uppercase text-slate-400">{m.l}</div>
                                        </div>
                                    ))}
                                </div>
                            </Reveal>
                        </div>
                        <div className="order-1 lg:order-2 space-y-8">
                            <Reveal>
                                <Label className="text-slate-400 tracking-[0.3em]">METRICS THAT MATTER</Label>
                                <H2 className="text-6xl font-black leading-none">Speed is a Feature.</H2>
                                <BodyText className="text-slate-500 text-lg">
                                    For industrial B2B, time is money. Slow websites lose contracts. I delivered a 100% static-first architecture that delivers technical data instantly, anywhere in the world.
                                </BodyText>
                            </Reveal>
                        </div>
                    </div>
                </Container>
            </section>

            {/* Section 05: Brand & Communication */}
            <section className="py-32 bg-white">
                <Container>
                    <div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-20">
                        <Reveal>
                            <Label className="text-slate-400 tracking-[0.4em] mb-4">BRAND TRUST</Label>
                            <H2 className="text-6xl font-black leading-none">Industrial Confidence.</H2>
                            <LeadText className="text-slate-500 mt-6">
                                A high-tech website must feel high-tech. I evolved the KLZ Cables visual language while maintaining the trust they've built over decades.
                            </LeadText>
                        </Reveal>
                    </div>

                    <div className="space-y-32">
                        <Reveal>
                            <IframeSection
                                src="/showcase/klz-cables/klz-news/index.html"
                                height="700px"
                                desktopWidth={1440}
                                browserFrame
                                allowScroll
                                title="Dynamic News"
                                description="Instantly updated via Directus."
                            />
                        </Reveal>
                        <Reveal delay={0.2}>
                            <IframeSection
                                src="/showcase/klz-cables/team/index.html"
                                height="700px"
                                desktopWidth={1440}
                                browserFrame
                                allowScroll
                                title="Expert Team"
                                description="Human-centric B2B sales."
                            />
                        </Reveal>
                        <Reveal delay={0.4}>
                            <IframeSection
                                src="/showcase/klz-cables/contact/index.html"
                                height="700px"
                                desktopWidth={1440}
                                browserFrame
                                allowScroll
                                title="Lead Gen"
                                description="Frictionless contact workflows."
                            />
                        </Reveal>
                    </div>
                </Container>
            </section>

            {/* Final CTA - Apple Style */}
            <section className="py-48 bg-slate-900 overflow-hidden relative">
                {/* Background Tech Skew */}
                <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 grayscale pointer-events-none translate-x-1/4 -skew-x-12">
                    <IframeSection src={showcasePath} height="100%" desktopWidth={1200} minimal />
                </div>

                <Container className="relative z-10">
                    <Reveal>
                        <div className="max-w-2xl space-y-12">
                            <h2 className="text-7xl md:text-9xl font-black tracking-tighter text-white leading-[0.8]">
                                READY TO <br />
                                <span className="text-slate-600">UPGRADE?</span>
                            </h2>
                            <p className="text-2xl text-slate-400 font-medium">
                                I don't just build websites. I build industrial-grade digital infrastructure. Let's discuss your next project.
                            </p>
                            <div className="flex flex-col sm:flex-row gap-6">
                                <MotionButton href="/contact" className="bg-white text-slate-900 hover:bg-slate-100 rounded-2xl px-12 py-6 text-base" showArrow={false}>
                                    Start your Project
                                </MotionButton>
                                <MotionButton href="/case-studies" variant="outline" className="text-white border-white/20 hover:border-white rounded-2xl px-12 py-6 text-base" showArrow={false}>
                                    View more Cases
                                </MotionButton>
                            </div>
                        </div>
                    </Reveal>
                </Container>
            </section>
        </div>
    );
}