import { ArrowRight } from 'lucide-react';
import {
  CirclePattern,
  ComparisonRow,
  ConceptAutomation,
  ConceptCode,
  ConceptCommunication,
  ConceptMessy,
  ConceptPrice,
  ConceptPrototyping,
  ConceptSystem,
  ConceptWebsite,
  ConnectorBranch,
  ConnectorEnd,
  ConnectorSplit,
  ConnectorStart,
  ContactIllustration,
  DifferenceIllustration,
  FlowLines,
  GridLines,
  HeroArchitecture,
  HeroMainIllustration,
  ServicesFlow
} from '../src/components/Landing';
import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section';

export default function LandingPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden relative">
      
      {/* Subtle Grid Pattern Overlay */}
      <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.015]" style={{
        backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
        backgroundSize: '80px 80px'
      }} />

      {/* Hero Section - Split Layout */}
      <section className="relative min-h-[80vh] flex items-center pt-12 md:pt-0 pb-24 md:pb-0">
        <div className="narrow-container w-full relative">
           {/* Connector Start for Hero */}
           <div className="absolute left-[2.5rem] top-32 bottom-0 w-24 hidden md:block -z-10 pointer-events-none">
                <ConnectorStart className="h-full" />
           </div>

          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-center min-h-[600px]">
            {/* Left Column: Brand & Number */}
            <div className="md:col-span-4 relative z-10 bg-white/50 backdrop-blur-[2px]">
              <Reveal>
                <div className="space-y-8">
                  <div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em]">
                    <span className="w-6 h-px bg-slate-900"></span>
                    Digital Architect
                  </div>
                  <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
                    Websites <br />
                    <span className="text-slate-300">ohne <br />Overhead.</span>
                  </h1>
                  <div className="pt-8">
                    <a
                      href="#contact"
                      className="inline-flex items-center gap-4 px-8 py-4 border border-slate-200 bg-white text-slate-900 rounded-full font-bold text-sm uppercase tracking-widest hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 group"
                    >
                      Projekt anfragen
                      <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                    </a>
                  </div>
                </div>
              </Reveal>
            </div>

            {/* Right Column: Visual & Context */}
            <div className="md:col-span-8 relative h-[600px] md:h-[900px] flex items-center justify-center">
               {/* Hero Architecture Illustration - Background Layer */}
              <div className="absolute inset-0 -z-10 opacity-5 pointer-events-none flex items-center justify-center scale-[2]">
                 <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-150 md:scale-[1.6] translate-x-12 md:translate-x-16 origin-center" />
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Section 02: The Promise */}
      <Section
        number="02"
        title="Das Versprechen"
        borderTop
        connector={<ConnectorBranch className="h-full" />}
      >
        <div className="space-y-16 relative">
           <div className="absolute right-0 top-0 w-64 h-64 -z-10 opacity-30 pointer-events-none">
                <GridLines />
            </div>

          <Reveal>
            <h3 className="text-3xl md:text-5xl font-bold text-slate-900 leading-tight tracking-tight max-w-3xl">
              Schluss mit aufgeblähten Prozessen. <br />
              <span className="text-slate-300">Ich reduziere auf das Wesentliche.</span>
            </h3>
          </Reveal>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 relative z-10">
            <Reveal delay={0.1}>
              <div className="space-y-8">
                <div className="flex items-center gap-4 text-slate-900 font-bold text-lg">
                  <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100">
                    <ConceptCode className="w-8 h-8" />
                  </div>
                  Was ich biete
                </div>
                <ul className="space-y-8">
                  {[
                    { text: 'Direkte Kommunikation ohne Account Manager', icon: <ConceptCommunication className="w-16 h-16" /> },
                    { text: 'Schnelle Prototypen statt langer Konzepte', icon: <ConceptPrototyping className="w-16 h-16" /> },
                    { text: 'Sauberer Code, der auch morgen noch läuft', icon: <ConceptCode className="w-16 h-16" /> },
                    { text: 'Fixpreise für klare Budgetsicherheit', icon: <ConceptPrice className="w-16 h-16" /> }
                  ].map((item, i) => (
                    <li key={i} className="flex items-center gap-6 text-slate-600 font-serif italic text-lg group">
                      <div className="shrink-0 opacity-100 transition-all duration-500 group-hover:scale-110">
                        {item.icon}
                      </div>
                      {item.text}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>

            <Reveal delay={0.2}>
              <div className="space-y-8 opacity-50 hover:opacity-100 transition-opacity duration-500">
                <div className="flex items-center gap-4 text-slate-400 font-bold text-lg">
                  <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 grayscale">
                    <ConceptMessy className="w-8 h-8" />
                  </div>
                  Was ich nicht mache
                </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 text-slate-400 font-serif italic text-lg decoration-slate-400 line-through">
                      <span className="w-1.5 h-1.5 bg-slate-300 rounded-full mt-2.5 shrink-0"></span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          </div>
        </div>
      </Section>

      {/* Section 03: The Difference */}
      <Section
        number="03"
        title="Der Unterschied"
        variant="white"
        borderTop
        connector={<ConnectorStart className="h-full" />}
      >
        <div className="space-y-12 relative">
          <div className="flex flex-col md:flex-row gap-12 items-center">
            <Reveal className="flex-1">
              <p className="text-xl md:text-2xl font-serif italic text-slate-600 max-w-2xl relative z-10">
                Der klassische Agentur-Weg ist oft langsam und teuer. Mein Ansatz ist radikal anders: Ich baue zuerst, dann reden wir über Details.
              </p>
            </Reveal>
            <Reveal delay={0.2} className="w-full md:w-80 shrink-0">
              <DifferenceIllustration className="w-full h-auto" />
            </Reveal>
          </div>

          <div className="grid grid-cols-1 gap-6 relative z-20">
             <ComparisonRow
                negativeLabel="Agentur"
                negativeText="Konzeptcalls, Meetings, Slides, Warten auf das Angebot."
                positiveLabel="Ich"
                positiveText="Ich baue einen Prototypen. Sie sehen sofort, was Sie bekommen."
                delay={0.1}
              />
              <ComparisonRow
                negativeLabel="Agentur"
                negativeText="Stundensätze, Nachberechnungen, Budget-Überraschungen."
                positiveLabel="Ich"
                positiveText="Fixpreise. Ein Preis, ein Ergebnis. Keine Diskussionen."
                reverse
                delay={0.2}
              />
              <ComparisonRow
                negativeLabel="Agentur"
                negativeText="Wechselnde Ansprechpartner, Stille Post."
                positiveLabel="Ich"
                positiveText="Ein Ansprechpartner. Ich setze um, was wir besprechen."
                delay={0.3}
              />
          </div>
        </div>
      </Section>

      {/* Section 04: Target Group */}
      <Section
        number="04"
        title="Zielgruppe"
        borderTop
        connector={<ConnectorSplit className="h-full" />}
      >
        <div className="relative">
             <div className="absolute left-0 top-0 w-full h-full -z-10 opacity-30 pointer-events-none">
                <CirclePattern />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
                <Reveal>
                    <div className="p-10 bg-slate-900 text-white rounded-3xl h-full flex flex-col justify-between group hover:scale-[1.02] transition-transform duration-500 shadow-2xl shadow-slate-900/20">
                        <div className="space-y-6 relative overflow-hidden">
                            <div className="w-16 h-16 bg-white/10 rounded-2xl flex items-center justify-center">
                                <ConceptPrice className="w-10 h-10" />
                            </div>
                            <h3 className="text-3xl font-bold tracking-tight text-white">Unternehmer & <br/>Geschäftsführer</h3>
                            <p className="text-slate-300 font-serif italic text-lg leading-relaxed">
                                "Ich brauche eine Lösung, die funktioniert. Ich habe keine Zeit für technische Details oder lange Meetings."
                            </p>
                        </div>
                        <div className="pt-8 border-t border-white/10 mt-8">
                            <span className="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-white transition-colors">Perfekt für Sie</span>
                        </div>
                    </div>
                </Reveal>
                <Reveal delay={0.2}>
                    <div className="p-10 bg-white border border-slate-100 rounded-3xl h-full flex flex-col justify-between group hover:border-slate-300 transition-colors duration-500 shadow-xl shadow-slate-100/50">
                        <div className="space-y-6 relative overflow-hidden">
                            <div className="w-16 h-16 bg-slate-50 border border-slate-200 rounded-2xl flex items-center justify-center">
                                <ConceptWebsite className="w-10 h-10" />
                            </div>
                            <h3 className="text-3xl font-bold tracking-tight text-slate-900">Marketing & <br/>Vertrieb</h3>
                            <p className="text-slate-600 font-serif italic text-lg leading-relaxed">
                                "Wir brauchen Landingpages, Tools und Automatisierungen, um unsere Ziele zu erreichen. Schnell und zuverlässig."
                            </p>
                        </div>
                        <div className="pt-8 border-t border-slate-200 mt-8">
                            <span className="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-slate-900 transition-colors">Perfekt für Sie</span>
                        </div>
                    </div>
                </Reveal>
            </div>
        </div>
      </Section>

      {/* Section 05: Services - Visual Flow */}
      <Section
        number="05"
        title="Leistungen"
        variant="gray"
        borderTop
        connector={<ConnectorBranch className="h-full" />}
      >
        <div className="relative py-12">
            {/* Connecting Line Illustration */}
            <div className="absolute top-1/2 left-0 w-full -translate-y-1/2 hidden md:block">
                <ServicesFlow />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-20">
                <Reveal delay={0.1}>
                    <div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden">
                        <div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
                            <ConceptWebsite className="w-12 h-12" />
                        </div>
                        <h3 className="text-2xl font-bold text-slate-900 mb-4">Websites</h3>
                        <p className="text-slate-500 font-serif italic mb-6">
                            High-Performance Websites. Kein Baukasten, sondern maßgeschneiderte Architektur.
                        </p>
                        <a href="/websites" className="text-xs font-bold uppercase tracking-widest text-slate-900 border-b border-slate-200 pb-1 hover:border-slate-900 transition-colors">
                            Preise ansehen
                        </a>
                    </div>
                </Reveal>

                <Reveal delay={0.3}>
                    <div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full mt-8 md:mt-0 relative overflow-hidden">
                        <div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
                            <ConceptSystem className="w-12 h-12" />
                        </div>
                        <h3 className="text-2xl font-bold text-slate-900 mb-4">Systeme</h3>
                        <p className="text-slate-500 font-serif italic">
                            Web-Applikationen, Kundenportale, interne Tools. Wenn Standard-Software an ihre Grenzen stößt.
                        </p>
                    </div>
                </Reveal>

                <Reveal delay={0.5}>
                    <div className="bg-white p-8 rounded-2xl border border-slate-100 shadow-lg hover:shadow-xl transition-all duration-300 group h-full relative overflow-hidden">
                        <div className="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500">
                            <ConceptAutomation className="w-12 h-12" />
                        </div>
                        <h3 className="text-2xl font-bold text-slate-900 mb-4">Automatisierung</h3>
                        <p className="text-slate-500 font-serif italic">
                            Verbindung von Tools, automatische PDF-Erstellung, Daten-Synchronisation.
                        </p>
                    </div>
                </Reveal>
            </div>
        </div>
      </Section>

      {/* Section 06: Contact */}
      <Section
        number="06"
        title="Kontakt"
        borderTop
        connector={<ConnectorEnd className="h-full" />}
      >
        <div className="relative py-12" id="contact">
             <div className="absolute right-0 top-1/2 -translate-y-1/2 w-[400px] h-[200px] -z-10 opacity-40 pointer-events-none">
                <FlowLines />
            </div>
            <div className="absolute left-1/2 top-0 -translate-x-1/2 w-32 h-32 opacity-10 -z-10">
                <ContactIllustration />
            </div>
          <Reveal>
            <div className="space-y-12">
              <h2 className="text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
                Lassen Sie uns <br />
                <span className="text-slate-300">starten.</span>
              </h2>
              
              <div className="flex flex-col md:flex-row gap-12 items-start relative z-10">
                <div className="space-y-6 flex-1">
                    <p className="text-xl text-slate-600 font-serif italic">
                        Schreiben Sie mir kurz, worum es geht. Ich melde mich innerhalb von 24 Stunden mit einer ersten Einschätzung.
                    </p>
                    <a 
                        href="/contact" 
                        className="inline-block text-3xl md:text-4xl font-bold text-slate-900 hover:text-slate-600 transition-colors border-b-2 border-slate-900 hover:border-slate-600 pb-2"
                    >
                        Projekt anfragen
                    </a>
                </div>
                
                <div className="flex-1 space-y-4">
                    <div className="flex items-center gap-4 text-sm font-bold uppercase tracking-widest text-slate-400">
                        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                        Verfügbar für neue Projekte
                    </div>
                    <p className="text-slate-500 text-sm">
                        Aktuell nehme ich Projekte für Q2 2026 an.
                    </p>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}