import Image from "next/image";
import WeekTimeline from "./components/WeekTimeline";
import FlipCards from "./components/FlipCards";
import MountainClimb from "./components/MountainClimb";
import {
  CalendarIcon, GradCapIcon, UsersIcon, ClipboardIcon,
  TargetIcon, LightbulbIcon, DocumentIcon, PhoneIcon,
  VideoCameraIcon, HandshakeIcon, SearchIcon, MapIcon,
  PackageIcon, ChatIcon, 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 · Nur noch 8 frei
            </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">
            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>

      {/* ══════════════════════════════════════════
          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 text-white">
            Nur noch <span className="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">8 Plätze</span> verfügbar.
          </h2>
          <p className="text-slate-400">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
          2×4 Icon-Kacheln
      ══════════════════════════════════════════ */}
      <section className="py-20 bg-white">
        <div className="max-w-5xl mx-auto px-6">
          <div className="text-center mb-12">
            <Pill>Deine Ergebnisse</Pill>
            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Nach 8 Wochen nimmst du mit:</h2>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
            <IconCard icon={<TargetIcon className="w-7 h-7 text-white" />} title="Klare Wunschkunden-Persona" sub="+ vollständiger Marketing-Audit" />
            <IconCard icon={<LightbulbIcon className="w-7 h-7 text-white" />} title="Angebot auf den Punkt" sub="Positionierung in einem Satz — für alle Kanäle" />
            <IconCard icon={<DocumentIcon className="w-7 h-7 text-white" />} title="Deine Verkaufsseite" sub="Vollständige Struktur — fertig zum Umsetzen" />
            <IconCard icon={<CalendarIcon className="w-7 h-7 text-white" />} title="90-Tage-Marketingplan" sub="+ 2 fokussierte Kanäle entschieden" />
            <IconCard icon={<PhoneIcon className="w-7 h-7 text-white" />} title="Content-Plan 4 Wochen" sub="Was, wann und warum du postest" />
            <IconCard icon={<VideoCameraIcon className="w-7 h-7 text-white" />} title="Social Media Verkauf" sub="+ professionelles Video-Setup mit dem Handy" />
            <IconCard icon={<HandshakeIcon className="w-7 h-7 text-white" />} title="Dein Verkaufsskript" sub="Für Direktansprache und Netzwerkveranstaltungen" />
            <IconCard icon={<SearchIcon className="w-7 h-7 text-white" />} title="Google Business optimiert" sub="+ SEO-Grundlagen für deine Website" />
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════
          S4 — WAS DU BAUST (Mountain animation)
      ══════════════════════════════════════════ */}
      <MountainClimb />

      <WeekTimeline />

      <FlipCards />

      {/* ══════════════════════════════════════════
          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>

      {/* ══════════════════════════════════════════
          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 Selbstständige über die Zusammenarbeit mit Katja 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 Katja.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {[1, 2, 3].map((i) => (
              <div key={i} 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">[Google-Bewertung {i} einfügen]</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" />
                  <p className="text-slate-400 text-xs">— [Name, Berufsfeld]</p>
                </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">Und du bist während und nach dem Programm nie allein.</h2>
          </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>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {[
              { n: 1, icon: <PackageIcon className="w-6 h-6 text-indigo-500" />, title: "Sofort loslegen: 7 fertige Vorlagen", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", val: "497 €" },
              { n: 2, icon: <PhoneIcon className="w-6 h-6 text-indigo-500" />, title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", val: "297 €" },
              { n: 3, icon: <VideoCameraIcon className="w-6 h-6 text-indigo-500" />, title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Die Grundlagen von den Video-Experten.", val: "197 €" },
              { n: 4, icon: <MapIcon className="w-6 h-6 text-indigo-500" />, title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten — du weißt auf welcher Plattform deine Wunschkunden sind.", val: "147 €" },
              { n: 5, icon: <ChatIcon className="w-6 h-6 text-indigo-500" />, title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen.", val: "97 €" },
              { n: 6, icon: <HandshakeIcon className="w-6 h-6 text-indigo-500" />, 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="mc-card p-5 space-y-2">
                <div className="flex items-center justify-between">
                  <span>{icon}</span>
                  <span className="text-xs font-bold text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-full px-2 py-0.5">Wert: {val}</span>
                </div>
                <p className="text-xs font-bold text-indigo-600 uppercase tracking-wide">Bonus {n}</p>
                <p className="font-bold text-slate-900 text-base">{title}</p>
                <p className="text-slate-500 text-sm leading-relaxed">{desc}</p>
              </div>
            ))}
          </div>
        </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 text-white leading-tight">
            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 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="mc-nav-bg py-8 text-center text-slate-400 text-xs">
        © 2026 Market Compass · Katja Pestereva
      </footer>

    </div>
  );
}