import"./_virtual_wxt-html-plugins-DPbbfBKe.js";import{r as s,a as f,f as x,B as h,j as e,t as n,b as p,l as u,s as k,R as y,h as w}from"./tailwind-DVRcyJP2.js";function v(){return e.jsx("div",{className:"star-field","aria-hidden":!0,children:Array.from({length:60}).map((t,o)=>e.jsx("span",{className:"star",style:{left:`${Math.random()*100}%`,top:`${Math.random()*100}%`,animationDelay:`${Math.random()*4}s`,animationDuration:`${2+Math.random()*3}s`,width:`${1.5+Math.random()*2}px`,height:`${1.5+Math.random()*2}px`}},o))})}function j(){const t="zh",[o,b]=s.useState(!1),[a,l]=s.useState(null),[i,g]=s.useState(!0);s.useEffect(()=>{requestAnimationFrame(()=>b(!0))},[]),s.useEffect(()=>{f().then(r=>{l(r),g(!1)}),x(r=>{l(r)})},[]);const m=()=>{p.runtime.sendMessage({type:"open-authorization-page"})},c=async()=>{const r=await u();r.nativeLanguage=t,r.learningLanguage="en",await k(r),window.location.href=p.runtime.getURL("/options.html")},d=a!=null&&a.image?a.image.startsWith("http")?a.image:`${h}${a.image}`:null;return e.jsxs(e.Fragment,{children:[e.jsx("style",{children:`
        /* ── background & stars ── */
        .welcome-bg {
          background: linear-gradient(145deg, #0c0f1a 0%, #141833 40%, #1a1040 100%);
          min-height: 100vh;
          overflow: hidden;
          position: relative;
        }
        .star-field { position:fixed; inset:0; pointer-events:none; z-index:0; }
        .star {
          position: absolute;
          border-radius: 50%;
          background: #fffbe6;
          opacity: 0;
          animation: twinkle ease-in-out infinite alternate;
        }
        @keyframes twinkle {
          0%   { opacity: 0; transform: scale(.6); }
          100% { opacity: .85; transform: scale(1); }
        }

        /* ── glass card ── */
        .glass-card {
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.08);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border-radius: 20px;
          box-shadow:
            0 0 80px rgba(251,191,36,0.04),
            0 24px 60px rgba(0,0,0,0.35);
        }

        /* ── brand ── */
        .brand-name {
          font-family: Georgia, 'Times New Roman', serif;
          font-weight: 700;
          font-size: 2.25rem;
          letter-spacing: -0.02em;
          color: #fff;
          position: relative;
          display: inline-block;
        }
        .brand-name .star-accent {
          color: #fbbf24;
          font-size: 0.55em;
          position: absolute;
          top: -2px;
          right: -18px;
          animation: pulse-star 2.5s ease-in-out infinite;
        }
        @keyframes pulse-star {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%       { opacity: .5; transform: scale(.8); }
        }

        /* ── section labels ── */
        .section-label {
          font-family: Georgia, 'Times New Roman', serif;
          font-size: .9rem;
          font-weight: 600;
          color: rgba(255,255,255,0.92);
          letter-spacing: 0.02em;
        }
        .section-desc {
          font-size: .75rem;
          color: rgba(255,255,255,0.38);
          margin-top: 2px;
        }

        /* ── divider ── */
        .soft-divider {
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(251,191,36,0.18), transparent);
        }

        /* ── language pills ── */
        .lang-pill {
          position: relative;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 20px;
          border-radius: 99px;
          font-size: .82rem;
          font-weight: 500;
          color: rgba(255,255,255,0.55);
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.08);
          cursor: pointer;
          transition: all .25s cubic-bezier(.4,0,.2,1);
          user-select: none;
          white-space: nowrap;
        }
        .lang-pill:hover {
          color: rgba(255,255,255,0.85);
          background: rgba(255,255,255,0.08);
          border-color: rgba(255,255,255,0.14);
        }
        .lang-pill--active {
          color: #fbbf24 !important;
          background: rgba(251,191,36,0.10) !important;
          border-color: rgba(251,191,36,0.35) !important;
          box-shadow: 0 0 18px rgba(251,191,36,0.08);
        }
        .pill-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          background: #fbbf24;
          flex-shrink: 0;
          animation: dot-in .3s ease-out;
        }
        @keyframes dot-in {
          0% { transform: scale(0); opacity:0; }
          100% { transform: scale(1); opacity:1; }
        }

        /* ── CTA button ── */
        .cta-btn {
          width: 100%;
          padding: 14px 0;
          border: none;
          border-radius: 14px;
          font-size: .95rem;
          font-weight: 600;
          letter-spacing: 0.01em;
          color: #0c0f1a;
          background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
          cursor: pointer;
          transition: all .3s cubic-bezier(.4,0,.2,1);
          box-shadow: 0 4px 24px rgba(251,191,36,0.18);
          position: relative;
          overflow: hidden;
        }
        .cta-btn:hover {
          transform: translateY(-1px);
          box-shadow: 0 8px 32px rgba(251,191,36,0.28);
        }
        .cta-btn:active {
          transform: translateY(0);
        }

        /* ── subtitle text ── */
        .subtitle-text {
          color: rgba(255,255,255,0.42);
          font-size: .82rem;
          line-height: 1.6;
        }

        /* ── entrance animations ── */
        .fade-up {
          opacity: 0;
          transform: translateY(14px);
          animation: fadeUp .55s cubic-bezier(.4,0,.2,1) forwards;
        }
        @keyframes fadeUp {
          to { opacity: 1; transform: translateY(0); }
        }

        /* ── step badges ── */
        .step-badge {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 22px; height: 22px;
          border-radius: 50%;
          font-size: .65rem;
          font-weight: 700;
          color: #fbbf24;
          background: rgba(251,191,36,0.10);
          border: 1px solid rgba(251,191,36,0.22);
          flex-shrink: 0;
        }

        /* ── account card ── */
        .account-card {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 14px 18px;
          border-radius: 14px;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(251,191,36,0.15);
          animation: slideIn 0.4s ease-out;
        }
        .account-avatar {
          width: 46px; height: 46px;
          border-radius: 50%;
          border: 2px solid rgba(251,191,36,0.5);
          object-fit: cover;
        }
        .account-avatar-fallback {
          width: 46px; height: 46px;
          border-radius: 50%;
          background: linear-gradient(135deg, #d4950c, #f5c542);
          display: flex; align-items: center; justify-content: center;
          color: #fff; font-size: 18px; font-weight: 700;
          border: 2px solid rgba(251,191,36,0.5);
          flex-shrink: 0;
        }
        .account-name {
          font-size: 0.88rem;
          font-weight: 600;
          color: rgba(255,255,255,0.92);
        }
        .account-email {
          font-size: 0.72rem;
          color: rgba(255,255,255,0.38);
          margin-top: 2px;
          display: block;
        }
        .plan-pill {
          font-size: 0.62rem;
          font-weight: 600;
          padding: 2px 8px;
          border-radius: 99px;
          background: rgba(251,191,36,0.12);
          color: #fbbf24;
          border: 1px solid rgba(251,191,36,0.25);
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }

        /* ── skip link ── */
        .skip-link {
          font-size: 0.75rem;
          color: rgba(255,255,255,0.3);
          cursor: pointer;
          transition: color 0.2s ease;
          padding-left: 4px;
          background: none;
          border: none;
        }
        .skip-link:hover {
          color: rgba(255,255,255,0.55);
        }

        /* ── check badge on step number ── */
        .check-badge {
          position: absolute;
          bottom: -3px; right: -3px;
          width: 12px; height: 12px;
          border-radius: 50%;
          background: #22c55e;
          color: #fff;
          font-size: 7px;
          display: flex; align-items: center; justify-content: center;
          font-weight: 700;
        }

        /* ── auth loading spinner ── */
        .auth-spinner {
          width: 18px; height: 18px;
          border: 2px solid rgba(251,191,36,0.15);
          border-top-color: #fbbf24;
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
          to { transform: rotate(360deg); }
        }

        @keyframes slideIn {
          0% { opacity: 0; transform: translateY(8px); }
          100% { opacity: 1; transform: translateY(0); }
        }

        /* ── step indicator dots ── */
        .step-dots {
          display: flex;
          gap: 8px;
          justify-content: center;
        }
        .step-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: rgba(255,255,255,0.15);
          transition: all 0.3s ease;
        }
        .step-dot--active {
          background: #fbbf24;
          box-shadow: 0 0 8px rgba(251,191,36,0.4);
        }

        /* ── step transitions ── */
        @keyframes stepInForward {
          from { opacity: 0; transform: translateX(30px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes stepInBack {
          from { opacity: 0; transform: translateX(-30px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        .step-enter-forward {
          animation: stepInForward 0.35s cubic-bezier(.4,0,.2,1) both;
        }
        .step-enter-back {
          animation: stepInBack 0.35s cubic-bezier(.4,0,.2,1) both;
        }

        /* ── back link ── */
        .back-link {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 0.78rem;
          color: rgba(255,255,255,0.35);
          cursor: pointer;
          transition: color 0.2s ease;
          background: none;
          border: none;
          padding: 0;
        }
        .back-link:hover {
          color: rgba(255,255,255,0.6);
        }
      `}),e.jsxs("div",{className:`welcome-bg flex items-center justify-center p-6 ${o?"":"opacity-0"}`,children:[e.jsx(v,{}),e.jsxs("div",{className:"glass-card relative z-10 w-full max-w-md px-8 py-10 flex flex-col gap-8",children:[e.jsxs("div",{className:"text-center flex flex-col items-center gap-3 fade-up",style:{animationDelay:"100ms"},children:[e.jsxs("h1",{className:"brand-name",children:["Senten",e.jsx("span",{style:{color:"#fbbf24"},children:"Word"}),e.jsx("span",{className:"star-accent",children:"✦"})]}),e.jsx("p",{className:"subtitle-text max-w-xs",children:n("welcome.subtitle",t)})]}),e.jsx("div",{className:"soft-divider fade-up",style:{animationDelay:"200ms"}}),e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx("div",{className:"flex items-center gap-2.5",children:e.jsxs("div",{children:[e.jsx("div",{className:"section-label",children:n("welcome.account",t)}),e.jsx("div",{className:"section-desc",children:n("welcome.accountDesc",t)})]})}),(i||(a==null?void 0:a.token))&&e.jsx("div",{children:i?e.jsx("div",{className:"auth-spinner"}):e.jsxs("div",{className:"account-card",children:[d?e.jsx("img",{src:d,className:"account-avatar",alt:""}):e.jsx("div",{className:"account-avatar-fallback",children:(a.name||a.email||"?").charAt(0).toUpperCase()}),e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{className:"account-name",children:a.name||a.email}),e.jsx("span",{className:"plan-pill",children:a.plan==="pro"?"Pro":"Free"})]}),a.name&&e.jsx("span",{className:"account-email",children:a.email})]})]})})]}),e.jsx("div",{className:"soft-divider"}),a!=null&&a.token?e.jsx("button",{className:"cta-btn",onClick:c,children:n("welcome.getStarted",t)}):e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx("button",{className:"cta-btn",onClick:m,disabled:i,style:i?{opacity:.5,cursor:"not-allowed"}:void 0,children:n("welcome.login",t)}),!i&&e.jsx("button",{className:"skip-link",onClick:c,children:n("welcome.maybeLater",t)})]})]})]})]})]})}y.createRoot(document.getElementById("root")).render(e.jsx(w.StrictMode,{children:e.jsx(j,{})}));
