import Image from "next/image";
import WeekTimeline from "./components/WeekTimeline";
import FlipCards from "./components/FlipCards";
import BonusCards from "./components/BonusCards";
import MountainClimb from "./components/MountainClimb";
import {
  CalendarIcon, GradCapIcon, UsersIcon, ClipboardIcon, CheckIcon,
} from "./components/Icons";

const CTA_HREF = "#platz-sichern";

function Btn({ href = CTA_HREF, children, xl = false }: {
  href?: string; children: React.ReactNode; xl?: boolean;
}) {
  return (
    <a href={href} className={`mc-btn inline-block text-center uppercase tracking-wide ${
      xl ? "px-12 py-5 text-xl md:text-2xl" : "px-8 py-3.5 text-base"
    }`}>
      {children}
    </a>
  );
}

function Pill({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-widest rounded-full px-4 py-2 border border-indigo-100">
      <span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
      {children}
    </span>
  );
}

function IconCard({ icon, title, sub }: { icon: React.ReactNode; title: string; sub: string }) {
  return (
    <div className="mc-card p-6 flex flex-col items-center text-center gap-3" style={{ boxShadow: "inset 0 3px 0 #6366f1, 0 2px 12px rgba(99,102,241,0.06)" }}>
      <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 flex items-center justify-center shadow-lg">
        {icon}
      </div>
      <p className="font-bold text-slate-900 text-base leading-snug">{title}</p>
      <p className="text-slate-500 text-sm leading-relaxed">{sub}</p>
    </div>
  );
}


