/* global React */
/* Hi-fi sections: Doctors, Kamila, Steps, Pricing, FAQ, Final */
const { useState } = React;
const { B, Icon, asset } = window;

/* ============ DOCTORS ============ */
const DOCTORS = [
{ name: "lek. Olga Starczewska", info: "Szpital im. W. Orłowskiego · cert. PTLO i PTBO", img: asset("doc1", "bariatria/assets/doctor-1.avif") },
{ name: "lek. Alicja Dudek", info: "Klinika Endokrynologii CMKP · badaczka otyłości · Forbes 25under25", img: "https://cdn.prod.website-files.com/6834814ffbf27b784d49c8f2/6836baa941a8af911fcdcd16_6466378050bc2f0bd37a8631_63de82ae6f6edd05415a9542_zdjecie%2520AD%2520(1)%25201%2520(2)-p-500.avif" },
{ name: "lek. Marta Gonciarz", info: "cert. PTLO · podejście medyczno-dietetyczno-psychologiczne", img: asset("doc6", "bariatria/assets/doctor-6.avif") },
{ name: "lek. Katarzyna Rafało", info: "WUM · cert. PTLO · psychodietetyka i styl życia", img: asset("doc5", "bariatria/assets/doctor-5.avif") },
{ name: "lek. Adam Pawlak", info: "medycyna rodzinna · cert. PTLO i PTBO · leczenie otyłości", img: "https://cdn.prod.website-files.com/6834814ffbf27b784d49c8f2/6a32fa3ac19afaa1fe3496af_6a32f7f0ffb3c146423c779e_apawlak.avif" },
{ name: "lek. Paulina Grabowska", info: "choroby wewnętrzne · lipidolog · po szkoleniach PTLO i PTBO", img: "https://cdn.prod.website-files.com/6834814ffbf27b784d49c8f2/6a32fa3ac19afaa1fe3496b5_6a32f7f124ac0fd541939fa2_pgrabowska.avif" }];


window.DoctorsSection = function DoctorsSection() {
  return (
    <section className="doctors section-pad" id="lekarze">
      <div className="container">
        <div className="doctors__head">
          <h2 style={{ fontSize: "49px", lineHeight: "1.1" }}>
            <span style={{ color: "#1c1f29", fontWeight: "400", fontSize: "49px" }}>Zespół certyfikowanych lekarzy, którzy</span> <em style={{ fontSize: "53px" }}>poprowadzą Twoje leczenie.</em>
          </h2>
          <div className="doctors__head-meta doctors__head-meta--v2">
            <div className="doctors__feats">
              <div className="doctors__feat">
                <span className="doctors__feat-ic"><Icon name="check" size={20} /></span>
                <span className="doctors__feat-label">E-Recepta</span>
              </div>
              <div className="doctors__feat">
                <span className="doctors__feat-ic"><Icon name="sparkle" size={20} /></span>
                <span className="doctors__feat-label">E-wizyty co&nbsp;3&nbsp;miesiące</span>
              </div>
              <div className="doctors__feat">
                <span className="doctors__feat-ic"><Icon name="stethoscope" size={20} /></span>
                <span className="doctors__feat-label">Leczenie GLP-1</span>
              </div>
            </div>
          </div>
        </div>

        <div className="doctors__strip">
          <div className="doctors__track" style={{ height: "325px" }}>
          {DOCTORS.map((d, i) =>
            <div key={i} className="doctor" style={{ width: "272px", height: "325px" }}>
              <div className="doctor__photo"><img src={d.img} alt={d.name} /></div>
              <div className="doctor__name" style={{ fontSize: "12px", fontFamily: "Inter" }}>{d.name}</div>
              <div className="doctor__info" style={{ fontSize: "10px" }}>{d.info}</div>
            </div>
            )}
          {DOCTORS.map((d, i) =>
            <div key={`dup${i}`} aria-hidden="true" className="doctor doctor--dup" style={{ width: "272px", height: "325px" }}>
              <div className="doctor__photo"><img src={d.img} alt="" /></div>
              <div className="doctor__name" style={{ fontSize: "12px", fontFamily: "Inter" }}>{d.name}</div>
              <div className="doctor__info" style={{ fontSize: "10px" }}>{d.info}</div>
            </div>
            )}
          </div>
        </div>

      </div>
    </section>);

};

