const SignupModal = ({ open, onClose, accent }) => {
  const [state, setState] = React.useState({
    name:"", email:"", studio:"", role:"", game:"", goal:"testing",
  });
  const [sent, setSent] = React.useState(false);

  React.useEffect(()=>{
    const h = (e)=>{ if(e.key==="Escape") onClose(); };
    window.addEventListener("keydown", h);
    return ()=>window.removeEventListener("keydown", h);
  },[onClose]);

  const [submitting, setSubmitting] = React.useState(false);

  const submit = async (e)=>{
    e.preventDefault();
    setSubmitting(true);
    try {
      await fetch("/api/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(state),
      });
    } catch(e){}
    setSubmitting(false);
    setSent(true);
  };

  if (!open) return null;

  return (
    <div className={`modal-backdrop on`} onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">✕</button>
        {sent ? (
          <div className="modal-body" style={{textAlign:"center",padding:"64px 36px"}}>
            <div style={{width:80,height:80,borderRadius:"50%",background:`var(--${accent})`,border:"2px solid var(--ink)",margin:"0 auto 24px",display:"flex",alignItems:"center",justifyContent:"center",fontSize:36}}>✓</div>
            <h3 className="display" style={{fontSize:36,marginBottom:12}}>You're on the list.</h3>
            <p style={{color:"var(--ink-soft)",fontSize:16,marginBottom:28,textWrap:"pretty"}}>We'll email <b>{state.email}</b> within 2 business days with next steps for uploading <b>{state.game||"your game"}</b>.</p>
            <button className="btn ghost" onClick={onClose}>Back to site</button>
          </div>
        ) : (
          <div className="modal-body">
            <div className="eyebrow" style={{color:`var(--${accent})`,marginBottom:10}}>● Now onboarding publishers</div>
            <h3 className="display" style={{fontSize:36,marginBottom:6}}>Get early access</h3>
            <p style={{color:"var(--ink-soft)",fontSize:15,marginBottom:24}}>We're onboarding publishers now. Leave your details.</p>

            <form onSubmit={submit}>
              <div className="field-row">
                <div className="field">
                  <label>Name</label>
                  <input required value={state.name} onChange={e=>setState({...state,name:e.target.value})} placeholder="Alex Rivera"/>
                </div>
                <div className="field">
                  <label>Work email</label>
                  <input required type="email" value={state.email} onChange={e=>setState({...state,email:e.target.value})} placeholder="alex@studio.gg"/>
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>Studio / publisher</label>
                  <input required value={state.studio} onChange={e=>setState({...state,studio:e.target.value})} placeholder="Kite Games"/>
                </div>
                <div className="field">
                  <label>Role</label>
                  <select required value={state.role} onChange={e=>setState({...state,role:e.target.value})}>
                    <option value="">Select…</option>
                    <option>Founder / GM</option>
                    <option>UA manager</option>
                    <option>Producer</option>
                    <option>Marketing lead</option>
                    <option>Developer</option>
                    <option>Other</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Game name or store link</label>
                <input required value={state.game} onChange={e=>setState({...state,game:e.target.value})} placeholder="Blockshift — or https://apps.apple.com/…"/>
              </div>
              <div className="field">
                <label>Primary goal</label>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8,marginTop:4}}>
                  {[
                    {k:"testing",l:"Concept testing"},
                    {k:"ua",l:"User acquisition"},
                    {k:"both",l:"Both"},
                  ].map(o=>(
                    <button type="button" key={o.k} onClick={()=>setState({...state,goal:o.k})}
                      style={{padding:"12px 10px",border:"2px solid var(--ink)",borderRadius:12,fontWeight:600,fontSize:14,background:state.goal===o.k?"var(--ink)":"var(--paper)",color:state.goal===o.k?"var(--cream)":"var(--ink)"}}>
                      {o.l}
                    </button>
                  ))}
                </div>
              </div>

              <button type="submit" disabled={submitting} className="btn primary" style={{marginTop:18,width:"100%",justifyContent:"center",background:`var(--${accent})`,opacity:submitting?0.7:1}}>
                {submitting ? "Sending…" : <>Request access <span className="arrow">→</span></>}
              </button>
              <div style={{marginTop:14,fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:"var(--ink-mute)",textAlign:"center"}}>
                We only email about Crayon. No shared lists.
              </div>
            </form>
          </div>
        )}
      </div>
    </div>
  );
};

window.SignupModal = SignupModal;