// quienes.jsx — Quiénes Somos screen

const QuienesHero = () =>
<section className="hero" style={{ paddingBottom: 40 }}>
    <div className="container">
      <div style={{ maxWidth: 880, display: 'flex', flexDirection: 'column', gap: 22, position: 'relative' }}>
        <div className="eyebrow"><span className="dot"></span> Quiénes somos</div>
        <h1>
          Un centro nacido<br />
          desde la <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.1em' }}>experiencia</span><br />
          de ser <span className="accent">distintos</span>.
        </h1>
        <p className="hero-sub" style={{ maxWidth: 640 }}>Centro Ki nace de la convicción de que cada niño tiene un talento esperando ser reconocido. Somos un equipo de profesionales — y también familias — que entiende lo que significa criar y acompañar a niños que piensan y sienten distinto.

      </p>
        <div style={{ position: 'absolute', top: -20, right: 0, color: 'var(--c-mustard)' }}>
          <Sun size={90} />
        </div>
      </div>
    </div>
  </section>;


const Manifesto = () =>
<section style={{ background: 'var(--bg-soft)' }}>
    <div className="container">
      <div className="section-head center">
        <div className="eyebrow coral"><span className="dot"></span> Nuestro manifiesto</div>
        <h2>En qué <span className="hand" style={{ color: 'var(--c-sage-ink)', fontSize: '1.1em' }}>creemos</span></h2>
      </div>
      <div className="grid grid-3">
        {[
      { n: '01', t: 'El interés es el punto de partida', d: 'Aprender desde lo que les apasiona no es un lujo. Es la única forma de sostener su motivación y bienestar.' },
      { n: '02', t: 'El talento florece en comunidad', d: 'Reunirse con pares con intereses similares los fortalece en lo socioemocional. Cambia todo.' },
      { n: '03', t: 'Cada niño es un universo', d: 'No hay protocolo único. Acompañar ese proceso es lo que da sentido a todo lo que hacemos.' },
      { n: '04', t: 'Amor por aprender, cariño al enseñar', d: 'Creemos en el poder de lo pequeño, en el amor por aprender y en el cariño como pilares de una infancia feliz.' },
      { n: '05', t: 'Mirada integral, siempre', d: 'Acompañamos el desarrollo desde distintas áreas del aprendizaje y del bienestar, integrando educación, terapias y trabajo multidisciplinario en un mismo espacio.' },
      { n: '06', t: 'Diversidad del pensamiento', d: 'Reconocemos las formas únicas de comprender el mundo. Educar desde la diversidad, no la estandarización.' }].
      map((v) =>
      <div key={v.n} className="value-card">
            <div className="v-num">{v.n}</div>
            <h3>{v.t}</h3>
            <p>{v.d}</p>
          </div>
      )}
      </div>
    </div>
  </section>;


const Story = () =>
<section>
    <div className="container">
      <div className="grid grid-2" style={{ gap: 64, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <Placeholder
          label="foto · fundadora con niño"
          color="var(--c-pink)"
          style={{ aspectRatio: '4/5', borderRadius: 'var(--radius-lg)' }} />
        
          <div style={{ position: 'absolute', top: -16, left: -16, color: 'var(--c-mustard)' }}><Star size={50} /></div>
          <div style={{ position: 'absolute', bottom: -10, right: -16, color: 'var(--c-sage-ink)' }}><Spiral size={60} /></div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="eyebrow sage"><span className="dot"></span> Nuestra historia</div>
          <h2>Comenzó desde<br />la experiencia</h2>
          <p style={{ fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.65 }}>Centro Ki nace desde una experiencia profundamente personal. En ese camino, <b>Clara Domíngues</b> y la psicóloga <b>Paulette Laclote</b> comprendieron la necesidad de crear un espacio donde niños y niñas pudieran ser comprendidos, acompañados y potenciados de manera integral.</p>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65 }}>Así comenzó este proyecto: un lugar pensado para acompañar a cada niño desde sus fortalezas, atendiendo también sus desafíos emocionales, sociales y educativos, con una mirada respetuosa y especializada.</p>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65 }}>En 2025 surge <b>Academia Ki</b>, nuestra Escuela Viva, al comprender que algunos niños necesitan algo más que acompañamiento: necesitan un colegio que respete sus ritmos, valore su singularidad y les permita aprender de una manera más humana, consciente y significativa. Academia Ki busca integrar el desarrollo académico, emocional y personal en un entorno vivo, cercano y profundamente respetuoso de la infancia.</p>
        </div>
      </div>
    </div>
  </section>;
