// ====================== GOOGLE REVIEWS CAROUSEL ======================
const REVIEWS = [
  { name: "Ane Fernanda", color: "#7e57c2", text: "Quero registrar minha satisfação com a JGF Distribuidora e destacar o atendimento do vendedor Augusto. Sempre muito atencioso, profissional e ágil, transmite segurança e confiança em cada negociação. O comprometimento e a qualidade no atendimento fazem toda a diferença, tornando a experiência de compra prática e positiva. Parabéns pelo excelente trabalho!" },
  { name: "Thays Souza", color: "#1a73e8", text: "Uma distribuidora completa e excelente, com variedades de produtos para escritório, limpeza e copa e com uma ótima qualidade. As entregas sempre são feitas dentro do prazo, o vendedor é muito atencioso, ágil e gentil. E os preços são justos. Parabéns, recomendo muito esta empresa!" },
  { name: "Renan Ferreira", color: "#e91e8c", text: "Excelente distribuidora! Produtos de qualidade, variedade incrível e entregas sempre dentro do prazo. O atendimento é ágil, cordial e muito eficiente, dá pra perceber o compromisso com o cliente em cada etapa. Além disso, os preços são justos e competitivos, o que faz toda a diferença no dia a dia. Recomendo fortemente para empresas que buscam confiança, praticidade e ótimo custo-benefício na reposição de materiais de limpeza e copa. Parabéns pelo ótimo trabalho!" },
  { name: "Evelyn Chagas", color: "#2e9b57", text: "Super satisfeita com a experiência! A empresa oferece uma grande variedade de produtos, com preços justos e entrega super rápida, exatamente como prometido. Tudo chegou direitinho e dentro do prazo. Com certeza voltarei a comprar e recomendo para quem busca qualidade e agilidade!" },
  { name: "Eliane Maciel", color: "#e91e8c", text: "Ótimo atendimento!!! Preço muito bom, excelente entrega, muitas variedades e rapidez. Muito satisfeita. Parabéns!" },
  { name: "V. Janga", color: "#2e9b57", text: "Atendimento personalizado com Augusto, super rápido e seguro, entrega no prazo e com muita dedicação." },
  { name: "Leonardo 2014", color: "#5a7fb5", text: "Gostaria de parabenizar a JGF Distribuidora pelo excelente trabalho na distribuição de materiais de escritório. Sempre demonstram agilidade, organização e comprometimento com a qualidade dos produtos e o atendimento ao cliente. É notável a dedicação da equipe em oferecer soluções práticas e eficientes, o que faz toda a diferença no nosso dia a dia." },
  { name: "Simone Santana", color: "#1a73e8", text: "Optei em comprar na empresa após analisar as avaliações. Me senti confiante em entregar minha documentação para cadastro, pois analisei também eles e percebi que não tem restrições nem reclamações nos órgãos de defesa consumidor. Pra mim, faz toda diferença! Recomendo demais!!!" },
  { name: "Letícia Angelo", color: "#1aa3a3", text: "Excelente empresa. Oferece preço justo, ampla variedade de produtos e agilidade no atendimento. Além de garantir entrega rápida." },
  { name: "Raniere Lima", color: "#6b7280", text: "Começamos a comprar este ano e estamos satisfeitos, tem uma boa variedade de produtos, e o atendimento é excelente, a Bruna sempre muito prestativa e atenciosa." },
  { name: "Rafael Rocha", color: "#c0392b", text: "Excelente empresa! Variedade incrível de materiais de escritório e limpeza. Preços justos, qualidade garantida e produtos de primeira. Atendimento cordial, rápido e sempre muito profissional." },
];

const REVIEW_URL = "https://www.google.com/search?q=JGF+Distribuidora";

function Stars({ size = 16 }) {
  return (
    <div style={{ display: "flex", gap: 1.5 }}>
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill="#fbbc04" aria-hidden="true">
          <path d="m12 17.27 5.18 3.13-1.37-5.9 4.59-3.97-6.06-.52L12 4.5 9.66 9.99l-6.06.52 4.59 3.97-1.37 5.9z" />
        </svg>
      ))}
    </div>
  );
}

function GoogleG({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z" />
      <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" />
      <path fill="#FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34A21.94 21.94 0 0 0 2 24c0 3.55.85 6.91 2.34 9.88l7.35-5.7z" />
      <path fill="#EA4335" d="M24 9.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 2.97 29.93 1 24 1 15.4 1 7.96 5.93 4.34 13.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z" />
    </svg>
  );
}

