"use client";

import { useState } from "react";
import {
  PackageIcon, PhoneIcon, VideoCameraIcon,
  MapIcon, ChatIcon, HandshakeIcon,
} from "./Icons";

const BONUSES = [
  {
    n: 1,
    icon: <PackageIcon className="w-6 h-6" />,
    title: "Sofort loslegen: 7 fertige Vorlagen",
    desc: "7 Vorlagen zum Direkt-Ausfüllen: Wunschkunden-Persona · Positionierungsformel · Verkaufsseiten-Struktur · 90-Tage-Marketingplan · Kanal-Entscheidungsmatrix · Marketing-Audit · Kurztext für Website & Social Media",
    val: "497 €",
  },
  {
    n: 2,
    icon: <PhoneIcon className="w-6 h-6" />,
    title: "Kunden gewinnen über Instagram",
    desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt erklärt, direkt umsetzbar.",
    val: "297 €",
  },
  {
    n: 3,
    icon: <VideoCameraIcon className="w-6 h-6" />,
    title: "Professionell filmen — mit dem Handy",
    desc: "Kein teures Equipment. Die Grundlagen von den Video-Experten — die du zuhause selbst anwenden kannst und die deine Content-Qualität sofort verbesserst.",
    val: "197 €",
  },
  {
    n: 4,
    icon: <MapIcon className="w-6 h-6" />,
    title: "Welcher Social Media Kanal passt zu dir?",
    desc: "Kein Rätselraten mehr — du weißt auf welchem Social Media Kanal deine Wunschkunden aktiv sind, und wo es sich wirklich lohnt Zeit zu investieren.",
    val: "147 €",
  },
  {
    n: 5,
    icon: <ChatIcon className="w-6 h-6" />,
    title: "1 Monat Begleitung nach dem Programm",
    desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen. Fragen zur Umsetzung, offener Austausch, Motivation.",
    val: "97 €",
  },
  {
    n: 6,
    icon: <HandshakeIcon className="w-6 h-6" />,
    title: "Abschluss-Netzwerkevent (geplant)",
    desc: "Nach der letzten Session kommen alle zusammen. Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.",
    val: "197 €",
  },
];

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

function BonusCard({ n, icon, title, desc, val }: {
  n: number; icon: React.ReactNode; title: string; desc: string; val: string;
}) {
  const [flipped, setFlipped] = useState(false);

  return (
    <div
      style={{ perspective: "1000px", height: "280px", cursor: "pointer" }}
      onClick={() => setFlipped((f) => !f)}
      onMouseEnter={() => setFlipped(true)}
      onMouseLeave={() => setFlipped(false)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => e.key === "Enter" && setFlipped((f) => !f)}
    >
      <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: "inset 0 3px 0 #6366f1, 0 2px 12px rgba(99,102,241,0.06)",
          }}
        >
          {/* Oben: Icon (minimal) + Bonus-Label */}
          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
            <span style={{ color: "#a5b4fc" }}>{icon}</span>
            <span style={{
              fontSize: "0.6rem", fontWeight: 800, letterSpacing: "0.12em",
              textTransform: "uppercase", borderRadius: "99px",
              padding: "3px 10px", background: "#eef2ff", color: "#6366f1",
            }}>
              Bonus {n}
            </span>
          </div>

          {/* Spacer */}
          <div style={{ flex: 1 }} />

          {/* Titel — Hauptelement */}
          <p style={{
            fontSize: "1.05rem", fontWeight: 800, color: "#0f172a",
            lineHeight: 1.3, marginBottom: "16px",
          }}>
            {title}
          </p>

          {/* Wert-Badge */}
          <span style={{
            fontSize: "0.75rem", fontWeight: 700, color: "#059669",
            background: "#ecfdf5", border: "1px solid #bbf7d0",
            borderRadius: "99px", padding: "4px 14px",
            alignSelf: "flex-start",
          }}>
            Wert: {val}
          </span>

          {/* Hint */}
          <div style={{
            marginTop: "16px", fontSize: "0.62rem", display: "flex",
            alignItems: "center", gap: "4px", color: "#c7d2fe",
          }}>
            <svg width="11" height="11" 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
          </div>
        </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)",
            alignItems: "center",
            justifyContent: "center",
            textAlign: "center",
            gap: "14px",
          }}
        >
          <span style={{
            fontSize: "0.62rem", fontWeight: 800, letterSpacing: "0.12em",
            textTransform: "uppercase", borderRadius: "99px",
            padding: "3px 10px", background: "rgba(255,255,255,0.2)", color: "#fff",
          }}>
            Was du erhältst:
          </span>

          <p style={{ fontSize: "0.85rem", lineHeight: 1.65, color: "#fff", fontWeight: 500 }}>
            {desc}
          </p>

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

export default function BonusCards() {
  return (
    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {BONUSES.map((b) => (
        <BonusCard key={b.n} {...b} />
      ))}
    </div>
  );
}
