/* onboarding.jsx — the logged-out welcome / sign-in screen.
   Editorial headline, the accent on the brand line, two provider entries.
   Authenticating enters the app directly. */

const GoogleMark = () => (
  <svg width="18" height="18" viewBox="0 0 48 48" style={{ flex: "none" }} aria-hidden="true">
    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
  </svg>
);
const AppleMark = () => (
  <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" style={{ flex: "none", marginTop: -2 }} aria-hidden="true">
    <path d="M17.05 12.04c-.03-2.6 2.12-3.85 2.22-3.91-1.21-1.77-3.09-2.01-3.76-2.04-1.6-.16-3.12.94-3.93.94-.81 0-2.06-.92-3.39-.89-1.74.03-3.35 1.01-4.25 2.57-1.81 3.14-.46 7.79 1.3 10.34.86 1.25 1.89 2.65 3.23 2.6 1.3-.05 1.79-.84 3.36-.84 1.57 0 2.01.84 3.39.81 1.4-.02 2.28-1.27 3.13-2.53.99-1.45 1.4-2.86 1.42-2.93-.03-.01-2.72-1.04-2.75-4.13zM14.53 4.5c.71-.86 1.19-2.06 1.06-3.25-1.02.04-2.26.68-2.99 1.54-.66.76-1.23 1.98-1.08 3.15 1.14.09 2.3-.58 3.01-1.44z"/>
  </svg>
);
const AuthBtn = ({ icon, label, onClick }) => (
  <button className="press" onClick={onClick} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 11, height: 54, borderRadius: "var(--radius-button, 10px)", background: "var(--bg-2)", border: "1px solid var(--rule-2)", color: "var(--ink)", cursor: "pointer" }}>
    {icon}
    <span style={{ fontFamily: "var(--f-display)", fontSize: 15 }}>{label}</span>
  </button>
);

const SignInWelcome = ({ onAuth }) => (
  <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "0 28px 26px", overflow: "hidden" }}>
    <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <div className="yo-enter"><Logo size={42} /></div>
      <div className="yo-enter" data-delay="1" style={{ marginTop: 30, fontFamily: "var(--f-display)", fontSize: 41, letterSpacing: "-0.03em", lineHeight: 1.04, maxWidth: 340 }}>
        Your money deserves more. <span style={{ color: "var(--accent)" }}>Welcome to Yoshi.</span>
      </div>
      <div className="yo-enter" data-delay="2" style={{ width: 150, height: 2, background: "var(--accent)", margin: "28px 0 0" }} />
      <div className="yo-enter" data-delay="3" style={{ marginTop: 26, fontFamily: "var(--f-display)", fontSize: 15.5, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: 320 }}>
        Banking, brokerage, and crypto on one balance. Your agents propose, you approve, Yoshi handles the move.
      </div>
    </div>
    <div className="yo-enter" data-delay="4" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <AuthBtn icon={<GoogleMark />} label="Enter with Google" onClick={onAuth} />
      <AuthBtn icon={<AppleMark />} label="Enter with Apple" onClick={onAuth} />
      <div style={{ fontFamily: "var(--f-display)", fontSize: 11.5, color: "var(--ink-3)", textAlign: "center", marginTop: 6 }}>By entering you agree to Yoshi's Terms and Privacy Policy</div>
    </div>
  </div>
);

const Onboarding = ({ onDone }) => (
  <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
    <SignInWelcome onAuth={onDone} />
  </div>
);

window.Onboarding = Onboarding;
