// servicios.jsx — Servicios detalle screen

const SERVICE_MORE_LINKS = {
  talleres: 'https://drive.google.com/file/d/1MPxMvUAE65_hBUnm2th7ZLNnze2Mj2jg/view',
  kicamp: 'https://drive.google.com/file/d/1vymQRbAmsYvRNSBqRY_QTBkbAeoOiwf-/view',
  academia: 'https://drive.google.com/file/d/1o_iQnV7UqCuociptgLh0Jpo3XmS4TTaj/view',
};

const SERVICE_DETAILS = [
  {
    id: 'deteccion',
    name: 'Detección de Altas Capacidades',
    tagline: 'Reconocer para acompañar',
    desc: 'Una evaluación cuidadosa que nos permite comprender el perfil cognitivo, socioemocional y creativo de tu hijo o hija, junto con sus intereses y motivaciones.',
    long: 'Detectar a tiempo abre la posibilidad de favorecer su bienestar y desarrollo integral. La Alta Capacidad se expresa de muchas formas —superdotación, creatividad, precocidad, talentos específicos o múltiples— y hoy se entiende desde una mirada amplia: no sólo habilidades intelectuales, también artísticas, sociales, de liderazgo y psicomotoras.',
    bullets: ['Aplicación WISC-V certificada', 'Entrevista con padres y antecedentes', 'Observación clínica y perfil de intereses', 'Informe escrito + reunión de devolución', 'Orientaciones para el colegio'],
    color: 'var(--c-primary)',
    bg: 'var(--c-sage)',
    chips: ['Todas las edades', 'Presencial', '~1 hora · 2 sesiones'],
    Icon: IconSearch,
    hasDeteccionTeam: true,
    photo: 'photos/deteccion.jpg',
    photoFocus: '52% 48%',
  },
  {
    id: 'terapia',
    name: 'Área Terapéutica',
    tagline: 'Acompañamiento socioemocional',
    desc: 'Enfoque integral para el acompañamiento socioemocional de niños, niñas y adolescentes, con especialización en Altas Capacidades y Doble Excepcionalidad.',
    long: 'Empezamos con una entrevista inicial con apoderados —online o presencial— para comprender el motivo de consulta, recoger antecedentes y resolver dudas. A partir de ahí definimos un plan de trabajo: psicoterapia, terapia ocupacional, asesoría a colegios y trabajo con la familia.',
    bullets: ['Psicología clínica (online o presencial)', 'Terapia ocupacional con enfoque lúdico', 'Asesoría a familias y colegios', 'Visitas a establecimientos educacionales', 'Terapia grupal de habilidades sociales'],
    color: 'var(--c-accent)',
    bg: 'var(--c-pink)',
    chips: ['4 a 14 años', 'Presencial u online', 'Semanal · 45 min'],
    Icon: IconHeart,
    hasTerapeutas: true,
    photo: 'photos/area-terapeutica.jpg',
    photoFocus: '48% 42%',
  },
  {
    id: 'talleres',
    name: 'Talleres de Enriquecimiento',
    tagline: 'Aprender desde lo que apasiona',
    desc: 'Experiencias creativas, lúdicas y significativas que despiertan la curiosidad, fortalecen la confianza y potencian habilidades en un entorno cuidado y estimulante.',
    long: 'Más de 15 talleres en STEAM, arte, música, letras, movimiento y terapéuticos. Donde el juego, la exploración y el asombro se transforman en herramientas de aprendizaje. Programa bimensual o semestral.',
    bullets: ['Grupos pequeños (6–8 niños máx.)', 'Bimensual o semestral · 17 sesiones', 'Educadores especialistas en AACC', 'Materiales incluidos', 'Clase de prueba disponible'],
    color: 'var(--c-sage-ink)',
    bg: 'var(--c-sage)',
    chips: ['4 a 14 años', 'Grupales', 'Desde $235.000'],
    Icon: IconPalette,
    hasTalleres: true,
    moreLink: SERVICE_MORE_LINKS.talleres,
    photo: 'photos/talleres-robotica.jpg',
    photoFocus: '50% 45%',
  },
  {
    id: 'kicamp',
    name: 'Ki Camp',
    tagline: 'Vacaciones con sentido',
    desc: 'Experiencia vacacional donde niños y niñas viven sus días desde la curiosidad, la autonomía y la diversión.',
    long: 'Cada jornada invita a explorar, crear y compartir, transformando el juego y el asombro en herramientas de aprendizaje. Semanas temáticas con salidas a terreno, talleres de cocina, naturaleza, construcción y teatro. Sin pantallas.',
    bullets: ['Semanas de 5 días · 9–17h', 'Almuerzo incluido', 'Salidas a terreno', 'Grupos por edad', 'Sin pantallas'],
    color: 'var(--c-mustard-ink)',
    bg: 'var(--c-mustard)',
    chips: ['5 a 12 años', 'Verano + Invierno', 'Día completo'],
    Icon: IconTent,
    moreLink: SERVICE_MORE_LINKS.kicamp,
    photo: 'photos/kicamp-mascaras.jpg',
    photoFocus: '50% 65%',
  },
  {
    id: 'academia',
    name: 'Academia Ki',
    tagline: 'Nuestra Escuela Viva',
    desc: 'Aprender distinto. Crecer auténtico. Una escuela que acompaña el aprendizaje desde una mirada integral, respetando los ritmos, intereses y formas únicas de aprender de cada niño.',
    long: 'En Academia Ki, el aprendizaje nace de la experiencia, la curiosidad, el movimiento y el vínculo. Integramos el desarrollo académico, emocional, creativo y corporal en un entorno cercano, consciente y estimulante. Basándonos en el Método Ki y los cinco elementos.',
    bullets: ['Pre-básica a 4º básico', 'Método Ki · 5 elementos · 10 habilidades', 'Asignaturas basales + enriquecimiento + salidas pedagógicas', 'Acompañamiento socioemocional integrado', 'Postulaciones 2026 abiertas'],
    color: 'var(--c-primary)',
    bg: 'var(--c-primary)',
    chips: ['Pre-básica a 4º', 'Jornada completa', 'Método Ki', 'Postulaciones 2026'],
    Icon: IconSchool,
    moreLink: SERVICE_MORE_LINKS.academia,
    photo: 'photos/academia-pizarra.jpg',
    photoFocus: '50% 60%',
  },
];

