/* global React */
/* Hi-fi sections: Hero, Reframe, Pillars, Results */
const { B, Icon, asset } = window;

/* ============ HERO ============ */
window.HeroSection = function HeroSection() {
  return (
    <section className="hero" style={{ padding: "56px 0px 0px", margin: "0px" }}>
      <div className="container hero__grid" style={{ height: "520px" }}>
        <div className="hero__copy" style={{ gap: "24px", height: "460px" }}>
          <h1 style={{ letterSpacing: "-1.3px", fontSize: "56px", lineHeight: "1.1" }}>
            <em style={{ color: "rgb(65, 46, 121)", fontSize: "53px" }}>Nowoczesna klinika<br />leczenia otyłości</em>
          </h1>
          <p className="hero__sub" style={{ maxWidth: "480px", fontFamily: "Inter", color: "rgb(28, 31, 41)", lineHeight: "1.65" }}>
            Wszystkie zalety stacjonarnej poradni leczenia otyłości, przeniesione do&nbsp;wygodnej formy online. <B>Lekarz obesitolog, wsparcie psychodietetyka i&nbsp;badania krwi w&nbsp;cenie programu.</B>
          </p>
          <div className="hero__ctas">
            <div className="cta-group">
              <a className="btn btn--primary btn--lg" href="https://www.klinikaholi.pl/wywiad" target="_self" style={{ fontSize: "15px" }}>
                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>
        </div>
        <div className="hero__media">
          <img src={asset("heroImg", "bariatria/assets/photo-hero.jpg")} alt="" style={{ height: "520px" }} />
          <div className="hero__badge" style={{ backgroundColor: "rgb(255, 255, 255)", opacity: "0.95", textAlign: "center", padding: "14px 20px" }}>
            <div style={{ fontFamily: "Sfizia", fontStyle: "italic", fontSize: "28px", lineHeight: "1.1", color: "var(--holi-ink)" }}>Program dostępny</div>
            <div style={{ fontFamily: "Sfizia", fontStyle: "italic", fontSize: "28px", lineHeight: "1.1", color: "#442E7D", fontWeight: "600" }} data-comment-anchor="92bab5592e-div-37-13">w całej Polsce</div>
          </div>
        </div>
      </div>

      <div className="container">
        <div className="hero-trust" style={{ backgroundColor: "rgb(240, 237, 232)" }}>
          <div className="hero-trust__item">
            <span className="hero-trust__stat" style={{ fontWeight: "400", fontSize: "24px" }}>3000+</span>
            <span className="hero-trust__label" style={{ lineHeight: "1.3", fontSize: "12px", width: "215px" }}>pacjentów objętych leczeniem</span>
          </div>
          <span className="hero-trust__divider"></span>
          <div className="hero-trust__item">
            <span className="hero-trust__stat" style={{ fontWeight: "400", fontSize: "24px" }}>9.8<span className="hero-trust__stat-sub" style={{ fontWeight: "400" }}>/10</span></span>
            <span className="hero-trust__label" style={{ lineHeight: "1.3", fontSize: "12px" }}>średnia ocen w&nbsp;serwisie kliniki.pl</span>
          </div>
          <span className="hero-trust__divider"></span>
          <div className="hero-trust__item">
            <span className="hero-trust__stat" style={{ fontWeight: "400", fontSize: "24px" }}>100%</span>
            <span className="hero-trust__label" style={{ lineHeight: "1.3", fontSize: "12px" }}>lekarzy z&nbsp;certyfikatem PTLO</span>
          </div>
        </div>
      </div>
    </section>);

};

