/* global React */
const REVIEWS_URL = 'https://maps.google.com/?cid=12181362237813676095';

function GoogleG({ size = 18 }) {
  return (
    <svg viewBox="0 0 48 48" width={size} height={size} aria-hidden="true">
      <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/>
      <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/>
      <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/>
      <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/>
    </svg>
  );
}

function Testimonios() {
  const reviews = [
    { who: 'Juan Carlos MDG', text: 'Excelente servicio. Me atendieron de maravilla, fueron rapidísimos y en un solo día me dejaron como nuevo el aire acondicionado que llevaba tiempo roto. Muy recomendables. No dudaré en volver a contactar.' },
    { who: 'Loreto Garcia', text: '¡Espectaculares! La lavadora como nueva. Gracias por todo, por la paciencia y por el buen trabajo que habéis hecho. Gracias de corazón.' },
    { who: 'Milu', text: 'Muy satisfechos con la reforma y con los chicos. Cambiaron la bañera y quedó todo muy bien.' },
    { who: 'Juan Perea', text: 'Llamé por un problema con el aire acondicionado de mi apartamento turístico y el termo eléctrico, y quedó todo solucionado en tiempo récord, además siendo verano.' },
    { who: 'Faliyo', text: 'Me mandaron un fontanero y arregló el calentador el mismo día. Rápido y con buena comunicación. Gracias.' },
    { who: 'Ismael Fernandez', text: 'Muy eficientes los chicos. Les llamé esta mañana y al mediodía todo listo. ¡Gracias!' },
  ];

  return (
    <section className="testimonios" id="opiniones">
      <SectionHead
        eyebrow="Opiniones"
        title="Lo que dicen nuestros clientes en Google."
        subtitle="Reseñas verificadas. Sin filtros."
      />
      <div className="container-wide">
        <a className="reviews-summary reveal" href={REVIEWS_URL} target="_blank" rel="noreferrer">
          <GoogleG size={34} />
          <div className="rs-score">
            <span className="rs-num">5,0</span>
            <span className="rs-stars">★★★★★</span>
          </div>
          <div className="rs-meta">
            <strong>Excelente</strong>
            <span>Basado en 15 reseñas de Google</span>
          </div>
          <span className="rs-cta">Ver todas →</span>
        </a>

        <div className="testi-row reveal">
          {reviews.map((r) => (
            <div key={r.who} className="testi-card">
              <div className="testi-stars">★★★★★</div>
              <p>{r.text}</p>
              <div className="testi-author">
                <div className="testi-avatar">{r.who.charAt(0)}</div>
                <div>
                  <div className="who">{r.who}</div>
                  <div className="meta"><span className="meta-g"><GoogleG size={12} /></span> Reseña en Google</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="reveal center" style={{ marginTop: 36 }}>
          <a className="btn btn-ghost" href={REVIEWS_URL} target="_blank" rel="noreferrer">
            Ver reseñas en Google →
          </a>
        </div>
      </div>
    </section>
  );
}

window.GoogleG = GoogleG;
window.Testimonios = Testimonios;