"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,
  ConceptAutomation,
  ConceptCode,
  ConceptCommunication,
  ConceptPrototyping,
  ConceptSystem,
  ConceptTarget,
} from "../../src/components/Landing";
import { Check } from "lucide-react";
import {
  H2,
  H3,
  H4,
  LeadText,
  BodyText,
  Label,
} from "../../src/components/Typography";
import { BackgroundGrid, Card } from "../../src/components/Layout";
import { MotionButton } from "../../src/components/Button";
import { IconList, IconListItem } from "../../src/components/IconList";

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

      <PageHeader
        title={
          <>
            Websites, die <br />
            <span className="text-slate-200">einfach funktionieren.</span>
          </>
        }
        description="Keine Baukästen, keine Plugins, kein Overhead. Nur sauberer Code und maximale Performance."
        backLink={{ href: "/", label: "Zurück" }}
        backgroundSymbol="W"
      />

      {/* Intro / Problem */}
      <Section
        number="01"
        title="Der Ansatz"
        borderTop
        illustration={<SystemArchitecture className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Ich baue Websites wie Systeme – <br />
              <span className="text-slate-200">nicht wie Broschüren.</span>
            </H3>
          </Reveal>
          <Reveal delay={0.2}>
            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
              Eine Website ist kein Flyer. Sie ist ein{" "}
              <span className="text-slate-900">Werkzeug</span>, das jeden Tag
              arbeitet. Deshalb baue ich sie stabil, schnell und wartungsfrei.
            </LeadText>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8">
              {[
                { label: "Stabil", icon: ConceptSystem },
                { label: "Schnell", icon: ConceptAutomation },
                { label: "Wartungsfrei", icon: ConceptCode },
                { label: "Sicher", icon: ConceptTarget },
              ].map((item, i) => (
                <div key={i} className="flex flex-col gap-3 group">
                  <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 group-hover:scale-110 transition-transform duration-500">
                    <item.icon className="w-6 h-6" />
                  </div>
                  <Label className="text-slate-900">{item.label}</Label>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Speed */}
      <Section
        number="02"
        title="Performance"
        borderTop
        variant="gray"
        illustration={<SpeedPerformance className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Geschwindigkeit ist <br />
              <span className="text-slate-200">
                kein Extra. Sie ist Standard.
              </span>
            </H3>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
            <div className="md:col-span-7 space-y-8">
              <Reveal delay={0.2}>
                <LeadText className="text-xl text-slate-400">
                  Viele Websites sind langsam, weil sie zusammengeklickt sind.
                  Meine sind schnell, weil sie{" "}
                  <span className="text-slate-900">von Grund auf</span>{" "}
                  entwickelt wurden.
                </LeadText>
              </Reveal>
              <Reveal delay={0.4}>
                <IconList className="space-y-4">
                  {[
                    "Seiten laden ohne Verzögerung",
                    "Optimiert für Suchmaschinen (SEO)",
                    "Bessere Nutzererfahrung",
                    "Höhere Conversion-Rates",
                  ].map((item, i) => (
                    <IconListItem key={i} bullet>
                      <LeadText className="text-lg md:text-xl">{item}</LeadText>
                    </IconListItem>
                  ))}
                </IconList>
              </Reveal>
            </div>
            <div className="md:col-span-5">
              <Reveal delay={0.6}>
                <Card
                  variant="white"
                  padding="normal"
                  className="text-center group"
                >
                  <div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
                    90+
                  </div>
                  <Label className="mt-4">Pagespeed Score</Label>
                </Card>
              </Reveal>
            </div>
          </div>
        </div>
      </Section>

      {/* No Maintenance */}
      <Section
        number="03"
        title="Technik"
        borderTop
        illustration={<SolidFoundation className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Keine Plugins. <br />
              <span className="text-slate-200">Keine Abhängigkeiten.</span>
            </H3>
          </Reveal>
          <Reveal delay={0.2}>
            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
              Ich nutze keine Baukästen, die sich selbst zerstören. Ihre Website
              besteht aus <span className="text-slate-900">sauberem Code</span>,
              der Ihnen gehört.
            </LeadText>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
              <Card variant="white" padding="normal" className="group">
                <div className="space-y-4">
                  <Label className="text-slate-900 mb-2">Code Qualität</Label>
                  <H4 className="text-2xl">Langlebigkeit</H4>
                  <BodyText>
                    Modernste Web-Technologien für maximale Performance und
                    Wartbarkeit.
                  </BodyText>
                </div>
              </Card>
              <Card variant="white" padding="normal" className="group">
                <div className="space-y-4">
                  <Label className="text-slate-900 mb-2">Sicherheit</Label>
                  <H4 className="text-2xl">Resilienz</H4>
                  <BodyText>
                    Minimale Angriffsfläche durch Verzicht auf unnötige
                    Drittanbieter-Software.
                  </BodyText>
                </div>
              </Card>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Content/Tech Separation */}
      <Section
        number="04"
        title="Inhalte"
        borderTop
        variant="gray"
        illustration={<LayerSeparation className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Inhalte pflegen <br />
              <span className="text-slate-200">ohne Angst.</span>
            </H3>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
            <div className="md:col-span-7">
              <Reveal delay={0.2}>
                <LeadText className="text-xl md:text-2xl text-slate-400">
                  Sie können Texte und Bilder selbst anpassen, ohne das Design
                  oder die Technik zu gefährden. Ein{" "}
                  <span className="text-slate-900">intuitives System</span>{" "}
                  sorgt dafür, dass alles an seinem Platz bleibt.
                </LeadText>
              </Reveal>
            </div>
            <div className="md:col-span-5">
              <Reveal delay={0.4}>
                <Card variant="white" padding="normal" className="space-y-8">
                  <div className="space-y-4">
                    <Label>Ihre Freiheit</Label>
                    <div className="flex items-center gap-3 text-xl font-bold text-slate-900">
                      <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center">
                        <Check className="w-3 h-3 text-white" />
                      </div>
                      Inhalte flexibel verwalten
                    </div>
                  </div>
                  <div className="space-y-4 opacity-30">
                    <Label>Mein Schutz</Label>
                    <div className="space-y-2">
                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
                        Design-Chaos
                      </div>
                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
                        Technische Fehler
                      </div>
                    </div>
                  </div>
                </Card>
              </Reveal>
            </div>
          </div>
        </div>
      </Section>

      {/* Simple Changes */}
      <Section
        number="05"
        title="Service"
        borderTop
        illustration={<DirectService className="w-24 h-24" />}
      >
        <div className="space-y-12">
          <Reveal>
            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
              Änderungen sind <br />
              <span className="text-slate-200">Teil des Konzepts.</span>
            </H3>
          </Reveal>
          <Reveal delay={0.2}>
            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
              Ihr Business entwickelt sich weiter, Ihre Website auch. <br />
              Keine komplizierten Prozesse, sondern{" "}
              <span className="text-slate-900">direkte Umsetzung</span> Ihrer
              Ideen.
            </LeadText>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
              <Card
                variant="white"
                padding="normal"
                className="group hover:border-slate-900"
              >
                <ConceptCommunication className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
                <div className="space-y-2">
                  <H4 className="text-2xl">Direkter Draht</H4>
                  <BodyText>
                    Sie sprechen direkt mit dem Entwickler. Keine Stille Post.
                  </BodyText>
                </div>
              </Card>
              <Card
                variant="white"
                padding="normal"
                className="group hover:border-slate-900"
              >
                <ConceptPrototyping className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
                <div className="space-y-2">
                  <H4 className="text-2xl">Agile Anpassung</H4>
                  <BodyText>
                    Schnelle Iterationen statt langer Wartezeiten.
                  </BodyText>
                </div>
              </Card>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Result */}
      <Section
        number="06"
        title="Ergebnis"
        borderTop
        variant="gray"
        illustration={<TaskDone className="w-24 h-24" />}
      >
        <div className="space-y-16">
          <Reveal>
            <H3 className="text-4xl md:text-6xl tracking-tighter">
              Eine Website, die <br />
              <span className="text-slate-200">einfach läuft.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {[
              {
                title: "Kein Overhead",
                desc: "Fokus auf das, was Ihre Kunden wirklich brauchen.",
              },
              {
                title: "Volle Kontrolle",
                desc: "Der Code gehört Ihnen, ohne Vendor Lock-in.",
              },
              {
                title: "Echte Performance",
                desc: "Messbare Geschwindigkeit für bessere Ergebnisse.",
              },
            ].map((item, i) => (
              <Reveal key={i} delay={i * 0.1}>
                <div className="space-y-4 group">
                  <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
                  <H4 className="text-2xl">{item.title}</H4>
                  <LeadText className="text-lg text-slate-400">
                    {item.desc}
                  </LeadText>
                </div>
              </Reveal>
            ))}
          </div>

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