/* =========================================================================
   Momentum — Bliv medlem af Insides (multistep tilmelding)
   ========================================================================= */

const JOIN_BENEFITS = [
"Investeringscases — gratis og uforpligtende",
"Attraktiv rente, kort løbetid og gode sikkerheder",
"Webinarer og arrangementer med vores hold"];


const HORIZON_OPTIONS = [
"Ja — jeg forventer at investere 1–2 millioner kr.",
"Ja — jeg forventer at investere 2–5 millioner kr.",
"Ja — jeg forventer at investere for mere end 5 millioner kr.",
"Nej — ikke lige nu, men jeg vil gerne følge med."];


const TYPE_OPTIONS = ["Udviklingsprojekter", "Bridgelån", "Fond"];

const LETTERS = ["A", "B", "C", "D", "E"];

function Choice({ letter, label, selected, multi, onClick }) {
  return (
    <button
      type="button"
      className={"q-option" + (selected ? " is-selected" : "")}
      onClick={onClick}>

      <span className={"q-option__badge" + (multi ? " q-option__badge--sq" : "")}>{letter}</span>
      <span className="q-option__label">{label}</span>
      {selected &&
      <svg className="q-option__check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" /></svg>
      }
    </button>);

}

function BlivMedlem() {
  const STEPS = ["Kontakt", "Investeringshorisont", "Interesser", "Samtykke"];
  const [step, setStep] = React.useState(0);
  const [sent, setSent] = React.useState(false);
  const [status, setStatus] = React.useState("idle"); // idle | sending | error
  const [form, setForm] = React.useState({
    name: "", email: "", phone: "",
    horizon: null,
    types: [],
    consent: null,
    hp: ""
  });

  const set = (patch) => setForm((f) => ({ ...f, ...patch }));
  const toggleType = (t) =>
  setForm((f) => ({
    ...f,
    types: f.types.includes(t) ? f.types.filter((x) => x !== t) : [...f.types, t]
  }));

  const valid = [
  form.name.trim() && /\S+@\S+\.\S+/.test(form.email),
  form.horizon !== null,
  form.types.length > 0,
  form.consent === "accept"];


  const next = () => setStep((s) => Math.min(s + 1, STEPS.length - 1));
  const back = () => setStep((s) => Math.max(s - 1, 0));
  const submit = () => {
    if (!valid[3] || status === "sending") return;
    if (form.hp) { setSent(true); return; } // honeypot ramt
    setStatus("sending");
    submitLead({
      kilde: "bliv-medlem",
      navn: form.name, email: form.email, telefon: form.phone,
      investeringshorisont: HORIZON_OPTIONS[form.horizon] || "",
      interesser: form.types.join(", "),
      samtykke: form.consent === "accept" ? "ja" : "nej"
    }).
    then(() => { setSent(true); setStatus("idle"); }).
    catch(() => setStatus("error"));
  };

  return (
    <>
      {/* Hero */}
      <section className="join-hero">
        <div className="join-hero__photo" />
        <div className="join-hero__veil" />
        <div className="join-hero__inner">
          <div className="join-hero__content">
            <div className="join-hero__eyebrow">Insides</div>
            <h1 className="join-hero__title">Bliv medlem af <em>Insides</em>.</h1>
            <p className="join-hero__lede">
              Få adgang til udvalgte investeringsmuligheder inden for fast ejendom — sammen med andre private investorer. Det er gratis og uforpligtende.
            </p>
          </div>
        </div>
      </section>

      {/* Benefits strip */}
      <section className="join-strip">
        <div className="join-strip__inner">
          {JOIN_BENEFITS.map((b, i) =>
          <div key={i} className="join-strip__item">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" aria-hidden="true"><path d="M20 6L9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" /></svg>
              <span>{b}</span>
            </div>
          )}
        </div>
      </section>

      {/* Form */}
      <section className="join-form-section" id="tilmeld">
        <div className="join-form-wrap">
          <div className="join-form-card">
            <div className="join-form-card__eyebrow">Tilmelding</div>

          {sent ?
          <div className="join__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.name.split(" ")[0]} — vi har modtaget din tilmelding. Du hører fra os, så snart en relevant case er klar.</p>
            </div> :

          <div className="join__form">
              {/* Progress */}
              <div className="q-progress">
                <div className="q-progress__meta">
                  <span>Trin {step + 1} af {STEPS.length}</span>
                  <span>{STEPS[step]}</span>
                </div>
                <div className="q-progress__track">
                  <div className="q-progress__bar" style={{ width: `${(step + 1) / STEPS.length * 100}%` }} />
                </div>
              </div>

              {/* Step 0 — contact */}
              {step === 0 &&
              <div className="q-step">
                  <div className="q-head">
                    <span className="q-num">1</span>
                    <h2 className="q-title">Lad os starte med dine oplysninger.</h2>
                  </div>
                  <div className="q-fields">
                    <div className="field"><label className="field__label">Navn</label><input className="field__input" type="text" placeholder="Fornavn Efternavn" value={form.name} onChange={(e) => set({ name: 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.phone} onChange={(e) => set({ phone: 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 }} />
                  </div>
                </div>
              }

              {/* Step 1 — horizon */}
              {step === 1 &&
              <div className="q-step">
                  <div className="q-head">
                    <span className="q-num">2</span>
                    <h2 className="q-title">Forventer du at lave direkte investeringer i de kommende 12 måneder?</h2>
                  </div>
                  <div className="q-options">
                    {HORIZON_OPTIONS.map((o, i) =>
                  <Choice key={i} letter={LETTERS[i]} label={o} selected={form.horizon === i} onClick={() => set({ horizon: i })} />
                  )}
                  </div>
                </div>
              }

              {/* Step 2 — types */}
              {step === 2 &&
              <div className="q-step">
                  <div className="q-head">
                    <span className="q-num">3</span>
                    <h2 className="q-title">Hvilke investeringstyper er du interesseret i?</h2>
                  </div>
                  <p className="q-desc">Vælg gerne flere.</p>
                  <div className="q-options">
                    {TYPE_OPTIONS.map((o, i) =>
                  <Choice key={i} letter={LETTERS[i]} label={o} multi selected={form.types.includes(o)} onClick={() => toggleType(o)} />
                  )}
                  </div>
                </div>
              }

              {/* Step 3 — consent */}
              {step === 3 &&
              <div className="q-step">
                  <div className="q-head">
                    <span className="q-num">4</span>
                    <h2 className="q-title">Jeg accepterer at behandle alle modtagne sager fortroligt samt Momentums behandling af personoplysninger.</h2>
                  </div>
                  <div className="q-options">
                    <Choice letter="A" label="Jeg accepterer" selected={form.consent === "accept"} onClick={() => set({ consent: "accept" })} />
                    <Choice letter="B" label="Jeg accepterer ikke" selected={form.consent === "decline"} onClick={() => set({ consent: "decline" })} />
                  </div>
                </div>
              }

              {/* Nav */}
              <div className="q-nav">
                {step > 0 ?
                <button type="button" className="q-back" onClick={back}>
                    <svg width="14" height="14" 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>
                    Tilbage
                  </button> :
                <span />
                }
                {step < STEPS.length - 1 ?
                <button type="button" className="q-next" disabled={!valid[step]} onClick={next}>
                    Næste
                    <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> :
                <button type="button" className="q-next" disabled={!valid[3] || status === "sending"} onClick={submit}>
                    {status === "sending" ? "Sender…" : "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>
                }
              </div>
              {status === "error" &&
              <p className="form-error" role="alert">Noget gik galt — prøv igen, eller skriv til kontakt@momentumrealestate.dk.</p>
              }
            </div>
          }
          </div>
        </div>
      </section>
    </>);

}

function BlivMedlemPage() {
  return (
    <>
      <SiteNav />
      <BlivMedlem />
      <Footer />
    </>);

}

Object.assign(window, { BlivMedlemPage });