export default function Home() {
  return (
    <div className="min-h-screen">

      {/* ── NAV ── */}
      <nav className="mc-nav-bg sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
          <span className="font-extrabold text-xl text-white tracking-tight">
            Market <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">Compass</span>
          </span>
          <Btn>Meinen Platz sichern →</Btn>
        </div>
      </nav>

      {/* ══════════════════════════════════════════
          S1 — HERO
          Brunson: Headline · Subline · CTA — das wars
      ══════════════════════════════════════════ */}
      <section className="py-24 lg:py-32 text-center relative overflow-hidden">
        <div className="absolute inset-0" style={{ background: "radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.08) 0%, transparent 70%)" }} />
        <div className="relative max-w-4xl mx-auto px-6 space-y-7">
          <Pill>Online Gruppencoaching · Pilotprogramm · Start 1. Juli 2027</Pill>

          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] tracking-tight">
            In 8 Wochen zu deinem eigenen{" "}
            <span className="bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent">
              Kundengewinnungs-System
            </span>{" "}
            — speziell für Selbstständige
          </h1>

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

          <div className="flex flex-col items-center gap-4">
            <Btn xl>Meinen Platz sichern →</Btn>
            <p className="text-sm text-slate-500">
              Exklusive Kleingruppe · Maximal 10 Plätze
            </p>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          VIDEO — direkt unter dem Hero
      ══════════════════════════════════════════ */}
      <section className="pb-20">
        <div className="max-w-3xl mx-auto px-6">
          <div className="mc-card overflow-hidden shadow-2xl shadow-indigo-100">
            <div className="relative w-full aspect-video bg-slate-50 flex items-center justify-center">
              <div className="absolute inset-0 bg-gradient-to-br from-indigo-50 to-violet-50" />
              {/* Katja Foto als Video-Preview */}
              <div className="absolute inset-0 overflow-hidden">
                <Image
                  src="/katja/katja-1.jpg"
                  alt="Katja Pestereva — Market Compass"
                  fill
                  className="object-cover object-top opacity-30"
                  sizes="(max-width: 768px) 100vw, 896px"
                />
              </div>
              <div className="relative flex flex-col items-center gap-4">
                <div className="w-20 h-20 rounded-full mc-btn flex items-center justify-center shadow-2xl cursor-pointer hover:scale-110 transition-transform">
                  <svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                </div>
                <p className="text-slate-600 text-sm font-medium bg-white/80 backdrop-blur px-4 py-2 rounded-full">
                  Katja erklärt das Programm — Video folgt
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          S2 — WHY YOU'LL LOVE THIS
          4 Icon-Kacheln: Format & Zahlen
      ══════════════════════════════════════════ */}
      <section className="py-20 bg-white">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-12">
            <Pill>Das Programm auf einen Blick</Pill>
            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was dich erwartet</h2>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <IconCard icon={<CalendarIcon className="w-7 h-7 text-white" />} title="8 Wochen" sub="Schritt für Schritt aufgebaut — Woche für Woche" />
            <IconCard icon={<GradCapIcon className="w-7 h-7 text-white" />} title="5 Experten" sub="An deiner Seite — aus Vertrieb, Social Media & Video" />
            <IconCard icon={<UsersIcon className="w-7 h-7 text-white" />} title="10 Plätze" sub="Exklusive Kleingruppe — maximale Aufmerksamkeit" />
            <IconCard icon={<ClipboardIcon className="w-7 h-7 text-white" />} title="25+ Vorlagen" sub="Praxis-Vorlagen die du sofort einsetzen kannst" />
          </div>
          <div className="mt-8 mc-card p-5 text-center text-slate-600 text-sm">
            <strong className="text-slate-900">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-20">
        <div className="max-w-3xl mx-auto px-6 space-y-6">
          <Pill>Kein Kurs. Ein System.</Pill>
          <h2 className="text-3xl md:text-4xl font-extrabold text-slate-900">Das ist kein weiterer Kurs.</h2>
          <p className="text-slate-600 leading-relaxed text-lg">
            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-600 leading-relaxed text-lg">
            Das <strong className="text-slate-900">8-Wochen Kundengewinnungs-System</strong> macht genau das: Marketing, Vertrieb und Social Media — in einem System, das Woche für Woche aufgebaut wird.
          </p>
          <p className="text-slate-800 font-semibold text-lg leading-relaxed">
            Kein Theorie-Overload. Du nimmst alles was du hast — und setzt es endlich in eine Struktur um, die planbar die richtigen Kunden anzieht.
          </p>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          CTA STRIP — dark
      ══════════════════════════════════════════ */}
      <section className="mc-dark-bg py-16 text-center">
        <div className="max-w-2xl mx-auto px-6 space-y-5">
          <h2 className="text-2xl md:text-3xl font-extrabold" style={{ color: "#ffffff" }}>
            Sichere dir jetzt deinen Platz.
          </h2>
          <p style={{ color: "#e2e8f0" }}>Start: 1. Juli 2027 · Pilotpreis: 500 € (statt 3.000 €)</p>
          <Btn xl>Meinen Platz sichern →</Btn>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          S3b — NACH 8 WOCHEN NIMMST DU MIT
          Mountain animation (ersetzt Kacheln)
      ══════════════════════════════════════════ */}
      <MountainClimb />

      {/* ══════════════════════════════════════════
          MEET THE COACH — Brunson-Style
          Echtes Foto links + Bio rechts
      ══════════════════════════════════════════ */}
      <section className="py-20 bg-white">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-12">
            <Pill>Deine Begleitung</Pill>
            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Meet your Coach</h2>
          </div>
          <div className="mc-card overflow-hidden grid md:grid-cols-2 gap-0">
            {/* Foto */}
            <div className="relative min-h-[480px] md:min-h-[560px] bg-slate-100">
              <Image
                src="/katja/katja-1.jpg"
                alt="Katja Pestereva — Market Compass"
                fill
                className="object-cover object-top"
                sizes="(max-width: 768px) 100vw, 50vw"
                priority
              />
              {/* Name-Overlay unten */}
              <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/60 to-transparent p-6">
                <p className="font-extrabold text-white text-lg">Katja Pestereva</p>
                <p className="text-indigo-300 text-sm">Market Compass · 15+ Jahre Erfahrung</p>
              </div>
            </div>
            {/* Bio */}
            <div className="p-8 md:p-10 flex flex-col justify-center space-y-5">
              <h3 className="text-2xl font-extrabold text-slate-900 leading-snug">
                Ich baue aus dem was du hast — ein System das planbar Kunden bringt.
              </h3>
              <p className="text-slate-600 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-600 leading-relaxed">
                Dafür habe ich die besten Experten aus den Bereichen zusammengestellt die Selbstständige am meisten brauchen: Vertrieb, Social Media und Video. Damit du nicht nur weißt was zu tun ist — sondern wie es in deinem Business konkret aussieht.
              </p>
              <div className="border-t border-slate-100 pt-5 space-y-3">
                <p className="text-xs font-bold text-slate-400 uppercase tracking-widest">Dein Expertenteam:</p>
                {[
                  { name: "Katja Pestereva", role: "Marketing-System, Positionierung, SEO", weeks: "Wo. 1, 2, 3, 4, 8" },
                  { name: "Can Turkdogan", role: "Content-Strategie & Social Media", weeks: "Woche 5" },
                  { name: "Stefan & Philipp · OWV", role: "Professionelles Filmen & Video", weeks: "Woche 6" },
                  { name: "Manuela Ludewig", role: "Vertrieb & Direktansprache", weeks: "Woche 7" },
                ].map(({ name, role, weeks }) => (
                  <div key={name} className="flex items-start gap-2 text-sm">
                    <div className="w-1.5 h-1.5 rounded-full bg-indigo-500 flex-shrink-0 mt-2" />
                    <div>
                      <span className="font-semibold text-slate-800">{name}</span>
                      <span className="text-slate-500"> — {role}</span>
                      <span className="text-slate-400 text-xs ml-1">({weeks})</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <WeekTimeline />

      <FlipCards />

      {/* ══════════════════════════════════════════
          TESTIMONIALS
      ══════════════════════════════════════════ */}
      <section className="py-20">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-12">
            <Pill>Erfahrungen</Pill>
            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was unsere Kunden über unsere Zusammenarbeit sagen</h2>
            <p className="mt-2 text-slate-500 text-sm italic">Das Programm startet Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Market Compass.</p>
          </div>

          {/* Featured — Varvara (stärkste Geschichte) */}
          <div className="mc-card p-6 md:p-8 mb-6" style={{ boxShadow: "inset 0 3px 0 #6366f1, 0 2px 12px rgba(99,102,241,0.06)" }}>
            <div className="flex flex-col sm:flex-row gap-6">
              <div className="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 bg-indigo-100">
                <Image src="/testimonials/varvara.png" alt="Varvara Beloussova" fill className="object-cover" sizes="64px" />
              </div>
              <div className="space-y-3 flex-1">
                <div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
                <p className="text-slate-600 leading-relaxed italic">
                  „Ich hatte einen Online-Kurs für angehende Psycholog:innen vorbereitet, viel Energie hineingesteckt — aber über Instagram kamen einfach keine Anfragen. Unsere Beratung war kein oberflächliches ‚Marketing-Gerede', sondern ein sehr ehrlicher, klarer Blick auf meine Situation. Mir wurde erklärt, dass meine Zielgruppe schlicht nicht in meinem Instagram vertreten ist — und ich bekam ganz konkrete nächste Schritte. Schon am nächsten Tag waren 6 von 12 Plätzen vergeben! Warm, menschlich und gleichzeitig unglaublich präzise und professionell. Ich würde Market Compass von ganzem Herzen empfehlen."
                </p>
                <div className="border-t border-slate-100 pt-3">
                  <p className="font-semibold text-slate-900 text-sm">Varvara Beloussova</p>
                  <p className="text-slate-400 text-xs">Online-Kurs für Psycholog:innen</p>
                </div>
              </div>
            </div>
          </div>

          {/* 3 weitere Bewertungen */}
          <div className="grid md:grid-cols-3 gap-6">
            {/* Anke */}
            <div className="mc-card p-6 space-y-4">
              <div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
              <p className="text-slate-500 italic text-sm leading-relaxed">
                „Frau Pestereva überzeugt durch ihre überaus hohe fachliche Kompetenz, ihre schnelle und zuverlässige Unterstützung sowie ihre sehr freundliche Art. Die Kommunikation verlief stets unkompliziert, schnell und lösungsorientiert. Ich kann Market Compass uneingeschränkt weiterempfehlen."
              </p>
              <div className="flex items-center gap-3 border-t border-slate-100 pt-4">
                <div className="relative w-9 h-9 rounded-full overflow-hidden flex-shrink-0 bg-indigo-100">
                  <Image src="/testimonials/anke.png" alt="Anke Rühle-Metz" fill className="object-cover" sizes="36px" />
                </div>
                <div>
                  <p className="font-semibold text-slate-900 text-xs">Anke Rühle-Metz</p>
                  <p className="text-slate-400 text-xs">Unternehmerin</p>
                </div>
              </div>
            </div>

            {/* Onlinewerbevideo */}
            <div className="mc-card p-6 space-y-4">
              <div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
              <p className="text-slate-500 italic text-sm leading-relaxed">
                „Auch wenn wir schon eine Weile als Videoproduktion in der Marketing-Welt unterwegs sind, konnten wir noch sehr viel in unseren Sessions mitnehmen. Allein die Zielgruppenanalyse war es wert — wir freuen uns auf die weitere Zusammenarbeit."
              </p>
              <div className="flex items-center gap-3 border-t border-slate-100 pt-4">
                <div className="relative w-9 h-9 rounded-full overflow-hidden flex-shrink-0 bg-indigo-100">
                  <Image src="/testimonials/onlinewerbevideo.png" alt="Onlinewerbevideo" fill className="object-cover" sizes="36px" />
                </div>
                <div>
                  <p className="font-semibold text-slate-900 text-xs">Onlinewerbevideo</p>
                  <p className="text-slate-400 text-xs">Videoproduktion</p>
                </div>
              </div>
            </div>

            {/* Ines */}
            <div className="mc-card p-6 space-y-4">
              <div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
              <p className="text-slate-500 italic text-sm leading-relaxed">
                „Sehr kompetent, gehen individuell auf die Kunden ein, hören sehr gut zu und erarbeiten marktfähige Konzepte. Das Personal ist super nett."
              </p>
              <div className="flex items-center gap-3 border-t border-slate-100 pt-4">
                <div className="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 flex-shrink-0" />
                <div>
                  <p className="font-semibold text-slate-900 text-xs">Ines Thiele-Seidel</p>
                  <p className="text-slate-400 text-xs">Unternehmerin</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          BONUS
      ══════════════════════════════════════════ */}
      <section className="py-20 bg-white">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-12">
            <Pill>Bonus-Paket</Pill>
            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Hier ist alles was du HEUTE zusätzlich zum Coaching Programm erhältst.</h2>
            <p className="mt-3 text-slate-500 text-lg">Alles was du brauchst, um dein Business richtig voran zu bringen.</p>
          </div>
          <div className="mc-card p-6 mb-8 bg-gradient-to-r from-indigo-50 to-violet-50 border-indigo-100 text-center">
            <p className="text-slate-700 leading-relaxed">
              <strong>Die gesamten 8 Wochen:</strong> In der Messenger-Community beantwortet Katja täglich Fragen. Du kannst jederzeit posten — Feedback kommt. 8 Wochen tägliche Begleitung.
            </p>
          </div>
          <BonusCards />
        </div>
      </section>

      {/* ══════════════════════════════════════════
          VALUE STACK + PREIS
      ══════════════════════════════════════════ */}
      <section id="platz-sichern" className="py-20">
        <div className="max-w-2xl mx-auto px-6">
          <div className="text-center mb-10">
            <Pill>Dein Investment</Pill>
            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was du bekommst — und was es wert ist.</h2>
          </div>
          <div className="mc-card overflow-hidden">
            <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-100 ${i % 2 === 0 ? "bg-white" : "bg-slate-50"}`}>
                    <td className="p-4 text-slate-600">{label}</td>
                    <td className="p-4 text-right text-slate-500 font-mono whitespace-nowrap">{val}</td>
                  </tr>
                ))}
                <tr style={{ background: "linear-gradient(135deg,#eef2ff,#f5f3ff)" }}>
                  <td className="p-4 font-extrabold text-slate-900 text-base">Gesamtwert</td>
                  <td className="p-4 text-right font-extrabold text-indigo-700 text-base font-mono">4.432 €</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div className="mt-12 text-center space-y-6">
            <p className="text-slate-400 line-through text-sm">Regulär 3.000 €</p>
            <p className="text-8xl font-extrabold bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent leading-none">
              500 €
            </p>
            <p className="text-xl text-slate-700 font-semibold">gesamt · 2 × 250 € / Monat</p>

            <div className="mc-card p-6 text-left space-y-2 bg-indigo-50 border-indigo-100">
              <p className="font-bold text-slate-900">Warum dieser Preis?</p>
              <p className="text-slate-600 text-sm leading-relaxed">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. Du profitierst vom vollen Programm — und das Programm profitiert von deiner ehrlichen Rückmeldung.</p>
            </div>

            <div className="mc-card p-6 text-left space-y-3 border-emerald-200 bg-emerald-50">
              <p className="font-bold text-slate-900 text-base">Mein Versprechen an dich:</p>
              <div className="flex items-start gap-3">
                <span className="w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center text-white flex-shrink-0 mt-0.5"><CheckIcon className="w-3 h-3" /></span>
                <p className="text-slate-700 text-sm"><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-emerald-500 flex items-center justify-center text-white flex-shrink-0 mt-0.5"><CheckIcon className="w-3 h-3" /></span>
                <p className="text-slate-700 text-sm"><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-500">Maximal 10 Plätze · Start: 1. Juli 2027 · Du entscheidest nach unserem ersten Gespräch.</p>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          FAQ
      ══════════════════════════════════════════ */}
      <section className="py-20 bg-white">
        <div className="max-w-3xl mx-auto px-6">
          <div className="text-center mb-12">
            <Pill>FAQ</Pill>
            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">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. Dinge die sofort eingesetzt werden können." },
              { 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 und deiner Situation 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="mc-card overflow-hidden group">
                <summary className="flex justify-between items-center p-5 cursor-pointer font-semibold text-slate-900 list-none">
                  {q}
                  <span className="text-indigo-500 group-open:rotate-180 transition-transform flex-shrink-0 ml-4 text-sm">▼</span>
                </summary>
                <div className="px-5 pb-5 text-slate-600 text-base leading-relaxed border-t border-slate-100 pt-4">{a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          ABSCHLUSS-CTA — dark
      ══════════════════════════════════════════ */}
      <section className="mc-dark-bg py-24 text-center">
        <div className="max-w-2xl mx-auto px-6 space-y-7">
          <h2 className="text-3xl md:text-5xl font-extrabold leading-tight" style={{ color: "#ffffff" }}>
            Dein Wissen ist da.{" "}
            <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">
              Jetzt bekommt es die Struktur die Kunden bringt.
            </span>
          </h2>
          <p style={{ color: "#e2e8f0" }}>Maximal 10 Plätze · Start: 1. Juli 2027</p>
          <Btn xl>Meinen Platz sichern →</Btn>
          <p className="text-sm" style={{ color: "#cbd5e1" }}>Ein kurzes Gespräch — du entscheidest danach.</p>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="mc-nav-bg py-8 text-center text-xs" style={{ color: "#cbd5e1" }}>
        © 2026 Market Compass · Katja Pestereva
      </footer>

    </div>
  );
}