const testimonialsStyles = {
  wrap: { padding: "120px 40px", background: "#0f0f0f" },
  inner: { maxWidth: 1280, margin: "0 auto" },
  header: { marginBottom: 56, display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" },
  label: { fontSize: 13, color: "rgba(255,255,255,0.55)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16, fontWeight: 500 },
  title: { fontFamily: "'Outfit', sans-serif", fontSize: "clamp(34px, 4.5vw, 54px)", lineHeight: 1.05, letterSpacing: "-0.02em", fontWeight: 400, textWrap: "balance", maxWidth: 720, color: "white" },
  sub: { fontSize: 17, color: "rgba(255,255,255,0.7)", marginTop: 16, lineHeight: 1.5, maxWidth: 600 },

  // Results grid
  resultsGrid: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, marginBottom: 80 },
  resultCard: {
    borderRadius: 12, overflow: "hidden",
    position: "relative",
    aspectRatio: "3 / 4",
    background: "var(--warm-700)",
    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.4)",
    transition: "transform 0.25s, box-shadow 0.25s"
  },
  resultBadge: {
    position: "absolute", bottom: 12, left: "50%",
    transform: "translateX(-50%)",
    background: "rgba(30, 42, 27, 0.75)",
    backdropFilter: "blur(8px)",
    color: "var(--cream-50)",
    padding: "6px 14px", borderRadius: 999,
    fontSize: 12, fontWeight: 500, letterSpacing: "0.04em",
    whiteSpace: "nowrap"
  },

  // Text testimonials - image grid
  divider: { borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: 72, marginTop: 4 },
  testsLabel: { fontSize: 13, color: "rgba(255,255,255,0.55)", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16, fontWeight: 500 },
  testsTitle: { fontFamily: "'Outfit', sans-serif", fontSize: "clamp(28px, 3.5vw, 42px)", lineHeight: 1.1, letterSpacing: "-0.02em", fontWeight: 400, textWrap: "balance", maxWidth: 600, marginBottom: 40, color: "white" },
  testsGrid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 },
  testCard: {
    aspectRatio: "1 / 1",
    borderRadius: 16, overflow: "hidden",
    background: "var(--warm-700)",
    border: "2px solid rgba(255,255,255,0.12)",
    boxShadow: "0 8px 24px -8px rgba(0,0,0,0.3)",
    transition: "transform 0.25s, box-shadow 0.25s",
    cursor: "pointer"
  },
  // Modal
  modal: {
    position: "fixed", inset: 0, zIndex: 100,
    background: "rgba(0,0,0,0.95)",
    display: "flex", alignItems: "center", justifyContent: "center"
  },
  modalImg: {
    maxWidth: "90vw", maxHeight: "90vh",
    borderRadius: 16, objectFit: "contain",
    border: "3px solid rgba(255,255,255,0.15)"
  },
  modalClose: {
    position: "absolute", top: 20, right: 20,
    width: 44, height: 44, borderRadius: "50%",
    background: "rgba(255,255,255,0.15)", color: "white",
    display: "grid", placeItems: "center", cursor: "pointer"
  },
  modalNav: {
    position: "absolute", top: "50%", transform: "translateY(-50%)",
    width: 56, height: 56, borderRadius: "50%",
    background: "rgba(255,255,255,0.2)", color: "white",
    display: "grid", placeItems: "center", cursor: "pointer",
    backdropFilter: "blur(8px)"
  },
  modalPrev: { left: 20 },
  modalNext: { right: 20 }
};

