/* =========================================================================
   Momentum — Kontakt-side
   ========================================================================= */

function KontaktHero() {
  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">Kontakt</div>
        <h1 className="refp-hero__title">
          Vi står altid <em>til rådighed</em>
        </h1>
        <p className="refp-hero__lede">
          Investering starter og slutter med tillid, og den gode mavefornemmelse. Vi vil altid gerne tale med dig, hvad enten det er om en konkret investering, eller om du blot har behov for lidt sparring – og vi mødes også altid gerne til et fysisk møde hvor end det passer dig bedst.
        </p>
      </div>
    </section>);

}

function KontaktSection() {
  const [form, setForm] = React.useState({ navn: "", email: "", telefon: "", emne: "", besked: "", consent: false, hp: "" });
  const [status, setStatus] = React.useState("idle"); // idle | sending | done | error
  const set = (patch) => setForm((f) => ({ ...f, ...patch }));
  const valid = form.navn.trim() && /\S+@\S+\.\S+/.test(form.email) && form.consent;

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!valid || status === "sending") return;
    if (form.hp) { setStatus("done"); return; } // honeypot ramt — lad bot tro det lykkedes
    setStatus("sending");
    submitLead({
      kilde: "kontakt",
      navn: form.navn, email: form.email, telefon: form.telefon,
      emne: form.emne, besked: form.besked,
      samtykke: form.consent ? "ja" : "nej"
    }).
    then(() => setStatus("done")).
    catch(() => setStatus("error"));
  };

  return (
    <section className="kontakt-section">
      <div className="kontakt-section__inner">
        <div className="row">
          <div className="kontakt-section__row">
            <div>
              <div className="section-eyebrow">Kontakt</div>
              <h1 className="kontakt-section__title">Skriv eller ring til os.</h1>
              <p className="kontakt-section__lede">
                Vi vender tilbage indenfor en arbejdsdag. Skal det gå hurtigt, er du altid velkommen til at ringe direkte til en af partnerne.
              </p>

              <div className="kontakt-direct">
                <div className="kontakt-direct__item">
                  <h6>Generelle henvendelser</h6>
                  <p><a href="mailto:kontakt@momentumrealestate.dk">kontakt@momentumrealestate.dk</a></p>
                </div>
                <div className="kontakt-direct__item">
                  <h6>Telefon</h6>
                  <p><a href="tel:+4553823828">+45 53 82 38 28</a></p>
                </div>
                <div className="kontakt-direct__item">
                  <h6>Besøg os</h6>
                  <p>Sundkrogsgade 4<br />2100 København Ø</p>
                </div>
              </div>
            </div>

            {status === "done" ?
            <div className="kontakt-form-done">
              <div className="join__done-mark">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M20 6L9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <p>Tak, {form.navn.split(" ")[0]} — vi har modtaget din besked og vender tilbage indenfor en arbejdsdag.</p>
            </div> :
            <form className="signup__form" onSubmit={handleSubmit}>
              <div className="field">
                <label className="field__label">Navn</label>
                <input className="field__input" type="text" placeholder="Fornavn Efternavn" value={form.navn} onChange={(e) => set({ navn: e.target.value })} />
              </div>
              <div className="field">
                <label className="field__label">E-mail</label>
                <input className="field__input" type="email" placeholder="navn@firma.dk" value={form.email} onChange={(e) => set({ email: e.target.value })} />
              </div>
              <div className="field">
                <label className="field__label">Telefon</label>
                <input className="field__input" type="tel" placeholder="+45" value={form.telefon} onChange={(e) => set({ telefon: e.target.value })} />
              </div>
              <div className="field">
                <label className="field__label">Emne</label>
                <input className="field__input" type="text" placeholder="Hvad handler din henvendelse om?" value={form.emne} onChange={(e) => set({ emne: e.target.value })} />
              </div>
              <div className="field">
                <label className="field__label">Besked</label>
                <textarea className="field__textarea" rows="5" placeholder="Skriv din besked her…" value={form.besked} onChange={(e) => set({ besked: e.target.value })} />
              </div>
              {/* honeypot — skjult for mennesker, fanger bots */}
              <input type="text" name="company" tabIndex={-1} autoComplete="off" aria-hidden="true" value={form.hp} onChange={(e) => set({ hp: e.target.value })} style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }} />
              <label className="signup__check">
                <input type="checkbox" checked={form.consent} onChange={(e) => set({ consent: e.target.checked })} />
                Jeg accepterer at Momentum opbevarer mine oplysninger med henblik på at besvare min henvendelse.
              </label>
              {status === "error" &&
              <p className="form-error" role="alert">Noget gik galt — prøv igen, eller skriv direkte til kontakt@momentumrealestate.dk.</p>
              }
              <button type="submit" className="signup__submit" disabled={!valid || status === "sending"}>
                {status === "sending" ? "Sender…" : "Send besked"}
                <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>);

}

