'use client';

import React from 'react';
import { Section } from '../../../src/components/Section';
import { Reveal } from '../../../src/components/Reveal';
import { H1, H3, LeadText, Label, MonoLabel, BodyText } from '../../../src/components/Typography';
import { BackgroundGrid, Container } from '../../../src/components/Layout';
import { MotionButton } from '../../../src/components/Button';
import { IframeSection } from '../../../src/components/IframeSection';
import { HeroArchitecture } from '../../../src/components/Landing/Illustrations/HeroArchitecture';
import {
    Activity,
    Database,
    Layout,
    Users,
    ArrowRight,
    Zap,
    ShieldCheck,
    ShoppingBag,
    Globe2,
    Settings,
    Search,
    Monitor
} from 'lucide-react';

/**
 * AMBILIGHT GLOW COMPONENT
 */
const AmbilightGlow: React.FC<{ color?: string; opacity?: string }> = ({
    color = "rgba(148, 163, 184, 0.15)",
    opacity = "opacity-40"
}) => (
    <div
        className={`absolute -inset-24 lg:-inset-40 blur-[100px] lg:blur-[160px] pointer-events-none ${opacity} z-0 transition-opacity duration-1000 group-hover:opacity-70`}
        style={{ background: `radial-gradient(circle, ${color} 0%, transparent 75%)` }}
    />
);

