// "Atuação" section — Brazil map + list of 10 covered states.

function Atuacao() {
  const [active, setActive] = React.useState(null);

  const norte = COVERED_STATES.filter(s => ["RR","AP","AM","PA","AC","RO"].includes(s.uf));
  const nordeste = COVERED_STATES.filter(s => ["PI","PE","AL","SE"].includes(s.uf));

  return (
    <section
      id="atuacao"
      data-screen-label="Atuação"
      style={{ background: "var(--c-paper)" }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 70 }}>
          <div className="eyebrow">Onde estamos</div>
          <h2 className="section-title">
            Estamos presentes em <span className="italic-accent">10 estados</span> do Norte e Nordeste do Brasil.
          </h2>
          <p className="section-lead">
            Atendemos hospitais, clínicas e profissionais de saúde com cobertura
            direta nessas regiões — com proximidade logística e equipe técnica
            preparada para cada caso.
          </p>
        </div>

        <div className="section-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 60,
          alignItems: "center",
        }}>
          {/* Left: state lists by region */}
          <div>
            <RegionList
              title="Norte"
              states={norte}
              active={active}
              setActive={setActive}
            />
            <RegionList
              title="Nordeste"
              states={nordeste}
              active={active}
              setActive={setActive}
              style={{ marginTop: 36 }}
            />
          </div>

          {/* Right: Brazil map */}
          <div className="map-wrap" style={{
            background: "var(--c-cream)",
            borderRadius: "var(--radius-lg)",
            padding: "32px 28px",
            position: "relative",
          }}>
            <BrazilMap activeUf={active} onHover={setActive}/>
            {active && (
              <div style={{
                position: "absolute", top: 24, right: 24,
                background: "#fff",
                padding: "12px 18px",
                borderRadius: 10,
                border: "1px solid var(--c-line)",
                boxShadow: "0 12px 30px -12px rgba(28,61,82,0.15)",
                pointerEvents: "none",
              }}>
                <div style={{ fontSize: 12, color: "var(--c-mute)", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                  {active}
                </div>
                <div style={{ fontSize: 17, fontFamily: "var(--font-serif)", color: "var(--c-navy)" }}>
                  {COVERED_STATES.find(s => s.uf === active)?.name}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function RegionList({ title, states, active, setActive, style }) {
  return (
    <div style={style}>
      <div style={{
        display: "flex", alignItems: "baseline", gap: 14,
        marginBottom: 18,
      }}>
        <h3 style={{
          fontSize: 22, fontWeight: 500,
          fontFamily: "var(--font-serif)",
          color: "var(--c-navy)",
        }}>{title}</h3>
        <span style={{
          fontSize: 12, fontWeight: 600,
          color: "var(--c-blue-deep)",
          letterSpacing: "0.08em",
          textTransform: "uppercase",
        }}>{states.length} estados</span>
      </div>
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, 1fr)",
        gap: 0,
        borderTop: "1px solid var(--c-line)",
      }}>
        {states.map(s => {
          const isActive = active === s.uf;
          return (
            <div key={s.uf}
              onMouseEnter={() => setActive(s.uf)}
              onMouseLeave={() => setActive(null)}
              style={{
                padding: "14px 8px",
                borderBottom: "1px solid var(--c-line)",
                display: "flex", alignItems: "center", gap: 14,
                background: isActive ? "var(--c-blue-soft)" : "transparent",
                transition: "background .12s",
                cursor: "default",
              }}>
              <span style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 700,
                fontSize: 13,
                color: isActive ? "var(--c-blue-deep)" : "var(--c-mute)",
                width: 28,
                letterSpacing: "0.05em",
              }}>{s.uf}</span>
              <span style={{
                fontSize: 15,
                color: isActive ? "var(--c-navy)" : "var(--c-ink)",
                fontWeight: isActive ? 500 : 400,
              }}>{s.name}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Atuacao });