gso-landingpage/src/app/components/FlipCards.tsx

"use client";

import { useState } from "react";

const PAIRS = [
  {
    topic:  "Positionierung",
    before: "\u201EIch habe viel \xFCber Marketing gelernt \u2014 aber ich wei\xDF nicht wie ich es bei mir anwende.\u201C",
    after:  "Wir bauen dein pers\xF6nliches System \u2014 du setzt um was du schon wei\xDFt.",
  },
  {
    topic:  "Content-Plan",
    before: "\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C",
    after:  "Content-Plan f\xFCr alle Plattformen \u2014 du wei\xDFt was, wann und warum.",
  },
  {
    topic:  "Verkaufsseite",
    before: "\u201EIch wei\xDF nicht wie ich eine Verkaufslandingpage baue.\u201C",
    after:  "Du bekommst Schritt-f\xFCr-Schritt Anleitung \u2014 und baust deine eigene Verkaufsseite.",
  },
  {
    topic:  "Vertrieb",
    before: "\u201EIch warte dass Kunden kommen.\u201C",
    after:  "Verkaufsskript. Direktansprache. Du gehst aktiv auf Kunden zu.",
  },
  {
    topic:  "Finanzmanagement",
    before: "\u201EIch habe keinen \xDCberblick \xFCber meine Finanzen \u2014 privat und als Selbst\xe4ndige:r.\u201C",
    after:  "Ausgaben, Steuern, Verm\xF6gensaufbau \u2014 du wei\xDFt was du hast, was du brauchst, und wie du es meisterst.",
  },
  {
    topic:  "Video & Social Media",
    before: "\u201EIch will Content machen \u2014 aber ich wei\xDF nicht wo ich anfangen soll: welche Kamera, wie schneiden?\u201C",
    after:  "Handy-Video-Setup + Schnitt-Grundlagen. Du gehst raus und drehst deinen ersten Reel.",
  },
];

function FlipCard({ topic, before, after }: { topic: string; before: string; after: string }) {
  const [flipped, setFlipped] = useState(false);

  const faceBase: React.CSSProperties = {
    position: "absolute",
    inset: 0,
    borderRadius: "1rem",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    gap: "12px",
    padding: "24px",
    textAlign: "center",
    WebkitBackfaceVisibility: "hidden",
    backfaceVisibility: "hidden",
  };

  return (
    <div
      style={{ perspective: "1000px", height: "220px", cursor: "pointer" }}
      onClick={() => setFlipped((f) => !f)}
      onMouseEnter={() => setFlipped(true)}
      onMouseLeave={() => setFlipped(false)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => e.key === "Enter" && setFlipped((f) => !f)}
    >
      {/* Inner — rotates */}
      <div
        style={{
          position: "relative",
          width: "100%",
          height: "100%",
          transformStyle: "preserve-3d",
          transition: "transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1)",
          transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
        }}
      >
        {/* VORDERSEITE */}
        <div
          style={{
            ...faceBase,
            background: "#ffffff",
            border: "1px solid #eae8f8",
            boxShadow: "0 2px 12px rgba(99,102,241,0.06)",
          }}
        >
          <span style={{
            fontSize: "0.65rem", fontWeight: 800, letterSpacing: "0.12em",
            textTransform: "uppercase", borderRadius: "99px",
            padding: "3px 10px", background: "#eef2ff", color: "#4338ca",
          }}>
            {topic}
          </span>

          <p style={{ fontSize: "0.9rem", lineHeight: 1.5, fontStyle: "italic", color: "#475569" }}>
            {before}
          </p>

          <span style={{
            fontSize: "0.68rem", display: "flex", alignItems: "center",
            gap: "4px", color: "#a5b4fc", marginTop: "auto",
          }}>
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            drehe mich um
          </span>
        </div>

        {/* RÜCKSEITE */}
        <div
          style={{
            ...faceBase,
            background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
            boxShadow: "0 4px 24px rgba(99,102,241,0.35)",
            transform: "rotateY(180deg)",
          }}
        >
          <span style={{
            fontSize: "0.65rem", fontWeight: 800, letterSpacing: "0.12em",
            textTransform: "uppercase", borderRadius: "99px",
            padding: "3px 10px", background: "rgba(255,255,255,0.2)", color: "#fff",
          }}>
            Das hast du danach:
          </span>

          <p style={{ fontSize: "0.9rem", lineHeight: 1.5, fontWeight: 600, color: "#fff" }}>
            {after}
          </p>

          <span style={{
            fontSize: "0.68rem", display: "flex", alignItems: "center",
            gap: "4px", color: "rgba(255,255,255,0.7)", marginTop: "auto",
          }}>
            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
            </svg>
            nach 8 Wochen
          </span>
        </div>
      </div>
    </div>
  );
}

export default function FlipCards() {
  return (
    <section className="py-20">
      <div className="max-w-5xl mx-auto px-6">
        <div className="text-center mb-12">
          <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" />
            Ergebnisse
          </span>
          <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Diese Ergebnisse kannst du vom Programm erwarten</h2>
          <p className="mt-2 text-slate-500 text-sm">
            Fahre über eine Karte — oder tippe drauf — um zu sehen was sich verändert.
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {PAIRS.map((pair, i) => (
            <FlipCard key={i} topic={pair.topic} before={pair.before} after={pair.after} />
          ))}
        </div>

        <p className="mt-10 text-center text-indigo-700 font-semibold text-lg">
          Dein Wissen war schon da. Jetzt bekommt es die Struktur die Kunden bringt.
        </p>
      </div>
    </section>
  );
}