// Hero visual — 3 personas with rotating active highlight
const HeroVisual = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % 3), 3000);
    return () => clearInterval(id);
  }, []);

  const personas = [
    { key: "tea", label: "Famílias TEA", sub: "Autismo" },
    { key: "pcd", label: "Pessoas com deficiência", sub: "Física · Visual · Auditiva · Mental" },
    { key: "taxi", label: "Taxistas", sub: "Motoristas profissionais" },
  ];

  return (
    <div className="hero-visual">
      {/* Background ring */}
      <svg viewBox="0 0 460 460" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <linearGradient id="ring-grad" x1="0" x2="1" y1="0" y2="1">
            <stop offset="0%" stopColor="#001e40" stopOpacity="0.08"/>
            <stop offset="100%" stopColor="#F37021" stopOpacity="0.08"/>
          </linearGradient>
          <radialGradient id="ring-glow">
            <stop offset="0%" stopColor="#F37021" stopOpacity="0.18"/>
            <stop offset="70%" stopColor="#F37021" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <circle cx="230" cy="230" r="220" fill="url(#ring-glow)"/>
        <circle cx="230" cy="230" r="190" fill="none" stroke="#c3c6d1" strokeWidth="1" strokeDasharray="2 4"/>
        <circle cx="230" cy="230" r="150" fill="none" stroke="#c3c6d1" strokeWidth="1"/>
      </svg>

      {/* Three person icons positioned around a triangle */}
      {personas.map((p, i) => {
        const isActive = active === i;
        // positions: top, bottom-left, bottom-right
        const positions = [
          { top: "6%", left: "50%", transform: "translateX(-50%)" },
          { bottom: "8%", left: "8%" },
          { bottom: "8%", right: "8%" },
        ];
        return (
          <div
            key={p.key}
            className="hero-person"
            style={{
              position: "absolute",
              ...positions[i],
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 8,
              transform: `${positions[i].transform || ""} scale(${isActive ? 1.08 : 0.92})`,
              opacity: isActive ? 1 : 0.55,
            }}
          >
            <div style={{
              width: 110,
              height: 110,
              borderRadius: "50%",
              background: isActive ? "#F37021" : "#fff",
              color: isActive ? "#fff" : "#001e40",
              border: isActive ? "3px solid #F37021" : "2px solid #c3c6d1",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              boxShadow: isActive ? "0 16px 40px -10px rgba(243,112,33,0.45)" : "0 2px 6px rgba(0,30,64,0.08)",
              transition: "all .5s cubic-bezier(.4,0,.2,1)",
            }}>
              <PersonaGlyph kind={p.key} size={56}/>
            </div>
            <div style={{ textAlign: "center", maxWidth: 140 }}>
              <div style={{
                fontSize: 13,
                fontWeight: 800,
                color: isActive ? "#F37021" : "#43474f",
                letterSpacing: "-0.01em",
                transition: "color .3s",
              }}>{p.label}</div>
              <div style={{ fontSize: 11, color: "#43474f", marginTop: 2, fontWeight: 500 }}>{p.sub}</div>
            </div>
          </div>
        );
      })}

      {/* Center label */}
      <div style={{
        position: "absolute",
        top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        background: "#001e40",
        color: "#fff",
        padding: "14px 22px",
        borderRadius: 12,
        textAlign: "center",
        boxShadow: "0 12px 28px -8px rgba(0,30,64,0.4)",
      }}>
        <div style={{ fontSize: 11, letterSpacing: "0.14em", opacity: 0.7, fontWeight: 700 }}>ISENÇÃO</div>
        <div style={{ fontSize: 22, fontWeight: 900, letterSpacing: "-0.02em" }}>IPI · ICMS · IPVA</div>
      </div>
    </div>
  );
};

const PersonaGlyph = ({ kind, size = 48 }) => {
  const s = size;
  if (kind === "tea") {
    return (
      <svg width={s} height={s} viewBox="0 0 48 48" fill="none">
        <path d="M24 40 C14 34 6 28 6 18 C6 12 10 8 16 8 C19.5 8 22 10 24 13 C26 10 28.5 8 32 8 C38 8 42 12 42 18 C42 28 34 34 24 40Z"
              fill="currentColor" opacity="0.95"/>
        <circle cx="17" cy="18" r="2" fill="#fff" opacity="0.5"/>
        <circle cx="24" cy="16" r="2" fill="#fff" opacity="0.5"/>
        <circle cx="31" cy="18" r="2" fill="#fff" opacity="0.5"/>
      </svg>
    );
  }
  if (kind === "pcd") {
    return (
      <svg width={s} height={s} viewBox="0 0 48 48" fill="none">
        <circle cx="22" cy="9" r="3.4" fill="currentColor"/>
        <path d="M15 16 L24 19 L24 26 M28 17 L22 19" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" fill="none"/>
        <path d="M20 26 L16 38 M24 26 L26 31 L34 33" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" fill="none"/>
        <circle cx="24" cy="32" r="10" fill="none" stroke="currentColor" strokeWidth="2.2" strokeDasharray="3 3"/>
      </svg>
    );
  }
  return (
    <svg width={s} height={s} viewBox="0 0 48 48" fill="none">
      <path d="M8 30 V22 L12 12 H36 L40 22 V30" stroke="currentColor" strokeWidth="2.6" strokeLinejoin="round" fill="none"/>
      <rect x="6" y="30" width="36" height="6" rx="1.5" fill="currentColor"/>
      <circle cx="15" cy="36" r="3" fill="#fff" stroke="currentColor" strokeWidth="2.4"/>
      <circle cx="33" cy="36" r="3" fill="#fff" stroke="currentColor" strokeWidth="2.4"/>
      <rect x="19" y="14" width="10" height="5" rx="1" fill="#fff" stroke="currentColor" strokeWidth="1.6"/>
    </svg>
  );
};

Object.assign(window, { HeroVisual, PersonaGlyph });