function Portfolio() {
  const projects = [
    { id: "p01", tag: "Case 01", title: "Aplikacja do zarządzania zamówieniami (Shopify)",
      client: "Marka własna kosmetyków, ~600 zamówień miesięcznie. Cała obsługa zamówień w Excelu i mailu.",
      problem: "Każde zamówienie to było 6 ręcznych kroków: faktura, etykieta, status, mail, arkusz, archiwum. Pomyłki przy wysyłce zdarzały się ~2 razy w tygodniu.",
      did: "Pipeline w n8n (Shopify → faktura → etykieta → status → mail) plus custom panel z widokiem wszystkich zamówień, filtrami i wyszukiwarką.",
      result: "~12h tygodniowo oszczędzone, zero ręcznych przepisań. Zerowy błąd wysyłkowy w pierwszym kwartale.",
      meta: ["E-commerce", "n8n", "Shopify", "Custom panel"],
      href: "../case-zamowienia.html" },

    { id: "p02", tag: "Case 02", title: "System rezerwacji i zarządzania rezerwacjami",
      client: "Klinika med. estetycznej w Warszawie. 3 lekarzy, ~80 wizyt tygodniowo, stała baza pacjentek.",
      problem: "Recepcja umawiała wszystko telefonicznie - ~80 telefonów dziennie. No-show 18%, pacjentki dzwoniły 3 razy zanim trafiły na wolny termin.",
      did: "Custom aplikacja: 4-krokowy widget rezerwacji dla pacjentek + panel recepcji do zarządzania kalendarzem lekarzy. SMS-y, formularz medyczny 48h przed wizytą.",
      result: "No-show spadł o 40%, 60% rezerwacji idzie online. Recepcja ma godzinę dziennie mniej telefonów.",
      meta: ["Med. estetyczna", "App", "Custom", "SMS"],
      href: "../case-rezerwacje.html" },

    { id: "p03", tag: "Case 03", title: "Agent AI do obsługi rezerwacji (social + WWW)",
      client: "Sieć 4 salonów beauty z Warszawy. Mocne social media, ale recepcja tonęła w DM-ach i telefonach.",
      problem: "70+ telefonów dziennie z powtarzalnymi pytaniami: ceny, godziny, dostępność. Klientki w DM-ach czekały po 4 godziny - sporo rezygnowało.",
      did: "Agent.AI wpięty w stronę, Messengera i Instagram DMs. Odpowiada o cennikach, sprawdza dostępność i przekierowuje do rezerwacji w Booksy.",
      result: "78% zapytań zamykane bez recepcji, 3× więcej rezerwacji z social media. Średnia odpowiedź w 8 sekund 24/7.",
      meta: ["Beauty", "Agent.AI", "Booksy", "Messenger"],
      href: "../case-chatbot.html" },

    { id: "p04", tag: "Case 04", title: "Landing + AI doradca dla marki Ekochemia (B2B)",
      client: "Ekochemia - producent ekologicznych środków czystości B2B. Sprzedaż do hoteli, biur i firm sprzątających.",
      problem: "Lead-gen głównie z poleceń. Na zimno landing nie działał - formularz kontaktowy pobierał ~1 kwalifikowanego leada na 30 wysłanych. Klienci pytali głównie o markę własną, ale sales tracił tydzień na rozmowy bez budżetu.",
      did: "Landing sprzedażowy + AI doradca, który prowadzi rozmowę o profilu klienta i potrzebie marki własnej. Scoringuje leady na 10 punktów, do sales-u idą tylko 7+.",
      result: "3× więcej spotkań sprzedażowych, CAC spadł o połowę. Sales rozmawia tylko z firmami o budżecie i realnej potrzebie marki własnej.",
      meta: ["B2B", "Landing", "AI doradca", "Ekochemia"],
      href: "../case-landing-b2b.html" },

    { id: "p05", tag: "Case 05", title: "Strona WWW dla Ekochemii (e-commerce)",
      client: "Ten sam klient - Ekochemia. Sklep B2B z ekologicznymi środkami czystości, ~400 SKU.",
      problem: "Stara strona ładowała się 6 sekund, na mobile wyglądała źle. Zamówienia hurtowe szły mailem, bo formularz koszyka B2B gubił 30% odpowiedzi.",
      did: "Nowa strona od zera (Next.js + headless commerce), katalog z filtrami branżowymi, koszyk B2B z cennikami negocjowanymi per klient, auto-faktury w Fakturowni.",
      result: "Czas ładowania 0.8s, konwersja na zapytanie 1.2% → 4.5%. Klienci hurtowi sami składają zamówienia, sales weryfikuje tylko nowe konta.",
      meta: ["E-commerce", "B2B", "Next.js", "Ekochemia"],
      href: "../case-strona-www.html" },

    { id: "p06", tag: "Case 06", title: "Sekretarka głosowa AI dla kliniki",
      client: "Druga klinika med. estetycznej, oddziały w Warszawie i Krakowie. Po godzinach pracy recepcji telefon przekierowany na voicemail - tracone leady.",
      problem: "Pacjentki dzwoniły wieczorami i w weekendy. ~40% trafiało na voicemail, z czego połowa już nie oddzwaniała następnego dnia. Recepcja w godzinach pracy też nie nadążała z odbieraniem.",
      did: "Voicebot AI odbiera telefony 24/7. Obsługuje cennik, dojazd, godziny, ofertę. Umawia, przekłada i odwołuje wizyty, synchronizuje się z kalendarzem lekarzy. Eskaluje do recepcji tylko zapytania medyczne.",
      result: "68% spraw zamkniętych przez bota bez recepcji. Po godzinach pracy nie ginie żaden lead. Recepcja w dzień obsługuje wyłącznie pacjentki na miejscu.",
      meta: ["Med. estetyczna", "Voicebot", "OpenAI", "24/7"],
      href: "../case-voicebot.html" },
  ];
  return (
    <section className="g-section" id="portfolio">
      <SectionHeader num="04" eyebrow="Portfolio" title={<>Moje <em>projekty</em>.</>}
                     lead="Wycinek z ostatnich realizacji. Każdy projekt to: kto, jaki problem, co zrobiłem, jaki efekt." />
      <div className="g-portfolio-grid">
        {projects.map((p) => (
          <a key={p.id} className="g-portfolio-card" href={p.href || '#'}>
            <div className="g-portfolio-preview">
              <image-slot id={"port-" + p.id} shape="rect" placeholder="Wgraj zdjęcie projektu"></image-slot>
            </div>
            <div className="g-portfolio-body">
              <div className="g-portfolio-tag">{p.tag}</div>
              <h3 className="g-portfolio-title">{p.title}</h3>
              <dl className="g-portfolio-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>{p.result}</dd></div>
              </dl>
              <div className="g-portfolio-meta">
                {p.meta.map((m, i) => <span key={i} className="g-portfolio-pill">{m}</span>)}
              </div>
              <div className="g-portfolio-foot">
                <span>Zobacz case study</span>
                <span className="g-portfolio-arrow"><i data-lucide="arrow-up-right"></i></span>
              </div>
            </div>
          </a>
        ))}
      </div>
      <div className="g-portfolio-cta">
        <a className="g-btn g-btn--secondary g-btn--lg" href="../portfolio.html">Zobacz wszystkie realizacje <i data-lucide="arrow-right"></i></a>
      </div>
    </section>
  );
}

window.Portfolio = Portfolio;