const CHECKLIST = [
  {
    group: "Dostępność i monitoring",
    items: [
      { t: "Aktywny monitoring uptime + alerty SMS/Slack 24/7" },
      { t: "Zewnętrzny status page (publiczny lub wewnętrzny)" },
      { t: "Zdefiniowany SLA na czas reakcji (4h / 8h / 24h)" },
    ],
  },
  {
    group: "Bezpieczeństwo",
    items: [
      { t: "Codzienne kopie zapasowe + test odtworzenia raz/mc" },
      { t: "Aktualizacje core i wtyczek wdrożone w ostatnim kwartale" },
      { t: "Certyfikat SSL ważny ≥ 60 dni, auto-renew włączony" },
    ],
  },
  {
    group: "Wydajność",
    items: [
      { t: "LCP < 2.5s na top-5 stronach produktowych" },
      { t: "CDN włączone dla statyków i obrazów" },
      { t: "Cache (full-page lub fragmentów) skonfigurowany" },
    ],
  },
  {
    group: "Procesy i transparentność",
    items: [
      { t: "Wszystkie zgłoszenia w jednym systemie ticketowym" },
      { t: "Miesięczny raport: czas pracy + zrealizowane zadania" },
      { t: "Roadmapa rozwoju na najbliższe 90 dni" },
    ],
  },
];

const Checklist = () => {
  const flat = CHECKLIST.flatMap((g) => g.items.map((i) => ({ ...i, g: g.group })));
  const total = flat.length;
  const [checked, setChecked] = React.useState(() => {
    try {
      const v = localStorage.getItem("gs.checklist");
      return v ? JSON.parse(v) : Array(total).fill(false);
    } catch {
      return Array(total).fill(false);
    }
  });

  React.useEffect(() => {
    try { localStorage.setItem("gs.checklist", JSON.stringify(checked)); } catch {}
  }, [checked]);

  const toggle = (i) => {
    const next = [...checked];
    next[i] = !next[i];
    setChecked(next);
  };

  const done = checked.filter(Boolean).length;
  const pct = Math.round((done / total) * 100);

  let i = 0;

  return (
    <section className="cl" id="checklista" data-screen-label="06 Checklist">
      <header className="section-head section-head--row">
        <div>
          <div className="section-head__num mono">§06 — Checklista</div>
          <h2 className="section-head__title">Checklista zdrowia<br />sklepu e-commerce.</h2>
        </div>
        <p className="section-head__sub section-head__sub--max">
          Dwanaście punktów, które rekomendujemy każdemu właścicielowi sklepu.
          Odhacz, co masz załatwione — a my zajmiemy się resztą.
        </p>
      </header>

      <div className="cl__panel">
        <div className="cl__sheet">
          <div className="cl__sheet-head">
            <div>
              <div className="mono cl__sheet-eyebrow">DOKUMENT · CL-12</div>
              <h3 className="cl__sheet-title">12-PUNKTOWY KONTROLNY PRZEGLĄD SKLEPU</h3>
            </div>
            <div className="cl__sheet-meta mono">
              <div>WYDANIE · 2026.04</div>
              <div>PL · A4</div>
              <div>v.1.2</div>
            </div>
          </div>

          {CHECKLIST.map((g) => (
            <div className="cl__group" key={g.group}>
              <div className="cl__group-head">
                <span className="mono">— {g.group}</span>
                <span className="cl__group-line" />
              </div>
              <ul className="cl__list">
                {g.items.map((it) => {
                  const idx = i++;
                  return (
                    <li key={idx} className={`cl__item ${checked[idx] ? "is-done" : ""}`} onClick={() => toggle(idx)}>
                      <span className="cl__box">
                        <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">
                          <path d="M3 8.5l3.5 3.5L13 5" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="square" />
                        </svg>
                      </span>
                      <span className="cl__t">{it.t}</span>
                      <span className="cl__num mono">{String(idx + 1).padStart(2, "0")}</span>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}

          <div className="cl__sign">
            <div>
              <div className="mono dim">Sporządzono w</div>
              <div className="cl__sign-line">Gorilla Software · Rzeszów</div>
            </div>
            <div>
              <div className="mono dim">Stempel kontroli jakości</div>
              <div className="cl__stamp">QA · OK · 24/7</div>
            </div>
          </div>
        </div>

        <aside className="cl__side">
          <div className="cl__score">
            <div className="mono cl__score-eyebrow">WYNIK NA ŻYWO</div>
            <div className="cl__score-num">{done}<span>/{total}</span></div>
            <div className="cl__score-bar">
              <div style={{ width: `${pct}%` }} />
            </div>
            <div className="mono cl__score-pct">{pct}% gotowości operacyjnej</div>
          </div>

          <div className="cl__tip">
            <div className="mono cl__tip-eyebrow">→ TIP</div>
            <p>
              {pct === 100
                ? "Komplet. Imponująco. Twój sklep jest gotowy na szczyt sezonu."
                : pct >= 66
                  ? "Solidnie, ale są luki. Pakiet Advanced domknie pozostałe punkty."
                  : pct >= 33
                    ? "Połowa drogi. Zacznij od kopii zapasowych i monitoringu."
                    : "Sklep bez fundamentów. Umów audyt — pomożemy ułożyć plan w 7 dni."}
            </p>
          </div>

          <div className="cl__actions">
            <button className="btn btn--primary btn--block" onClick={() => window.print()}>
              <svg viewBox="0 0 16 16" width="14" height="14"><path d="M4 4h8v3M4 11H2v3h12v-3h-2M4 14h8" stroke="currentColor" strokeWidth="1.4" fill="none" /></svg>
              Pobierz PDF (drukuj)
            </button>
            <a href="#audyt" className="btn btn--ghost btn--block">Zrób mini-audyt</a>
            <button className="btn btn--ghost btn--block" onClick={() => setChecked(Array(total).fill(false))}>↻ Wyzeruj</button>
          </div>

          <div className="cl__legal mono">
            Stan zapisywany lokalnie w przeglądarce.<br />
            Bez logowania, bez śledzenia.
          </div>
        </aside>
      </div>
    </section>
  );
};

window.Checklist = Checklist;