/* ============ REFRAME ============ */
window.ReframeSection = function ReframeSection() {
  return (
    <section className="reframe section-pad">
      <div className="container reframe__grid">
        <div>
          <h2 style={{ width: "500px", fontFamily: "\"DM Sans\"", fontWeight: "400", fontSize: "49px", lineHeight: "1.08" }}>
            Szukasz <em style={{ fontSize: "53px", lineHeight: "1.1" }}>poradni w&nbsp;okolicy</em>?<br className="reframe-br" /> Zyskaj opiekę<span style={{ marginLeft: "0.17em" }}></span><em style={{ fontSize: "53px" }}>bez dojazdów</em>
          </h2>
          <ul className="reframe__points" style={{ marginTop: "28px" }}>
            <li><span className="reframe__points-ic"><Icon name="check" size={15} /></span><span><B>Lekarz prowadzący i&nbsp;Twoja karta pacjenta</B> online.</span></li>
            <li><span className="reframe__points-ic"><Icon name="check" size={15} /></span><span><B>Opieka psychodietetyka</B> - nielimitowane konsultacje przez Internet.</span></li>
            <li><span className="reframe__points-ic"><Icon name="check" size={15} /></span><span><B>Badania krwi w&nbsp;Twoim mieście</B> - realizowane w&nbsp;punkcie Diagnostyki.</span></li>
          </ul>
        </div>
        <div className="reframe__render">
          <img src={asset("reframeImg", "bariatria/assets/reframe-telemedicine.jpg")} alt="Pacjentka podczas e-konsultacji z lekarzem" loading="lazy" decoding="async" style={{ objectPosition: "center" }} data-comment-anchor="851c478e2b-img-62-11" />
        </div>
      </div>
    </section>);

};

/* ============ PILLARS ============ */
const PILLARS = [
{
  icon: "stethoscope",
  title: "Lekarz obesitolog, który prowadzi Twój przypadek",
  img: asset("pillar1", "bariatria/assets/photo-pillar-1.avif"),
  objectPosition: "center 25%",
  body:
  <>
        <B>Masz stały kontakt z lekarzem</B>, więc każda decyzja o&nbsp;terapii jest
        dopasowana do&nbsp;Ciebie. Plan leczenia ustalamy na&nbsp;pierwszej wizycie,
        a&nbsp;co&nbsp;3&nbsp;miesiące spotykacie się
        na&nbsp;e-wizycie kontrolnej, żeby ocenić postępy i&nbsp;dopasować dalsze kroki.
        Lekarz wystawia e-recepty, w&nbsp;tym na&nbsp;GLP-1, jeśli jest taka kwalifikacja.
      </>

},
{
  icon: "apple",
  title: "Nielimitowane e-wizyty u psychodietetyka",
  img: asset("pillar2", "bariatria/assets/photo-pillar-2.jpg"),
  objectPosition: "center 15%",
  body:
  <>
        Z psychodietetykiem nie pracujesz nad „dietą", pracujesz nad{" "}
        <B>zmianą sposobu myślenia o jedzeniu</B>. Zaczynasz od indywidualnej e-konsultacji,
        a potem <B>masz dostęp do nielimitowanych konsultacji online i czatu 24/7</B>.
      </>

},
{
  icon: "flask",
  title: "Badania krwi co 3 miesiące wraz z interpretacją",
  img: asset("pillarBlood", "bariatria/assets/pillar-blood.jpg"),
  body:
  <>
        Co 3 miesiące otrzymujesz w&nbsp;cenie programu pełny pakiet{" "}
        <B>badań krwi</B> realizowany w&nbsp;wybranym punkcie sieci{" "}
        <B>Diagnostyka</B>. Wyniki trafiają wprost do&nbsp;Twojego lekarza prowadzącego,
        który na&nbsp;ich podstawie kontroluje postępy.
      </>

},
{
  icon: "brain",
  title: "Strefa wiedzy i webinary",
  img: asset("pillar4", "bariatria/assets/photo-pillar-4.jpg"),
  objectPosition: "center 15%",
  body:
  <>
        Co miesiąc <B>webinary live z psychologiem i fizjoterapeutą Holi</B> - Q&amp;A na żywo,
        możesz zadać pytanie albo posłuchać innych. Aplikacja Holi spina wszystko: zespół,
        plan, wyniki - zawsze pod ręką.
      </>

}];


