/* global React, useReveal, SectionHeader, useState */

const PROBLEMS = [
  {
    cat: "📱 Handy",
    items: [
      { q: "Mein iPhone lädt nicht mehr", sol: "Meistens ist es das Ladekabel oder der Anschluss — ich prüfe beides und reinige bei Bedarf den Lightning-/USB-C-Port. Falls nötig, klären wir Garantie oder Reparatur.", time: "15–30 Min" },
      { q: "Akku ist nach 4 Stunden leer", sol: "Wir schauen welche Apps Strom fressen, Hintergrundaktualisierung wird angepasst und der Akkuzustand geprüft. Oft hilft schon ein iOS-Update.", time: "20 Min" },
      { q: "Speicher voll, ich kann nichts mehr fotografieren", sol: "Fotos werden auf iCloud oder Computer gesichert, doppelte gelöscht, Apps die nichts bringen entfernt. Sie haben danach wieder Platz.", time: "30–45 Min" },
      { q: "Ich komme nicht mehr in mein Konto", sol: "Apple ID, Google-Konto oder andere — ich helfe beim sicheren Zurücksetzen ohne dass Daten verloren gehen.", time: "20–40 Min" },
    ],
  },
  {
    cat: "📶 Internet & WLAN",
    items: [
      { q: "Im Wohnzimmer habe ich kein WLAN", sol: "Wir prüfen Router-Standort, ggf. richte ich einen WLAN-Repeater oder Mesh-Punkt ein. Ergebnis: Empfang im ganzen Haus.", time: "30–60 Min" },
      { q: "WLAN-Passwort vergessen", sol: "Wir holen das Passwort vom Router oder setzen es neu — und ich notiere es Ihnen so dass Sie es nicht wieder verlieren.", time: "10 Min" },
      { q: "Internet ist viel zu langsam", sol: "Speed-Test, Router-Check, alte Kabel ersetzen. Manchmal ist es auch der Provider — dann formuliere ich Ihnen die Beschwerde.", time: "30 Min" },
    ],
  },
  {
    cat: "💻 Computer & Drucker",
    items: [
      { q: "Mein Drucker druckt nicht mehr", sol: "Treiber, Verbindung, Patronen — wir gehen es Schritt für Schritt durch. Funktioniert wieder, garantiert.", time: "15–30 Min" },
      { q: "Computer ist langsam geworden", sol: "Startprogramme aufräumen, Updates, Speicher freischaufeln. Oft fühlt sich der PC danach wie neu an.", time: "30–60 Min" },
      { q: "Neuer Laptop — alles übertragen", sol: "Daten, Programme, Konten, Browser-Lesezeichen — alles wandert auf den neuen Rechner. Sie müssen sich um nichts kümmern.", time: "60–90 Min" },
    ],
  },
  {
    cat: "🛡️ Sicherheit & Sonstiges",
    items: [
      { q: "Komische E-Mails / Phishing-Verdacht", sol: "Wir schauen die E-Mail an, ich erkläre Ihnen woran man Betrug erkennt, und sichern Ihre wichtigen Konten mit 2-Faktor-Authentifizierung.", time: "20–30 Min" },
      { q: "Smart-TV und Netflix einrichten", sol: "Konto anlegen, App installieren, Sprache und Bildqualität einstellen. Plus eine kleine Einweisung wie Sie selbst was finden.", time: "20 Min" },
      { q: "WhatsApp auf neues Handy", sol: "Chats inkl. Bilder kommen mit — ohne dass etwas verloren geht. Auch von iPhone zu Android oder andersrum.", time: "30 Min" },
    ],
  },
];

