// home.jsx — Inicio screen

const HERO_SLIDES = [
{ src: 'photos/arte.jpg', caption: 'taller de arte', focus: '50% 40%' },
{ src: 'photos/astronautas.jpg', caption: 'taller de ciencia', focus: '50% 35%' },
{ src: 'photos/patio.jpg', caption: 'patio y juego libre', focus: '50% 50%' },
{ src: 'photos/suculenta.jpg', caption: 'taller de huerto', focus: '50% 40%' }];


const HeroCarousel = ({ slides = HERO_SLIDES, interval = 4500, variant = 'card' }) => {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setTimeout(() => setIdx((i) => (i + 1) % slides.length), interval);
    return () => clearTimeout(id);
  }, [idx, paused, slides.length, interval]);

  const go = (delta) => setIdx((i) => (i + delta + slides.length) % slides.length);
  const isBg = variant === 'background';

  return (
    <div
      className={`carousel ${isBg ? 'carousel-bg' : ''}`}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}>
      
      <div className="carousel-track">
        {slides.map((s, i) =>
        <div key={i} className={`carousel-slide ${i === idx ? 'active' : ''}`}>
            <img
            src={s.src}
            alt={s.caption}
            className="carousel-img"
            style={{ objectPosition: s.focus || '50% 50%' }}
            loading={i === 0 ? 'eager' : 'lazy'} />
          
          </div>
        )}
      </div>
      {!isBg && <div className="carousel-caption">{slides[idx].caption}</div>}
      {!isBg &&
      <div className="carousel-arrows">
          <button className="carousel-arrow" onClick={() => go(-1)} aria-label="Anterior">
            <IconChevronLeft size={20} />
          </button>
          <button className="carousel-arrow" onClick={() => go(1)} aria-label="Siguiente">
            <IconChevronRight size={20} />
          </button>
        </div>
      }
      {!isBg &&
      <div className="carousel-dots">
          {slides.map((_, i) =>
        <button
          key={i}
          className={`carousel-dot ${i === idx ? 'active' : ''}`}
          onClick={() => setIdx(i)}
          aria-label={`Slide ${i + 1}`} />

        )}
        </div>
      }
    </div>);

};

const HeroSplit = ({ onNavigate }) =>
<section className="hero">
    <div className="container hero-stage">
      <div className="hero-split">
        <div className="hero-text">
          <div className="eyebrow">
            <span className="dot"></span> Cultivamos el desarrollo integral en Altas Capacidades
          </div>
          <h1>
            Descubre el <span className="accent">potencial</span><br />
            en <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.05em' }}>Centro Ki</span>
          </h1>
          <p className="hero-sub">
            Fortalecemos las habilidades de cada niño potenciando sus talentos naturales, tomando como punto de partida sus intereses. Un espacio donde reunirse con pares que comparten su forma de mirar el mundo.
          </p>
          <div className="hero-ctas">
            {isAgendarVisible() &&
            <button className="btn btn-accent btn-lg" onClick={() => onNavigate('agendar')}>
              Agenda una sesión <IconArrowRight />
            </button>
            }
            <button className="btn btn-ghost btn-lg" onClick={() => onNavigate('servicios')}>
              Conoce nuestros servicios
            </button>
          </div>
        </div>
        <div className="hero-visual" style={{ background: 'var(--c-sage)', position: 'relative' }}>
          <HeroCarousel />
          <div style={{ position: 'absolute', top: -20, right: -20, color: 'var(--c-mustard)', pointerEvents: 'none' }}><Sun size={90} /></div>
          <div style={{ position: 'absolute', bottom: -20, left: -30, color: 'var(--c-accent)', pointerEvents: 'none' }}><Rainbow size={130} /></div>
          <div style={{ position: 'absolute', top: '30%', left: -16, color: 'var(--c-pink)', pointerEvents: 'none' }}><Star size={36} /></div>
          <div style={{ position: 'absolute', bottom: '20%', right: -10, color: 'var(--c-mustard-ink)', pointerEvents: 'none' }}><Spiral size={48} /></div>
        </div>
      </div>
    </div>
  </section>;


const HeroCentered = ({ onNavigate }) =>
<section className="hero" style={{ paddingTop: 40, paddingBottom: 60 }}>
    <div className="container hero-stage" style={{ position: 'relative' }}>
      <div className="hero-centered">
        <div className="eyebrow" style={{ margin: '0 auto 24px' }}>
          <span className="dot"></span> Centro de Acompañamiento en AACC
        </div>
        <h1>
          Descubre el <span className="accent">potencial</span><br />
          en <span className="hand" style={{ color: 'var(--c-sage-ink)', fontSize: '1.1em' }}>Centro Ki</span>
        </h1>
        <p className="hero-sub">
          Cultivamos el desarrollo integral de niños y niñas con Altas Capacidades. Fortalecemos sus habilidades potenciando sus talentos naturales, tomando como punto de partida sus intereses.
        </p>
        <div className="hero-ctas">
          {isAgendarVisible() &&
          <button className="btn btn-accent btn-lg" onClick={() => onNavigate('agendar')}>
            Agenda una sesión <IconArrowRight />
          </button>
          }
          <button className="btn btn-ghost btn-lg" onClick={() => onNavigate('quienes')}>
            Conoce el centro
          </button>
        </div>
      </div>
      <DoodleScatter />
    </div>
  </section>;


