// "Atuação" — Limine covers 5 northern states.

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

  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">
            Presença direta em <span className="italic-accent">5 estados do Norte.</span>
          </h2>
          <p className="section-lead">
            Atendemos hospitais, clínicas e profissionais de saúde com cobertura
            direta na região Norte — com sede em Manaus, conhecimento da
            logística amazônica e equipe técnica preparada para a região.
          </p>
        </div>

        <div className="section-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 60,
          alignItems: "center",
        }}>
          <div>
            <RegionList
              title="Norte"
              states={COVERED_STATES}
              active={active}
              setActive={setActive}
            />

            <div style={{
              marginTop: 40,
              padding: "22px 24px",
              background: "var(--c-blue-soft)",
              borderRadius: "var(--radius)",
              borderLeft: "3px solid var(--c-navy)",
            }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: "var(--c-navy)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>
                Sede operacional
              </div>
              <div style={{ fontSize: 15, color: "var(--c-ink-2)", lineHeight: 1.55 }}>
                Manaus/AM · Rua Rio Içá, 37 — Vieiralves
              </div>
            </div>
          </div>

          <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: "var(--c-surface)",
                padding: "12px 18px",
                borderRadius: 10,
                border: "1px solid var(--c-line)",
                boxShadow: "0 12px 30px -12px rgba(27,58,107,0.18)",
                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: 24, fontWeight: 400,
          fontFamily: "var(--font-serif)",
          color: "var(--c-navy)",
        }}>{title}</h3>
        <span style={{
          fontSize: 12, fontWeight: 600,
          color: "var(--c-blue)",
          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: "16px 10px",
                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-navy)" : "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 });