"use client";

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

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

      {/* Section 02: Ihr Vorteil */}
      <Section number="02" title="Ihr Vorteil" borderTop>
        <div className="space-y-16 md:space-y-32 relative z-10">
          <Reveal>
            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
              Sie kümmern sich um Ihr Geschäft.{" "}
              <span className="text-slate-400">
                Ich um Ihre <Marker delay={0.3}>Website.</Marker>
              </span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
            {[
              {
                title: "Ein Ansprechpartner",
                text: "Direkte Kommunikation. Keine Agentur, keine Projektmanager, kein Stille-Post-Effekt.",
              },
              {
                title: "Fixpreis",
                text: "Keine versteckten Kosten, keine Stundenzettel. Sie wissen exakt, was es kostet.",
              },
              {
                title: "Schnelle Ergebnisse",
                text: "Kein monatelanges Warten. Erste Entwürfe innerhalb weniger Tage.",
              },
              {
                title: "Null Arbeit für Sie",
                text: "Keine CMS-Einarbeitung. Änderungen oder Updates? Eine kurze E-Mail genügt.",
              },
            ].map((item, i) => (
              <Reveal key={i} delay={0.1 * i}>
                <div className="space-y-4">
                  <div className="h-px w-full bg-slate-100 mb-6" />
                  <Label className="text-slate-900 text-lg md:text-xl font-medium tracking-tight">
                    {item.title}
                  </Label>
                  <BodyText className="text-slate-500 text-base md:text-lg">
                    {item.text}
                  </BodyText>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>

      {/* Section 03: Der Unterschied */}
      <Section number="03" title="Der Unterschied" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
              Warum nicht einfach{" "}
              <span className="text-slate-400">eine Agentur?</span>
            </H3>
          </Reveal>

          <div className="space-y-12 md:space-y-0">
            {[
              {
                label: "Agentur",
                text: "Projektmanager, Designer, Entwickler — Sie erklären alles drei Mal. Stundenabrechnungen, unklare Endkosten.",
              },
              {
                label: "Baukasten (Wix, etc.)",
                text: "Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt, wenn etwas nicht funktioniert.",
              },
              {
                label: "Bei mir",
                text: "Ein Ansprechpartner. Fixpreis. Ich baue, Sie lehnen sich zurück. Sie brauchen eine Änderung? Kurze Nachricht genügt.",
                highlight: true,
              },
            ].map((item, i) => (
              <Reveal key={i} delay={0.1 * i}>
                <div
                  className={`grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-8 py-8 md:py-16 border-t ${item.highlight ? "border-slate-900" : "border-slate-100"}`}
                >
                  <div className="md:col-span-1">
                    <Label
                      className={`text-lg md:text-xl ${item.highlight ? "text-slate-900 font-bold" : "text-slate-400"}`}
                    >
                      {item.label}
                    </Label>
                  </div>
                  <div className="md:col-span-3">
                    <LeadText
                      className={`text-xl md:text-3xl leading-snug ${item.highlight ? "text-slate-900" : "text-slate-500"}`}
                    >
                      {item.text}
                    </LeadText>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>

      {/* Section 04: Zielgruppe */}
      <Section number="04" title="Für wen" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
              Fokus auf das <span className="text-slate-400">Wesentliche.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
            <Reveal>
              <div className="space-y-8">
                <H3 className="text-2xl md:text-4xl">
                  Unternehmer & Geschäftsführer
                </H3>
                <LeadText className="text-slate-500">
                  Sie brauchen eine professionelle Website, die Ihr Unternehmen
                  repräsentiert — ohne sich selbst mit Technik beschäftigen zu
                  müssen. Ich übernehme alles.
                </LeadText>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <div className="space-y-8">
                <H3 className="text-2xl md:text-4xl">
                  Selbstständige & kleine Teams
                </H3>
                <LeadText className="text-slate-500">
                  Sie wollen online sichtbar sein, aber keine Zeit in eine
                  Website stecken. Ich liefere eine fertige Lösung, damit Sie
                  sich auf Ihre Kunden konzentrieren können.
                </LeadText>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 05: Leistungen */}
      <Section number="05" title="Leistungen" borderTop>
        <div className="space-y-0">
          {[
            {
              title: "Websites",
              text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Ohne Overhead.",
              href: "/websites",
            },
            {
              title: "Sorglos-Paket",
              text: "Änderungen, Wartung, Sicherheit — alles inklusive. Sie sagen Bescheid, ich erledige das.",
              href: "/contact",
            },
            {
              title: "Web-Anwendungen",
              text: "Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
              href: "/showcase",
            },
          ].map((service, i) => (
            <Reveal key={i} delay={0.1 * i}>
              <a href={service.href} className="group block">
                <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 py-12 md:py-20 border-b border-slate-100 transition-colors hover:border-slate-300">
                  <div className="space-y-4 max-w-2xl">
                    <H3 className="text-3xl md:text-5xl group-hover:translate-x-2 transition-transform duration-500">
                      {service.title}
                    </H3>
                    <LeadText className="text-slate-400 group-hover:text-slate-600 transition-colors">
                      {service.text}
                    </LeadText>
                  </div>
                  <div className="text-slate-300 group-hover:text-slate-900 transition-colors pb-1">
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <line x1="5" y1="12" x2="19" y2="12"></line>
                      <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                  </div>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Section 06: Blog / Insights */}
      <Section number="06" title="Einblicke" borderTop>
        <div className="space-y-16 md:space-y-32">
          <Reveal>
            <H3 className="text-3xl md:text-6xl lg:text-8xl leading-none tracking-tighter">
              Wissen statt <span className="text-slate-400">Werbung.</span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
            <Reveal>
              <div className="space-y-8">
                <Label className="text-slate-400">Aktueller Artikel</Label>
                <H3 className="text-2xl md:text-4xl leading-tight">
                  Warum Websites nach Updates oft brechen – und wie man das
                  verhindert.
                </H3>
                <Button
                  href="/blog/why-websites-break-after-updates"
                  variant="outline"
                >
                  Artikel lesen
                </Button>
              </div>
            </Reveal>
            <Reveal delay={0.2}>
              <div className="space-y-8 border-l border-slate-100 pl-8 md:pl-12 flex flex-col justify-end">
                <LeadText className="text-slate-500">
                  Ich teile meine Gedanken zu digitaler Architektur, Fixpreisen
                  und warum weniger oft mehr ist.
                </LeadText>
                <a
                  href="/blog"
                  className="text-slate-900 font-bold hover:underline underline-offset-4"
                >
                  Alle Artikel ansehen →
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 07: Contact */}
      <Section
        number="07"
        title="Kontakt"
        borderTop
        effects={<GradientMesh variant="metallic" className="opacity-60" />}
      >
        <div className="relative py-12 md:py-32" id="contact">
          <Reveal>
            <div className="space-y-12 md:space-y-24 relative z-10">
              <H1 className="text-5xl md:text-8xl lg:text-9xl leading-none tracking-tighter">
                Bereit für den Start? <br />
                <span className="text-slate-400">
                  <GlitchText delay={0.5} duration={1}>
                    Sagen Sie Hallo.
                  </GlitchText>
                </span>
              </H1>

              <div className="flex flex-col md:flex-row gap-12 md:gap-24 items-start">
                <div className="space-y-8 flex-1">
                  <LeadText className="text-2xl md:text-4xl text-slate-500 leading-snug">
                    Schreiben Sie mir kurz, was Sie vorhaben. Ich melde mich
                    innerhalb von 24 Stunden bei Ihnen.
                  </LeadText>
                  <div className="pt-4">
                    <Button
                      href="/contact"
                      size="large"
                      className="text-lg px-8 py-4"
                    >
                      Jetzt Nachricht schreiben
                    </Button>
                  </div>
                </div>

                <div className="w-full md:w-80 space-y-4 pt-4 md:pt-0">
                  <div className="flex items-center gap-3">
                    <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
                    <Label className="text-slate-900 text-sm">
                      Verfügbarkeit
                    </Label>
                  </div>
                  <BodyText className="text-slate-500">
                    Aktuell nehme ich Projekte für{" "}
                    <span className="font-bold text-slate-900">
                      <Availability />
                    </span>{" "}
                    an.
                  </BodyText>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}