const PACKAGES = [
  {
    name: "Basic",
    price: 950,
    hours: 10,
    sla: "24h",
    desc: "Dla małych sklepów, które potrzebują pewności, że ktoś czuwa.",
    rows: [
      ["Gorilla Panel", "Bieżący wgląd w zużycie czasu"],
      ["Aktualizacje wtyczek i systemu", "Na życzenie (z puli godzin)"],
      ["Przeznaczenie godzin", "Utrzymanie i bieżące poprawki"],
      ["Priorytet zgłoszeń", "Normalny"],
      ["Kopie zapasowe", "Automatyczny backup"],
      ["Wycena rozwoju", "Standardowa stawka T&M"],
      ["Audyt techniczny", "—"],
      ["Konsultacje eksperckie", "—"],
      ["Dedykowany Project Manager", "—"],
    ],
  },
  {
    name: "Advanced",
    price: 1900,
    hours: 20,
    sla: "8h",
    popular: true,
    desc: "Najczęściej wybierany. Utrzymanie + drobny rozwój.",
    rows: [
      ["Gorilla Panel", "Bieżący wgląd w zużycie czasu"],
      ["Aktualizacje wtyczek i systemu", "W cenie pakietu"],
      ["Przeznaczenie godzin", "Utrzymanie oraz drobne zadania rozwojowe"],
      ["Priorytet zgłoszeń", "Wysoki"],
      ["Kopie zapasowe", "Backup i monitoring Uptime"],
      ["Wycena rozwoju", "Standardowa stawka T&M"],
      ["Audyt techniczny", "Kwartalnie"],
      ["Konsultacje eksperckie", "—"],
      ["Dedykowany Project Manager", "—"],
    ],
  },
  {
    name: "Premium",
    price: 3800,
    hours: 40,
    sla: "4h",
    desc: "Pełna opieka. Reakcja w 4h, dedykowany PM, audyty kwartalne.",
    rows: [
      ["Gorilla Panel", "Bieżący wgląd w zużycie czasu"],
      ["Aktualizacje wtyczek i systemu", "Pełna obsługa, w tle"],
      ["Przeznaczenie godzin", "Utrzymanie + rozwój + doradztwo"],
      ["Priorytet zgłoszeń", "Najwyższy"],
      ["Kopie zapasowe", "Backup + proaktywny audyt bezpieczeństwa"],
      ["Wycena rozwoju", "Atrakcyjna stawka w modelu T&M"],
      ["Audyt techniczny", "Kwartalnie"],
      ["Konsultacje eksperckie", "W ramach pakietu"],
      ["Dedykowany Project Manager", "Tak"],
    ],
  },
];

