/* =========================================================================
   Momentum — Åbne investeringer (listing)
   ========================================================================= */

// Midlertidigt skjult: "panorama" (Projekt Panorama) og "dragoer" (Søndre Tangvej 22)
// mangler detaljer før de kan vises. Gendan med linjen nedenfor:
// const OPEN_INVESTMENT_IDS = ["panorama", "dragoer", "trige"];
const OPEN_INVESTMENT_IDS = ["trige"];

function AabneHero() {
  return (
    <section className="refp-hero">
      <div className="refp-hero__bg" />
      <div className="refp-hero__veil" />
      <div className="refp-hero__center">
        <div className="refp-hero__eyebrow">Investeringer</div>
        <h1 className="refp-hero__title">
          Åbne <em>investeringer</em> lige nu.
        </h1>
        <p className="refp-hero__lede">
          Her ser du de attraktive investeringsmuligheder, som er tilgængelige for dig lige nu. Førend investeringerne udbydes har vi gennemgået en grundig due diligence, så der altid er et sundt rationale bag enhver case. Du er altid velkommen til at kontakte os med de spørgsmål du måtte sidde med.
        </p>
      </div>
    </section>);

}

function AabneList() {
  const items = OPEN_INVESTMENT_IDS.
  map((id) => window.BJG_CASES[id]).
  filter(Boolean);

  const featured = items[0];
  const tiles = items.slice(1);

  return (
    <section className="aabne-list">
      <div className="row">
        <div className="aabne-list__head">
          <div>
            <div className="section-eyebrow">Åbne investeringer</div>
            <h2 className="aabne-list__title">Vores aktuelle <em>investeringer.</em></h2>
          </div>
          <p className="aabne-list__intro">
            Bemærk: investering i fast ejendom er forbundet med risiko. Læs altid det fulde prospekt, før du træffer beslutning.
          </p>
        </div>

        {featured &&
        <a className="case-featured" href={`case?id=${featured.id}`} style={{ textDecoration: "none", color: "inherit" }}>
          <div className="case-featured__photo" style={{ backgroundImage: `url('${featured.heroImage}')` }} />
          <div className="case-featured__inner">
            <div className="case-featured__tl">
              <h3 className="case-featured__title">{featured.title}</h3>
              <p className="case-featured__desc">{featured.tagline}</p>
            </div>
            <div className="case-featured__tr">
              <span className="casetile__tag">{featured.type}</span>
            </div>
            <div className="case-featured__bl">
              <div className="case-featured__kpis">
                {featured.kpis.map((k, i) =>
                <div key={i} className="case-featured__kpi">
                    <div className="case-featured__kpi-value">{k.value}</div>
                    <div className="case-featured__kpi-label">{k.label}</div>
                  </div>
                )}
              </div>
            </div>
            <div className="case-featured__br">
              <span className="case-featured__cta">Læs mere →</span>
            </div>
          </div>
        </a>
        }

        <div className="cases__grid">
          {tiles.map((c) =>
          <a key={c.id} href={`case?id=${c.id}`} className="casetile">
              <div className="casetile__photo" style={{ backgroundImage: `url('${c.heroImage}')` }} />
              <div className="casetile__inner">
                <div className="casetile__tl">
                  <h3 className="casetile__title">{c.title}</h3>
                </div>
                <div className="casetile__tr">
                  <span className="casetile__tag">{c.type}</span>
                </div>
                <div className="casetile__bl">
                  <div className="casetile__kpis">
                    {c.kpis.map((k, i) =>
                  <div key={i} className="casetile__kpi">
                        <div className="casetile__kpi-value">{k.value}</div>
                        <div className="casetile__kpi-label">{k.label}</div>
                      </div>
                  )}
                  </div>
                </div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

function AabneRelated() {
  return (
    <section className="aabne-related">
      <div className="row">
        <div className="aabne-related__grid">
          <a href="fond" className="aabne-related-card">
            <div className="aabne-related-card__photo" style={{ backgroundImage: "url('assets/images/case-bridgelaan.jpg')" }} />
            <div className="aabne-related-card__body">
              <div className="aabne-related-card__eyebrow">Fond</div>
              <h3 className="aabne-related-card__title">Momentum 1</h3>
              <p className="aabne-related-card__desc">Vores fond spreder investeringen over flere projekter for en naturlig risikospredning.</p>
              <span className="aabne-related-card__cta">
                Læs om fonden
                <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>
              </span>
            </div>
          </a>
          <a href="referencer" className="aabne-related-card">
            <div className="aabne-related-card__photo" style={{ backgroundImage: "url('assets/images/case-open-market.jpg')" }} />
            <div className="aabne-related-card__body">
              <div className="aabne-related-card__eyebrow">Realiserede</div>
              <h3 className="aabne-related-card__title">Realiserede investeringer</h3>
              <p className="aabne-related-card__desc">Tidligere projekter og leverede afkast — vores arbejdsgrundlag og track record.</p>
              <span className="aabne-related-card__cta">
                Se realiserede cases
                <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>
              </span>
            </div>
          </a>
        </div>
      </div>
    </section>);

}

function AabnePage() {
  return (
    <>
      <SiteNav />
      <AabneHero />
      <AabneList />
      <Signup />
      <Footer />
    </>);

}

Object.assign(window, { AabnePage });