/* flow2.jsx — Income · Checks (screening) · Security (Face ID + Passkey). */

const SubHead = ({ children, style }) => (
  <div style={{ marginTop: 22, marginBottom: 11, ...style }}><Eyebrow color="var(--ink-2)">{children}</Eyebrow></div>
);

const Pill = ({ on, children, onClick }) => (
  <button className="press" onClick={onClick} style={{
    padding: "10px 14px", cursor: "pointer", borderRadius: 999,
    background: on ? "var(--bg-card)" : "var(--bg-2)",
    border: `1px solid ${on ? "var(--ink)" : "var(--rule-2)"}`,
    fontFamily: "var(--f-display)", fontSize: 13.5, fontWeight: 600, letterSpacing: "-0.01em", whiteSpace: "nowrap",
    color: on ? "var(--ink)" : "var(--ink-2)" }}>{children}</button>
);

/* Faux document upload — dashed dropzone → uploaded chip with remove. */
const UploadBox = ({ value, label, hint, onPick, onClear }) => (
  value ? (
    <div className="yo-enter" style={{ display: "flex", alignItems: "center", gap: 13, padding: "13px 14px", background: "var(--bg-card)", border: "1px solid var(--accent)", borderRadius: 12 }}>
      <span style={{ width: 38, height: 38, flex: "none", borderRadius: 10, border: "1px solid var(--accent)", display: "grid", placeItems: "center", color: "var(--accent)" }}><Icon name="doc" size={20} color="var(--accent)" /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: "var(--f-display)", fontSize: 14, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{value}</div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 5, marginTop: 2 }}>
          <Icon name="check" size={12} stroke={2.4} color="var(--accent)" />
          <span style={{ fontFamily: "var(--f-display)", fontSize: 11, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--accent)" }}>Uploaded</span>
        </div>
      </div>
      <button className="press" onClick={onClear} aria-label="Remove" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--ink-3)", display: "flex", padding: 4 }}><Icon name="close" size={18} color="var(--ink-3)" /></button>
    </div>
  ) : (
    <button className="press" onClick={onPick} style={{ width: "100%", display: "flex", alignItems: "center", gap: 13, padding: "16px 15px", background: "var(--bg-2)", border: "1px dashed var(--rule-2)", borderRadius: 12, cursor: "pointer", textAlign: "left" }}>
      <span style={{ width: 38, height: 38, flex: "none", display: "grid", placeItems: "center", color: "var(--accent)" }}><Icon name="download" size={22} color="var(--accent)" /></span>
      <span style={{ flex: 1 }}>
        <span style={{ display: "block", fontFamily: "var(--f-display)", fontSize: 14.5, fontWeight: 600 }}>{label}</span>
        <span style={{ display: "block", fontFamily: "var(--f-display)", fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{hint}</span>
      </span>
    </button>
  )
);

/* =============================================================
   iMessage banner — a fake iOS notification that drops down from
   the top of the screen mid-flow: Yoshi texts the freshly-verified
   number. Rendered as authentic OS chrome (system font, light
   frosted material, green Messages glyph) — not a Yoshi surface.
   Slides in, lingers, then auto-dismisses (tap to dismiss).
   ============================================================= */
const MessagesGlyph = () => (
  <span style={{ width: 21, height: 21, flex: "none", borderRadius: 5, display: "grid", placeItems: "center",
    background: "linear-gradient(180deg, #5BF675 0%, #1FD24A 100%)" }}>
    <svg width="13" height="13" viewBox="0 0 24 24" style={{ display: "block" }}>
      <path fill="#fff" d="M12 3C6.9 3 3 6.6 3 11c0 2.5 1.3 4.7 3.3 6.1 0 .9-.5 2.2-1.3 3.2-.2.2 0 .6.3.5 1.9-.4 3.3-1.1 4.1-1.6.7.2 1.6.3 2.3.3 5.1 0 9-3.6 9-8S17.1 3 12 3z" />
    </svg>
  </span>
);

const IOS_UI = '-apple-system, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", sans-serif';

const IMessageBanner = ({ phone }) => {
  const [shown, setShown] = useState(false);
  const [gone, setGone] = useState(false);
  useEffect(() => {
    const tIn = setTimeout(() => setShown(true), 700);
    const tOut = setTimeout(() => setShown(false), 7000);
    const tGone = setTimeout(() => setGone(true), 7700);
    return () => { clearTimeout(tIn); clearTimeout(tOut); clearTimeout(tGone); };
  }, []);
  if (gone) return null;
  return (
    <div
      onClick={() => setShown(false)}
      style={{
        position: "absolute", top: 12, left: 9, right: 9, zIndex: 40, cursor: "pointer",
        transform: shown ? "translateY(0)" : "translateY(-160%)",
        opacity: shown ? 1 : 0,
        transition: "transform 540ms cubic-bezier(0.22,1.08,0.36,1), opacity 300ms ease",
        background: "rgba(247,247,247,0.82)",
        WebkitBackdropFilter: "blur(24px) saturate(1.4)", backdropFilter: "blur(24px) saturate(1.4)",
        borderRadius: 24,
        boxShadow: "0 16px 38px -10px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.10)",
        padding: "13px 15px 14px",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
        <MessagesGlyph />
        <span style={{ fontFamily: IOS_UI, fontSize: 12, fontWeight: 600, letterSpacing: "0.03em", textTransform: "uppercase", color: "#8a8a8e" }}>Messages</span>
        <span style={{ marginLeft: "auto", fontFamily: IOS_UI, fontSize: 12.5, color: "#8a8a8e" }}>now</span>
      </div>
      <div style={{ fontFamily: IOS_UI, fontSize: 15, fontWeight: 600, color: "#000", letterSpacing: "-0.01em", marginBottom: 1 }}>Yoshi</div>
      <div style={{ fontFamily: IOS_UI, fontSize: 14.5, color: "#1c1c1e", lineHeight: 1.32, textWrap: "pretty" }}>
        Hey, it's Yoshi! Text me anytime to chat about your finances wherever you are.
      </div>
    </div>
  );
};

/* =============================================================
   05 · INCOME — "How do you earn?"  (net worth removed;
   annual income is a ranged dropdown using the former NW bands)
   ============================================================= */
const STATUSES = ["Employed", "Self-employed", "Retired", "Student", "Not employed"];
const SOURCES = ["Salary", "Self-employed", "Investments", "Retirement", "Gifts", "Other"];
const INCOME_BANDS = ["Under $50,000", "$50,000 – $250,000", "$250,000 – $1,000,000", "Over $1,000,000"];

const Income = ({ data, setData, phone, onNext }) => {
  const set = (k) => (v) => setData((d) => ({ ...d, [k]: v }));
  const [showContact, setShowContact] = useState(false);
  const employed = data.status === "Employed";
  const selfEmp = data.status === "Self-employed";
  const ready = data.status && data.source && data.incomeBand;
  return (
    <Screen style={{ position: "relative" }}>
      <Body>
        <H>How do you<Brk /><Accent>earn?</Accent></H>
        <Sub>We need to ask this for regulatory purposes.</Sub>

        <SubHead>Employment status</SubHead>
        <Select value={data.status} onChange={set("status")} options={STATUSES} placeholder="Choose one" />

        {employed && (
          <div className="yo-enter" style={{ marginTop: 14, display: "grid", gap: 14 }}>
            <Field label="Employer" value={data.company} onChange={set("company")} placeholder="Where you work" />
            <Field label="Job title" value={data.title2} onChange={set("title2")} placeholder="Your position" />
          </div>
        )}
        {selfEmp && (
          <div className="yo-enter" style={{ marginTop: 14 }}>
            <Field label="Business name" value={data.company} onChange={set("company")} placeholder="Your business or DBA" />
          </div>
        )}

        <SubHead>Main income source</SubHead>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {SOURCES.map((s) => <Pill key={s} on={data.source === s} onClick={() => set("source")(s)}>{s}</Pill>)}
        </div>

        <SubHead>Annual income, before tax</SubHead>
        <Select value={data.incomeBand} onChange={set("incomeBand")} options={INCOME_BANDS} placeholder="Select a range" />

        {/* Optional · trusted contact — a compact checkbox that drops down the
            fields when ticked. Never gates Continue. */}
        <div style={{ marginTop: 16 }}>
          <button className="press" onClick={() => setShowContact((v) => !v)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "4px 2px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}>
            <span style={{ width: 20, height: 20, flex: "none", borderRadius: 6, border: `1.5px solid ${showContact ? "var(--accent)" : "var(--rule-2)"}`, background: showContact ? "var(--accent)" : "transparent", display: "grid", placeItems: "center", transition: "background 160ms ease, border-color 160ms ease" }}>
              {showContact && <Icon name="check" size={13} stroke={2.4} color="var(--accent-ink)" />}
            </span>
            <span style={{ fontFamily: "var(--f-display)", fontSize: 10, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-2)" }}>Add a trusted contact <span style={{ color: "var(--ink-3)" }}>· optional</span></span>
          </button>
          {showContact && (
            <div className="yo-enter" style={{ display: "grid", gap: 12, marginTop: 12 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <Field label="First name" value={data.tcFirst || ""} onChange={set("tcFirst")} placeholder="First" />
                <Field label="Last name" value={data.tcLast || ""} onChange={set("tcLast")} placeholder="Last" />
              </div>
              <Field label="Email" value={data.tcEmail || ""} onChange={set("tcEmail")} placeholder="name@email.com" inputMode="email" />
            </div>
          )}
        </div>
      </Body>
      <Dock>
        <Btn full disabled={!ready} onClick={onNext}>Continue <Icon name="arrow" size={15} color={ready ? "var(--accent-ink)" : "var(--ink-3)"} /></Btn>
      </Dock>
    </Screen>
  );
};

/* =============================================================
   06 · CHECKS — PEP / affiliation screening (kept as-is)
   ============================================================= */
const SCREEN_OPTS = [
  { id: "insider", text: "I, or a family member, am a 10% shareholder or senior executive at a publicly traded company." },
  { id: "finra",   text: "I, or a family member, work for a securities exchange, FINRA, or a registered brokerage firm." },
  { id: "pep",     text: "I, or a family member, am a politically exposed person (PEP) or public official, such as a head of state, diplomat, judge, or government official." },
];

const Checks = ({ data, setData, onNext }) => {
  const flags = data.flags || {};
  const none = data.none;
  const toggle = (id) => setData((d) => ({ ...d, none: false, flags: { ...(d.flags || {}), [id]: !(d.flags || {})[id] } }));
  const pickNone = () => setData((d) => ({ ...d, none: true, flags: {} }));
  const any = Object.values(flags).some(Boolean);
  const needsDoc = flags.finra && !data.finraDoc;
  const needsInsider = flags.insider && !(data.company2 || "").trim();
  const needsPep = flags.pep && !((data.pepOrg || "").trim() || (data.pepName || "").trim());
  const ready = (none || any) && !needsDoc && !needsInsider && !needsPep;
  return (
    <Screen>
      <Body>
        <H>A couple of<Brk /><Accent>checks.</Accent></H>
        <Sub>Select anything that applies to you or a family member. If you're not sure, it probably doesn't.</Sub>

        <div style={{ marginTop: 18, display: "grid", gap: 9 }}>
          <Choice on={none} onClick={pickNone} title="None of these apply" />
          <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "2px 0" }}>
            <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
            <span style={{ fontFamily: "var(--f-display)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", color: "var(--ink-3)" }}>OR</span>
            <span style={{ flex: 1, height: 1, background: "var(--rule)" }} />
          </div>
          {SCREEN_OPTS.map((o) => (
            <Choice key={o.id} multi light on={!!flags[o.id]} onClick={() => toggle(o.id)} title={o.text} />
          ))}
        </div>

        {flags.insider && (
          <div className="yo-enter" style={{ marginTop: 16 }}>
            <SubHead style={{ marginTop: 4 }}>Which public company?</SubHead>
            <Field value={data.company2 || ""} onChange={(v) => setData((d) => ({ ...d, company2: v }))} placeholder="Ticker" />
          </div>
        )}
        {flags.finra && (
          <div className="yo-enter" style={{ marginTop: 16 }}>
            <SubHead style={{ marginTop: 4 }}>Required document</SubHead>
            <div style={{ fontFamily: "var(--f-display)", fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 11 }}>
              FINRA rules require a compliance authorization (a 407 letter) from your employer before we can open a brokerage account.
            </div>
            <UploadBox value={data.finraDoc} label="Upload your 407 letter" hint="PDF, JPG or PNG · up to 10 MB"
              onPick={() => setData((d) => ({ ...d, finraDoc: "407-letter.pdf" }))}
              onClear={() => setData((d) => ({ ...d, finraDoc: null }))} />
          </div>
        )}

        {flags.pep && (
          <div className="yo-enter" style={{ marginTop: 16 }}>
            <SubHead style={{ marginTop: 4 }}>Political organization</SubHead>
            <Field value={data.pepOrg || ""} onChange={(v) => setData((d) => ({ ...d, pepOrg: v }))} placeholder="Organization name" />
            <SubHead>Exposed person's full name</SubHead>
            <Field value={data.pepName || ""} onChange={(v) => setData((d) => ({ ...d, pepName: v }))} placeholder="Full legal name" />
          </div>
        )}

        <Disclosure>We're required to ask for regulatory purposes.</Disclosure>
      </Body>
      <Dock>
        <Btn full disabled={!ready} onClick={onNext}>Continue <Icon name="arrow" size={15} color={ready ? "var(--accent-ink)" : "var(--ink-3)"} /></Btn>
      </Dock>
    </Screen>
  );
};

/* =============================================================
   07 · SECURITY — Passkey + push notifications.
   Passkey is the phishing-proof credential; notifications are
   optional — user can proceed after passkey if they prefer.
   ============================================================= */
const SecButton = ({ icon, label, doneLabel, state, onCreate, required }) => {
  const creating = state === "creating";
  const done = state === "done";
  return (
    <button className="press" disabled={creating || done} onClick={onCreate} style={{
      width: "100%", display: "flex", alignItems: "center", gap: 10, minHeight: 56,
      padding: "15px 18px", borderRadius: 12, cursor: creating || done ? "default" : "pointer",
      background: done ? "color-mix(in srgb, var(--accent) 10%, var(--bg-2))" : "var(--bg-2)",
      border: `1px solid ${done ? "var(--accent)" : "var(--rule-2)"}`,
      color: done ? "var(--accent)" : "var(--ink)",
      fontFamily: "var(--f-display)", fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em",
      transition: "background 240ms ease, border-color 240ms ease, color 240ms ease" }}>
      {creating ? (
        <><LiveDot size={6} /><span>Setting up…</span></>
      ) : done ? (
        <><Icon name="check" size={18} stroke={2.2} color="var(--accent)" /><span>{doneLabel}</span></>
      ) : (
        <>{icon}<span style={{ whiteSpace: "nowrap" }}>{label}</span>{required && (
          <span style={{ marginLeft: "auto", fontSize: 12, fontWeight: 500, letterSpacing: "-0.005em", color: "var(--ink-3)" }}>Required</span>
        )}</>
      )}
    </button>
  );
};

/* Bell glyph for notifications row */
const BellGlyph = ({ color, size = 19 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "block" }}>
    <path d="M12 3C8.7 3 6 5.7 6 9v5l-1.5 2H19.5L18 14V9c0-3.3-2.7-6-6-6z" stroke={color} strokeWidth="1.6" strokeLinejoin="round" />
    <path d="M10 19a2 2 0 0 0 4 0" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
  </svg>
);

/* Toggle row for push notifications */
const NotifToggle = ({ on, onToggle }) => {
  const web = usePlatform() === "web";
  const offLabel = web ? "Enable browser notifications" : "Turn on push notifications";
  const handle = () => {
    if (web && !on && typeof Notification !== "undefined" && Notification.requestPermission) {
      try { Notification.requestPermission(); } catch (e) {}
    }
    onToggle();
  };
  return (
  <button className="press" onClick={handle} style={{
    width: "100%", display: "flex", alignItems: "center", gap: 13, minHeight: 56,
    padding: "15px 18px", borderRadius: 12, cursor: "pointer",
    background: on ? "color-mix(in srgb, var(--accent) 10%, var(--bg-2))" : "var(--bg-2)",
    border: `1px solid ${on ? "var(--accent)" : "var(--rule-2)"}`,
    color: on ? "var(--accent)" : "var(--ink)",
    fontFamily: "var(--f-display)", fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em",
    transition: "background 240ms ease, border-color 240ms ease, color 240ms ease",
    textAlign: "left" }}>
    <BellGlyph color={on ? "var(--accent)" : "var(--ink-2)"} size={19} />
    <span style={{ flex: 1 }}>{on ? "Notifications on" : offLabel}</span>
    {/* toggle pill */}
    <span style={{
      width: 44, height: 26, flex: "none", borderRadius: 999,
      background: on ? "var(--accent)" : "var(--rule-2)",
      position: "relative", transition: "background 220ms ease", display: "block" }}>
      <span style={{
        position: "absolute", top: 3, left: on ? 21 : 3,
        width: 20, height: 20, borderRadius: 999, background: "var(--bg-card)",
        transition: "left 220ms cubic-bezier(0.16,1,0.30,1)",
        boxShadow: "0 1px 3px rgba(0,0,0,0.2)" }} />
    </span>
  </button>
  );
};

const Security = ({ onNext }) => {
  const secWeb = usePlatform() === "web";
  const [pass, setPass] = useState("idle");   // idle → creating → done
  const [notifs, setNotifs] = useState(false);

  const makePass = () => {
    setPass("creating");
    setTimeout(() => setPass("done"), 1500);
  };

  return (
    <Screen>
      <Body>
        <H>Ways to<Brk />stay <Accent>secure.</Accent></H>
        <Sub style={{ maxWidth: secWeb ? "none" : undefined, whiteSpace: secWeb ? "nowrap" : undefined }}>Money moves safely on Yoshi. Creating a passkey replaces a password. It's stored on your device and can't be phished or reused.</Sub>

        <div style={{ display: "grid", gap: 11, marginTop: 22 }}>
          <SecButton icon={<Icon name="shield" size={18} color="var(--ink-2)" />}
            label="Create passkey" doneLabel="Passkey on" state={pass} onCreate={makePass} required />
          <NotifToggle on={notifs} onToggle={() => setNotifs(n => !n)} />
        </div>

        <Disclosure>Your passkey is stored securely in your device keychain. Notifications are optional and you can enable them later in settings.</Disclosure>
      </Body>
      <Dock>
        <Btn full disabled={pass !== "done"} onClick={onNext}>Continue <Icon name="arrow" size={15} color={pass === "done" ? "var(--accent-ink)" : "var(--ink-3)"} /></Btn>
      </Dock>
    </Screen>
  );
};

Object.assign(window, { SubHead, Pill, Income, Checks, Security, IMessageBanner });