const Packages = ({ layout }) => {
  const [active, setActive] = React.useState(1);

  return (
    <section className="pkg" id="pakiety" data-screen-label="07 Pricing">
      <header className="section-head section-head--row">
        <div>
          <div className="section-head__num mono">§07 — Pakiety</div>
          <h2 className="section-head__title">Pakiety SLA <span className="strike-soft">i Help Desk</span></h2>
        </div>
        <p className="section-head__sub section-head__sub--max">
          Trzy poziomy opieki technicznej z jasnym SLA. Każdą umowę możesz wypowiedzieć
          w&nbsp;dowolnym momencie z 3-miesięcznym okresem wypowiedzenia.
        </p>
      </header>

      {layout === "cards" ? (
        <div className="pkg__cards">
          {PACKAGES.map((p, i) => (
            <article key={p.name} className={`pkgCard ${p.popular ? "pkgCard--pop" : ""}`}>
              {p.popular && <div className="pkgCard__ribbon mono">Najczęściej wybierany</div>}
              <div className="pkgCard__head">
                <h3 className="pkgCard__name">{p.name}</h3>
                <p className="pkgCard__desc">{p.desc}</p>
              </div>
              <div className="pkgCard__price">
                <span className="pkgCard__num">{p.price.toLocaleString("pl-PL")}</span>
                <span className="pkgCard__cur">zł / mies.</span>
              </div>
              <div className="pkgCard__meta mono">
                <div><span className="dim">Godziny</span><strong>{p.hours} h</strong></div>
                <div><span className="dim">Reakcja SLA</span><strong>{p.sla}</strong></div>
              </div>
              <ul className="pkgCard__list">
                {p.rows.map(([l, v]) => (
                  <li key={l}>
                    <span className={`pkgCard__check ${v === "—" ? "is-off" : ""}`}>
                      {v === "—" ? "—" : "✓"}
                    </span>
                    <span>
                      <strong>{l}</strong>
                      <span className="dim"> — {v}</span>
                    </span>
                  </li>
                ))}
              </ul>
              <a href="#kontakt" className={`btn ${p.popular ? "btn--primary" : "btn--ghost"} btn--block`}>
                Wybierz pakiet {p.name}
              </a>
            </article>
          ))}
        </div>
      ) : (
        <div className="pkg__table">
          <div className="pkg__tabs mono">
            {PACKAGES.map((p, i) => (
              <button key={p.name} className={`pkg__tab ${i === active ? "is-active" : ""}`} onClick={() => setActive(i)}>
                <span>{p.name}</span>
                <span className="dim">{p.price} zł</span>
              </button>
            ))}
          </div>

          <div className="pkg__tableInner">
            <div className="pkg__col pkg__col--labels">
              <div className="pkg__cell pkg__cell--h">&nbsp;</div>
              <div className="pkg__cell pkg__cell--big mono">CENA</div>
              <div className="pkg__cell mono">GODZINY WSPARCIA</div>
              <div className="pkg__cell mono">CZAS REAKCJI</div>
              {PACKAGES[0].rows.map(([l]) => (
                <div className="pkg__cell mono" key={l}>{l.toUpperCase()}</div>
              ))}
              <div className="pkg__cell mono">&nbsp;</div>
            </div>

            {PACKAGES.map((p, i) => (
              <div key={p.name} className={`pkg__col ${i === active ? "is-active" : ""} ${p.popular ? "is-pop" : ""}`}>
                <div className="pkg__cell pkg__cell--h">
                  <h3>{p.name}</h3>
                  {p.popular && <span className="mono pkg__pop">★ TOP</span>}
                </div>
                <div className="pkg__cell pkg__cell--big">
                  <strong>{p.price.toLocaleString("pl-PL")} zł</strong><span className="dim mono"> /mies.</span>
                </div>
                <div className="pkg__cell">{p.hours} h</div>
                <div className="pkg__cell">{p.sla}</div>
                {p.rows.map(([l, v]) => (
                  <div className="pkg__cell" key={l}>
                    {v === "—" ? <span className="dim">—</span> : v}
                  </div>
                ))}
                <div className="pkg__cell">
                  <a href="#kontakt" className={`btn ${p.popular ? "btn--primary" : "btn--ghost"} btn--block btn--sm`}>
                    Wybierz {p.name}
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="pkg__foot mono">
        <span>* Każda dodatkowa godzina ponad pakiet — 120 zł netto.</span>
        <span>Zamówienie odbywa się poprzez formularz kontaktowy.</span>
      </div>
    </section>
  );
};

const Onboarding = () => (
  <section className="onb" data-screen-label="08 Onboarding">
    <header className="section-head">
      <div className="section-head__num mono">§08 — Onboarding</div>
      <h2 className="section-head__title">Pakiet startowy</h2>
      <p className="section-head__sub">Jednorazowe wdrożenie portalu i integracji. Płacisz raz, korzystasz przez lata.</p>
    </header>

    <div className="onb__grid">
      {[
        ["01", "Jednorazowa opłata wdrożeniowa", "Konfigurujemy konto, role, dostępy i integracje pod Twój sklep."],
        ["02", "Konfiguracja portalu + ClickUp + Fakturownia", "Spinamy zgłoszenia, projekty, czas pracy i faktury w jednym widoku."],
        ["03", "Import projektów i dokumentów klienta", "Migrujemy historię z e-maili, dysków i Twojego dotychczasowego systemu."],
      ].map(([n, t, d]) => (
        <article key={n} className="onbCard">
          <div className="onbCard__num">{n}</div>
          <h3 className="onbCard__t">{t}</h3>
          <p className="onbCard__d">{d}</p>
          <div className="onbCard__line" />
        </article>
      ))}
    </div>
  </section>
);

const Social = () => (
  <section className="soc" data-screen-label="09 Social proof">
    <header className="section-head section-head--row">
      <div>
        <div className="section-head__num mono">§09 — Social proof</div>
        <h2 className="section-head__title">Klienci, którzy nam zaufali</h2>
      </div>
      <p className="section-head__sub section-head__sub--max">
        Listy referencyjne i potwierdzenia współpracy — także z sektora publicznego.
      </p>
    </header>

    <div className="soc__grid">
      <article className="socCard">
        <div className="socCard__mark">“</div>
        <p className="socCard__quote">
          Potwierdzamy, że Gorilla Software jest naszym partnerem technologicznym
          odpowiedzialnym za <strong>budowę i utrzymanie infrastruktury webowej</strong>.
          Współpraca obejmowała realizację kluczowych projektów dotyczących sprzedaży online.
        </p>
        <footer className="socCard__sign">
          <div className="socCard__logo">A·TS</div>
          <div>
            <div className="socCard__who">Absolute TeamSport Polska</div>
            <div className="socCard__role mono">Klient B2C · Retail sportowy</div>
          </div>
        </footer>
      </article>

      <article className="socCard">
        <div className="socCard__mark">“</div>
        <p className="socCard__quote">
          Wszystkie prace zostały wykonane z należytą starannością, zgodnie z podpisaną umową.
          <strong> Rekomendujemy współpracę z Gorilla Software</strong> jako profesjonalnym
          i rzetelnym partnerem.
        </p>
        <footer className="socCard__sign">
          <div className="socCard__logo">UMK</div>
          <div>
            <div className="socCard__who">Urząd Miasta Kraków</div>
            <div className="socCard__role mono">Sektor publiczny</div>
          </div>
        </footer>
      </article>

      <article className="socCard socCard--stats">
        <div className="socCard__stats">
          <div className="stat">
            <div className="stat__n">120+</div>
            <div className="stat__l mono">WDROŻEŃ E-COMMERCE</div>
          </div>
          <div className="stat">
            <div className="stat__n">99.98%</div>
            <div className="stat__l mono">ŚREDNI UPTIME · 12 MC</div>
          </div>
          <div className="stat">
            <div className="stat__n">4.8/5</div>
            <div className="stat__l mono">NPS · KLIENCI SLA</div>
          </div>
          <div className="stat">
            <div className="stat__n">24/7</div>
            <div className="stat__l mono">DYŻUR INŻYNIERSKI</div>
          </div>
        </div>
      </article>
    </div>
  </section>
);

const FAQ = () => {
  const items = [
    ["Co jeśli przekroczę limit godzin?", "Każda dodatkowa godzina rozliczana jest według stawki 120 zł netto/h. Otrzymasz powiadomienie po przekroczeniu 80% pakietu."],
    ["Czy mogę zmienić pakiet w trakcie umowy?", "Tak — w dowolnym momencie możesz przejść na wyższy lub niższy pakiet. Zmiana obowiązuje od kolejnego okresu rozliczeniowego."],
    ["Czy umowa jest długoterminowa?", "Tak — umowę możesz wypowiedzieć w dowolnym momencie, z zachowaniem 3-miesięcznego okresu wypowiedzenia."],
    ["Czy pakiety obejmują rozwój nowych funkcjonalności?", "Tak — w ramach dostępnych godzin SLA możemy wdrażać nowe funkcje, integracje oraz rozwijać system."],
    ["Czy portal działa 24/7?", "Tak — masz stały, całodobowy dostęp do projektów, faktur i raportów. Help Desk reaguje wg pakietu (Premium: 4h od zgłoszenia)."],
    ["Na jakich platformach pracujecie?", "Sylius, Shopify, PrestaShop, WooCommerce, Shoper. Dla każdej z nich mamy dedykowanych inżynierów."],
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="faq" data-screen-label="10 FAQ">
      <header className="section-head section-head--row">
        <div>
          <div className="section-head__num mono">§10 — FAQ</div>
          <h2 className="section-head__title">Pytania, które słyszymy najczęściej</h2>
        </div>
      </header>

      <div className="faq__list">
        {items.map(([q, a], i) => (
          <div key={i} className={`faq__row ${open === i ? "is-open" : ""}`}>
            <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="mono faq__num">{String(i + 1).padStart(2, "0")}</span>
              <span className="faq__qt">{q}</span>
              <span className="faq__chev">{open === i ? "−" : "+"}</span>
            </button>
            <div className="faq__a">
              <p>{a}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const CTA = () => (
  <section className="cta" id="kontakt" data-screen-label="11 CTA">
    <div className="cta__inner">
      <div className="cta__eyebrow mono">§11 — Decyzja</div>
      <h2 className="cta__title">Twój biznes zasługuje<br />na <em>pełną</em> ochronę i spokój.</h2>
      <p className="cta__sub">
        15 minut z naszym specjalistą wystarczy, by dobrać pakiet pod Twój sklep.
        Bez prezentacji, bez marketingu — tylko konkrety.
      </p>
      <div className="cta__actions">
        <a href="#kontakt" className="btn btn--primary btn--lg">
          Umów bezpłatną konsultację
          <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>
        <a href="#audyt" className="btn btn--ghost btn--lg">Zrób mini-audyt</a>
      </div>
      <div className="cta__meta mono">
        <span>✓ Brak zobowiązań</span>
        <span>✓ Wycena w 24h</span>
        <span>✓ Polski zespół, polskie godziny</span>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="ftr">
    <div className="ftr__top">
      <div className="ftr__brand">
        <div className="logo">
          <span className="logo__mark">●</span>
          <span className="logo__txt">Gorilla<br />Software</span>
        </div>
        <p className="ftr__about">
          Opieka techniczna i wsparcie 24/7 dla sklepów e-commerce.
          Sylius · Shopify · PrestaShop · WooCommerce · Shoper.
        </p>
      </div>
      <div className="ftr__cols">
        <div>
          <div className="mono ftr__h">Wsparcie</div>
          <a href="#">Wsparcie SLA</a>
          <a href="#audyt">Audyt</a>
          <a href="#checklista">Checklista</a>
          <a href="#">Partnerstwo</a>
        </div>
        <div>
          <div className="mono ftr__h">Usługi</div>
          <a href="#">WooCommerce</a>
          <a href="#">PrestaShop</a>
          <a href="#">Shopify</a>
          <a href="#">Sylius</a>
          <a href="#">Shoper</a>
        </div>
        <div>
          <div className="mono ftr__h">Firma</div>
          <a href="#">Case studies</a>
          <a href="#">Baza wiedzy</a>
          <a href="#">Kontakt</a>
        </div>
      </div>
    </div>
    <div className="ftr__bot mono">
      <div>Gorilla Software · Rzeszów · NIP 8133856997</div>
      <div>© 2026 · All rights reserved</div>
    </div>
  </footer>
);

Object.assign(window, { Packages, Onboarding, Social, FAQ, CTA, Footer });