'use client';

import React from 'react';
import { PageHeader } from '../../src/components/PageHeader';
import { Section } from '../../src/components/Section';
import { Reveal } from '../../src/components/Reveal';
import { H3, LeadText, Label } from '../../src/components/Typography';
import { BackgroundGrid, Card, Container } from '../../src/components/Layout';
import { MotionButton } from '../../src/components/Button';
import Image from 'next/image';

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

            <PageHeader
                title={<>Case Studies: <br /><span className="text-slate-200">Qualität in jedem Detail.</span></>}
                description="Ein Blick hinter die Kulissen ausgewählter Projekte. Von der ersten Idee bis zum fertigen Hochleistungssystem."
                backLink={{ href: '/', label: 'Zurück' }}
                backgroundSymbol="C"
            />

            <Section number="01" title="Projekte" borderTop>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                    <Reveal>
                        <Card variant="white" className="group overflow-hidden">
                            <div className="aspect-video relative overflow-hidden rounded-xl mb-8 bg-slate-100 border border-slate-100">
                                {/* We'll use a placeholder or a screenshot if available. 
                    Since we have the cloned site, we could technically iframe a preview here too, 
                    but a static image or a styled div is more standard for a card. */}
                                <div className="absolute inset-0 flex items-center justify-center bg-[#0117bf] transition-transform duration-700 group-hover:scale-105 p-12">
                                    <Image
                                        src="/showcase/klz-cables/assets/img/white_logo_transparent_background.svg"
                                        alt="KLZ Cables Logo"
                                        width={200}
                                        height={200}
                                        className="w-full h-auto max-w-[240px]"
                                    />
                                </div>
                            </div>

                            <div className="space-y-4">
                                <Label>Infrastructure & Energy</Label>
                                <H3 className="group-hover:text-slate-900 transition-colors">KLZ Cables – Digitaler Netzbau</H3>
                                <LeadText className="text-base line-clamp-3">
                                    Wie wir eine komplexe WordPress-Struktur in ein performantes, sauberes und langlebiges Web-System verwandelt haben. Fokus auf Performance, SEO und Benutzerführung.
                                </LeadText>

                                <div className="pt-4">
                                    <MotionButton href="/case-studies/klz-cables">
                                        Case Study lesen
                                    </MotionButton>
                                </div>
                            </div>
                        </Card>
                    </Reveal>

                    <Reveal delay={0.2}>
                        <div className="h-full flex flex-col justify-center border-2 border-dashed border-slate-100 rounded-3xl p-12 text-center space-y-4">
                            <Label>Demnächst</Label>
                            <H3 className="text-slate-200">Weitere Projekte sind in Arbeit.</H3>
                            <LeadText className="text-base italic">
                                Ich dokumentiere gerade weitere spannende Projekte aus den Bereichen SaaS, E-Commerce und Systemarchitektur.
                            </LeadText>
                        </div>
                    </Reveal>
                </div>
            </Section>

            <Section number="02" title="Philosophie" borderTop variant="gray">
                <div className="max-w-3xl space-y-8">
                    <Reveal>
                        <H3 className="text-4xl leading-tight">
                            Warum ich Case Studies zeige? <br />
                            <span className="text-slate-200">Weil Code mehr als Text ist.</span>
                        </H3>
                    </Reveal>
                    <Reveal delay={0.2}>
                        <LeadText className="text-xl">
                            In diesen Case Studies geht es nicht nur um bunte Bilder. Es geht um die technischen Entscheidungen, die ein Projekt erfolgreich machen. Schnelle Ladezeiten, SEO-Exzellenz und wartbarer Code sind keine Zufälle, sondern das Ergebnis von präziser Planung.
                        </LeadText>
                    </Reveal>
                </div>
            </Section>
        </div>
    );
}