// Section components for Te Reto Inclusivo
const { useState, useEffect, useRef } = React;

// ===== NAV =====
function Nav() {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const links = [
    ['#inicio', 'Inicio'],
    ['#solucion', 'Solución'],
    ['#como-funciona', 'Cómo funciona'],
    ['#impacto', 'Impacto'],
    ['#equipo', 'Equipo'],
    ['#contacto', 'Contacto'],
  ];

  const handleNav = (e, href) => {
    e.preventDefault();
    setOpen(false);
    const el = document.querySelector(href);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <header className="nav" role="banner">
      <div className="container nav-inner">
        <a href="#inicio" className="logo" aria-label="Te Reto Inclusivo, inicio" onClick={(e) => handleNav(e, '#inicio')}>
          <img className="logo-img" src={(window.__resources && window.__resources.logoMain) || 'assets/logo_tereto.png'} alt="Te Reto" />
        </a>
        <ul className="nav-links" role="list">
          {links.map(([href, label]) => (
            <li key={href}><a href={href} onClick={(e) => handleNav(e, href)}>{label}</a></li>
          ))}
        </ul>
        <a href="#contacto" className="btn btn-primary btn-sm nav-cta" onClick={(e) => handleNav(e, '#contacto')}>
          Solicitar demo
        </a>
        <button
          className="hamburger"
          aria-label="Abrir menú"
          aria-expanded={open}
          aria-controls="mobile-menu"
          onClick={() => setOpen(true)}
        >
          <span></span>
        </button>
      </div>

      <div id="mobile-menu" className={`mobile-menu ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div className="container" style={{padding: 0, width: '100%'}}>
          <div className="mobile-menu-top">
            <a href="#inicio" className="logo" onClick={(e) => handleNav(e, '#inicio')}>
              <img className="logo-img" src={(window.__resources && window.__resources.logoMain) || 'assets/logo_tereto.png'} alt="Te Reto" />
            </a>
            <button className="mobile-menu-close" aria-label="Cerrar menú" onClick={() => setOpen(false)}>✕</button>
          </div>
          <nav aria-label="Menú móvil">
            {links.map(([href, label]) => (
              <a key={href} href={href} onClick={(e) => handleNav(e, href)}>{label}</a>
            ))}
          </nav>
          <a href="#contacto" className="btn btn-primary" onClick={(e) => handleNav(e, '#contacto')}>Solicitar demo</a>
        </div>
      </div>
    </header>
  );
}

// ===== HERO =====
function Hero() {
  return (
    <section className="hero" id="inicio" data-screen-label="01 Hero">
      <div className="container hero-grid">
        <div>
          <span className="pill"><span style={{width:6,height:6,borderRadius:999,background:'var(--teal)'}}></span>Educación inclusiva · TEA · Colombia</span>
          <h1>Inclusión escolar clara, amable y medible para estudiantes con TEA</h1>
          <p className="hero-sub">
            Te Reto App acompaña a docentes e instituciones con juegos accesibles, seguimiento emocional,
            alertas pedagógicas y reportes para fortalecer la inclusión en el aula.
          </p>
          <div className="hero-ctas">
            <a href="#contacto" className="btn btn-primary" onClick={(e) => { e.preventDefault(); document.querySelector('#contacto').scrollIntoView({behavior:'smooth'}); }}>
              Solicitar demo <IconArrow size={18} />
            </a>
            <button className="btn btn-ghost" onClick={() => { document.querySelector('#como-funciona').scrollIntoView({behavior:'smooth'}); }}>
              <IconPlay size={16} /> Ver cómo funciona
            </button>
          </div>
          <div className="trust-bar" aria-label="Características principales">
            <span className="trust-badge"><span className="dot"></span> Diseño accesible</span>
            <span className="trust-badge"><span className="dot"></span> Modo baja estimulación</span>
            <span className="trust-badge"><span className="dot"></span> Seguimiento docente</span>
            <span className="trust-badge"><span className="dot"></span> Reportes institucionales</span>
          </div>
        </div>
        <PhoneStack />
      </div>
    </section>
  );
}

// ===== PROBLEM =====
function Problem() {
  const cards = [
    {
      src: 'assets/card1.png',
      alt: 'Ilustración de una escuela con gráfico ascendente que representa aumento de diagnósticos registrados.',
      title: 'Diagnósticos en aumento',
      body: 'Los registros de atención muestran una mayor identificación de estudiantes con TEA, lo que exige respuestas pedagógicas más claras y sostenibles.',
    },
    {
      src: 'assets/card2.png',
      alt: 'Ilustración de documentos, calendario y herramientas separadas que representa procesos fragmentados.',
      title: 'Herramientas fragmentadas',
      body: 'Rutas pedagógicas, alertas, seguimiento emocional y reportes suelen gestionarse en documentos, hojas de cálculo o procesos separados.',
      amber: true,
    },
    {
      src: 'assets/card3.png',
      alt: 'Ilustración de reporte con gráficos y lupa que representa dificultad para consolidar evidencia.',
      title: 'Poca evidencia consolidada',
      body: 'Las escuelas necesitan registrar, medir y demostrar sus avances en inclusión con información clara, trazable y útil para la toma de decisiones.',
    },
  ];
  return (
    <section className="problem" id="problema" data-screen-label="02 Problema">
      <div className="container">
        <span className="section-label">El problema</span>
        <h2>Las escuelas quieren incluir.<br />Les falta cómo hacerlo.</h2>
        <p className="section-intro">
          En Colombia, muchas instituciones educativas avanzan hacia la inclusión, pero aún enfrentan barreras
          prácticas: poca formación aplicada, herramientas dispersas y dificultad para demostrar avances reales en el aula.
        </p>
        <div className="three-col">
          {cards.map((c, i) => (
            <article key={i} className="card pain-card">
              <span className={`icon-box pain-card-icon ${c.amber ? 'amber' : ''}`}>
                <img src={c.src} alt={c.alt} loading="lazy" className="pain-card-img" />
              </span>
              <div className="stat">{c.title}</div>
              <p>{c.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== SOLUTION =====
function Solution() {
  const cards = [
    {
      tag: 'Estudiante',
      title: 'App para estudiantes',
      body: 'Juegos accesibles, check-in emocional, pausas sensoriales y actividades diseñadas para avanzar a ritmo propio.',
      mockup: (
        <div className="sol-mock">
          <div className="sol-mock-top"><span className="sol-mock-bar"></span></div>
          <div className="sol-mock-label">¿Cómo te sientes hoy?</div>
          <div className="sol-mock-emojis">
            <span className="sol-emo sol-emo--active">😊</span>
            <span className="sol-emo">😐</span>
            <span className="sol-emo">😔</span>
          </div>
          <span className="sol-mock-pill sol-pill--teal">Modo calma</span>
        </div>
      ),
    },
    {
      tag: 'Docente',
      title: 'Panel docente',
      body: 'Seguimiento por estudiante, alertas pedagógicas, agenda visual y protocolos para acompañar decisiones en el aula.',
      mockup: (
        <div className="sol-mock">
          <div className="sol-mock-top"><span className="sol-mock-bar"></span></div>
          <div className="sol-mock-row">
            <span className="sol-dot sol-dot--green"></span>
            <span>Lucía · Progresando</span>
          </div>
          <div className="sol-mock-row sol-mock-row--alert">
            <span className="sol-dot sol-dot--amber"></span>
            <span>Juan · Revisar hoy</span>
          </div>
          <span className="sol-mock-pill sol-pill--amber">Protocolo sugerido →</span>
        </div>
      ),
    },
    {
      tag: 'Institución',
      title: 'Backoffice institucional',
      body: 'Indicadores, reportes, evidencias y trazabilidad para demostrar avances en inclusión escolar.',
      mockup: (
        <div className="sol-mock">
          <div className="sol-mock-top"><span className="sol-mock-bar"></span></div>
          <div className="sol-mock-chart">
            <div className="sol-bar" style={{height:'52%'}}></div>
            <div className="sol-bar sol-bar--hi" style={{height:'74%'}}></div>
            <div className="sol-bar" style={{height:'63%'}}></div>
            <div className="sol-bar sol-bar--hi" style={{height:'88%'}}></div>
          </div>
          <span className="sol-mock-pill sol-pill--teal">Avances confirmados ✓</span>
        </div>
      ),
    },
  ];

  return (
    <section className="solution" id="solucion" data-screen-label="03 Solución">
      <div className="container">
        <span className="section-label">La solución</span>
        <h2>Una plataforma para acompañar, medir y demostrar la inclusión</h2>
        <p className="section-intro">
          Te Reto integra la experiencia del estudiante, el acompañamiento docente y la trazabilidad
          institucional en un solo ecosistema tecnopedagógico diseñado para contextos escolares reales.
        </p>

        <div className="sol-flow">
          {cards.map((c, i) => (
            <React.Fragment key={i}>
              <article className="sol-card">
                <div className="sol-mock-wrap">{c.mockup}</div>
                <div className="sol-card-tag">{c.tag}</div>
                <h3 className="sol-card-title">{c.title}</h3>
                <p className="sol-card-body">{c.body}</p>
              </article>
              {i < cards.length - 1 && (
                <div className="sol-connector" aria-hidden="true">
                  <span className="sol-connector-h">→</span>
                  <span className="sol-connector-v">↓</span>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>

        <p className="sol-tagline">
          Todo conectado para que la inclusión sea más clara, práctica y medible.
        </p>
      </div>
    </section>
  );
}

// ===== HOW IT WORKS =====
function HowItWorks() {
  const steps = [
    {
      icon: <IconSettings size={28} />,
      h: 'Configura el perfil',
      p: 'El docente registra el perfil sensorial, apoyos requeridos y necesidades del estudiante.',
      size: 'sm',
    },
    {
      icon: <IconPhone size={32} />,
      h: 'El estudiante participa',
      p: 'El niño interactúa con juegos, check-ins emocionales y actividades accesibles.',
      size: 'lg',
    },
    {
      icon: <IconTeacher size={28} />,
      h: 'El docente acompaña',
      p: 'El sistema muestra avances, señales de alerta y protocolos sugeridos para actuar a tiempo.',
      size: 'sm',
    },
    {
      icon: <IconBuilding size={28} />,
      h: 'La institución evidencia',
      p: 'Directivos e investigadores consultan reportes, indicadores y trazabilidad del proceso.',
      size: 'sm',
    },
  ];
  return (
    <section className="how" id="como-funciona" data-screen-label="04 Cómo funciona">
      <div className="container">
        <span className="section-label">En la escuela</span>
        <h2>Cómo funciona en su escuela</h2>
        <p className="section-intro">
          Te Reto conecta la experiencia del estudiante con el acompañamiento docente y la evidencia institucional.
        </p>
        <ol className="steps" role="list">
          {steps.map((s, i) => (
            <li key={i} className={`step step-${s.size}`}>
              <div className={`step-num step-num-${s.size}`}>{i + 1}</div>
              <span className="icon-box" style={{marginBottom:10}}>{s.icon}</span>
              <h3 className={`step-title step-title-${s.size}`}>{s.h}</h3>
              <p>{s.p}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Problem, Solution, HowItWorks });