// Proof.jsx — testimonio + bloque local
const Proof = () => {
  return (
    <section className="s" id="prueba">
      <div className="container">
        <div className="s-head">
          <div className="left">
            <div className="s-eyebrow">Prueba</div>
            <h2 className="s-title">17 años, <span className="acc">90+ proyectos,</span> 0 humo.</h2>
            <p className="s-sub">No somos una startup gringa con plantillas. Somos un equipo en Cartago que sabe cómo se trabaja en Costa Rica.</p>
          </div>
        </div>

        <div className="proof-grid">
          <div className="testimonial">
            <span className="quote-mark">"</span>
            <blockquote>
              Antes perdíamos <span className="acc">35% de las consultas</span> por no contestar a tiempo. Ahora el bot responde en segundos, agenda solo y mi equipo se enfoca en pacientes. <span className="acc">En 3 meses recuperamos la inversión.</span>
            </blockquote>
            <div className="person">
              <span className="av">DR</span>
              <div className="info">
                <div className="name">— Testimonio real pendiente</div>
                <div className="role">Clínica · Cartago, CR</div>
              </div>
              <span className="placeholder-note">[ placeholder · pasame el real ]</span>
            </div>
          </div>

          <div className="local-card">
            <div className="map">
              <svg viewBox="0 0 360 220" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
                <rect width="360" height="220" fill="#eef2f6"/>
                {/* roads */}
                <path d="M0,90 Q120,60 240,100 T360,80" stroke="#cfd6e0" strokeWidth="3" fill="none"/>
                <path d="M0,150 L360,140" stroke="#cfd6e0" strokeWidth="2" fill="none"/>
                <path d="M120,0 Q140,80 110,220" stroke="#cfd6e0" strokeWidth="2" fill="none"/>
                <path d="M250,0 L240,220" stroke="#cfd6e0" strokeWidth="2" fill="none"/>
                {/* blocks */}
                <rect x="20" y="100" width="60" height="32" fill="#dde4ec" rx="2"/>
                <rect x="20" y="160" width="80" height="40" fill="#dde4ec" rx="2"/>
                <rect x="160" y="20" width="60" height="40" fill="#dde4ec" rx="2"/>
                <rect x="160" y="160" width="60" height="40" fill="#dde4ec" rx="2"/>
                <rect x="270" y="100" width="60" height="40" fill="#dde4ec" rx="2"/>
                {/* pin Cartago */}
                <g transform="translate(180,108)">
                  <circle r="22" fill="rgba(46,204,113,0.18)"/>
                  <circle r="14" fill="rgba(46,204,113,0.30)"/>
                  <path d="M0,-10 a10,10 0 1,1 0,20 a10,10 0 1,1 0,-20 z" fill="#2ECC71"/>
                  <circle r="3" fill="#fff"/>
                </g>
                <text x="200" y="112" fontFamily="Montserrat" fontSize="13" fontWeight="800" fill="#0D1B2A">Cartago, CR</text>
                <text x="200" y="126" fontFamily="Inter" fontSize="10" fill="#687280">BYTEC HQ · desde 2007</text>
              </svg>
            </div>
            <h4>Equipo local. Trato directo.</h4>
            <p>Nada de tickets en inglés a las 4am. Hablás con quien construye tu producto, en español, en el mismo huso horario.</p>
            <div className="since">
              <div className="stat"><strong>17+</strong><span>años en CR</span></div>
              <div className="stat"><strong>90+</strong><span>proyectos</span></div>
              <div className="stat"><strong>4</strong><span>industrias</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Proof = Proof;