/* Seite Bewertungsmanagement (bewertungen.html): Google-Bewertungen, die gegen Googles Richtlinien verstoßen,
   über die offiziellen Wege melden; dazu Antworten, Monitoring und echte neue Bewertungen.
   Texte nach Spec Abschnitt 10: keine Erfolgsquote, kein „garantiert“, „Löschung beantragen“ statt „löschen“,
   keine Rechtsberatung, keine gekauften oder belohnten Bewertungen, Bewertungs-Link für alle Kunden.
   Spec: docs/superpowers/specs/2026-10-08-neue-leistungsseiten-design.md, Abschnitt 7 */

const MELDEFAEHIG = [
  "Kein erkennbarer Kundenkontakt – die Person war nie bei Ihnen",
  "Spam, Werbung oder offensichtlich gefälschte Konten",
  "Beleidigungen, Hassrede oder Drohungen",
  "Interessenkonflikt, z. B. Wettbewerber oder ehemalige Mitarbeiter",
  "Themenfremde Inhalte ohne Bezug zu Ihrem Betrieb",
  "Persönliche Daten, z. B. Namen oder Telefonnummern von Mitarbeitern",
];

const NICHT_MELDEFAEHIG = [
  "Berechtigte Kritik echter Kunden – auch wenn sie hart formuliert ist",
  "Schlechte Sterne ohne Text von echten Kunden",
];

function bewertungenSchritte(b) {
  return [
    { when: "Schritt 01 · kostenlos", title: "Profil-Check", body: "Wir sehen uns Ihre negativen Bewertungen an und sagen Ihnen ehrlich, welche gegen Googles Richtlinien verstoßen.", cta: "#anfrage", ctaLabel: "Profil-Check anfragen" },
    { when: "Schritt 02 · Ihre Entscheidung", title: "Freigabe", body: "Sie entscheiden, welche Bewertungen wir melden. Ohne Ihre Freigabe passiert nichts." },
    { when: "Schritt 03 · über Google", title: "Meldung & Nachverfolgung", body: "Wir beantragen die Löschung über Googles offizielle Formulare, begründen jeden Fall und fassen nach, wenn nötig." },
    { when: "Schritt 04 · nur bei Erfolg", title: "Abrechnung", body: `${formatEuro(b.proLoeschung)} netto je Bewertung, die Google tatsächlich entfernt. Bleibt sie stehen, kostet es nichts.` },
  ];
}

const BEWERTUNGEN_FAQ = [
  { q: "Garantieren Sie die Löschung?", a: "Nein. Ob eine Bewertung entfernt wird, entscheidet allein Google. Wir melden nur, was gegen die Richtlinien verstößt, und begründen jeden Fall sorgfältig. Wird nichts entfernt, zahlen Sie nichts." },
  { q: "Ist das legal?", a: "Ja. Wir nutzen ausschließlich die Meldewege, die Google selbst für Richtlinienverstöße anbietet. Wir geben keine Rechtsberatung; bei Bewertungen, die rechtlich angegriffen werden müssten, empfehlen wir Ihnen einen Anwalt." },
  { q: "Wie lange dauert es?", a: "Meist wenige Tage bis einige Wochen – das hängt von Google ab. Wir behalten jeden gemeldeten Fall im Blick und fassen nach, wenn nötig." },
  { q: "Kaufen Sie Bewertungen?", a: "Nein, niemals. Gekaufte oder belohnte Bewertungen verstoßen gegen Googles Richtlinien und gegen das Wettbewerbsrecht. Wir helfen Ihnen, echte Bewertungen von echten Kunden zu bekommen." },
  { q: "Was ist mit Bewertungen, die nicht gelöscht werden?", a: "Darauf antworten wir sachlich und mit Ihnen abgestimmt. Eine gute Antwort zeigt anderen Kunden, dass Sie Kritik ernst nehmen – und mehr echte Bewertungen rücken einzelne schlechte in den Hintergrund." },
];

