// Intro / Loading screen — Netflix-style light-ribbon reveal.
// Colored light beams rise + shimmer, then converge into the BNS wordmark
// with a glow + "ta-dum" stinger, then settle to the profile picker.

function Intro({ onDone, soundOn = true }) {
  const [phase, setPhase] = React.useState(0);
  const [exiting, setExiting] = React.useState(false);

  // Generated once — varied light ribbons across the stage
  const ribbons = React.useMemo(() => {
    const palette = [
      'var(--c-about)', 'var(--c-skills)', 'var(--c-exp)',
      'var(--c-projects)', 'var(--c-contact)', 'var(--c-resume)',
    ];
    const N = 18;
    return Array.from({ length: N }).map((_, i) => {
      const left = (i / (N - 1)) * 100;
      return {
        left,
        color: palette[i % palette.length],
        width: 7 + Math.round(((i * 53) % 17)),       // 7–24px, deterministic-ish
        delay: ((i * 37) % 40) / 100,                  // 0–0.39s
        dur: 1.5 + ((i * 29) % 80) / 100,              // 1.5–2.3s
        shift: 50 - left,                              // vw to reach center
      };
    });
  }, []);

  const handlePointerMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const px = (e.clientX - rect.left) / rect.width - 0.5;
    const py = (e.clientY - rect.top) / rect.height - 0.5;
    e.currentTarget.style.setProperty('--intro-ry', `${px * 11}deg`);
    e.currentTarget.style.setProperty('--intro-rx', `${py * -9}deg`);
    e.currentTarget.style.setProperty('--intro-x', `${px * 20}px`);
    e.currentTarget.style.setProperty('--intro-y', `${py * 14}px`);
    e.currentTarget.style.setProperty('--glow-x', `${50 + px * 24}%`);
    e.currentTarget.style.setProperty('--glow-y', `${52 + py * 20}%`);
  };

  const handlePointerLeave = (e) => {
    e.currentTarget.style.setProperty('--intro-ry', '0deg');
    e.currentTarget.style.setProperty('--intro-rx', '0deg');
    e.currentTarget.style.setProperty('--intro-x', '0px');
    e.currentTarget.style.setProperty('--intro-y', '0px');
    e.currentTarget.style.setProperty('--glow-x', '50%');
    e.currentTarget.style.setProperty('--glow-y', '52%');
  };

  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 80);    // ribbons rise + shimmer
    const t2 = setTimeout(() => { setPhase(2); if (soundOn) try { window.playTaDum(); } catch {} }, 1500); // converge + flash + mark
    const t3 = setTimeout(() => setPhase(3), 2450);  // subtitle settles, ambient
    const t4 = setTimeout(() => setExiting(true), 3700);  // begin smooth fade-out
    const t5 = setTimeout(() => onDone(), 4350);          // hand off to the picker
    return () => [t1, t2, t3, t4, t5].forEach(clearTimeout);
  }, [soundOn]);

  return (
    <div
      className={`intro-stage stage phase-${phase} ${exiting ? 'is-exiting' : ''}`}
      onClick={onDone}
      onPointerMove={handlePointerMove}
      onPointerLeave={handlePointerLeave}
    >
      <button className="intro-skip" type="button" onClick={(e)=>{ e.stopPropagation(); onDone(); }} aria-label="Skip intro">
        <span>Skip Intro</span>
        <span className="intro-skip-arrow" aria-hidden="true">→</span>
      </button>

      {/* Light ribbons rising from below */}
      <div className="intro-ribbons" aria-hidden="true">
        {ribbons.map((r, i) => (
          <i
            key={i}
            style={{
              left: `${r.left}%`,
              width: `${r.width}px`,
              background: `linear-gradient(180deg, transparent 0%, ${r.color} 22%, #fff 50%, ${r.color} 78%, transparent 100%)`,
              ['--ribbon-color']: r.color,
              ['--delay']: `${r.delay}s`,
              ['--dur']: `${r.dur}s`,
              ['--shift']: `${r.shift}vw`,
            }}
          />
        ))}
      </div>

      {/* Convergence flash bloom */}
      <div className="intro-bloom" aria-hidden="true"/>

      {/* center stack */}
      <div className="intro-center">
        <div className="intro-mark">
          <span className="il il-b">B</span>
          <span className="il il-n">N</span>
          <span className="il il-s">S</span>
        </div>

        <div className="intro-sub">
          <div className="intro-eyebrow">A {new Date().getFullYear()} ORIGINAL</div>
          <div className="intro-title">Batsal Nath Shrestha</div>
          <div className="intro-role">Marketing · Design · Code</div>
        </div>
      </div>

      {/* corner: now playing */}
      <div className="intro-meta">
        <span className="intro-meta-dot"/> NOW STREAMING
      </div>
      <div className="intro-meta intro-meta--r">
        <span>EP 01</span><span className="intro-meta-sep">·</span><span>PORTFOLIO</span>
      </div>

      {/* loader bar */}
      <div className="intro-bar"><i/></div>

      <style>{`
        .intro-stage{
          --intro-rx:0deg; --intro-ry:0deg; --intro-x:0px; --intro-y:0px;
          --glow-x:50%; --glow-y:52%;
          display:flex; align-items:center; justify-content:center;
          min-height:100vh;
          min-height:100dvh;
          background:
            radial-gradient(900px 560px at var(--glow-x) var(--glow-y), rgba(79,142,255,.14), transparent 60%),
            radial-gradient(1100px 640px at 50% 64%, rgba(255,77,141,.12), transparent 62%),
            #04061a;
          overflow:hidden; cursor:pointer;
        }
        /* Auto hand-off: smooth fade + gentle zoom into the profile picker */
        .intro-stage.is-exiting{
          animation: introOut .62s cubic-bezier(.4,0,.2,1) forwards;
          pointer-events:none;
        }
        @keyframes introOut{
          0%{ opacity:1; transform:scale(1); filter:blur(0); }
          100%{ opacity:0; transform:scale(1.05); filter:blur(3px); }
        }
        @media (prefers-reduced-motion: reduce){
          .intro-stage.is-exiting{ animation: introOutFade .4s linear forwards; }
          @keyframes introOutFade{ to{ opacity:0; } }
        }

        /* ── Light ribbons ───────────────────────────────────────── */
        .intro-ribbons{
          position:absolute; inset:0; z-index:1;
          pointer-events:none;
          /* fade ribbons softly at the vertical edges */
          -webkit-mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
                  mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
        }
        .intro-ribbons i{
          position:absolute; top:0; bottom:0;
          border-radius:99px;
          opacity:0;
          filter: blur(6px) saturate(1.3);
          transform: translateY(60%) scaleY(.2);
          mix-blend-mode: screen;
          will-change: transform, opacity;
        }
        /* phase 1: rise + shimmer */
        .phase-1 .intro-ribbons i{
          animation:
            ribbonRise .7s cubic-bezier(.2,.8,.25,1) var(--delay) both,
            ribbonShimmer var(--dur) ease-in-out calc(var(--delay) + .7s) infinite;
        }
        @keyframes ribbonRise{
          0%   { opacity:0; transform: translateY(60%) scaleY(.2); }
          100% { opacity:.85; transform: translateY(0) scaleY(1); }
        }
        @keyframes ribbonShimmer{
          0%,100% { transform: translateY(0) scaleY(1);   opacity:.8; filter: blur(6px) saturate(1.3); }
          50%     { transform: translateY(-3%) scaleY(1.04); opacity:1; filter: blur(4px) saturate(1.6); }
        }
        /* phase 2+: rush to center, brighten, then vanish into the flash */
        .phase-2 .intro-ribbons i, .phase-3 .intro-ribbons i{
          animation: ribbonConverge .85s cubic-bezier(.7,0,.2,1) both;
        }
        @keyframes ribbonConverge{
          0%   { opacity:.9;  transform: translate(0,0) scaleY(1) scaleX(1); filter: blur(5px) brightness(1); }
          55%  { opacity:1;   transform: translateX(var(--shift)) scaleY(1.1) scaleX(.5); filter: blur(2px) brightness(1.6); }
          100% { opacity:0;   transform: translateX(var(--shift)) scaleY(1.3) scaleX(.06); filter: blur(10px) brightness(2.2); }
        }

        /* ── Convergence bloom flash ─────────────────────────────── */
        .intro-bloom{
          position:absolute; left:50%; top:52%; z-index:2;
          width:60px; height:60px; transform:translate(-50%,-50%) scale(0);
          border-radius:50%;
          background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(79,142,255,.5) 30%, rgba(255,77,141,.25) 55%, transparent 72%);
          pointer-events:none; opacity:0;
          mix-blend-mode: screen;
        }
        .phase-2 .intro-bloom{
          animation: bloom .9s cubic-bezier(.3,.8,.3,1) .35s both;
        }
        @keyframes bloom{
          0%   { opacity:0;  transform:translate(-50%,-50%) scale(0); }
          35%  { opacity:1;  transform:translate(-50%,-50%) scale(14); }
          100% { opacity:0;  transform:translate(-50%,-50%) scale(26); }
        }

        /* ── Center stack ────────────────────────────────────────── */
        .intro-center{
          position:relative; z-index:3;
          display:flex; flex-direction:column; align-items:center; gap:30px;
          transform-style:preserve-3d;
          transform:
            perspective(1100px)
            rotateX(var(--intro-rx))
            rotateY(var(--intro-ry))
            translate3d(var(--intro-x), var(--intro-y), 0);
          transition:transform .28s cubic-bezier(.2,.9,.3,1);
          will-change:transform;
        }

        .intro-mark{
          position:relative;
          display:flex; gap:.04em; line-height:.82; font-family:var(--display);
          font-size:clamp(120px, 22vw, 320px); color: var(--c-about);
          text-shadow: 8px 8px 0 #000;
          transform-style:preserve-3d;
        }
        .intro-mark::after{
          content:"";
          position:absolute; inset: 8% -4% 22%;
          pointer-events:none;
          background:linear-gradient(115deg, transparent 8%, rgba(255,255,255,.22) 36%, transparent 62%);
          mix-blend-mode:screen; opacity:0;
          transform:translateZ(46px) translateX(calc(var(--intro-x) * .5));
          filter:blur(4px);
        }
        .phase-3 .intro-mark::after{ animation: sheen 1.4s ease 0s 1 both; }
        @keyframes sheen{
          0%{ opacity:0; transform:translateZ(46px) translateX(-40%); }
          40%{ opacity:.7; }
          100%{ opacity:0; transform:translateZ(46px) translateX(60%); }
        }

        /* Letters emerge OUT of the converged light (blur → sharp + glow) */
        .intro-mark span{
          display:inline-block; opacity:0;
          transform: scale(1.5);
          filter: blur(24px);
          will-change: transform, filter, opacity;
        }
        .phase-2 .il-b, .phase-3 .il-b{ animation: emerge .8s cubic-bezier(.3,.9,.25,1) .42s both; }
        .phase-2 .il-n, .phase-3 .il-n{
          animation: emerge .8s cubic-bezier(.3,.9,.25,1) .56s both;
          color: var(--c-skills);
        }
        .phase-2 .il-s, .phase-3 .il-s{
          animation: emerge .8s cubic-bezier(.3,.9,.25,1) .70s both;
          color: var(--c-exp);
        }
        @keyframes emerge{
          0%   { opacity:0; transform: scale(1.5) rotate(var(--r,0deg)); filter: blur(24px) brightness(2.4); }
          55%  { opacity:1; transform: scale(.97) rotate(var(--r,0deg)); filter: blur(0) brightness(1.25); }
          100% { opacity:1; transform: scale(1) rotate(var(--r,0deg)); filter: blur(0) brightness(1); }
        }
        .il-b{ --r:-3deg; }
        .il-n{ --r:4deg; }
        .il-s{ --r:-2deg; }
        /* glowing aura per letter once settled */
        .phase-3 .il-b{ filter: drop-shadow(0 0 50px rgba(79,142,255,.5)); }
        .phase-3 .il-n{ filter: drop-shadow(0 0 50px rgba(255,217,61,.5)); }
        .phase-3 .il-s{ filter: drop-shadow(0 0 50px rgba(255,77,141,.5)); }

        .intro-sub{
          width:min(88vw, 760px);
          text-align:center; opacity:0; transform:translateZ(42px);
        }
        .phase-3 .intro-sub{ animation: fadeUp .6s ease .1s both; }
        @keyframes fadeUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
        .intro-eyebrow{ font:600 11px/1 var(--mono); letter-spacing:.4em; color:var(--c-about); margin-bottom:14px; }
        .intro-title{
          font:700 clamp(26px, 7.4vw, 36px)/1.08 var(--body);
          letter-spacing:0;
          color:var(--paper);
          margin-bottom:6px;
          text-wrap:balance;
        }
        .intro-role{ font:500 13px/1 var(--body); color:var(--paper-dim); letter-spacing:.04em; }

        .phase-3 .intro-mark{ animation: scaleUp .6s ease .4s both; }
        @keyframes scaleUp{ 0%{ transform:scale(1); } 100%{ transform:scale(.85) translateY(-34px); } }

        /* ── Chrome (skip / meta / loader / hint) ────────────────── */
        .intro-skip{
          position:absolute; top:62px; right:32px; z-index:10;
          display:inline-flex; align-items:center; gap:10px;
          min-height:40px; max-width:calc(100vw - 48px);
          font:700 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase;
          color:var(--paper-dim); padding:0 15px 0 17px; border:1px solid rgba(244,241,232,.22);
          border-radius:99px;
          background:rgba(4,6,26,.62);
          box-shadow:0 14px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(244,241,232,.12);
          backdrop-filter: blur(10px);
          transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
          opacity:0; animation: skipFade .3s ease 1.5s both;
        }
        .intro-skip:hover{
          color:var(--paper); border-color:rgba(244,241,232,.48);
          background:rgba(10,14,46,.76); transform:translateY(-1px);
        }
        .intro-skip:focus-visible{ outline:2px solid var(--c-about); outline-offset:4px; }
        .intro-skip-arrow{
          display:grid; place-items:center;
          width:20px; height:20px; border-radius:50%;
          border:1px solid rgba(244,241,232,.18);
          font-size:15px; line-height:1; letter-spacing:0;
        }
        @keyframes skipFade{ to{ opacity:1; } }

        .intro-meta{
          position:absolute; top:28px; left:32px; z-index:5;
          font:600 11px/1 var(--mono); letter-spacing:.18em; color:var(--paper-dim);
          display:flex; align-items:center; gap:8px;
          opacity:0; animation: skipFade .3s ease .8s both;
        }
        .intro-meta-dot{ width:8px; height:8px; border-radius:50%; background:#ef4444; animation: pulse 1.4s ease-in-out infinite; }
        .intro-meta--r{ left:auto; right:32px; }
        .intro-meta-sep{ opacity:.4; }

        .intro-bar{
          position:absolute; bottom:48px; left:50%; transform:translateX(-50%); z-index:5;
          width:200px; height:3px; background:rgba(244,241,232,.12); border-radius:99px; overflow:hidden;
          opacity:0; animation: skipFade .3s ease .8s both;
        }
        .intro-bar i{
          display:block; height:100%; width:100%; transform-origin:left center; transform:scaleX(0);
          background: linear-gradient(90deg, var(--c-about), var(--c-skills), var(--c-exp));
          animation: load 3.3s cubic-bezier(.4,0,.6,1) .1s forwards;
        }
        @keyframes load{ to{ transform:scaleX(1); } }

        @media (max-width: 640px){
          .intro-meta{ top:18px; left:18px; right:auto; letter-spacing:.12em; }
          .intro-meta--r{ top:40px; left:18px; right:auto; }
          .intro-skip{ top:18px; right:18px; min-height:36px; padding:0 12px 0 14px; gap:8px; font-size:10px; letter-spacing:.12em; }
          .intro-skip-arrow{ width:18px; height:18px; font-size:13px; }
          .intro-center{ gap:22px; width:100%; padding:0 18px; }
          .intro-mark{ font-size:clamp(112px, 34vw, 148px); text-shadow:6px 6px 0 #000; }
          .intro-eyebrow{ font-size:10px; letter-spacing:.28em; margin-bottom:12px; }
          .intro-role{ font-size:13px; line-height:1.25; }
          .intro-bar{ bottom:68px; width:min(190px, calc(100vw - 190px)); }
        }
        @media (max-width: 420px){
          .intro-skip span:first-child{ max-width:44px; overflow:hidden; white-space:nowrap; }
          .intro-skip{ padding-left:12px; }
        }

        @media (prefers-reduced-motion: reduce){
          .intro-ribbons i{ animation: ribbonRise .4s ease both !important; opacity:.5 !important; }
          .intro-bloom{ animation:none !important; opacity:0 !important; }
          .intro-mark span{ animation: none !important; opacity:1 !important; transform:none !important; filter:none !important; }
        }
      `}</style>
    </div>
  );
}

window.Intro = Intro;