/* educator-eventreg.jsx — Hosted public sign-on / registration webpage.
   Shown as a browser-framed preview from an event's "Preview page" button.
   This is the page learners land on to sign up for an event or webinar. */

function RegField({ label, type = "text", value, onChange, placeholder, half, required }) {
  return (
    <div style={{ flex: half ? "1 1 0" : "1 1 100%", minWidth: 0 }}>
      <label style={{ display: "block", fontSize: 12.5, fontWeight: 700, color: "#475467", marginBottom: 5 }}>{label}{required && <span style={{ color: "#e0506a" }}> *</span>}</label>
      <input type={type} value={value} onChange={onChange} placeholder={placeholder}
        style={{ width: "100%", padding: "11px 13px", borderRadius: 10, border: "1.5px solid #e6ecf4", outline: "none", fontSize: 14.5, fontFamily: "var(--body)", background: "#fff" }}
        onFocus={(e) => e.target.style.borderColor = "#1281c4"} onBlur={(e) => e.target.style.borderColor = "#e6ecf4"} />
    </div>);
}

function RegForm({ ev, onRegister }) {
  const isVirtual = ev.mode !== "physical";
  const plat = ev.platform && window.PLATFORMS[ev.platform];
  const [f, setF] = useState({ first: "", last: "", email: "", co: "", notes: "" });
  const [done, setDone] = useState(false);
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
  const valid = f.first.trim() && f.email.includes("@");

  function submit() {
    if (!valid || done) return;
    setDone(true);
    onRegister && onRegister();
  }

  if (done) return (
    <div style={{ textAlign: "center", padding: "8px 4px" }}>
      <div style={{ width: 60, height: 60, borderRadius: "50%", background: "#e8f5e9", display: "grid", placeItems: "center", margin: "0 auto 16px" }}>
        <Icon name="check" size={30} style={{ color: "#2e7d32" }} stroke={3} />
      </div>
      <h3 style={{ fontSize: 21, fontWeight: 800, color: "#1c2740", marginBottom: 8 }}>You're registered!</h3>
      <p style={{ fontSize: 14, color: "#475467", lineHeight: 1.55, marginBottom: 18 }}>
        Demo — no email is actually sent. In production a confirmation would go to <b style={{ color: "#1c2740" }}>{f.email}</b>.
      </p>
      <div style={{ textAlign: "left", background: "#f6f9fd", borderRadius: 12, padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".1em", textTransform: "uppercase", color: "#7b899f" }}>What happens next</div>
        {[
          ["calendar", "Save the date", ev.start + " – " + ev.end + " · " + ev.time],
          isVirtual
            ? ["video", "Your join link", "Sent by email now and again 1 hour before. Hosted on " + plat.label + "."]
            : ["pin", "Getting there", ev.venue + ", " + ev.city + (ev.room && ev.room !== "—" ? " · " + ev.room : "")],
          ["mail", "Questions?", "Reply to your confirmation email or contact events@vanharen.net"]
        ].map(([ic, t, d], i) => (
          <div key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
            <div style={{ width: 32, height: 32, borderRadius: 9, background: "#fff", border: "1px solid #e6ecf4", display: "grid", placeItems: "center", flexShrink: 0 }}><Icon name={ic} size={15} style={{ color: "#1281c4" }} /></div>
            <div><div style={{ fontSize: 13.5, fontWeight: 700, color: "#1c2740" }}>{t}</div><div style={{ fontSize: 12.5, color: "#475467", lineHeight: 1.45 }}>{d}</div></div>
          </div>
        ))}
      </div>
      <button onClick={() => { setDone(false); setF({ first: "", last: "", email: "", co: "", notes: "" }); }} style={{ marginTop: 14, fontSize: 13, fontWeight: 700, color: "#1281c4", background: "none", border: "none", cursor: "pointer" }}>Register another person</button>
    </div>);

  const seatsLeft = ev.capacity - ev.registered;
  return (
    <div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 4 }}>
        <h3 style={{ fontSize: 19, fontWeight: 800, color: "#1c2740" }}>Reserve your place</h3>
        <div style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 20, color: "#1281c4" }}>{ev.price}</div>
      </div>
      <p style={{ fontSize: 13, color: "#7b899f", marginBottom: 16 }}>{seatsLeft > 0 ? (isVirtual ? seatsLeft + " spots remaining" : "Only " + seatsLeft + " seats left") : "Join the waitlist"}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
        <RegField label="First name" half required value={f.first} onChange={set("first")} placeholder="Sanne" />
        <RegField label="Last name" half value={f.last} onChange={set("last")} placeholder="de Boer" />
        <RegField label="Work email" type="email" required value={f.email} onChange={set("email")} placeholder="sanne@company.com" />
        <RegField label="Company" value={f.co} onChange={set("co")} placeholder="Your organisation" />
        <RegField label={isVirtual ? "Anything you'd like the trainer to cover? (optional)" : "Dietary or access needs (optional)"} value={f.notes} onChange={set("notes")} placeholder={isVirtual ? "e.g. examples for agile teams" : "e.g. vegetarian"} />
      </div>
      <button onClick={submit} disabled={!valid} style={{ width: "100%", marginTop: 16, padding: "14px", borderRadius: 11, border: "none", background: valid ? "#1281c4" : "#bcd4ea", color: "#fff", fontFamily: "var(--display)", fontWeight: 800, fontSize: 15.5, cursor: valid ? "pointer" : "not-allowed", boxShadow: valid ? "0 8px 20px rgba(18,129,196,.3)" : "none", transition: "background .15s" }}>
        {ev.price === "Free" ? "Register for free" : "Complete registration"}
      </button>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, marginTop: 12, fontSize: 12, color: "#7b899f" }}>
        <Icon name="lock" size={12} />Secure sign-up · GDPR compliant · No payment now
      </div>
    </div>);
}

