"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">
                  PROFESSIONELLE WEBSITES
                </MonoLabel>
                <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
                  Ihre Website. <br />
                  <span className="text-slate-400">
                    <Marker>Komplett sorgenfrei.</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 WordPress-Chaos. Kein Baukasten-Frust. Ich baue Ihnen eine
                maßgeschneiderte Website, mit der Sie{" "}
                <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
                  null Arbeit
                </span>{" "}
                haben.
              </LeadText>
            </Reveal>
          </div>

          <div className="space-y-12">
            {/* Keeping the ArchitectureVisualizer for visual impact, but context is different */}
            <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: "Kein CMS-Zwang",
                  sub: "Einfachheit",
                  desc: "Sie müssen kein System lernen. Ich übernehme alle Updates.",
                },
                {
                  label: "Fixpreis",
                  sub: "Planbarkeit",
                  desc: "Klare Kosten von Anfang an. Keine versteckten Gebühren.",
                },
                {
                  label: "Pfeilschnell",
                  sub: "Performance",
                  desc: "Keine langen Ladezeiten. Ihre Kunden bleiben auf der Seite.",
                },
                {
                  label: "Sorglos",
                  sub: "Betreuung",
                  desc: "Hosting, Sicherheit, Backups? Darum kümmere ich mich.",
                },
              ].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="Schnelligkeit"
        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">
              Niemand wartet gerne. <br />
              <span className="text-slate-400">
                Ihre Kunden <Marker delay={0.3}>erst recht nicht.</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">
                  Langsame Websites kosten bares Geld. Wenn Ihre Seite nicht
                  sofort lädt, ist der Besucher schon bei der Konkurrenz. Meine
                  Websites sind auf maximale Geschwindigkeit optimiert.
                </LeadText>
              </Reveal>
              <Reveal delay={0.4}>
                <IconList className="space-y-2 md:space-y-4">
                  {[
                    "Sofortiger Seitenaufbau ohne Verzögerung",
                    "Automatische Bild-Optimierung für Smartphones",
                    "Bessere Google-Platzierung (SEO) durch Top-Speed",
                    "Höhere Zufriedenheit bei Ihren Besuchern",
                  ].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">
                    100%
                  </div>
                  <Label className="mt-4">Fokus auf das Wesentliche</Label>
                  <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
                    SCHNELL · SICHER · ZUVERLÄSSIG
                  </span>
                </Card>
              </Reveal>
            </div>
          </div>
        </div>
      </Section>

      {/* 03: Code-Qualität */}
      <Section
        number="03"
        title="Qualität"
        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">
              Handarbeit statt <br />
              <span className="text-slate-400">Fertigbausatz.</span>
            </H3>
          </Reveal>
          <Reveal delay={0.2}>
            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
              Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
              Themes, die ständig aktualisiert werden müssen.
            </LeadText>
          </Reveal>

          <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">
                      Saubere Programmierung
                    </Label>
                    <BodyText>
                      Ihre Website wird von Grund auf solide entwickelt. Kein
                      unnötiger Ballast, der die Seite verlangsamt oder
                      angreifbar macht.
                    </BodyText>
                  </div>
                </Card>
                <Card variant="glass" padding="normal" className="group">
                  <div className="space-y-2">
                    <Label className="text-slate-900">Zukunftssicher</Label>
                    <BodyText>
                      Moderne Technologien garantieren, dass Ihre Website auch
                      in ein paar Jahren noch perfekt und fehlerfrei läuft.
                    </BodyText>
                  </div>
                </Card>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* 04: Content-System -> Sorglos Paket */}
      <Section
        number="04"
        title="Das Sorglos-Paket"
        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">
                  NULL AUFWAND FÜR SIE
                </MonoLabel>
                <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
                  Sie haben Besseres <br />
                  <span className="text-slate-400 italic font-serif">
                    zu tun.
                  </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">
                  Bilder tauschen, Texte anpassen, Sicherheitsupdates
                  einspielen? Darum kümmern Sie sich nie wieder. Das{" "}
                  <span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
                    erledige ich.
                  </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">
                    Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
                    Sie eine Änderung brauchen, schreiben Sie mir einfach eine
                    kurze Nachricht. Kein kompliziertes
                    Content-Management-System (CMS), keine Schulungen.
                  </BodyText>

                  <div className="flex flex-wrap gap-3">
                    {["Änderungen inklusive", "Technik-Wartung", "Hosting"].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>SERVICE_LEVEL</span>
                    <span className="text-green-500 font-bold">ACTIVE</span>
                  </div>
                  <p className="leading-tight">
                    Schicken Sie einfach eine E-Mail mit den neuen Texten oder
                    Bildern.
                  </p>
                  <div className="pt-2 border-t border-white/10 flex items-center justify-between">
                    <span>STRESS</span>
                    <span className="text-white">0%</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">
                Ihre fertige <br />
                <span className="text-slate-400">Website.</span>
              </H3>
            </Reveal>
            <Reveal delay={0.2}>
              <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
                Professionell, schnell und wartungsfrei. Sie bekommen eine
                schlüsselfertige Lösung, die Ihr Unternehmen optimal
                präsentiert.
              </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"
              >
                Kostenlos anfragen
              </Button>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}