const HeroOverlay = ({ onNavigate }) =>
<section className="hero" style={{ paddingTop: 32 }}>
    <div className="container">
      <div className="hero-overlay">
        <div className="hero-overlay-bg">
          <HeroCarousel variant="background" />
        </div>
      
        <div className="hero-content">
          <div className="eyebrow" style={{ background: 'rgba(255,255,255,0.18)', color: 'white', margin: '0 auto 28px' }}>
            <span className="dot"></span> Acompañamos a niños con Altas Capacidades
          </div>
          <h1>
            Descubre el potencial <br />en <span className="hand" style={{ color: 'var(--c-mustard)', fontSize: '1.05em' }}>Centro Ki</span>
          </h1>
          <p className="hero-sub">Acompañamos de manera integral el desarrollo de niños y niñas con Altas Capacidades, fortaleciendo sus habilidades a partir de sus propios intereses. Acogemos a los niños y sus familias desde distintas aristas.

        </p>
          <div className="hero-ctas">
            {isAgendarVisible() &&
            <button className="btn btn-accent btn-lg" onClick={() => onNavigate('agendar')}>
              Conversemos! <IconArrowRight />
            </button>
            }
            <button className="btn" style={{ background: 'rgba(255,255,255,0.18)', color: 'white', border: '1.5px solid rgba(255,255,255,0.5)' }} onClick={() => onNavigate('servicios')}>
              Más información
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>;


const ProblemRibbon = () =>
<section className="ribbon">
    <div className="container">
      <div className="ribbon-grid">
        <div>
          <div className="eyebrow" style={{ background: 'rgba(255,255,255,0.15)', color: 'var(--c-mustard)' }}>
            <span className="dot"></span> Por qué Ki existe
          </div>
          <h2 style={{ marginTop: 18 }}>
            Cuando el colegio<br />no es <span className="hand" style={{ color: 'var(--c-mustard)', fontSize: '1.1em' }}>suficiente</span>.
          </h2>
          <p style={{ marginTop: 24, maxWidth: 480 }}>
            La educación tradicional no siempre logra atender a los niños con Altas Capacidades. Esto les genera desmotivación, desinterés, episodios de desregulación y, eventualmente, dificultades socioemocionales.
          </p>
          <p style={{ marginTop: 16, maxWidth: 480 }}>
            El enriquecimiento escolar es clave para desarrollar su potencial y equilibrarlos. Además, reunirse con pares con intereses similares fortalece lo socioemocional y vuelve a darle sentido al aprendizaje.
          </p>
        </div>
        <div>
          <div className="stat-row">
            <div className="stat">
              <b>10%</b>
              <small>de los niños en etapa escolar tiene Altas Capacidades</small>
            </div>
            <div className="stat">
              <b>~1%</b>
              <small>logra ser identificado a tiempo</small>
            </div>
            <div className="stat">
              <b>+600</b>
              <small>familias acompañadas por Centro Ki</small>
            </div>
            <div className="stat">
              <b>18</b>
              <small>profesionales en nuestro equipo</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const SERVICES = [
{
  id: 'deteccion',
  title: 'Detección de Altas Capacidades',
  desc: 'Evaluamos y comprendemos el perfil de cada niño, reconociendo su potencial para orientar mejor su desarrollo.',
  shortLabel: 'Detectar a tiempo abre la posibilidad de favorecer el bienestar y el desarrollo integral.',
  color: 'var(--c-primary)',
  sageColor: 'var(--c-sage)',
  chips: ['A partir de los 4 años', 'Presencial'],
  Icon: () => <IconSearch size={32} color="white" />,
  photo: 'photos/deteccion.jpg',
  photoFocus: '52% 48%'
},
{
  id: 'terapia',
  title: 'Área Terapéutica',
  desc: 'Acompañamos el desarrollo socioemocional con herramientas que favorecen el bienestar, la regulación y el vínculo con otros.',
  shortLabel: 'Psicología + terapia ocupacional, presencial y online.',
  color: 'var(--c-accent)',
  sageColor: 'var(--c-pink)',
  chips: ['3 a 16 años', 'Presencial/Online'],
  Icon: () => <IconHeart size={32} color="white" />,
  photo: 'photos/area-terapeutica.jpg',
  photoFocus: '48% 42%'
},
{
  id: 'talleres',
  title: 'Talleres',
  desc: 'Generamos experiencias de aprendizaje basadas en sus intereses, que potencian sus talentos y promueven el desarrollo integral.',
  shortLabel: 'Programa semestral 2026 con +15 talleres.',
  color: 'var(--c-sage-ink)',
  sageColor: 'var(--c-sage)',
  chips: ['4 a 14 años', 'Grupales', 'Semestrales'],
  Icon: () => <IconPalette size={32} color="white" />,
  photo: 'photos/talleres-robotica.jpg',
  photoFocus: '50% 45%'
},
{
  id: 'kicamp',
  title: 'Ki Camp',
  desc: 'Experiencias vacacionales para vivir las vacaciones desde el juego, la exploración, la autonomía y la creatividad.',
  shortLabel: 'Verano + invierno, semanas temáticas.',
  color: 'var(--c-mustard-ink)',
  sageColor: 'var(--c-mustard)',
  chips: ['4 a 12 años', 'Vacaciones', 'Media jornada'],
  Icon: () => <IconTent size={32} color="white" />,
  photo: 'photos/kicamp-mascaras.jpg',
  photoFocus: '50% 65%'
},
{
  id: 'academia',
  title: 'Academia Ki',
  desc: 'Nuestra Escuela Viva. Una propuesta educativa integral, basada en los intereses de cada niño y una forma distinta de aprender.',
  shortLabel: 'Aprender distinto. Crecer auténtico.',
  color: 'var(--c-primary)',
  sageColor: 'var(--c-primary)',
  chips: ['Básica a 6º', '10 alumnos por sala', 'Año escolar'],
  Icon: () => <IconSchool size={32} color="white" />,
  photo: 'photos/academia-pizarra.jpg',
  photoFocus: '50% 60%'
}];


