// Phone illustration components (used in hero + solution)
const PhoneOne = () => (
  <div className="phone-frame phone-1" aria-hidden="true">
    <div className="notch"></div>
    <div className="phone-screen">
      <div className="ps-top">
        <span>9:41</span>
        <span>● ● ●</span>
      </div>
      <div style={{display:'flex', alignItems:'center', gap:8, marginTop:4}}>
        <div className="ps-avatar">S</div>
        <div>
          <div className="ps-h">Hola, Samuel</div>
          <div className="ps-sub">¿Cómo te sientes hoy?</div>
        </div>
      </div>
      <div className="emo-grid">
        <div className="emo-tile">
          <div className="emo-face" style={{background:'#FAEEDA'}}>🙂</div>
          <span>Bien</span>
        </div>
        <div className="emo-tile">
          <div className="emo-face" style={{background:'#E1F5EE'}}>😌</div>
          <span>Tranquilo</span>
        </div>
        <div className="emo-tile">
          <div className="emo-face" style={{background:'#FAEEDA'}}>😟</div>
          <span>Nervioso</span>
        </div>
        <div className="emo-tile">
          <div className="emo-face" style={{background:'#E1F5EE'}}>😴</div>
          <span>Cansado</span>
        </div>
      </div>
      <div style={{marginTop:'auto', padding:'8px 10px', background:'var(--teal)', color:'white', borderRadius:10, fontSize:10, fontWeight:800, textAlign:'center'}}>
        Continuar
      </div>
    </div>
  </div>
);

const PhoneTwo = () => (
  <div className="phone-frame phone-2" aria-hidden="true">
    <div className="notch"></div>
    <div className="phone-screen">
      <div className="ps-top" style={{color:'#7A4A0F'}}>
        <span>Panel docente</span>
        <span>3 alertas</span>
      </div>
      <div className="ps-h" style={{color:'#7A4A0F', marginTop:6}}>5° Primaria</div>
      <div className="ps-sub">22 estudiantes · 3 con PIAR</div>
      <div style={{display:'flex', flexDirection:'column', gap:6, marginTop:8}}>
        <div className="game-tile" style={{background:'white'}}>
          <div className="gt-icon" style={{background:'#FAEEDA', color:'#7A4A0F'}}>!</div>
          <div>
            <div>Samuel · necesita pausa</div>
            <div className="gt-meta">Detectado hace 2 min</div>
          </div>
        </div>
        <div className="game-tile" style={{background:'white'}}>
          <div className="gt-icon" style={{background:'#E1F5EE'}}>✓</div>
          <div>
            <div>Valentina · nivel 4</div>
            <div className="gt-meta">+8% esta semana</div>
          </div>
        </div>
        <div className="game-tile" style={{background:'white'}}>
          <div className="gt-icon" style={{background:'#E1F5EE'}}>↗</div>
          <div>
            <div>Promedio del aula</div>
            <div className="gt-meta">72% comprensión</div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const PhoneThree = () => (
  <div className="phone-frame phone-3" aria-hidden="true">
    <div className="notch"></div>
    <div className="phone-screen">
      <div className="ps-top">
        <span>Mis juegos</span>
        <span>★ 12</span>
      </div>
      <div className="progress-row" style={{marginTop:6}}>
        <span>Nivel 3</span>
        <div className="progress-track"><div className="progress-fill" style={{width:'62%'}}></div></div>
        <span>62%</span>
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:6, marginTop:6}}>
        <div className="game-tile">
          <div className="gt-icon">🔍</div>
          <div>
            <div>Detective de emociones</div>
            <div className="gt-meta">Reconocimiento facial</div>
          </div>
        </div>
        <div className="game-tile">
          <div className="gt-icon">🥁</div>
          <div>
            <div>Tambor del bosque</div>
            <div className="gt-meta">Regulación sensorial</div>
          </div>
        </div>
        <div className="game-tile">
          <div className="gt-icon">🏘️</div>
          <div>
            <div>Constructores del barrio</div>
            <div className="gt-meta">Habilidades sociales</div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const PhoneStack = () => (
  <div className="phone-stack" aria-label="Mockup de la aplicación móvil Te Reto Inclusivo">
    <img
      src="assets/hero.png"
      alt="Pantallas de la aplicación Te Reto App"
      style={{width:'100%', height:'auto', display:'block'}}
    />
  </div>
);

const FeaturePhone = () => (
  <div className="feature-phone" aria-hidden="true">
    <div className="notch"></div>
    <div className="phone-screen">
      <div className="ps-top">
        <span>Check-in emocional</span>
        <span>9:41</span>
      </div>
      <div style={{textAlign:'center', marginTop:8}}>
        <div className="ps-h" style={{fontSize:15}}>¿Cómo te sientes ahora?</div>
        <div className="ps-sub">Toca o desliza para escoger</div>
      </div>
      <div className="emo-grid" style={{gridTemplateColumns:'repeat(3,1fr)', marginTop:14}}>
        <div className="emo-tile"><div className="emo-face" style={{background:'#FAEEDA', fontSize:18}}>😊</div><span>Feliz</span></div>
        <div className="emo-tile"><div className="emo-face" style={{background:'#E1F5EE', fontSize:18}}>😌</div><span>Calmado</span></div>
        <div className="emo-tile"><div className="emo-face" style={{background:'#FAEEDA', fontSize:18}}>😟</div><span>Inquieto</span></div>
        <div className="emo-tile" style={{borderColor:'var(--teal)', background:'var(--teal-bg)'}}><div className="emo-face" style={{background:'var(--teal)', color:'white', fontSize:18}}>😢</div><span>Triste</span></div>
        <div className="emo-tile"><div className="emo-face" style={{background:'#FAEEDA', fontSize:18}}>😠</div><span>Enojado</span></div>
        <div className="emo-tile"><div className="emo-face" style={{background:'#E1F5EE', fontSize:18}}>😴</div><span>Cansado</span></div>
      </div>
      <div style={{marginTop:14, padding:'10px', background:'var(--teal)', color:'white', borderRadius:10, fontSize:11, fontWeight:800, textAlign:'center'}}>
        Compartir con mi profe
      </div>
      <div style={{marginTop:8, fontSize:9, color:'var(--text-muted)', textAlign:'center'}}>
        Audio · pictogramas · alto contraste
      </div>
    </div>
  </div>
);

Object.assign(window, { PhoneStack, FeaturePhone });