const Portal = () => {
  const features = [
    { t: "Zarządzanie projektami", d: "Integracja z ClickUp, przesyłanie zadań online, podgląd statusów na żywo.", tag: "ClickUp" },
    { t: "Raportowanie i czas pracy", d: "Miesięczny raport PDF, podsumowania AI z najważniejszych zmian w sklepie.", tag: "PDF + AI" },
    { t: "Fakturowanie online", d: "Integracja z Fakturownią. Faktury, korekty i historia płatności w jednym widoku.", tag: "Fakturownia" },
    { t: "Ankiety satysfakcji (NPS)", d: "Na bieżąco mierzymy poziom Twojej satysfakcji i reagujemy na sygnały.", tag: "NPS" },
    { t: "Archiwum dokumentów", d: "Wszystkie umowy, aneksy i NDA w jednym, podpisanym miejscu.", tag: "Dokumenty" },
    { t: "Eskalacja i SLA", d: "Liczniki czasu reakcji widoczne dla obu stron — żadnych zaginionych ticketów.", tag: "SLA" },
  ];

  return (
    <section className="portal" data-screen-label="04 Portal features">
      <header className="section-head">
        <div className="section-head__num mono">§04 — Portal</div>
        <h2 className="section-head__title">Kluczowe funkcjonalności portalu</h2>
        <p className="section-head__sub">
          Jedno logowanie. Wszystko, czego potrzebujesz, by zarządzać współpracą z zespołem technicznym.
        </p>
      </header>

      <div className="portal__board">
        <div className="portal__sidebar">
          <div className="portal__sidebar-head mono">
            <span className="portal__dot" />
            panel.gorillasoftware.eu
          </div>
          <nav className="portal__nav mono">
            <span className="portal__nav-item portal__nav-item--active">▸ Dashboard</span>
            <span className="portal__nav-item">  Projekty</span>
            <span className="portal__nav-item">  Zgłoszenia</span>
            <span className="portal__nav-item">  Raporty</span>
            <span className="portal__nav-item">  Faktury</span>
            <span className="portal__nav-item">  Dokumenty</span>
            <span className="portal__nav-item">  Zespół</span>
          </nav>
          <div className="portal__owner">
            <div className="portal__avatar">MK</div>
            <div>
              <div className="portal__owner-name">Marek Kowalski</div>
              <div className="portal__owner-role mono">Project Manager · Premium</div>
            </div>
          </div>
        </div>

        <div className="portal__grid">
          {features.map((f, i) => (
            <article className="portalCard" key={i}>
              <div className="portalCard__head">
                <span className="mono portalCard__num">F.{String(i + 1).padStart(2, "0")}</span>
                <span className="mono portalCard__tag">{f.tag}</span>
              </div>
              <h3 className="portalCard__title">{f.t}</h3>
              <p className="portalCard__desc">{f.d}</p>
              <div className="portalCard__line" />
            </article>
          ))}
        </div>
      </div>

      <div className="benefits">
        <h3 className="benefits__title">Korzyści biznesowe</h3>
        <div className="benefits__grid">
          {[
            ["Transparentność", "Zawsze wiesz, co dzieje się z Twoim projektem."],
            ["Oszczędność czasu", "Automatyczne raporty i integracje."],
            ["Bezpieczeństwo", "Monitoring + szybka reakcja na błędy."],
            ["Wzrost satysfakcji", "Dedykowany opiekun i prosta komunikacja."],
            ["Profesjonalny wizerunek", "Partner IT, który dba o Twój biznes."],
          ].map(([t, d], i) => (
            <div key={t} className="benefit">
              <div className="benefit__num mono">B.{String(i + 1).padStart(2, "0")}</div>
              <div className="benefit__t">{t}</div>
              <div className="benefit__d">{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Portal = Portal;