function FamilyControlSection() {
  const cards = [
    {
      icon: 'Bolt',
      title: 'Todo mundo registra',
      text: 'Cada membro lança seus gastos e receitas no próprio celular. As informações aparecem em tempo real para o grupo inteiro.',
    },
    {
      icon: 'Eye',
      title: 'Todos acompanham',
      text: 'O painel mostra o resumo consolidado do grupo — quanto entraram, quanto saiu e o saldo conjunto do período.',
    },
    {
      icon: 'User',
      title: 'Você mantém a gestão',
      text: 'O titular do grupo controla quem entra, quem sai e pode remover membros a qualquer momento. Você sempre tem a palavra final.',
    },
  ];

  return (
    <section id="controle-compartilhado" style={{ background: 'var(--bg)', padding: '96px 0' }}>
      <div className="container">

        <div className="section-header" style={{ maxWidth: 680, margin: '0 auto 56px', textAlign: 'center' }}>
          <div className="eyebrow"><span className="dot" />Grupo familiar</div>
          <h2 style={{ fontSize: 'clamp(30px, 5vw, 44px)', marginTop: 16, marginBottom: 16 }}>
            Finanças em família, sem confusão.
          </h2>
          <p style={{ fontSize: 18, color: 'var(--ink-3)', lineHeight: 1.6 }}>
            Convide até 3 pessoas para o seu grupo. Cada uma registra do próprio celular, e você vê tudo consolidado num só lugar.
          </p>
        </div>

        {/* 3 cards */}
        <div className="family-cards-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
          marginBottom: 48,
        }}>
          {cards.map((c) => {
            const I = Icon[c.icon];
            return (
              <div key={c.title} style={{
                background: 'var(--bg-elevated)',
                border: '1px solid var(--line)',
                borderRadius: 'var(--radius-xl)',
                padding: 28,
              }}>
                <div style={{
                  width: 40, height: 40,
                  borderRadius: 12,
                  background: 'var(--purple-tint)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 20,
                }}>
                  <I size={20} color="var(--purple)" />
                </div>
                <h3 style={{ fontSize: 18, fontWeight: 700, marginBottom: 10 }}>{c.title}</h3>
                <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.6 }}>{c.text}</p>
              </div>
            );
          })}
        </div>

        {/* Highlight block */}
        <div className="family-highlight" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 48,
          alignItems: 'center',
          background: 'var(--bg-elevated)',
          border: '1px solid var(--line)',
          borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(28px, 5vw, 52px)',
        }}>

          {/* Avatar visual */}
          <div>
            <div style={{ marginBottom: 24 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14 }}>
                Seu grupo
              </div>
              <FamilyAvatars />
            </div>

            <div style={{
              background: 'var(--bg-warm)',
              borderRadius: 'var(--radius-md)',
              padding: '16px 20px',
              border: '1px solid var(--line-soft)',
            }}>
              <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600, marginBottom: 12 }}>
                Resumo do grupo — maio
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                <FamilyStat label="Receitas" value="R$ 8.400" color="var(--green)" />
                <FamilyStat label="Despesas" value="R$ 5.620" color="var(--red)" />
                <FamilyStat label="Saldo" value="R$ 2.780" color="var(--ink)" />
              </div>
            </div>
          </div>

          {/* Text + checklist + CTA */}
          <div>
            <h3 style={{ fontSize: 'clamp(22px, 3vw, 30px)', fontWeight: 800, marginBottom: 16, lineHeight: 1.15 }}>
              Um grupo, uma visão. Sem planilha compartilhada.
            </h3>
            <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.7, marginBottom: 24 }}>
              Chega de pedir screenshot de extrato. Convide parceiro, filhos ou qualquer pessoa de confiança e mantenha as finanças do grupo organizadas em tempo real.
            </p>

            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
              {[
                'Convite por e-mail — sem burocracia',
                'Cada membro vê o painel consolidado',
                'Permissões controladas pelo titular',
                'Remove membros a qualquer momento',
              ].map((item) => (
                <li key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, color: 'var(--ink-2)' }}>
                  <span style={{
                    width: 20, height: 20, borderRadius: '50%',
                    background: 'var(--green-soft)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, marginTop: 1,
                  }}>
                    <Icon.Check size={12} color="var(--green-deep)" />
                  </span>
                  {item}
                </li>
              ))}
            </ul>

            <a href="https://app.econome.com.br/register" className="btn btn-purple" style={{ display: 'inline-flex' }}>
              Começar meu controle compartilhado
              <Icon.ArrowRight size={16} color="white" />
            </a>
            <p style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 10 }}>
              Gratuito para começar. Grupo familiar disponível em todos os planos.
            </p>
          </div>

        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .family-cards-grid { grid-template-columns: 1fr !important; }
          .family-highlight { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 560px) {
          .family-cards-grid { gap: 12px !important; }
        }
      `}</style>
    </section>
  );
}

function FamilyAvatars() {
  const members = [
    { label: 'Você', role: 'Admin', purple: true },
    { label: 'Ana', role: 'Membro', purple: false },
    { label: 'Carlos', role: 'Membro', purple: false },
    { label: '+ convidar', role: null, empty: true },
  ];

  return (
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      {members.map((m) => (
        <div key={m.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{
            width: 48, height: 48,
            borderRadius: '50%',
            background: m.empty ? 'transparent' : m.purple ? 'var(--purple)' : 'var(--bg-soft)',
            border: m.empty ? '2px dashed var(--line)' : m.purple ? '2px solid var(--purple)' : '2px solid var(--line)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {m.empty
              ? <Icon.Plus size={16} color="var(--ink-4)" />
              : <Icon.User size={20} color={m.purple ? 'white' : 'var(--ink-3)'} />
            }
          </div>
          <span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 500, textAlign: 'center' }}>{m.label}</span>
          {m.role && (
            <span style={{
              fontSize: 10, fontWeight: 600,
              color: m.purple ? 'var(--purple)' : 'var(--ink-4)',
              textTransform: 'uppercase', letterSpacing: '0.04em',
            }}>{m.role}</span>
          )}
        </div>
      ))}
    </div>
  );
}

function FamilyStat({ label, value, color }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: 'var(--ink-4)', marginBottom: 2 }}>{label}</div>
      <div className="mono" style={{ fontSize: 13, fontWeight: 700, color }}>{value}</div>
    </div>
  );
}

window.FamilyControlSection = FamilyControlSection;