function ProblemFinder() {
  const [cat, setCat] = useState(0);
  const [item, setItem] = useState(null);

  return (
    <section id="problem" className="section" style={{ position: "relative", overflow: "hidden" }}>
      <div className="blob" style={{ width: 600, height: 600, background: "#f9a8d4", top: 100, right: -250, opacity: 0.2 }} />
      <div className="wrap" style={{ position: "relative" }}>
        <SectionHeader
          eyebrow="Problem-Finder"
          title={<>Was ist Ihr <span className="ital grad-text">Problem?</span></>}
          sub="Klicken Sie an was nicht funktioniert — ich zeige Ihnen, was ich dafür tun würde."
        />

        <div className="pf-grid">
          <div className="pf-categories">
            {PROBLEMS.map((p, i) => (
              <button
                key={p.cat}
                onClick={() => { setCat(i); setItem(null); }}
                className="pf-cat"
                style={{
                  background: cat === i ? "var(--ink)" : "#fff",
                  color: cat === i ? "#fff" : "var(--ink)",
                  borderColor: cat === i ? "var(--ink)" : "var(--line)",
                }}
              >
                {p.cat}
              </button>
            ))}
          </div>

          <div className="pf-questions">
            {PROBLEMS[cat].items.map((q, i) => (
              <button
                key={q.q}
                onClick={() => setItem(i)}
                className="pf-q"
                style={{
                  background: item === i ? "var(--grad-soft)" : "#fff",
                  borderColor: item === i ? "rgba(124,58,237,0.4)" : "var(--line)",
                }}
              >
                <span style={{ fontSize: 12, color: "var(--violet-deep)", fontWeight: 600, fontFamily: "var(--font-mono)" }}>0{i + 1}</span>
                <span style={{ flex: 1 }}>{q.q}</span>
                <svg width="18" height="18" viewBox="0 0 16 16" fill="none" style={{ transition: "transform .3s", transform: item === i ? "translateX(4px)" : "" }}>
                  <path d="M3 8h10m0 0L8.5 3.5M13 8l-4.5 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            ))}
          </div>

          <div className="pf-answer">
            {item === null ? (
              <div className="pf-empty">
                <div style={{ fontSize: 48, marginBottom: 16 }}>👆</div>
                <p style={{ color: "var(--muted)", fontSize: 16, maxWidth: 280 }}>
                  Wählen Sie ein Problem aus der Liste — ich zeige Ihnen, was ich tun würde.
                </p>
              </div>
            ) : (
              <div key={cat + "-" + item} className="pf-answer-inner">
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
                  <span className="pill pill-grad">Lösung</span>
                  <span style={{ fontSize: 13, color: "var(--muted)" }}>⏱ {PROBLEMS[cat].items[item].time}</span>
                </div>
                <h4 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 14, lineHeight: 1.25 }}>
                  {PROBLEMS[cat].items[item].q}
                </h4>
                <p style={{ fontSize: 16, color: "var(--ink-2)", lineHeight: 1.55 }}>
                  {PROBLEMS[cat].items[item].sol}
                </p>
                <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <a href="kontakt.html" className="btn btn-grad">
                    Genau das anfragen
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                      <path d="M3 8h10m0 0L8.5 3.5M13 8l-4.5 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </a>
                  <a href="https://wa.me/4915122202137" target="_blank" rel="noopener" className="btn btn-ghost">
                    💬 Direkt WhatsApp
                  </a>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        .pf-grid {
          display: grid;
          grid-template-columns: 220px 1fr 1.1fr;
          gap: 14px;
          align-items: stretch;
        }
        @media (max-width: 980px) { .pf-grid { grid-template-columns: 1fr; } }
        .pf-categories { display: flex; flex-direction: column; gap: 8px; }
        @media (max-width: 980px) { .pf-categories { flex-direction: row; overflow-x: auto; } }
        .pf-cat {
          padding: 14px 18px;
          border-radius: 14px;
          border: 1px solid var(--line);
          font-weight: 500;
          font-size: 14px;
          text-align: left;
          transition: all .25s ease;
          white-space: nowrap;
        }
        .pf-cat:hover { transform: translateX(4px); border-color: var(--line-strong); }
        @media (max-width: 980px) { .pf-cat:hover { transform: none; } }
        .pf-questions { display: flex; flex-direction: column; gap: 6px; }
        .pf-q {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 16px 18px;
          border-radius: 14px;
          border: 1px solid var(--line);
          text-align: left;
          font-size: 14px;
          font-weight: 500;
          color: var(--ink);
          transition: all .25s ease;
        }
        .pf-q:hover { border-color: var(--line-strong); transform: translateY(-1px); }
        .pf-answer {
          background: linear-gradient(135deg, #fafafa 0%, #fdf4ff 100%);
          border: 1px solid var(--line);
          border-radius: 24px;
          padding: 28px;
          min-height: 360px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .pf-empty { text-align: center; }
        .pf-answer-inner {
          width: 100%;
          animation: pf-fade .5s cubic-bezier(.22,.61,.36,1);
        }
        @keyframes pf-fade {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ProblemFinder });