const PARCERIAS = [
  { name: "Valdenir Gomes",          role: "Massoterapeuta",       phone: "5514997989324", img: "assets/parcerias-valdenir.webp",    icon: "💆", color: "#7b5ea7", bg: "#f0ebf8" },
  { name: "Fernanda Velozo",         role: "Psicóloga",            phone: "5514991223370", img: "assets/parcerias-fernanda.webp",    icon: "🧠", color: "#1a6fa3", bg: "#e8f4fd" },
  { name: "Salão Elaine Luna",       role: "Salão de Beleza",      phone: "5514988102588", img: "assets/parcerias-elaine.jpg",       icon: "✂️", color: "#b8860b", bg: "#fdf3e0" },
  { name: "Luiz Bucharelli Marketing", role: "Agência de Marketing", phone: "5514981142796", img: "assets/parcerias-marketing.png",  icon: "📣", color: "#c0392b", bg: "#fdecea" },
  { name: "Uber Horse",              role: "Transporte Executivo", phone: "5514997114989", img: "assets/parcerias-uberhorse.png",  icon: "🚗", color: "#1a6b3a", bg: "#e4f5ec" },
  { name: "Girls Style",             role: "Moda & Estilo",        phone: "5514998047343", img: "assets/parcerias-girlsstyle.jpg",   icon: "💅", color: "#9b59b6", bg: "#f5eeff" },
];

const WA_MSG = encodeURIComponent("Olá, vim pelo site do S.A.T.E. e quero saber mais sobre seus serviços!");

const Parcerias = () => {
  const [current, setCurrent] = React.useState(0);
  const total = PARCERIAS.length;
  const timerRef = React.useRef(null);

  const resetTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => setCurrent(c => (c + 1) % total), 5000);
  };

  React.useEffect(() => {
    resetTimer();
    return () => clearInterval(timerRef.current);
  }, []);

  const go = (dir) => {
    setCurrent(c => (c + dir + total) % total);
    resetTimer();
  };

  const prev = PARCERIAS[(current - 1 + total) % total];
  const active = PARCERIAS[current];
  const next = PARCERIAS[(current + 1) % total];

  const Card = ({ parceiro, slot }) => (
    <div className={`parcerias-card parcerias-card--${slot}`}>
      <div className="parcerias-icon" style={{ background: parceiro.bg }}>
        {parceiro.img
          ? <img src={parceiro.img} alt={parceiro.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} />
          : <span style={{ fontSize: slot === "active" ? 72 : 56 }}>{parceiro.icon}</span>
        }
      </div>
      <div className="parcerias-body">
        <h3>{parceiro.name}</h3>
        <span className="parcerias-role" style={{ color: parceiro.color }}>{parceiro.role}</span>
        {slot === "active" && (
          <a
            href={`https://wa.me/${parceiro.phone}?text=${WA_MSG}`}
            target="_blank"
            rel="noopener noreferrer"
            className="parcerias-btn"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
              <path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.554 4.118 1.528 5.856L0 24l6.341-1.507A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.818 9.818 0 01-5.005-1.366l-.359-.213-3.767.895.952-3.664-.234-.376A9.818 9.818 0 1112 21.818z"/>
            </svg>
            Falar no WhatsApp
          </a>
        )}
      </div>
    </div>
  );

  return (
    <section className="section parcerias" id="parcerias">
      <div className="container">
        <div className="section-head center" data-reveal="up">
          <span className="kicker">REDE DE PARCERIAS</span>
          <h2>Serviços <em>com quem você pode confiar</em>.</h2>
          <p>
            Parceiros selecionados pelo S.A.T.E. para oferecer serviços com qualidade e condições especiais para quem cuida da saúde de todos.
          </p>
        </div>

        <div className="parcerias-carousel" data-reveal="up">
          <button className="parcerias-arrow" onClick={() => go(-1)} aria-label="Anterior">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 18 9 12 15 6"/>
            </svg>
          </button>

          <div className="parcerias-track">
            <Card parceiro={prev}   slot="side" />
            <Card parceiro={active} slot="active" />
            <Card parceiro={next}   slot="side" />
          </div>

          <button className="parcerias-arrow" onClick={() => go(1)} aria-label="Próximo">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="9 18 15 12 9 6"/>
            </svg>
          </button>
        </div>

        <div className="parcerias-dots">
          {PARCERIAS.map((_, i) => (
            <button
              key={i}
              className={`parcerias-dot ${i === current ? "active" : ""}`}
              onClick={() => { setCurrent(i); resetTimer(); }}
              aria-label={`Parceiro ${i + 1}`}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Parcerias });
