import * as React from 'react';
import Link from 'next/link';
import { ArrowRight, Zap, Shield } from 'lucide-react';
import { Reveal } from '../src/components/Reveal';
import { Section } from '../src/components/Section';

export default function LandingPage() {
  return (
    <div className="flex flex-col gap-48 pt-12 md:pt-24 pb-24 md:pb-48 overflow-hidden">
      {/* Hero Section - High Impact */}
      <section className="narrow-container relative">
        <div className="absolute -left-24 -top-24 text-[20rem] font-bold text-slate-50 select-none -z-10">00</div>
        <div className="space-y-16 relative">
          <Reveal>
            <h1 className="text-6xl md:text-8xl font-bold text-slate-900 tracking-tighter leading-[0.9]">
              Digitale Systeme <br />
              <span className="text-slate-200">ohne Overhead.</span>
            </h1>
          </Reveal>
          <div className="space-y-32">
            <div className="space-y-16 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) => (
                <Reveal key={i} delay={0.2 * (i + 1)}>
                  <div className="group flex gap-8 md:gap-12">
                    <span className="text-sm font-mono text-slate-200 group-hover:text-slate-900 transition-colors pt-2">0{i+1}</span>
                    <div className="space-y-3">
                      <p className="text-3xl md:text-5xl font-bold text-slate-900 tracking-tight">{item.title}</p>
                      <p className="text-xl md:text-2xl text-slate-400 font-serif italic leading-tight">{item.desc}</p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
            
            <Reveal delay={0.8}>
              <div className="border-l-4 border-slate-900 pl-12 py-4">
                <p className="text-4xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-none">
                  Kein Zirkus. <br />
                  <span className="text-slate-200">Nur Ergebnisse.</span>
                </p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Was ich mache - Designed Grid */}
      <Section number="01" title="Das Versprechen" numberPosition="right">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
          <div className="md:col-span-5 space-y-8">
            <Reveal>
              <p className="text-4xl font-bold text-slate-900 leading-[1.1]">
                Direkt. <br />
                Sauber. <br />
                Ohne Zirkus.
              </p>
            </Reveal>
          </div>
          <div className="md:col-span-7">
            <div className="prose prose-slate font-serif text-2xl leading-relaxed text-slate-700">
              <Reveal delay={0.2}>
                <p>
                  Ich setze digitale Systeme für Unternehmen um – ohne Workshops, ohne Tickets, ohne Tech-Blabla.
                </p>
              </Reveal>
              <div className="mt-12 grid grid-cols-1 gap-8 not-prose">
                <Reveal delay={0.4}>
                  <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
                    <Zap className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
                    <h3 className="text-xl font-bold text-slate-900 mb-2">Websites & Tools</h3>
                    <p className="text-slate-500 font-serif text-lg">Alles, was Ihr Unternehmen digital voranbringt.</p>
                  </div>
                </Reveal>
                <Reveal delay={0.6}>
                  <div className="p-8 border border-slate-100 hover:border-slate-900 transition-colors group">
                    <Shield className="w-6 h-6 mb-4 text-slate-300 group-hover:text-slate-900 transition-colors" />
                    <h3 className="text-xl font-bold text-slate-900 mb-2">Kein Overhead</h3>
                    <p className="text-slate-500 font-serif text-lg">Sie erklären, ich baue. Es funktioniert einfach.</p>
                  </div>
                </Reveal>
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* Comparison - Visual Path */}
      <Section number="02" title="Der Unterschied">
        <div className="space-y-32">
          {/* Row 1 */}
          <Reveal>
            <div className="flex flex-col md:flex-row gap-12 items-center">
              <div className="flex-1 p-10 bg-slate-50 text-slate-400">
                <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
                <p className="text-xl font-serif italic line-through decoration-slate-300">Konzeptcalls, Meetings, Slides, Warten auf das Angebot.</p>
              </div>
              <div className="shrink-0">
                <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block" />
              </div>
              <div className="flex-1 p-10 border-2 border-slate-900">
                <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
                <p className="text-3xl font-bold text-slate-900 leading-tight">Ich baue zuerst. <br />Dann reden wir.</p>
              </div>
            </div>
          </Reveal>

          {/* Row 2 */}
          <Reveal delay={0.2}>
            <div className="flex flex-col md:flex-row-reverse gap-12 items-center">
              <div className="flex-1 p-10 bg-slate-50 text-slate-400">
                <div className="text-xs font-bold uppercase tracking-widest mb-4 line-through decoration-slate-300">Agentur</div>
                <p className="text-xl font-serif italic">
                  <span className="line-through decoration-slate-300">"Das dauert nur kurz"</span> <br />
                  → Überraschung auf der Rechnung.
                </p>
              </div>
              <div className="shrink-0">
                <ArrowRight className="w-8 h-8 text-slate-200 hidden md:block rotate-180" />
              </div>
              <div className="flex-1 p-10 border-2 border-slate-900">
                <div className="text-xs font-bold uppercase tracking-widest text-slate-900 mb-4">Ich</div>
                <p className="text-3xl font-bold text-slate-900 leading-tight">Fixpreise. <br />Immer.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Für wen - Designed Box */}
      <Section number="03" title="Zielgruppe" numberPosition="right">
        <Reveal>
          <div className="relative p-12 md:p-24 border border-slate-100">
            <div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div>
            <p className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-16 tracking-tighter">
              Für Unternehmen, die <br />
              <span className="text-slate-300 underline decoration-slate-100 underline-offset-8">Ergebnisse</span> wollen.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-8">
              {[
                '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-xl font-serif text-slate-600">
                  <div className="w-2 h-2 bg-slate-900 rounded-full"></div>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </Section>

      {/* Leistungen - Visual Cards */}
      <Section number="04" title="Leistungen">
        <div className="grid grid-cols-1 gap-32">
          <Reveal>
            <div className="group relative">
              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Websites</h3>
              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
                Neue Seiten, Relaunch oder Übernahme bestehender Systeme. Inklusive Hosting, SEO und Performance.
              </p>
              <Link href="/websites" className="inline-flex items-center gap-4 text-slate-900 font-bold text-xl group/link">
                Preise ansehen
                <div className="w-12 h-px bg-slate-900 group-hover/link:w-20 transition-all"></div>
              </Link>
            </div>
          </Reveal>

          <Reveal delay={0.2}>
            <div className="group relative">
              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Systeme</h3>
              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
                Produktbereiche, Blogs, Jobs, API-Anbindungen, PDF-Generatoren und Sonderlogik.
              </p>
            </div>
          </Reveal>

          <Reveal delay={0.4}>
            <div className="group relative">
              <h3 className="text-5xl font-bold text-slate-900 mb-8 tracking-tighter">Tools</h3>
              <p className="text-2xl text-slate-500 font-serif mb-10 leading-relaxed max-w-2xl">
                Interne Inhouse-Tools, Excel-Ablösungen und Prozess-Automatisierung.
              </p>
            </div>
          </Reveal>
        </div>
      </Section>
    </div>
  );
}