const ServiciosHero = () => (
  <section className="hero" style={{paddingBottom: 60}}>
    <div className="container">
      <div style={{maxWidth: 880, display: 'flex', flexDirection: 'column', gap: 22, position: 'relative'}}>
        <div className="eyebrow"><span className="dot"></span> Servicios</div>
        <h1>Cinco caminos para<br/>crecer en <span className="hand" style={{color: 'var(--c-accent)', fontSize: '1.1em'}}>Centro Ki</span></h1>
        <p className="hero-sub" style={{maxWidth: 640}}>
          Desde la primera evaluación hasta un colegio que los entienda. Combina los servicios que necesites: el equipo coordina todo para que tu hijo o hija reciba un acompañamiento coherente.
        </p>
        <div style={{position: 'absolute', top: 0, right: 40, color: 'var(--c-sage-ink)'}}><Rainbow size={110} /></div>
      </div>
    </div>
  </section>
);

const ServiceDetail = ({ s, i, onNavigate }) => {
  const reversed = i % 2 === 1;
  return (
    <section style={{padding: '60px 0', background: i % 2 === 0 ? 'var(--bg-soft)' : 'var(--bg)'}} id={s.id}>
      <div className="container">
        <div className="grid grid-2" style={{gap: 72, alignItems: 'start', gridTemplateColumns: reversed ? '1fr 1.1fr' : '1.1fr 1fr'}}>
          <div style={{order: reversed ? 2 : 1, position: 'relative'}}>
            {s.photo ? (
              <div style={{aspectRatio: '4/3', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)'}}>
                <img
                  src={s.photo}
                  alt={`foto · ${s.name.toLowerCase()}`}
                  style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: s.photoFocus || '50% 50%', display: 'block'}}
                />
              </div>
            ) : (
              <Placeholder
                label={`foto · ${s.name.toLowerCase()}`}
                color={s.bg}
                style={{aspectRatio: '4/3', borderRadius: 'var(--radius-lg)'}}
              />
            )}
            <div style={{position: 'absolute', top: -20, [reversed ? 'right' : 'left']: -20, width: 64, height: 64, background: s.color, borderRadius: 18, display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-md)'}}>
              <s.Icon size={32} color="white" />
            </div>
            <div style={{position: 'absolute', bottom: -16, [reversed ? 'left' : 'right']: -16, color: 'var(--c-mustard)'}}>
              <Sun size={70} />
            </div>
          </div>
          <div style={{order: reversed ? 1 : 2, display: 'flex', flexDirection: 'column', gap: 18}}>
            <div className="eyebrow" style={{background: `color-mix(in srgb, ${s.color} 14%, transparent)`, color: s.color}}>
              <span className="dot"></span> {s.tagline}
            </div>
            <h2>{s.name}</h2>
            <p style={{fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.6}}>{s.desc}</p>
            <p style={{fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.65}}>{s.long}</p>
          </div>
        </div>
        <div style={{marginTop: 40, display: 'flex', flexDirection: 'column', gap: 18}}>
          <ul style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '8px 24px', padding: 0, listStyle: 'none', margin: 0}}>
            {s.bullets.map(b => (
              <li key={b} style={{display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14.5, color: 'var(--ink-soft)'}}>
                <span style={{width: 18, height: 18, borderRadius: '50%', background: s.color, display: 'inline-grid', placeItems: 'center', flexShrink: 0, marginTop: 2}}>
                  <svg viewBox="0 0 12 12" width="10" height="10"><path d="M3 6 L5 8 L9 4" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
                {b}
              </li>
            ))}
          </ul>
          <div style={{display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 4}}>
            {s.chips.map(c => (
              <span key={c} style={{fontSize: 12, padding: '6px 12px', borderRadius: 999, background: 'var(--paper)', border: '1px solid var(--line)', color: 'var(--ink-soft)', fontWeight: 500}}>{c}</span>
            ))}
          </div>
          {s.moreLink &&
            <div style={{marginTop: 12}}>
              <a
                href={s.moreLink}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-accent btn-lg"
                style={{alignSelf: 'flex-start', textDecoration: 'none'}}>
                Saber más <IconArrowRight />
              </a>
            </div>
          }
        </div>
        {s.hasDeteccionTeam &&
          <TerapeutasGrid
            area="deteccion"
            color={s.color}
            people={DETECCION_TEAM}
            onNavigate={onNavigate}
            sectionAgendarLabel="Agendar evaluación"
          />
        }
        {s.hasTerapeutas &&
          <TerapeutasGrid area="terapia" color={s.color} people={TERAPEUTAS} />
        }
        {s.hasTalleres &&
          <div style={{marginTop: 48, display: 'flex', flexDirection: 'column', gap: 8}}>
            <div className="eyebrow" style={{background: `color-mix(in srgb, ${s.color} 14%, transparent)`, color: s.color, alignSelf: 'flex-start'}}>
              <span className="dot"></span> Programa 2026
            </div>
            <h3 style={{fontSize: 28, margin: '8px 0 0', letterSpacing: '-0.02em'}}>Talleres disponibles</h3>
            <p style={{fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.65, maxWidth: 640, margin: '0 0 8px'}}>
              Más de 15 propuestas en STEAM, arte, música, letras, movimiento y terapéuticos. Filtra por categoría para encontrar el ideal.
            </p>
            <TalleresList />
            <div style={{marginTop: 40, paddingTop: 40, borderTop: '1px solid var(--line)'}}>
              <h3 style={{fontSize: 22, margin: '0 0 4px', letterSpacing: '-0.01em'}}>Valores del programa</h3>
              <p style={{fontSize: 14.5, color: 'var(--ink-soft)', margin: '0 0 4px'}}>Modalidad bimensual o semestral según el taller.</p>
              <TalleresPricing />
            </div>
          </div>
        }
      </div>
    </section>
  );
};

