// onboarding.jsx - a single welcome screen (account kind + language), then straight
// into the chat-first app. We deliberately do NOT pre-fill sample assets or run a
// category quiz: those seeded a fake vault the user never actually owned (the real
// vault loads empty after "Enter"), which was misleading. The user builds their
// real VaultLog by talking to Cova, whose fresh-vault greeting invites exactly that.
const { useState: useStateO, useEffect: useEffectO } = React;

function Onboarding({ profile, userName, logoV, onComplete, onBack, lang = "en", setLang, langs = [] }) {
  const { t } = window.useT();

  return (
    <div style={{ height: "100%", overflowY: "auto", background: "var(--hero-grad)", display: "flex", flexDirection: "column" }}>
      {/* top bar */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "20px 32px" }}>
        <window.Logo variant={logoV} size={28} />
        <button onClick={onBack} style={{ fontSize: 13.5, fontWeight: 600, color: "var(--text-muted)" }}>{t("common.back")}</button>
      </div>

      <div style={{ flex: 1, display: "grid", placeItems: "center", padding: "10px 24px 40px" }}>
        {/* Single welcome — then straight into the chat-first app. No fake starter
            assets and no category quiz: the user builds their REAL vault by talking
            to Cova (whose fresh-vault greeting already invites exactly that). */}
        {(
          <div style={{ maxWidth: 560, textAlign: "center", animation: "vc-fade-up .5s var(--ease) both" }}>
            <span style={{ display: "inline-grid", placeItems: "center", width: 72, height: 72, borderRadius: 22, background: "linear-gradient(135deg,var(--accent-2),var(--accent))", color: "#fff", boxShadow: "var(--shadow-glow)", animation: "vc-float 5s ease-in-out infinite" }}><window.Icon name={profile === "business" ? "building" : "user"} size={36} /></span>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 7, marginTop: 22, padding: "5px 13px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)", fontSize: 12.5, fontWeight: 700, color: "var(--accent-ink)" }}>
              <window.Icon name={profile === "business" ? "building" : "user"} size={14} />{profile === "business" ? t("onb.businessAccount") : t("onb.personalAccount")}
            </div>
            <h1 className="display" style={{ fontSize: 42, marginTop: 16, lineHeight: 1.05 }}>{profile === "business" ? t("onb.headlineBiz") : t("onb.headlinePersonal")}</h1>
            <p style={{ fontSize: 17, color: "var(--text-muted)", marginTop: 14, lineHeight: 1.55 }}>{profile === "business" ? t("onb.subBiz") : t("onb.subPersonal")}</p>
            {/* language picker */}
            {langs.length > 0 && (
              <div style={{ marginTop: 22 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: ".04em" }}>{t("onb.speaksLang")}</div>
                <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 10, flexWrap: "wrap" }}>
                  {langs.map((l) => {
                    const on = lang === l.id;
                    return (
                      <button key={l.id} onClick={() => setLang && setLang(l.id)} style={{ padding: "8px 16px", borderRadius: 999, fontSize: 13.5, fontWeight: 700, background: on ? "var(--accent)" : "var(--surface)", color: on ? "#fff" : "var(--text-muted)", border: "1.5px solid " + (on ? "var(--accent)" : "var(--border)"), boxShadow: on ? "var(--shadow-glow)" : "var(--shadow-sm)", transition: "all .2s var(--ease)" }}>{l.native}</button>
                    );
                  })}
                </div>
              </div>
            )}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12, marginTop: 30 }}>
              {[["vault", t("onb.featVault")], ["alert", t("onb.featGaps")], ["shield", t("onb.featInsure")]].map(([ic, tx]) => (
                <div key={tx} style={{ padding: 16, borderRadius: 16, background: "var(--surface)", border: "1px solid var(--border)" }}>
                  <span style={{ display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 11, background: "var(--accent-soft)", color: "var(--accent)", margin: "0 auto" }}><window.Icon name={ic} size={19} /></span>
                  <div style={{ fontSize: 13, fontWeight: 700, marginTop: 10 }}>{tx}</div>
                </div>
              ))}
            </div>
            <window.Btn size="lg" iconR="arrowR" style={{ marginTop: 30 }} onClick={() => onComplete(profile)}>{t("onb.begin")}</window.Btn>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Onboarding });