"use client";

import { PageHeader } from "../../src/components/PageHeader";
import { Reveal } from "../../src/components/Reveal";
import { Section } from "../../src/components/Section";
import {
  SystemArchitecture,
  SpeedPerformance,
  SolidFoundation,
  LayerSeparation,
  DirectService,
  TaskDone,
} from "../../src/components/Landing";
import {
  H3,
  H4,
  LeadText,
  BodyText,
  Label,
} 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,
} 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 />

      <PageHeader
        title={
          <>
            Websites, die <br />
            <span className="text-slate-400">
              <Marker color="rgba(255,235,59,0.5)">
                einfach funktionieren.
              </Marker>
            </span>
          </>
        }
        description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
        backgroundSymbol="W"
        className="px-5 md:px-0"
      />

      {/* 01: Architektur – WIE ich baue */}
      <Section
        number="01"
        title="Architektur"
        borderTop
        illustration={<SystemArchitecture 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">
              Systeme, nicht Broschüren. <br />
              <span className="text-slate-400">
                Jede Website ist Ingenieursarbeit.
              </span>
            </H3>
          </Reveal>
          <Reveal delay={0.2}>
            <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-400">
              Ich entwickle Websites von Grund auf – mit modernen Frameworks,
              eigener Infrastruktur und einem Deployment-Prozess, der{" "}
              <span className="text-slate-900">
                <Marker delay={0.2} color="rgba(148,163,184,0.1)">
                  automatisiert und reproduzierbar
                </Marker>
              </span>{" "}
              ist.
            </LeadText>
          </Reveal>

          {/* Tech Stack Visual */}
          <Reveal delay={0.4}>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
              {[
                { label: "Next.js", sub: "Framework" },
                { label: "TypeScript", sub: "Sprache" },
                { label: "Docker", sub: "Infrastruktur" },
                { label: "Directus", sub: "CMS" },
              ].map((item, i) => (
                <Card
                  key={i}
                  variant="glass"
                  padding="small"
                  techBorder
                  className="group text-center"
                >
                  <div className="space-y-1 md:space-y-2">
                    <Label className="text-slate-900 text-xs md:text-sm">
                      {item.label}
                    </Label>
                    <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 uppercase tracking-widest">
                      {item.sub}
                    </span>
                  </div>
                </Card>
              ))}
            </div>
          </Reveal>

          {/* Decorative Code Snippet */}
          <Reveal delay={0.6}>
            <div className="max-w-md opacity-70">
              <CodeSnippet variant="code" />
            </div>
          </Reveal>
        </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">
                <Marker delay={0.3} color="rgba(148,163,184,0.15)">
                  kein Extra. Sie ist 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-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-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-8 md:space-y-12">
          <Reveal>
            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
              Inhalte pflegen <br />
              <span className="text-slate-400">ohne Angst.</span>
            </H3>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
            <div className="md:col-span-12 lg:col-span-7">
              <Reveal delay={0.2}>
                <LeadText className="text-lg md:text-2xl text-slate-400">
                  Technik und Inhalt sind{" "}
                  <span className="text-slate-900">
                    <Marker color="rgba(255,235,59,0.5)">
                      strikt getrennt
                    </Marker>
                  </span>
                  . Sie bearbeiten Texte und Bilder in einem intuitiven System –
                  das Design bleibt geschützt.
                </LeadText>
              </Reveal>
            </div>
            <div className="md:col-span-12 lg:col-span-5">
              <Reveal delay={0.4}>
                <Card
                  variant="glass"
                  padding="normal"
                  techBorder
                  className="space-y-6"
                >
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <div className="w-2 h-2 rounded-full bg-green-500"></div>
                      <Label className="text-slate-900">Sie dürfen</Label>
                    </div>
                    <BodyText className="font-medium text-sm md:text-base">
                      Texte, Bilder und Inhalte frei bearbeiten.
                    </BodyText>
                  </div>
                  <div className="space-y-3 opacity-40">
                    <div className="flex items-center gap-3">
                      <div className="w-2 h-2 rounded-full bg-slate-300"></div>
                      <Label>Geschützt</Label>
                    </div>
                    <BodyText className="line-through text-xs md:text-base">
                      Design, Layout, Code-Struktur.
                    </BodyText>
                  </div>
                </Card>
              </Reveal>
            </div>
          </div>
        </div>
      </Section>

      {/* 05: Was Sie bekommen */}
      <Section
        number="05"
        title="Ergebnis"
        borderTop
        illustration={<TaskDone className="w-24 h-24" />}
      >
        <div className="space-y-8 md:space-y-16">
          <Reveal>
            <H3 className="text-2xl md:text-5xl tracking-tighter">
              Was Sie konkret <br />
              <span className="text-slate-400">bekommen.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
            {[
              {
                title: "Ihr Code",
                desc: "Vollständiger Quellcode, versioniert auf GitHub. Kein Vendor Lock-in.",
              },
              {
                title: "Ihre Infrastruktur",
                desc: "Docker-Container, CI/CD-Pipeline, automatisches Deployment.",
              },
              {
                title: "Ihr CMS",
                desc: "Eigenes Content-Management-System. Volle Kontrolle über Ihre Inhalte.",
              },
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="space-y-3 md:space-y-4 group">
                  <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
                  <H4 className="text-lg md:text-2xl font-bold">
                    {item.title}
                  </H4>
                  <LeadText className="text-sm md:text-lg text-slate-400">
                    {item.desc}
                  </LeadText>
                </div>
              </Reveal>
            ))}
          </div>

          <Reveal delay={0.4}>
            <div className="pt-10 md:pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 md:gap-8">
              <div className="space-y-2">
                <Label>Bereit?</Label>
                <LeadText className="text-xl md:text-2xl">
                  Lassen Sie uns über Ihr Projekt sprechen.
                </LeadText>
              </div>
              <Button href="/contact" className="w-full md:w-auto">
                Projekt anfragen
              </Button>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}