const DETECCION_TEAM = [
  {
    name: 'Paulette Laclote',
    role: 'Psicología clínica · Directora',
    photo: 'photos/team/paulette-laclote.jpg',
    bio: 'Psicóloga clínica con más de 15 años de experiencia en Altas Capacidades. Lidera los procesos de detección y acompañamiento, orientación familiar y asesoría a establecimientos educacionales.',
    link: 'https://encuadrado.com/p/paulette-laclote-1',
  },
  {
    name: 'Almendra Insunza',
    role: 'Psicología clínica',
    photo: 'photos/team/almendra-insunza.jpg',
    bio: 'Psicóloga clínica con experiencia en niños y adolescentes. Certificada en Test WISC-V para evaluación cognitiva e identificación de Altas Capacidades.',
    link: 'https://encuadrado.com/p/almendra-insunza',
  },
  {
    name: 'Cynthia Canales',
    role: 'Psicología clínica',
    photo: 'photos/team/cynthia-canales.jpg',
    bio: 'Psicóloga clínica con experiencia en el acompañamiento de niños y adolescentes. Certificada en la aplicación de los test WISC-V, WPPSI y WAIS para evaluación cognitiva.',
    link: 'https://encuadrado.com/p/cynthia-canales',
  },
  {
    name: 'Anita Fuentes',
    role: 'Psicología clínica',
    photo: 'photos/team/anita-fuentes.jpg',
    bio: 'Psicóloga clínica con experiencia en Altas Capacidades y Doble Excepcionalidad, especialmente en el ámbito del autismo. Aporta una mirada integral al proceso de detección.',
    link: 'https://encuadrado.com/p/anita-fuentes-pino',
  },
];