const ServicesGrid = ({ onNavigate }) =>
<section style={{ background: 'var(--bg)', paddingTop: 'calc(var(--section-y) * 0.5)' }}>
    <div className="container">
      <div className="section-head center">
        <div className="eyebrow sage"><span className="dot"></span> Cómo acompañamos</div>
        <h2>Una mirada integral<br />para cada <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.1em' }}>niño</span></h2>
        <p>En Centro Ki acompañamos a cada niño considerando sus características, intereses y necesidades, para favorecer su desarrollo de manera respetuosa y significativa.</p>
      </div>
      <div className="grid grid-3">
        {SERVICES.slice(0, 3).map((s) =>
      <div key={s.id} className="service-card" onClick={() => onNavigate('servicios')}>
            <div className="sc-img" style={{ background: s.sageColor, position: 'relative' }}>
              {s.photo ?
          <img src={s.photo} alt={`foto · ${s.title.toLowerCase()}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: s.photoFocus || '50% 50%', zIndex: 0 }} /> :

          <Placeholder label={`foto · ${s.title.toLowerCase()}`} color={s.sageColor} style={{ position: 'absolute', inset: 0 }} />
          }
              <div style={{ position: 'absolute', top: 16, left: 16, width: 52, height: 52, background: s.color, borderRadius: 14, display: 'grid', placeItems: 'center', zIndex: 1 }}>
                <s.Icon />
              </div>
            </div>
            <div className="sc-body">
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="sc-meta">
                {s.chips.map((c) => <span key={c} className="sc-chip">{c}</span>)}
              </div>
              <span className="sc-cta">Más información <span className="arr">→</span></span>
            </div>
          </div>
      )}
      </div>
      <div className="grid grid-2" style={{ marginTop: 20 }}>
        {SERVICES.slice(3).map((s) =>
      <div key={s.id} className="service-card" onClick={() => onNavigate('servicios')}>
            <div className="sc-img" style={{ background: s.sageColor, position: 'relative', aspectRatio: '16/8' }}>
              {s.photo ?
          <img src={s.photo} alt={`foto · ${s.title.toLowerCase()}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: s.photoFocus || '50% 50%', zIndex: 0 }} /> :

          <Placeholder label={`foto · ${s.title.toLowerCase()}`} color={s.sageColor} style={{ position: 'absolute', inset: 0 }} />
          }
              <div style={{ position: 'absolute', top: 16, left: 16, width: 52, height: 52, background: s.color, borderRadius: 14, display: 'grid', placeItems: 'center' }}>
                <s.Icon />
              </div>
            </div>
            <div className="sc-body">
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="sc-meta">
                {s.chips.map((c) => <span key={c} className="sc-chip">{c}</span>)}
              </div>
              <span className="sc-cta">Más información <span className="arr">→</span></span>
            </div>
          </div>
      )}
      </div>
    </div>
  </section>;


