/* =========================================================================
   Momentum — Fond (Momentum 1) detail page
   Mirrors the case-page structure with a few fund-specific tweaks.
   ========================================================================= */

const FOND_SECTIONS = [
{ id: "om", label: "Om fonden" },
{ id: "galleri", label: "Galleri" },
{ id: "fordele", label: "Fordele" },
{ id: "struktur", label: "Struktur" },
{ id: "fakta", label: "Fakta" },
{ id: "faq", label: "FAQ" }];


function FondSubNav({ title }) {
  const [activeId, setActiveId] = React.useState(FOND_SECTIONS[0].id);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const hero = document.querySelector(".cp-hero");
      const heroBottom = hero ? hero.offsetTop + hero.offsetHeight - 80 : 600;
      setVisible(window.scrollY > heroBottom);

      let current = FOND_SECTIONS[0].id;
      for (const s of FOND_SECTIONS) {
        const el = document.getElementById(s.id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top <= 140) current = s.id;
      }
      setActiveId(current);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 110;
    window.scrollTo({ top: y, behavior: "smooth" });
  };

  return (
    <div className={"cp-subnav" + (visible ? " is-visible" : "")} aria-label="Fond-navigation">
      <div className="cp-subnav__inner">
        <div className="cp-subnav__title">{title}</div>
        <ul className="cp-subnav__list">
          {FOND_SECTIONS.map((s) =>
          <li key={s.id}>
              <a
              href={"#" + s.id}
              onClick={scrollTo(s.id)}
              className={"cp-subnav__link" + (activeId === s.id ? " is-active" : "")}>{s.label}</a>
            </li>
          )}
        </ul>
        <a href="kontakt" className="cp-subnav__cta cp-subnav__cta--ghost">
          Hent prospekt
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </div>);

}

function FondHero({ f }) {
  return (
    <section className="cp-hero">
      <div className="cp-hero__bg" style={{ backgroundImage: `url('${f.heroImage}')` }} />
      <div className="cp-hero__veil" />

      <div className="cp-hero__center">
        <div className="cp-hero__eyebrow">{f.type}</div>
        <h1 className="cp-hero__title">{f.title}</h1>

        <div className="cp-hero__kpis">
          {f.kpis.map((k, i) =>
          <div key={i} className="cp-hero__kpi">
              <div className="cp-hero__kpi-value">{k.value}</div>
              <div className="cp-hero__kpi-label">{k.label}</div>
            </div>
          )}
        </div>

        <div className="cp-hero__cta-row">
          <a href="kontakt" className="cp-hero__cta">
            Hent prospekt
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a href="#om" className="cp-hero__cta cp-hero__cta--ghost" onClick={(e) => {
            e.preventDefault();
            const el = document.getElementById("om");
            if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: "smooth" });
          }}>
            Læs mere
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>

      <div className="cp-hero__scroll-cue">
        <span>Scroll</span>
        <span className="cp-hero__scroll-line" />
      </div>
    </section>);

}

function FondGallery({ images }) {
  const [idx, setIdx] = React.useState(0);
  const total = images.length;
  const go = (delta) => setIdx((i) => (i + delta + total) % total);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "ArrowLeft") go(-1);
      if (e.key === "ArrowRight") go(1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <div className="cp-gallery">
      <div className="cp-gallery__stage">
        {images.map((img, i) =>
        <div
          key={i}
          className={"cp-gallery__slide" + (i === idx ? " is-active" : "")}
          style={{ backgroundImage: `url('${img.src}')` }} />

        )}
        <button className="cp-gallery__arrow cp-gallery__arrow--prev" onClick={() => go(-1)} aria-label="Forrige billede">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M19 12H5M11 5l-7 7 7 7" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
        <button className="cp-gallery__arrow cp-gallery__arrow--next" onClick={() => go(1)} aria-label="Næste billede">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>
      <div className="cp-gallery__below">
        <div className="cp-gallery__thumbs">
          {images.map((img, i) =>
          <button
            key={i}
            className={"cp-gallery__thumb" + (i === idx ? " is-active" : "")}
            onClick={() => setIdx(i)}
            style={{ backgroundImage: `url('${img.src}')` }}
            aria-label={`Vis billede ${i + 1}`} />

          )}
        </div>
        <div className="cp-gallery__meta">
          <div className="cp-gallery__caption">{images[idx].caption}</div>
          <div className="cp-gallery__count">{String(idx + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}</div>
        </div>
      </div>
    </div>);

}