/* App mockup - inline SVG, Holi-styled */
function AppMockup() {
  return (
    <svg viewBox="0 0 400 320" style={{ width: "100%", display: "block", height: "350px" }}>
      <defs>
        <clipPath id="phone-clip"><rect x="120" y="20" width="180" height="280" rx="22" /></clipPath>
      </defs>
      {/* Background */}
      <rect width="400" height="320" fill="#EFE5D9" style={{ width: "467px" }} />
      {/* Decorative orb */}
      <circle cx="320" cy="60" r="90" fill="#D6C6FF" opacity="0.5" />
      <circle cx="80" cy="280" r="60" fill="#B092FF" opacity="0.4" />
      {/* Phone */}
      <rect x="117" y="17" width="186" height="286" rx="26" fill="#1B1F29" />
      <rect x="120" y="20" width="180" height="280" rx="22" fill="#FFFFFF" />
      <g clipPath="url(#phone-clip)">
        {/* Status bar */}
        <text x="135" y="36" fontFamily="DM Sans, sans-serif" fontSize="9" fontWeight="500" fill="#1B1F29">9:41</text>
        <rect x="265" y="29" width="20" height="9" rx="2" fill="none" stroke="#1B1F29" strokeWidth="1" />
        <rect x="268" y="31" width="14" height="5" rx="1" fill="#1B1F29" />
        {/* Header */}
        <text x="135" y="62" fontFamily="DM Sans, sans-serif" fontSize="11" fontWeight="500" fill="rgba(27,31,41,0.5)">Dzień dobry,</text>
        <text x="135" y="78" fontFamily="DM Sans, sans-serif" fontSize="16" fontWeight="500" fill="#1B1F29">Kamilo</text>
        {/* Weight card */}
        <rect x="135" y="90" width="150" height="68" rx="12" fill="#442E7D" />
        <text x="146" y="108" fontFamily="DM Sans, sans-serif" fontSize="9" fontWeight="500" fill="#B092FF" opacity="0.9">Twoja waga · 6 mies.</text>
        <text x="146" y="135" fontFamily="DM Sans, sans-serif" fontSize="22" fontWeight="500" fill="#FFFFFF">−12,4 kg</text>
        {/* mini chart in card */}
        <path d="M 146 150 Q 175 144, 200 142 T 274 130" fill="none" stroke="#B092FF" strokeWidth="2" />
        <circle cx="274" cy="130" r="2.5" fill="#FFFFFF" />
        {/* Doctor row */}
        <rect x="135" y="170" width="150" height="44" rx="10" fill="#F0EDE8" />
        <circle cx="151" cy="192" r="11" fill="#D8B0A1" />
        <text x="170" y="190" fontFamily="DM Sans, sans-serif" fontSize="10" fontWeight="500" fill="#1B1F29">lek. Olga</text>
        <text x="170" y="201" fontFamily="DM Sans, sans-serif" fontSize="8" fill="rgba(27,31,41,0.6)">Czat · 2 nowe</text>
        <circle cx="273" cy="192" r="4" fill="#442E7D" />
        <text x="273" y="195" fontFamily="DM Sans, sans-serif" fontSize="7" fontWeight="500" fill="#FFFFFF" textAnchor="middle">2</text>
        {/* Webinar row */}
        <rect x="135" y="222" width="150" height="44" rx="10" fill="#F0EDE8" />
        <rect x="143" y="232" width="22" height="24" rx="6" fill="#7E5CD7" />
        <text x="170" y="241" fontFamily="DM Sans, sans-serif" fontSize="9" fontWeight="500" fill="#1B1F29">Webinar live</text>
        <text x="170" y="253" fontFamily="DM Sans, sans-serif" fontSize="7.5" fill="rgba(27,31,41,0.6)">jutro 19:00 · psycholog</text>
        {/* Nav dock */}
        <rect x="135" y="276" width="150" height="20" rx="10" fill="#1B1F29" />
        <circle cx="148" cy="286" r="2.5" fill="#FFFFFF" />
        <circle cx="173" cy="286" r="2.5" fill="rgba(255,255,255,0.5)" />
        <circle cx="198" cy="286" r="2.5" fill="rgba(255,255,255,0.5)" />
        <circle cx="223" cy="286" r="2.5" fill="rgba(255,255,255,0.5)" />
        <circle cx="248" cy="286" r="2.5" fill="rgba(255,255,255,0.5)" />
        <circle cx="273" cy="286" r="2.5" fill="rgba(255,255,255,0.5)" />
      </g>
      {/* Phone notch */}
      <rect x="178" y="20" width="64" height="14" rx="7" fill="#1B1F29" />
    </svg>);

}

