// Sections v2 — leaner

/* -------------------------------------------------------------------------
   Lead-håndtering — sender tilmeldinger/henvendelser til Make-webhook,
   som videresender til Google Sheets + mail.
   ------------------------------------------------------------------------- */
// Fælles webhook (→ Make: e-mail + Google Sheets) for alle lead-/kontakt-/prospektformularer
const MOMENTUM_WEBHOOK_URL = "https://hook.eu1.make.com/jp4upsuoq2ebpvqf64xt96od2tu83rzs";

function submitLead(payload, webhookUrl) {
  // Stabil felt-struktur, så samme Google Sheet-kolonner passer til alle formularer
  const body = {
    kilde: "", navn: "", email: "", telefon: "", emne: "", besked: "",
    investeringshorisont: "", interesser: "", samtykke: "",
    tidspunkt: new Date().toISOString(),
    ...payload
  };
  return fetch(webhookUrl || MOMENTUM_WEBHOOK_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body)
  }).then((res) => {
    if (!res.ok) throw new Error("HTTP " + res.status);
    return res;
  });
}

function Philosophy() {
  return (
    <section className="philosophy" id="filosofi">
      <div className="row">
        <h2 className="philosophy__title">
          <em>Momentum Real Estate er bygget på et fundament af passion og ordentlighed.</em> Vi arbejder med ejendomsinvesteringer på vegne af vores investorer – primært lånefinansiering og projektudvikling hvor vi har mange års erfaring.
        </h2>
      </div>
    </section>);

}

// Midlertidigt skjult: "panorama" (Projekt Panorama) og "dragoer" (Søndre Tangvej 22)
// mangler detaljer før de kan vises. Gendan ved at bruge linjerne nedenfor:
// const FEATURED_ID = "panorama";
// const TILE_IDS = ["trige", "dragoer"];
const FEATURED_ID = "trige";
const TILE_IDS = [];

