/* global React, ReactDOM */
const { useState, useEffect } = React;

/* Standalone-export resource resolver: blob URL when bundled, literal path live */
const asset = (id, path) => window.__resources && window.__resources[id] || path;
window.asset = asset;

/* ----- Helpers ----- */
const B = ({ children }) =>
<strong style={{ color: "var(--holi-ink)", fontSize: "inherit", fontWeight: "700" }}>{children}</strong>;


/* Lucide-style inline SVG icons (1.5px stroke, monoline) */
const Icon = ({ name, size = 20 }) => {
  const paths = {
    stethoscope:
    <>
        <path d="M11 2v2" /><path d="M5 2v2" />
        <path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1" />
        <path d="M8 15a6 6 0 0 0 12 0v-3" />
        <circle cx="20" cy="10" r="2" />
      </>,

    apple:
    <>
        <path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z" />
        <path d="M10 2c1 .5 2 2 2 5" />
      </>,

    flask:
    <>
        <path d="M10 2v7.31" /><path d="M14 9.3V1.99" />
        <path d="M8.5 2h7" />
        <path d="M14 9.3a6.5 6.5 0 1 1-4 0" />
      </>,

    brain:
    <>
        <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
        <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
      </>,

    arrow_right: <path d="M5 12h14M13 6l6 6-6 6" style={{ stroke: "rgb(68, 46, 125)" }} />,
    plus: <><path d="M5 12h14" /><path d="M12 5v14" /></>,
    chevron_down: <path d="m6 9 6 6 6-6" />,
    sparkle: <><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /></>,
    shield: <><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></>,
    check: <path d="M20 6 9 17l-5-5" />,
    quote: <><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" /><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" /></>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
    style={{ display: "inline-block", verticalAlign: "middle", stroke: "rgb(68, 46, 125)" }}>
      {paths[name] || null}
    </svg>);

};

/* ----- Nav ----- */
function Nav() {
  return (
    <header className="nav">
      <div className="container nav__inner" style={{ padding: "14px 32px" }}>
        <a className="nav__logo" href="https://poradnia.klinikaholi.pl" target="_self" aria-label="Holi">
          <svg width="106" height="36" viewBox="0 0 164.994 56" fill="currentColor" aria-hidden="true" style={{ width: "100px", height: "40px" }}>
            <path d="M 71.19 14.815 C 84.966 14.816 92.49 22.739 92.49 35.447 C 92.49 48.156 85.431 56 71.396 56 C 57.36 56 49.543 48.233 49.543 35.447 C 49.543 22.661 57.241 14.815 71.19 14.815 Z M 156.974 40.604 C 162.729 40.604 164.994 40.261 164.994 45.883 L 164.994 47.354 C 164.994 52.889 162.641 55.569 156.974 55.569 L 155.348 55.569 C 150.029 55.569 147.414 52.889 147.414 47.354 L 147.414 45.883 C 147.414 40.261 149.942 40.604 155.348 40.604 L 156.974 40.604 Z M 0 0.55 C 5.248 0.55 5.393 0.61 9.403 0.61 C 14.896 0.61 17.25 3.724 17.25 14.794 L 17.25 22.052 C 19.518 17.468 23.819 14.442 29.835 14.442 C 40.296 14.442 42.041 18.73 42.041 27.378 L 42.041 55.31 L 33.149 55.31 C 27.831 55.309 24.344 53.062 24.344 46.143 L 24.344 32.628 C 24.344 30.035 22.745 28.737 20.826 28.737 C 18.647 28.737 17.426 29.948 17.252 32.282 L 17.252 46.143 C 17.252 52.887 13.939 55.31 8.882 55.31 L 0 55.31 L 0 0.55 Z M 99.017 0.55 C 102.409 0.55 102.751 0.61 106.761 0.61 C 112.167 0.61 117.271 3.724 117.271 14.794 L 117.271 55.31 L 107.75 55.31 C 102.431 55.31 98.944 53.062 98.944 46.143 L 99.017 0.55 Z M 132.737 18.078 C 138.056 18.078 141.368 20.326 141.368 27.245 L 141.368 46.141 C 141.368 52.799 138.056 55.308 132.999 55.308 L 124.462 55.308 C 124.462 49.93 124.4 53.06 124.4 46.141 L 124.4 27.245 C 124.4 20.587 126.781 18.078 131.838 18.078 L 132.737 18.078 Z M 71.567 27.994 C 67.994 27.994 66.367 30.269 66.367 35.447 C 66.367 40.625 67.906 42.821 71.567 42.821 C 75.229 42.821 76.769 40.39 76.769 35.368 C 76.769 30.347 75.142 27.994 71.567 27.994 Z M 132.797 0 C 138.726 0 141.892 0.523 141.892 6.404 C 141.891 12.285 138.988 15.57 132.972 15.57 C 126.955 15.57 123.877 12.285 123.877 6.404 C 123.877 0.523 126.782 0 132.797 0 Z" style={{ fill: "rgb(68, 46, 125)" }}></path>
          </svg>
        </a>
        <a className="btn btn--primary btn--sm btn--with-price" href="https://www.klinikaholi.pl/wywiad" target="_self" style={{ backgroundColor: "rgb(65, 46, 121)" }}>
          <span className="nav-cta-full" style={{ fontSize: "13px" }}>Sprawdź, czy się kwalifikujesz</span>
          <span className="btn__price">bez zobowiązań</span>
          <span className="nav-cta-mobile">Sprawdź kwalifikację</span>
          <Icon name="arrow_right" size={16} />
        </a>
      </div>
    </header>);

}

