const Sobre = () => {
  const creds = [
    { idx: "01", html: <>Médico formado pela <strong>Universidade Federal do Paraná</strong> (UFPR).</> },
    { idx: "02", html: <>Oftalmologista pela <strong>Universidade de São Paulo</strong> (USP-SP).</> },
    { idx: "03", html: <>Especialização em <strong>Neuro-oftalmologia</strong> pela USP-SP.</> },
    { idx: "04", html: <>Especialização em <strong>Retina Clínica e Vítreo</strong> pela USP-SP.</> },
    { idx: "05", html: <>Doutorando (PhD) em <strong>Neuro-oftalmologia e Doença de Alzheimer</strong> pela USP-SP.</> },
    { idx: "06", html: <>Postdoctoral Fellow em <strong>Neurologia Visual e Vestibular</strong> pela Johns Hopkins University.</> }
  ];

  return (
    <section className="sobre section-pad" id="sobre">
      <div className="shell">
        <div className="sobre-grid">
          <div className="sobre-img">
            <img src="img/ariello-portrait.jpg" alt="Dr. Leonardo Ariello no estúdio" />
            <div className="badge">
              <div className="num">15+</div>
              <div className="lab">Anos dedicados<br/>à medicina</div>
            </div>
          </div>

          <div className="sobre-copy">
            <div className="eyebrow" style={{marginBottom:18}}><span className="dot"></span>Sobre o médico</div>
            <h2>Um olhar <span className="it">paciente</span> sobre cada caso.</h2>
            <p className="intro">
              Médico oftalmologista com formação pelas mais renomadas instituições do Brasil e do mundo. Une rigor acadêmico e escuta atenta — porque diagnóstico bom também é tempo bem investido.
            </p>

            <ol className="creds-list">
              {creds.map((c, i) => (
                <li key={i}>
                  <span className="idx">{c.idx}</span>
                  <span className="text">{c.html}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Sobre = Sobre;