import React from 'react';
import Link from 'next/link';
import { Check, ArrowRight, MessageSquare } from 'lucide-react';

export default function LandingPage() {
  return (
    <div className="flex flex-col gap-32 py-20 md:py-32">
      {/* Hero Section */}
      <section className="narrow-container animate-fade-in">
        <h1 className="text-4xl md:text-6xl font-bold text-slate-900 tracking-tight mb-10 leading-[1.1]">
          Digitale Systeme für Unternehmen, die keinen Overhead wollen
        </h1>
        <div className="space-y-4 text-xl md:text-2xl text-slate-500 font-serif italic leading-relaxed">
          <p>Agenturen sind zu langsam.</p>
          <p>CMS will keiner pflegen.</p>
          <p>Digitale Themen bleiben liegen.</p>
        </div>
        <p className="mt-12 text-2xl font-semibold text-slate-900">
          Ich mache das anders.
        </p>
      </section>

      {/* Was ich mache */}
      <section className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-4">
            <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Was ich mache</h2>
          </div>
          <div className="md:col-span-8">
            <div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
              <p>
                Ich setze digitale Systeme für Unternehmen um – direkt, sauber und ohne Agentur-Zirkus.
              </p>
              <p className="font-sans font-bold text-slate-900 mt-8 text-2xl">
                Websites, Funktionen, Systeme, interne Tools.
              </p>
              <p className="mt-4">
                Keine Workshops. Keine Tickets. Kein Tech-Blabla.
              </p>
              <p className="mt-10 text-slate-900">
                Sie erklären mir, was Sie brauchen. <br />
                Ich sorge dafür, dass es funktioniert.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Für wen das ist */}
      <section className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-4">
            <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Für wen das ist</h2>
          </div>
          <div className="md:col-span-8">
            <p className="text-xl text-slate-900 font-bold mb-8">Für Unternehmen, die:</p>
            <ul className="space-y-4 mb-12">
              {[
                'regelmäßig Änderungen an Website oder Systemen brauchen',
                'keine Lust auf Agenturen haben',
                'kein CMS anfassen wollen',
                'keine Tickets schreiben möchten',
                'keinen Entwickler einstellen wollen',
                'und wollen, dass Dinge einfach erledigt werden',
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-4">
                  <Check className="w-5 h-5 text-slate-900 shrink-0 mt-1" />
                  <span className="text-lg text-slate-600 font-serif">{item}</span>
                </li>
              ))}
            </ul>
            <div className="p-8 bg-slate-50 rounded-sm border-l-4 border-slate-900">
              <p className="text-xl font-serif italic text-slate-700 leading-relaxed">
                Wenn bei Ihnen öfter der Satz fällt: <br />
                <span className="font-bold not-italic text-slate-900">„Das müsste man mal machen …“</span>
              </p>
              <p className="mt-4 text-slate-500">
                … aber es passiert nie – dann sind Sie hier richtig.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Das eigentliche Problem */}
      <section className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-4">
            <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Das Problem</h2>
          </div>
          <div className="md:col-span-8">
            <div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
              <p>
                Digitale Arbeit scheitert nicht an Technik. <br />
                Sie scheitert an <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-4">Zuständigkeit</span>.
              </p>
              <div className="space-y-4 mt-10 font-sans text-base not-italic text-slate-500">
                <p className="pb-4 border-b border-slate-100">Agenturen wollen Projekte.</p>
                <p className="pb-4 border-b border-slate-100">Mitarbeiter haben Wichtigeres zu tun.</p>
                <p className="pb-4 border-b border-slate-100">IT ist ausgelastet.</p>
                <p>Kleine Aufgaben sind zu klein für große Angebote.</p>
              </div>
              <p className="mt-10 font-bold text-slate-900 text-2xl">Also bleibt alles liegen.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Warum keine Agentur */}
      <section className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-4">
            <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Warum keine Agentur</h2>
          </div>
          <div className="md:col-span-8">
            <p className="text-xl font-serif text-slate-600 mb-16 leading-relaxed">
              Ich habe über 15 Jahre in Agenturen gearbeitet. Ich kenne das Spiel. Und ich weiß, warum es nervt.
            </p>

            <div className="space-y-20">
              <div className="group">
                <h3 className="text-2xl font-bold text-slate-900 mb-6">Agenturen machen einfache Dinge kompliziert</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
                  <div className="space-y-2 text-slate-400 text-sm font-mono">
                    <p>Ein Button ändern?</p>
                    <p>→ Konzeptcall</p>
                    <p>→ Abstimmung</p>
                    <p>→ internes Meeting</p>
                    <p>→ Angebot</p>
                    <p>→ Warten</p>
                    <p>→ Rechnung</p>
                  </div>
                  <div className="pt-4 border-t-2 border-slate-900">
                    <p className="font-bold text-slate-900 mb-2 uppercase tracking-wider text-xs">Mein Ansatz</p>
                    <p className="text-2xl font-bold text-slate-900">Ich mache es einfach fertig.</p>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
                <div>
                  <h4 className="font-bold text-slate-900 mb-3 text-lg">Prozesse statt Ergebnisse</h4>
                  <p className="text-slate-500 font-serif leading-relaxed">
                    Workshops, Slides, Roadmaps. Klingt nach Fortschritt, ist oft nur Beschäftigungstherapie. Bei mir zählt nur Umsetzung.
                  </p>
                </div>
                <div>
                  <h4 className="font-bold text-slate-900 mb-3 text-lg">Stundenabrechnung</h4>
                  <p className="text-slate-500 font-serif leading-relaxed">
                    „Das dauert nur kurz“ → Überraschung auf der Rechnung. Ich arbeite mit Fixpreisen. Sie wissen vorher, was es kostet.
                  </p>
                </div>
                <div>
                  <h4 className="font-bold text-slate-900 mb-3 text-lg">Aufgaben-Ping-Pong</h4>
                  <p className="text-slate-500 font-serif leading-relaxed">
                    Heute Projektmanager, morgen Entwickler, übermorgen niemand. Bei mir: Eine Person. Eine Verantwortung.
                  </p>
                </div>
                <div>
                  <h4 className="font-bold text-slate-900 mb-3 text-lg">Verschwinden nach dem Projekt</h4>
                  <p className="text-slate-500 font-serif leading-relaxed">
                    Kleine Änderung? Neues Angebot. Dringend? Warteschleife. Ich bleibe, solange Sie Dinge brauchen.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Wie ich arbeite */}
      <section className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-4">
            <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Arbeitsweise</h2>
          </div>
          <div className="md:col-span-8">
            <p className="text-2xl font-bold text-slate-900 mb-8">
              Ich baue zuerst. Dann reden wir drüber.
            </p>
            <div className="prose prose-slate font-serif text-xl leading-relaxed text-slate-700">
              <p>
                Sie erklären mir Ihre Vorstellung. Ich setze den ersten echten Stand um.
              </p>
              <div className="flex flex-wrap gap-x-8 gap-y-2 my-10 not-prose border-y border-slate-100 py-6">
                <span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Keine Slides</span>
                <span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Kein Konzept-PDF</span>
                <span className="text-sm font-bold text-slate-400 uppercase tracking-widest">Kein Ratespiel</span>
              </div>
              <p>
                Dann arbeiten wir direkt am Ergebnis, bis es passt. Ohne jedes Mal ein neues Angebot. Ohne Scope-Diskussionen. Ohne Theater.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Was ich konkret umsetze */}
      <section className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-4">
            <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Leistungen</h2>
          </div>
          <div className="md:col-span-8">
            <div className="space-y-20">
              <div>
                <h3 className="text-2xl font-bold text-slate-900 mb-6">Websites</h3>
                <ul className="space-y-3 text-slate-600 font-serif text-lg">
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> neue Websites (klarer Standard)</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> bestehende Websites übernehmen</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Seiten ändern oder ergänzen</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Performance & SEO</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Hosting & Betrieb (inklusive)</li>
                </ul>
                <div className="mt-8">
                  <Link href="/websites" className="inline-flex items-center gap-2 text-slate-900 font-bold border-b-2 border-slate-900 pb-1 hover:text-slate-600 hover:border-slate-300 transition-all">
                    Details zu Websites & Preisen <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>
              </div>

              <div>
                <h3 className="text-2xl font-bold text-slate-900 mb-6">Funktionen & Systeme</h3>
                <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3 text-slate-600 font-serif text-lg">
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Produktbereiche</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Blogs, News, Jobs</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Formulare</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Suche & Filter</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> PDF-Generatoren</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> API-Ausgaben & Daten-Sync</li>
                </ul>
              </div>

              <div>
                <h3 className="text-2xl font-bold text-slate-900 mb-6">Interne Tools</h3>
                <ul className="space-y-3 text-slate-600 font-serif text-lg">
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> kleine Inhouse-Tools</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Excel ersetzen</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Automatisierung</li>
                  <li className="flex items-center gap-3"><Check className="w-4 h-4 text-slate-300" /> Importe & Exporte</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Warum Kunden bleiben */}
      <section className="narrow-container">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-4">
            <h2 className="text-sm font-bold uppercase tracking-widest text-slate-400 mt-0">Vorteile</h2>
          </div>
          <div className="md:col-span-8">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-10">
              {[
                { label: 'Schnelligkeit', desc: 'Dinge passieren schnell' },
                { label: 'Erledigt', desc: 'Aufgaben verschwinden wirklich' },
                { label: 'Kein Erklären', desc: 'Ich verstehe, was Sie brauchen' },
                { label: 'Kein Nachfassen', desc: 'Ich melde mich, wenn es fertig ist' },
                { label: 'Kein Stress', desc: 'Kein Projektstress' },
                { label: 'Ruhe', desc: 'Kein Agentur-Zirkus' },
              ].map((item, i) => (
                <div key={i} className="border-l border-slate-100 pl-6">
                  <div className="font-bold text-slate-900 mb-1 text-lg">{item.label}</div>
                  <div className="text-slate-500 font-serif">{item.desc}</div>
                </div>
              ))}
            </div>
            <p className="mt-20 text-4xl font-serif italic text-slate-900">
              Kurz: Ruhe.
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="narrow-container">
        <div className="bg-slate-900 text-white p-12 md:p-20 rounded-sm text-center">
          <h2 className="text-3xl md:text-5xl font-bold mb-8 tracking-tight">Interesse?</h2>
          <p className="text-xl md:text-2xl mb-12 text-slate-400 font-serif leading-relaxed">
            Schreiben Sie mir einfach, was Sie brauchen. <br />
            Ich sage Ihnen ehrlich, ob ich es mache – und was es kostet.
          </p>
          <a 
            href="mailto:marc@mintel.me" 
            className="inline-flex items-center gap-3 bg-white text-slate-900 px-10 py-5 rounded-sm font-bold text-lg hover:bg-slate-100 transition-colors"
          >
            <MessageSquare className="w-5 h-5" />
            Projekt anfragen
          </a>
          <div className="mt-12">
            <Link href="/blog" className="text-slate-500 hover:text-white text-sm font-mono uppercase tracking-widest transition-colors">
              Zum Blog
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}