"use client";

import {
  ComparisonRow,
  ConceptCode,
  ConceptCommunication,
  ConceptPrice,
  ConceptPrototyping,
  ConceptWebsite,
} from "@/src/components/Landing";
import { Reveal } from "@/src/components/Reveal";
import { Section } from "@/src/components/Section";
import {
  H1,
  H3,
  LeadText,
  BodyText,
  MonoLabel,
  Label,
} from "@/src/components/Typography";
import { Card, Container } from "@/src/components/Layout";
import { Button } from "@/src/components/Button";
import { GradientMesh, CodeSnippet } from "@/src/components/Effects";
import { IconList, IconListItem } from "@/src/components/IconList";
import { HeroSection } from "@/src/components/HeroSection";
import { GlitchText } from "@/src/components/GlitchText";
import { Marker } from "@/src/components/Marker";
import { PenCircle } from "@/src/components/PenCircle";
import { Availability } from "@/src/components/Availability";

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

      {/* Rest of page on white */}

      {/* Section 02: Was Sie bekommen */}
      <Section
        number="02"
        title="Ihr Vorteil"
        borderTop
        effects={<GradientMesh variant="metallic" className="opacity-70" />}
      >
        <div className="space-y-10 md:space-y-16 relative">
          <Reveal>
            <H3 className="max-w-3xl">
              Sie kümmern sich um Ihr Geschäft. <br />
              <Marker delay={0.3}>Ich um Ihre Website.</Marker>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 relative z-10">
            {[
              {
                icon: <ConceptCommunication className="w-8 h-8" />,
                title: "Ein Ansprechpartner",
                text: "Sie sprechen direkt mit dem, der Ihre Website baut. Keine Agentur, keine Umwege, kein Stille-Post-Effekt.",
              },
              {
                icon: <ConceptPrototyping className="w-8 h-8" />,
                title: "Schnell sichtbare Ergebnisse",
                text: "Kein monatelanges Warten. Sie sehen erste Entwürfe innerhalb weniger Tage — nicht erst nach Wochen.",
              },
              {
                icon: <ConceptPrice className="w-8 h-8" />,
                title: "Fixpreis ohne Überraschungen",
                text: "Sie wissen vorher, was es kostet. Kein Stundenzettel, keine Nachforderungen, keine bösen Überraschungen.",
              },
              {
                icon: <ConceptCode className="w-8 h-8" />,
                title: "Null Arbeit für Sie",
                text: "Keine Einarbeitung in ein CMS, keine Schulungen. Änderungen? Sagen Sie Bescheid — ich erledige das.",
              },
            ].map((item, i) => (
              <Reveal key={i} delay={0.1 + i * 0.1}>
                <Card
                  variant="glass"
                  padding="normal"
                  techBorder
                  className="group"
                >
                  <div className="space-y-4 relative z-10">
                    <div className="w-12 h-12 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                      {item.icon}
                    </div>
                    <Label className="text-slate-900">{item.title}</Label>
                    <BodyText className="text-slate-500">{item.text}</BodyText>
                  </div>
                </Card>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>

      {/* Section 03: Der Unterschied */}
      <Section number="03" title="Der Unterschied" variant="white" borderTop>
        <div className="space-y-10 md:space-y-16 relative">
          <Reveal>
            <H3 className="max-w-3xl">
              Warum nicht einfach <br />
              eine <Marker delay={0.4}>Agentur?</Marker>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 gap-8 relative z-20">
            <ComparisonRow
              negativeLabel="Agentur"
              negativeText="Projektmanager, Designer, Entwickler — Sie erklären Ihr Anliegen drei Mal."
              positiveLabel="Bei mir"
              positiveText={
                <>
                  <PenCircle delay={0.5}>Ein</PenCircle> Ansprechpartner für
                  alles. Von der ersten Idee bis zur fertigen Website.
                </>
              }
              delay={0.1}
            />
            <ComparisonRow
              negativeLabel="Agentur"
              negativeText="Stundenabrechnungen, Nachträge, unklare Endkosten."
              positiveLabel="Bei mir"
              positiveText={
                <>
                  <PenCircle delay={0.5}>Fixpreis.</PenCircle> Sie wissen vorher
                  exakt, was es kostet. Punkt.
                </>
              }
              reverse
              delay={0.2}
            />
            <ComparisonRow
              negativeLabel="Baukasten"
              negativeText="Sie bauen selbst, kämpfen mit Templates und sind auf sich allein gestellt."
              positiveLabel="Bei mir"
              positiveText={
                <>
                  Ich baue, Sie lehnen sich zurück. Brauchen Sie eine Änderung?{" "}
                  <PenCircle delay={0.5}>Kurze Nachricht</PenCircle> genügt.
                </>
              }
              delay={0.3}
            />
          </div>
        </div>
      </Section>

      {/* Section 04: Für wen */}
      <Section number="04" title="Für wen" borderTop>
        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 lg:gap-10 relative z-10">
          <Reveal>
            <Card variant="glass" padding="normal" techBorder className="group">
              <div className="space-y-4 md:space-y-6 relative overflow-hidden">
                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
                  <ConceptPrice className="w-6 h-6 md:w-8 md:h-8" />
                </div>
                <H3 className="text-xl md:text-3xl">
                  Unternehmer & <br />
                  Geschäftsführer
                </H3>
                <LeadText className="text-slate-400 text-base md:text-lg">
                  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>
              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
                <Label className="group-hover:text-slate-900 transition-colors">
                  Perfekt für Sie
                </Label>
              </div>
            </Card>
          </Reveal>
          <Reveal delay={0.2}>
            <Card variant="glass" padding="normal" techBorder className="group">
              <div className="space-y-6 relative overflow-hidden">
                <div className="w-12 h-12 md:w-16 md:h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
                  <ConceptWebsite className="w-6 h-6 md:w-8 md:h-8" />
                </div>
                <H3 className="text-xl md:text-3xl">
                  Selbstständige & <br />
                  kleine Teams
                </H3>
                <LeadText className="text-slate-400 text-base md:text-lg">
                  Sie wollen online sichtbar sein, aber keine Zeit in eine
                  Website stecken. Ich liefere Ihnen eine fertige Lösung — Sie
                  konzentrieren sich auf Ihre Kunden.
                </LeadText>
              </div>
              <div className="pt-6 md:pt-8 border-t border-slate-50 mt-6 md:mt-8">
                <Label className="group-hover:text-slate-900 transition-colors">
                  Perfekt für Sie
                </Label>
              </div>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Section 05: Leistungen */}
      <Section number="05" title="Leistungen" variant="gray" borderTop>
        <div className="space-y-0 relative z-20">
          {[
            {
              num: "01",
              binary: "00000001",
              title: "Websites",
              text: "Professionelle, schnelle Websites — individuell für Ihr Unternehmen gestaltet. Von der Firmenwebsite bis zur Landingpage.",
              tags: ["Firmenwebsite", "Landingpage", "Responsive", "SEO"],
              href: "/websites",
            },
            {
              num: "02",
              binary: "00000010",
              title: "Sorglos-Paket",
              text: "Änderungen, Wartung, Sicherheit, Updates — alles inklusive. Sie sagen Bescheid, ich erledige das. Ein Jahr, ein Paket, null Aufwand.",
              tags: ["Wartung", "Änderungen", "Sicherheit", "Updates"],
              href: "/contact",
            },
            {
              num: "03",
              binary: "00000011",
              title: "Web-Anwendungen",
              text: "Wenn eine einfache Website nicht reicht: Kundenportale, interne Tools oder individuelle Lösungen für Ihr Business.",
              tags: ["Portale", "Dashboards", "Automatisierung", "Tools"],
              href: "/contact",
            },
          ].map((service, i) => (
            <Reveal key={i} delay={0.1 + i * 0.15}>
              <div className="group py-8 md:py-12 lg:py-16 border-b border-slate-100 last:border-b-0 cursor-pointer transition-all duration-500">
                <div className="flex flex-col md:flex-row md:items-start gap-6 md:gap-10 lg:gap-16">
                  {/* Number + Binary */}
                  <div className="shrink-0 flex md:block items-baseline gap-4">
                    <span className="text-4xl md:text-6xl font-black text-slate-100 group-hover:text-slate-200 transition-colors duration-500 tracking-tighter block leading-none">
                      {service.num}
                    </span>
                    <span
                      className="text-[8px] font-mono text-slate-200 tracking-[0.3em] mt-2 block select-none group-hover:text-blue-300 transition-colors duration-700 leading-none"
                      aria-hidden="true"
                    >
                      {service.binary}
                    </span>
                  </div>

                  {/* Content */}
                  <div className="flex-1 space-y-4 md:space-y-6">
                    <H3 className="text-xl md:text-4xl group-hover:translate-x-2 transition-transform duration-500">
                      <GlitchText
                        trigger="inView"
                        delay={0.2 + i * 0.15}
                        duration={0.6}
                      >
                        {service.title}
                      </GlitchText>
                    </H3>
                    <BodyText className="text-slate-400 text-sm md:text-base max-w-xl group-hover:text-slate-500 transition-colors duration-500">
                      {service.text}
                    </BodyText>
                    {/* Tags */}
                    <div className="flex flex-wrap gap-2">
                      {service.tags.map((tag, j) => (
                        <span
                          key={j}
                          className="px-3 py-1 text-[8px] md:text-[9px] font-mono uppercase tracking-widest text-slate-400 border border-slate-100 rounded-full bg-white/50 group-hover:border-slate-200 group-hover:text-slate-500 transition-all duration-500"
                        >
                          {tag}
                        </span>
                      ))}
                    </div>
                  </div>

                  {/* Arrow */}
                  <div className="md:self-center shrink-0 pt-4 md:pt-0">
                    <Button
                      href={service.href}
                      variant="ghost"
                      size="normal"
                      showArrow
                      className="w-full md:w-auto"
                    >
                      Details
                    </Button>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Section 06: Contact */}
      <Section number="06" title="Kontakt" borderTop>
        <div className="relative py-4 md:py-12" id="contact">
          <Reveal>
            <div className="space-y-8 md:space-y-12 lg:space-y-16">
              <H1 className="text-4xl md:text-6xl lg:text-8xl">
                Klingt gut? <br />
                <span className="text-slate-400">Lassen Sie uns reden.</span>
              </H1>

              <div className="flex flex-col md:flex-row gap-6 md:gap-10 lg:gap-16 items-start relative z-10">
                <div className="space-y-4 md:space-y-8 flex-1">
                  <LeadText className="text-lg md:text-3xl text-slate-400">
                    Beschreiben Sie kurz, was Sie brauchen. Ich melde mich{" "}
                    <span className="text-slate-900 border-b-2 border-slate-900/10">
                      <Marker>innerhalb von 24 Stunden</Marker>
                    </span>{" "}
                    mit einem konkreten Vorschlag.
                  </LeadText>
                  <div className="pt-2 md:pt-4">
                    <Button
                      href="/contact"
                      size="large"
                      className="w-full md:w-auto"
                    >
                      Kostenlos anfragen
                    </Button>
                  </div>
                </div>

                <div className="w-full md:w-72 space-y-4 md:space-y-6 p-6 glass rounded-2xl border border-slate-100">
                  <div className="flex items-center gap-3">
                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    <Label className="text-slate-900">Verfügbarkeit</Label>
                  </div>
                  <BodyText className="text-sm md:text-base leading-snug">
                    Aktuell nehme ich Projekte für{" "}
                    <span className="font-bold text-slate-900">
                      <Availability />
                    </span>{" "}
                    an.
                  </BodyText>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}