const AUDIT_QUESTIONS = [
  {
    q: "Jak długo Twój sklep był niedostępny w ciągu ostatnich 30 dni?",
    a: [
      { l: "0 minut — pełna dostępność", s: 3 },
      { l: "Krótkie, pojedyncze przerwy (<10 min)", s: 2 },
      { l: "Kilka dłuższych awarii", s: 1 },
      { l: "Nie wiem / nie mierzę", s: 0 },
    ],
  },
  {
    q: "Czy masz aktywny monitoring uptime i alerty?",
    a: [
      { l: "Tak — z dyżurem 24/7", s: 3 },
      { l: "Tak — tylko e-mail, w godzinach pracy", s: 2 },
      { l: "Mam, ale nikt go nie obsługuje nocą", s: 1 },
      { l: "Nie", s: 0 },
    ],
  },
  {
    q: "Kiedy ostatnio aktualizowano core i wtyczki?",
    a: [
      { l: "W ostatnich 30 dniach", s: 3 },
      { l: "W ostatnim kwartale", s: 2 },
      { l: "Ponad pół roku temu", s: 1 },
      { l: "Nie pamiętam", s: 0 },
    ],
  },
  {
    q: "Jak wygląda Twoja polityka kopii zapasowych?",
    a: [
      { l: "Codzienny backup off-site + test odtworzenia", s: 3 },
      { l: "Codzienny backup, bez testów", s: 2 },
      { l: "Backupy nieregularne", s: 1 },
      { l: "Nie wiem, czy działają", s: 0 },
    ],
  },
  {
    q: "Ile zajmuje uzyskanie odpowiedzi od obecnego dostawcy IT?",
    a: [
      { l: "Mniej niż 4 godziny — z SLA", s: 3 },
      { l: "1 dzień roboczy", s: 2 },
      { l: "2–5 dni roboczych", s: 1 },
      { l: "Bywa, że tygodniami", s: 0 },
    ],
  },
  {
    q: "Czy wynik testu Core Web Vitals (LCP) jest \u201edobry\u201d?",
    a: [
      { l: "Tak — wszystkie strony zielone", s: 3 },
      { l: "Strona główna tak, kategorie nie", s: 2 },
      { l: "Większość czerwona / pomarańczowa", s: 1 },
      { l: "Nigdy nie sprawdzałem/am", s: 0 },
    ],
  },
  {
    q: "Czy masz spójne miejsce na faktury, raporty i dokumenty od IT?",
    a: [
      { l: "Tak — dedykowany portal klienta", s: 3 },
      { l: "Folder w chmurze, ale uporządkowany", s: 2 },
      { l: "Maile i pojedyncze pliki", s: 1 },
      { l: "Pełen chaos", s: 0 },
    ],
  },
  {
    q: "Kto reaguje na awarię w piątek o 23:00?",
    a: [
      { l: "Dyżurny inżynier — w ramach SLA", s: 3 },
      { l: "Programista, jeśli akurat odbierze", s: 2 },
      { l: "Czekamy do poniedziałku", s: 1 },
      { l: "Nikt — modlimy się", s: 0 },
    ],
  },
];

