// === Anime character scene — SVG-based "kawaii" companion ===
// Uses pure SVG with CSS animations for a cel-shaded floating character.
function AnimeCharacter() {
  const ref = useRef(null);
  const [bubble, setBubble] = useState("hi! i'm Aki, your guide ✦");

  useEffect(() => {
    const lines = [
      "hi! i'm Aki, your guide ✦",
      "scroll down — there's more ↓",
      "try the playground ◉",
      "did you find the easter eggs?",
      "press up-up-down-down… you know the rest",
      "type 'shubham' anywhere on the page",
      "the chat at the top? try it!",
      "made with ☕ and late nights",
    ];
    let i = 0;
    const id = setInterval(() => {
      i = (i + 1) % lines.length;
      setBubble(lines[i]);
    }, 5500);
    return () => clearInterval(id);
  }, []);

  // follow scroll with damping
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let target = 0, current = 0;
    const onScroll = () => { target = window.scrollY * 0.05; };
    window.addEventListener('scroll', onScroll, { passive: true });
    let raf = 0;
    function loop() {
      current += (target - current) * 0.08;
      el.style.transform = `translateY(${current}px)`;
      raf = requestAnimationFrame(loop);
    }
    loop();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('scroll', onScroll); };
  }, []);

  return (
    <div className="anime-companion" ref={ref}>
      <div className="anime-bubble">
        <span>{bubble}</span>
        <div className="anime-bubble-tail"></div>
      </div>
      <div className="anime-char">
        <svg viewBox="0 0 200 240" className="anime-svg">
          {/* hair back */}
          <path d="M 50 90 Q 30 50 60 30 Q 100 5 140 30 Q 170 50 150 90 L 165 150 Q 160 180 140 175 L 60 175 Q 40 180 35 150 Z" fill="#2a1f3d" className="anime-hair-back" />

          {/* body */}
          <ellipse cx="100" cy="200" rx="38" ry="34" fill="#5a4a8a" />
          <rect x="62" y="180" width="76" height="50" rx="8" fill="#5a4a8a" />

          {/* neck */}
          <rect x="92" y="130" width="16" height="20" fill="#fde0c8" />

          {/* face */}
          <ellipse cx="100" cy="100" rx="42" ry="48" fill="#fde0c8" />

          {/* hair front */}
          <path d="M 56 70 Q 60 40 100 35 Q 140 40 144 70 Q 140 80 130 78 Q 120 60 100 62 Q 80 60 70 78 Q 60 80 56 70 Z" fill="#3a2a4d" />
          <path d="M 130 78 Q 145 90 148 110 L 142 105 Q 140 95 130 95 Z" fill="#3a2a4d" />
          <path d="M 70 78 Q 55 90 52 110 L 58 105 Q 60 95 70 95 Z" fill="#3a2a4d" />

          {/* eyes */}
          <g className="anime-eyes">
            {/* left eye */}
            <ellipse cx="82" cy="105" rx="8" ry="11" fill="#fff" />
            <ellipse cx="82" cy="106" rx="6" ry="9" fill="#d4a574" />
            <ellipse cx="82" cy="107" rx="4" ry="6" fill="#1a0f08" />
            <circle cx="84" cy="103" r="2" fill="#fff" />
            {/* right eye */}
            <ellipse cx="118" cy="105" rx="8" ry="11" fill="#fff" />
            <ellipse cx="118" cy="106" rx="6" ry="9" fill="#d4a574" />
            <ellipse cx="118" cy="107" rx="4" ry="6" fill="#1a0f08" />
            <circle cx="120" cy="103" r="2" fill="#fff" />
          </g>

          {/* eyelid (for blink) */}
          <g className="anime-eyelids">
            <rect x="74" y="94" width="16" height="0" fill="#fde0c8" />
            <rect x="110" y="94" width="16" height="0" fill="#fde0c8" />
          </g>

          {/* eyebrows */}
          <path d="M 76 92 Q 82 89 90 92" stroke="#3a2a4d" strokeWidth="2" fill="none" strokeLinecap="round" />
          <path d="M 110 92 Q 118 89 124 92" stroke="#3a2a4d" strokeWidth="2" fill="none" strokeLinecap="round" />

          {/* blush */}
          <ellipse cx="76" cy="120" rx="5" ry="3" fill="#ff9ab0" opacity="0.6" />
          <ellipse cx="124" cy="120" rx="5" ry="3" fill="#ff9ab0" opacity="0.6" />

          {/* mouth */}
          <path d="M 94 128 Q 100 132 106 128" stroke="#a0506a" strokeWidth="1.5" fill="none" strokeLinecap="round" />

          {/* hair side bangs */}
          <path d="M 56 70 Q 50 100 56 130 Q 60 110 62 95 Z" fill="#2a1f3d" />
          <path d="M 144 70 Q 150 100 144 130 Q 140 110 138 95 Z" fill="#2a1f3d" />

          {/* hair highlight */}
          <path d="M 80 50 Q 100 45 120 50" stroke="#d4a574" strokeWidth="1.5" fill="none" opacity="0.5" />
        </svg>
        <div className="anime-shadow"></div>
        <div className="anime-sparkle anime-sparkle-1">✦</div>
        <div className="anime-sparkle anime-sparkle-2">✧</div>
        <div className="anime-sparkle anime-sparkle-3">✦</div>
      </div>
    </div>
  );
}

window.AnimeCharacter = AnimeCharacter;