/* ----- Footer ----- */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container site-footer__inner" style={{ padding: "48px 32px" }}>
        <div className="site-footer__row">
          <div className="site-footer__col" style={{ maxWidth: 320 }}>
            <img src={asset("footerLogo", "bariatria/assets/Holi_Logo.svg")} alt="Holi" style={{ filter: "brightness(0) invert(1)", objectFit: "contain", width: "100px", height: "40px" }} />
            <span style={{ opacity: 0.7, marginTop: 8, lineHeight: 1.5 }}>
              Holi to klinika leczenia otyłości online - prawdziwa opieka medyczna prowadzona przez certyfikowanych obesitologów, bez kolejek i&nbsp;dojazdów.
            </span>
          </div>
          <div className="site-footer__col">
            <a href="https://www.klinikaholi.pl/kontakt" target="_self">Kontakt</a>
            <a href="https://www.klinikaholi.pl/regulamin" target="_self">Regulamin</a>
            <a href="https://www.klinikaholi.pl/polityka-prywatnosci" target="_self">Polityka prywatności</a>
          </div>
        </div>
        <div className="site-footer__bottom">
          Holi to zarejestrowany podmiot leczniczy - RPWDL nr 274969
        </div>
      </div>
    </footer>);

}

/* ----- Sticky mobile CTA ----- */
function StickyCtaMobile() {
  const [show, setShow] = useState(false);
  const [onPlum, setOnPlum] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      setShow(window.scrollY > 560);
      const darks = document.querySelectorAll(".final, .price-card--featured, .site-footer");
      const bandTop = window.innerHeight - 96; // where the sticky bar sits
      let over = false;
      darks.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > bandTop) over = true;
      });
      setOnPlum(over);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a className={`sticky-cta ${show ? "sticky-cta--show" : ""} ${onPlum ? "sticky-cta--alt" : ""}`} href="https://www.klinikaholi.pl/wywiad" target="_self">
      <div className="sticky-cta__text">
        <div className="sticky-cta__main">Sprawdź, czy się kwalifikujesz</div>
        <div className="sticky-cta__small">Bez zobowiązań</div>
      </div>
      <span className="sticky-cta__go"><Icon name="arrow_right" size={20} /></span>
    </a>);

}

/* expose to other Babel script scopes */
Object.assign(window, { B, Icon, Nav, Footer, StickyCtaMobile });

/* ----- App ----- */
function App() {
  return (
    <>
      <Nav />
      <main>
        {window.HeroSection ? <window.HeroSection /> : null}
        {window.CompareSection ? <window.CompareSection /> : null}
        {window.DoctorsSection ? <window.DoctorsSection /> : null}
        {window.PillarsSection ? <window.PillarsSection /> : null}
        {window.ResultsSection ? <window.ResultsSection /> : null}
        {window.StepsSection ? <window.StepsSection /> : null}
        {window.PricingSection ? <window.PricingSection /> : null}
        {window.KamilaSection ? <window.KamilaSection /> : null}
        {window.RadaMedycznaSection ? <window.RadaMedycznaSection /> : null}
        {window.CharakterystykaSection ? <window.CharakterystykaSection /> : null}
        {window.FaqSection ? <window.FaqSection /> : null}
        {window.ReviewsSection ? <window.ReviewsSection /> : null}
        {window.FinalSection ? <window.FinalSection /> : null}
      </main>
      <Footer />
      <StickyCtaMobile />
    </>);

}

window.__mountLp = function () {
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);
};