const Audit = () => {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState(Array(AUDIT_QUESTIONS.length).fill(null));
  const [done, setDone] = React.useState(false);
  const total = AUDIT_QUESTIONS.length;
  const answered = answers.filter((v) => v !== null).length;
  const pct = Math.round((answered / total) * 100);

  const realScore = answers.reduce((s, a, i) => s + (a !== null ? AUDIT_QUESTIONS[i].a[a].s : 0), 0);
  const maxScore = total * 3;
  const grade =
    realScore >= maxScore * 0.8 ? { label: "Zielony", note: "Solidnie. Utrzymanie + monitoring.", color: "ok" } :
    realScore >= maxScore * 0.5 ? { label: "Pomarańczowy", note: "Kilka luk — warto zacząć od pakietu Advanced.", color: "warn" } :
    { label: "Czerwony", note: "Pilna interwencja — proponujemy audyt + Premium.", color: "bad" };

  const choose = (qi, ai) => {
    const next = [...answers];
    next[qi] = ai;
    setAnswers(next);
    setTimeout(() => {
      if (qi < total - 1) setStep(qi + 1);
      else setDone(true);
    }, 220);
  };

  const reset = () => {
    setAnswers(Array(total).fill(null));
    setStep(0);
    setDone(false);
  };

  const cur = AUDIT_QUESTIONS[step];

  return (
    <section className="audit" id="audyt" data-screen-label="05 Audit">
      <header className="section-head section-head--row">
        <div>
          <div className="section-head__num mono">§05 — Audyt</div>
          <h2 className="section-head__title">Bezpłatny audyt<br />kondycji sklepu<span className="accent">.</span></h2>
        </div>
        <p className="section-head__sub section-head__sub--max">
          Osiem pytań, dwie minuty. Otrzymasz natychmiast wynik, listę luk
          i&nbsp;rekomendowany pakiet wsparcia. <strong>Bez podawania danych</strong>.
        </p>
      </header>

      <div className="audit__panel">
        <div className="audit__rail mono">
          <div className="audit__rail-h">AUDYT.STORE.HEALTH</div>
          <div className="audit__rail-line">v.2026.04</div>
          <div className="audit__rail-line">PYT.{String(Math.min(step + 1, total)).padStart(2, "0")}/{String(total).padStart(2, "0")}</div>
          <div className="audit__rail-line">{pct}% UKOŃCZONO</div>
          <div className="audit__rail-bar">
            <div style={{ width: `${pct}%` }} />
          </div>

          <ol className="audit__rail-list">
            {AUDIT_QUESTIONS.map((_, i) => (
              <li
                key={i}
                className={`audit__rail-item ${i === step && !done ? "is-cur" : ""} ${answers[i] !== null ? "is-done" : ""}`}
                onClick={() => !done && setStep(i)}
              >
                <span>{String(i + 1).padStart(2, "0")}</span>
                <span className="audit__rail-dot" />
              </li>
            ))}
          </ol>

          <div className="audit__rail-foot">
            <div>Wynik max: {maxScore} pkt</div>
            <div>Twój wynik: {realScore} pkt</div>
          </div>
        </div>

        <div className="audit__stage">
          {!done ? (
            <>
              <div className="audit__qhead mono">
                <span>PYTANIE {String(step + 1).padStart(2, "0")}</span>
                <span>•</span>
                <span>Z {String(total).padStart(2, "0")}</span>
              </div>
              <h3 className="audit__q">{cur.q}</h3>
              <div className="audit__answers">
                {cur.a.map((opt, i) => (
                  <button
                    key={i}
                    className={`auditOpt ${answers[step] === i ? "is-active" : ""}`}
                    onClick={() => choose(step, i)}
                  >
                    <span className="auditOpt__radio">
                      <span className="auditOpt__dot" />
                    </span>
                    <span className="auditOpt__l">{opt.l}</span>
                    <span className="mono auditOpt__s">{opt.s}/3</span>
                  </button>
                ))}
              </div>
              <div className="audit__nav">
                <button className="btn btn--ghost btn--sm" onClick={() => setStep(Math.max(0, step - 1))} disabled={step === 0}>← Wstecz</button>
                <button className="btn btn--ghost btn--sm" onClick={() => setStep(Math.min(total - 1, step + 1))} disabled={answers[step] === null}>Dalej →</button>
              </div>
            </>
          ) : (
            <div className="audit__result">
              <div className="mono audit__result-eyebrow">RAPORT · WYNIK WSTĘPNY</div>
              <div className="audit__result-row">
                <div className="audit__result-score">
                  <div className="audit__result-num">{realScore}<span>/{maxScore}</span></div>
                  <div className={`audit__result-grade audit__result-grade--${grade.color}`}>
                    <span className="audit__result-pip" />
                    Status: {grade.label}
                  </div>
                </div>
                <p className="audit__result-note">{grade.note}</p>
              </div>

              <div className="audit__result-list">
                {AUDIT_QUESTIONS.map((q, i) => {
                  const ai = answers[i];
                  const s = ai !== null ? q.a[ai].s : 0;
                  return (
                    <div className="audit__result-line" key={i}>
                      <span className="mono">{String(i + 1).padStart(2, "0")}</span>
                      <span className="audit__result-q">{q.q}</span>
                      <span className={`audit__result-pill audit__result-pill--${s >= 3 ? "ok" : s >= 2 ? "warn" : "bad"}`}>
                        {ai !== null ? q.a[ai].l : "—"}
                      </span>
                    </div>
                  );
                })}
              </div>

              <div className="audit__result-cta">
                <a href="#pakiety" className="btn btn--primary">
                  Zobacz rekomendowany pakiet
                  <svg viewBox="0 0 16 16" width="14" height="14"><path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" /></svg>
                </a>
                <button className="btn btn--ghost" onClick={reset}>↻ Rozpocznij ponownie</button>
                <span className="mono dim">Wynik zapisany lokalnie · 0 plików cookies</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

// helpers ↑

window.Audit = Audit;