function ReviewCard({ r }) {
  return (
    <div style={{
      background: "#fff", border: "1px solid var(--line)", borderRadius: 14,
      padding: "22px 22px 24px", display: "flex", flexDirection: "column",
      boxShadow: "0 1px 3px rgba(16,30,60,.05)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
        <div style={{ width: 42, height: 42, borderRadius: "50%", background: r.color, color: "#fff", fontWeight: 700, fontSize: 19, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
          {r.name.charAt(0)}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: 14.5, color: "var(--navy)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.name}</div>
          <div style={{ marginTop: 3 }}><Stars size={15} /></div>
        </div>
        <span style={{ flexShrink: 0, opacity: .9 }}><GoogleG size={22} /></span>
      </div>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6, color: "#4a5266", fontWeight: 400, textWrap: "pretty" }}>{r.text}</p>
    </div>
  );
}

function ReviewsCarousel() {
  const calcPV = () => (typeof window === "undefined" ? 3 : window.innerWidth <= 640 ? 1 : window.innerWidth <= 1024 ? 2 : 3);
  const [perView, setPerView] = React.useState(calcPV);
  React.useEffect(() => {
    const onResize = () => setPerView(calcPV());
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  const maxIdx = Math.max(0, REVIEWS.length - perView);
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => { setIdx((i) => Math.min(i, maxIdx)); }, [maxIdx]);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((p) => (p >= maxIdx ? 0 : p + 1)), 5000);
    return () => clearInterval(t);
  }, [paused, maxIdx]);
  const go = (d) => setIdx((p) => Math.min(maxIdx, Math.max(0, p + d)));

  const arrow = (dir, disabled, onClick) => (
    <button onClick={onClick} disabled={disabled} aria-label={dir < 0 ? "Anterior" : "Próximo"}
      className="jgf-rev-arrow"
      style={{ width: 46, height: 46, borderRadius: "50%", border: "1px solid var(--line)", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", color: disabled ? "#c5cbd8" : "var(--navy)", boxShadow: "var(--shadow-soft)", opacity: disabled ? .55 : 1, cursor: disabled ? "default" : "pointer", transition: "background .15s, transform .15s", flexShrink: 0 }}
      onMouseEnter={(e) => { if (!disabled) { e.currentTarget.style.background = "var(--navy)"; e.currentTarget.style.color = "#fff"; } }}
      onMouseLeave={(e) => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.color = disabled ? "#c5cbd8" : "var(--navy)"; }}>
      {dir < 0 ? <IconChevronL size={22} stroke={2.2} /> : <IconChevronR size={22} stroke={2.2} />}
    </button>
  );

  return (
    <section style={{ display: "flex", justifyContent: "center", padding: "64px 0 64px" }}
      onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div style={{ width: "100%", maxWidth: 1320, padding: "0 26px" }}>
        {/* header */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", marginBottom: 34 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
            <GoogleG size={28} />
            <span style={{ fontWeight: 700, fontSize: 16, color: "#5f6368", letterSpacing: ".01em" }}>Avaliações do Google</span>
          </div>
          <h2 className="jgf-rev-title" style={{ margin: "6px 0 0", fontWeight: 800, fontSize: 28, color: "var(--navy)", letterSpacing: ".01em" }}>O QUE NOSSOS CLIENTES DIZEM</h2>
          <div className="jgf-rev-rating" style={{ display: "flex", alignItems: "center", justifyContent: "center", flexWrap: "wrap", gap: 9, marginTop: 12 }}>
            <span style={{ fontWeight: 800, fontSize: 20, color: "#fbbc04" }}>5,0</span>
            <Stars size={20} />
            <span style={{ color: "#8a93a6", fontSize: 13.5, fontWeight: 500 }}>· avaliações reais</span>
          </div>
          <div style={{ width: 64, height: 4, background: "var(--yellow)", borderRadius: 3, marginTop: 16 }} />
        </div>

        {/* carousel */}
        <div className="jgf-rev-row" style={{ display: "flex", alignItems: "center", gap: 16 }}>
          {arrow(-1, idx === 0, () => go(-1))}
          <div style={{ flex: 1, overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 20, transform: `translateX(calc(-${idx} * (100% + 20px) / ${perView}))`, transition: "transform .45s cubic-bezier(.4,0,.2,1)" }}>
              {REVIEWS.map((r, i) => (
                <div key={i} style={{ flex: `0 0 calc((100% - ${(perView - 1) * 20}px) / ${perView})` }}>
                  <ReviewCard r={r} />
                </div>
              ))}
            </div>
          </div>
          {arrow(1, idx >= maxIdx, () => go(1))}
        </div>

        {/* dots */}
        <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 26 }}>
          {Array.from({ length: maxIdx + 1 }).map((_, k) => (
            <button key={k} onClick={() => setIdx(k)} aria-label={`Ir para ${k + 1}`}
              style={{ width: k === idx ? 26 : 9, height: 9, borderRadius: 6, background: k === idx ? "var(--navy)" : "#cdd4e2", transition: "all .25s", cursor: "pointer" }} />
          ))}
        </div>

        {/* CTA */}
        <div style={{ display: "flex", justifyContent: "center", marginTop: 36 }}>
          <a href={REVIEW_URL} target="_blank" rel="noopener noreferrer"
            className="jgf-rev-cta"
            style={{ display: "inline-flex", alignItems: "center", gap: 12, background: "#fff", border: "1.5px solid var(--line)", color: "var(--navy)", fontWeight: 700, fontSize: 15, padding: "14px 30px", borderRadius: 30, boxShadow: "var(--shadow-soft)", transition: "transform .15s, box-shadow .15s, border-color .15s" }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-card)"; e.currentTarget.style.borderColor = "#c5cbd8"; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "var(--shadow-soft)"; e.currentTarget.style.borderColor = "var(--line)"; }}>
            <GoogleG size={22} />
            Avalie nossa empresa no Google
            <span style={{ color: "var(--yellow)", display: "flex" }}><IconArrowR size={19} stroke={2.2} /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ReviewsCarousel });