// Lead-capture multi-step form — Register Interest / Brochure / Private Viewing
const { useState } = React;

function RegisterForm({ project, accent }) {
  const [mode, setMode] = useState("interest"); // interest | brochure | viewing
  const [step, setStep] = useState(1);
  const [done, setDone] = useState(false);
  const [data, setData] = useState({
    title:"Mr",
    firstName:"",
    lastName:"",
    email:"",
    phoneCode:"+971",
    phone:"",
    nationality:"",
    residency:"United Arab Emirates",
    budget:"USD 5–10M",
    typology:"Whole floor",
    timeline:"Within 3 months",
    referral:"Broker",
    brokerName:"",
    message:"",
    consent:false,
    privacy:false,
    viewingDate:"",
    viewingTime:"11:00",
  });
  const [refNum] = useState(()=> "OMN-"+Math.random().toString(36).slice(2,8).toUpperCase());

  const set = (k,v)=> setData(d => ({ ...d, [k]:v }));

  const modes = [
    { id:"interest", label:"Register interest" },
    { id:"brochure", label:"Download brochure" },
    { id:"viewing", label:"Private viewing" },
  ];
  const totalSteps = mode === "viewing" ? 3 : 2;

  if (done) {
    return (
      <div className="reg-success">
        <div className="check" />
        <h3>Thank you, {data.firstName || "—"}.</h3>
        <p>
          {mode === "brochure" && "A senior representative will share The Alba brochure within one business day via the email you provided."}
          {mode === "interest" && "A senior representative will be in contact within one business day. Until then, the brochure has been queued to your email."}
          {mode === "viewing" && `Your private viewing is provisionally requested for ${data.viewingDate || "—"} at ${data.viewingTime}. We will confirm by ${data.email || "—"}.`}
        </p>
        <p className="ref">Reference · {refNum}</p>
      </div>
    );
  }

  const canStep1 = data.firstName && data.lastName && data.email && data.phone;
  const canStep2 = mode === "viewing" ? (data.viewingDate) : (data.consent && data.privacy);
  const canSubmit = data.consent && data.privacy;

  return (
    <div className="reg-form">
      <div className="seg" role="tablist">
        {modes.map(m => (
          <button key={m.id} role="tab"
            className={mode===m.id ? "is-active" : ""}
            onClick={()=>{ setMode(m.id); setStep(1); }}>
            {m.label}
          </button>
        ))}
      </div>

      <div className="reg-progress">
        {Array.from({length:totalSteps}).map((_,i)=>(
          <span key={i} className={i+1 <= step ? "is-active" : ""} />
        ))}
      </div>

      {step === 1 && (
        <div>
          <div className="field-row">
            <div className="field field-select-wrap">
              <label>Title</label>
              <select value={data.title} onChange={e=>set("title", e.target.value)}>
                <option>Mr</option><option>Mrs</option><option>Ms</option><option>Dr</option><option>HE / HH</option>
              </select>
            </div>
            <div className="field">
              <label>Nationality</label>
              <input value={data.nationality} onChange={e=>set("nationality", e.target.value)} placeholder="e.g. British" />
            </div>
          </div>
          <div className="field-row">
            <div className="field">
              <label>First name</label>
              <input value={data.firstName} onChange={e=>set("firstName", e.target.value)} placeholder="" />
            </div>
            <div className="field">
              <label>Last name</label>
              <input value={data.lastName} onChange={e=>set("lastName", e.target.value)} placeholder="" />
            </div>
          </div>
          <div className="field">
            <label>Email</label>
            <input type="email" value={data.email} onChange={e=>set("email", e.target.value)} placeholder="" />
          </div>
          <div className="field-row">
            <div className="field field-select-wrap" style={{maxWidth:120}}>
              <label>Code</label>
              <select value={data.phoneCode} onChange={e=>set("phoneCode", e.target.value)}>
                <option>+971</option><option>+44</option><option>+1</option><option>+7</option><option>+86</option><option>+966</option><option>+974</option><option>+33</option><option>+41</option>
              </select>
            </div>
            <div className="field">
              <label>Mobile</label>
              <input value={data.phone} onChange={e=>set("phone", e.target.value)} placeholder="" />
            </div>
          </div>

          <button className="reg-submit" disabled={!canStep1} onClick={()=> setStep(2)}>
            <span>Continue</span><span className="btn-arrow" />
          </button>
        </div>
      )}

      {step === 2 && mode !== "viewing" && (
        <div>
          <div className="field field-select-wrap">
            <label>Indicative budget · USD</label>
            <select value={data.budget} onChange={e=>set("budget", e.target.value)}>
              <option>USD 3–5M</option>
              <option>USD 5–10M</option>
              <option>USD 10–20M</option>
              <option>USD 20M+</option>
              <option>Prefer not to disclose</option>
            </select>
          </div>
          <div className="field field-select-wrap">
            <label>Preferred residence</label>
            <select value={data.typology} onChange={e=>set("typology", e.target.value)}>
              {project.residenceTypes.map(t => <option key={t.name}>{t.name}</option>)}
              <option>Open to recommendations</option>
            </select>
          </div>
          <div className="field-row">
            <div className="field field-select-wrap">
              <label>Timeline</label>
              <select value={data.timeline} onChange={e=>set("timeline", e.target.value)}>
                <option>Within 1 month</option>
                <option>Within 3 months</option>
                <option>Within 6 months</option>
                <option>Researching</option>
              </select>
            </div>
            <div className="field field-select-wrap">
              <label>Referred by</label>
              <select value={data.referral} onChange={e=>set("referral", e.target.value)}>
                <option>Broker</option><option>Architect / designer</option><option>Existing owner</option><option>Press / editorial</option><option>Direct</option>
              </select>
            </div>
          </div>
          {data.referral === "Broker" && (
            <div className="field">
              <label>Broker name / firm</label>
              <input value={data.brokerName} onChange={e=>set("brokerName", e.target.value)} />
            </div>
          )}
          <div className="field">
            <label>Anything to share</label>
            <textarea rows="2" value={data.message} onChange={e=>set("message", e.target.value)} placeholder="" />
          </div>
          <label className="checkbox">
            <input type="checkbox" checked={data.consent} onChange={e=>set("consent", e.target.checked)} />
            <span className="box" />
            <span>I consent to OMNIYAT contacting me about {project.name} and other suitable masterpieces.</span>
          </label>
          <label className="checkbox">
            <input type="checkbox" checked={data.privacy} onChange={e=>set("privacy", e.target.checked)} />
            <span className="box" />
            <span>I have read and agree to the <a>Privacy Policy</a>. My data will not be shared with third parties.</span>
          </label>
          <button className="reg-submit" disabled={!canSubmit} onClick={()=> setDone(true)}>
            <span>{mode === "brochure" ? "Receive brochure" : "Submit enquiry"}</span><span className="btn-arrow" />
          </button>
        </div>
      )}

      {step === 2 && mode === "viewing" && (
        <div>
          <div className="field field-select-wrap">
            <label>Preferred residence to view</label>
            <select value={data.typology} onChange={e=>set("typology", e.target.value)}>
              {project.residenceTypes.map(t => <option key={t.name}>{t.name}</option>)}
              <option>Open to recommendations</option>
            </select>
          </div>
          <div className="field-row">
            <div className="field">
              <label>Preferred date</label>
              <input type="date" value={data.viewingDate} onChange={e=>set("viewingDate", e.target.value)} />
            </div>
            <div className="field field-select-wrap">
              <label>Time</label>
              <select value={data.viewingTime} onChange={e=>set("viewingTime", e.target.value)}>
                <option>10:00</option><option>11:00</option><option>13:00</option><option>15:00</option><option>17:00</option>
              </select>
            </div>
          </div>
          <div className="field field-select-wrap">
            <label>Viewing format</label>
            <select defaultValue="Showroom & site walk">
              <option>Showroom & site walk</option>
              <option>Showroom only</option>
              <option>Private video walk-through</option>
            </select>
          </div>
          <button className="reg-submit" disabled={!data.viewingDate} onClick={()=> setStep(3)}>
            <span>Continue</span><span className="btn-arrow" />
          </button>
        </div>
      )}

      {step === 3 && (
        <div>
          <div style={{padding:"16px 0 24px", borderBottom:"1px solid var(--border)"}}>
            <div className="eyebrow" style={{marginBottom:14}}>Confirm</div>
            <div style={{fontSize:14, lineHeight:1.7, color:"var(--secondary)"}}>
              {data.title} {data.firstName} {data.lastName}<br/>
              {data.email} · {data.phoneCode} {data.phone}<br/>
              <span style={{color:"var(--muted)"}}>
                {data.typology} · {data.viewingDate} at {data.viewingTime}
              </span>
            </div>
          </div>
          <label className="checkbox" style={{marginTop:24}}>
            <input type="checkbox" checked={data.consent} onChange={e=>set("consent", e.target.checked)} />
            <span className="box" />
            <span>I consent to OMNIYAT contacting me to confirm and prepare for this viewing.</span>
          </label>
          <label className="checkbox">
            <input type="checkbox" checked={data.privacy} onChange={e=>set("privacy", e.target.checked)} />
            <span className="box" />
            <span>I have read and agree to the <a>Privacy Policy</a>.</span>
          </label>
          <button className="reg-submit" disabled={!canSubmit} onClick={()=> setDone(true)}>
            <span>Request private viewing</span><span className="btn-arrow" />
          </button>
        </div>
      )}

    </div>
  );
}

window.RegisterForm = RegisterForm;