window.PillarsSection = function PillarsSection() {
  return (
    <section className="pillars section-pad">
      <div className="container">
        <div className="pillars__intro">
          <h2 style={{ fontSize: "49px", fontWeight: "400", lineHeight: "1.1" }}>
            Zobacz, co obejmuje <em style={{ fontSize: "53px" }} className="pillars__intro-accent">opieka w naszej klinice.</em>
          </h2>
        </div>

        <div className="pillars__list">
          {PILLARS.map((p, i) =>
          <div key={i} className={`pillar ${i % 2 === 1 ? "pillar--reverse" : ""}`}>
              <div className="pillar__media" style={{ height: "350px" }}>
                {p.img === "__app_mockup__" ? <AppMockup /> : <img src={p.img} alt="" loading="lazy" decoding="async" style={{ height: "350px", objectPosition: p.objectPosition || "center" }} />}
              </div>
              <div style={{ width: "550px", justifySelf: "end" }}>
                <div className="pillar__head" style={{ fontSize: "53px" }}>
                  <span className="pillar__number" style={{ fontFamily: "Sfizia", fontStyle: "italic", fontSize: "53px" }}>0{i + 1}</span>
                </div>
                <h3 className="pillar__title" style={{ fontSize: "24px", width: "550px", fontFamily: "\"DM Sans\"" }}>
                  {p.title}
                </h3>
                <p className="pillar__body" style={{ fontSize: "15px", lineHeight: "1.7" }}>{p.body}</p>
              </div>
            </div>
          )}
        </div>


      </div>
    </section>);

};

/* ============ RESULTS ============ */
function ResultsChart({ small }) {
  const W = small ? 280 : 540,H = small ? 160 : 280,P = small ? 28 : 44;
  const PR = small ? 16 : 24;
  const monthsMax = 18,kgMax = 24;
  const x = (m) => P + m / monthsMax * (W - P - PR);
  const y = (kg) => 12 + kg / kgMax * (H - 28);

  const glpData = [[0, 0], [3, 3.6], [6, 6.6], [9, 8.5], [12, 9.4], [15, 10.0], [18, 10.2]];
  const holiData = [[0, 0], [3, 5.1], [6, 9.4], [9, 13.2], [12, 16.6], [15, 18.9], [18, 20.7]];
  const toSmooth = (pts) => {
    const c = pts.map(([m, k]) => [x(m), y(k)]);
    let d = `M${c[0][0]} ${c[0][1]}`;
    for (let i = 1; i < c.length; i++) {
      const [x1, y1] = c[i - 1],[x2, y2] = c[i];
      const cx = (x1 + x2) / 2;
      d += ` C${cx} ${y1} ${cx} ${y2} ${x2} ${y2}`;
    }
    return d;
  };
  const areaPath = (pts) => {
    const c = pts.map(([m, k]) => [x(m), y(k)]);
    let d = `M${c[0][0]} ${y(0)}`;
    d += ` L${c[0][0]} ${c[0][1]}`;
    for (let i = 1; i < c.length; i++) {
      const [x1, y1] = c[i - 1],[x2, y2] = c[i];
      const cx = (x1 + x2) / 2;
      d += ` C${cx} ${y1} ${cx} ${y2} ${x2} ${y2}`;
    }
    d += ` L${c[c.length - 1][0]} ${y(0)} Z`;
    return d;
  };

  return (
    <svg viewBox={`0 0 ${W} ${H + 28}`} style={{ width: "100%", display: "block" }}>
      <defs>
        <linearGradient id="holiArea" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#7E5CD7" stopOpacity="0.18" />
          <stop offset="100%" stopColor="#7E5CD7" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[0, 5, 10, 15, 20].map((kg) =>
      <g key={kg}>
          <line x1={P} y1={y(kg)} x2={W - P} y2={y(kg)} stroke="rgba(27,31,41,0.08)" strokeWidth="1" />
          <text x={P - 8} y={y(kg) + 4} fontFamily="DM Sans, sans-serif" fontSize={small ? 10 : 12}
        fontWeight="500" fill="rgba(27,31,41,0.55)" textAnchor="end">−{kg}</text>
        </g>
      )}
      {(small ? [0, 6, 12, 18] : [0, 3, 6, 9, 12, 15, 18]).map((m) =>
      <text key={m} x={x(m)} y={H + 16} fontFamily="DM Sans, sans-serif" fontSize={small ? 10 : 12}
      fontWeight="500" fill="rgba(27,31,41,0.55)" textAnchor="middle">{m} mies.</text>
      )}
      <path d={areaPath(holiData)} fill="url(#holiArea)" />
      <path d={toSmooth(glpData)} fill="none" stroke="rgba(27,31,41,0.45)" strokeWidth={small ? 2 : 2.5}
      strokeDasharray={small ? "5 4" : "7 5"} strokeLinecap="round" />
      <path d={toSmooth(holiData)} fill="none" stroke="#442E7D" strokeWidth={small ? 3 : 4.5} strokeLinecap="round" />
      <circle cx={x(18)} cy={y(10.2)} r={small ? 5 : 7} fill="#fff" stroke="rgba(27,31,41,0.6)" strokeWidth="2.5" />
      <text x={x(18) - (small ? 12 : 16)} y={y(10.2) - (small ? 14 : 20)} fontFamily="DM Sans, sans-serif"
      fontSize={small ? 12 : 17} fontWeight="500" fill="rgba(27,31,41,0.75)" textAnchor="end">
        −10,2 kg
      </text>
      <circle cx={x(18)} cy={y(20.7)} r={small ? 8 : 12} fill="#7E5CD7" opacity="0.25" />
      <circle cx={x(18)} cy={y(20.7)} r={small ? 5 : 7} fill="#442E7D" />
      <text x={x(18) + (small ? 10 : 14)} y={y(20.7) - (small ? 22 : 32)} fontFamily="DM Sans, sans-serif"
      fontSize={small ? 18 : 30} fontWeight="500" fill="#442E7D" textAnchor="end">
        −20,7 kg
      </text>
    </svg>);

}

