/* global React, useReveal, SectionHeader */

const TESTIMONIALS = [
  {
    quote: "Paul hat in 20 Minuten geschafft, woran ich seit Wochen verzweifelt bin. Mein WLAN funktioniert endlich überall — sogar im Garten.",
    name: "Helga M.",
    role: "Nachbarin · Radolfzell",
    avatar: "H",
    color: "#fde68a",
  },
  {
    quote: "Ich hatte mein Apple-ID-Passwort vergessen und kam an gar nichts mehr ran. Paul hat geduldig erklärt, alles zurückgesetzt und sogar meine Fotos gerettet.",
    name: "Klaus B.",
    role: "Kunde · Böhringen",
    avatar: "K",
    color: "#a7f3d0",
  },
  {
    quote: "Endlich jemand, der nicht von oben herab redet. Mein Sohn ist 30 und meint immer ich solle einfach googeln. Paul nimmt sich Zeit und erklärt es richtig.",
    name: "Renate W.",
    role: "Stammkundin",
    avatar: "R",
    color: "#fbcfe8",
  },
  {
    quote: "Smart-TV, Netflix, Disney+ — alles eingerichtet in einer halben Stunde per Video-Call. Funktioniert seitdem ohne dass ich was tun muss.",
    name: "Familie Schäfer",
    role: "Radolfzell-Markelfingen",
    avatar: "S",
    color: "#c4b5fd",
  },
  {
    quote: "Mein altes iPhone war so voll dass nichts mehr ging. Paul hat alles gesichert, das neue eingerichtet und die WhatsApp-Chats kamen mit. Top!",
    name: "Brigitte H.",
    role: "Kundin · Allensbach",
    avatar: "B",
    color: "#fed7aa",
  },
  {
    quote: "Faires Konzept: 7,90 € und nur wenn er es wirklich löst. Bei mir wars in einer Viertelstunde per Video erledigt — und er hat mir noch zwei Tipps gegeben.",
    name: "Markus T.",
    role: "Erstkunde",
    avatar: "M",
    color: "#bae6fd",
  },
];

function Testimonials() {
  return (
    <section className="section" style={{ background: "var(--bg-soft)", position: "relative", overflow: "hidden" }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="Stimmen"
          title={<>Was Kunden <span className="ital grad-text">sagen.</span></>}
          sub="Echte Stimmen aus der Nachbarschaft — Namen teilweise geändert, alles andere ist authentisch."
        />

        <div className="testi-marquee">
          <div className="testi-track">
            {[...TESTIMONIALS, ...TESTIMONIALS].map((t, i) => (
              <TestimonialCard key={i} {...t} />
            ))}
          </div>
        </div>

        <div style={{ marginTop: 48, display: "flex", alignItems: "center", justifyContent: "center", gap: 32, flexWrap: "wrap", textAlign: "center" }}>
          <Stat n="30+" l="Probleme gelöst" />
          <Stat n="98%" l="Erfolgsquote" />
          <Stat n="4,9" l="Ø Bewertung" />
          <Stat n="<24h" l="Antwortzeit" />
        </div>
      </div>

      <style>{`
        .testi-marquee {
          margin: 0 -28px;
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
        }
        .testi-track {
          display: flex;
          gap: 18px;
          width: max-content;
          animation: scroll 50s linear infinite;
          padding: 8px 28px;
        }
        .testi-marquee:hover .testi-track { animation-play-state: paused; }
        @keyframes scroll {
          to { transform: translateX(calc(-50% - 9px)); }
        }
      `}</style>
    </section>
  );
}

function TestimonialCard({ quote, name, role, avatar, color }) {
  return (
    <div style={{
      flex: "0 0 380px",
      background: "#fff",
      border: "1px solid var(--line)",
      borderRadius: 24,
      padding: 28,
      display: "flex",
      flexDirection: "column",
      gap: 20,
      transition: "transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 12px 32px rgba(10,10,10,0.06)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}
    >
      <div style={{ display: "flex", gap: 2 }}>
        {[1, 2, 3, 4, 5].map((s) => (
          <svg key={s} width="16" height="16" viewBox="0 0 24 24" fill="#fbbf24">
            <path d="M12 2 14.5 8.5 21.5 9 16 13.5 17.5 21 12 17 6.5 21 8 13.5 2.5 9 9.5 8.5z" />
          </svg>
        ))}
      </div>
      <p style={{ fontSize: 16, lineHeight: 1.5, color: "var(--ink-2)", flex: 1, fontWeight: 400 }}>
        „{quote}"
      </p>
      <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 12, borderTop: "1px solid var(--line)" }}>
        <div style={{
          width: 40, height: 40,
          borderRadius: 999,
          background: color,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontWeight: 600, fontSize: 16, color: "#1a1a1a",
        }}>{avatar}</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{name}</div>
          <div style={{ fontSize: 12, color: "var(--muted)" }}>{role}</div>
        </div>
      </div>
    </div>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div className="grad-text" style={{ fontSize: 38, fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 1 }}>{n}</div>
      <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{l}</div>
    </div>
  );
}

Object.assign(window, { Testimonials });