// Scroll-scrubbed pinned walkthrough — language driven by window.C.walk

const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React;

function WalkPhone({ state }) {
  if (state === 'intro') return <PhoneNameInput />;
  if (state === 'scene') {
    return (
      <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', background: '#1a1a3e' }}>
        <img src="/assets/showcase.jpg" alt="Story scene" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}/>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,62,0.5) 0%, transparent 30%, rgba(26,26,62,0.9) 100%)' }}/>
        <div style={{ position: 'absolute', top: 60, left: 14, right: 14, background: 'rgba(26, 26, 62, 0.75)', backdropFilter: 'blur(12px)', borderRadius: 12, padding: '10px 14px', color: 'white', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ display: 'flex', gap: 2, alignItems: 'end', height: 12 }}>
            {[8, 12, 6, 10, 7].map((h, i) => (
              <span key={i} style={{ width: 3, height: h, background: '#c9b8ff', borderRadius: 1, animation: `wave 1.2s ease-in-out infinite`, animationDelay: `${i * 0.1}s`}}/>
            ))}
          </span>
          CH. 3 — THE CORAL CAVERN
        </div>
        <div style={{ position: 'absolute', bottom: 50, left: 16, right: 16, color: 'white', textAlign: 'center' }}>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 14, fontStyle: 'italic', marginBottom: 6 }}>"Maya held her breath…"</div>
          <div style={{ fontSize: 11, lineHeight: 1.4, opacity: 0.9 }}>A pod of dolphins wove through the coral, singing a song only she could understand.</div>
        </div>
      </div>
    );
  }
  if (state === 'choice') return <PhoneChoiceScene />;
  if (state === 'end') {
    return (
      <div style={{ width: '100%', height: '100%', background: 'linear-gradient(180deg, #ffd4a8 0%, #e8a3d4 50%, #7c4dff 100%)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '80px 24px 30px', textAlign: 'center', position: 'relative' }}>
        <div style={{ position: 'absolute', bottom: 120, left: 0, right: 0, height: 80, background: 'radial-gradient(ellipse at center bottom, rgba(255,220,150,0.8), transparent 70%)'}}/>
        <div style={{ fontSize: 52, marginBottom: 12, zIndex: 2, filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.2))' }}>🌙</div>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 30, color: '#1a1a3e', lineHeight: 1.1, fontStyle: 'italic', marginBottom: 10, zIndex: 2 }}>The End.</div>
        <div style={{ fontSize: 13, color: '#2a1a5e', opacity: 0.85, zIndex: 2, maxWidth: 200, lineHeight: 1.4 }}>Maya drifted off to sleep, her treasure safe beside her.</div>
        <div style={{ marginTop: 'auto', display: 'flex', gap: 8, zIndex: 2 }}>
          <div style={{ background: 'rgba(255,255,255,0.9)', color: '#1a1a3e', padding: '10px 14px', borderRadius: 12, fontSize: 11, fontWeight: 600 }}>✨ New Story</div>
          <div style={{ background: 'rgba(26,26,62,0.4)', color: 'white', padding: '10px 14px', borderRadius: 12, fontSize: 11, fontWeight: 600, border: '1px solid rgba(255,255,255,0.3)' }}>💤 Bedtime</div>
        </div>
      </div>
    );
  }
  return null;
}

function Walkthrough() {
  const WALK_STEPS = window.C.walk.steps;
  const [progress, setProgress] = useStateW(0);
  const wrapperRef = useRefW(null);

  useEffectW(() => {
    const el = wrapperRef.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = el.offsetHeight - vh;
      const scrolled = Math.min(Math.max(-rect.top, 0), total);
      const pct = total > 0 ? scrolled / total : 0;
      setProgress(pct * (WALK_STEPS.length - 1));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const activeIdx = Math.round(progress);
  const TRANSITION = 0.35;
  const slideVisual = (i) => {
    const d = i - progress;
    const absd = Math.abs(d);
    if (absd >= TRANSITION) return { opacity: 0, y: d < 0 ? -30 : 30 };
    const t = absd / TRANSITION;
    return { opacity: 1 - t, y: (d / TRANSITION) * 30 };
  };

  return (
    <div ref={wrapperRef} className="walk-wrapper" style={{ height: `${WALK_STEPS.length * 100}vh` }}>
      <div className="walk-pin">
        <div className="walk-stage">
          <div className="walk-text-col">
            {WALK_STEPS.map((s, i) => {
              const { opacity, y } = slideVisual(i);
              return (
                <div key={i} className="walk-slide-text" style={{ opacity, transform: `translateY(${y}px)`, pointerEvents: opacity > 0.5 ? 'auto' : 'none' }}>
                  <div className="walk-step-badge">
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#c9b8ff' }}/>
                    {s.badge}
                  </div>
                  <h3>{s.title}</h3>
                  <p>{s.body}</p>
                </div>
              );
            })}
          </div>
          <div className="walk-phone-col">
            <div className="phone walk-phone">
              <div className="phone-notch"/>
              <div className="phone-screen">
                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 42, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 24px 0', zIndex: 10, color: activeIdx >= 1 && activeIdx <= 2 ? 'white' : '#1a1a3e', fontSize: 12, fontWeight: 600, transition: 'color 0.4s' }}>
                  <span>9:41</span>
                  <span>•••</span>
                </div>
                {WALK_STEPS.map((s, i) => {
                  const { opacity } = slideVisual(i);
                  return (
                    <div key={i} style={{ position: 'absolute', inset: 0, opacity, pointerEvents: opacity > 0.5 ? 'auto' : 'none' }}>
                      <WalkPhone state={s.phoneState} />
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="walk-progress">
              {WALK_STEPS.map((_, i) => (
                <div key={i} style={{ width: activeIdx === i ? 32 : 8, height: 4, borderRadius: 2, background: activeIdx === i ? '#c9b8ff' : 'rgba(255,255,255,0.2)', transition: 'all 0.4s ease' }}/>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Walkthrough = Walkthrough;