// Manga-style intro — paper unfurls, brush strokes draw B-N-S in calligraphy,
// Japanese subtitle appears, page turns to reveal the picker.

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

  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 * 12}deg`);
    e.currentTarget.style.setProperty('--intro-rx', `${py * -10}deg`);
    e.currentTarget.style.setProperty('--intro-x', `${px * 18}px`);
    e.currentTarget.style.setProperty('--intro-y', `${py * 14}px`);
    e.currentTarget.style.setProperty('--ink-light-x', `${50 + px * 28}%`);
    e.currentTarget.style.setProperty('--ink-light-y', `${44 + py * 22}%`);
  };

  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('--ink-light-x', '50%');
    e.currentTarget.style.setProperty('--ink-light-y', '44%');
  };

  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 80);    // brush draws the strokes
    const t2 = setTimeout(() => setPhase(2), 1900);  // solid ink settles + SFX slams
    const t3 = setTimeout(() => setPhase(3), 2650);  // subtitle settles
    const t4 = setTimeout(() => setExiting(true), 3850); // begin page-turn fade-out
    const t5 = setTimeout(() => onDone(), 4500);         // hand off to the picker
    return () => [t1,t2,t3,t4,t5].forEach(clearTimeout);
  }, []);

  return (
    <div
      className={`mintro-stage stage phase-${phase} ${exiting ? 'is-exiting' : ''}`}
      onClick={onDone}
      onPointerMove={handlePointerMove}
      onPointerLeave={handlePointerLeave}
    >
      <button className="mintro-skip" onClick={(e)=>{ e.stopPropagation(); onDone(); }}>スキップ Skip →</button>

      {/* Speed lines radiating */}
      <div className="mintro-speed">
        {Array.from({length: 24}).map((_,i)=>(
          <i key={i} style={{transform: `rotate(${i*15}deg) translateX(40vw)`}}/>
        ))}
      </div>

      {/* Center brush-stroked BNS */}
      <div className="mintro-center">
        <div className="mintro-mark" aria-label="B N S">
          {/* Halftone burst BEHIND the letters — atmosphere, not fill */}
          <div className="mintro-halo" aria-hidden="true"/>
          <svg viewBox="0 0 600 220" width="78%" preserveAspectRatio="xMidYMid meet" className="mintro-svg">
            <defs>
              <filter id="rough" x="-5%" y="-5%" width="110%" height="110%">
                <feTurbulence baseFrequency="0.9" numOctaves="1" seed="4"/>
                <feDisplacementMap in="SourceGraphic" scale="0.6"/>
              </filter>
            </defs>
            {/* Single decisive cream-paper offset behind letters — classic manga paste-up */}
            <g className="mintro-depth" aria-hidden="true" fill="#efe6cc" stroke="#0a0908" strokeWidth="6" strokeLinejoin="round">
              <text x="118" y="170" fontFamily="Bagel Fat One, Noto Serif JP, system-ui, sans-serif" fontSize="178" textAnchor="middle">B</text>
              <text x="300" y="170" fontFamily="Bagel Fat One, Noto Serif JP, system-ui, sans-serif" fontSize="192" textAnchor="middle">N</text>
              <text x="482" y="170" fontFamily="Bagel Fat One, Noto Serif JP, system-ui, sans-serif" fontSize="178" textAnchor="middle">S</text>
            </g>
            {/* Brush skeleton — single-stroke paths that "write" the letters via stroke-dashoffset */}
            <g className="mintro-brush" aria-hidden="true" filter="url(#rough)"
               fill="none" stroke="#0a0908" strokeWidth="26" strokeLinecap="round" strokeLinejoin="round">
              <path className="mb-b" pathLength="1" d="M 80 164 L 80 48 C 150 42 160 98 96 103 C 170 105 168 164 84 164"/>
              <path className="mb-n" pathLength="1" d="M 252 164 L 252 48 L 350 164 L 350 48"/>
              <path className="mb-s" pathLength="1" d="M 528 74 C 522 46 446 42 438 80 C 431 112 522 106 524 138 C 527 178 448 180 434 150"/>
            </g>
            {/* Splatter flicks that pop at the end of each stroke */}
            <g className="mintro-splat" aria-hidden="true" fill="#0a0908">
              <circle className="sp sp-1" cx="92" cy="44" r="4"/>
              <circle className="sp sp-1" cx="78" cy="172" r="3"/>
              <circle className="sp sp-2" cx="358" cy="44" r="4.5"/>
              <circle className="sp sp-2" cx="246" cy="172" r="3"/>
              <circle className="sp sp-3" cx="430" cy="146" r="4"/>
              <circle className="sp sp-3" cx="536" cy="70" r="3"/>
            </g>
            {/* Solid ink letters — optical kerning: N upsized to balance narrow glyph */}
            <g filter="url(#rough)" className="mintro-letters" fill="#0a0908">
              <text x="118" y="166" fontFamily="Bagel Fat One, Noto Serif JP, system-ui, sans-serif" fontSize="178" textAnchor="middle" className="ml-b">B</text>
              <text x="300" y="166" fontFamily="Bagel Fat One, Noto Serif JP, system-ui, sans-serif" fontSize="192" textAnchor="middle" className="ml-n">N</text>
              <text x="482" y="166" fontFamily="Bagel Fat One, Noto Serif JP, system-ui, sans-serif" fontSize="178" textAnchor="middle" className="ml-s">S</text>
            </g>
            {/* Intentional ink drips — fall from letter baselines, tapered ovals */}
            <g fill="#0a0908" className="mintro-drips" aria-hidden="true">
              <path d="M 120 168 Q 122 178 119 188 Q 116 192 118 196 Q 121 200 120 188 Z"/>
              <path d="M 305 168 Q 308 182 304 198 Q 301 204 304 208 Q 309 212 307 196 Z"/>
              <path d="M 482 168 Q 484 176 481 184 Q 478 189 481 193 Q 485 196 484 185 Z"/>
            </g>
          </svg>
        </div>

        {/* SFX burst — manga sound effect text */}
        <div className="mintro-sfx">
          <div className="mintro-sfx-bg"/>
          <span className="mintro-sfx-txt">バ ン!</span>
          <span className="mintro-sfx-en">BAN!</span>
        </div>

        {/* Japanese subtitle */}
        <div className="mintro-sub">
          <div className="mintro-jp">作品紹介</div>
          <div className="mintro-title">Batsal Nath Shrestha</div>
          <div className="mintro-role">広告ストラテジスト · デザイナー · 開発者</div>
        </div>
      </div>

      {/* Top corner page number — Japanese style */}
      <div className="mintro-page">第 一 話</div>
      <div className="mintro-credit">2026 オリジナル</div>

      {/* Page-turn corner */}
      <div className="mintro-corner"/>

      <style>{`
        .mintro-stage{
          --intro-rx:0deg; --intro-ry:0deg; --intro-x:0px; --intro-y:0px;
          --ink-light-x:50%; --ink-light-y:44%;
          display:flex; align-items:center; justify-content:center;
          cursor:pointer;
          background:
            radial-gradient(560px 360px at var(--ink-light-x) var(--ink-light-y), rgba(255,248,221,.78), transparent 65%),
            repeating-linear-gradient(45deg,  transparent 0 18px, rgba(10,9,8,.06) 18px 19px),
            repeating-linear-gradient(-45deg, transparent 0 18px, rgba(10,9,8,.06) 18px 19px),
            #efe6cc;
          color: #0a0908; overflow:hidden;
        }
        /* Auto hand-off: page-turn-style fade into the profile picker */
        .mintro-stage.is-exiting{
          animation: mintroOut .64s cubic-bezier(.4,0,.2,1) forwards;
          transform-origin: 100% 0%;
          pointer-events:none;
        }
        @keyframes mintroOut{
          0%{ opacity:1; transform:scale(1) rotate(0); filter:blur(0); }
          100%{ opacity:0; transform:scale(1.04) rotate(-1.2deg); filter:blur(2px); }
        }
        @media (prefers-reduced-motion: reduce){
          .mintro-stage.is-exiting{ animation: mintroOutFade .4s linear forwards; }
          @keyframes mintroOutFade{ to{ opacity:0; } }
        }
        .mintro-skip{
          position:absolute; top:24px; right:32px; z-index:10;
          font:700 12px/1 "Noto Serif JP", serif; letter-spacing:.06em;
          color:#0a0908; padding:10px 16px; border:2px solid #0a0908;
          border-radius:0; background:#efe6cc;
          box-shadow: 2px 2px 0 #0a0908;
          opacity:0; animation: mfade .3s ease 1.4s both;
        }
        .mintro-skip:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #0a0908; }
        @keyframes mfade{ to{ opacity:1; } }

        .mintro-page{
          position:absolute; top:32px; left:32px;
          font: 800 16px/1 "Noto Serif JP", serif; color:#0a0908;
          padding: 6px 12px; border: 2.5px solid #0a0908;
          background: #efe6cc; box-shadow: 3px 3px 0 #0a0908;
          opacity: 0; transform: rotate(-3deg);
          animation: mfade .3s ease .3s both;
        }
        .mintro-credit{
          position:absolute; bottom:32px; left:32px;
          font: 600 11px/1 "Noto Serif JP", serif; letter-spacing:.1em;
          color: rgba(10,9,8,.6);
          opacity: 0; animation: mfade .3s ease 1.0s both;
        }

        .mintro-center{
          position:relative; display:flex; flex-direction:column; align-items:center; gap:14px;
          z-index: 2; max-width: min(900px, 90vw); width:100%; text-align:center;
          transform-style:preserve-3d;
          transform:
            perspective(1000px)
            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;
        }

        /* BNS wordmark — confident shōnen cover ink */
        .mintro-mark{
          position:relative;
          transform:translateZ(62px);
          transform-style:preserve-3d;
        }
        .mintro-svg{ display:block; margin:0 auto; max-width:640px; width:min(66vw, 640px); overflow:visible; position:relative; z-index:1; }

        /* Halftone radiating burst — atmosphere BEHIND the letters */
        .mintro-halo{
          position:absolute; inset:-12% -8%;
          background:
            radial-gradient(circle at 50% 55%, rgba(10,9,8,.0) 0%, rgba(10,9,8,.0) 22%, rgba(10,9,8,.18) 38%, transparent 70%),
            radial-gradient(circle at 50% 55%, transparent 30%, #0a0908 30.5%, #0a0908 31%, transparent 31.5%) ;
          background-size: 100% 100%, 6px 6px;
          -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 55%, #000 0%, #000 35%, transparent 75%);
                  mask: radial-gradient(ellipse 70% 60% at 50% 55%, #000 0%, #000 35%, transparent 75%);
          opacity:0;
          pointer-events:none;
          z-index:0;
          transform:translateZ(-44px);
          filter: blur(.4px);
        }
        .phase-2 .mintro-halo, .phase-3 .mintro-halo{
          animation: haloIn .5s cubic-bezier(.3,1.1,.4,1) .05s both;
        }
        @keyframes haloIn{
          from{ opacity:0; transform:translateZ(-44px) scale(.78); }
          to  { opacity:.55; transform:translateZ(-44px) scale(1); }
        }

        /* Cream-paper offset — appears with the solid ink in phase 2 */
        .mintro-depth{
          opacity:0;
          transform:translate(10px, 12px) translateZ(-22px);
          filter: drop-shadow(0 2px 0 rgba(10,9,8,.35));
        }
        .phase-2 .mintro-depth, .phase-3 .mintro-depth{
          animation: depthIn .5s cubic-bezier(.4,1.6,.4,1) .02s both;
        }
        @keyframes depthIn{
          from{ opacity:0; transform: translate(2px,4px) translateZ(-22px) scale(.94); }
          to  { opacity:1; transform: translate(10px,12px) translateZ(-22px) scale(1); }
        }

        /* Brush skeleton — strokes draw themselves via stroke-dashoffset */
        .mintro-brush path{
          stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
        }
        .phase-1 .mb-b, .phase-2 .mb-b, .phase-3 .mb-b{
          animation: brushDraw .55s cubic-bezier(.55,.1,.35,1) .15s both;
        }
        .phase-1 .mb-n, .phase-2 .mb-n, .phase-3 .mb-n{
          animation: brushDraw .55s cubic-bezier(.55,.1,.35,1) .70s both;
        }
        .phase-1 .mb-s, .phase-2 .mb-s, .phase-3 .mb-s{
          animation: brushDraw .60s cubic-bezier(.55,.1,.35,1) 1.20s both;
        }
        @keyframes brushDraw{
          0%   { opacity:1; stroke-dashoffset:1; }
          100% { opacity:1; stroke-dashoffset:0; }
        }
        /* Once the solid ink takes over (phase 2), the rough brush fades out under it */
        .phase-2 .mintro-brush, .phase-3 .mintro-brush{
          animation: brushFade .4s ease .15s both;
        }
        @keyframes brushFade{ from{ opacity:1; } to{ opacity:0; } }

        /* Splatter flicks — pop right as each stroke finishes */
        .mintro-splat .sp{ opacity:0; transform-box: fill-box; transform-origin:center; }
        .phase-1 .sp-1, .phase-2 .sp-1, .phase-3 .sp-1{ animation: splat .3s cubic-bezier(.3,1.8,.4,1) .60s both; }
        .phase-1 .sp-2, .phase-2 .sp-2, .phase-3 .sp-2{ animation: splat .3s cubic-bezier(.3,1.8,.4,1) 1.15s both; }
        .phase-1 .sp-3, .phase-2 .sp-3, .phase-3 .sp-3{ animation: splat .3s cubic-bezier(.3,1.8,.4,1) 1.70s both; }
        @keyframes splat{
          0%  { opacity:0; transform: scale(0); }
          60% { opacity:1; transform: scale(1.4); }
          100%{ opacity:1; transform: scale(1); }
        }

        /* Solid ink letters — settle in over the brush once it's written (phase 2) */
        .mintro-letters text{
          opacity: 0;
          transform-box: fill-box;
          transform-origin: center;
        }
        .phase-2 .ml-b, .phase-3 .ml-b{
          animation: inkSettle .4s cubic-bezier(.4,1.5,.4,1) .04s both;
        }
        .phase-2 .ml-n, .phase-3 .ml-n{
          animation: inkSettle .4s cubic-bezier(.4,1.5,.4,1) .12s both;
        }
        .phase-2 .ml-s, .phase-3 .ml-s{
          animation: inkSettle .4s cubic-bezier(.4,1.5,.4,1) .20s both;
        }
        @keyframes inkSettle{
          0%   { opacity:0; transform: scale(.86); }
          60%  { opacity:1; transform: scale(1.04); }
          100% { opacity:1; transform: scale(1); }
        }

        /* Slight character per letter — hand-set type feel */
        .ml-b{ transform-origin: 118px 130px; }
        .ml-n{ transform-origin: 300px 130px; }
        .ml-s{ transform-origin: 482px 130px; }
        .phase-3 .ml-b{ transform: rotate(-2deg); }
        .phase-3 .ml-n{ transform: rotate(1deg); }
        .phase-3 .ml-s{ transform: rotate(-1.2deg); }

        /* Intentional drips — fall from letter baselines */
        .mintro-drips{ opacity:0; }
        .phase-2 .mintro-drips, .phase-3 .mintro-drips{
          animation: dripsIn .6s cubic-bezier(.3,.8,.4,1) .15s both;
          transform-origin: center top;
        }
        @keyframes dripsIn{
          0%   { opacity:0; transform: scaleY(.3); }
          100% { opacity:1; transform: scaleY(1); }
        }

        /* SFX burst panel */
        .mintro-sfx{
          position: relative; width: max-content;
          padding: 12px 20px; margin-top: 12px;
          background: #0a0908; color: #efe6cc;
          font: 800 32px/1 "Noto Serif JP", serif;
          border: 3px solid #0a0908;
          box-shadow: 6px 6px 0 #efe6cc, 6px 6px 0 5px #0a0908;
          opacity: 0; transform: rotate(-4deg) scale(.6);
          transform-style:preserve-3d;
          translate: calc(var(--intro-x) * -.25) calc(var(--intro-y) * -.2);
        }
        .phase-2 .mintro-sfx, .phase-3 .mintro-sfx{
          animation: sfxIn .35s cubic-bezier(.3,1.6,.3,1) both;
        }
        @keyframes sfxIn{
          0%   { opacity:0; transform: rotate(-12deg) scale(.5); }
          60%  { opacity:1; transform: rotate(2deg) scale(1.15); }
          100% { opacity:1; transform: rotate(-4deg) scale(1); }
        }
        .mintro-sfx-bg{
          position: absolute; inset: -20px; z-index:-1;
          background:
            repeating-conic-gradient(from 0deg at 50% 50%,
              transparent 0deg 12deg, rgba(10,9,8,.18) 12deg 14deg);
          mask: radial-gradient(circle at center, #000 0%, #000 40%, transparent 70%);
          -webkit-mask: radial-gradient(circle at center, #000 0%, #000 40%, transparent 70%);
        }
        .mintro-sfx-txt{ display:inline-block; }
        .mintro-sfx-en{
          display:block; font: 700 11px/1 var(--mono); letter-spacing:.3em;
          margin-top: 4px; opacity:.8;
        }

        /* Japanese subtitle */
        .mintro-sub{
          opacity: 0; margin-top: 8px;
          transform:translateZ(36px);
        }
        .phase-3 .mintro-sub{ animation: subIn .5s ease .05s both; }
        @keyframes subIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
        .mintro-jp{
          font: 800 14px/1 "Noto Serif JP", serif; letter-spacing:.4em;
          color: rgba(10,9,8,.7); margin-bottom: 10px;
        }
        .mintro-title{
          font: 700 30px/1.1 var(--body); letter-spacing:-.01em; color: #0a0908;
          margin-bottom: 6px;
        }
        .mintro-role{
          font: 500 13px/1 "Noto Serif JP", serif; letter-spacing:.04em;
          color: rgba(10,9,8,.6);
        }

        /* Speed lines radiating outward */
        .mintro-speed{
          position:absolute; inset:0; pointer-events:none; z-index:0;
          opacity: 0;
          mask: radial-gradient(circle at center, transparent 30%, #000 70%);
          -webkit-mask: radial-gradient(circle at center, transparent 30%, #000 70%);
        }
        .phase-2 .mintro-speed, .phase-3 .mintro-speed{
          animation: mfade .4s ease both;
        }
        .mintro-speed i{
          position:absolute; left:50%; top:50%; width: 60vw; height: 3px;
          background: linear-gradient(90deg, transparent 0%, rgba(10,9,8,.4) 50%, transparent 100%);
          transform-origin: left center;
        }

        /* Page-turn corner that lifts to "turn the page" */
        .mintro-corner{
          position:absolute; bottom:0; right:0;
          width: 120px; height: 120px;
          background:
            linear-gradient(135deg, transparent 50%, rgba(10,9,8,.18) 50%, rgba(10,9,8,.32) 60%, #efe6cc 60%);
          opacity:.65; pointer-events:none;
        }
        .phase-3 .mintro-corner{
          animation: pageCurl .9s cubic-bezier(.3,.7,.4,1) .6s forwards;
        }
        @keyframes pageCurl{
          0%   { transform: scale(1); opacity:.65; }
          100% { transform: scale(20); opacity: 0; }
        }

        @media (max-width: 640px){
          .mintro-svg{ width:min(84vw, 460px); }
        }

        @media (prefers-reduced-motion: reduce){
          .mintro-brush, .mintro-splat{ display:none !important; }
          .mintro-letters text, .mintro-depth{
            animation: none !important; opacity:1 !important; transform:none !important;
          }
        }
      `}</style>
    </div>
  );
}

window.MangaIntro = MangaIntro;