// Mobbin-Pattern: Zwei-Spalten-Vergleich „kann / kann nicht“ -> MOBBIN-PATTERNS.md, Abschnitt 17
function Meldefaehig() {
  return (
    <Abschnitt
      id="meldefaehig"
      index="01"
      eyebrow="Ehrlich vorab"
      title={<>Was wir melden können – <AccentWord>und was nicht.</AccentWord></>}
      lead="Google entfernt Bewertungen, die gegen seine Richtlinien verstoßen. Berechtigte Kritik gehört nicht dazu – dafür gibt es eine gute Antwort."
    >
      <div className="mt-12 lg:mt-14 grid gap-4 lg:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)]">
        <div className="ri d1 panel p-6 sm:p-8">
          <div className="flex items-center gap-3">
            <span className="mega-icon" aria-hidden="true"><Check size={17} strokeWidth={2.6} /></span>
            <h3 className="text-[19px] font-bold tracking-tight">Meldefähig</h3>
          </div>
          <ul className="mt-6 space-y-3">
            {MELDEFAEHIG.map((t) => (
              <li key={t} className="flex gap-3 items-start text-[15px]" style={{ color: "var(--text-secondary)" }}>
                <Check size={16} strokeWidth={2.6} className="mt-1 flex-shrink-0" style={{ color: "var(--accent)" }} />{t}
              </li>
            ))}
          </ul>
        </div>
        <div className="ri d2 panel p-6 sm:p-8">
          <div className="flex items-center gap-3">
            <span className="mega-icon mega-icon--neutral" aria-hidden="true"><X size={17} strokeWidth={2.4} /></span>
            <h3 className="text-[19px] font-bold tracking-tight">Nicht meldefähig</h3>
          </div>
          <ul className="mt-6 space-y-3">
            {NICHT_MELDEFAEHIG.map((t) => (
              <li key={t} className="flex gap-3 items-start text-[15px]" style={{ color: "var(--text-secondary)" }}>
                <X size={16} strokeWidth={2.4} className="mt-1 flex-shrink-0" style={{ color: "var(--text-muted)" }} />{t}
              </li>
            ))}
          </ul>
          <p className="mt-6 pt-5 hr-t text-[14px] leading-relaxed body-muted">
            Darauf antworten wir sachlich und mit Ihnen abgestimmt – und sorgen mit echten neuen Bewertungen dafür, dass das Gesamtbild stimmt.
          </p>
        </div>
      </div>
    </Abschnitt>
  );
}

function Reputation({ b, onAnfragen }) {
  const p = b.paket;
  return (
    <Abschnitt
      id="reputation"
      index="03"
      eyebrow="Laufende Betreuung"
      title={<>Ihr Ruf, laufend im <AccentWord>Blick.</AccentWord></>}
      lead="Für Betriebe, die nicht nur aufräumen, sondern dauerhaft gut dastehen wollen."
    >
      <article className="ri d2 price-card is-match mt-12 lg:mt-14 max-w-4xl grid gap-8 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]" aria-label={"Paket " + p.name}>
        <div>
          <MicroLabel>Paket</MicroLabel>
          <h3 className="mt-4 text-[26px] font-bold tracking-tight">{p.name}</h3>
          <div className="mt-5 flex items-baseline gap-2">
            <span className="tabular text-[46px] font-bold tracking-tight leading-none" style={{ color: "var(--accent)" }}>{formatEuro(p.monatlich)}</span>
            <span className="text-[14px] body-muted">netto / Monat</span>
          </div>
          <p className="mt-2 text-[13px] body-muted">{p.mindestlaufzeitMonate} Monate Mindestlaufzeit, danach monatlich kündbar</p>
          <button type="button" className="btn btn-primary btn-shine mt-7" onClick={onAnfragen}>{p.name} anfragen <ArrowRight size={14} /></button>
        </div>
        <div>
          <ul className="space-y-3">
            {[
              "Monitoring: Nachricht bei jeder neuen Bewertung",
              `Antworten auf bis zu ${p.antwortenProMonat} Bewertungen pro Monat – sachlich und mit Ihnen abgestimmt`,
              "QR-Aufsteller und Bewertungs-Link einmalig inklusive – für alle Ihre Kunden",
              `Löschungen weiterhin ${formatEuro(b.proLoeschung)} netto je Erfolg`,
            ].map((t) => (
              <li key={t} className="flex gap-3 items-start text-[15px]" style={{ color: "var(--text-secondary)" }}>
                <Check size={16} strokeWidth={2.6} className="mt-1 flex-shrink-0" style={{ color: "var(--accent)" }} />{t}
              </li>
            ))}
          </ul>
          <p className="mt-5 pt-5 hr-t text-[13px] leading-relaxed body-muted">
            Voraussetzung: Sie fügen uns als Verwalter in Ihrem Google-Unternehmensprofil hinzu. Das können Sie jederzeit wieder entfernen.
          </p>
        </div>
      </article>

      <div className="ri d3 mt-6 max-w-4xl flex gap-3 items-start px-5 py-4 rounded-[var(--r-md)]" style={{ background: "var(--bg-panel)", border: "1px solid var(--line-soft)" }}>
        <ShieldCheck size={18} className="mt-0.5 flex-shrink-0" style={{ color: "var(--accent)" }} />
        <p className="text-[13.5px] leading-relaxed" style={{ color: "var(--text-secondary)" }}>
          Keine Rechtsberatung. Google entscheidet über jede Löschung – eine Garantie gibt es nicht. Wir kaufen oder belohnen keine Bewertungen
          und bitten alle Ihre Kunden gleichermaßen um eine Bewertung, nicht nur die zufriedenen.
        </p>
      </div>
    </Abschnitt>
  );
}

