/* waitlist.jsx — modal dialog
   Single simple form: email + accredited checkbox. Includes default, hover,
   focus, error, and success states (the artboard shows them stacked).
*/

function WaitlistField({ label, hint, error, state, children }) {
  const ringColor =
    state === "error"   ? "var(--danger)" :
    state === "focus"   ? "var(--accent)" :
                          "var(--line-strong)";
  return (
    <label style={{ display:"flex", flexDirection:"column", gap:8 }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline" }}>
        <span className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>
          {label}
        </span>
        {hint && <span className="mono" style={{ fontSize:10, color:"var(--text-4)" }}>{hint}</span>}
      </div>
      <div style={{
        display:"flex", alignItems:"center",
        border:"1px solid " + ringColor,
        background: state === "focus" ? "var(--bg-elev-3)" : "var(--bg-elev-2)",
        borderRadius:"var(--r-3)",
        padding:"0 14px", height:44,
        boxShadow: state === "focus" ? "0 0 0 3px var(--accent-soft)" : "none",
        transition:"border-color .12s, box-shadow .12s",
      }}>
        {children}
      </div>
      {error && (
        <span style={{ fontSize:11, color:"var(--danger)", fontFamily:"var(--font-mono)", letterSpacing:"0.02em" }}>
          → {error}
        </span>
      )}
    </label>
  );
}

function WaitlistDialog({ state = "default" }) {
  const isSuccess = state === "success";
  const errorEmail = state === "error" ? "Please enter a valid email address." : null;

  return (
    <div style={{
      width:480,
      background:"var(--bg-elev-1)",
      border:"1px solid var(--line-strong)",
      borderRadius:"var(--r-4)",
      boxShadow:"0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--line) inset",
      overflow:"hidden",
      display:"flex", flexDirection:"column",
    }}>
      {/* Header */}
      <div style={{ padding:"22px 26px 18px", borderBottom:"1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
        <div style={{ display:"flex", flexDirection:"column", gap:6 }}>
          <div className="eyebrow"><span className="slash">/</span><span>Waitlist · vault access</span></div>
          <h3 style={{ margin:0, fontFamily:"var(--font-display)", fontSize:22, fontWeight:500, letterSpacing:"-0.015em", lineHeight:1.15, color:"var(--text)" }}>
            {isSuccess ? "You're on the list." : "Join the dvUSDCx waitlist"}
          </h3>
        </div>
        <button aria-label="Close" style={{
          width:28, height:28, border:"1px solid var(--line-strong)", background:"transparent",
          borderRadius:"var(--r-2)", color:"var(--text-3)", display:"inline-flex",
          alignItems:"center", justifyContent:"center", cursor:"pointer", flexShrink:0,
        }}>
          <svg width="11" height="11" viewBox="0 0 11 11"><path d="M1 1l9 9M10 1L1 10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
        </button>
      </div>

      {/* Body */}
      <div style={{ padding:"22px 26px 24px", display:"flex", flexDirection:"column", gap:18 }}>
        {!isSuccess && (
          <p style={{ margin:0, fontSize:13, color:"var(--text-2)", lineHeight:1.55 }}>
            We'll email you when the vault opens to deposits and when the marketplace tier accepts accreditation. No drip campaigns.
          </p>
        )}

        {isSuccess ? (
          <div style={{ display:"flex", flexDirection:"column", gap:14, padding:"20px 18px", background:"var(--accent-soft)", border:"1px solid var(--accent-line)", borderRadius:"var(--r-3)" }}>
            <div style={{ display:"flex", alignItems:"center", gap:10 }}>
              <span style={{ width:20, height:20, borderRadius:"50%", background:"var(--accent)", color:"var(--text-on-acc)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}>
                <Icon.check />
              </span>
              <span style={{ fontSize:14, color:"var(--text)", fontWeight:600 }}>Email confirmed: ana.sosa@founders.fund</span>
            </div>
            <div style={{ fontSize:12, color:"var(--text-2)", lineHeight:1.55 }}>
              You're flagged for accreditation. We'll send a Persona link when the marketplace shelf opens to verify investors.
            </div>
          </div>
        ) : (
          <>
            <WaitlistField label="Email" state={state === "focus" ? "focus" : state === "error" ? "error" : "default"} error={errorEmail}>
              <input
                placeholder="you@firm.com"
                defaultValue={state === "focus" ? "ana.sosa@founders.fund" : state === "error" ? "ana.sosa@founders" : ""}
                style={{
                  flex:1, background:"transparent", border:"none", outline:"none",
                  color:"var(--text)", fontFamily:"var(--font-sans)", fontSize:14,
                  letterSpacing:"-0.005em",
                }}
              />
            </WaitlistField>

            <label style={{ display:"flex", gap:10, cursor:"pointer", paddingTop:4, alignItems:"flex-start" }}>
              <span style={{
                width:18, height:18, flexShrink:0, marginTop:1,
                border:"1px solid " + (state === "focus" ? "var(--accent)" : "var(--line-strong)"),
                background: state === "focus" ? "var(--accent)" : "var(--bg-elev-2)",
                borderRadius:"var(--r-2)",
                display:"inline-flex", alignItems:"center", justifyContent:"center",
                color: "var(--text-on-acc)",
              }}>
                {(state === "focus" || state === "success") && <Icon.check />}
              </span>
              <div style={{ display:"flex", flexDirection:"column", gap:3 }}>
                <span style={{ fontSize:13, color:"var(--text)", letterSpacing:"-0.005em" }}>
                  I am an accredited investor
                </span>
                <span style={{ fontSize:11, color:"var(--text-3)", lineHeight:1.5 }}>
                  Required for the marketplace tier (dvFOBXX, dvHQLAX, dvDLR, dvCredit-A). Optional for the core vault.
                </span>
              </div>
            </label>
          </>
        )}
      </div>

      {/* Footer / actions */}
      {!isSuccess && (
        <div style={{ padding:"16px 26px 22px", borderTop:"1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"center", gap:12 }}>
          <span className="mono" style={{ fontSize:10, color:"var(--text-4)", letterSpacing:"0.04em" }}>
            We don't share your email. Ever.
          </span>
          <div style={{ display:"flex", gap:10 }}>
            <button className="btn btn-secondary" style={{ height:36, fontSize:13 }}>Cancel</button>
            <button className="btn btn-primary" style={{ height:36, fontSize:13 }}>
              Join waitlist <Icon.arrow />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// All four dialog states laid out vertically on one artboard.
function WaitlistStates() {
  return (
    <div className="ditto-root" style={{
      width:"100%", height:"100%", background:"var(--bg)",
      padding:"40px 40px 32px",
      display:"flex", flexDirection:"column", gap:28,
      overflow:"auto",
    }}>
      <div style={{ display:"flex", flexDirection:"column", gap:6 }}>
        <div className="eyebrow"><span className="num">·</span><span>Waitlist dialog · states</span></div>
        <h2 style={{ margin:0, fontFamily:"var(--font-display)", fontSize:24, fontWeight:500, letterSpacing:"-0.015em", color:"var(--text)" }}>
          Default → focus → error → success
        </h2>
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:28 }}>
        <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
          <div className="mono" style={{ fontSize:10, color:"var(--text-3)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Default</div>
          <WaitlistDialog state="default" />
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
          <div className="mono" style={{ fontSize:10, color:"var(--accent)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Focus / filled</div>
          <WaitlistDialog state="focus" />
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
          <div className="mono" style={{ fontSize:10, color:"var(--danger)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Error</div>
          <WaitlistDialog state="error" />
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
          <div className="mono" style={{ fontSize:10, color:"var(--accent)", letterSpacing:"0.06em", textTransform:"uppercase" }}>Success</div>
          <WaitlistDialog state="success" />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WaitlistDialog, WaitlistStates });