const googleReviews = [
  { name: "Meire Amaral", text: "Profissional excelente, atenciosa no atendimento tanto no treino, quanto na dieta proposta, acompanhamento e feedback que me deixou super segura e com resultado maravilhoso." },
  { name: "Ma Eliza", text: "Atendimento nota 10! Sempre disponível para tirar dúvidas, super atenciosa e profissional. Os treinos são ótimos, personalizados e com resultados visíveis! Recomendo demais o acompanhamento!! 💪✨" },
  { name: "Evy", text: "Estou extremamente satisfeita com o trabalho da minha assessora! Ela montou meu treino e minha dieta de academia com todo cuidado e dedicação. Fiquei muito feliz com a atenção, o profissionalismo e o carinho em cada detalhe. Já estou animada com os resultados e super recomendo!" },
  { name: "Simone Sampaio", text: "Ótima profissional, atenciosa, com atendimento bem rápido quando surge as dúvidas sobre os treinos. Treinos bem adequados as minhas particularidades. Recomendo." },
  { name: "Kathielly Saltão", text: "A Di é extremamente atenciosa e sempre disponível para responder as dúvidas e também fazer qualquer alteração necessária nos exercícios e também no plano alimentar! 🧡" },
  { name: "Camila Martins", text: "Excelente profissional! Atenciosa dedicada e realmente se preocupa com os resultados. Acompanhamento top, super recomendo!" },
  { name: "Ana Nascimento", text: "Personal maravilhosa sempre pronta pra ajudar super humana além de personal, amiga que sempre aconselha e nos entende! Amo o trabalho dessa mulher e sua equipe nota mil! 😍" },
  { name: "Carolina Guimarães", text: "Diana é uma super profissional! Atenciosa, respostas rápidas e sempre disponível. Com certeza, ter um profissional assim, que nos acompanhar de pertinho, faz toda diferença." },
  { name: "Rosilane Rose", text: "A Diana é uma profissional incrível! Sempre presente, atenciosa e comprometida com nossos resultados. Os treinos e o plano alimentar são totalmente personalizados e me ajudam a manter o foco todos os dias. 👏🥰" },
  { name: "Luiza Dolwitsch", text: "Excelente profissional! Humana, tem empatia, transforma a dieta em um prazer. Consegui perder um pouco da vergonha na academia, por saber que estou bem orientada." },
];

const avatarColors = ["#e8324a","#7e0320","#4a7c59","#2563eb","#d97706","#7c3aed","#db2777","#059669","#dc2626","#0891b2"];

const results = [
  { src: "img/antes%20e%20depois%20(1).jpeg", alt: "Resultado antes e depois 1" },
  { src: "img/antes%20e%20depois%20(2).jpg", alt: "Resultado antes e depois 2" },
  { src: "img/antes%20e%20depois%20(3).jpg", alt: "Resultado antes e depois 3" },
  { src: "img/antes%20e%20depois%20(4).jpg", alt: "Resultado antes e depois 4" },
  { src: "img/antes%20e%20depois%20(5).jpg", alt: "Resultado antes e depois 5" },
  { src: "img/antes%20e%20depois%20(6).JPG", alt: "Resultado antes e depois 6" },
  { src: "img/antes%20e%20depois%20(7).JPG", alt: "Resultado antes e depois 7" },
  { src: "img/antes%20e%20depois%20(8).JPG", alt: "Resultado antes e depois 8" },
  { src: "img/antes%20e%20depois%20(9).JPG", alt: "Resultado antes e depois 9" },
  { src: "img/antes%20e%20depois%20(10).JPG", alt: "Resultado antes e depois 10" },
  { src: "img/antes%20e%20depois%20(11).JPG", alt: "Resultado antes e depois 11" },
  { src: "img/antes%20e%20depois%20(12).JPG", alt: "Resultado antes e depois 12" },
  { src: "img/antes%20e%20depois%20(13).JPG", alt: "Resultado antes e depois 13" },
  { src: "img/antes%20e%20depois%20(14).JPG", alt: "Resultado antes e depois 14" },
  { src: "img/antes%20e%20depois%20(15).JPG", alt: "Resultado antes e depois 15" },
];

const tests = [
  { src: "img/depoimentos%20em%20print%20(1).PNG", alt: "Depoimento 1" },
  { src: "img/depoimentos%20em%20print%20(2).PNG", alt: "Depoimento 2" },
  { src: "img/depoimentos%20em%20print%20(3).PNG", alt: "Depoimento 3" },
  { src: "img/depoimentos%20em%20print%20(4).PNG", alt: "Depoimento 4" },
  { src: "img/depoimentos%20em%20print%20(5).PNG", alt: "Depoimento 5" },
  { src: "img/depoimentos%20em%20print%20(6).PNG", alt: "Depoimento 6" },
  { src: "img/depoimentos%20em%20print%20(7).PNG", alt: "Depoimento 7" },
  { src: "img/depoimentos%20em%20print%20(8).PNG", alt: "Depoimento 8" },
  { src: "img/depoimentos%20em%20print%20(9).PNG", alt: "Depoimento 9" },
];