const TERAPEUTAS = [
  {
    name: 'Paulette Laclote',
    role: 'Psicología clínica · Directora',
    photo: 'photos/team/paulette-laclote.jpg',
    bio: 'Psicóloga clínica con más de 15 años de experiencia en Altas Capacidades. Lidera procesos de acompañamiento terapéutico, orientación familiar y asesoría a establecimientos educacionales.',
    link: 'https://encuadrado.com/p/paulette-laclote-1',
  },
  {
    name: 'Anita Fuentes',
    role: 'Psicología clínica',
    photo: 'photos/team/anita-fuentes.jpg',
    bio: 'Psicóloga clínica con experiencia en Altas Capacidades y Doble Excepcionalidad, especialmente en el ámbito del autismo. Trabaja con terapia de juego, estrategias cognitivo-conductuales, arteterapia y mindfulness.',
    link: 'https://encuadrado.com/p/anita-fuentes-pino',
  },
  {
    name: 'Victoria Flores',
    role: 'Terapia ocupacional',
    photo: 'photos/team/victoria-flores.jpg',
    bio: 'Terapeuta ocupacional dedicada a las neurodivergencias y las Altas Capacidades, con enfoque en intervención a través del juego, manualidades creativas y dinámicas innovadoras.',
    link: 'https://encuadrado.com/p/t-o-victoria-flores',
  },
  {
    name: 'Aien Herras',
    role: 'Terapia ocupacional',
    photo: 'photos/team/aien-herras.jpg',
    bio: 'Terapeuta ocupacional enfocada en neurodivergencias y Altas Capacidades. Acompaña desde el juego, la exploración de intereses y el desarrollo de habilidades sociales y manejo emocional.',
    link: 'https://encuadrado.com/p/aien-herras',
  },
];

const TerapeutaCard = ({ t, color, area }) => {
  const [failed, setFailed] = React.useState(false);
  const initials = t.name.split(' ').map(w => w[0]).slice(0, 2).join('');
  const showAgendar = area === 'terapia' && t.link;
  return (
    <div style={{display: 'flex', flexDirection: 'column', background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md)', overflow: 'hidden', minWidth: 0}}>
      <div style={{width: '100%', aspectRatio: '1 / 1', background: color, position: 'relative', overflow: 'hidden', flexShrink: 0}}>
        {!failed && t.photo ? (
          <img src={t.photo} alt={t.name} onError={() => setFailed(true)} style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block'}} />
        ) : (
          <div style={{position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'white', fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em'}}>{initials}</div>
        )}
      </div>
      <div style={{padding: '16px 16px 18px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1}}>
        <div>
          <h4 style={{fontSize: 16, margin: 0, letterSpacing: '-0.01em', fontWeight: 600}}>{t.name}</h4>
          <div style={{fontSize: 11, color: color, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 3}}>{t.role}</div>
        </div>
        <p style={{fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)', margin: 0, flex: 1}}>{t.bio}</p>
        {showAgendar &&
        <a
          href={t.link}
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn-accent btn-sm"
          style={{marginTop: 8, alignSelf: 'flex-start', textDecoration: 'none'}}>
          Agendar <IconArrowRight />
        </a>
        }
      </div>
    </div>
  );
};

const TerapeutasGrid = ({ area, color, people = TERAPEUTAS, onNavigate, sectionAgendarLabel }) => (
  <div style={{marginTop: 40}}>
    <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 18}}>
      {people.map(t => <TerapeutaCard key={t.name} t={t} color={color} area={area} />)}
    </div>
    {sectionAgendarLabel && onNavigate && isAgendarVisible() &&
      <div style={{marginTop: 28, display: 'flex', justifyContent: 'flex-start'}}>
        <button type="button" className="btn btn-accent btn-lg" onClick={() => onNavigate('agendar')}>
          {sectionAgendarLabel} <IconArrowRight />
        </button>
      </div>
    }
  </div>
);

const ServiciosScreen = ({ onNavigate }) => (
  <div data-screen-label="Servicios">
    <ServiciosHero />
    {SERVICE_DETAILS.map((s, i) => <ServiceDetail key={s.id} s={s} i={i} onNavigate={onNavigate} />)}
    <CtaBanner onNavigate={onNavigate} />
  </div>
);

Object.assign(window, { ServiciosScreen, SERVICE_DETAILS });