function BewertungenPage() {
  const b = (window.SAWORA_ANGEBOTE || {}).bewertungen;
  const [vorauswahl, setVorauswahl] = useState(null);
  const paketAnfragen = () => {
    setVorauswahl({ nachricht: `Ich interessiere mich für das Paket ${b.paket.name}.` });
    scrollToId("anfrage");
  };

  return (
    <SectionCount.Provider value="05">
      <PageHero
        page="bewertungen"
        eyebrow="Bewertungsmanagement"
        title={<>Unzulässige Google-Bewertungen <AccentWord>entfernen lassen.</AccentWord></>}
        lead="Wir prüfen Ihr Profil kostenlos und melden Bewertungen, die gegen Googles Richtlinien verstoßen, über die offiziellen Wege. Sie zahlen nur, wenn Google löscht."
        actions={<PrimaryButton href="#anfrage" size="lg">Profil kostenlos prüfen lassen <ArrowRight size={16} /></PrimaryButton>}
        facts={[
          ["Kostenloser Profil-Check", "primary"],
          [b ? formatEuro(b.proLoeschung) + " netto nur bei Löschung" : "Kosten nur bei Löschung", "secondary"],
          ["Nur über Googles offizielle Wege", "primary"],
          [b ? "Betreuung ab " + formatEuro(b.paket.monatlich) + " netto / Monat" : "Laufende Betreuung", "secondary", "#reputation"],
        ]}
      />

      <Meldefaehig />

      {b && (
        <ProcessTimeline
          index="02"
          steps={bewertungenSchritte(b)}
          title={<>Vom Profil-Check zur <AccentWord>Entscheidung.</AccentWord></>}
          lead="Vier Schritte – und an keiner Stelle kostet es Sie etwas, solange Google nichts entfernt."
        />
      )}

      {b && <Reputation b={b} onAnfragen={paketAnfragen} />}

      <KurzAnfrage
        index="04"
        typ="Bewertungen"
        eyebrow="Kostenloser Profil-Check"
        titel={<>Wir prüfen Ihr Profil – <AccentWord>kostenlos.</AccentWord></>}
        lead="Sie bekommen eine ehrliche Einschätzung, welche Bewertungen meldefähig sind. Erst danach entscheiden Sie."
        knopf="Profil-Check anfragen"
        felder={[
          { name: "profil", label: "Link zum Google-Profil oder Firmenname und Ort", art: "text", placeholder: "z. B. Elektro Muster, Kaarst" },
          { name: "anzahlBewertungen", label: "Wie viele Bewertungen stören Sie?", art: "select", optionen: ["1", "2–5", "6 oder mehr", "Weiß nicht"] },
          { name: "nachricht", label: "Nachricht (optional)", art: "textarea", placeholder: "Was ist an den Bewertungen aus Ihrer Sicht unzulässig?" },
        ]}
        vorauswahl={vorauswahl}
        datenschutzHref="datenschutz.html#profil-check"
      />

      <FAQ index="05" items={BEWERTUNGEN_FAQ} frageHref="#anfrage"
        lead="Die Fragen, die uns zu Google-Bewertungen am häufigsten gestellt werden. Fehlt Ihre? Schreiben Sie uns." />

      <NextChapter to="kontakt" />
    </SectionCount.Provider>
  );
}

window.SAWORA_SEITEN = Object.assign(window.SAWORA_SEITEN || {}, { bewertungen: BewertungenPage });