import {
  ComparisonRow,
  ConceptAutomation,
  ConceptCode,
  ConceptCommunication,
  ConceptPrice,
  ConceptPrototyping,
  ConceptSystem,
  ConceptWebsite,
  DifferenceIllustration,
  HeroArchitecture,
  HeroMainIllustration,
} from "../src/components/Landing";
import { Reveal } from "../src/components/Reveal";
import { Marker } from "../src/components/Marker";
import { Section } from "../src/components/Section";
import {
  H1,
  H3,
  LeadText,
  BodyText,
  MonoLabel,
  Label,
} from "../src/components/Typography";
import { BackgroundGrid, Card, Container } from "../src/components/Layout";
import { Button } from "../src/components/Button";

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

      {/* Hero Section */}
      <section className="relative min-h-[80vh] flex items-center pt-24 md:pt-0">
        <Container variant="narrow" className="relative">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24 items-center">
            {/* Left Column */}
            <div className="md:col-span-6 relative z-10">
              <Reveal>
                <div className="space-y-8">
                  <div className="flex items-center gap-4">
                    <div className="w-8 h-px bg-slate-900"></div>
                    <MonoLabel className="text-slate-900">
                      Digital Architect
                    </MonoLabel>
                  </div>
                  <H1 className="text-6xl md:text-8xl">
                    Websites <br />
                    <span className="text-slate-200">ohne Overhead.</span>
                  </H1>
                  <div className="pt-4">
                    <Button href="#contact" variant="outline">
                      Projekt anfragen
                    </Button>
                  </div>
                </div>
              </Reveal>
            </div>

            {/* Right Column */}
            <div className="md:col-span-6 relative h-[400px] md:h-[600px] flex items-center justify-center">
              <div className="absolute inset-0 -z-10 opacity-[0.03] pointer-events-none flex items-center justify-center scale-150">
                <HeroArchitecture className="w-full h-full" />
              </div>

              <Reveal
                delay={0.2}
                className="w-full h-full flex items-center justify-center"
              >
                <div className="relative w-full h-full flex items-center justify-center pointer-events-none">
                  <HeroMainIllustration className="w-full h-full scale-110 md:scale-125 origin-center" />
                </div>
              </Reveal>
            </div>
          </div>
        </Container>
      </section>

      {/* Section 02: The Promise */}
      <Section number="02" title="Das Versprechen" borderTop>
        <div className="space-y-16 relative">
          <Reveal>
            <H3 className="max-w-3xl">
              Schluss mit aufgeblähten Prozessen. <br />
              <span className="text-slate-200">
                Ich reduziere auf das Wesentliche.
              </span>
            </H3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-16 relative z-10">
            <Reveal delay={0.1}>
              <div className="space-y-8">
                <div className="flex items-center gap-4">
                  <Label className="text-slate-900">Was ich biete</Label>
                </div>
                <ul className="space-y-6">
                  {[
                    {
                      text: "Direkte Kommunikation ohne Umwege",
                      icon: <ConceptCommunication className="w-12 h-12" />,
                    },
                    {
                      text: "Schnelle Prototypen statt langer Konzepte",
                      icon: <ConceptPrototyping className="w-12 h-12" />,
                    },
                    {
                      text: "Sauberer Code, der auch morgen noch läuft",
                      icon: <ConceptCode className="w-12 h-12" />,
                    },
                    {
                      text: "Fixpreise für volle Budgetsicherheit",
                      icon: <ConceptPrice className="w-12 h-12" />,
                    },
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-6 group">
                      <div className="shrink-0 transition-transform duration-500 group-hover:scale-110">
                        {item.icon}
                      </div>
                      <LeadText className="text-xl">{item.text}</LeadText>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>

            <Reveal delay={0.2}>
              <div className="space-y-8 opacity-40 hover:opacity-100 transition-opacity duration-700">
                <div className="flex items-center gap-4">
                  <Label>Was ich nicht mache</Label>
                </div>
                <ul className="space-y-4">
                  {[
                    "Endlose Workshops ohne Ergebnis",
                    "PowerPoint-Schlachten",
                    "Outsourcing an Billig-Anbieter",
                    "Wartungsverträge mit versteckten Kosten",
                  ].map((item, i) => (
                    <li
                      key={i}
                      className="flex items-start gap-3 decoration-slate-200 line-through"
                    >
                      <span className="w-1.5 h-1.5 bg-slate-200 rounded-full mt-2.5 shrink-0"></span>
                      <LeadText className="text-slate-400 text-lg">
                        {item}
                      </LeadText>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 03: The Difference */}
      <Section number="03" title="Der Unterschied" variant="white" borderTop>
        <div className="space-y-16 relative">
          <div className="flex flex-col md:flex-row gap-12 items-center">
            <Reveal className="flex-1">
              <LeadText className="text-2xl md:text-3xl leading-tight max-w-2xl relative z-10 text-slate-400">
                Ich arbeite nicht gegen die Zeit, sondern{" "}
                <span className="text-slate-900">für das Ergebnis.</span> Mein
                Fokus liegt auf der Umsetzung, nicht auf der Verwaltung von
                Prozessen.
              </LeadText>
            </Reveal>
            <Reveal delay={0.2} className="w-full md:w-72 shrink-0">
              <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100">
                <DifferenceIllustration className="w-full h-auto grayscale opacity-50" />
              </div>
            </Reveal>
          </div>

          <div className="grid grid-cols-1 gap-8 relative z-20">
            <ComparisonRow
              negativeLabel="Klassisch"
              negativeText="Lange Planungsphasen und abstrakte Konzepte."
              positiveLabel="Mein Weg"
              positiveText="Schnelle Prototypen. Sie sehen Fortschritt in Tagen."
              delay={0.1}
            />
            <ComparisonRow
              negativeLabel="Klassisch"
              negativeText="Komplexe Preisstrukturen und versteckte Kosten."
              positiveLabel="Mein Weg"
              positiveText="Klare Fixpreise. Volle Kostentransparenz."
              reverse
              delay={0.2}
            />
          </div>
        </div>
      </Section>

      {/* Section 04: Target Group */}
      <Section number="04" title="Zielgruppe" borderTop>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
          <Reveal>
            <Card variant="dark" padding="normal" className="group">
              <div className="space-y-6 relative overflow-hidden">
                <div className="w-16 h-16 bg-white/5 rounded-xl flex items-center justify-center border border-white/10">
                  <ConceptPrice className="w-8 h-8" />
                </div>
                <H3 className="text-white text-3xl">
                  Unternehmer & <br />
                  Geschäftsführer
                </H3>
                <LeadText className="text-slate-400 text-lg">
                  "Ich brauche eine Lösung, die funktioniert. Ich habe keine
                  Zeit für technische Details."
                </LeadText>
              </div>
              <div className="pt-8 border-t border-white/5 mt-8">
                <Label className="group-hover:text-white transition-colors">
                  Perfekt für Sie
                </Label>
              </div>
            </Card>
          </Reveal>
          <Reveal delay={0.2}>
            <Card variant="white" padding="normal" className="group">
              <div className="space-y-6 relative overflow-hidden">
                <div className="w-16 h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-center">
                  <ConceptWebsite className="w-8 h-8" />
                </div>
                <H3 className="text-3xl">
                  Marketing & <br />
                  Vertrieb
                </H3>
                <LeadText className="text-slate-400 text-lg">
                  "Wir brauchen Landingpages und Tools, um unsere Ziele zu
                  erreichen. Schnell und zuverlässig."
                </LeadText>
              </div>
              <div className="pt-8 border-t border-slate-50 mt-8">
                <Label className="group-hover:text-slate-900 transition-colors">
                  Perfekt für Sie
                </Label>
              </div>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Section 05: Services */}
      <Section number="05" title="Leistungen" variant="gray" borderTop>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
          <Reveal delay={0.1}>
            <Card variant="white" padding="small" className="group">
              <div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
                <ConceptWebsite className="w-8 h-8" />
              </div>
              <div className="space-y-4">
                <H3 className="text-2xl">Websites</H3>
                <BodyText>
                  High-Performance Websites. Maßgeschneiderte Architektur statt
                  Baukasten.
                </BodyText>
                <div className="pt-4">
                  <a
                    href="/websites"
                    className="text-[10px] font-bold uppercase tracking-[0.4em] text-slate-900 border-b border-slate-100 pb-1 hover:border-slate-900 transition-all"
                  >
                    Details
                  </a>
                </div>
              </div>
            </Card>
          </Reveal>

          <Reveal delay={0.3}>
            <Card
              variant="white"
              padding="small"
              className="group mt-8 md:mt-0"
            >
              <div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
                <ConceptSystem className="w-8 h-8" />
              </div>
              <div className="space-y-4">
                <H3 className="text-2xl">Systeme</H3>
                <BodyText>
                  Web-Applikationen, Portale, interne Tools. Wenn Standard an
                  Grenzen stößt.
                </BodyText>
              </div>
            </Card>
          </Reveal>

          <Reveal delay={0.5}>
            <Card variant="white" padding="small" className="group">
              <div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
                <ConceptAutomation className="w-8 h-8" />
              </div>
              <div className="space-y-4">
                <H3 className="text-2xl">Automatisierung</H3>
                <BodyText>
                  Verbindung von Tools, automatische Prozesse,
                  Daten-Synchronisation.
                </BodyText>
              </div>
            </Card>
          </Reveal>
        </div>
      </Section>

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

              <div className="flex flex-col md:flex-row gap-16 items-start relative z-10">
                <div className="space-y-8 flex-1">
                  <LeadText className="text-2xl md:text-3xl text-slate-400">
                    Schreiben Sie mir kurz, worum es geht. Ich melde mich{" "}
                    <span className="text-slate-900">zeitnah</span> bei Ihnen.
                  </LeadText>
                  <div className="pt-4">
                    <a
                      href="/contact"
                      className="inline-block text-3xl md:text-5xl font-bold text-slate-900 hover:text-slate-400 transition-all duration-700 border-b-2 border-slate-900 hover:border-slate-200 pb-2"
                    >
                      Projekt anfragen
                    </a>
                  </div>
                </div>

                <div className="w-full md:w-72 space-y-6 p-6 bg-slate-50 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-base leading-snug">
                    Aktuell nehme ich Projekte für{" "}
                    <span className="font-bold text-slate-900">Q2 2026</span>{" "}
                    an.
                  </BodyText>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}