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

"use client";

import { useState } from "react";

const PAIRS = [
  {
    before: "\u201EIch wei\xDF viel \u2014 aber niemand fragt an.\u201C",
    after:  "Positionierung in einem Satz. Ein System das planbar Anfragen bringt.",
  },
  {
    before: "\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C",
    after:  "Content-Plan f\xFCr alle Plattformen \u2014 du wei\xDFt was, wann und warum.",
  },
  {
    before: "\u201EIch wei\xDF nicht wie Marketing und Vertrieb zusammenh\xe4ngen.\u201C",
    after:  "Marketing-Systemkarte. Alle Teile greifen ineinander.",
  },
  {
    before: "\u201EIch warte dass Kunden kommen.\u201C",
    after:  "Verkaufsskript. Direktansprache. Du gehst aktiv auf Kunden zu.",
  },
  {
    before: "\u201EIch werde online nicht gefunden.\u201C",
    after:  "Google Business optimiert. Deine Seite f\xFCr dein Haupt-Keyword.",
  },
  {
    before: "\u201ENach jedem Kurs fange ich wieder bei null an.\u201C",
    after:  "Ein System aus Marketing, Vertrieb und Social Media \u2014 das weiterl\xe4uft.",
  },
];

function FlipCard({ before, after }: { 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",
          }}>
            Kennst du das?
          </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" />
            Transformation
          </span>
          <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Kennst du das?</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} 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>
  );
}