const Depoimentos = () => {
  const list = [
    {
      text: <>Convivi por dois anos com <em>vertigens</em> sem diagnóstico. Foi a primeira consulta em que alguém me ouviu antes de me examinar — e isso fez toda a diferença.</>,
      who: { nm: "Marina C.", ds: "Paciente · 52 anos · Curitiba", in: "M" }
    },
    {
      text: <>Recomendo o Dr. Ariello para casos <em>complexos</em>. Conduz a investigação com método e dialoga abertamente com o restante da equipe.</>,
      who: { nm: "Dr. Rafael M.", ds: "Neurologista · São Paulo", in: "R" }
    },
    {
      text: <>Um <em>cuidado raro</em>. Saí da consulta entendendo o que tenho, o porquê dos sintomas e o caminho do tratamento — coisa rara nos tempos de hoje.</>,
      who: { nm: "Helena S.", ds: "Paciente · 67 anos · Curitiba", in: "H" }
    }
  ];

  const [i, setI] = React.useState(0);
  const total = list.length;
  const next = () => setI((p) => (p + 1) % total);
  const prev = () => setI((p) => (p - 1 + total) % total);

  const cur = list[i];

  return (
    <section className="depoimentos section-pad">
      <div className="shell">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span>Depoimentos</div>
            <h2>Veja o que <span className="it">estão dizendo.</span></h2>
          </div>
          <div className="right">
            Relatos de pacientes e colegas médicos — colhidos em consultas, retornos e correspondências.
          </div>
        </div>

        <div className="dep-stage">
          <div className="dep-quote">
            <span className="mark">"</span>
            <div className="dep-text">{cur.text}</div>
            <div className="dep-author">
              <div className="av">{cur.who.in}</div>
              <div className="who">
                <div className="nm">{cur.who.nm}</div>
                <div className="ds">{cur.who.ds}</div>
              </div>
            </div>
          </div>

          <div className="dep-nav">
            <div className="dep-count">
              <strong>{String(i+1).padStart(2,'0')}</strong> &nbsp;/&nbsp; {String(total).padStart(2,'0')}
            </div>
            <div className="dep-arrows">
              <button onClick={prev} aria-label="Anterior"><Icon name="arr-l" size={18}/></button>
              <button className="solid" onClick={next} aria-label="Próximo"><Icon name="arr" size={18}/></button>
            </div>
            <div className="dep-track" style={{width: 240}}>
              {list.map((_, k) => (
                <span key={k} className={"dep-dot " + (k === i ? "active" : "")} onClick={() => setI(k)}></span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Depoimentos = Depoimentos;