/* ─────────────────────────────────────────────────────
   GSO Gruppencoaching — Verkaufsseite
   Brunson Online Masterclass Funnel Template
   CI: Market Compass  ·  Blau #3B82F6  ·  Lila #8B5CF6
───────────────────────────────────────────────────── */

const CTA_HREF = "#platz-sichern";

/* ── Shared atoms ── */

function Btn({ href = CTA_HREF, children, xl = false }: { href?: string; children: React.ReactNode; xl?: boolean }) {
  return (
    <a
      href={href}
      className={`inline-block font-extrabold rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-400 hover:to-purple-500 text-white transition-all shadow-xl uppercase tracking-wide ${xl ? "text-xl md:text-2xl px-12 py-5" : "text-sm px-7 py-3"}`}
    >
      {children}
    </a>
  );
}

function Badge({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-block text-xs font-bold uppercase tracking-widest bg-blue-600 text-white rounded px-3 py-1 mb-3">
      {children}
    </span>
  );
}

/* ── Icon tile (used in "Why you'll love" and "Nach 8 Wochen") ── */
function IconTile({ icon, title, text }: { icon: string; title: string; text?: string }) {
  return (
    <div className="flex flex-col items-center text-center gap-3 p-6 rounded-xl bg-slate-800 border border-slate-700">
      <div className="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-2xl flex-shrink-0">
        {icon}
      </div>
      <p className="font-bold text-white text-sm leading-snug">{title}</p>
      {text && <p className="text-slate-400 text-xs leading-relaxed">{text}</p>}
    </div>
  );
}