function FondCTABand({ f }) {
  return (
    <section className="cp-ctaband cp-ctaband--forest">
      <div className="case-row">
        <div className="cp-ctaband__inner">
          <div className="cp-ctaband__text">
            <div className="cp-ctaband__eyebrow">Klar til at investere?</div>
            <h3 className="cp-ctaband__title">Få det fulde prospekt for {f.title}.</h3>
          </div>
          <a href="kontakt" className="cp-ctaband__btn">
            Hent prospekt
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    </section>);

}

function FondPage() {
  const f = window.BJG_FOND;
  const [openFaq, setOpenFaq] = React.useState(0);

  React.useEffect(() => {
    document.title = `${f.title} — Momentum`;
  }, []);

  return (
    <>
      <SiteNav />
      <FondSubNav title={f.title} />
      <FondHero f={f} />

      <section className="cp-intro" id="om">
        <div className="case-row case-row--narrow">
          <div className="cp-intro__eyebrow">Om fonden</div>
          <p className="cp-intro__text">{f.intro}</p>
        </div>
      </section>

      <section className="cp-gallery-section" id="galleri">
        <FondGallery images={f.gallery} />
      </section>

      <FondCTABand f={f} />

      <section className="cp-benefits" id="fordele">
        <div className="case-row">
          <div className="cp-benefits__split">
            <div className="cp-benefits__inner">
              <div className="cp-benefits__head">Tre grunde</div>
              <h3 className="cp-benefits__headline">{f.title} giver dig adgang til en bred portefølje af ejendomsprojekter.</h3>
              <ol className="cp-benefits__list">
                {f.benefits.map((b, i) =>
                <li key={i} className="cp-benefit">
                    <span className="cp-benefit__num">0{i + 1}</span>
                    <div>
                      <h4 className="cp-benefit__title">{b.title}</h4>
                      <p className="cp-benefit__body">{b.body}</p>
                    </div>
                  </li>
                )}
              </ol>
            </div>
            <div className="cp-benefits__photo" style={{ backgroundImage: `url('${f.galleryImage}')` }} />
          </div>
        </div>
      </section>

      <section className="cp-quote">
        <div className="case-row">
          <div className="cp-quote__split">
            <div className="cp-quote__photo" style={{ backgroundImage: `url('${f.quoteImage}')` }} />
            <div className="cp-quote__inner">
              <div className="cp-quote__head">Fra holdet</div>
              <h3 className="cp-quote__headline">{f.quote.headline}</h3>
              <p className="cp-quote__body">{f.quote.body}</p>
              <div className="cp-quote__author">
                <div className="cp-quote__avatar">{f.quote.author.split(" ").map((s) => s[0]).slice(0, 2).join("")}</div>
                <div>
                  <div className="cp-quote__name">{f.quote.author}</div>
                  <div className="cp-quote__role">{f.quote.role}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="cp-body" id="struktur">
        <div className="case-row">
          <div className="cp-body__split">
            <div>
              <div className="cp-body__eyebrow">Struktur</div>
              <p className="cp-body__text">{f.body}</p>
            </div>
            <div id="fakta">
              <h4 className="cp-facts__title">Fakta om fonden</h4>
              <ul className="cp-facts__list">
                {f.facts.map((fact, i) =>
                <li key={i} className="cp-facts__row">
                    <span className="cp-facts__label">{fact.label}</span>
                    <span className="cp-facts__value">{fact.value}</span>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="cp-faqs" id="faq">
        <div className="case-row case-row--narrow">
          <h2 className="cp-faqs__title">Ofte stillede spørgsmål</h2>
          <div>
            {f.faqs.map((faq, i) =>
            <div key={i} className={"cp-faq" + (openFaq === i ? " is-open" : "")}>
                <button className="cp-faq__btn" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{faq.q}</span>
                  <span className="cp-faq__icon" />
                </button>
                <div className="cp-faq__panel">
                  <div className="cp-faq__inner">{faq.a}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="cp-tegn">
        <div className="case-row">
          <div className="cp-tegn__inner">
            <h2 className="cp-tegn__title">Din adgang til <em>{f.title}</em>.</h2>
            <div className="cp-tegn__actions">
              <a href="kontakt" className="cp-tegn__btn">
                Hent prospekt
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </a>
              <a href="aabne-investeringer" className="cp-tegn__btn cp-tegn__btn--ghost">Se åbne investeringer</a>
            </div>
          </div>
        </div>
      </section>

      <Signup />
      <Footer />
    </>);

}

Object.assign(window, { FondPage });