const TEAM = [
{ name: 'Victoria Flores', photo: 'photos/team/victoria-flores.jpg' },
{ name: 'Anita Fuentes', photo: 'photos/team/anita-fuentes.jpg' },
{ name: 'Almendra Insunza', photo: 'photos/team/almendra-insunza.jpg' },
{ name: 'Cynthia Canales', photo: 'photos/team/cynthia-canales.jpg' },
{ name: 'Aien Herras', photo: 'photos/team/aien-herras.jpg' },
{ name: 'Catalina Abarca', photo: 'photos/team/catalina-abarca.jpg' },
{ name: 'Magdalena Calderón', photo: 'photos/team/magdalena-calderon.jpg' },
{ name: 'Alejandra Fuenzalida', photo: 'photos/team/alejandra-fuenzalida.jpg' },
{ name: 'Daniela Peña', photo: 'photos/team/daniela-pena.jpg' },
{ name: 'Magdalena Tapia', photo: 'photos/team/magdalena-shadow-tapia.jpg' },
{ name: 'Bastián Chamorro', photo: 'photos/team/bastian-chamorro.jpg' },
{ name: 'Marita Navarro', photo: 'photos/team/marita-navarro.jpg' },
{ name: 'Leslie Venegas', photo: 'photos/team/leslie-venegas.jpg' },
{ name: 'Carolina Fibla', photo: 'photos/team/carolina-fibla.jpg' },
{ name: 'Sofía Cerón', photo: 'photos/team/sofia-ceron.jpg' },
{ name: 'Marisol Rojas', photo: 'photos/team/marisol-rojas.jpg' },
{ name: 'Loreto Cruzat', photo: 'photos/team/loreto-cruzat.jpg' }];


const TeamPhoto = ({ src, name }) => {
  const [failed, setFailed] = React.useState(false);
  const initials = name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase();
  if (failed || !src) {
    return (
      <div className="team-photo" style={{ background: 'var(--c-sage)', display: 'grid', placeItems: 'center', color: 'white', fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em' }}>
        {initials}
      </div>);

  }
  return (
    <div className="team-photo">
      <img src={src} alt={name} onError={() => setFailed(true)} loading="lazy" />
    </div>);

};

const Team = () =>
<section style={{ background: 'var(--bg-soft)' }}>
    <div className="container">
      <div className="section-head center">
        <div className="eyebrow navy"><span className="dot"></span> Equipo</div>
        <h2>Quienes te <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.1em' }}>acompañan</span></h2>
        <p>Un equipo interdisciplinario, formado en altas capacidades, que trabaja en red contigo y con el colegio de tu hijo o hija.</p>
      </div>
      <div className="team-grid">
        {TEAM.map((p) =>
      <div key={p.name} className="team-card">
            <TeamPhoto src={p.photo} name={p.name} />
            <h4>{p.name}</h4>
          </div>
      )}
      </div>
    </div>
  </section>;


const FounderPhoto = ({ src, name, color = 'var(--c-accent)' }) => {
  const [failed, setFailed] = React.useState(false);
  const initials = name.split(' ').map((w) => w[0]).slice(0, 2).join('');
  if (failed || !src) {
    return (
      <div className="founder-photo" style={{ background: color, display: 'grid', placeItems: 'center', color: 'white', fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, letterSpacing: '-0.02em' }}>
        {initials}
      </div>);

  }
  return (
    <div className="founder-photo">
      <img src={src} alt={name} onError={() => setFailed(true)} />
    </div>);

};

const Founders = () =>
<section style={{ background: 'var(--bg)' }}>
    <div className="container">
      <div className="section-head center">
        <div className="eyebrow coral"><span className="dot"></span> Fundadoras</div>
        <h2>Las personas detrás de <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.1em' }}>Centro Ki</span></h2>
        <p>Centro Ki nace del encuentro entre dos miradas: una desde el diseño y la educación creativa, otra desde la psicología clínica y el acompañamiento socioemocional.</p>
      </div>
      <div className="founders-grid">
        <div className="founder-card">
          <div className="founder-head">
            <FounderPhoto src="photos/team/clara-domingues.jpg" name="Clara Domingues" color="var(--c-accent)" />
            <div>
              <h3 className="founder-name">Clara Domingues</h3>
              <div className="founder-role">Directora · Fundadora</div>
            </div>
          </div>
          <p className="founder-bio">
            Arquitecta egresada de la <b>Universidad de Chile</b>, postitulada en Arte en el Instituto Internacional BINDU. Empresaria, emprendedora y profesora universitaria con 13 años en diseño, arte y arquitectura. Egresada del <b>Magister en Altas Capacidades y Desarrollo del Talento</b> en la Universidad de La Rioja, España. Fundadora de Centro Ki. Actualmente cursando el <b>Magister de Liderazgo y Gestión Escolar en la Universidad del Desarrollo, Santiago, Chile.</b>
          </p>
        </div>
        <div className="founder-card">
          <div className="founder-head">
            <FounderPhoto src="photos/team/paulette-laclote.jpg" name="Paulette Laclote" color="var(--c-primary)" />
            <div>
              <h3 className="founder-name">Paulette Laclote</h3>
              <div className="founder-role">Directora de Psicología</div>
            </div>
          </div>
          <p className="founder-bio">
            Psicóloga egresada de la <b>Pontificia Universidad Católica de Chile</b>, postitulada en Arteterapia. Durante 12 años trabajó con Niños y Jóvenes con Talento Académico en <b>PentaUC</b>, abarcando identificación, selección y orientación a estudiantes, padres y profesores. Más de 15 años de experiencia en consulta privada con familias, niños y adolescentes.
          </p>
        </div>
      </div>
    </div>
  </section>;


const QuienesScreen = ({ onNavigate }) =>
<div data-screen-label="Quiénes Somos">
    <QuienesHero />
    <Manifesto />
    <Founders />
    <Story />
    <Team />
    <CtaBanner onNavigate={onNavigate} />
  </div>;


Object.assign(window, { QuienesScreen, TEAM });