/* ── Module thumbnail card ── */
function ModuleCard({
  week, expert, title, body, vorlagen, result,
}: {
  week: string; expert?: string; title: string; body: string; vorlagen: string; result: string;
}) {
  return (
    <div className="rounded-xl overflow-hidden border border-slate-700 bg-slate-800 flex flex-col">
      {/* Thumbnail area */}
      <div className="relative w-full aspect-video bg-slate-900 flex items-center justify-center border-b border-slate-700">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-900/30 to-purple-900/30" />
        <div className="relative flex flex-col items-center gap-2 text-slate-500">
          <svg className="w-12 h-12 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 10l4.553-2.069A1 1 0 0121 8.869v6.262a1 1 0 01-1.447.894L15 14M4 8h11a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4a2 2 0 012-2z" />
          </svg>
          <span className="text-xs uppercase tracking-widest opacity-50">Video</span>
        </div>
        <span className="absolute top-3 left-3 text-xs font-bold bg-blue-600 text-white px-2 py-1 rounded uppercase tracking-wide">
          {week}
        </span>
        {expert && (
          <span className="absolute top-3 right-3 text-xs bg-purple-700 text-white px-2 py-1 rounded">
            {expert}
          </span>
        )}
      </div>
      {/* Text */}
      <div className="p-5 flex flex-col gap-3 flex-1">
        <h4 className="font-bold text-white text-sm leading-snug">{title}</h4>
        <p className="text-slate-400 text-xs leading-relaxed">{body}</p>
        <p className="text-xs text-blue-400 italic border-t border-slate-700 pt-3">{vorlagen}</p>
        <p className="text-xs font-semibold text-green-400 mt-auto">✓ {result}</p>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════
   PAGE
═══════════════════════════════════════════════════ */
export default function Home() {
  return (
    <main className="bg-[#0B0F1A] text-slate-100">

      {/* ── NAV ── */}
      <nav className="sticky top-0 z-50 bg-[#0B0F1A]/95 backdrop-blur border-b border-slate-800">
        <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
          <span className="font-extrabold text-lg bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
            Market Compass
          </span>
          <Btn>Meinen Platz sichern →</Btn>
        </div>
      </nav>

      {/* ══════════════════════════════════════════
         S1 — HERO
      ══════════════════════════════════════════ */}
      <section className="relative overflow-hidden bg-[#0B0F1A] pt-20 pb-16">
        {/* Radial glow */}
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_0%,rgba(59,130,246,0.15),transparent)]" />

        <div className="relative max-w-4xl mx-auto px-4 text-center space-y-7">
          <Badge>Online Gruppencoaching · Pilotprogramm · Start 1. Juli 2027</Badge>

          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1] tracking-tight">
            In 8 Wochen zu deinem eigenen{" "}
            <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
              Kundengewinnungs-System
            </span>
          </h1>

          <p className="text-lg md:text-xl text-blue-300 font-semibold max-w-2xl mx-auto">
            Speziell für Selbstständige — mit Katja Pestereva von Market Compass<br />
            + 4 Experten aus Vertrieb, Social Media &amp; Video
          </p>

          <p className="text-slate-300 text-base max-w-xl mx-auto">
            Dein Wissen ist da. Jetzt bekommt es die Struktur die Kunden bringt.
          </p>

          <div className="flex flex-col items-center gap-3">
            <Btn xl>Meinen Platz sichern →</Btn>
            <p className="text-sm text-slate-400">
              Exklusive Kleingruppe — maximal 10 Plätze. Nur noch 8 frei.<br />
              Du entscheidest nach unserem ersten Gespräch.
            </p>
          </div>

          {/* Authority bar */}
          <div className="inline-flex items-center gap-3 bg-slate-800/80 border border-blue-800/50 rounded-lg px-5 py-3 text-sm">
            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center font-bold text-white flex-shrink-0">
              KP
            </div>
            <div className="text-left">
              <p className="font-semibold text-white">Katja Pestereva von Market Compass</p>
              <p className="text-slate-400 text-xs">15+ Jahre Erfahrung · 4 Experten aus Vertrieb, Social Media &amp; Video</p>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         VIDEO PLACEHOLDER
      ══════════════════════════════════════════ */}
      <section className="py-10 bg-[#0B0F1A]">
        <div className="max-w-3xl mx-auto px-4">
          <div className="relative w-full aspect-video rounded-2xl overflow-hidden bg-slate-900 border-2 border-blue-800/50 shadow-2xl shadow-blue-900/30">
            <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/20" />
            {/* Silhouette */}
            <div className="absolute inset-0 flex flex-col items-center justify-center gap-4">
              <div className="w-24 h-24 rounded-full bg-slate-700 flex items-center justify-center">
                <svg className="w-14 h-14 text-slate-500" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
                </svg>
              </div>
              {/* Play button */}
              <div className="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center cursor-pointer hover:scale-110 transition-transform shadow-lg">
                <svg className="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z" />
                </svg>
              </div>
              <p className="text-slate-400 text-sm font-medium">Video: Katja erklärt das Programm</p>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S2 — WHY YOU'LL LOVE THIS
         4 Icon-Kacheln: Format & Rahmen
      ══════════════════════════════════════════ */}
      <section className="py-16 bg-slate-900/60">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>Das Programm</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was dich erwartet</h2>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
            <IconTile icon="📅" title="8 Wochen" text="Schritt für Schritt aufgebaut" />
            <IconTile icon="🎓" title="5 Experten" text="An deiner Seite" />
            <IconTile icon="👥" title="10 Plätze" text="Exklusive Kleingruppe" />
            <IconTile icon="📋" title="25+ Vorlagen" text="Sofort einsetzbar" />
          </div>
          <div className="mt-8 rounded-xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-800/40 p-5 text-sm text-slate-300 text-center">
            <strong className="text-white">Jede Woche:</strong> Workshop (90 Min.) · Tägliche Begleitung in der Messenger-Community · Alle Aufzeichnungen bleiben abrufbar
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S3 — DAS IST KEIN KURS
      ══════════════════════════════════════════ */}
      <section className="py-16">
        <div className="max-w-3xl mx-auto px-4 space-y-5">
          <Badge>Kein Kurs. Ein System.</Badge>
          <h2 className="text-2xl md:text-3xl font-extrabold text-white">Das ist kein weiterer Kurs.</h2>
          <p className="text-slate-300 leading-relaxed">
            Die meisten Programme erklären dir entweder Marketing, Vertrieb oder Social Media — getrennt voneinander. Du gehst mit Wissen nach Hause. Und weißt immer noch nicht, wie das alles zusammenhängt.
          </p>
          <p className="text-slate-300 leading-relaxed">
            Das <strong className="text-white">8-Wochen Kundengewinnungs-System</strong> macht genau das: Marketing, Vertrieb und Social Media — in einem System, das Woche für Woche aufgebaut wird. Mit Katja Pestereva von Market Compass und Experten aus Vertrieb, Social Media und Video.
          </p>
          <p className="text-blue-300 font-semibold">
            Du baust kein neues Wissen auf. Du nimmst alles was du hast — und bringst es in eine Struktur, die planbar die richtigen Kunden anzieht.
          </p>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S3b — NACH 8 WOCHEN NIMMST DU MIT
         Icon-Kacheln 2×4
      ══════════════════════════════════════════ */}
      <section className="py-16 bg-slate-900/60">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>Deine Ergebnisse</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Nach 8 Wochen nimmst du mit:</h2>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
            <IconTile icon="🎯" title="Klare Wunschkunden-Persona" text="+ vollständiger Marketing-Audit" />
            <IconTile icon="💡" title="Dein Angebot auf den Punkt" text="Positionierung in einem Satz" />
            <IconTile icon="📄" title="Deine Verkaufsseite" text="Vollständige Struktur — fertig zum Umsetzen" />
            <IconTile icon="🗓️" title="90-Tage-Marketingplan" text="+ 2 fokussierte Kanäle entschieden" />
            <IconTile icon="📲" title="Content-Plan für 4 Wochen" text="Was, wann und warum du postest" />
            <IconTile icon="🎬" title="Social Media Verkaufsstrategie" text="+ professionelles Video-Setup" />
            <IconTile icon="🤝" title="Dein Verkaufsskript" text="Für Direktansprache und Netzwerk" />
            <IconTile icon="🔍" title="Google Business optimiert" text="+ SEO-Grundlagen für deine Website" />
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S4 — WAS DU IN 8 WOCHEN BAUST (Grid)
      ══════════════════════════════════════════ */}
      <section className="py-16">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>Komplettpaket</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du in 8 Wochen baust — und mit nach Hause nimmst</h2>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              { icon: "🎯", text: "Deinen Wunschkunden klar definiert — wer er ist, was er braucht, was er schon versucht hat" },
              { icon: "💡", text: "Dein Angebot auf den Punkt gebracht — was du anbietest, welches Problem du löst" },
              { icon: "📌", text: "Deine Positionierung in einem Satz — klar, sofort verständlich, für alle Kanäle nutzbar" },
              { icon: "📄", text: "Die komplette Struktur für deine Verkaufsseite — mit Feedback zur Umsetzung" },
              { icon: "🗺️", text: "Deine Marketing-Systemkarte — wie Sichtbarkeit, Vertrauen, Anfrage und Kauf zusammenhängen" },
              { icon: "🗓️", text: "Deinen 90-Tage-Marketingplan + Entscheidung welche 2 Kanäle du fokussierst" },
              { icon: "📲", text: "Deinen 4-Wochen Content-Plan + Themen die zeigen wofür du stehst" },
              { icon: "🚀", text: "Deinen Launch-Plan — wie du dein Angebot aktiv über Social Media in den Markt bringst" },
              { icon: "🎬", text: "Video-Setup erklärt — professionelle Videos mit dem Handy" },
              { icon: "🤝", text: "Dein persönliches Verkaufsskript für Direktansprache und Netzwerk" },
              { icon: "🔍", text: "Dein Google Business Profil optimiert + SEO-Grundlagen für deine Website" },
            ].map(({ icon, text }, i) => (
              <div key={i} className="flex items-start gap-3 rounded-xl bg-slate-800 border border-slate-700 p-4">
                <span className="text-xl flex-shrink-0 mt-0.5">{icon}</span>
                <p className="text-slate-300 text-sm leading-relaxed">{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         MEET THE COACH
         Brunson-Style: Großes Foto + Bio
      ══════════════════════════════════════════ */}
      <section className="py-20 bg-slate-900/60">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-12">
            <Badge>Deine Begleitung</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Meet your Coach</h2>
          </div>
          <div className="grid md:grid-cols-2 gap-10 items-center">
            {/* Foto-Placeholder */}
            <div className="relative rounded-2xl overflow-hidden aspect-[4/5] bg-slate-900 border-2 border-blue-700/50 shadow-2xl shadow-blue-900/30">
              <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 to-purple-900/30" />
              <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-slate-500">
                <svg className="w-28 h-28 opacity-30" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
                </svg>
                <p className="text-xs uppercase tracking-widest opacity-40">Foto Katja Pestereva</p>
              </div>
              {/* Name badge */}
              <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent p-6">
                <p className="font-extrabold text-white text-xl">Katja Pestereva</p>
                <p className="text-blue-300 text-sm">Market Compass · 15+ Jahre Erfahrung</p>
              </div>
            </div>
            {/* Bio */}
            <div className="space-y-5">
              <h3 className="text-xl font-extrabold text-white leading-snug">
                Ich baue aus dem was du hast — ein System das planbar die richtigen Kunden bringt.
              </h3>
              <p className="text-slate-300 leading-relaxed">
                Nicht von vorne anfangen. Nicht noch einen Kurs. Sondern das was schon da ist in eine Struktur bringen die funktioniert.
              </p>
              <p className="text-slate-300 leading-relaxed">
                Dafür habe ich die besten Experten aus den Bereichen zusammengestellt, die Selbstständige am meisten brauchen: Vertrieb, Social Media und Video.
              </p>
              <div className="border-t border-slate-700 pt-5 space-y-3">
                <p className="text-sm font-bold text-white uppercase tracking-wide">Dein Expertenteam:</p>
                {[
                  { name: "Katja Pestereva", role: "Marketing-System, Positionierung, SEO", weeks: "Wochen 1, 2, 3, 4, 8" },
                  { name: "Can Turkdogan", role: "Content-Strategie & Social Media", weeks: "Woche 5" },
                  { name: "Stefan & Philipp · Onlinewerbevideo", role: "Professionelles Filmen & Video-Setup", weeks: "Woche 6" },
                  { name: "Manuela Ludewig", role: "Vertrieb & Direktansprache", weeks: "Woche 7" },
                ].map(({ name, role, weeks }) => (
                  <div key={name} className="flex items-start gap-3">
                    <div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0 mt-1.5" />
                    <div>
                      <span className="font-semibold text-blue-300 text-sm">{name}</span>
                      <span className="text-slate-400 text-sm"> — {role}</span>
                      <span className="text-slate-500 text-xs ml-2">({weeks})</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S6–S8 — MODULE (Thumbnail Cards)
         Modul 1: Wochen 1–2
      ══════════════════════════════════════════ */}
      <section className="py-16">
        <div className="max-w-5xl mx-auto px-4 space-y-14">

          {/* Modul 1 */}
          <div>
            <div className="text-center mb-8">
              <Badge>Modul 1 — Wochen 1 &amp; 2</Badge>
              <h2 className="text-2xl md:text-3xl font-extrabold text-white">
                Wunschkunde, Angebot, Positionierung — alles klar auf den Punkt.
              </h2>
            </div>
            <div className="grid md:grid-cols-2 gap-6">
              <ModuleCard
                week="Woche 1"
                title="Dein Wunschkunde + dein Markt"
                body="Du schaust konkret hin: Wer ist dein Wunschkunde wirklich? Welches Problem hat er — und was hat er schon alles versucht? Was kostet ihn dieses Problem jeden Monat? Du machst einen ehrlichen Marketing-Audit: Was läuft, was nicht — und warum."
                vorlagen="Marketing-Audit-Vorlage · Wunschkunden-Persona-Vorlage"
                result="Klarheit über deinen Wunschkunden — und deinen Marketing-IST-Zustand schwarz auf weiß."
              />
              <ModuleCard
                week="Woche 2"
                title="Dein unwiderstehliches Angebot + deine Positionierung"
                body="Du legst dein Angebot auf den Tisch: Was bietest du genau an? Welches Problem löst du? Dann entwickelst du deine Positionierungsformel — für wen, welches Problem, was macht dich anders. In einem Satz. Du übst ihn live in der Gruppe."
                vorlagen="Positionierungsformel-Vorlage · Kurztext für Website, Instagram-Profil und LinkedIn"
                result="Dein Angebot klar auf den Punkt — kannst in einem Satz erklären was du tust."
              />
            </div>
          </div>

          {/* Modul 2 */}
          <div>
            <div className="text-center mb-8">
              <Badge>Modul 2 — Wochen 3 &amp; 4</Badge>
              <h2 className="text-2xl md:text-3xl font-extrabold text-white">Dein System steht.</h2>
            </div>
            <div className="grid md:grid-cols-2 gap-6">
              <ModuleCard
                week="Woche 3"
                title="Deine Verkaufsseite"
                body="Du lernst wie eine Verkaufsseite aufgebaut sein muss — die 7 Pflicht-Elemente, ihre Reihenfolge, die Psychologie dahinter. Du bekommst die komplette Vorlage. Du setzt es direkt auf deiner Seite um — Katja gibt Feedback."
                vorlagen="Verkaufsseiten-Vorlage + alle Textelemente · 7-Elemente-Checkliste"
                result="Die vollständige Struktur für deine Verkaufsseite — fertig zum Umsetzen."
              />
              <ModuleCard
                week="Woche 4"
                title="Deine Kanal-Strategie + 90-Tage-Marketingplan"
                body="Welche 2 Kanäle fokussierst du — auf Basis deiner Zielgruppe, nicht dem was gerade alle machen. Du baust deine Marketing-Systemkarte und startest deinen 90-Tage-Plan."
                vorlagen="Kanal-Entscheidungsmatrix · Marketing-Systemkarte · 90-Tage-Marketingplan"
                result="Gewusst welche 2 Kanäle du fokussierst — und deinen 90-Tage-Plan begonnen."
              />
            </div>
          </div>

          {/* Modul 3 */}
          <div>
            <div className="text-center mb-8">
              <Badge>Modul 3 — Wochen 5–8</Badge>
              <h2 className="text-2xl md:text-3xl font-extrabold text-white">Sichtbarkeit. Anfragen. Und du weißt wie es weitergeht.</h2>
            </div>
            <div className="grid md:grid-cols-2 gap-6">
              <ModuleCard
                week="Woche 5"
                expert="Can Turkdogan"
                title="Dein Content-System"
                body="Deine 3–4 Content-Themen — die zeigen wofür du stehst. Du erstellst live deinen 4-Wochen-Redaktionsplan. Schreibst deinen ersten Hook. Und weißt genau: was du postest, wann, und warum."
                vorlagen="Content-Säulen-Template · 4-Wochen-Redaktionsplan · 10 bewährte Hook-Formeln"
                result="Deinen Content-Plan für 4 Wochen — weißt genau was und wie du postest."
              />
              <ModuleCard
                week="Woche 6"
                expert="Stefan & Philipp · OWV"
                title="Social Media Verkauf + Video-Setup"
                body="Du lernst wie du dein Angebot aktiv über Social Media verkaufst — mit Strategie, nicht mit Druck. Die Video-Experten zeigen live: Professionelle Videos mit dem Handy."
                vorlagen="Launch-Checkliste · Equipment-Checkliste · Filming-Guide"
                result="Plan wie du dein Angebot über Social Media verkaufst + professionell auf Video erscheinst."
              />
              <ModuleCard
                week="Woche 7"
                expert="Manuela Ludewig"
                title="Verkauf + Direktansprache"
                body="Dein persönliches Verkaufsskript für die Direktansprache — angepasst auf deine Positionierung. Du übst es live in der Gruppe. Mit Plan für deine nächsten Kontakte."
                vorlagen="Persönliches Verkaufsskript · Follow-up-Template · Event-Recherche-Guide"
                result="Dein Verkaufsskript für die Direktansprache — und hast es einmal geübt."
              />
              <ModuleCard
                week="Woche 8"
                expert="Katja Pestereva"
                title="Sichtbarkeit auf Google + Abschluss"
                body="Du optimierst dein Google Business Profil — Schritt für Schritt in der Gruppe. Du bringst deine Website auf die Grundlagen die Google belohnt. In der Abschlussrunde: Was hat sich in 8 Wochen verändert?"
                vorlagen="SEO-Checkliste · Keyword-Recherche-Vorlage · Website-Leitfaden"
                result="Google Business vollständig optimiert + Seite für dein Haupt-Keyword vorbereitet."
              />
            </div>
          </div>

        </div>
      </section>

      {/* ══════════════════════════════════════════
         S9 — VORHER / NACHHER
      ══════════════════════════════════════════ */}
      <section className="py-16 bg-slate-900/60">
        <div className="max-w-4xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>Transformation</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Vorher. Nachher.</h2>
          </div>
          <div className="grid md:grid-cols-2 gap-4">
            {[
              ["\u201EIch wei\xDF viel \u2014 aber niemand fragt an.\u201C", "Positionierung in einem Satz. System das Anfragen bringt."],
              ["\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C", "Content-Plan f\xFCr alle Plattformen \u2014 du wei\xDFt was, wann, warum."],
              ["\u201EIch wei\xDF nicht wie Marketing und Vertrieb zusammenh\xe4ngen.\u201C", "Marketing-Systemkarte. Alle Teile greifen ineinander."],
              ["\u201EIch warte dass Kunden kommen.\u201C", "Verkaufsskript. Direktansprache. Ich gehe hin."],
              ["\u201EIch werde online nicht gefunden.\u201C", "Google Business optimiert. Seite f\xFCr mein Keyword."],
              ["\u201ENach jedem Kurs fange ich wieder bei null an.\u201C", "Ein System aus Marketing, Vertrieb und Social Media \u2014 das weiterl\xe4uft."],
            ].map(([before, after], i) => (
              <div key={i} className="grid grid-cols-2 rounded-xl overflow-hidden border border-slate-700">
                <div className="bg-slate-800 p-4 text-slate-400 italic text-sm">{before}</div>
                <div className="bg-gradient-to-r from-blue-900/40 to-purple-900/40 p-4 text-slate-200 text-sm font-medium border-l border-blue-800/50">
                  {after}
                </div>
              </div>
            ))}
          </div>
          <p className="mt-8 text-center text-blue-300 font-semibold text-lg">
            Dein Wissen war schon da. Jetzt hat es eine Struktur die Kunden bringt.
          </p>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S10 — TESTIMONIALS
      ══════════════════════════════════════════ */}
      <section className="py-16">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>Erfahrungen</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was Selbstständige über die Zusammenarbeit mit Katja sagen</h2>
            <p className="text-slate-400 text-sm mt-2 italic">Das Programm startet Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Katja.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {[1, 2, 3].map((i) => (
              <div key={i} className="rounded-xl bg-slate-800 border border-slate-700 p-6 space-y-3">
                <div className="flex gap-1 text-yellow-400">{"★★★★★"}</div>
                <p className="text-slate-400 italic text-sm">[Google-Bewertung {i} einfügen]</p>
                <div className="flex items-center gap-3 border-t border-slate-700 pt-3">
                  <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex-shrink-0" />
                  <p className="text-slate-500 text-xs">— [Name, Berufsfeld]</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S11 — BONUS
      ══════════════════════════════════════════ */}
      <section className="py-16 bg-slate-900/60">
        <div className="max-w-5xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>Bonus-Paket</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Und du bist während und nach dem Programm nie allein.</h2>
          </div>
          <div className="rounded-xl bg-gradient-to-r from-blue-900/30 to-purple-900/30 border border-blue-700/50 p-6 mb-8 text-center">
            <p className="text-slate-200 leading-relaxed">
              <strong className="text-white">Die gesamten 8 Wochen:</strong> Täglich Fragen stellen in der Messenger-Community. Katja antwortet. Kein Kurs bei dem du alleine vorankommst — 8 Wochen tägliche Begleitung.
            </p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {[
              { n: 1, icon: "📦", title: "Sofort loslegen: 7 fertige Vorlagen", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", val: "497 €" },
              { n: 2, icon: "📱", title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", val: "297 €" },
              { n: 3, icon: "🎬", title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Trotzdem professionell. Die Grundlagen von den Video-Experten.", val: "197 €" },
              { n: 4, icon: "🗺️", title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten mehr — du weißt auf welcher Plattform deine Wunschkunden sind.", val: "147 €" },
              { n: 5, icon: "💬", title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen.", val: "97 €" },
              { n: 6, icon: "🤝", title: "Abschluss-Netzwerkevent (geplant)", desc: "Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", val: "197 €" },
            ].map(({ n, icon, title, desc, val }) => (
              <div key={n} className="rounded-xl bg-slate-800 border border-slate-700 p-5 space-y-2">
                <div className="flex items-center gap-2">
                  <span className="text-xl">{icon}</span>
                  <span className="text-xs font-bold text-blue-400 uppercase">Bonus {n}</span>
                  <span className="ml-auto text-xs font-bold text-green-400 bg-green-900/30 border border-green-800 rounded px-2 py-0.5">Wert: {val}</span>
                </div>
                <p className="font-semibold text-white text-sm">{title}</p>
                <p className="text-slate-400 text-xs">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S12 — VALUE STACK + PREIS
      ══════════════════════════════════════════ */}
      <section id="platz-sichern" className="py-20">
        <div className="max-w-2xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>Dein Investment</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Was du bekommst — und was es wert ist.</h2>
          </div>
          <div className="rounded-2xl overflow-hidden border border-slate-700">
            <table className="w-full text-sm">
              <tbody>
                {[
                  ["8-Wochen Programm (Marketing · Vertrieb · Social Media · Video)", "3.000 €"],
                  ["Bonus 1: Sofort loslegen — 7 fertige Vorlagen", "497 €"],
                  ["Bonus 2: Kunden gewinnen über Instagram", "297 €"],
                  ["Bonus 3: Professionell filmen mit dem Handy", "197 €"],
                  ["Bonus 4: Welche Plattform passt zu dir?", "147 €"],
                  ["Bonus 5: 1 Monat Begleitung nach dem Programm", "97 €"],
                  ["Bonus 6: Abschluss-Netzwerkevent (geplant, Pilot exklusiv)", "197 €"],
                ].map(([label, val], i) => (
                  <tr key={i} className={`border-b border-slate-700 ${i % 2 === 0 ? "bg-slate-900/50" : "bg-slate-800/50"}`}>
                    <td className="p-4 text-slate-300">{label}</td>
                    <td className="p-4 text-right text-slate-300 font-mono whitespace-nowrap">{val}</td>
                  </tr>
                ))}
                <tr className="bg-gradient-to-r from-blue-900/60 to-purple-900/60 border-t-2 border-blue-500">
                  <td className="p-4 font-extrabold text-white text-base">Gesamtwert</td>
                  <td className="p-4 text-right font-extrabold text-white font-mono text-base">4.432 €</td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* Preis */}
          <div className="mt-10 text-center space-y-5">
            <p className="text-slate-400 text-sm line-through">Regulär 3.000 €</p>
            <p className="text-7xl md:text-8xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent leading-none">
              500 €
            </p>
            <p className="text-xl text-slate-300 font-semibold">gesamt · 2 × 250 € / Monat</p>

            <div className="rounded-xl bg-slate-800 border border-slate-700 p-5 text-left text-sm text-slate-300">
              <strong className="text-white block mb-1">Warum dieser Preis?</strong>
              Das ist der erste Durchlauf. Du bekommst das vollständige Programm — mit allen Experten, allen Vorlagen, aller Begleitung. Im Gegenzug gibst du nach jeder Woche direktes Feedback. Das hilft das Programm für alle künftigen Teilnehmenden zu verbessern.
            </div>

            {/* Garantie */}
            <div className="rounded-xl border border-green-700 bg-green-900/20 p-5 text-left space-y-3 text-sm">
              <p className="font-extrabold text-white text-base">Mein Versprechen an dich:</p>
              <div className="flex items-start gap-3">
                <span className="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center text-white text-xs flex-shrink-0 mt-0.5">✓</span>
                <p className="text-slate-300"><strong>14-Tage-Ausstiegsrecht</strong> — nach der ersten Session, ohne Fragen, voller Betrag zurück.</p>
              </div>
              <div className="flex items-start gap-3">
                <span className="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center text-white text-xs flex-shrink-0 mt-0.5">✓</span>
                <p className="text-slate-300"><strong>Kostenlose Verlängerung*</strong> — Ziel nicht erreicht nach 8 Wochen? Kostenlos um 4 Wochen verlängern.</p>
              </div>
              <p className="text-xs text-slate-500 italic">* Gilt wenn du aktiv teilgenommen und die wöchentlichen Aufgaben umgesetzt hast.</p>
            </div>

            <Btn xl>Meinen Platz sichern →</Btn>
            <p className="text-sm text-slate-400">Maximal 10 Plätze · Start: 1. Juli 2027 · Du entscheidest nach unserem ersten Gespräch.</p>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         S13 — FAQ
      ══════════════════════════════════════════ */}
      <section className="py-16 bg-slate-900/60">
        <div className="max-w-3xl mx-auto px-4">
          <div className="text-center mb-10">
            <Badge>FAQ</Badge>
            <h2 className="text-2xl md:text-3xl font-extrabold text-white">Häufige Fragen</h2>
          </div>
          <div className="space-y-3">
            {[
              { q: "Für wen ist das Programm?", a: "Für Selbstständige die ihr Fachgebiet kennen — aber noch kein System haben das planbar Wunschkunden bringt. Coaches, Berater, Trainer, Stilisten, Kreative, Therapeuten. Entscheidend ist: du verkaufst dein Wissen oder deine Fähigkeiten, und willst aufhören zu warten dass Kunden kommen." },
              { q: "Was ist hier anders als bei anderen Kursen?", a: "Du bekommst kein neues Wissen. Du bringst alles was du hast in ein System. Live, mit Feedback, in einer kleinen Gruppe. Am Ende steht nicht ein Zertifikat — sondern eine fertige Verkaufsseiten-Struktur, ein Marketingplan, ein Verkaufsskript." },
              { q: "Wie viel Zeit brauche ich pro Woche?", a: "Plan 3–4 Stunden ein: 90 Minuten Workshop + die wöchentliche Aufgabe. Alle Aufzeichnungen bleiben abrufbar — wenn eine Woche stressiger ist, holst du nach." },
              { q: "Was wenn ich eine Session verpasse?", a: "Alle Workshops werden aufgezeichnet. Du holst nach wann es passt. Du verpasst nichts." },
              { q: "Wann startet das Programm — und wie melde ich mich an?", a: "Start: 1. Juli 2027. Maximal 10 Plätze verfügbar. Schreib dich für ein Gespräch ein — dort schauen wir gemeinsam ob das Programm zu dir passt." },
              { q: "Was wenn es mir nichts bringt?", a: "14-Tage-Ausstiegsrecht nach der ersten Session — voller Betrag zurück, keine Fragen. Ziel nicht erreicht nach 8 Wochen? Kostenlose Verlängerung um 4 Wochen.* (* Gilt wenn du aktiv teilgenommen und die Aufgaben umgesetzt hast.)" },
              { q: "Ich bin nicht sicher ob ich die Zeit habe.", a: "Das klären wir im Gespräch. Wir schauen zusammen auf deine Situation — und sagen dir ehrlich ob das jetzt der richtige Zeitpunkt ist." },
              { q: "Was genau zahle ich?", a: "500 € gesamt — 2 × 250 € / Monat. Das ist der Pilotpreis für den ersten Durchlauf. Der reguläre Preis liegt bei 3.000 €." },
            ].map(({ q, a }, i) => (
              <details key={i} className="group rounded-xl bg-slate-800 border border-slate-700 overflow-hidden">
                <summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-white list-none">
                  {q}
                  <span className="text-blue-400 group-open:rotate-180 transition-transform flex-shrink-0 ml-4">▼</span>
                </summary>
                <div className="px-5 pb-5 text-slate-300 text-sm leading-relaxed border-t border-slate-700 pt-4">{a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
         ABSCHLUSS-CTA
      ══════════════════════════════════════════ */}
      <section className="py-24 bg-gradient-to-b from-[#0B0F1A] to-slate-950 text-center">
        <div className="max-w-2xl mx-auto px-4 space-y-6">
          <h2 className="text-3xl md:text-5xl font-extrabold text-white leading-tight">
            Dein Wissen ist da.{" "}
            <span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
              Jetzt bekommt es die Struktur die Kunden bringt.
            </span>
          </h2>
          <p className="text-slate-400">Maximal 10 Plätze · Start: 1. Juli 2027</p>
          <Btn xl>Meinen Platz sichern →</Btn>
          <p className="text-sm text-slate-500">Ein kurzes Gespräch — du entscheidest danach.</p>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-slate-800 py-6 text-center text-xs text-slate-600">
        © 2026 Market Compass · Katja Pestereva
      </footer>

    </main>
  );
}