// Welcome.jsx — first-run choice surface before onboarding/auth.
// Mounted by App while the user has not completed the first-run flow.

function Welcome({ onSignup, onLogin }) {
  const Icons = window.Icons || {};
  const asset = window.assetPath || ((name) => `assets/${name}`);
  const Mark = asset('mark.svg?v=logi-functional-v2-20260604');

  const PreviewRow = ({ Icon, title, meta, tone, delay }) => (
    <div className={`welcome-preview-row welcome-preview-${tone}`} style={{ '--delay': delay }}>
      <span className="welcome-preview-icon">{Icon ? <Icon size={18} /> : null}</span>
      <span>
        <b>{title}</b>
        <small>{meta}</small>
      </span>
      <i />
    </div>
  );

  return (
    <main className="welcome-root" dir="rtl">
      <style>{`
        .welcome-root{
          --welcome-ink:#17211f;
          --welcome-night:#14201f;
          --welcome-line:rgba(25,28,29,0.10);
          position:fixed; inset:0; z-index:3500; overflow:hidden;
          display:grid; place-items:center; color:var(--ink); font-family:var(--font-sans);
          background:
            radial-gradient(circle at 88% 12%, rgba(255,172,31,0.22), transparent 28%),
            radial-gradient(circle at 12% 78%, rgba(42,157,143,0.18), transparent 30%),
            linear-gradient(135deg, #fbf7ed 0%, var(--paper) 48%, #eef7f5 100%);
        }
        .welcome-root:before{
          content:""; position:absolute; inset:0; pointer-events:none; opacity:0.58;
          background:
            linear-gradient(90deg, rgba(25,28,29,0.032) 1px, transparent 1px),
            linear-gradient(0deg, rgba(25,28,29,0.026) 1px, transparent 1px),
            url(${asset('paper-grain.svg')});
          background-size:44px 44px, 44px 44px, 180px 180px;
          mask-image:linear-gradient(180deg, black, transparent 92%);
        }
        .welcome-root *{ box-sizing:border-box; letter-spacing:0; }
        .welcome-shell{
          position:relative; width:min(1160px, calc(100% - 38px)); min-height:min(720px, calc(100vh - 38px));
          display:grid; grid-template-columns:minmax(0, 0.94fr) minmax(390px, 1.06fr);
          gap:34px; align-items:stretch; padding:26px; isolation:isolate;
        }
        .welcome-copy{
          position:relative; z-index:2; align-self:center; padding:10px 4px;
          animation:welcomeRise 780ms var(--ease-out) both;
        }
        .welcome-brand{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
        .welcome-mark{
          width:58px; height:58px; border-radius:20px; padding:6px; background:rgba(255,255,255,0.78);
          border:1px solid var(--c-border-xs); box-shadow:var(--shadow-float), var(--shadow-press);
        }
        .welcome-brand b{ display:block; font:950 18px/1.2 var(--font-sans); color:var(--ink); }
        .welcome-brand small{ display:block; margin-top:3px; font:650 12px/1.5 var(--font-sans); color:var(--ink-3); }
        .welcome-kicker{
          display:inline-flex; align-items:center; gap:8px; min-height:34px;
          padding:7px 12px; border-radius:999px; color:var(--firoozeh-deep);
          background:rgba(221,243,240,0.72); border:1px solid rgba(42,157,143,0.18);
          box-shadow:var(--shadow-press); font:900 12px/1 var(--font-sans);
        }
        .welcome-title{
          max-width:650px; margin:18px 0 15px; font:950 42px/1.42 var(--font-sans);
          color:var(--welcome-ink);
        }
        .welcome-title span{
          color:var(--firoozeh-deep);
          text-decoration:underline;
          text-decoration-color:rgba(255,172,31,0.54);
          text-decoration-thickness:8px;
          text-underline-offset:-4px;
          text-decoration-skip-ink:none;
        }
        .welcome-sub{
          max-width:570px; margin:0 0 28px; font:600 16px/2.05 var(--font-sans); color:var(--ink-2);
        }
        .welcome-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
        .welcome-btn{
          appearance:none; border:none; cursor:pointer; min-height:54px; border-radius:16px;
          display:inline-flex; align-items:center; justify-content:center; gap:10px;
          padding:0 20px; font:950 15px/1 var(--font-sans);
          transition:transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
        }
        .welcome-btn:hover{ transform:translateY(-2px); }
        .welcome-btn:active{ transform:translateY(0) scale(0.99); }
        .welcome-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring), var(--shadow-float); }
        .welcome-primary{
          color:#fff; background:linear-gradient(135deg, var(--firoozeh), var(--firoozeh-deep));
          box-shadow:0 18px 38px rgba(42,157,143,0.24), var(--shadow-press);
        }
        .welcome-secondary{
          background:rgba(255,255,255,0.76); color:var(--ink);
          border:1px solid var(--c-border-sm); box-shadow:var(--shadow-lift), var(--shadow-press);
        }
        .welcome-proof{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
        .welcome-pill{
          min-height:32px; display:inline-flex; align-items:center; gap:7px;
          border:1px solid var(--c-border-xs); background:rgba(255,255,255,0.56);
          border-radius:999px; padding:0 11px; color:var(--ink-2);
          font:850 12px/1 var(--font-sans); backdrop-filter:blur(12px);
        }
        .welcome-orbit{
          position:relative; overflow:hidden; min-height:620px; border-radius:30px;
          background:
            radial-gradient(circle at 24% 24%, rgba(42,157,143,0.28), transparent 26%),
            linear-gradient(160deg, #101817 0%, #1a2b29 56%, #312915 100%);
          border:1px solid rgba(255,255,255,0.12); box-shadow:var(--shadow-ink), var(--shadow-press);
          animation:welcomeBoard 880ms var(--ease-out) 120ms both;
        }
        .welcome-orbit:before{
          content:""; position:absolute; inset:-18%; opacity:0.5;
          background:
            repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 58px),
            repeating-linear-gradient(0deg, rgba(255,255,255,0.032) 0 1px, transparent 1px 58px);
          transform:rotate(-10deg); animation:welcomeGrid 18s linear infinite;
        }
        .welcome-orbit:after{
          content:""; position:absolute; inset:0; pointer-events:none;
          background:linear-gradient(118deg, transparent 0%, rgba(255,255,255,0.16) 42%, transparent 64%);
          transform:translateX(120%); animation:welcomeSheen 2600ms var(--ease-out) 700ms both;
        }
        .welcome-map{
          position:absolute; inset:30px; display:grid; grid-template-rows:auto 1fr auto; gap:18px;
        }
        .welcome-map-head{
          display:flex; justify-content:space-between; align-items:flex-start; gap:16px; color:var(--fg-on-invert);
        }
        .welcome-map-head b{ display:block; font:950 18px/1.4 var(--font-sans); }
        .welcome-map-head small{ display:block; margin-top:5px; font:650 12px/1.7 var(--font-sans); color:rgba(248,249,250,0.68); }
        .welcome-level{
          width:76px; height:76px; border-radius:24px; display:grid; place-items:center;
          color:#fff; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.16);
          box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
        }
        .welcome-level span{ display:block; text-align:center; font:950 22px/1 var(--font-sans); }
        .welcome-level small{ display:block; margin-top:5px; font:800 10px/1 var(--font-sans); color:rgba(248,249,250,0.62); }
        .welcome-radar{
          position:relative; align-self:center; min-height:295px; display:grid; place-items:center;
        }
        .welcome-ring{
          position:absolute; border-radius:999px; border:1px solid rgba(221,243,240,0.17);
          animation:welcomeHalo 900ms var(--ease-out) both;
        }
        .welcome-ring.r1{ width:260px; height:260px; animation-delay:80ms; }
        .welcome-ring.r2{ width:190px; height:190px; border-color:rgba(255,172,31,0.22); animation-delay:170ms; }
        .welcome-ring.r3{ width:114px; height:114px; border-color:rgba(255,255,255,0.20); animation-delay:260ms; }
        .welcome-core{
          position:relative; width:128px; height:128px; border-radius:36px; display:grid; place-items:center;
          background:rgba(248,249,250,0.96); box-shadow:0 24px 70px rgba(0,0,0,0.30);
          animation:welcomeLogoSettle 680ms var(--ease-out) 260ms both;
        }
        .welcome-core img{ width:96px; height:96px; display:block; }
        .welcome-preview{ display:grid; gap:10px; }
        .welcome-preview-row{
          position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px;
          min-height:64px; padding:11px 12px; border-radius:18px;
          background:rgba(248,249,250,0.93); border:1px solid rgba(255,255,255,0.36);
          box-shadow:0 22px 44px rgba(0,0,0,0.18);
          animation:welcomeSlide 620ms var(--ease-out) both; animation-delay:var(--delay);
        }
        .welcome-preview-row:nth-child(2){ margin-right:34px; }
        .welcome-preview-row:nth-child(3){ margin-left:26px; }
        .welcome-preview-icon{
          width:40px; height:40px; border-radius:14px; display:grid; place-items:center;
          background:var(--firoozeh-soft); color:var(--firoozeh-deep);
        }
        .welcome-preview-money .welcome-preview-icon{ background:var(--saffron-soft); color:#9a6200; }
        .welcome-preview-memory .welcome-preview-icon{ background:var(--moss-soft); color:var(--moss); }
        .welcome-preview-row b{ display:block; font:950 13px/1.5 var(--font-sans); color:var(--ink); }
        .welcome-preview-row small{ display:block; margin-top:2px; font:650 11px/1.55 var(--font-sans); color:var(--ink-3); }
        .welcome-preview-row i{
          width:12px; height:12px; border-radius:999px; background:var(--firoozeh);
          box-shadow:0 0 0 5px rgba(42,157,143,0.12);
        }
        .welcome-preview-money i{ background:var(--saffron); box-shadow:0 0 0 5px rgba(255,172,31,0.13); }
        .welcome-preview-memory i{ background:var(--moss); box-shadow:0 0 0 5px rgba(90,122,58,0.13); }

        @keyframes welcomeRise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
        @keyframes welcomeBoard{ from{opacity:0; transform:translateX(-18px) scale(0.985)} to{opacity:1; transform:translateX(0) scale(1)} }
        @keyframes welcomeSlide{ from{opacity:0; transform:translateX(-28px)} to{opacity:1; transform:translateX(0)} }
        @keyframes welcomeHalo{ from{opacity:0; transform:scale(0.82)} to{opacity:1; transform:scale(1)} }
        @keyframes welcomeLogoSettle{ from{opacity:0; transform:translateY(8px) scale(.9)} to{opacity:1; transform:translateY(0) scale(1)} }
        @keyframes welcomeGrid{ to{transform:rotate(-10deg) translate3d(58px,58px,0)} }
        @keyframes welcomeSheen{ from{transform:translateX(120%); opacity:0} 28%{opacity:1} to{transform:translateX(-120%); opacity:0} }

        @media (max-width: 860px){
          .welcome-root{ place-items:start stretch; overflow:auto; }
          .welcome-shell{
            width:100%; min-height:100vh; grid-template-columns:1fr; gap:22px;
            padding:24px 18px calc(22px + env(safe-area-inset-bottom));
          }
          .welcome-copy{ align-self:start; padding:0; }
          .welcome-brand{ margin-bottom:22px; }
          .welcome-title{ font-size:30px; line-height:1.55; margin-top:15px; }
          .welcome-sub{ font-size:14px; line-height:1.95; margin-bottom:22px; }
          .welcome-actions{ display:grid; grid-template-columns:1fr; }
          .welcome-btn{ width:100%; border-radius:15px; }
          .welcome-proof{ margin-top:16px; }
          .welcome-orbit{ min-height:465px; border-radius:24px; }
          .welcome-map{ inset:18px; }
          .welcome-radar{ min-height:178px; }
          .welcome-ring.r1{ width:178px; height:178px; }
          .welcome-ring.r2{ width:132px; height:132px; }
          .welcome-ring.r3{ width:82px; height:82px; }
          .welcome-core{ width:98px; height:98px; border-radius:28px; }
          .welcome-core img{ width:74px; height:74px; }
          .welcome-preview-row{ min-height:59px; border-radius:16px; }
          .welcome-preview-row:nth-child(2){ margin-right:16px; }
          .welcome-preview-row:nth-child(3){ margin-left:10px; }
        }
        @media (prefers-reduced-motion: reduce){
          .welcome-root *, .welcome-root *:before, .welcome-root *:after{ animation:none !important; transition:none !important; }
        }
      `}</style>

      <section className="welcome-shell" aria-label="شروع لاگی">
        <div className="welcome-copy">
          <div className="welcome-brand">
            <img className="welcome-mark" src={Mark} alt="" />
            <span>
              <b>لاگی</b>
              <small>مغز دوم شخصی تو</small>
            </span>
          </div>

          <span className="welcome-kicker">
            {Icons.Sparkle ? <Icons.Sparkle size={15} /> : null}
            شروع کوتاه، برنامه واقعی
          </span>

          <h1 className="welcome-title">
            قبل از ورود، ماهت را به یک <span>نقشه قابل انجام</span> تبدیل کن.
          </h1>
          <p className="welcome-sub">
            در چند مرحله کوتاه، هدف‌ها، ساختار مالی ماهانه و روتین‌های خودت را وارد می‌کنی؛ بعد با تایید پیامکی وارد برنامه‌ای می‌شوی که از همان روز اول شخصی‌سازی شده است.
          </p>

          <div className="welcome-actions">
            <button className="welcome-btn welcome-primary" type="button" onClick={onSignup}>
              {Icons.Sparkle ? <Icons.Sparkle size={18} /> : null}
              ثبت‌نام و ساخت برنامه من
            </button>
            <button className="welcome-btn welcome-secondary" type="button" onClick={onLogin}>
              {Icons.User ? <Icons.User size={18} /> : null}
              ورود به حساب
            </button>
          </div>

          <div className="welcome-proof" aria-hidden="true">
            <span className="welcome-pill">تسک</span>
            <span className="welcome-pill">چرتکه مالی</span>
            <span className="welcome-pill">عادت و XP</span>
          </div>
        </div>

        <div className="welcome-orbit" aria-hidden="true">
          <div className="welcome-map">
            <div className="welcome-map-head">
              <span>
                <b>نقشه امروز آماده است</b>
                <small>از آنبوردینگ تا اولین برد روزانه</small>
              </span>
              <span className="welcome-level">
                <span>۰۱</span>
                <small>سطح</small>
              </span>
            </div>

            <div className="welcome-radar">
              <span className="welcome-ring r1" />
              <span className="welcome-ring r2" />
              <span className="welcome-ring r3" />
              <span className="welcome-core"><img src={Mark} alt="" /></span>
            </div>

            <div className="welcome-preview">
              <PreviewRow Icon={Icons.CheckCircle} title="روتین صبح" meta="با ساعت‌هایی که خودت وارد می‌کنی" tone="habit" delay="120ms" />
              <PreviewRow Icon={Icons.Wallet} title="ساختار مالی ماه" meta="حقوق، قسط‌ها، هزینه‌های ثابت" tone="money" delay="240ms" />
              <PreviewRow Icon={Icons.Star} title="پاداش پیشرفت" meta="XP، سطح و حس برد کوچک روزانه" tone="memory" delay="360ms" />
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.Welcome = Welcome;
