// LeadForm — sticky right-rail lead capture for the Expeditions landing page.
// Card chrome only; submission is handled by the embedded Marketing-Cloud iframe.
// On successful submit the iframe redirects to ?success=true, which flips this
// card into the confirmation state.
function LeadForm({ defaultExpedition }) {
  const isSuccess = React.useMemo(() => {
    if (typeof window === "undefined") return false;
    return new URLSearchParams(window.location.search).get("success") === "true";
  }, []);

  if (isSuccess) {
    const focus = defaultExpedition || "your Expedition";
    return (
      <aside className="lp-form lp-form--done" id="lead-form" data-comment-anchor="lead-form-success">
        <div className="lp-form__eyebrow">request received</div>
        <h3 className="lp-form__title">We will be in touch shortly.</h3>
        <p className="lp-form__sub">
          Thank you. An Expeditions specialist will respond within one business day with a tailored plan and proposed departures.
        </p>
        <div className="lp-form__next">
          <div className="lp-form__next-item">
            <span>01</span>
            <span>You receive a confirmation email at the address you provided.</span>
          </div>
          <div className="lp-form__next-item">
            <span>02</span>
            <span>A specialist reviews your interest in <em style={{ color: "#000", fontStyle: "normal" }}>{focus}</em> and prepares an itinerary outline.</span>
          </div>
          <div className="lp-form__next-item">
            <span>03</span>
            <span>We schedule a call to walk you through routes, departures, and what to bring.</span>
          </div>
        </div>
        <div className="lp-form__foot" style={{ marginTop: 28 }}>
          <span>or call</span>
          <strong style={{ color: "#000", fontFamily: "var(--font-display)", fontWeight: 500, letterSpacing: "0.08em" }}>+1 (866) 566-2092</strong>
        </div>
      </aside>);

  }

  return (
    <aside className="lp-form" id="lead-form" data-comment-anchor="lead-form">
      <div className="lp-form__header">
        <div className="lp-form__eyebrow">request information</div>
        <h3 className="lp-form__title">Plan Your Expedition With an Expert</h3>
        <p className="lp-form__sub">
          A specialist will guide you through destinations, routes, and availability — helping you choose the right Expedition for your travel style.
        </p>
      </div>
      <iframe
        className="lp-form__embed"
        src="https://cloud.email.explora.com/expeditions-lead-inquiry"
        title="Request your expedition"
        scrolling="no"
        frameBorder="0"></iframe>
    </aside>);

}
window.LeadForm = LeadForm;