const FAQS = [
{
  q: "Hvem kan investere?",
  a: "Vi arbejder primært med private og semi-professionelle investorer, der ønsker eksponering mod fast ejendom med et attraktivt og stabilt afkast. Du behøver ikke at have investeret i ejendomme før eller være ekspert i fast ejendom. Vi er altid på din side, og vi sørger for at klæde dig grundigt på, så du kan tage en beslutning med ro i maven."
},
{
  q: "Hvad er minimumsbeløbet for at investere?",
  a: "Vores investeringer har et minimumsindskud, som varierer fra investeringscase til investeringscase. Oftest er minimumsinvesteringen 750.000 kr. eller 1.000.000 kr. Ønsker du at investere ind i vores fond, så er minimumsinvesteringen 1.000.000 kr."
},
{
  q: "Hvad er forskellen på at investere i et enkeltprojekt og i en fond?",
  a: "I et enkeltprojekt investerer du direkte i et specifikt ejendomsprojekt eller en lånefinansiering, hvor dit afkast og din løbetid alene er baseret på netop dette projekt. Det giver fuld transparens omkring, præcis hvad du er med i. I vores fond spredes investeringen over flere projekter, hvilket giver en naturlig risikospredning — men også en lidt længere investeringshorisont."
},
{
  q: "Hvad kan jeg forvente i afkast?",
  a: "På udviklingsprojekter sigter vi efter en IRR på +18–20% p.a. afhængigt af projektets risikoprofil. På lånefinansiering er IRR typisk 11–14% p.a. På fondsinvesteringer er målsætningen minimum 15% IRR p.a. Afkastet er altid opgivet før skat. Vi lover aldrig mere, end vi tror på, og tager udgangspunkt i realistiske og konservative forudsætninger — så vil vi hellere overraske positivt."
},
{
  q: "Hvad er investeringsperioden?",
  a: "For enkeltprojekter og lånefinansiering er den typiske investeringsperiode ca. 12–36 måneder. For fonde regner vi med en løbetid på 4–6 år afhængigt af projekternes fremdrift og markedsforhold."
},
{
  q: "Hvad er risikoen ved at investere?",
  a: "Ejendomsudvikling og lånefinansiering indebærer en anden risiko end færdigudlejede ejendomme — men også et markant højere afkastpotentiale. Vi håndterer risikoen aktivt gennem grundig due diligence, faseopdelte investeringer, erfarne samarbejdspartnere og konservative antagelser i vores beregninger. Vi siger hellere nej til et projekt end ja til et, vi ikke er overbeviste om er det rigtige."
},
{
  q: "Hvilke midler kan jeg investere med?",
  a: "Mulighederne er mange. Afhængigt af projektet kan der investeres med selskabsmidler, private midler, pensionsmidler og VSO-midler. Vi hjælper gerne med at finde den mest hensigtsmæssige struktur, og gerne i samarbejde med din rådgiver."
},
{
  q: "Hvad adskiller jer fra en traditionel bankinvestering eller ejendomsfond?",
  a: "Vi er et lille, specialiseret hold med direkte adgang til projekterne. Vi har en bred og langvarig erfaring inden for alle typer af investeringer i fast ejendom. Det betyder også, at vi har en forståelse for og kan gennemskue de risici, der er, og de udfordringer, som kan opstå i forbindelse med de enkelte investeringer. Det giver dig en større sikkerhed og tryghed som investor."
},
{
  q: "Hvordan kommer jeg i gang?",
  a: "Ring eller skriv til os. Vi tager altid en uforpligtende snak først — for vi skal også være sikre på, at der er et godt match, inden vi går videre."
}];


