// Phone mockup with cycling hero states

const { useState, useEffect } = React;

function PhoneChoiceScene() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'linear-gradient(180deg, #2d1b4d 0%, #5a3a7a 50%, #8a6ba0 100%)',
      position: 'relative', display: 'flex', flexDirection: 'column'
    }}>
      <div style={{
        flex: '0 0 52%',
        background: `
          radial-gradient(ellipse at 50% 90%, rgba(232,213,245,0.5), transparent 60%),
          radial-gradient(circle at 30% 30%, rgba(255, 220, 180, 0.45), transparent 40%),
          linear-gradient(180deg, #3b2760 0%, #6b4a8f 50%, #2a5a75 100%)
        `,
        position: 'relative', overflow: 'hidden'
      }}>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '60%',
          background: `
            radial-gradient(ellipse 40px 100px at 15% 100%, #1a1a3e, transparent),
            radial-gradient(ellipse 55px 130px at 35% 100%, #2a1a4e, transparent),
            radial-gradient(ellipse 45px 115px at 65% 100%, #1a1a3e, transparent),
            radial-gradient(ellipse 60px 140px at 85% 100%, #2a1a4e, transparent)
          `}}/>
        <div style={{ position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)',
          width: 40, height: 40, borderRadius: '50%',
          background: 'radial-gradient(circle, #fff5d0, #ffb84d 40%, transparent 70%)',
          filter: 'blur(2px)', animation: 'glow 3s ease-in-out infinite'
        }}/>
        <div style={{ position: 'absolute', top: 52, left: 16, right: 16,
          background: 'rgba(26, 26, 62, 0.75)', backdropFilter: 'blur(12px)',
          borderRadius: 12, padding: '8px 14px', color: 'white',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
          display: 'flex', alignItems: 'center', gap: 8
        }}>
          <span style={{ display: 'flex', gap: 2 }}>
            <span style={{ width: 3, height: 8, background: '#c9b8ff', borderRadius: 1 }}/>
            <span style={{ width: 3, height: 12, background: '#c9b8ff', borderRadius: 1 }}/>
            <span style={{ width: 3, height: 6, background: '#c9b8ff', borderRadius: 1 }}/>
            <span style={{ width: 3, height: 10, background: '#c9b8ff', borderRadius: 1 }}/>
          </span>
          THE WHISPERING WOODS
        </div>
      </div>
      <div style={{ padding: '16px 18px 0', color: 'white', textAlign: 'center' }}>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 15, fontStyle: 'italic', marginBottom: 6 }}>
          A fork in the path…
        </div>
        <div style={{ fontSize: 11, lineHeight: 1.35, opacity: 0.82 }}>
          A silver brook gurgles to your left, while a path of glowing fungi leads deep into the thicket. <strong>Which way will Maya go?</strong>
        </div>
      </div>
      <div style={{ padding: '14px 14px 10px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(20px)', borderRadius: 14, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 4px 14px rgba(0,0,0,0.2)' }}>
          <span style={{ fontSize: 22 }}>🍄</span>
          <div>
            <div style={{ color: '#ff8c42', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em' }}>OPTION A</div>
            <div style={{ color: '#1a1a3e', fontSize: 12, fontWeight: 600 }}>Follow the Fungi</div>
          </div>
        </div>
        <div style={{ background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(20px)', borderRadius: 14, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 4px 14px rgba(0,0,0,0.2)' }}>
          <span style={{ fontSize: 22 }}>✨</span>
          <div>
            <div style={{ color: '#7c4dff', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em' }}>OPTION B</div>
            <div style={{ color: '#1a1a3e', fontSize: 12, fontWeight: 600 }}>Chase the Sparkle</div>
          </div>
        </div>
      </div>
      <div style={{ marginTop: 'auto', padding: '8px 14px', background: 'rgba(26, 26, 62, 0.85)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: 'rgba(255,255,255,0.85)', fontSize: 10, fontWeight: 600, letterSpacing: '0.08em' }}>
        <span>CH. 2: THE CROSSING</span>
        <span style={{ display: 'flex', gap: 10 }}><span>🔊</span><span>⏸</span></span>
      </div>
    </div>
  );
}

function PhoneNameInput() {
  const p = window.C.phone;
  const [typed, setTyped] = useState('');
  useEffect(() => {
    const target = 'Maya';
    let i = 0;
    setTyped('');
    const t = setInterval(() => {
      i++;
      setTyped(target.slice(0, i));
      if (i >= target.length) clearInterval(t);
    }, 200);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ width: '100%', height: '100%', background: 'linear-gradient(180deg, #e8d5f5 0%, #d5e8f5 100%)', display: 'flex', flexDirection: 'column', padding: '60px 24px 24px' }}>
      <div style={{ fontSize: 11, color: '#7c4dff', fontWeight: 700, letterSpacing: '0.12em', textAlign: 'center', marginBottom: 20 }}>
        {p.step1}
      </div>
      <div style={{ fontSize: 54, textAlign: 'center', marginBottom: 8, animation: 'bounce 2s ease-in-out infinite' }}>👶</div>
      <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 26, textAlign: 'center', color: '#1a1a3e', lineHeight: 1.15, marginBottom: 8, letterSpacing: '-0.01em' }}>
        <em style={{ color: '#7c4dff' }}>{p.whoIsHero}</em>
      </div>
      <div style={{ fontSize: 12, color: '#6b6880', textAlign: 'center', marginBottom: 28 }}>{p.nameSubtitle}</div>
      <div style={{ background: 'white', borderRadius: 16, padding: '18px 20px', boxShadow: '0 8px 24px -8px rgba(124,77,255,0.3)', border: '2px solid #7c4dff', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, color: '#1a1a3e', fontStyle: 'italic', flex: 1 }}>
          {typed}<span style={{ display: 'inline-block', width: 2, height: 22, background: '#7c4dff', marginLeft: 2, verticalAlign: 'middle', animation: 'blink 1s infinite' }}/>
        </div>
      </div>
      <div style={{ marginTop: 'auto', background: '#7c4dff', color: 'white', borderRadius: 18, padding: '14px', textAlign: 'center', fontWeight: 600, fontSize: 14 }}>
        {p.continue}
      </div>
    </div>
  );
}

function PhoneThemePicker() {
  const p = window.C.phone;
  const themes = p.miniThemes;
  const [selected, setSelected] = useState(-1);
  useEffect(() => {
    setSelected(-1);
    const pick = setTimeout(() => setSelected(1), 2000);
    return () => clearTimeout(pick);
  }, []);
  return (
    <div style={{ width: '100%', height: '100%', background: 'linear-gradient(180deg, #d5e8f5 0%, #e8d5f5 100%)', display: 'flex', flexDirection: 'column', padding: '60px 16px 20px' }}>
      <div style={{ fontSize: 11, color: '#7c4dff', fontWeight: 700, letterSpacing: '0.12em', textAlign: 'center', marginBottom: 14 }}>{p.step2}</div>
      <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, textAlign: 'center', color: '#1a1a3e', lineHeight: 1.15, letterSpacing: '-0.01em', marginBottom: 4 }}>
        <em style={{ color: '#7c4dff' }}>{p.pickWorld}</em>{p.pickWorldSuffix}
      </div>
      <div style={{ fontSize: 11, color: '#6b6880', textAlign: 'center', marginBottom: 20 }}>{p.worldSubtitle}</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {themes.map((t, i) => (
          <div key={i} style={{
            aspectRatio: '1/1', borderRadius: 14, background: t.bg,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
            boxShadow: selected === i ? '0 0 0 3px #7c4dff, 0 8px 20px rgba(124,77,255,0.5)' : '0 4px 12px rgba(0,0,0,0.12)',
            transform: selected === i ? 'scale(1.04)' : 'scale(1)',
            transition: 'all 0.3s ease', position: 'relative'
          }}>
            <span style={{ fontSize: 28, filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))' }}>{t.emoji}</span>
            <span style={{ color: 'white', fontSize: 10, fontWeight: 600, textShadow: '0 1px 2px rgba(0,0,0,0.3)' }}>{t.name}</span>
            {selected === i && (
              <div style={{ position: 'absolute', top: 6, right: 6, width: 18, height: 18, borderRadius: '50%', background: '#7c4dff', color: 'white', fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>✓</div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroPhone({ cycleSpeed = 3500, emojiDensity = 6 }) {
  const p = window.C.phone;
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % 3), cycleSpeed);
    return () => clearInterval(t);
  }, [cycleSpeed]);

  const scenes = [<PhoneNameInput />, <PhoneThemePicker />, <PhoneChoiceScene />];

  const allOrbit = [
    { e: '🦕', top: '-6%',  left: '-18%', size: 54, delay: '0s'   },
    { e: '✨', top: '8%',   right: '-14%', size: 36, delay: '0.8s' },
    { e: '🚀', top: '32%',  left: '-22%', size: 48, delay: '1.6s' },
    { e: '🧚', top: '58%',  right: '-20%', size: 52, delay: '0.4s' },
    { e: '🌙', top: '82%',  left: '-12%', size: 38, delay: '2.2s' },
    { e: '🏴‍☠️', top: '88%', right: '-16%', size: 46, delay: '1.1s' },
    { e: '⭐', top: '-4%',  right: '28%',  size: 28, delay: '1.8s' },
    { e: '🧜', top: '46%',  right: '-26%', size: 44, delay: '2.6s' },
  ];
  const orbitCount = Math.round((emojiDensity / 10) * allOrbit.length);
  const orbitEmojis = allOrbit.slice(0, orbitCount);

  return (
    <div style={{ position: 'relative' }}>
      {orbitEmojis.map((o, i) => (
        <div key={i} className="float-emoji" style={{ position: 'absolute', top: o.top, left: o.left, right: o.right, fontSize: o.size, animationDelay: o.delay, zIndex: 0 }}>{o.e}</div>
      ))}
      <div className="phone" style={{ position: 'relative', zIndex: 2 }}>
        <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: idx === 2 ? 'white' : '#1a1a3e', fontSize: 12, fontWeight: 600, transition: 'color 0.4s' }}>
            <span>9:41</span>
            <span style={{ display: 'flex', gap: 5, alignItems: 'center', fontSize: 11 }}>▲ WiFi 🔋</span>
          </div>
          {scenes.map((s, i) => (
            <div key={i} style={{ position: 'absolute', inset: 0, opacity: idx === i ? 1 : 0, transition: 'opacity 0.6s ease', pointerEvents: idx === i ? 'auto' : 'none' }}>{s}</div>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 20 }}>
        {[0,1,2].map(i => (
          <div key={i} style={{ width: idx === i ? 28 : 8, height: 8, borderRadius: 4, background: idx === i ? '#7c4dff' : 'rgba(26,26,62,0.2)', transition: 'all 0.4s ease' }}/>
        ))}
      </div>
      <div style={{ textAlign: 'center', fontSize: 13, color: '#6b6880', marginTop: 10, fontFamily: "'Instrument Serif', serif", fontStyle: 'italic' }}>{p.labels[idx]}</div>
    </div>
  );
}

window.HeroPhone = HeroPhone;
window.PhoneChoiceScene = PhoneChoiceScene;
window.PhoneNameInput = PhoneNameInput;
window.PhoneThemePicker = PhoneThemePicker;