function Cases({ openModal }) {
  const C = window.BJG_CASES;
  const featured = C[FEATURED_ID];
  const tiles = TILE_IDS.map((id) => C[id]).filter(Boolean);

  return (
    <section className="cases" id="cases">
      <div className="cases__transition" />
      <div className="row">
        <div className="cases__head">
          <div>
            <div className="section-eyebrow">Åbne investeringer</div>
            <h2 className="section-title">Investeringsmuligheder</h2>
          </div>
          <div className="cases__view">
            <a href="aabne-investeringer">Se åbne investeringer →</a>
          </div>
        </div>

        <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 Webinars() {
  const ids = window.BJG_WEBINAR_IDS || [];
  const items = ids.map((id) => window.BJG_WEBINARS && window.BJG_WEBINARS[id]).filter(Boolean);
  return (
    <section className="webinars" id="webinarer">
      <div className="row">
        <div className="webinars__head">
          <div>
            <div className="section-eyebrow">Webinarer &amp; events</div>
            <h2 className="section-title">Kommende webinarer <em>og arrangementer</em></h2>
          </div>
        </div>
        <div className="webinars__list">
          {items.map((w) =>
          <a key={w.id} href={`webinar?id=${w.id}`} className="webinar">
              <div className="webinar__thumb" style={{ backgroundImage: `url('${w.img}')` }} />
              <div className="webinar__date">
                <span className="webinar__day">{w.day}</span>
                <span className="webinar__month">{w.month}<span className="webinar__year">{w.year}</span></span>
              </div>
              <div>
                <h3 className="webinar__title">{w.title}</h3>
                <div className="webinar__sub">{w.sub}</div>
              </div>
              <div className="webinar__meta">{w.time} · {w.format}</div>
              <div className="webinar__arrow">→</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

const REFS = [
{ quote: "Kristian og Thomas har i flere år varetaget mine interesser ubetinget, både finansielt og kommercielt, men i høj grad også personligt.", name: "Victor Hirsch", meta: "Investor", initials: "VH" },
{ quote: "Momentum Real Estate har faciliteret et stort lån i vores ejendom, og vores oplevelse af deres services har været meget positiv helt fra starten af relationen. De er grundige, pragmatiske, hjælpsomme, venligtsindede og lytter virkelig meget til deres kunders behov.", name: "NEUgroup", meta: "Forretningspartner", initials: "NE" },
{ quote: "Momentum Real Estate har i hele forløbet været tillidsvækkende, oplysende og opfølgende – det har gjort os trygge i hele processen.", name: "Ulrich og Susanne Madsen", meta: "Investor", initials: "UM" }];


function References() {
  const [idx, setIdx] = React.useState(0);
  const [perView, setPerView] = React.useState(3);
  React.useEffect(() => {
    const update = () => {
      if (window.innerWidth < 720) setPerView(1);else
      if (window.innerWidth < 1100) setPerView(2);else
      setPerView(3);
    };
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);
  const max = Math.max(0, REFS.length - perView);
  const safe = Math.min(idx, max);
  // Inkluder 32px flex-gap i forskydningen, ellers klippes kortet (gap = .refs__track gap)
  const translate = `translateX(calc(${-safe} * (100% + 32px) / ${perView}))`;

  return (
    <section className="refs" id="referencer">
      <div className="row">
        <div className="refs__head">
          <div>
            <div className="section-eyebrow">Referencer</div>
            <h2 className="section-title">Relationer bygget <em>på tillid</em></h2>
          </div>
          <div className="refs__nav">
            <button className="refs__btn" onClick={() => setIdx(Math.max(0, safe - 1))} disabled={safe === 0} aria-label="Forrige">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M19 12H5M12 5l-7 7 7 7" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
            <button className="refs__btn" onClick={() => setIdx(Math.min(max, safe + 1))} disabled={safe === max} aria-label="Næste">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 12h14M12 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
          </div>
        </div>
        <div className="refs__viewport">
          <div className="refs__track" style={{ transform: translate }}>
            {REFS.map((r, i) =>
            <article key={i} className="ref">
                <div>
                  <span className="ref__mark">“</span>
                  <p className="ref__quote">{r.quote}</p>
                </div>
                <div className="ref__by">
                  <div className="ref__avatar">{r.initials}</div>
                  <div>
                    <div className="ref__name">{r.name}</div>
                    <div className="ref__meta">{r.meta}</div>
                  </div>
                </div>
              </article>
            )}
          </div>
        </div>
      </div>
    </section>);

}

const TEAM = [
{
  name: "Thomas Riel Andreasen",
  role: "Ejer",
  photo: "assets/images/team-thomas.jpg",
  phone: "+45 40 50 12 04",
  email: "Thomas@momentumrealestate.dk"
},
{
  name: "Kristian Falk Nielsen",
  role: "Ejer",
  photo: "assets/images/team-kristian.jpg",
  phone: "+45 53 82 38 28",
  email: "Kristian@momentumrealestate.dk"
},
{
  name: "Frederik Emborg",
  role: "Researcher",
  photo: "assets/images/team-frederik.jpg",
  email: "Frederik@momentumrealestate.dk"
}];


function Team() {
  return (
    <section className="team" id="hold">
      <div className="row">
        <div className="team__head">
          <div>
            <div className="section-eyebrow">Holdet</div>
            <h2 className="section-title">Holdet bag <em>Momentum Real Estate</em></h2>
          </div>
          <p>Vi er et mindre, men stærkt og specialiseret hold med mange års erfaring, og med en stor passion for Fast Ejendom. Ring eller skriv gerne til os hvis du ønsker at vide mere om os, eller hvis du har spørgsmål til nogle af vores nuværende eller tidligere investering. Vi er altid klar til at hjælpe.</p>
        </div>
        <div className="team__grid">
          {TEAM.map((m) =>
          <div key={m.name} className="member">
              <div className="member__photo" style={{ backgroundImage: `url('${m.photo}')` }}>
                <div className="member__overlay">
                  <h4 className="member__name">{m.name}</h4>
                  <div className="member__role">{m.role}</div>
                </div>
              </div>
              <div className="member__contact">
                {m.phone && <a href={`tel:${m.phone.replace(/\s/g, "")}`} className="member__line">{m.phone}</a>}
                <a href={`mailto:${m.email}`} className="member__line">{m.email}</a>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Signup() {
  const benefits = [
  "Investeringscases helt gratis og uforpligtende",
  "Attraktiv rente, kort løbetid og gode sikkerheder",
  "Webinarer og arrangementer med eksperter"];

  return (
    <section className="signup" id="bliv-medlem">
      <div className="signup__photo" />
      <div className="signup__veil" />
      <div className="signup__inner">
        <div className="row">
          <div className="signup__row">
            <div>
              <div className="section-eyebrow" style={{ color: "rgba(245,241,237,0.7)" }}>Bliv medlem af Insides</div>
              <h2 className="signup__title">Få adgang til <em>attraktive investeringer</em> inden for fast ejendom.</h2>
              <p className="signup__lede">
                Som medlem af Insides får du adgang til investeringsmuligheder, der ofte ikke er tilgængelige for alle — sammen med andre private investorer.
              </p>
              <ul className="signup__benefits">
                {benefits.map((b, i) =>
                <li key={i}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
                      <path d="M20 6L9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <span>{b}</span>
                  </li>
                )}
              </ul>
            </div>
            <form className="signup__form" onSubmit={(e) => e.preventDefault()}>
              <div className="field"><label className="field__label">Navn</label><input className="field__input" type="text" placeholder="Fornavn Efternavn" /></div>
              <div className="field"><label className="field__label">E-mail</label><input className="field__input" type="email" placeholder="navn@firma.dk" /></div>
              <div className="field"><label className="field__label">Telefon</label><input className="field__input" type="tel" placeholder="+45" /></div>
              <label className="signup__check"><input type="checkbox" />Jeg accepterer at modtage investeringscases og nyheder fra Insides på e-mail.</label>
              <button type="submit" className="signup__submit">Tilmeld Insides
                <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>
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="row">
        <div className="footer__top">
          <div className="footer__brand">
            <div className="logo"><img src="assets/logo/momentum-wordmark-white.svg" alt="Momentum" /></div>
            <p>Momentum Real Estate er bygget på et fundament af passion og ordentlighed. Vi arbejder med ejendomsinvesteringer på vegne af vores investorer – primært lånefinansiering og projektudvikling hvor vi har mange års erfaring.</p>
            <address className="addr">
              <strong>Momentum Real Estate ApS</strong><br />
              Sundkrogsgade 4<br />
              2100 København Ø<br />
              CVR 46290836
            </address>
          </div>
          <div className="footer__col">
            <h5>Selskab</h5>
            <ul>
              <li><a href="om-os">Om os</a></li>
              <li><a href="om-os#forretningspartnere">Forretningspartnere</a></li>
              <li><a href="kontakt">Kontakt</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Investorer</h5>
            <ul>
              <li><a href="aabne-investeringer">Åbne investeringer</a></li>
              <li><a href="referencer">Realiserede investeringer</a></li>
              <li><a href="bliv-medlem">Bliv medlem af Insides</a></li>
              {/* Midlertidigt skjult sammen med webinarer-sektionen — gendan ved at fjerne kommentaren: */}
              {/* <li><a href="webinarer">Webinarer</a></li> */}
            </ul>
          </div>
          <div className="footer__col">
            <h5>Juridisk</h5>
            <ul>
              {/* Midlertidigt skjult indtil FAIF-tilladelsen er på plads — gendan ved at fjerne kommentaren: */}
              {/* <li><a href="om-os#finanstilsynet">FAIF-tilladelse</a></li> */}
              <li><a href="risikoadvarsel">Risikoadvarsel</a></li>
            </ul>
          </div>
        </div>

        <div className="footer__mid">
          <div className="footer__contact">
            <h6>Generelle henvendelser</h6>
            <p><a href="mailto:kontakt@momentumrealestate.dk">kontakt@momentumrealestate.dk</a></p>
          </div>
        </div>

        <div className="footer__bot">
          <div className="footer__bot-l">
            <span>© 2026 Momentum Real Estate ApS</span>
          </div>
          <div className="footer__legal">
            <a href="privatlivspolitik">Privatlivspolitik</a>
            <a href="cookies">Cookies</a>
          </div>
          <div className="footer__socials">
            <a href="#" aria-label="LinkedIn"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zM8.339 18.337H5.667v-8.59h2.672v8.59zM7.003 8.574a1.548 1.548 0 11.003-3.096 1.548 1.548 0 01-.003 3.096zm11.335 9.763h-2.669V14.16c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z" /></svg></a>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Philosophy, Cases, Webinars, References, Team, Signup, Footer });