"use client";

import { Reveal } from "../../src/components/Reveal";
import { Section } from "../../src/components/Section";
import {
  SpeedPerformance,
  SolidFoundation,
  LayerSeparation,
  TaskDone,
} from "../../src/components/Landing";
import {
  H3,
  LeadText,
  BodyText,
  Label,
  MonoLabel,
} from "../../src/components/Typography";
import { Card } from "../../src/components/Layout";
import { Button } from "../../src/components/Button";
import { IconList, IconListItem } from "../../src/components/IconList";
import {
  GradientMesh,
  CodeSnippet,
  AbstractCircuit,
  CMSVisualizer,
  ArchitectureVisualizer,
  ResultVisualizer,
} from "../../src/components/Effects";
import { Marker } from "../../src/components/Marker";

export default function WebsitesPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      <AbstractCircuit />

      <Section className="pt-24 pb-12 md:pt-40 md:pb-24">
        <div className="space-y-12 md:space-y-24">
          <div className="space-y-6 md:space-y-10 max-w-5xl">
            <Reveal>
              <div className="space-y-4">
                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
                  SYSTEM ENGINEERING
                </MonoLabel>
                <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
                  Websites, die einfach <br />
                  <span className="text-slate-400">
                    <Marker>funktionieren.</Marker>
                  </span>
                </H3>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-500 md:text-slate-400 leading-relaxed">
                Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur
                für{" "}
                <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
                  maximale Performance
                </span>
                .
              </LeadText>
            </Reveal>
          </div>

          <div className="space-y-12">
            <Reveal delay={0.3} direction="up">
              <ArchitectureVisualizer />
            </Reveal>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {[
                {
                  label: "Next.js",
                  sub: "Architecture",
                  desc: "React-Framework für maximale SEO & Speed.",
                },
                {
                  label: "Docker",
                  sub: "Infrastructure",
                  desc: "Reproduzierbare Umgebungen überall.",
                },
                {
                  label: "Directus",
                  sub: "Management",
                  desc: "Headless CMS für flexible Datenabfrage.",
                },
                {
                  label: "Gitea",
                  sub: "Pipeline",
                  desc: "Self-hosted Git & CI/CD Pipelines.",
                },
              ].map((item, i) => (
                <Reveal key={i} delay={0.4 + i * 0.1}>
                  <div className="space-y-2 p-6 rounded-2xl border border-slate-50 bg-white shadow-sm hover:border-slate-200 transition-all group">
                    <Label className="text-slate-900 group-hover:text-blue-600 transition-colors uppercase tracking-widest text-[10px]">
                      {item.label}
                    </Label>
                    <BodyText className="text-xs text-slate-400">
                      {item.desc}
                    </BodyText>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </Section>

      {/* 02: Performance */}
      <Section
        number="02"
        title="Performance"
        borderTop
        variant="gray"
        illustration={<SpeedPerformance className="w-24 h-24" />}
        effects={<GradientMesh variant="metallic" className="opacity-60" />}
      >
        <div className="space-y-8 md:space-y-12">
          <Reveal>
            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
              Geschwindigkeit ist <br />
              <span className="text-slate-400">
                kein Extra. Sie ist <Marker delay={0.3}>Standard.</Marker>
              </span>
            </H3>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
            <div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
              <Reveal delay={0.2}>
                <LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400">
                  Jede Seite wird vorab gerendert und über ein CDN ausgeliefert.
                  Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
                  <span className="text-slate-900">Reproduzierbar.</span>
                </LeadText>
              </Reveal>
              <Reveal delay={0.4}>
                <IconList className="space-y-2 md:space-y-4">
                  {[
                    "Server-Side Rendering für sofortige Inhalte",
                    "Automatische Bild-Optimierung (WebP, AVIF)",
                    "Lighthouse-Score 90+ als Mindeststandard",
                    "Core Web Vitals im grünen Bereich",
                  ].map((item, i) => (
                    <IconListItem key={i} bullet>
                      <LeadText className="text-base md:text-xl">
                        {item}
                      </LeadText>
                    </IconListItem>
                  ))}
                </IconList>
              </Reveal>
            </div>
            <div className="md:col-span-5">
              <Reveal delay={0.6}>
                <Card
                  variant="glass"
                  padding="normal"
                  techBorder
                  className="text-center group py-10 md:py-12"
                >
                  <div className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
                    90+
                  </div>
                  <Label className="mt-4">Lighthouse Score</Label>
                  <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
                    PERFORMANCE · ACCESSIBILITY · SEO
                  </span>
                </Card>
              </Reveal>
            </div>
          </div>
        </div>
      </Section>

      {/* 03: Code-Qualität */}
      <Section
        number="03"
        title="Code"
        borderTop
        illustration={<SolidFoundation className="w-24 h-24" />}
      >
        <div className="space-y-8 md:space-y-12">
          <Reveal>
            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
              Keine Plugins. <br />
              <span className="text-slate-400">Keine Abhängigkeiten.</span>
            </H3>
          </Reveal>
          <Reveal delay={0.2}>
            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
              Ihre Website besteht aus{" "}
              <span className="text-slate-900">Ihrem Code</span>. Kein
              WordPress, kein Wix, keine Blackbox. Alles versioniert, alles
              nachvollziehbar.
            </LeadText>
          </Reveal>

          {/* Git Branch Visualization */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <Reveal delay={0.4}>
              <CodeSnippet variant="git" />
            </Reveal>
            <Reveal delay={0.5}>
              <div className="space-y-4 md:space-y-6">
                <Card variant="glass" padding="normal" className="group">
                  <div className="space-y-2">
                    <Label className="text-slate-900">Versionskontrolle</Label>
                    <BodyText>
                      Jede Änderung ist dokumentiert. Rollbacks in Sekunden.
                      Kein „wer hat das kaputt gemacht?".
                    </BodyText>
                  </div>
                </Card>
                <Card variant="glass" padding="normal" className="group">
                  <div className="space-y-2">
                    <Label className="text-slate-900">
                      Automatisches Deployment
                    </Label>
                    <BodyText>
                      Code wird geprüft, getestet und automatisch live
                      geschaltet. Ohne manuellen Eingriff.
                    </BodyText>
                  </div>
                </Card>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* 04: Content-System */}
      <Section
        number="04"
        title="Inhalte"
        borderTop
        variant="gray"
        illustration={<LayerSeparation className="w-24 h-24" />}
        effects={<GradientMesh variant="subtle" className="opacity-60" />}
      >
        <div className="space-y-12 md:space-y-20">
          <div className="space-y-6 md:space-y-10 max-w-5xl">
            <Reveal>
              <div className="space-y-4">
                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
                  ARCHITECTURAL SEPARATION
                </MonoLabel>
                <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
                  Inhalte pflegen <br />
                  <span className="text-slate-400 italic font-serif">
                    ohne Angst.
                  </span>
                </H3>
              </div>
            </Reveal>

            <Reveal delay={0.2}>
              <div className="space-y-6">
                <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl">
                  Vergessen Sie zerschossene Layouts nach einem Textupdate.
                  Meine Websites trennen{" "}
                  <span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
                    Daten von Design
                  </span>
                  .
                </LeadText>
              </div>
            </Reveal>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
            <div className="lg:col-span-8 relative">
              <Reveal delay={0.4} direction="up">
                <CMSVisualizer className="w-full mx-auto" />
              </Reveal>
            </div>

            <div className="lg:col-span-4 space-y-8">
              <Reveal delay={0.5}>
                <div className="space-y-4">
                  <BodyText className="text-slate-500 leading-relaxed">
                    Durch eine krisenfeste Headless-Architektur (Directus)
                    bewegen Sie sich in einem geschützten Sandkasten – während
                    das Frontend-System die visuelle Integrität Ihrer Marke
                    garantiert.
                  </BodyText>

                  <div className="flex flex-wrap gap-3">
                    {["Layout-Schutz", "Live-Vorschau", "Role-RBAC"].map(
                      (tag, i) => (
                        <div
                          key={i}
                          className="px-3 py-1 bg-white border border-slate-100 rounded-full text-[10px] font-mono text-slate-400"
                        >
                          {tag}
                        </div>
                      ),
                    )}
                  </div>
                </div>
              </Reveal>

              <Reveal delay={0.6}>
                <div className="p-6 bg-slate-900 rounded-2xl shadow-xl text-[10px] font-mono text-white/50 space-y-3">
                  <div className="flex justify-between items-center text-white/90">
                    <span>PROTOCOL</span>
                    <span className="text-green-500 font-bold">ENFORCED</span>
                  </div>
                  <p className="leading-tight">
                    Website architecture validates all CMS payloads against the
                    design schema before rendering.
                  </p>
                  <div className="pt-2 border-t border-white/10 flex items-center justify-between">
                    <span>INTEGRITY</span>
                    <span className="text-white">100%</span>
                  </div>
                </div>
              </Reveal>
            </div>
          </div>

          <Reveal delay={0.7}>
            <div className="p-px w-full bg-gradient-to-r from-transparent via-slate-100 to-transparent" />
          </Reveal>
        </div>
      </Section>

      {/* 05: Was Sie bekommen */}
      <Section
        number="05"
        title="Ergebnis"
        borderTop
        illustration={<TaskDone className="w-24 h-24" />}
      >
        <div className="space-y-12 md:space-y-24">
          <div className="max-w-4xl space-y-6">
            <Reveal>
              <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
                Was Sie konkret <br />
                <span className="text-slate-400">bekommen.</span>
              </H3>
            </Reveal>
            <Reveal delay={0.2}>
              <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
                Keine halben Sachen. Ich liefere Ihnen ein schlüsselfertiges
                System mit voller Kontrolle und Transparenz.
              </LeadText>
            </Reveal>
          </div>

          <Reveal delay={0.3} direction="up">
            <ResultVisualizer />
          </Reveal>

          <Reveal delay={0.5}>
            <div className="pt-10 md:pt-16 border-t border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
              <div className="space-y-3">
                <MonoLabel className="text-blue-500">
                  BEREIT FÜR DEN NÄCHSTEN SCHRITT?
                </MonoLabel>
                <div className="text-xl md:text-3xl font-bold tracking-tight text-slate-900">
                  Lassen Sie uns über Ihr Projekt sprechen.
                </div>
              </div>
              <Button
                href="/contact"
                className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
              >
                Projekt anfragen
              </Button>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}