import { Star } from "lucide-react";

export const GOOGLE_REVIEWS_URL = "https://share.google/tzPTnDFm1XwWQzxJo";

export function GoogleReviewsBadge({ className = "" }: { className?: string }) {
  return (
    <a
      href={GOOGLE_REVIEWS_URL}
      target="_blank"
      rel="noopener"
      aria-label="Ver as avaliações reais da Ararabot no Google — 5,0 estrelas"
      className={`inline-flex items-center gap-3 rounded-full border border-border bg-card/70 px-4 py-2 text-sm shadow-elevated backdrop-blur transition hover:bg-card hover:shadow-glow ${className}`}
    >
      <svg viewBox="0 0 48 48" aria-hidden="true" className="h-5 w-5">
        <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.2-.1-2.4-.4-3.5z"/>
        <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16.1 19 13 24 13c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34.6 6.1 29.6 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/>
        <path fill="#4CAF50" d="M24 44c5.4 0 10.3-2.1 14-5.5l-6.5-5.3C29.7 34.7 27 36 24 36c-5.2 0-9.6-3.3-11.2-8l-6.6 5.1C9.5 39.6 16.2 44 24 44z"/>
        <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.2 5.7l6.5 5.3C42 35.6 44 30.2 44 24c0-1.2-.1-2.4-.4-3.5z"/>
      </svg>
      <span className="flex items-center gap-1">
        <span className="font-bold text-foreground">5,0</span>
        <span className="flex text-accent">
          {Array.from({ length: 5 }).map((_, i) => (
            <Star key={i} className="h-3.5 w-3.5 fill-accent" />
          ))}
        </span>
      </span>
      <span className="text-xs text-muted-foreground">
        <span className="font-semibold text-foreground">Avaliações reais</span> no Google
      </span>
    </a>
  );
}