// Deezer-style Portfolio - 3 alternating feature rows, no badges, no tags.
// Each row: image one side, story (klient / problem / co zrobiłem / efekt) the
// other side, plus a per-project CTA "Zobacz pełny projekt".

function PortfolioDeezer() {
  const projects = [
    {
      id: "p01",
      preview: "/img/zamowienia-panel-t.png",
      bare: true,
      title: <>Aplikacja do zarządzania zamówieniami z <em>4 kanałów</em></>,
      client:  "Sklep e-commerce sprzedający własne produkty na 4 marketplace'ach i własnej stronie www.",
      problem: "BaseLinker w jego skali stawał się za drogi - koszt rósł nieproporcjonalnie do firmy, a kolejny próg abonamentu nie pokrywał się z liczbą nowych zamówień. Wszystko obsługiwał ręcznie i chciał skończyć ze skakaniem między panelami.",
      did:     "Po audycie tego, skąd przychodzą zamówienia i jak są teraz obsługiwane, zbudowałem dedykowaną aplikację. W jednym panelu: zamówienia, stany magazynowe, faktury, przychody i raporty sprzedaży konkretnych produktów.",
      result:  [
        "Inwestycja zwróciła się w 2 miesiące.",
        "4 kanały obsługiwane z jednego panelu, bez ręcznych pomyłek.",
        "Stany magazynowe aktualizują się na żywo.",
        "Czas obsługi zamówienia: z 15 minut do jednego kliknięcia.",
        "Faktury wystawiają się i wysyłają do klienta automatycznie.",
      ],
      href: "/zarzadzanie-zamowieniami/",
    },
    {
      id: "p02",
      preview: "/img/lampa-luna-t.png",
      bare: true,
      chatUnder: true,
      title: <>Agent AI do <em>obsługi klienta</em> po zakupie</>,
      client:  "Sklep e-commerce z Poznania, sprzedający własne produkty na Allegro i własnej stronie internetowej.",
      problem: "Klienci codziennie zalewali firmę zapytaniami o statusy zamówień, funkcjonalność produktów i czas dostawy - przez Allegro, formularz kontaktowy i mail. Odpowiadanie zajmowało godziny dziennie, wiadomości leżały po kilka dni. Czas odpowiedzi obniżał jakość konta na marketplace'ach, a brak odpowiedzi na reklamację skutkował negatywnymi opiniami.",
      did:     "Wdrożyłem agenta AI do obsługi klienta - chatbota na stronie i agenta odpowiadającego na wiadomości na marketplace'ach. Agent głosowy odbiera telefony: informuje o statusach zamówień, czasie dostawy i podstawowych pytaniach produktowych.",
      result:  [
        "Klienci dostają odpowiedź w kilka sekund - przez chatbota, marketplace'y i telefon, bez czekania w kolejce.",
        "Sklep odzyskał sporo godzin dziennie - obsługa zajmuje się już tylko sprawami wymagającymi człowieka.",
        "Wyeliminowaliśmy negatywne opinie, które wpadały z uwagi na brak kontaktu.",
        "Czas odpowiedzi na marketplace'ach poprawił jakość konta sklepu.",
        "Agent obsługuje wiele rozmów naraz - klienci nie czekają w kolejce nawet w godzinach szczytu.",
      ],
      href: "/agent-ai-obsluga-klienta/",
    },
    {
      id: "p03",
      preview: "/img/ecochemiawspolpraca-t.png",
      bare: true,
      title: <>Strona sprzedażowa <em>B2B + AI doradca</em> dla producenta środków ekologicznych</>,
      client:  "Producent ekologicznych środków czystości sprzedający pod własną marką na własnej stronie internetowej i marketplace'ach. Chciał rozszerzyć biznes o produkcję private label i white label dla innych marek, ale nie wiedział, jak skutecznie pozyskać klientów B2B.",
      problem: "Zapytania B2B spływały sporadycznie - głównie przypadkowo z głównej strony skupionej na sprzedaży detalicznej. Brakowało osobnego kanału mówiącego językiem B2B (private label, white label, produkcja kontraktowa) i konkretnej oferty dla firm szukających produkcji pod swoją markę.",
      did:     "Zbudowałem osobny landing page wyłącznie dla oferty B2B - produkcji pod private label i white label. Wpiąłem agenta AI doradcę, który pomaga klientom dobrać konkretny środek i odpowiada na pytania o uruchamianie własnej marki. Zautomatyzowałem formularz kontaktowy - klient dostaje potwierdzenie w ciągu kilku sekund, a odpowiedź od doradcy w ciągu kilku godzin. Wdrożyłem również agenta wyszukującego firmy potencjalnie zainteresowane ofertą.",
      result:  [
        "Co tydzień wpadają zapytania na produkcję - bez ręcznego pozyskiwania klientów B2B.",
        "Klienci dostają odpowiedź od agenta AI na stronie od razu - na pytania o własną markę i dobór produktu.",
        "Firma kontaktuje się z klientem w ciągu kilku godzin od zapytania.",
        "Oferta B2B działa jako osobny kanał sprzedaży obok sprzedaży detalicznej.",
        "Agent wyszukujący firmy zasila bazę klientów B2B automatycznie.",
      ],
      href: "/strona-sprzedazowa-b2b/",
    },
  ];

  const renderResult = (r) => Array.isArray(r)
    ? <ul className="g-pfrow-result-list">{r.map((it, i) => <li key={i}>{it}</li>)}</ul>
    : r;

  return (
    <section className="g-section" id="portfolio">
      <SectionHeader
        eyebrow="Portfolio"
        title={<>Zobacz, <em>co buduję</em> dla klientów.</>}
        lead="Każdy projekt zaczynał się od konkretnego problemu klienta. Zobacz, co dla nich zbudowałem i jakie efekty to przyniosło."
      />

      <div className="g-portfolio-features">
        {projects.map((p, i) => (
          <article key={p.id} className={"g-pfrow" + (i % 2 === 1 ? " g-pfrow--reverse" : "")}>
            <div className={"g-pfrow-media" + (p.bare ? " g-pfrow-media--bare" : "") + (p.twin ? " g-pfrow-media--twin" : "") + (p.chatUnder ? " g-pfrow-media--chatstack" : "")}>
              {p.twin
                ? p.twin.map((src, j) => (
                    <img key={j} src={src} alt={"Podgląd projektu " + (j+1) + ": " + (typeof p.title === 'string' ? p.title : p.id)} loading="lazy" />
                  ))
                : p.preview
                ? <img src={p.preview} alt={"Podgląd projektu: " + (typeof p.title === 'string' ? p.title : p.id)} loading="lazy" />
                : <image-slot id={"pfd-" + p.id} shape="rect" placeholder="Wgraj zdjęcie projektu"></image-slot>}
              {p.chatUnder && <ChatDemo />}
            </div>
            <div className="g-pfrow-body">
              <h3 className="g-pfrow-title">{p.title}</h3>
              <dl className="g-pfrow-story">
                <div><dt>Klient</dt><dd>{p.client}</dd></div>
                <div><dt>Problem</dt><dd>{p.problem}</dd></div>
                <div><dt>Co zrobiłem</dt><dd>{p.did}</dd></div>
                <div><dt>Efekt</dt><dd>{renderResult(p.result)}</dd></div>
              </dl>
              <a className="g-btn g-btn--primary g-pfrow-cta" href={p.href}>
                Zobacz pełny projekt <i data-lucide="arrow-right"></i>
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

window.PortfolioDeezer = PortfolioDeezer;