function KontaktFaqs() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="kontakt-faqs">
      <div className="row">
        <div className="kontakt-faqs__head">
          <div className="kontakt-faqs__eyebrow">FAQ</div>
          <h2 className="kontakt-faqs__title">
            <span style={{ color: "rgb(255, 255, 255)" }}>Spørgsmål vi ofte</span> <em style={{ color: "rgb(255, 255, 255)" }}>får stillet.</em>
          </h2>
        </div>
        <div className="kontakt-faqs__list">
          {FAQS.map((f, i) =>
          <div key={i} className={"cp-faq" + (open === i ? " is-open" : "")}>
              <button className="cp-faq__btn" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="cp-faq__icon" />
              </button>
              <div className="cp-faq__panel">
                <div className="cp-faq__inner">{f.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

const KONTAKT_TEAM = [
{
  id: "thomas",
  name: "Thomas Riel Andreasen",
  role: "Ejer",
  photo: "assets/images/team-thomas.jpg",
  phone: "+45 40 50 12 04",
  email: "Thomas@momentumrealestate.dk",
  bio: "Thomas er stifter og medejer af Momentum, og har siden 2014 arbejdet med fast ejendom, bl.a. i revisionsbranchen og senere som investeringsansvarlig i et dansk family office, hvor det primære fokus også var investeringer indenfor fast ejendom. Thomas brænder for at eksekvere investeringer og for at sikre transparens og sammenhæng mellem investorer og den gode transaktion."
},
{
  id: "kristian",
  name: "Kristian Falk Nielsen",
  role: "Ejer",
  photo: "assets/images/team-kristian.jpg",
  phone: "+45 53 82 38 28",
  email: "Kristian@momentumrealestate.dk",
  bio: "Kristian er stifter og ejer af Momentum. Han har de sidste 15 år arbejdet med fast ejendom, heriblandt som medejer af 3 af de bedst omsættende ejendomsmæglerforretninger i Danmark, og efterfølgende som partner med ansvaret for investorer og relationer hos Momentum Family Office. Kristian har en stor passion for ejendom, og han brænder for at skabe langvarige relationer båret på tillid og nærvær."
},
{
  id: "frederik",
  name: "Frederik Emborg",
  role: "Researcher",
  photo: "assets/images/team-frederik.jpg",
  email: "Frederik@momentumrealestate.dk",
  bio: "Frederik er researcher hos Momentum Real Estate, og har beskæftiget sig med investeringer indenfor fast ejendom siden september 2025. I sin rolle understøtter han Kristian og Thomas med research og udarbejdelse af materiale, i forbindelse med Momentums investeringsprojekter. Sideløbende med arbejdet er Frederik i gang med HD1 på CBS. Hans interesse for ejendomme er vokset gennem både studiet og arbejdet."
}];


function KontaktTeam() {
  return (
    <section className="kontakt-team" id="hold">
      <div className="row">
        <div className="kontakt-team__head">
          <div>
            <div className="section-eyebrow">Medarbejdere</div>
            <h2 className="kontakt-team__title">Holdet bag <em>Momentum.</em></h2>
          </div>
          <p className="kontakt-team__intro">
            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="kontakt-team__grid">
          {KONTAKT_TEAM.map((m) =>
          <a key={m.name} href={`medarbejder?id=${m.id}`} className="kontakt-member">
              <div className="kontakt-member__photo" style={{ backgroundImage: `url('${m.photo}')` }}>
                <div className="kontakt-member__overlay">
                  <h4 className="kontakt-member__name">{m.name}</h4>
                  <div className="kontakt-member__role">{m.role}</div>
                </div>
              </div>
              <div className="kontakt-member__body">
                <div className="kontakt-member__contact">
                  {m.phone && <span className="kontakt-member__line">{m.phone}</span>}
                  <span className="kontakt-member__line">{m.email}</span>
                  <span className="kontakt-member__readmore">
                    Læs mere
                    <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>
                  </span>
                </div>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

const AMBASSADORS = [
{ name: "Christian Thilsted", role: "Co-founder, WoodThilsted" },
{ name: "Rui Harrsen", role: "Investor" },
{ name: "Thomas Tynor", role: "Partner, Yggdrasil Commodities" },
{ name: "Victor Hirsch", role: "Investor" }];


function KontaktAmbassadors() {
  return (
    <section className="kontakt-ambassadors" id="ambassadorer">
      <div className="row">
        <div className="kontakt-amb__head">
          <div>
            <div className="section-eyebrow">Ambassadører</div>
            <h2 className="kontakt-amb__title">Vores investorer <em>er vores vigtigste ressource.</em></h2>
          </div>
          <p className="kontakt-amb__intro">
            Vi har ambassadører, som tør stå på mål for vores forretning, både etisk og moralsk, men også vores kompetencer når det kommer til investering og fast ejendom. Dem kan du se her.
          </p>
        </div>
        <ul className="kontakt-amb__list">
          {AMBASSADORS.map((a, i) =>
          <li key={a.name} className="kontakt-amb__row">
              <span className="kontakt-amb__num">{String(i + 1).padStart(2, "0")}</span>
              <span className="kontakt-amb__name">{a.name}</span>
              <span className="kontakt-amb__role">{a.role}</span>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

function KontaktPage() {
  return (
    <>
      <SiteNav />
      <KontaktHero />
      <KontaktSection />
      <KontaktTeam />
      <KontaktAmbassadors />
      <KontaktFaqs />
      <Footer />
    </>);

}

Object.assign(window, { KontaktPage });