function RegistrationPage({ ev, onClose, onRegister }) {
  const isVirtual = ev.mode !== "physical";
  const plat = ev.platform && window.PLATFORMS[ev.platform];
  const url = "learn.vanharen.net/e/" + ev.regSlug;
  const [copied, setCopied] = useState(false);
  const heroColor = ev.colorHex || "#1281c4";

  function copy() {
    try { navigator.clipboard && navigator.clipboard.writeText("https://" + url); } catch (e) {}
    setCopied(true); setTimeout(() => setCopied(false), 1500);
  }

  const facts = [
    ["calendar", "Date", ev.start + " – " + ev.end.replace(/ \d{4}$/, "")],
    ["clock", ev.days > 1 ? "Duration" : "Time", ev.days > 1 ? ev.days + " days · " + ev.time : ev.time],
    [isVirtual ? "video" : "pin", "Format", isVirtual ? window.MODE_META[ev.mode].label : ev.city],
    ["globe", "Language", ev.lang],
    ["users", isVirtual ? "Spots" : "Seats", (ev.capacity - ev.registered) + " left"],
    ["ticket", "Price", ev.price]
  ];

  const agenda = [
    "Welcome & objectives",
    ev.course + " — core concepts",
    isVirtual ? "Live Q&A and polls" : "Workshop & case study",
    "Practice & assessment",
    "Wrap-up and next steps"
  ];

  return ReactDOM.createPortal(
    <div style={{ position: "fixed", inset: 0, zIndex: 700, background: "rgba(13,26,52,.55)", backdropFilter: "blur(4px)", display: "flex", flexDirection: "column", padding: "22px 22px 0" }} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      {/* educator preview toolbar */}
      <div style={{ maxWidth: 1080, width: "100%", margin: "0 auto", display: "flex", alignItems: "center", gap: 12, color: "#fff", marginBottom: 12, flexWrap: "wrap" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12.5, fontWeight: 700, background: "rgba(255,255,255,.14)", padding: "6px 12px", borderRadius: 999 }}>
          <Icon name="eye" size={14} />Preview · hosted sign-up page
        </span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12.5, fontWeight: 700, color: ev.regPublished ? "#7ee2a8" : "#fdcf85" }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: ev.regPublished ? "#26d07c" : "#f99d25" }} />{ev.regPublished ? "Published & live" : "Draft — not public"}
        </span>
        <div style={{ flex: 1 }} />
        <button onClick={copy} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 13, fontWeight: 700, color: "#fff", background: "rgba(255,255,255,.14)", border: "none", borderRadius: 9, padding: "8px 14px", cursor: "pointer" }}><Icon name={copied ? "check" : "copy"} size={14} />{copied ? "Copied link" : "Copy link"}</button>
        <button onClick={onClose} style={{ width: 36, height: 36, borderRadius: 9, background: "rgba(255,255,255,.14)", border: "none", cursor: "pointer", display: "grid", placeItems: "center", color: "#fff" }}><Icon name="x" size={17} /></button>
      </div>

      {/* browser window */}
      <div style={{ maxWidth: 1080, width: "100%", margin: "0 auto", flex: 1, minHeight: 0, background: "#fff", borderRadius: "14px 14px 0 0", overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "0 -10px 50px rgba(0,0,0,.3)" }} onClick={(e) => e.stopPropagation()}>
        {/* address bar */}
        <div style={{ height: 44, flex: "none", background: "#eef2f7", borderBottom: "1px solid #dde5ef", display: "flex", alignItems: "center", gap: 9, padding: "0 14px" }}>
          <div style={{ display: "flex", gap: 6 }}>
            {["#ff5f57", "#febc2e", "#28c840"].map((c) => <span key={c} style={{ width: 11, height: 11, borderRadius: "50%", background: c }} />)}
          </div>
          <div style={{ flex: 1, maxWidth: 540, margin: "0 auto", display: "flex", alignItems: "center", gap: 8, background: "#fff", borderRadius: 8, padding: "6px 12px", fontSize: 12.5, color: "#475467", border: "1px solid #e0e7f0" }}>
            <Icon name="lock" size={12} style={{ color: "#2e7d32" }} /><span style={{ fontFamily: "var(--display)" }}>{url}</span>
          </div>
          <Icon name="refresh" size={15} style={{ color: "#7b899f" }} />
        </div>

        {/* PAGE BODY (scrolls) */}
        <div className="scroll" style={{ flex: 1, overflowY: "auto", background: "#fff" }}>
          {/* brand nav */}
          <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "16px 40px", borderBottom: "1px solid #eef2f8" }}>
            <HexMark size={30} />
            <img src="assets/vanharen-logo.png" alt="Van Haren" style={{ height: 19 }} />
            <div style={{ flex: 1 }} />
            <span style={{ fontSize: 13, fontWeight: 600, color: "#9aa5b5", cursor: "not-allowed" }} title="Binnenkort">Training catalogue</span>
            <span style={{ fontSize: 13, fontWeight: 600, color: "#9aa5b5", cursor: "not-allowed" }} title="Binnenkort">Contact</span>
          </div>

          {/* hero */}
          <div style={{ position: "relative", padding: "44px 40px 36px", background: "linear-gradient(160deg," + heroColor + "12, #f6f9fd 70%)", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(" + heroColor + "1f 1.3px, transparent 1.4px)", backgroundSize: "22px 22px", opacity: .5 }} />
            <div style={{ position: "relative", maxWidth: 720 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14, flexWrap: "wrap" }}>
                <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: ".12em", textTransform: "uppercase", color: heroColor }}>{ev.course}</span>
                <window.ModeChip mode={ev.mode} platform={ev.platform} />
                {isVirtual && <span style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "#fff", border: "1px solid #e6ecf4", borderRadius: 999, padding: "3px 10px 3px 6px", fontSize: 11.5, fontWeight: 700, color: "#1c2740" }}><window.PlatformChip id={ev.platform} size={18} />Live via {plat.short}</span>}
              </div>
              <h1 style={{ fontSize: 40, lineHeight: 1.05, fontWeight: 800, color: "#1c2740", marginBottom: 14, letterSpacing: "-.01em" }}>{ev.title}</h1>
              <p style={{ fontSize: 16.5, lineHeight: 1.55, color: "#475467", marginBottom: 20, maxWidth: 620 }}>{ev.blurb}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap", fontSize: 14, color: "#1c2740", fontWeight: 600 }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Icon name="calendar" size={16} style={{ color: heroColor }} />{ev.start} – {ev.end}</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Icon name="clock" size={16} style={{ color: heroColor }} />{ev.time}</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Icon name={isVirtual ? "video" : "pin"} size={16} style={{ color: heroColor }} />{isVirtual ? plat.label : ev.venue}</span>
              </div>
            </div>
          </div>

          {/* facts strip */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", borderBottom: "1px solid #eef2f8" }}>
            {facts.map(([ic, k, v], i) => (
              <div key={i} style={{ padding: "16px 18px", borderRight: i < 5 ? "1px solid #eef2f8" : "none" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10.5, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "#7b899f", marginBottom: 6 }}><Icon name={ic} size={13} />{k}</div>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: "#1c2740" }}>{v}</div>
              </div>
            ))}
          </div>

          {/* two-column body */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 36, padding: "36px 40px 48px", alignItems: "start" }}>
            {/* left */}
            <div style={{ display: "flex", flexDirection: "column", gap: 30 }}>
              <section>
                <h2 style={{ fontSize: 22, fontWeight: 800, color: "#1c2740", marginBottom: 12 }}>About this {isVirtual ? "webinar" : "training"}</h2>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: "#475467" }}>{ev.blurb} Led by {ev.trainer}, this {ev.days > 1 ? ev.days + "-day" : "session"} programme combines expert instruction with hands-on practice. {isVirtual ? "Join live from anywhere — the session is interactive and recorded for replay." : "Includes all materials" + (ev.catering && ev.catering !== "—" ? ", " + ev.catering.toLowerCase() : "") + "."}</p>
              </section>

              {isVirtual &&
                <section style={{ background: plat.color + "0c", border: "1px solid " + plat.color + "2a", borderRadius: 14, padding: "20px 22px" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
                    <window.PlatformChip id={ev.platform} size={38} />
                    <div><div style={{ fontSize: 16, fontWeight: 800, color: "#1c2740" }}>How to join</div><div style={{ fontSize: 13, color: "#475467" }}>Hosted on {plat.label}</div></div>
                  </div>
                  <p style={{ fontSize: 14, lineHeight: 1.6, color: "#475467" }}>After registering you'll receive a unique, secure joining link by email — and a reminder one hour before we go live. {plat.built ? "No downloads needed; it opens right in your browser." : "Make sure you have " + plat.short + " ready on your device."}</p>
                </section>
              }

              <section>
                <h2 style={{ fontSize: 22, fontWeight: 800, color: "#1c2740", marginBottom: 14 }}>What we'll cover</h2>
                <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  {agenda.map((a, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 0", borderBottom: i < agenda.length - 1 ? "1px solid #eef2f8" : "none" }}>
                      <span style={{ width: 28, height: 28, borderRadius: 8, background: heroColor + "14", color: heroColor, display: "grid", placeItems: "center", fontFamily: "var(--display)", fontWeight: 800, fontSize: 13, flexShrink: 0 }}>{i + 1}</span>
                      <span style={{ fontSize: 15, color: "#1c2740", fontWeight: 500 }}>{a}</span>
                    </div>
                  ))}
                </div>
              </section>

              <section>
                <h2 style={{ fontSize: 22, fontWeight: 800, color: "#1c2740", marginBottom: 14 }}>Your trainer</h2>
                <div style={{ display: "flex", alignItems: "center", gap: 15, background: "#f6f9fd", borderRadius: 14, padding: 18 }}>
                  <div style={{ width: 56, height: 56, borderRadius: 14, background: "linear-gradient(135deg," + heroColor + ",#1d3d7c)", display: "grid", placeItems: "center", color: "#fff", fontFamily: "var(--display)", fontWeight: 800, fontSize: 20, flexShrink: 0 }}>{ev.ti}</div>
                  <div><div style={{ fontSize: 16.5, fontWeight: 800, color: "#1c2740" }}>{ev.trainer}</div><div style={{ fontSize: 13.5, color: "#475467" }}>Certified {ev.course} trainer · Van Haren Learning Solutions</div></div>
                </div>
              </section>
            </div>

            {/* right — sticky sign-up card */}
            <div style={{ position: "sticky", top: 12, background: "#fff", border: "1px solid #e6ecf4", borderRadius: 16, padding: 22, boxShadow: "0 10px 34px rgba(29,61,124,.1)" }}>
              <RegForm ev={ev} onRegister={onRegister} />
            </div>
          </div>

          {/* footer */}
          <div style={{ borderTop: "1px solid #eef2f8", padding: "22px 40px", display: "flex", alignItems: "center", gap: 12, background: "#f6f9fd" }}>
            <HexMark size={24} />
            <span style={{ fontSize: 13, color: "#7b899f" }}>© 2026 Van Haren Learning Solutions · events@vanharen.net</span>
            <div style={{ flex: 1 }} />
            <span style={{ fontSize: 12.5, color: "#7b899f" }}>Privacy · Terms · Cookies</span>
          </div>
        </div>
      </div>
    </div>, document.body);
}

Object.assign(window, { RegistrationPage });