const Method = () =>
<section style={{ background: 'var(--bg-soft)', position: 'relative', overflow: 'hidden' }}>
    <div className="container">
      <div className="section-head center">
        <div className="eyebrow coral"><span className="dot"></span> Cómo trabajamos</div>
        <h2>De la <span className="hand" style={{ color: 'var(--c-sage-ink)', fontSize: '1.1em' }}>primera conversación</span><br />al plan que necesitan</h2>
        <p>Nadie debe atravesar este camino solo. Te acompañamos paso a paso, desde la primera duda hasta el plan más adecuado para tu hijo o hija.</p>
      </div>
      <div className="method-list">
        {[
      { n: '01', title: 'Conversamos', desc: 'Una primera llamada para escucharte: qué te trajo, qué observas, qué necesitas hoy.', icon: <IconPhone size={28} color="white" /> },
      { n: '02', title: 'Evaluamos', desc: 'Si hace falta, hacemos una evaluación completa para conocer su perfil cognitivo y socioemocional.', icon: <IconSearch size={28} color="white" /> },
      { n: '03', title: 'Diseñamos', desc: 'Construimos juntos un plan a medida: terapia, talleres, derivaciones o ingreso a la Academia.', icon: <IconPalette size={28} color="white" /> },
      { n: '04', title: 'Acompañamos', desc: 'Estamos contigo durante todo el proceso. Coordinamos con colegios, ajustamos y celebramos.', icon: <IconHeart size={28} color="white" /> }].
      map((s) =>
      <div key={s.n} className="method-step">
            <div className="num">{s.n}</div>
            <div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
            <div className="icon-dot">{s.icon}</div>
          </div>
      )}
      </div>
    </div>
    <div style={{ position: 'absolute', top: 60, right: 40, color: 'var(--c-mustard)', opacity: 0.6 }}><Sun size={70} /></div>
    <div style={{ position: 'absolute', bottom: 80, left: 40, color: 'var(--c-pink)', opacity: 0.7 }}><Spiral size={60} /></div>
  </section>;


const Testimonial = () =>
<section>
    <div className="container">
      <div className="quote-card">
        <div className="quote-mark">"</div>
        <div className="quote-mark quote-mark-end">"</div>
        <blockquote>Hace tres años llegamos a Centro Ki buscando respuestas, y obtuvimos mucho más que un "diagnóstico" que nos orientara; encontramos un lugar en el que nuestra hija fue reconocida, acogida y valorada de un modo único. Cada sesión de terapia, cada taller, cada interacción con todos los miembros de Centro Ki, nos ha dado la posibilidad de verla florecer.
Hoy, tres años después de haber comenzado, Centro Ki es parte intransable de las actividades extracurriculares y vacacionales de nuestra hija.
      </blockquote>
        <cite>
          <b>Magdalena Schmidt</b>
          Mamá de Maria Gracia, 9 años · Familia Centro Ki desde 2023
        </cite>
        <div style={{ position: 'absolute', top: 30, right: 40, color: 'var(--ink)', opacity: 0.15 }}>
          <Rainbow size={120} />
        </div>
      </div>
    </div>
  </section>;


const CtaBanner = ({ onNavigate }) =>
<section style={{ paddingTop: 0 }}>
    <div className="container">
      <div className="cta-banner">
        <div>
          <h2>¿Reconoces a tu hijo<br />en lo que contamos?</h2>
          <p>Hablar nunca es tarde. Reserva una primera conversación gratuita de 20 minutos con nuestro equipo de coordinación. Sin compromiso.</p>
        </div>
        {isAgendarVisible() &&
        <button className="btn btn-soft btn-lg" onClick={() => onNavigate('agendar')}>
          Conversemos! <IconArrowRight />
        </button>
        }
        <div style={{ position: 'absolute', top: -20, right: -10, color: 'rgba(255,255,255,0.4)' }}>
          <Sun size={120} />
        </div>
        <div style={{ position: 'absolute', bottom: -30, left: '40%', color: 'rgba(255,255,255,0.3)' }}>
          <Squiggle width={200} />
        </div>
      </div>
    </div>
  </section>;


const HomeScreen = ({ onNavigate, heroStyle }) =>
<div data-screen-label="Inicio">
    {heroStyle === 'centered' && <HeroCentered onNavigate={onNavigate} />}
    {heroStyle === 'split' && <HeroSplit onNavigate={onNavigate} />}
    {heroStyle === 'overlay' && <HeroOverlay onNavigate={onNavigate} />}
    <ProblemRibbon />
    <Testimonial />
    <ServicesGrid onNavigate={onNavigate} />
    <CtaBanner onNavigate={onNavigate} />
  </div>;


Object.assign(window, { HomeScreen, SERVICES });