/* profile.jsx — Perfil académico + Sección RDMAX */

function Profile() {
  const creds = [
  ["award", "PhD en Ciencias Odontológicas", "Grado doctoral con enfoque en diagnóstico por imágenes"],
  ["scan", "Especialista en Radiología Oral y Maxilofacial", "Diagnóstico por imágenes de alta precisión"],
  ["pin", "Centro RDMAX", "Bogotá · Barquisimeto · Caracas"],
  ["chart", "Investigadora en diagnóstico CBCT", "Líneas de investigación clínica aplicada"],
  ["book", "Autora de publicaciones científicas", "Difusión académica internacional"]];

  return (
    <section className="section profile" id="perfil">
      <div className="wrap profile__grid">
        <div className="profile__intro reveal">
          <div className="eyebrow">Perfil académico</div>
          <h2 className="profile__title">
            Diagnóstico por imágenes maxilofaciales al más alto nivel.
          </h2>
          <p className="profile__lead">Especialista en diagnóstico por imágenes maxilofaciales con amplia experiencia en análisis de tomografía CBCT, fisuras radiculares,  odontología digital.



          </p>
          <div className="profile__stats">
            <div className="stat">
              <span className="stat__num">CBCT</span>
              <span className="stat__lbl">Tomografía de haz cónico</span>
            </div>
            <div className="stat">
              <span className="stat__num">3D</span>
              <span className="stat__lbl">Planificación digital</span>
            </div>
            <div className="stat">
              <span className="stat__num">IA</span>
              <span className="stat__lbl">Apoyo al diagnóstico</span>
            </div>
          </div>
        </div>

        <div className="profile__creds">
          {creds.map(([icon, title, sub], i) =>
          <div className="cred reveal" key={title} style={{ "--reveal-delay": `${i * 0.07}s` }}>
              <span className="cred__icon"><Icon name={icon} size={22} /></span>
              <div>
                <h3 className="cred__title">{title}</h3>
                <p className="cred__sub">{sub}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function RDMAX() {
  const features = [
  ["scan", "Radiodiagnóstico 100% digital", "Adquisición y procesamiento de imagen, con flujo totalmente digital."],
  ["layers", "Imágenes 3D de alta precisión", "Reconstrucción volumétrica CBCT para análisis maxilofacial detallado."],
  ["shield", "Protocolos clínicos rigurosos", "Estándares de calidad y seguridad en cada estudio."]];

  return (
    <section className="section rdmax" id="rdmax">
      <div className="wrap">
        <div className="rdmax__head reveal">
          <div className="eyebrow" style={{ color: "var(--accent-bright)" }}>Identidad institucional</div>
          <img className="rdmax__logo" src="assets/rdmax-logo.png" alt="RDMAX — Radiodiagnóstico Maxilofacial" />
          <div className="rdmax__head-grid">
            <h2 className="rdmax__title">
              Radiodiagnóstico maxilofacial<br /><span>100% digital</span>.
            </h2>
            <p className="rdmax__lead">
              Un centro especializado enfocado en imágenes de alta precisión, diagnóstico 3D
              y soporte clínico para odontología avanzada.
            </p>
          </div>
        </div>

        <div className="rdmax__panel reveal" style={{ "--reveal-delay": "0.1s" }}>
          <div className="rdmax__panel-head">
            <span className="rdmax__dot" /><span className="rdmax__dot" /><span className="rdmax__dot" />
            <span className="rdmax__panel-title">rdmax · medical imaging console</span>
            <span className="rdmax__status">● en línea</span>
          </div>
          <div className="rdmax__panel-body">
            <div className="rdmax__viewer">
              <img className="rdmax__viewer-img" src="assets/rdmax-estacion-cbct.png" alt="Estación de trabajo CBCT — Centro RDMAX" />
            </div>
            <div className="rdmax__features">
              {features.map(([icon, t, d]) =>
              <div className="rdmax__feature" key={t}>
                  <span className="rdmax__feature-icon"><Icon name={icon} size={20} /></span>
                  <div>
                    <h4>{t}</h4>
                    <p>{d}</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Profile, RDMAX });