// Screen 2 — Creator onboarding: identity & consent
const Onboarding = ({ onGoTo }) => {
  const [idFront, setIdFront] = React.useState(true);
  const [idBack, setIdBack] = React.useState(false);
  const [liveness, setLiveness] = React.useState(false);
  const [phone, setPhone] = React.useState("");
  const [code, setCode] = React.useState("");
  const [codeSent, setCodeSent] = React.useState(false);
  const [agreements, setAgreements] = React.useState({ adult: false, ownIdentity: false, retention: false });

  const allDone = idFront && idBack && liveness && code.length === 6 &&
    agreements.adult && agreements.ownIdentity && agreements.retention;

  const STEPS = [
    { id: 1, label: "Verify identity",  state: "active" },
    { id: 2, label: "Sign agreements",  state: "future" },
    { id: 3, label: "Set up profile",   state: "future" },
    { id: 4, label: "Upload material",  state: "future" },
    { id: 5, label: "Configure license",state: "future" },
  ];

  const SubStep = ({ num, title, body, status, children }) => (
    <div style={{
      border: "1px solid var(--lk-border)", borderRadius: 4, background: "#fff",
      display: "flex", gap: 18, padding: 22,
    }}>
      <span style={{
        flexShrink: 0, width: 28, height: 28, borderRadius: 999,
        background: status === "done" ? "var(--lk-success)" : "var(--lk-tint)",
        border: status === "done" ? "none" : "1px solid var(--lk-border)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        font: "600 13px/1 var(--font-mono)", color: status === "done" ? "#fff" : "var(--lk-muted)",
      }}>
        {status === "done" ? <i data-lucide="check" style={{ width: 14, height: 14 }}></i> : num}
      </span>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
        <span style={{ font: "600 15px/1.3 var(--font-sans)", color: "var(--lk-navy)" }}>{title}</span>
        {body && <span style={{ font: "400 13px/1.55 var(--font-sans)", color: "var(--lk-muted)" }}>{body}</span>}
        {children && <div style={{ marginTop: 10 }}>{children}</div>}
      </div>
    </div>
  );

  const ConsentRow = ({ k, label }) => (
    <label style={{ display: "flex", gap: 12, padding: "14px 0", borderTop: "1px solid var(--lk-border)", cursor: "pointer", alignItems: "flex-start" }}>
      <span style={{
        flexShrink: 0, marginTop: 2, width: 18, height: 18, borderRadius: 2,
        border: "1px solid " + (agreements[k] ? "var(--lk-terracotta)" : "var(--border-strong)"),
        background: agreements[k] ? "var(--lk-terracotta)" : "#fff",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        transition: "background 120ms",
      }}>
        {agreements[k] && <i data-lucide="check" style={{ width: 12, height: 12, color: "#fff" }}></i>}
      </span>
      <input type="checkbox" checked={agreements[k]} onChange={e => setAgreements(a => ({ ...a, [k]: e.target.checked }))} style={{ display: "none" }}/>
      <span style={{ font: "400 14px/1.5 var(--font-sans)", color: "var(--lk-navy)" }}>{label}</span>
    </label>
  );

  return (
    <div style={{ background: "#fff", minHeight: "100vh" }}>
      {/* Quiet top bar */}
      <header style={{ height: 64, borderBottom: "1px solid var(--lk-border)", display: "flex", alignItems: "center", padding: "0 32px", background: "#fff" }}>
        <Logo />
        <div style={{ flex: 1 }} />
        <span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--lk-muted)", marginRight: 16 }}>
          Need help? <a href="#" style={{ color: "var(--lk-terracotta)" }}>Talk to onboarding</a>
        </span>
        <button onClick={() => onGoTo("marketing")} style={{
          all: "unset", cursor: "pointer", font: "500 13px/1 var(--font-sans)", color: "var(--lk-muted)",
        }}>Save & exit</button>
      </header>

      <div style={{ maxWidth: 720, margin: "0 auto", padding: "56px 32px 96px" }}>
        {/* Progress */}
        <div style={{ display: "flex", alignItems: "center", gap: 0, marginBottom: 56 }}>
          {STEPS.map((s, i) => (
            <React.Fragment key={s.id}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, flexShrink: 0 }}>
                <span style={{
                  width: 26, height: 26, borderRadius: 999,
                  background: s.state === "active" ? "var(--lk-navy)" : "transparent",
                  border: s.state === "active" ? "none" : "1px solid var(--lk-border)",
                  color: s.state === "active" ? "#fff" : "var(--lk-muted)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  font: "600 12px/1 var(--font-mono)",
                }}>{s.id}</span>
                <span style={{
                  font: "500 11px/1.3 var(--font-sans)",
                  color: s.state === "active" ? "var(--lk-navy)" : "var(--lk-muted)",
                  whiteSpace: "nowrap",
                }}>{s.label}</span>
              </div>
              {i < STEPS.length - 1 && (
                <span style={{ flex: 1, height: 1, background: "var(--lk-border)", margin: "0 8px", marginBottom: 22 }}></span>
              )}
            </React.Fragment>
          ))}
        </div>

        <span className="lk-eyebrow">Step 1 of 5</span>
        <h1 style={{ font: "600 36px/1.15 var(--font-sans)", letterSpacing: "-0.02em", color: "var(--lk-navy)", margin: "10px 0 24px" }}>
          Identity verification.
        </h1>

        <p style={{ font: "400 15px/1.65 var(--font-sans)", color: "var(--lk-navy)", margin: "0 0 14px" }}>
          Before you can publish on Likeness, we need to verify your identity. This is a legal requirement
          for adult content platforms, and it is also how the platform protects your likeness — only verified
          people can be on the system.
        </p>
        <p style={{ font: "400 15px/1.65 var(--font-sans)", color: "var(--lk-navy)", margin: "0 0 36px" }}>
          You'll need a government-issued ID and access to a phone or webcam for a brief liveness check.
          The whole process usually takes about ten minutes.
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 16, marginBottom: 40 }}>
          <SubStep
            num="1"
            title="Government-issued ID"
            body="Front and back of a passport, driver's license, or state ID. Held for 7 years per recordkeeping requirements; not used for anything else."
            status={idFront && idBack ? "done" : "active"}
          >
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {[
                { side: "Front", state: idFront, set: setIdFront },
                { side: "Back",  state: idBack,  set: setIdBack  },
              ].map(s => (
                <button key={s.side} onClick={() => s.set(!s.state)} style={{
                  all: "unset", cursor: "pointer",
                  height: 116, border: "1px dashed " + (s.state ? "var(--lk-success)" : "var(--border-strong)"),
                  borderRadius: 4, background: s.state ? "var(--lk-success-bg)" : "var(--lk-tint)",
                  display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6,
                }}>
                  <i data-lucide={s.state ? "check-circle-2" : "upload"} style={{ width: 18, height: 18, color: s.state ? "var(--lk-success)" : "var(--lk-muted)" }}></i>
                  <span style={{ font: "500 13px/1 var(--font-sans)", color: s.state ? "var(--lk-success)" : "var(--lk-navy)" }}>
                    {s.state ? `${s.side} uploaded` : `Upload ${s.side.toLowerCase()}`}
                  </span>
                  <span style={{ font: "400 11px/1.4 var(--font-sans)", color: "var(--lk-muted)" }}>JPEG or PNG · 8MB max</span>
                </button>
              ))}
            </div>
          </SubStep>

          <SubStep
            num="2"
            title="Liveness check"
            body="A 5-second webcam check confirms the ID belongs to you. The video is destroyed after the match runs."
            status={liveness ? "done" : "active"}
          >
            <button onClick={() => setLiveness(true)} disabled={liveness} style={{
              all: "unset", cursor: liveness ? "default" : "pointer",
              display: "inline-flex", alignItems: "center", gap: 8,
              height: 36, padding: "0 14px", borderRadius: 4,
              background: liveness ? "var(--lk-tint)" : "#fff",
              border: "1px solid " + (liveness ? "var(--lk-border)" : "var(--border-strong)"),
              color: liveness ? "var(--lk-muted)" : "var(--lk-navy)",
              font: "500 13px/1 var(--font-sans)",
            }}>
              <i data-lucide={liveness ? "check" : "camera"} style={{ width: 14, height: 14 }}></i>
              {liveness ? "Liveness confirmed" : "Start liveness check"}
            </button>
          </SubStep>

          <SubStep
            num="3"
            title="Phone verification"
            body="A working phone number on file is required for account recovery and revocation alerts."
            status={code.length === 6 ? "done" : "active"}
          >
            <div style={{ display: "flex", gap: 8 }}>
              <input value={phone} onChange={e => setPhone(e.target.value)}
                placeholder="+1 (555) 123-4567"
                style={{
                  flex: 1, height: 36, padding: "0 12px",
                  border: "1px solid var(--lk-border)", borderRadius: 2,
                  font: "400 13px/1 var(--font-sans)", color: "var(--lk-navy)", outline: "none",
                }}/>
              <button onClick={() => setCodeSent(true)} disabled={!phone} style={{
                all: "unset", cursor: phone ? "pointer" : "not-allowed",
                height: 36, padding: "0 14px", borderRadius: 4,
                background: phone ? "#fff" : "var(--lk-tint)",
                border: "1px solid var(--border-strong)",
                color: phone ? "var(--lk-navy)" : "var(--lk-muted)",
                font: "500 13px/1 var(--font-sans)",
              }}>{codeSent ? "Resend code" : "Send code"}</button>
            </div>
            {codeSent && (
              <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
                <input value={code} onChange={e => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
                  placeholder="6-digit code"
                  style={{
                    flex: 1, height: 36, padding: "0 12px",
                    border: "1px solid var(--lk-border)", borderRadius: 2,
                    font: "500 14px/1 var(--font-mono)", color: "var(--lk-navy)", outline: "none",
                    letterSpacing: "0.2em",
                  }}/>
                <span style={{ font: "400 12px/36px var(--font-sans)", color: "var(--lk-muted)" }}>
                  We sent a code to {phone}
                </span>
              </div>
            )}
          </SubStep>
        </div>

        {/* Consent block */}
        <div style={{ border: "1px solid var(--lk-border)", borderRadius: 4, padding: 24, background: "var(--lk-tint)" }}>
          <h2 style={{ font: "600 17px/1.3 var(--font-sans)", color: "var(--lk-navy)", margin: "0 0 4px" }}>What you're agreeing to</h2>
          <p style={{ font: "400 13px/1.55 var(--font-sans)", color: "var(--lk-muted)", margin: "0 0 8px" }}>
            Three things, in plain English. The full creator agreement comes in the next step.
          </p>
          <ConsentRow k="adult"       label="I confirm I am 18 or older."/>
          <ConsentRow k="ownIdentity" label="I confirm the identity I'm verifying is my own."/>
          <ConsentRow k="retention"   label="I understand my information is held according to U.S. recordkeeping requirements (18 U.S.C. § 2257) and will be retained as required by law."/>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32 }}>
          <button onClick={() => onGoTo("marketing")} style={{
            all: "unset", cursor: "pointer", font: "500 13px/1 var(--font-sans)", color: "var(--lk-muted)",
            display: "inline-flex", alignItems: "center", gap: 6,
          }}>
            <i data-lucide="chevron-left" style={{ width: 14, height: 14 }}></i>
            Back
          </button>
          <button onClick={() => allDone && onGoTo("dashboard")} disabled={!allDone} style={{
            all: "unset", cursor: allDone ? "pointer" : "not-allowed",
            height: 44, padding: "0 22px", borderRadius: 4,
            background: allDone ? "var(--lk-navy)" : "var(--lk-tint)",
            color: allDone ? "#fff" : "var(--lk-muted)",
            font: "500 14px/1 var(--font-sans)",
            display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            Continue to agreements
            <i data-lucide="arrow-right" style={{ width: 14, height: 14 }}></i>
          </button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Onboarding });