window.ResultsSection = function ResultsSection() {
  return (
    <section className="results section-pad" id="wyniki">
      <div className="container">
        <div className="results__top" style={{ margin: "0px 0px 64px", height: "426px", textAlign: "left" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Wyniki · 18 miesięcy</div>
            <h2 style={{ fontSize: "49px", fontWeight: "400", lineHeight: "1.1" }}>
              Średnio <em style={{ fontSize: "53px" }}>−20,7&nbsp;kg</em>{" "}<br />
              z&nbsp;programem Holi.{" "}<br />
              <span style={{ color: "var(--holi-plum-700)", fontFamily: "Sfizia", fontWeight: "400", fontSize: "53px", fontStyle: "italic", marginRight: "0.125em", letterSpacing: "2px" }}>2×</span> więcej niż przy samych lekach GLP-1.
            </h2>
            <p className="results__intro-p" style={{ lineHeight: "1.7", padding: "16px 0px 0px", fontSize: "15px" }}>
              Twarde dane pokazują: przyjmowanie samych leków GLP-1 bez stałej opieki daje średni spadek wagi
              o&nbsp;<B>10,2 kg</B> w&nbsp;18 miesięcy. Pacjenci Holi, dzięki stałemu nadzorowi lekarza obesitologa
              i&nbsp;pracy nad nawykami z&nbsp;psychodietetykiem, osiągają wynik <B>2× lepszy</B>{" "}
              (średnio <B>−20,7 kg</B>), skutecznie chroniąc się przed powrotem dawnej wagi.
            </p>
          </div>
          <div style={{ margin: "0px", height: "426px" }}>
            <div className="results__chart">
              <div className="results__chart-head">
                <span>Utrata wagi · kg</span>
                <span>Rodriguez 2024</span>
              </div>
              <ResultsChart />
              <div className="results__legend" style={{ margin: "18px 25px 0px 20px" }}>
                <span>
                  <span style={{ width: 16, borderTop: "2px dashed rgba(27,31,41,0.4)" }}></span>
                  Same leki GLP-1
                </span>
                <span>
                  <span style={{ width: 16, height: 3, background: "var(--holi-plum-700)", borderRadius: 2 }}></span>
                  <span style={{ color: "var(--holi-plum-700)", fontWeight: 500 }}>Program Holi</span>
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="results__footer">
          <p className="results__source" style={{ fontSize: "11px" }}>
            Dane porównawcze: Rodriguez, Cartwright, Gratzl (2024) - analiza wyników pacjentów GLP-1 w&nbsp;warunkach real-life.
          </p>
        </div>
      </div>
    </section>);

};