export default function KLZCablesCaseStudy() {
    return (
        <div className="flex flex-col bg-slate-50 relative min-h-screen selection:bg-slate-900 selection:text-white">
            <BackgroundGrid />

            {/* --- HERO: PURE INDUSTRIAL TYPOGRAPHY --- */}
            <section className="relative min-h-[90vh] flex items-center pt-32 overflow-hidden border-b border-slate-200 bg-white">
                {/* TECHNICAL GRID MOTIF */}
                <div className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_70%_50%,#000_20%,transparent_100%)] pointer-events-none" />
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(15,23,42,0.02)_0%,transparent_50%)] pointer-events-none" />


                <Container variant="narrow" className="relative z-10">
                    <div className="space-y-20">
                        <Reveal>
                            <div className="inline-flex items-center gap-6">
                                <div className="w-12 h-px bg-slate-900" />
                                <div className="space-y-1">
                                    <MonoLabel className="text-slate-900 tracking-[0.4em]">PROJECT // SYSTEM OPTIMIZATION</MonoLabel>
                                    <Label className="text-[10px] text-slate-400">HARDENED WORDPRESS // PERFORMANCE STACK</Label>
                                </div>
                            </div>
                        </Reveal>

                        <div className="space-y-10">
                            <Reveal delay={0.1}>
                                <H1 className="text-7xl md:text-[10rem] tracking-tighter leading-[0.8] font-bold">
                                    KLZ Cables <br />
                                    <span className="text-slate-200">2025 Case Study.</span>
                                </H1>
                            </Reveal>

                            <Reveal delay={0.2}>
                                <div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-16">
                                    <LeadText className="text-2xl md:text-5xl leading-tight text-slate-900 font-medium">
                                        Engineering a <br />
                                        <span className="text-slate-400">Low-Latency Global System.</span>
                                    </LeadText>
                                    <BodyText className="mt-10 text-xl text-slate-500 max-w-xl leading-relaxed">
                                        I reconstructed the digital spine for KLZ Cables. For a leader in high-voltage infrastructure, I delivered a high-performance system designed for technical precision rather than simple marketing—a hardened tool for complex cable engineering.
                                    </BodyText>
                                </div>
                            </Reveal>
                        </div>

                        <Reveal delay={0.3}>
                            <div className="flex flex-wrap gap-12 md:gap-24 pt-16 border-t border-slate-100">
                                <div className="space-y-3">
                                    <Label className="text-slate-400">Cache Performance</Label>
                                    <div className="flex items-center gap-3">
                                        <div className="w-2.5 h-2.5 bg-green-500 rounded-full" />
                                        <span className="text-2xl font-bold font-mono text-slate-900">&lt; 30ms TTFB</span>
                                    </div>
                                </div>
                                <div className="space-y-3">
                                    <Label className="text-slate-400">Stack Hardening</Label>
                                    <div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900">
                                        <ShieldCheck className="w-6 h-6 text-green-500" />
                                        <span>WP + Varnish</span>
                                    </div>
                                </div>
                            </div>
                        </Reveal>
                    </div>
                </Container>
            </section>

            {/* --- SECTION 01: THE ARCHITECTURE --- */}
            <Section
                number="01"
                title="Architecture & Protocol Hardening"
                borderBottom
                containerVariant="normal"
            >
                <div className="grid grid-cols-1 md:grid-cols-2 gap-24 lg:gap-40 items-start">
                    <div className="space-y-12">
                        <Reveal>
                            <H3 className="text-4xl md:text-5xl">
                                Headless <br />Orchestration.
                            </H3>
                        </Reveal>
                        <Reveal delay={0.1}>
                            <div className="space-y-8">
                                <BodyText className="text-xl leading-relaxed font-serif italic text-slate-500">
                                    Enterprise B2B systems often suffer from protocol overhead and legacy technical debt.
                                </BodyText>
                                <BodyText className="text-lg text-slate-600 leading-relaxed">
                                    I ruthlessly refactored the KLZ architecture to a decoupled, high-performance stack. By stripping the traditional theme layer, WordPress now functions strictly as a headless JSON provider. A multi-tier **Varnish cache layer** offloads 98% of traffic, while native PHP micro-services handle mission-critical REST logic, ensuring a &lt;30ms time-to-first-byte (TTFB) even under heavy industrial query loads.
                                </BodyText>
                            </div>
                        </Reveal>
                    </div>
                    <div className="space-y-8">
                        <Reveal delay={0.2}>
                            <div className="p-10 bg-white rounded-[2rem] border border-slate-200 shadow-sm space-y-12 relative overflow-hidden group hover:border-slate-900 transition-colors duration-700">
                                <div className="space-y-6 relative z-10">
                                    <Label className="text-slate-900">System Metriken</Label>
                                    <div className="space-y-6">
                                        {[
                                            { label: 'Edge Caching', desc: 'Varnish + W3TC Object Cache' },
                                            { label: 'Analytics', desc: 'Independent Analytics (Privacy First)' },
                                            { label: 'Custom Core', desc: 'REST via Native PHP Snippets' }
                                        ].map((item, i) => (
                                            <div key={i} className="space-y-2 border-b border-slate-100 pb-4 last:border-0 last:pb-0">
                                                <MonoLabel className="text-[9px] text-slate-400">{item.label}</MonoLabel>
                                                <BodyText className="text-sm font-bold text-slate-900">{item.desc}</BodyText>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </Reveal>
                    </div>
                </div>
            </Section>

            {/* --- VISTA 01: CINEMATIC LANDING --- */}
            <section className="py-24 bg-slate-100 border-y border-slate-200 overflow-hidden relative">
                <div className="w-full max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                    <Reveal>
                        <div className="relative mb-12 px-4 md:px-12 flex justify-between items-end">
                            <div className="space-y-4">
                                <Label className="text-slate-500">Architecture Validation</Label>
                                <H3 className="text-5xl md:text-7xl tracking-tighter">Performance Metrics.</H3>
                            </div>
                        </div>
                    </Reveal>

                    <Reveal delay={0.2} width="100%" className="w-full">
                        <div className="relative group w-full px-4 lg:px-12">
                            <div className="relative w-full aspect-[16/9] md:aspect-[21/9] lg:aspect-[16/10] overflow-visible">
                                <IframeSection
                                    src="/showcase/klz-cables/index.html"
                                    height="100%"
                                    desktopWidth={1920}
                                    allowScroll
                                    browserFrame
                                    className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
                                />
                            </div>
                        </div>
                    </Reveal>
                </div>
            </section>

            {/* --- SECTION 03: CATALOG --- */}
            <Section
                number="02"
                title="Daten-Struktur"
                borderBottom
                containerVariant="wide"
            >
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                    <div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
                        <Reveal>
                            <H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
                                Parametric <br />Commerce Engine.
                            </H3>
                        </Reveal>
                    </div>

                    <div className="lg:col-span-8 relative group">
                        <Reveal width="100%">
                            <div className="relative h-[650px] w-full overflow-visible group">
                                <IframeSection
                                    src="/showcase/klz-cables/power-cables.html"
                                    height="100%"
                                    desktopWidth={1920}
                                    allowScroll
                                    browserFrame
                                    className="h-full w-full transition-all duration-700 no-scrollbar"
                                />
                            </div>
                        </Reveal>
                    </div>

                    <div className="lg:col-span-4 space-y-10 relative z-10">
                        <Reveal delay={0.2}>
                            <div className="space-y-6">
                                <Label className="text-slate-400">Schema Optimization</Label>
                                <LeadText className="text-lg">
                                    I reduced a complex, multi-variable WooCommerce data structure to a parametric interface. Using optimized SQL indices and localized edge caching, engineers can now drill down through 200+ high-voltage variants in real-time, reaching critical technical specifications in under two clicks.
                                </LeadText>
                                <div className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm">
                                    <Zap className="w-6 h-6 text-slate-400 mb-4" />
                                    <BodyText className="text-sm font-medium">Real-time configuration across 200+ SKU variants.</BodyText>
                                </div>
                            </div>
                        </Reveal>
                    </div>
                </div>
            </Section>

            {/* --- SECTION 04: TECHNICAL DETAIL --- */}
            <Section
                number="03"
                title="Asset Management"
                variant="white"
                borderBottom
                containerVariant="wide"
            >
                <div className="grid grid-cols-1 gap-16">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end">
                        <Reveal>
                            <div className="space-y-6">
                                <Label className="text-slate-400">Asset Pipelines</Label>
                                <H3 className="text-4xl md:text-6xl tracking-tighter">Technical Data Integrity.</H3>
                            </div>
                        </Reveal>
                        <Reveal delay={0.1}>
                            <BodyText className="text-xl text-slate-500 pb-2 font-serif italic">
                                For high-voltage N2XS(F)2Y cables, data fidelity is a safety requirement. I engineered an automated asset pipeline that generates and validates technical data-sheets server-side, ensuring perfect parity between the engineering specs and the globally distributed system.
                            </BodyText>
                        </Reveal>
                    </div>

                    <Reveal delay={0.2} width="100%">
                        <div className="relative w-full group">
                            <div className="relative w-full overflow-visible">
                                <IframeSection
                                    src="/showcase/klz-cables/products-power-cables-medium-voltage-cables-n2xsf2y.html"
                                    height="1000px"
                                    desktopWidth={1920}
                                    allowScroll
                                    offsetY={100}
                                    browserFrame
                                    className="w-full transition-all duration-1000 no-scrollbar"
                                />
                            </div>
                        </div>
                    </Reveal>
                </div>
            </Section>

            {/* --- SECTION 05: TEAM & TRUST --- */}
            <Section
                number="04"
                title="Ergebnis"
                borderBottom
                containerVariant="wide"
            >
                <div className="space-y-16 text-center">
                    <Reveal>
                        <H3 className="text-5xl md:text-8xl tracking-tighter">Infrastructural ROI.</H3>
                        <LeadText className="mx-auto max-w-2xl pt-6 text-xl">
                            By migrating from a bloated legacy monolithic stack to a high-performant industrial platform, I established KLZ Cables as the technical benchmark in the renewable energy sector.
                        </LeadText>
                    </Reveal>

                    <Reveal delay={0.2} width="100%">
                        <div className="relative group max-w-6xl mx-auto">
                            <div className="relative block w-full overflow-visible">
                                <IframeSection
                                    src="/showcase/klz-cables/team.html"
                                    height="850px"
                                    desktopWidth={1440}
                                    allowScroll
                                    browserFrame
                                    className="w-full h-full no-scrollbar"
                                />
                            </div>
                        </div>
                    </Reveal>
                </div>
            </Section>

            {/* --- FINAL CTA --- */}
            <section className="py-40 md:py-60 bg-white relative overflow-hidden">
                <BackgroundGrid />
                <Container variant="narrow" className="relative z-10 text-center">
                    <Reveal>
                        <div className="space-y-16">
                            <MonoLabel className="text-slate-400">MISSION CRITICAL INFRASTRUCTURE COMPLETED</MonoLabel>
                            <H3 className="text-6xl md:text-9xl tracking-tighter leading-none font-bold">
                                Digitale <br />
                                <span className="text-slate-200">Exzellenz.</span>
                            </H3>
                            <div className="pt-12">
                                <MotionButton href="/contact" variant="outline" className="px-12 py-6 text-xl group border-2">
                                    System-Analyse anfragen
                                    <ArrowRight className="inline-block ml-3 w-6 h-6 group-hover:translate-x-3 transition-transform duration-500" />
                                </MotionButton>
                            </div>
                        </div>
                    </Reveal>
                </Container>
            </section>
        </div>
    );
}