/* global React, PrimaryButton, GoogleG, AppleLogo */
// Yomee — Welcome Screen (post-auth success)
// Currently dead code — kept isolated for potential reuse.
// Greets user by name after Google/Apple auth completes.

function WelcomeScreen({ user, provider, onContinue }) {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          padding: "64px 24px 24px",
        }}
      >
        <img
          src="assets/yomee-logo-wordmark.png"
          alt="yomee"
          style={{ width: 151, height: "auto", marginBottom: 32 }}
        />

        <div
          style={{
            width: 88,
            height: 88,
            borderRadius: "50%",
            background: "var(--yo-mint-500)",
            border: "2.5px solid var(--yo-ink)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginBottom: 28,
            flexShrink: 0,
            animation: "yo-pop-in 380ms cubic-bezier(.2,1.2,.4,1)",
          }}
        >
          <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true">
            <path
              d="M11 23 L19 31 L34 14"
              stroke="var(--yo-ink)"
              strokeWidth="4"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{
                strokeDasharray: 60,
                strokeDashoffset: 60,
                animation: "yo-check-draw 420ms 200ms ease-out forwards",
              }}
            />
          </svg>
        </div>

        <h1
          style={{
            margin: 0,
            fontFamily: "var(--font-mono)",
            fontWeight: 500,
            fontSize: 26,
            lineHeight: "32px",
            letterSpacing: "0.01em",
            color: "var(--yo-ink)",
            textAlign: "center",
          }}
        >
          ¡Hola, {user.name.split(" ")[0]}!
        </h1>
        <p
          style={{
            margin: "12px 0 0",
            fontFamily: "var(--font-body)",
            fontSize: 15,
            lineHeight: "22px",
            color: "var(--yo-ink)",
            textAlign: "center",
            maxWidth: 280,
          }}
        >
          Conectaste tu cuenta de {provider === "google" ? "Google" : "Apple"} correctamente.
        </p>

        <div
          style={{
            marginTop: 22,
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
            padding: "8px 14px",
            background: "#fff",
            border: "1.5px solid var(--yo-ink)",
            borderRadius: 999,
          }}
        >
          {provider === "google" ? <GoogleG size={16} /> : <AppleLogo size={16} color="#1f1f1f" />}
          <span
            style={{
              fontFamily: "var(--font-mono)",
              fontWeight: 500,
              fontSize: 13,
              color: "var(--yo-ink)",
              letterSpacing: "0.01em",
            }}
          >
            {user.email}
          </span>
        </div>
      </div>

      <div style={{ padding: "0 24px 36px", flexShrink: 0 }}>
        <PrimaryButton onClick={onContinue} trailingArrow>
          Continuar
        </PrimaryButton>
      </div>

      <style>{`
        @keyframes yo-pop-in {
          0%   { transform: scale(0.4); opacity: 0; }
          70%  { transform: scale(1.06); opacity: 1; }
          100% { transform: scale(1); opacity: 1; }
        }
        @keyframes yo-check-draw {
          to { stroke-dashoffset: 0; }
        }
      `}</style>
    </div>
  );
}

window.WelcomeScreen = WelcomeScreen;