'use client';

import React from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';
import { Section } from '../../../src/components/Section';
import { Reveal } from '../../../src/components/Reveal';
import { H1, H2, 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 {
    Activity,
    Database,
    Layout,
    Users,
    ArrowRight,
    Zap,
    ShieldCheck,
    Globe2,
    Settings,
    Search,
    Monitor,
    Cpu,
    Server,
    Layers
} from 'lucide-react';

/**
 * TECHNICAL MARKER COMPONENT
 * Implements the "hand-drawn marker" effect from STYLEGUIDE.md
 * Updated: Only yellow marker as requested.
 */
const Marker: React.FC<{ children: React.ReactNode; delay?: number }> = ({
    children,
    delay = 0
}) => {
    return (
        <span className="relative inline-block px-1">
            <motion.span
                initial={{ scaleX: 0, opacity: 0 }}
                whileInView={{ scaleX: 1, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 1.2, delay: delay + 0.1, ease: [0.23, 1, 0.32, 1] }}
                className="absolute inset-0 z-[-1] -skew-x-6 rotate-[-1deg] translate-y-1 transform-gpu bg-[rgba(255,235,59,0.95)] origin-left"
                aria-hidden="true"
            />
            {children}
        </span>
    );
};

export default function KLZCablesCaseStudy() {
    const { scrollYProgress } = useScroll();
    const heroY = useTransform(scrollYProgress, [0, 0.2], [0, -20]);
    const heroOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]);
    const gridRotate = useTransform(scrollYProgress, [0, 1], [0, 2]);

    return (
        <div className="flex flex-col bg-white relative min-h-screen selection:bg-slate-900 selection:text-white overflow-hidden">
            <motion.div style={{ opacity: heroOpacity }} className="fixed inset-0 z-0 pointer-events-none">
                <BackgroundGrid />
            </motion.div>

            {/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
            <section className="relative min-h-[40vh] py-20 overflow-hidden border-b border-slate-100 bg-white">
                <motion.div
                    style={{ y: heroY, rotate: gridRotate }}
                    className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40"
                />

                <Container variant="narrow" className="relative z-10">
                    <div className="space-y-12">
                        <Reveal direction="down" blur>
                            <div className="inline-flex items-center gap-6">
                                <motion.div
                                    initial={{ width: 0 }}
                                    whileInView={{ width: 48 }}
                                    transition={{ duration: 1, ease: "circOut" }}
                                    className="h-px bg-slate-900"
                                />
                                <div className="space-y-1">
                                    <MonoLabel className="text-slate-900 tracking-[0.4em]">SYSTEM-ARCHITEKTUR // 2025</MonoLabel>
                                    <Label className="text-[10px] text-slate-400 font-mono">HARDENED WORDPRESS // VARNISH STACK</Label>
                                </div>
                            </div>
                        </Reveal>

                        <div className="space-y-12">
                            <Reveal delay={0.1} direction="up" scale={0.98} blur>
                                <H1 className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900">
                                    KLZ Cables<br />
                                    <span className="text-slate-100">Case Study.</span>
                                </H1>
                            </Reveal>

                            <Reveal delay={0.2} direction="right" blur>
                                <div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12">
                                    <LeadText className="text-2xl md:text-4xl leading-tight text-slate-900 font-medium">
                                        Engineering eines <br />
                                        <Marker delay={0.2}>B2B Commerce Systems.</Marker>
                                    </LeadText>
                                    <BodyText className="mt-6 text-lg md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
                                        Vom statischen Altsystem zum industriellen Standard. Ich habe das KLZ-System auf das Wesentliche reduziert: Hardened Infrastructure, parametrische Datenpflege und zero maintenance.
                                    </BodyText>
                                </div>
                            </Reveal>
                        </div>

                        <Reveal delay={0.4} direction="up" scale={0.98} blur>
                            <div className="flex flex-wrap gap-12 md:gap-24 pt-12 border-t border-slate-100">
                                <div className="space-y-2">
                                    <Label className="text-slate-400">Data Integrity</Label>
                                    <div className="flex items-center gap-3">
                                        <div className="w-2.5 h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
                                        <span className="text-2xl font-bold font-mono text-slate-900 tracking-tight">Relational Data</span>
                                    </div>
                                </div>
                                <div className="space-y-2">
                                    <Label className="text-slate-400">Security Layer</Label>
                                    <div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900">
                                        <ShieldCheck className="w-6 h-6 text-[rgba(129,199,132,1)]" />
                                        <span>WP + Varnish</span>
                                    </div>
                                </div>
                            </div>
                        </Reveal>
                    </div>
                </Container>
            </section>

            {/* --- SECTION 01: ARCHITECTURE --- */}
            <Section
                number="01"
                title="System-Hardening & Logic"
                borderBottom
                containerVariant="normal"
            >
                <div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
                    <div className="md:col-span-12 mb-12">
                        <Reveal direction="left" blur>
                            <H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
                                Architektur- <br />Refactor.
                            </H2>
                        </Reveal>
                    </div>
                    <div className="md:col-span-7 space-y-12">
                        <Reveal delay={0.1} direction="up" blur>
                            <div className="space-y-10">
                                <BodyText className="text-2xl leading-relaxed font-serif italic text-slate-500">
                                    Vom statischen HTML zur zentralen Daten-Instanz.
                                </BodyText>
                                <BodyText className="text-xl text-slate-600 leading-relaxed">
                                    Ich habe die KLZ-Architektur radikal auf einen entkoppelten High-Performance-Stack umgestellt. WordPress fungiert hier nicht als CMS-Baukasten, sondern als <Marker delay={0.3}>Headless JSON-Provider</Marker>. Durch die Implementierung nativer PHP-Microservices und den Verzicht auf volatile Drittanbieter-Plugins wurde ein System geschaffen, das keine technologischen Überraschungen zulässt. <Marker delay={0.5}>Stability by Design.</Marker>
                                </BodyText>
                            </div>
                        </Reveal>
                    </div>
                    <div className="md:col-span-5 relative">
                        <Reveal delay={0.3} direction="right" scale={0.98} blur>
                            <motion.div
                                whileHover={{ y: -5, scale: 1.01 }}
                                transition={{ type: "spring", stiffness: 200, damping: 25 }}
                                className="p-12 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-12 relative overflow-hidden group shadow-sm text-left"
                            >
                                <div className="space-y-8 relative z-10">
                                    <Label className="text-slate-900">System Metriken</Label>
                                    <div className="space-y-8">
                                        {[
                                            { label: 'Edge Caching', desc: 'Varnish + W3TC Object Cache', icon: <Server className="w-5 h-5 text-slate-400" /> },
                                            { label: 'Analytics', desc: 'Independent (Global Data Compliance)', icon: <Activity className="w-5 h-5 text-slate-400" /> },
                                            { label: 'Custom Core', desc: 'REST via Native Services', icon: <Cpu className="w-5 h-5 text-slate-400" /> }
                                        ].map((item, i) => (
                                            <motion.div
                                                key={i}
                                                initial={{ x: -20, opacity: 0 }}
                                                whileInView={{ x: 0, opacity: 1 }}
                                                transition={{ delay: 0.5 + (i * 0.1), duration: 0.5 }}
                                                className="flex gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
                                            >
                                                <div className="shrink-0 mt-1">{item.icon}</div>
                                                <div className="space-y-1">
                                                    <MonoLabel className="text-[10px] text-slate-400">{item.label}</MonoLabel>
                                                    <BodyText className="text-base font-bold text-slate-900">{item.desc}</BodyText>
                                                </div>
                                            </motion.div>
                                        ))}
                                    </div>
                                </div>
                            </motion.div>
                        </Reveal>
                    </div>
                </div>
            </Section>

            {/* --- SHOWCASE: LANDING --- */}
            <section className="py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
                <div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
                    <Reveal direction="none" blur>
                        <div className="relative mb-16 flex justify-between items-end">
                            <div className="space-y-6">
                                <Label className="text-slate-500">Infrastructure Validation</Label>
                                <H3 className="text-5xl md:text-8xl tracking-tighter">Global Hub.</H3>
                            </div>
                        </div>
                    </Reveal>
                    <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
                        <motion.div
                            whileHover={{ scale: 1.01 }}
                            transition={{ type: "spring", stiffness: 200, damping: 20 }}
                        >
                            <IframeSection
                                src="/showcase/klz-cables.com/index.html"
                                height="850px"
                                desktopWidth={1920}
                                allowScroll
                                browserFrame
                                className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
                            />
                        </motion.div>
                    </Reveal>
                </div>
            </section>

            {/* --- SECTION 02: TECHNICAL DETAIL --- */}
            <Section
                number="02"
                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 direction="left" blur>
                            <div className="space-y-6">
                                <Label className="text-slate-400">Asset Pipelines</Label>
                                <H3 className="text-4xl md:text-6xl tracking-tighter">Automated Documentation.</H3>
                            </div>
                        </Reveal>
                        <Reveal delay={0.1} direction="right" blur>
                            <BodyText className="text-xl text-slate-500 pb-2 font-serif italic">
                                Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine Sicherheitsanforderung. Ich habe eine automatisierte Asset-Pipeline entwickelt, die technische Datenblätter serverseitig generiert und validiert.
                            </BodyText>
                        </Reveal>
                    </div>

                    <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
                        <motion.div
                            whileHover={{ scale: 1.01 }}
                            transition={{ type: "spring", stiffness: 200, damping: 20 }}
                            className="relative w-full group"
                        >
                            <div className="relative w-full overflow-visible">
                                <IframeSection
                                    src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
                                    height="1000px"
                                    desktopWidth={1920}
                                    allowScroll
                                    offsetY={100}
                                    browserFrame
                                    className="w-full transition-all duration-1000 no-scrollbar"
                                />
                            </div>
                        </motion.div>
                    </Reveal>
                </div>
            </Section>

            {/* --- SECTION 03: COMMERCE --- */}
            <Section
                number="03"
                title="Katalog-Architektur"
                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 direction="down" blur>
                            <H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
                                Fokus auf <br /><Marker delay={0.2}>Spezifikationen.</Marker>
                            </H3>
                        </Reveal>
                    </div>

                    <div className="lg:col-span-8 relative group">
                        <Reveal width="100%" direction="left" scale={0.98} blur>
                            <motion.div
                                whileHover={{ scale: 1.01 }}
                                transition={{ type: "spring", stiffness: 200, damping: 20 }}
                                className="relative h-[650px] w-full overflow-visible group"
                            >
                                <IframeSection
                                    src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
                                    height="100%"
                                    desktopWidth={1920}
                                    allowScroll
                                    browserFrame
                                    className="h-full w-full transition-all duration-700 no-scrollbar"
                                />
                            </motion.div>
                        </Reveal>
                    </div>

                    <div className="lg:col-span-4 space-y-10 relative z-10">
                        <Reveal delay={0.2} direction="right" blur>
                            <div className="space-y-6">
                                <Label className="text-slate-400">Katalog-Struktur</Label>
                                <LeadText className="text-lg">
                                    Der Produktbereich wurde konsequent auf die Bedürfnisse technischer Planer optimiert. Klare Hierarchien und der Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten Zugriff auf Kabel-Parameter und Datenblätter.
                                </LeadText>
                                <motion.div
                                    whileHover={{ x: 10 }}
                                    className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm"
                                >
                                    <Layers className="w-6 h-6 text-slate-400 mb-4" />
                                    <BodyText className="text-sm font-medium">Strukturierte Aufbereitung technischer Produktdaten.</BodyText>
                                </motion.div>
                            </div>
                        </Reveal>
                    </div>
                </div>
            </Section>

            {/* --- SECTION 04: CONTENT ENGINE --- */}
            <Section
                number="04"
                title="Content Strategy"
                variant="white"
                borderBottom
                containerVariant="wide"
            >
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                    <div className="lg:col-span-4 space-y-10 order-2 lg:order-1">
                        <Reveal direction="left" blur>
                            <div className="space-y-6">
                                <Label className="text-slate-400">Knowledge Transfer</Label>
                                <H3 className="text-4xl md:text-6xl tracking-tighter">Insights & News.</H3>
                                <BodyText className="text-xl text-slate-500 font-serif italic">
                                    Die News-Engine dient als technischer Hub für Industrie-Standards. Durch die Implementierung eines performanten Blog-Systems wird Fachwissen direkt an die Zielgruppe kommuniziert.
                                </BodyText>
                            </div>
                        </Reveal>
                    </div>
                    <div className="lg:col-span-8 order-1 lg:order-2">
                        <Reveal width="100%" direction="right" scale={0.98} blur>
                            <motion.div
                                whileHover={{ scale: 1.01 }}
                                transition={{ type: "spring", stiffness: 200, damping: 20 }}
                                className="relative h-[700px] w-full"
                            >
                                <IframeSection
                                    src="/showcase/klz-cables.com/blog.html"
                                    height="100%"
                                    desktopWidth={1600}
                                    allowScroll
                                    browserFrame
                                    className="h-full w-full no-scrollbar"
                                />
                            </motion.div>
                        </Reveal>
                    </div>
                </div>
            </Section>

            {/* --- SECTION 05: TEAM & TRUST --- */}
            <Section
                number="05"
                title="Ergebnis"
                borderBottom
                containerVariant="wide"
            >
                <div className="space-y-16 text-center">
                    <Reveal direction="up" blur>
                        <H3 className="text-5xl md:text-8xl tracking-tighter">System-Lifecycle.</H3>
                        <LeadText className="mx-auto max-w-2xl pt-6 text-xl">
                            Die Migration von einer statischen Datei-Struktur zu einer zentralisierten Daten-Instanz eliminiert technische Schulden und manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie Architektur, die technische Datentreue über den gesamten Produkt-Lifecycle sicherstellt.
                        </LeadText>
                    </Reveal>

                    <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
                        <div className="relative group w-full text-left">
                            <div className="relative block w-full overflow-visible">
                                <IframeSection
                                    src="/showcase/klz-cables.com/team.html"
                                    height="1100px"
                                    desktopWidth={1440}
                                    allowScroll
                                    browserFrame
                                    className="w-full h-full no-scrollbar"
                                />
                            </div>
                        </div>
                    </Reveal>
                </div>
            </Section>

            {/* --- SECTION 06: CONVERSION --- */}
            <Section
                number="06"
                title="Lead Engineering"
                variant="white"
                containerVariant="wide"
            >
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                    <div className="lg:col-span-7">
                        <Reveal direction="left" scale={0.98} blur>
                            <motion.div
                                whileHover={{ scale: 1.01 }}
                                transition={{ type: "spring", stiffness: 200, damping: 20 }}
                                className="relative h-[800px] w-full"
                            >
                                <IframeSection
                                    src="/showcase/klz-cables.com/contact.html"
                                    height="100%"
                                    desktopWidth={1200}
                                    allowScroll
                                    browserFrame
                                    className="h-full w-full no-scrollbar"
                                />
                            </motion.div>
                        </Reveal>
                    </div>
                    <div className="lg:col-span-5 space-y-10">
                        <Reveal direction="right" blur>
                            <div className="space-y-6">
                                <Label className="text-slate-400">Conversion Layer</Label>
                                <H3 className="text-4xl md:text-6xl tracking-tighter">Direkter Draht.</H3>
                                <BodyText className="text-xl text-slate-500 font-serif italic">
                                    Das Kontakt-System wurde auf maximale Reduktion getrimmt. Keine unnötigen Hürden, sondern ein direkter Kommunikations-Kanal zwischen technischem Bedarf und individueller Beratung.
                                </BodyText>
                            </div>
                        </Reveal>
                    </div>
                </div>
            </Section>

            {/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
            <section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
                <BackgroundGrid />
                <Container variant="normal" className="relative z-10">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
                        <div className="space-y-12">
                            <Reveal direction="left" blur>
                                <div className="space-y-4">
                                    <MonoLabel className="text-slate-400 tracking-[0.4em]">CONSULTING // ENGINEERING</MonoLabel>
                                    <H2 className="text-6xl md:text-8xl tracking-tighter leading-none font-bold">
                                        Architektur <br />
                                        <span className="text-slate-100">ohne Altlasten.</span>
                                    </H2>
                                </div>
                            </Reveal>
                            <Reveal delay={0.2} direction="left" blur>
                                <BodyText className="text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
                                    Vom Prototyp zum industriellen Standard. Ich entwickle digitale Infrastrukturen, die technische Freiheit und operative Stabilität garantieren – wartungsfrei und skalierbar.
                                </BodyText>
                            </Reveal>
                        </div>

                        <div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-10 md:p-14 rounded-[3.5rem] space-y-12 relative group shadow-sm">
                            <Reveal direction="right" blur>
                                <div className="inline-flex items-center gap-3 px-4 py-2 bg-white rounded-full border border-slate-200 mb-4 font-mono text-[10px] tracking-widest text-slate-500 uppercase">
                                    <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
                                    Operational Excellence
                                </div>
                                <div className="space-y-10">
                                    {[
                                        { title: "Hardened Infrastructure", desc: "Zentralisierte Datenpflege und entkoppelte WordPress-Instanzen." },
                                        { title: "Automated Data Pipelines", desc: "Validierung technischer Spezifikationen ohne manuelle Eingriffe." },
                                        { title: "Maintenance-Free Core", desc: "Plugin-freie Logik für deterministische System-Sicherheit." }
                                    ].map((item, i) => (
                                        <div key={i} className="space-y-3 group/item">
                                            <MonoLabel className="text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">{item.title}</MonoLabel>
                                            <BodyText className="text-lg font-bold text-slate-900 leading-tight">{item.desc}</BodyText>
                                        </div>
                                    ))}
                                </div>
                            </Reveal>
                            <Reveal delay={0.5} direction="up" blur className="pt-6">
                                <MotionButton href="/contact" variant="outline" className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700">
                                    System-Analyse anfragen
                                    <ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" />
                                </MotionButton>
                            </Reveal>
                        </div>
                    </div>
                </Container>
            </section>
        </div>
    );
}