/* ============ KAMILA ============ */
window.KamilaSection = function KamilaSection() {
  return (
    <section className="kamila section-pad">
      <div className="container">
        <h2 style={{ fontSize: "49px", fontWeight: "400", lineHeight: "1.1" }}>
          Poznaj historię Kamili, która w&nbsp;Klinice Holi <em style={{ fontSize: "53px" }}>schudła 30 kg.</em>
        </h2>
        <div className="kamila__grid">
          <div className="kamila__media">
            <img src={asset("kamila", "bariatria/assets/kamila.jpg")} alt="Kamila" loading="lazy" decoding="async" />
          </div>
          <div className="kamila__copy">
            <p className="kamila__lead" style={{ fontFamily: "Inter", fontSize: "15px" }}>
              Kamila nie przyszła do&nbsp;Holi po&nbsp;„szybką receptę". Chciała czegoś zupełnie innego: odzyskać sprawność
              i&nbsp;móc normalnie chodzić. Próbowała już wielu rzeczy: diet, pudełek, samodzielnego odchudzania.
              Ale dopiero w&nbsp;Holi zaczęła od&nbsp;tego, od&nbsp;czego powinno zacząć się leczenie otyłości:{" "}
              <strong style={{ fontWeight: "700" }}>od&nbsp;badań</strong>. To one pokazały silną anemię, która odbierała jej energię
              i&nbsp;której wcześniej nikt nie połączył z&nbsp;jej trudnościami.
            </p>
            <p className="kamila__lead" style={{ fontFamily: "Inter", fontSize: "15px" }}>
              Na&nbsp;tej podstawie lekarz prowadzący i&nbsp;psychodietetyczka ułożyli plan dopasowany do&nbsp;Kamili,
              a&nbsp;<strong style={{ fontWeight: "700" }}>nie schemat z&nbsp;internetu</strong>. Leczenie, wsparcie w&nbsp;zmianie nawyków i&nbsp;małe kroki,
              które dało się utrzymać na&nbsp;co dzień.
            </p>
            <p className="kamila__lead" style={{ fontFamily: "Inter", fontSize: "15px", lineHeight: "1.7" }}>
              Po&nbsp;6&nbsp;miesiącach Kamila schudła 30&nbsp;kg. Ale najważniejsze nie było dla&nbsp;niej samo „minus&nbsp;30".
              Najważniejsze było to, że znowu mogła chodzić, robić zakupy, pływać, ćwiczyć i&nbsp;czuć,
              że jej ciało przestaje być przeszkodą.
            </p>
            <a className="kamila__link" href="https://www.klinikaholi.pl/blogpost/chcialam-po-prostu-moc-chodzic" target="_self">
              Przeczytaj pełną historię Kamili →
            </a>
            <div className="kamila__byline">
              <div className="kamila__byline-avatar">
                <img src={asset("kamila", "bariatria/assets/kamila.jpg")} alt="" loading="lazy" decoding="async" />
              </div>
              <div>
                <div className="kamila__byline-name">Kamila</div>
                <div className="kamila__byline-info">
                  pacjentka Holi · <span className="plum">−30 kg w 6 miesięcy</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

/* ============ STEPS ============ */
const STEPS = [
{
  title: "Przechodzisz darmową kwalifikację",
  body: "Wypełniasz krótką ankietę online - bez skierowania i kolejek. Jeśli się kwalifikujesz, opłacasz program, a my zakładamy Twoją kartę pacjenta."
},
{
  title: "Badania krwi i e-konsultacja z psychodietetykiem",
  body: "Dostajesz skierowanie na badania krwi w punkcie Diagnostyka i umawiasz pierwszą e-wizytę u psychodietetyka."
},
{
  title: "E-konsultacja u lekarza obesitologa",
  body: "Wybierasz lekarza prowadzącego i termin. Omawia z Tobą wyniki, ustala farmakoterapię (jeśli wskazana), wystawia eRecepty. Od tej chwili masz go w czacie 24/7."
}];


window.StepsSection = function StepsSection() {
  return (
    <section className="steps section-pad" style={{ fontWeight: "400" }}>
      <div className="container">
        <div className="steps__head">
          <h2 style={{ fontSize: "49px", fontWeight: "400", lineHeight: "1.1" }}>Jak zacząć leczenie w&nbsp;<em style={{ fontSize: "53px" }}>klinice Holi</em>?</h2>
          <div className="steps__sub" style={{ color: "rgb(27, 31, 41)", fontFamily: "Inter", fontWeight: "400", fontSize: "16px" }}>Trzy kroki - od&nbsp;wywiadu do pełnego planu leczenia</div>
        </div>

        <div className="steps__grid">
          {STEPS.map((s, i) =>
          <div key={`s${i}`} className="step">
              <span className="step__num">{i + 1}.</span>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
            </div>
          )}
        </div>

        <div className="steps__cta" style={{ alignItems: "center" }}>
          <div className="steps__highlight">
            <div className="steps__big">
              <span className="steps__big-num">14</span>
              <span className="steps__big-unit">dni</span>
            </div>
            <div className="steps__big-cap" style={{ textAlign: "left" }}>
              <div className="steps__big-cap-title" style={{ fontFamily: "Inter", fontWeight: "500", fontSize: "17px", textAlign: "left" }}>średnio do pełnego planu leczenia</div>
              <div className="steps__big-cap-sub" style={{ width: "399px", textAlign: "left" }}>
                zależy od&nbsp;tempa, w&nbsp;jakim zrobisz badania i&nbsp;umówisz konsultacje
              </div>
            </div>
          </div>
          <div className="cta-group">
            <a className="btn btn--primary btn--lg" href="https://www.klinikaholi.pl/wywiad" target="_self" style={{ height: "54px", fontSize: "15px", alignItems: "center" }}>
              Sprawdź, czy się kwalifikujesz <Icon name="arrow_right" size={18} />
            </a>
          </div>
        </div>
      </div>
    </section>);

};

/* ============ PRICING ============ */
window.PricingSection = function PricingSection() {
  return (
    <section className="pricing section-pad" id="cennik">
      <div className="container">
        <div className="pricing__head">
          <h2 style={{ fontSize: "49px", fontWeight: "400", lineHeight: "1.1" }}>Jedna klinika. <em style={{ fontSize: "53px" }}>Dwie opcje płatności.</em></h2>
        </div>

        <div className="pricing__grid">
          {/* Cheaper per-month first - featured 6 months */}
          <div className="plan plan--featured">
            <div className="plan__top">
              <span className="plan__name">Pakiet 6 miesięcy</span>
              <span className="plan__tag">Najczęściej wybierane</span>
            </div>
            <div className="plan__price">
              <span className="plan__num">289 zł</span>
              <span className="plan__per">/ mies.</span>
            </div>
            <div className="plan__meta">
              <span className="plan__save">−20%</span>
              <span>1&nbsp;734 zł jednorazowo</span>
            </div>
            <p className="plan__desc">Optymalny czas na trwały efekt pod stałą opieką lekarza.</p>
          </div>

          {/* Monthly */}
          <div className="plan">
            <div className="plan__top">
              <span className="plan__name">Płatność co miesiąc</span>
            </div>
            <div className="plan__price">
              <span className="plan__num">od 349 zł</span>
              <span className="plan__per">/ mies.</span>
            </div>
            <div className="plan__meta">
              <span>Bez zobowiązań</span>
            </div>
            <p className="plan__desc">Przetestuj program - anulujesz w aplikacji jednym kliknięciem.</p>
          </div>
        </div>

        <div className="plan-includes">
          <span className="plan-includes__label">W cenie każdego pakietu:</span>
          <ul className="plan-includes__chips">
            {[
              "Lekarz obesitolog co 3 miesiące",
              "Badania krwi",
              "Nielimitowane e-wizyty u psychodietetyka",
              "Czat 24/7",
              "E-recepty",
              "Plan leczenia",
            ].map((t, i) =>
              <li key={i} className="plan-chip">
                <Icon name="check" size={15} />{t}
              </li>
            )}
          </ul>
        </div>

        <div className="pricing__cta">
          <a className="btn btn--primary btn--lg" href="https://www.klinikaholi.pl/wywiad" target="_self">Sprawdź, czy się kwalifikujesz <span className="cta-hint" style={{ opacity: 0.7, fontWeight: 400 }}>(3&nbsp;min)</span> <Icon name="arrow_right" size={18} /></a>
        </div>
      </div>
    </section>);
};

/* ============ FAQ ============ */
const FAQ_ITEMS = [
{
  q: "Czy Holi to prawdziwa klinika (poradnia) leczenia otyłości?",
  a: "Tak. Holi to zarejestrowany podmiot leczniczy wpisany do RPWDL, z zespołem lekarzy obesitologów certyfikowanych przez Polskie Towarzystwo Leczenia Otyłości. Jedyna różnica wobec tradycyjnej poradni jest taka, że działamy w całości online - nie dojeżdżasz i nie czekasz tygodniami na termin."
},
{
  q: "Czy potrzebuję skierowania od lekarza POZ?",
  a: "Nie. Do rozpoczęcia leczenia w Holi nie potrzebujesz skierowania. Wystarczy, że przejdziesz kwalifikację online - wypełnisz ankietę składającą się z kilkunastu pytań."
},
{
  q: "Czy leczycie w ramach NFZ?",
  a: "Holi działa prywatnie. Dzięki temu nie czekasz miesiącami na termin, masz jednego lekarza prowadzącego, czat 24/7 oraz badania i wsparcie psychodietetyka w jednym miejscu. Cała opieka mieści się w jednym, przejrzystym abonamencie - bez ukrytych dopłat za kolejne wizyty."
},
{
  q: "Czy muszę gdzieś dojechać? Czy są wizyty stacjonarne?",
  a: "Konsultacje z lekarzem i całym zespołem odbywają się online - z domu, w wygodnym dla Ciebie terminie. Stacjonarnie wykonujesz tylko badania krwi, w punkcie sieci Diagnostyka w Twoim mieście. Jedyne, czego potrzebujesz, to komputer i dostęp do internetu."
},
{
  q: "Jak długo czeka się na wizytę?",
  a: "Nie ma kilkutygodniowej kolejki jak w wielu poradniach. Wywiad medyczny umawiasz na najbliższy dogodny termin, a pełny plan leczenia z lekarzem powstaje zwykle w mniej niż 14 dni - zależnie od tego, jak szybko wykonasz badania i umówisz konsultacje."
},
{
  q: "Czy lekarz może wystawić e-receptę?",
  a: "Tak, jeśli oceni, że farmakoterapia jest medycznie wskazana. Decyzja zapada po wywiadzie i analizie badań."
},
{
  q: "Co jeśli chcę tylko receptę?",
  a:
  <>
        Receptę dostaniesz wszędzie. Ale lek bez opieki = efekt jojo po odstawieniu i utrata mięśni zamiast tłuszczu.
        W naszej klinice do recepty dostajesz lekarza, który koryguje dawkę przy skutkach ubocznych, psychodietetyka,
        który pracuje nad nawykami zostającymi po odstawieniu, oraz badania kontrolne z analizą lekarską.
        Średnia utrata wagi pod opieką Holi to <B>20,7 kg</B>. Sam lek bez opieki - <B>10,2 kg</B>.
      </>

},
{
  q: "Co jest w cenie, a za co płacę osobno?",
  a: "W cenie są konsultacje lekarskie, badania krwi co 3 miesiące, wsparcie psychodietetyka, czat, aplikacja i webinary. Koszt leków nie jest wliczony w cenę leczenia."
}];


window.FaqSection = function FaqSection() {
  const [openIdx, setOpenIdx] = useState(-1);
  return (
    <section className="faq section-pad" id="faq">
      <div className="container">
        <div className="faq__grid">
          <div className="faq__head">
            <h2 style={{ fontSize: "49px", fontWeight: "400", lineHeight: "1.1" }}>Sprawdź, <em style={{ fontSize: "53px" }}>zanim zaczniesz.</em></h2>
            <p className="faq__sub" style={{ width: "460px", color: "rgb(27, 31, 41)", opacity: "1", margin: "0px", padding: "0px", fontSize: "16px" }}>Najczęściej zadawane pytania.</p>
          </div>
          <div className="faq__list">
            {FAQ_ITEMS.map((item, i) => {
              const open = openIdx === i || window.__printMode;
              return (
                <div
                  key={i}
                  className={`faq-item ${open ? "faq-item--open faq-item--first" : ""}`}
                  onClick={() => setOpenIdx(open ? -1 : i)}>
                  
                  <div className="faq-item__q" style={{ fontSize: "15px" }}>
                    <span style={{ fontFamily: "Inter", fontSize: "15px" }}>{item.q}</span>
                    <span className="faq-item__icon"><Icon name="plus" size={18} /></span>
                  </div>
                  {open && <div className="faq-item__a" style={{ fontSize: "14px" }}>{item.a}</div>}
                </div>);

            })}
          </div>
        </div>
      </div>
    </section>);

};

/* ============ FINAL ============ */
window.FinalSection = function FinalSection() {
  return (
    <section className="final" id="kontakt">
      <div className="container final__inner" style={{ gap: "32px", justifyContent: "flex-start", padding: "48px 32px" }}>
        <h2 style={{ fontWeight: "400", fontSize: "49px", whiteSpace: "nowrap", lineHeight: "1.1" }}>Umów wywiad w klinice Holi <em style={{ fontSize: "53px", whiteSpace: "nowrap" }}>już dziś!</em></h2>
        <p style={{ width: "500px", fontSize: "16px", fontWeight: "500", color: "rgb(255, 255, 255)", opacity: "1", lineHeight: "1.55" }}>Bez skierowania, bez kolejek i&nbsp;bez dojazdów. Pierwszy krok to bezpłatna ankieta kwalifikująca.</p>
        <div className="final__ctas">
          <div className="cta-group">
            <a className="btn btn--white btn--lg" href="https://www.klinikaholi.pl/wywiad" target="_self">
              Sprawdź, czy się kwalifikujesz <Icon name="arrow_right" size={18} />
            </a>
          </div>
        </div>
        <div className="final__trust" style={{ justifyContent: "space-between" }}>
          <span>3000+ pacjentów</span>
          <i className="sep"></i>
          <span>9.8/10 (kliniki.pl)</span>
          <i className="sep"></i>
          <span>Lekarze certyfikowani PTLO</span>
          <i className="sep"></i>
          <span>Zarejestrowany podmiot leczniczy</span>
        </div>
      </div>
    </section>);

};

/* ============ RADA MEDYCZNA (credibility) ============ */
const RADA = [
{
  spec: "Endokrynolog i diabetolog",
  name: "prof. dr hab. Alina Kuryłowicz",
  desc: "Specjalistka zajmująca się tematyką otyłości, z doświadczeniem międzynarodowym.",
  img: asset("rada1", "bariatria/assets/rada-kurylowicz.avif")
},
{
  spec: "Chirurg bariatryczny",
  name: "dr hab. n. med. Michał Janik",
  desc: "Certyfikowany chirurg bariatryczny, prezes Fundacji Polska Szkoła Bariatrii.",
  img: asset("rada2", "bariatria/assets/rada-janik.avif")
},
{
  spec: "Kardiolog",
  name: "prof. dr hab. Artur Mamcarz",
  desc: "Ponad 30 lat doświadczenia i 330+ publikacji; w Zarządzie PTMSŻ i PTLO.",
  img: asset("rada3", "bariatria/assets/rada-mamcarz.avif")
}];

window.RadaMedycznaSection = function RadaMedycznaSection() {
  return (
    <section className="rada section-pad" id="rada">
      <div className="container">
        <div className="rada__head">
          <div className="eyebrow">Rada medyczna Holi</div>
          <h2>Nad standardami leczenia czuwa <em style={{ fontSize: "53px" }}>niezależna rada medyczna.</em></h2>
          <p>
            Nad metodyką programu Holi czuwa Rada Medyczna - polscy eksperci z&nbsp;dziedziny
            endokrynologii, diabetologii, bariatrii i&nbsp;kardiologii. Tylko z&nbsp;ich pomocą
            mógł powstać program tak przełomowy jak Holi.
          </p>
        </div>

        <div className="rada__grid">
          {RADA.map((m, i) =>
          <div key={i} className="rada-member">
              <div className="rada-member__photo"><img src={m.img} alt={m.name} loading="lazy" decoding="async" /></div>
              <div className="rada-member__role"><span className="plum">{m.spec}</span></div>
              <div className="rada-member__name">{m.name}</div>
              <div className="rada-member__title">{m.desc}</div>
            </div>
          )}
        </div>

      </div>
    </section>);

};

/* ============ CHARAKTERYSTYKA PACJENTA (who is this clinic for) ============ */
const PROFILE = [
{
  lead: "Masz skierowanie od lekarza POZ albo polecenie od bliskich",
  body: "…i szukasz konkretnego miejsca, które na poważnie zajmie się Twoją otyłością - z lekarzem, badaniami i planem."
},
{
  lead: "Chcesz realnego leczenia, nie kolejnej diety-cud",
  body: "Nie zależy Ci na samej recepcie z internetu, tylko na opiece, która prowadzi Cię krok po kroku i zostaje na dłużej."
},
{
  lead: "Nie chcesz czekać tygodniami ani jeździć po mieście",
  body: "Wywiad umawiasz szybko, a konsultacje odbywasz online - badania robisz w najbliższym punkcie Diagnostyka."
},
{
  lead: "Szukasz poradni w swojej okolicy",
  body: "Klinika Holi działa online, więc jest dostępna dla każdego - lekarz, badania i plan leczenia z domu, bez dojazdów i kolejek."
}];

window.CharakterystykaSection = function CharakterystykaSection() {
  return (
    <section className="profile section-pad" id="dla-kogo">
      <div className="container profile__inner">
        <div className="profile__head">
          <div className="eyebrow">Dla kogo jest ta klinika</div>
          <h2>Czy nasza klinika jest <em style={{ fontSize: "45px" }}>dla Ciebie?</em></h2>
          <p className="profile__head-desc">Holi powstało z myślą o osobach, które traktują otyłość jak chorobę i szukają miejsca, które zaopiekuje się nimi medycznie - od diagnostyki po leczenie.



          </p>
        </div>
        <div className="profile__list">
          {PROFILE.map((p, i) =>
          <div key={i} className="profile-item">
              <span className="profile-item__ic"><Icon name="check" size={18} /></span>
              <div className="profile-item__lead">{p.lead}</div>
              <p className="profile-item__body">{p.body}</p>
            </div>
          )}
          <p className="profile__note">
            <strong></strong> 
          
          </p>
        </div>
      </div>
    </section>);

};