// Hero visual — fotos reais dos carros rotacionando em torno do badge de desconto
const HeroVisual = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % 5), 2600);
    return () => clearInterval(id);
  }, []);

  const modelos = [
    { label: "Polo",    sub: "Hatch compacto", foto: "https://assets.disaltecnologia.com.br/catalog/cover/0b36d6d7fccd889c3a556df89cb38f14.webp" },
    { label: "Virtus",  sub: "Sedã compacto",  foto: "https://assets.disaltecnologia.com.br/catalog/cover/5d070078f173485a9dbda89deb1161af.webp" },
    { label: "T-Cross", sub: "SUV compacto",   foto: "https://assets.disaltecnologia.com.br/catalog/cover/eeac24cda459224ec7651cc0d93f5265.webp" },
    { label: "Nivus",   sub: "SUV coupé",      foto: "https://assets.disaltecnologia.com.br/catalog/cover/19555d3d10b415c680300062ec352b7f.webp" },
    { label: "Tera",    sub: "SUV",            foto: "https://assets.disaltecnologia.com.br/catalog/cover/a47e0c2b5eea982044ed7ad56b1a9ed9.webp" },
  ];

  const positions = [
    { top: "4%",    left: "50%",  transform: "translate(-50%, 0)" },
    { top: "28%",   right: "0%",  transform: "translateY(-50%)" },
    { bottom: "8%", right: "8%",  transform: "" },
    { bottom: "8%", left: "8%",   transform: "" },
    { top: "28%",   left: "0%",   transform: "translateY(-50%)" },
  ];

  return (
    <div className="hero-visual">
      {/* Rings */}
      <svg viewBox="0 0 460 460" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <radialGradient id="ring-glow2">
            <stop offset="0%" stopColor="#003A7A" stopOpacity="0.18"/>
            <stop offset="70%" stopColor="#003A7A" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <circle cx="230" cy="230" r="220" fill="url(#ring-glow2)"/>
        <circle cx="230" cy="230" r="200" fill="none" stroke="#c3c6d1" strokeWidth="1" strokeDasharray="2 4"/>
        <circle cx="230" cy="230" r="152" fill="none" stroke="#c3c6d1" strokeWidth="1"/>
      </svg>

      {/* Car nodes */}
      {modelos.map((m, i) => {
        const isActive = active === i;
        const pos = positions[i];
        return (
          <div
            key={m.label}
            style={{
              position: "absolute",
              ...pos,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 6,
              transition: "all .55s cubic-bezier(.4,0,.2,1)",
              transform: `${pos.transform || ""} scale(${isActive ? 1.1 : 0.88})`,
              opacity: isActive ? 1 : 0.55,
              zIndex: isActive ? 2 : 1,
            }}
          >
            {/* Photo circle */}
            <div style={{
              width: isActive ? 110 : 88,
              height: isActive ? 110 : 88,
              borderRadius: "50%",
              overflow: "hidden",
              border: isActive ? "3px solid #003A7A" : "2px solid #c3c6d1",
              boxShadow: isActive ? "0 16px 40px -10px rgba(0,58,122,0.45)" : "0 2px 6px rgba(0,30,80,0.08)",
              background: "#f2f4f6",
              transition: "all .55s cubic-bezier(.4,0,.2,1)",
              flexShrink: 0,
            }}>
              <img
                src={m.foto}
                alt={m.label}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
            </div>
            {/* Label */}
            <div style={{ textAlign: "center", maxWidth: 110 }}>
              <div style={{
                fontFamily: "'Barlow Condensed', sans-serif",
                fontSize: 14,
                fontWeight: 800,
                color: isActive ? "#003A7A" : "#43474f",
                letterSpacing: "0.02em",
                textTransform: "uppercase",
                transition: "color .3s",
              }}>{m.label}</div>
              <div style={{ fontSize: 11, color: "#43474f", marginTop: 1, fontWeight: 500 }}>{m.sub}</div>
            </div>
          </div>
        );
      })}


    </div>
  );
};

Object.assign(window, { HeroVisual });