"use client";

import { Reveal } from "@/src/components/Reveal";
import { Section } from "@/src/components/Section";
import {
  H1,
  H3,
  LeadText,
  BodyText,
  Label,
  MonoLabel,
} from "@/src/components/Typography";
import { Button } from "@/src/components/Button";
import { Marker } from "@/src/components/Marker";
import { AbstractCircuit, GradientMesh } from "@/src/components/Effects";
import { GlitchText } from "@/src/components/GlitchText";

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-16 md:space-y-32">
          <div className="space-y-10 max-w-4xl">
            <Reveal>
              <div className="space-y-6">
                <MonoLabel className="text-slate-400 tracking-[0.2em] text-xs">
                  PROFESSIONELLE WEBSITES
                </MonoLabel>
                <H1 className="text-5xl md:text-8xl lg:text-9xl leading-[0.9] tracking-tighter">
                  Ihre Website. <br />
                  <span className="text-slate-400">Komplett sorgenfrei.</span>
                </H1>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <LeadText className="text-xl md:text-3xl text-slate-500 leading-snug">
                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>

          <Reveal delay={0.3}>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12 py-12 md:py-20 border-y border-slate-100">
              {[
                {
                  label: "Kein CMS-Zwang",
                  desc: "Sie müssen kein System lernen. Ich übernehme alles.",
                },
                {
                  label: "Fixpreis",
                  desc: "Klare Kosten von Anfang an. Keine versteckten Gebühren.",
                },
                {
                  label: "Pfeilschnell",
                  desc: "Keine langen Ladezeiten. Kunden bleiben auf der Seite.",
                },
                {
                  label: "Sorglos",
                  desc: "Hosting, Sicherheit, Backups? Darum kümmere ich mich.",
                },
              ].map((item, i) => (
                <div key={i} className="space-y-4">
                  <Label className="text-slate-900 text-lg">{item.label}</Label>
                  <BodyText className="text-slate-500">{item.desc}</BodyText>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Section>

      {/* 02: Performance */}
      <Section number="02" title="Schnelligkeit" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
              Niemand wartet gerne. <br />
              <span className="text-slate-400">
                Ihre Kunden erst recht nicht.
              </span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
            <Reveal delay={0.2}>
              <LeadText className="text-xl md:text-2xl text-slate-500">
                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.3}>
              <div className="space-y-8 border-l border-slate-100 pl-8 md:pl-12">
                {[
                  "Sofortiger Seitenaufbau ohne Verzögerung",
                  "Automatische Bild-Optimierung für Smartphones",
                  "Bessere Google-Platzierung (SEO) durch Top-Speed",
                ].map((item, i) => (
                  <div key={i} className="space-y-2">
                    <Label className="text-slate-900">0{i + 1}</Label>
                    <BodyText className="text-slate-500 text-lg">
                      {item}
                    </BodyText>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* 03: Code-Qualität */}
      <Section number="03" title="Qualität" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
              Handarbeit statt <br />
              <span className="text-slate-400">Fertigbausatz.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
            <Reveal delay={0.2}>
              <LeadText className="text-xl md:text-2xl text-slate-500">
                Vergessen Sie Sicherheitslücken durch veraltete Plugins oder
                Themes, die ständig aktualisiert werden müssen.
              </LeadText>
            </Reveal>
            <Reveal delay={0.3}>
              <div className="space-y-12">
                <div>
                  <Label className="text-slate-900 text-xl mb-4 block">
                    Saubere Programmierung
                  </Label>
                  <BodyText className="text-slate-500 text-lg">
                    Ihre Website wird von Grund auf solide entwickelt. Kein
                    unnötiger Ballast, der die Seite verlangsamt oder angreifbar
                    macht.
                  </BodyText>
                </div>
                <div>
                  <Label className="text-slate-900 text-xl mb-4 block">
                    Zukunftssicher
                  </Label>
                  <BodyText className="text-slate-500 text-lg">
                    Moderne Technologien garantieren, dass Ihre Website auch in
                    ein paar Jahren noch perfekt und fehlerfrei läuft.
                  </BodyText>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* 04: Sorglos Paket */}
      <Section number="04" title="Sorglos-Paket" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-4xl md:text-7xl lg:text-8xl leading-none tracking-tighter max-w-4xl">
              Das Prinzip: <br />
              <span className="text-slate-400">Null Aufwand.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-start">
            <Reveal delay={0.2}>
              <LeadText className="text-2xl md:text-4xl text-slate-900 leading-snug">
                Sie haben Besseres zu tun, als Bilder zu tauschen oder Updates
                zu installieren.
              </LeadText>
            </Reveal>

            <Reveal delay={0.3}>
              <div className="space-y-8">
                <BodyText className="text-slate-500 text-lg md:text-xl leading-relaxed">
                  Mein Sorglos-Paket deckt alles für ein ganzes Jahr ab. Wenn
                  Sie eine Änderung brauchen, schreiben Sie mir einfach eine
                  E-Mail. Kein kompliziertes System, keine Schulungen. Ich setze
                  es für Sie um.
                </BodyText>
                <div className="pt-8 border-t border-slate-100 flex gap-8">
                  <div>
                    <Label className="text-slate-900">Inklusive</Label>
                    <BodyText className="text-slate-500 mt-2">
                      Änderungen & Wartung
                    </BodyText>
                  </div>
                  <div>
                    <Label className="text-slate-900">Ihr Stresslevel</Label>
                    <BodyText className="text-slate-500 mt-2">0%</BodyText>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* 05: CTA */}
      <Section
        number="05"
        title="Ergebnis"
        borderTop
        effects={<GradientMesh variant="metallic" className="opacity-60" />}
      >
        <div className="py-12 md:py-24 relative z-10">
          <div className="space-y-16 md:space-y-24">
            <Reveal>
              <H3 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                Ihre fertige <br />
                <span className="text-slate-400">
                  <GlitchText delay={0.5} duration={1}>
                    Website.
                  </GlitchText>
                </span>
              </H3>
            </Reveal>

            <Reveal delay={0.2}>
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
                <LeadText className="text-xl md:text-3xl text-slate-500 max-w-xl">
                  Kein Stress, kein Overhead. Schreiben Sie mir einfach eine
                  Nachricht.
                </LeadText>
                <Button
                  href="/contact"
                  className="w-full md:w-auto px-12 py-6 text-xl"
                >
                  Sagen Sie Hallo
                </Button>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>
    </div>
  );
}