// Philosophy — split layout with isotipo watermark, copy + values grid
const Philosophy = () => {
  return (
    <section className="section philosophy" id="filosofia">
      <img src="../../assets/iso-saludaware-original.png" className="philosophy__iso" alt="" aria-hidden="true" />
      <div className="container">
        <div className="philosophy__grid">
          <div className="philosophy__media">
            <div className="philosophy__media-cap">
              Estamos contigo, para que puedas vivir plena y libremente.
            </div>
          </div>
          <div className="philosophy__copy">
            <span className="eyebrow-mark">Nuestra filosofía</span>
            <h2>Medicina que se adelanta.</h2>
            <p>
              Creemos en una medicina <strong>preventiva, de precisión, predictiva,
              personalizada y participativa</strong>. No esperamos a que algo pase —
              construimos hábitos contigo para que la salud sea parte de tu rutina.
            </p>
            <p>
              Cada plan empieza escuchando. Después combinamos datos, criterio
              clínico y tiempo real contigo, para tomar decisiones que tengan
              sentido en tu vida.
            </p>
          </div>
        </div>

        <div className="philosophy__values">
          <div className="philosophy__value">
            <img src="../../assets/icons/icon-target.png" alt="" />
            <div>
              <strong>Preventiva</strong>
              <span>Anticiparnos a los síntomas, no perseguirlos.</span>
            </div>
          </div>
          <div className="philosophy__value">
            <img src="../../assets/icons/icon-search.png" alt="" />
            <div>
              <strong>De precisión</strong>
              <span>Decisiones basadas en datos, no en supuestos.</span>
            </div>
          </div>
          <div className="philosophy__value">
            <img src="../../assets/icons/icon-brain.png" alt="" />
            <div>
              <strong>Personalizada</strong>
              <span>Un plan para ti, no un protocolo en serie.</span>
            </div>
          </div>
          <div className="philosophy__value">
            <img src="../../assets/icons/icon-shield.png" alt="" />
            <div>
              <strong>Participativa</strong>
              <span>Tú decides — nosotros acompañamos y explicamos.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Philosophy = Philosophy;