function Coverage() {
  const D = (window.SITE && window.SITE.coverage) || {};
  const settings = (window.SITE && window.SITE.settings) || {};
  const REGIONS = D.regions || [];
  const STATES_WITHOUT = D.statesWithout || [];
  const KPIS = D.kpis || [];

  const totalClients = REGIONS.reduce((s, r) => s + (r.states || []).reduce((s2, st) => s2 + (st.clients || 0), 0), 0) || 1;
  const maxClients   = Math.max(1, ...REGIONS.flatMap(r => (r.states || []).map(s => s.clients || 0)));

  // Tamanho de bloco por UF: proporcional a sqrt(clients)/sqrt(max) → 32..88
  const blockSize = (n) => {
    const min = 32, max = 88;
    const k = Math.sqrt(n) / Math.sqrt(maxClients);
    return Math.round(min + (max - min) * k);
  };

  return (
    <section id="atuacao" style={{ background: 'var(--surface)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{D.eyebrow}</span>
          <h2>{D.title} <span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span></h2>
          <p style={{ fontSize: 17, maxWidth: 640 }}>{D.subtitle}</p>
        </div>

        {/* KPI strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${Math.max(1, KPIS.length)}, 1fr)`, gap: 0,
          background: 'var(--bg)', border: '1px solid var(--line)',
          borderRadius: 'var(--radius-lg)', overflow: 'hidden',
          marginBottom: 28,
        }} className="coverage-kpis">
          {KPIS.map((k, i) => (
            <div key={i} style={{
              padding: '20px 22px',
              borderRight: i < KPIS.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 32, lineHeight: 1, fontWeight: 600, color: 'var(--ink)' }}>{k.v}</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginTop: 8 }}>{k.l}</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--muted)', marginTop: 4, letterSpacing: '.06em', textTransform: 'uppercase' }}>{k.sub}</div>
            </div>
          ))}
        </div>

        {/* Visualização principal */}
        <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: '28px 28px 24px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--muted)' }}>
              {D.legendTitle || 'Distribuição por região · tamanho do bloco proporcional ao volume de clientes'}
            </span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--muted)' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: 'var(--primary)', borderRadius: 2 }}></span>sede
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: 'color-mix(in oklab, var(--primary) 32%, var(--bg))', border: '1px solid var(--primary)', borderRadius: 2 }}></span>com clientes
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 10, height: 10, background: 'var(--surface)', border: '1px dashed var(--ink-2)', borderRadius: 2 }}></span>cobertura remota
              </span>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            {REGIONS.map((region) => {
              const regionTotal = (region.states || []).reduce((s, st) => s + (st.clients || 0), 0);
              const regionPct   = ((regionTotal / totalClients) * 100).toFixed(1);
              return (
                <div key={region.code} style={{
                  display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24,
                  alignItems: 'flex-start', paddingBottom: 22, borderBottom: '1px dashed var(--line)',
                }} className="coverage-region-row">
                  <div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--primary-700)', fontWeight: 600 }}>{region.code}</div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, marginTop: 2, lineHeight: 1.1 }}>{region.name}</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)', marginTop: 6, letterSpacing: '.04em' }}>
                      {regionTotal.toLocaleString('pt-BR')} clientes · {regionPct}%
                    </div>
                    <div style={{ marginTop: 8, height: 4, background: 'var(--surface)', borderRadius: 2, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${regionPct}%`, background: 'var(--primary)', borderRadius: 2 }}></div>
                    </div>
                  </div>

                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'flex-end', paddingTop: 12, paddingRight: 12 }}>
                    {(region.states || []).map((st) => {
                      const size = blockSize(st.clients || 1);
                      const isHQ = st.hq;
                      return (
                        <div key={st.uf} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                          <div style={{
                            width: size, height: size,
                            background: isHQ ? 'var(--primary)' : 'color-mix(in oklab, var(--primary) 32%, var(--bg))',
                            border: `1px solid ${isHQ ? 'var(--primary-700)' : 'var(--primary)'}`,
                            borderRadius: 8,
                            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                            fontFamily: 'var(--mono)',
                            color: isHQ ? 'var(--primary-ink)' : 'var(--primary-900)',
                            fontWeight: 700, position: 'relative',
                            transition: 'transform .18s ease', cursor: 'default',
                          }}
                          onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
                          onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
                            <div style={{ fontSize: Math.max(13, size * 0.22), letterSpacing: '.04em' }}>{st.uf}</div>
                            <div style={{ fontSize: Math.max(9, size * 0.13), opacity: 0.85, marginTop: 2 }}>
                              {st.clients}{(st.clients || 0) < 100 ? '+' : ''}
                            </div>
                            {isHQ && (
                              <div style={{
                                position: 'absolute', top: -10, right: -12,
                                background: 'var(--accent)', color: 'var(--ink)',
                                fontSize: 9, padding: '3px 7px', borderRadius: 10,
                                fontWeight: 700, letterSpacing: '.04em',
                                fontFamily: 'var(--mono)', border: '1px solid var(--ink)',
                                pointerEvents: 'none', whiteSpace: 'nowrap', zIndex: 2,
                              }}>SEDE</div>
                            )}
                          </div>
                          <div style={{ fontSize: 10.5, color: 'var(--ink-2)', textAlign: 'center', maxWidth: size + 20 }}>{st.label}</div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>

          {STATES_WITHOUT.length > 0 && (
            <div style={{ marginTop: 8, paddingTop: 18, display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, alignItems: 'flex-start' }} className="coverage-region-row">
              <div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--muted)', fontWeight: 600 }}>{D.remoteLabel || 'Cobertura remota'}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500, marginTop: 2, lineHeight: 1.2, color: 'var(--ink-2)' }}>{D.remoteSub || 'Atendemos também'}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--muted)', marginTop: 6, letterSpacing: '.04em' }}>
                  {STATES_WITHOUT.length} UFs · sob demanda
                </div>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center', paddingTop: 4 }}>
                {STATES_WITHOUT.map((uf) => (
                  <span key={uf} style={{
                    fontFamily: 'var(--mono)', fontSize: 11, padding: '6px 10px',
                    background: 'var(--surface)', border: '1px dashed var(--ink-2)',
                    borderRadius: 6, color: 'var(--ink-2)', letterSpacing: '.04em', fontWeight: 600,
                  }}>{uf}</span>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Closing band */}
        {(D.ctaTitle || D.ctaText) && (
          <div style={{
            marginTop: 24, padding: '20px 24px',
            background: 'var(--primary-50)',
            border: '1px solid color-mix(in oklab, var(--primary) 20%, var(--bg))',
            borderRadius: 'var(--radius-lg)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 20, flexWrap: 'wrap',
          }} className="coverage-cta">
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 20, color: 'var(--primary-900)', fontWeight: 600 }}>{D.ctaTitle}</div>
              <div style={{ fontSize: 14, color: 'var(--primary-900)', marginTop: 4, opacity: 0.85 }}>{D.ctaText}</div>
            </div>
            <a href="#contato" className="btn btn-primary" style={{ flexShrink: 0 }}>
              {D.ctaLabel || 'Falar com a SOSSEG'}
            </a>
          </div>
        )}
      </div>

      <style>{`
        @media (max-width: 900px) {
          .coverage-kpis { grid-template-columns: repeat(2, 1fr) !important; }
          .coverage-kpis > div { border-right: none !important; border-bottom: 1px solid var(--line); }
          .coverage-kpis > div:nth-child(odd) { border-right: 1px solid var(--line) !important; }
          .coverage-region-row { grid-template-columns: 1fr !important; gap: 12px !important; }
        }
      `}</style>
    </section>
  );
}

window.Coverage = Coverage;
