import * as React from 'react';
import { Zap, Shield, MousePointer2, Sparkles } from 'lucide-react';
import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section';
import { HeroItem, FeatureCard, ComparisonRow, ServiceCard } from '../src/components/Landing';

export default function LandingPage() {
  return (
    <div className="flex flex-col bg-white overflow-hidden">
      {/* Global Background Pattern */}
      <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.02]" style={{
        backgroundImage: 'radial-gradient(circle at 2px 2px, #0f172a 1px, transparent 0)',
        backgroundSize: '40px 40px'
      }} />

      {/* Hero Section - High Impact */}
      <section className="relative pt-12 md:pt-24 pb-24 md:pb-32">
        <div className="narrow-container relative">
          {/* Background Illustration/Pattern */}
          <div className="absolute -left-24 -top-24 text-[15rem] md:text-[20rem] font-bold text-slate-50 select-none -z-10 opacity-50 pointer-events-none">
            00
          </div>
          
          {/* Floating Elements */}
          <div className="absolute right-0 top-0 w-64 h-64 bg-slate-50 rounded-full blur-[80px] -z-10 opacity-60 animate-pulse"></div>
          
          <div className="space-y-16 md:space-y-20 relative">
            <Reveal>
              <div className="space-y-4">
                <div className="flex items-center gap-3 text-slate-400 font-mono text-[10px] uppercase tracking-[0.3em] mb-4">
                  <span className="w-6 h-px bg-slate-200"></span>
                  Digital Architect & Developer
                </div>
                <h1 className="text-5xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.95]">
                  Digitale Systeme <br />
                  <span className="text-slate-200">ohne Overhead.</span>
                </h1>
              </div>
            </Reveal>
            
            <div className="space-y-12 md:space-y-16">
              <div className="grid grid-cols-1 gap-4 md:gap-6 max-w-4xl">
                {[
                  { title: 'Agenturen sind zu langsam.', desc: 'Wochenlange Konzepte statt schneller Ergebnisse.' },
                  { title: 'CMS will keiner pflegen.', desc: 'Ich baue Systeme, die so einfach sind, dass sie wirklich genutzt werden.' },
                  { title: 'Digitale Themen bleiben liegen.', desc: 'Weil der Overhead die Umsetzung erstickt.' },
                ].map((item, i) => (
                  <HeroItem
                    key={i}
                    number={`0${i + 1}`}
                    title={item.title}
                    description={item.desc}
                    delay={0.1 * (i + 1)}
                  />
                ))}
              </div>
              
              <Reveal delay={0.5}>
                <div className="relative group inline-block">
                  <div className="absolute -inset-4 bg-slate-50 rounded-2xl scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-500 -z-10"></div>
                  <div className="border-l-4 border-slate-900 pl-6 md:pl-8 py-2">
                    <p className="text-3xl md:text-6xl font-bold text-slate-900 tracking-tighter leading-none">
                      Kein Zirkus. <br />
                      <span className="text-slate-200">Nur Ergebnisse.</span>
                    </p>
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Was ich mache - Designed Grid */}
      <Section number="01" title="Das Versprechen" numberPosition="right" variant="gray" borderTop>
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16 items-start">
          <div className="md:col-span-5">
            <Reveal>
              <div className="space-y-6">
                <div className="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center text-white mb-6 rotate-3 hover:rotate-0 transition-transform duration-500">
                  <Sparkles className="w-6 h-6" />
                </div>
                <h2 className="text-3xl md:text-5xl font-bold text-slate-900 leading-[1.1] tracking-tight">
                  Direkt. <br />
                  Sauber. <br />
                  Ohne Zirkus.
                </h2>
              </div>
            </Reveal>
          </div>
          <div className="md:col-span-7">
            <div className="space-y-10">
              <Reveal delay={0.2}>
                <p className="font-serif text-xl md:text-2xl leading-relaxed text-slate-700 italic">
                  Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
                </p>
              </Reveal>
              <div className="grid grid-cols-1 gap-6">
                <FeatureCard
                  icon={Zap}
                  title="Websites & Tools"
                  description="Alles, was Ihr Unternehmen digital voranbringt."
                  delay={0.3}
                />
                <FeatureCard
                  icon={Shield}
                  title="Kein Overhead"
                  description="Sie erklären, ich baue. Es funktioniert einfach."
                  delay={0.4}
                />
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* Comparison - Visual Path */}
      <Section number="02" title="Der Unterschied" borderTop>
        <div className="space-y-16 md:space-y-24 relative">
          {/* Connecting line */}
          <div className="absolute left-1/2 top-0 bottom-0 w-px bg-slate-100 -translate-x-1/2 -z-10 hidden md:block"></div>
          
          <ComparisonRow
            negativeLabel="Agentur"
            negativeText="Konzeptcalls, Meetings, Slides, Warten auf das Angebot."
            positiveLabel="Ich"
            positiveText={<>Ich baue zuerst. <br />Dann reden wir.</>}
            delay={0.1}
          />

          <ComparisonRow
            negativeLabel="Agentur"
            negativeText={<>
              <span className="line-through decoration-slate-200">"Das dauert nur kurz"</span> <br />
              → Überraschung auf der Rechnung.
            </>}
            positiveLabel="Ich"
            positiveText={<>Fixpreise. <br />Immer.</>}
            reverse
            delay={0.2}
          />
        </div>
      </Section>

      {/* Für wen - Designed Box */}
      <Section number="03" title="Zielgruppe" numberPosition="right" variant="gray" borderTop>
        <Reveal>
          <div className="relative p-8 md:p-16 border border-slate-100 rounded-3xl bg-white overflow-hidden group">
            {/* Decorative elements */}
            <div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 -mr-32 -mt-32 rounded-full -z-10 group-hover:scale-110 transition-transform duration-1000"></div>
            
            <div className="absolute top-0 left-10 w-px h-16 bg-slate-100 -translate-y-8"></div>
            <h2 className="text-3xl md:text-6xl font-bold text-slate-900 leading-[1.1] mb-12 tracking-tighter">
              Für Unternehmen, die <br />
              <span className="text-slate-100">Ergebnisse</span> wollen.
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
              {[
                'Keine Lust auf Agentur-Zirkus',
                'Kein CMS selbst pflegen',
                'Keine Tickets schreiben',
                'Keinen eigenen Entwickler',
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-4 text-lg md:text-xl font-serif text-slate-600 italic group/item">
                  <div className="w-1.5 h-1.5 bg-slate-900 rounded-full shrink-0 group-hover/item:scale-150 transition-transform duration-300"></div>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </Section>

      {/* Leistungen - Visual Cards */}
      <Section number="04" title="Leistungen" borderTop>
        <div className="grid grid-cols-1 gap-8 md:gap-12">
          <ServiceCard
            title="Websites"
            description="Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance."
            linkHref="/websites"
            linkLabel="Preise ansehen"
            delay={0.1}
          />

          <ServiceCard
            title="Systeme"
            description="Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik."
            delay={0.2}
          />

          <ServiceCard
            title="Tools"
            description="Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung."
            delay={0.3}
          />
        </div>
      </Section>

      {/* Final CTA - New Section */}
      <Section number="05" title="Kontakt" numberPosition="right" variant="gray" borderTop>
        <Reveal>
          <div className="text-center space-y-10">
            <h2 className="text-4xl md:text-8xl font-bold text-slate-900 tracking-tighter">
              Bereit für <br />
              <span className="text-slate-200">echten Fortschritt?</span>
            </h2>
            <div className="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-8">
              <a 
                href="mailto:hello@mintel.me" 
                className="px-10 py-5 bg-slate-900 text-white rounded-full font-bold text-lg hover:bg-slate-800 transition-all duration-300 hover:scale-105 active:scale-95 shadow-xl shadow-slate-200"
              >
                Projekt anfragen
              </a>
              <div className="flex items-center gap-3 text-slate-400 font-serif italic text-lg">
                <MousePointer2 className="w-5 h-5 animate-bounce" />
                <span>Kein Zirkus, versprochen.</span>
              </div>
            </div>
          </div>
        </Reveal>
      </Section>
    </div>
  );
}