// Beauty portfolio — alternating feature rows (image one side, story the other),
// matching the homepage layout, styled for the craft theme.
function Portfolio() {
  const projects = [
    {
      id: "p02",
      title: <>System rezerwacji dla <em>kliniki medycyny estetycznej</em></>,
      preview: "/img/system-rezerwacji-t.png",
      bare: true,
      client:  "Klinika medycyny estetycznej z 3 lokalizacjami w Warszawie i 12 specjalistami. Rezerwacje wpadały głównie z wiadomości prywatnych, telefonu i formularza kontaktowego na stronie.",
      problem: "Wizyty się dublowały, recepcja miała mnóstwo pracy organizacyjnej, a klientki nie mogły umawiać po godzinach. Nie chcieli Booksy ani Znanego Lekarza - prowizja od każdego nowego klienta przy ich cenach usług to za drogo, a ruch z planowanych reklam tam byłby liczony jako nowi klienci.",
      did:     "Zbudowałem system rezerwacji z panelem zarządzania - recepcja jednym kliknięciem przełącza się między 3 lokalizacjami. Na stronę wpiąłem kalendarz, w którym klientki widzą dostępność i rezerwują o dowolnej porze, z zaliczką przy rezerwacji. Wpiąłem też potwierdzenia wizyt, listę oczekujących z automatycznymi powiadomieniami i cyfrowy system lojalnościowy.",
      result:  [
        "Zero prowizji od nowych klientów - cały ruch z reklam wraca do kliniki.",
        "Klientki rezerwują o dowolnej porze, bez czekania na otwarcie recepcji.",
        "Wizyty się nie dublują, recepcja przestała tracić czas na ich organizację.",
        "No-show drastycznie spadł dzięki potwierdzeniom i zaliczkom przy rezerwacji.",
        "Cyfrowy system lojalnościowy sprawia, że klientki wracają na kolejne wizyty.",
      ],
      href: "/system-rezerwacji/",
    },
    {
      id: "p03",
      title: <>Agent AI obsługujący rezerwacje i zapytania <em>24/7</em></>,
      live: true,
      bare: true,
      wide: true,
      client:  "Klinika medycyny estetycznej z Wrocławia, do której zapytania trafiały głównie przez Instagram, Messenger i telefon do recepcji.",
      problem: "Recepcja spędzała 4 godziny dziennie na odpisywaniu na te same pytania - cennik, dostępność, dojazd. Telefony zakolejkowane, wiadomości na Instagramie i Messengerze czasami leżały bez odpowiedzi po kilka dni.",
      did:     "Zbudowałem agenta AI, który odbiera telefony i odpisuje na Instagramie i Messengerze. Mówi naturalnym ludzkim głosem, odpowiada na pytania o cennik, dojazd i dostępność oraz rezerwuje wizyty. Obsługuje wielu rozmówców naraz w kilka sekund. Sprawy wymagające człowieka przekierowuje do recepcji.",
      result:  [
        "Recepcja odzyskała 4 godziny dziennie - obsługuje tylko sprawy wymagające człowieka.",
        "Klientki dostają odpowiedź w kilka sekund, bez czekania w kolejce - również w nocy i w weekendy.",
        "Wiadomości na Instagramie i Messengerze nie leżą już bez odpowiedzi.",
        "Rezerwacje wpadają same - przez telefon, Instagram i Messenger.",
        "Klientki przestały szukać konkurencji - dostawały odpowiedź od razu.",
      ],
      href: "/agent-ai-rezerwacje-24-7/",
    },
  ];

  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 num="04" 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" : "") + (p.wide ? " g-pfrow--wide" : "")}>
            <div className={"g-pfrow-media" + (p.twin ? " g-pfrow-media--twin" : "") + (p.bare ? " g-pfrow-media--bare" : "") + (p.wide ? " g-pfrow-media--wide" : "")}>
              {p.live
                ? (
                  <div className="bc-cover-pair bc-cover-pair--home">
                    <figure className="bc-cover-item bc-cover-item--chat">
                      <BeautyChatDemo />
                      <figcaption className="bc-cover-cap">Czat na stronie www</figcaption>
                    </figure>
                    <figure className="bc-cover-item">
                      <img className="bc-cover-ig" src="/img/case/agent-ig.png" alt="Agent AI w Instagram DM" loading="lazy" />
                      <figcaption className="bc-cover-cap">Instagram DM</figcaption>
                    </figure>
                  </div>
                )
                : p.twin
                ? p.twin.map((src, j) => <img key={j} src={src} alt="" loading="lazy" />)
                : <img src={p.preview} alt="" loading="lazy" />}
            </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.Portfolio = Portfolio;