// Esencia block (on home): compact intro + portraits, links to Nosotras page
function EsenciaHome() {
  return (
    <section className="section-pad" style={{padding: '120px 0', background: 'var(--crema)'}}>
      <div className="container">
        <div className="grid-2-cols" style={{display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center'}}>
          <div className="reveal" style={{position:'relative'}}>
            <div className="fotos-fundadoras" style={{display: 'flex', gap: 18, justifyContent: 'center'}}>
              {[
                { n: 'Dary', src: 'uploads/dary.png' },
                { n: 'Laura', src: 'uploads/laura.png' },
              ].map((p, i) => (
                <div key={i} style={{
                  width: 240, height: 300, borderRadius: 160, overflow: 'hidden',
                  marginTop: i === 1 ? 40 : 0,
                  boxShadow: '0 30px 60px -25px rgba(70,85,56,.4)',
                  border: '6px solid #FFFDF9', position: 'relative',
                }}>
                  <img src={p.src} alt={p.n} style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'top'}}/>
                </div>
              ))}
            </div>
            <div style={{textAlign: 'center', marginTop: 28}}>
              <div style={{fontFamily: 'var(--script)', fontSize: 44, color: 'var(--verde-oscuro)', lineHeight: 1}}>Dary & Laura</div>
              <div style={{fontSize: 11.5, letterSpacing: '.25em', color: 'var(--tinta-suave)', marginTop: 10, fontWeight: 500}}>PSICÓLOGAS · FUNDADORAS</div>
            </div>
          </div>

          <div className="reveal">
            <div style={{fontSize: 12, letterSpacing: '.3em', color: 'var(--terracota)', fontWeight: 600, marginBottom: 20}}>— NUESTRA ESENCIA</div>
            <h2 style={{fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 4.2vw, 60px)', fontWeight: 500, lineHeight: 1.08, color: 'var(--verde-oscuro)'}}>
              Dos psicólogas. Una <em style={{color:'var(--terracota)'}}>raíz</em> común.
            </h2>
            <p style={{marginTop: 24, fontSize: 17, lineHeight: 1.75, color: 'var(--tinta-suave)', maxWidth: 520}}>
              Semillas nace de la convicción de que el bienestar psicológico se cultiva. Acompañamos a personas y organizaciones en procesos de cambio con una mirada sistémica y presencia real.
            </p>
            <a href="nosotras.html" style={{
              display:'inline-flex', alignItems:'center', gap: 10, marginTop: 32,
              padding: '14px 28px', borderRadius: 999,
              background: 'var(--verde)', color: '#F4EDE5',
              fontSize: 12, letterSpacing: '.18em', fontWeight: 600,
            }}>CONÓCENOS <IconArrow size={14}/></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// Services snapshot grid (home) — links to services page
function ServiciosHome() {
  const svc = [
    { icon: IconUser,   t: 'Psicoterapia Individual', d: 'Un espacio íntimo 1:1 para habitarte con más conciencia.' },
    { icon: IconHands,  t: 'Acompañamiento Grupal',   d: 'Círculos pequeños y sostenidos donde el proceso se multiplica.' },
    { icon: IconSprout, t: 'Salud Mental Grupal',     d: 'Procesos para familias, equipos y colectivos ya existentes.' },
    { icon: IconHeart,  t: 'Consultoría Clínica',     d: 'Supervisión y mentoría para psicólogos en formación.' },
  ];
  return (
    <section className="section-pad" style={{padding: '120px 0', background: 'linear-gradient(180deg, var(--crema) 0%, #FAF0E3 100%)'}}>
      <div className="container">
        <div style={{textAlign:'center', maxWidth: 720, margin: '0 auto 64px'}}>
          <div style={{fontSize: 12, letterSpacing: '.3em', color: 'var(--terracota)', fontWeight: 600, marginBottom: 18}}>— SERVICIOS DE IMPACTO</div>
          <h2 style={{fontFamily: 'var(--serif)', fontSize: 'clamp(40px, 4.2vw, 58px)', fontWeight: 500, lineHeight: 1.08, color: 'var(--verde-oscuro)'}}>
            Espacios para <em style={{color:'var(--terracota)'}}>cultivar</em> lo que florece en ti.
          </h2>
        </div>
      </div>
    </section>
  );
}

// Comunidad snapshot (home) - testimonios + blog CTA simplified
function ComunidadHome() {
  return (
    <section className="section-pad" style={{padding: '120px 0', background: 'var(--crema)'}}>
      <div className="container">
        <div className="grid-2-cols" style={{
          display:'grid', gridTemplateColumns:'1fr 1fr', gap: 32,
        }}>
          <a href="talleres.html" style={{
            background: 'var(--verde-oscuro)', color: '#F4EDE5',
            borderRadius: 28, padding: 48, minHeight: 320,
            display:'flex', flexDirection:'column', justifyContent:'space-between',
            position:'relative', overflow:'hidden',
          }}>
            <svg viewBox="0 0 200 200" style={{position:'absolute', right:-40, bottom:-40, width: 260, opacity:.12, color: '#F4EDE5'}} fill="none" stroke="currentColor" strokeWidth=".6">
              <circle cx="100" cy="100" r="80"/><circle cx="100" cy="100" r="55"/><circle cx="100" cy="100" r="30"/>
            </svg>
            <div style={{position:'relative'}}>
              <div style={{fontSize: 11, letterSpacing: '.3em', color: '#E8B888', fontWeight: 600, marginBottom: 18}}>TALLERES & RETIROS</div>
              <h3 style={{fontFamily:'var(--serif)', fontSize: 40, fontWeight: 500, lineHeight: 1.05}}>Mudar la piel.<br/>Respirar. Renacer.</h3>
            </div>
            <div style={{position:'relative', marginTop: 32, fontSize: 12, letterSpacing: '.2em', color:'#E8B888', fontWeight: 600, display:'inline-flex', gap: 10, alignItems:'center'}}>
              VER MÁS <IconArrow size={14}/>
            </div>
          </a>
          <a href="empresas.html" style={{
            background: 'var(--terracota)', color: '#F4EDE5',
            borderRadius: 28, padding: 48, minHeight: 320,
            display:'flex', flexDirection:'column', justifyContent:'space-between',
            position:'relative', overflow:'hidden',
          }}>
            <svg viewBox="0 0 200 200" style={{position:'absolute', left:-30, top:-30, width: 200, opacity:.18, color: '#F4EDE5'}} fill="none" stroke="currentColor" strokeWidth=".7">
              <circle cx="100" cy="100" r="80"/><circle cx="100" cy="100" r="55"/>
            </svg>
            <div style={{position:'relative'}}>
              <div style={{fontSize: 11, letterSpacing: '.3em', opacity: .85, fontWeight: 600, marginBottom: 18}}>PARA EMPRESAS</div>
              <h3 style={{fontFamily:'var(--serif)', fontSize: 40, fontWeight: 500, lineHeight: 1.05}}>Cultivamos equipos donde el bienestar es estrategia.</h3>
            </div>
            <div style={{position:'relative', marginTop: 32, fontSize: 12, letterSpacing: '.2em', fontWeight: 700, display:'inline-flex', gap: 10, alignItems:'center'}}>
              SOLICITAR PROPUESTA <IconArrow size={14}/>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

window.EsenciaHome = EsenciaHome;
window.ServiciosHome = ServiciosHome;
window.ComunidadHome = ComunidadHome;