const Testimonials = ({ onWhatsApp }) => {
  const [modalOpen, setModalOpen] = React.useState(false);
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const resultsScrollRef = React.useRef(null);

  const scrollResults = (dir) => {
    if (!resultsScrollRef.current) return;
    resultsScrollRef.current.scrollBy({ left: dir * 300, behavior: "smooth" });
  };

  const openModal = (index) => {
    setCurrentIndex(index);
    setModalOpen(true);
  };

  const closeModal = () => setModalOpen(false);

  const prevImg = () => setCurrentIndex((prev) => (prev === 0 ? tests.length - 1 : prev - 1));
  const nextImg = () => setCurrentIndex((prev) => (prev === tests.length - 1 ? 0 : prev + 1));

  React.useEffect(() => {
    const handleKeyDown = (e) => {
      if (!modalOpen) return;
      if (e.key === "Escape") closeModal();
      if (e.key === "ArrowLeft") prevImg();
      if (e.key === "ArrowRight") nextImg();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [modalOpen]);

  return (
    <section id="depoimentos" className="testimonials-wrap" style={testimonialsStyles.wrap}>
      <div style={testimonialsStyles.inner}>

      {/* Header */}
      <div style={testimonialsStyles.header}>
        <div>
          <div style={testimonialsStyles.label}>Resultados reais</div>
          <h2 style={testimonialsStyles.title}>Depoimentos de quem decidiu evoluir com estratégia.</h2>
        </div>
        <span className="stat-pill" style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          background: "var(--sage-900)", color: "var(--cream-50)",
          padding: "12px 22px", borderRadius: 999,
          fontSize: 15, fontWeight: 500, flexShrink: 0
        }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#7e0320", flexShrink: 0 }}></span>
          +400 resultados reais
        </span>
      </div>

      {/* Before/After scroll arrows + grid */}
      <div style={{ position: "relative" }}>
        <button className="results-arrow results-arrow-left" onClick={() => scrollResults(-1)} style={{
          position: "absolute", left: -20, top: "50%", transform: "translateY(-50%)",
          zIndex: 5, width: 40, height: 40, borderRadius: "50%",
          background: "var(--warm-700)", border: "1px solid rgba(255,255,255,0.12)",
          color: "white", display: "grid", placeItems: "center",
          boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
        }}>
          <IconChevronLeft size={20} />
        </button>
        <button className="results-arrow results-arrow-right" onClick={() => scrollResults(1)} style={{
          position: "absolute", right: -20, top: "50%", transform: "translateY(-50%)",
          zIndex: 5, width: 40, height: 40, borderRadius: "50%",
          background: "var(--warm-700)", border: "1px solid rgba(255,255,255,0.12)",
          color: "white", display: "grid", placeItems: "center",
          boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
        }}>
          <IconChevronRight size={20} />
        </button>
      <div className="results-grid" ref={resultsScrollRef} style={testimonialsStyles.resultsGrid}>
        {results.map((r, i) => (
          <div
            key={i}
            style={testimonialsStyles.resultCard}
            onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 20px 40px -12px rgba(0,0,0,0.5)"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 8px 24px -8px rgba(0,0,0,0.4)"; }}
          >
            <img
              src={r.src}
              alt={r.alt}
              style={{ width: "100%", height: "100%", objectFit: i === 2 ? "contain" : "cover", display: "block" }}
            />
            <div style={testimonialsStyles.resultBadge}>Antes → Depois</div>
          </div>
        ))}
      </div>
      </div>

      {/* CTA abaixo das imagens */}
      <div style={{ textAlign: "center", marginBottom: 80 }}>
        <button
          onClick={onWhatsApp}
          style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "16px 32px", borderRadius: 999,
            background: "#1A9E4A", color: "white",
            fontSize: 16, fontWeight: 500,
            boxShadow: "0 8px 24px -8px rgba(26,158,74,0.4)",
            transition: "transform 0.2s, background 0.2s"
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = "#157A3A"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.background = "#1A9E4A"; }}
        >
          Quero ter meu planejamento
        </button>
      </div>

      {/* Image testimonials responsive list */}
      <div style={testimonialsStyles.divider}>
        <div style={testimonialsStyles.testsLabel}>O que dizem</div>
        <h3 style={testimonialsStyles.testsTitle}>Depoimentos de quem passou pelo método.</h3>
        <div className="tests-grid" style={testimonialsStyles.testsGrid}>
          {tests.map((t, i) => (
            <div
              key={i}
              style={testimonialsStyles.testCard}
              onClick={() => openModal(i)}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 16px 32px -12px rgba(0,0,0,0.5)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.3)"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 8px 24px -8px rgba(0,0,0,0.3)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)"; }}
            >
              <img
                src={t.src}
                alt={t.alt}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
            </div>
          ))}
        </div>
        <p style={{ textAlign: "center", marginTop: 16, fontSize: 14, color: "rgba(255,255,255,0.5)" }}>Clique para ver todos os depoimentos</p>
      </div>

      {/* Google Reviews */}
      <div style={{ borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: 64, marginTop: 64 }}>
        {/* Header Google */}
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 32, flexWrap: "wrap" }}>
          <svg width="80" height="28" viewBox="0 0 272 92" xmlns="http://www.w3.org/2000/svg">
            <path d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#EA4335"/>
            <path d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#FBBC05"/>
            <path d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z" fill="#4285F4"/>
            <path d="M225 3v65h-9.5V3h9.5z" fill="#34A853"/>
            <path d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z" fill="#EA4335"/>
            <path d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.5-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z" fill="#4285F4"/>
          </svg>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ color: "#FBBC04", fontSize: 18, letterSpacing: 2 }}>★★★★★</span>
            <span style={{ color: "white", fontWeight: 600, fontSize: 16 }}>5,0</span>
            <span style={{ color: "rgba(255,255,255,0.5)", fontSize: 14 }}>· 26 avaliações no Google</span>
          </div>
        </div>

        {/* Cards marquee infinito */}
        <div style={{ overflow: "hidden", position: "relative" }}>
          <div className="google-marquee">
            {[...googleReviews, ...googleReviews].map((r, i) => (
              <div key={i} style={{
                flexShrink: 0, width: 280,
                background: "var(--warm-700)",
                border: "1px solid rgba(255,255,255,0.08)",
                borderRadius: 16, padding: 20,
                display: "flex", flexDirection: "column", gap: 12
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: "50%",
                    background: avatarColors[i % avatarColors.length],
                    display: "grid", placeItems: "center",
                    fontSize: 16, fontWeight: 700, color: "white", flexShrink: 0
                  }}>
                    {r.name.charAt(0)}
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600, color: "white" }}>{r.name}</div>
                    <div style={{ color: "#FBBC04", fontSize: 13, letterSpacing: 1 }}>★★★★★</div>
                  </div>
                </div>
                <p style={{ fontSize: 13, lineHeight: 1.6, color: "rgba(255,255,255,0.75)", margin: 0 }}>{r.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      </div>

      {/* Modal */}
      {modalOpen && (
        <div style={testimonialsStyles.modal} onClick={closeModal}>
          <img
            src={tests[currentIndex].src}
            alt={tests[currentIndex].alt}
            style={testimonialsStyles.modalImg}
            onClick={e => e.stopPropagation()}
          />
          <button style={testimonialsStyles.modalClose} onClick={closeModal}>
            <IconClose size={20} />
          </button>
          <button style={{ ...testimonialsStyles.modalNav, ...testimonialsStyles.modalPrev }} onClick={(e) => { e.stopPropagation(); prevImg(); }}>
            <IconChevronLeft size={24} />
          </button>
          <button style={{ ...testimonialsStyles.modalNav, ...testimonialsStyles.modalNext }} onClick={(e) => { e.stopPropagation(); nextImg(); }}>
            <IconChevronRight size={24} />
          </button>
        </div>
      )}

      <style>{`
        @media (max-width: 960px) {
          .results-grid { grid-template-columns: 1fr 1fr !important; }
          .results-arrow { display: none !important; }
        }
        @media (max-width: 560px) {
          .stat-pill { font-size: 13px !important; padding: 8px 14px !important; max-width: 280px !important; flex-wrap: wrap !important; justify-content: center !important; }
          /* setas visíveis no mobile (scroll horizontal) */
          .results-arrow { display: grid !important; width: 32px !important; height: 32px !important; }
          .results-arrow-left { left: 6px !important; }
          .results-arrow-right { right: 6px !important; }
          .testimonials-wrap { padding: 60px 20px !important; }
          .results-grid {
            display: flex !important;
            grid-template-columns: none !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 8px;
            margin-bottom: 56px !important;
            scrollbar-width: none;
          }
          .results-grid > div {
            flex: 0 0 220px;
            scroll-snap-align: start;
          }
          .tests-grid {
            display: flex !important;
            grid-template-columns: none !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding-bottom: 8px;
            scrollbar-width: none;
          }
          .tests-grid > div {
            flex: 0 0 280px;
            scroll-snap-align: start;
          }
        }
        .results-grid::-webkit-scrollbar,
        .tests-grid::-webkit-scrollbar { display: none; }
        @keyframes marquee {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .google-marquee {
          display: flex;
          gap: 16px;
          width: max-content;
          animation: marquee 32s linear infinite;
        }
        .google-marquee:hover {
          animation-play-state: paused;
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Testimonials });