function FeaturesSection() {
  const features = [
    {
      title: 'Mês atual',
      icon: 'Home',
      tag: 'Tela principal',
      text: 'Registre gastos e recebimentos do dia a dia com o widget "Gastei / Recebi". Simples, rápido e feito para usar no momento da compra.',
      visual: 'widget',
      span: 2,
    },
    {
      title: 'Faturas',
      icon: 'Card',
      tag: 'Cartões',
      text: 'Cadastre seus cartões de crédito, identifique cada um e importe faturas em PDF para carregar gastos com mais facilidade.',
      visual: 'cards',
    },
    {
      title: 'Análises',
      icon: 'Chart',
      tag: 'Insights',
      text: 'Visualize gráficos, cruzamentos e indicadores importantes para entender melhor sua relação com o dinheiro.',
      visual: 'chart',
    },
    {
      title: 'Histórico',
      icon: 'History',
      tag: 'Linha do tempo',
      text: 'Consulte meses e anos anteriores para enxergar evolução, padrões de consumo e mudanças no seu comportamento.',
      visual: 'history',
    },
    {
      title: 'Planos e investimentos',
      icon: 'Target',
      tag: 'Em breve',
      text: 'Em desenvolvimento: uma área para acompanhar poupanças, reservas e investimentos de forma simples.',
      visual: 'soon',
      soon: true,
    },
  ];

  return (
    <section id="recursos" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Recursos</div>
          <h2>Tudo que você precisa para acompanhar sua vida financeira com clareza.</h2>
        </div>

        <div className="features-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
        }}>
          {features.map((f, i) => {
            const I = Icon[f.icon];
            const span = f.span || 1;
            return (
              <div key={f.title} className="card feature-card" style={{
                gridColumn: `span ${span}`,
                padding: 28,
                display: 'flex',
                flexDirection: 'column',
                gap: 20,
                minHeight: 320,
                position: 'relative',
                overflow: 'hidden',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: 'var(--purple-tint)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <I size={18} color="var(--purple)" />
                  </div>
                  <span className="mono" style={{
                    fontSize: 11,
                    padding: '4px 10px',
                    borderRadius: 999,
                    background: f.soon ? 'var(--orange-soft)' : 'var(--bg-soft)',
                    color: f.soon ? 'var(--orange)' : 'var(--ink-3)',
                    fontWeight: 600,
                    textTransform: 'uppercase',
                    letterSpacing: '0.04em',
                  }}>{f.tag}</span>
                </div>

                <div>
                  <h3 style={{ fontSize: 22, marginBottom: 8 }}>{f.title}</h3>
                  <p style={{ color: 'var(--ink-3)', fontSize: 14.5, lineHeight: 1.55 }}>{f.text}</p>
                </div>

                <div style={{ flex: 1, marginTop: 'auto' }}>
                  <FeatureVisual kind={f.visual} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .features-grid { grid-template-columns: 1fr 1fr !important; }
          .features-grid > .feature-card { grid-column: span 1 !important; }
        }
        @media (max-width: 600px) {
          .features-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FeatureVisual({ kind }) {
  if (kind === 'widget') {
    return (
      <div style={{
        background: 'var(--purple)',
        borderRadius: 14,
        padding: 14,
        display: 'flex',
        gap: 12,
        alignItems: 'center',
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', background: 'rgba(0,0,0,0.18)', borderRadius: 999, padding: 3, marginBottom: 8 }}>
            <div style={{ flex: 1, padding: '6px', borderRadius: 999, background: 'rgba(255,255,255,0.2)', fontSize: 12, fontWeight: 600, color: 'white', textAlign: 'center' }}>Gastei</div>
            <div style={{ flex: 1, padding: '6px', fontSize: 12, color: 'rgba(255,255,255,0.7)', textAlign: 'center' }}>Recebi</div>
          </div>
          <div style={{ background: 'white', borderRadius: 8, padding: '8px 10px', marginBottom: 6, fontSize: 12, color: 'var(--ink)' }} className="mono">R$ 47,80</div>
          <div style={{ background: 'white', borderRadius: 8, padding: '8px 10px', fontSize: 12, color: 'var(--ink-2)', display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon.Cart size={13} color="var(--purple)" /> Supermercado
          </div>
        </div>
        <div style={{
          background: '#50D080', borderRadius: 12, padding: 14, color: 'white', fontWeight: 600, fontSize: 13,
          display: 'flex', alignItems: 'center', gap: 6, alignSelf: 'stretch', justifyContent: 'center',
          minWidth: 100,
        }}>
          <Icon.Plus size={14} color="white" /> Registrar
        </div>
      </div>
    );
  }
  if (kind === 'cards') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { l: 'Mercado Pago', v: 'R$ 2.347,12', c: 'var(--purple)' },
          { l: 'Nubank', v: 'R$ 1.082,40', c: '#1A1614' },
        ].map(c => (
          <div key={c.l} style={{
            background: c.c, color: 'white', borderRadius: 10, padding: '12px 14px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon.Card size={16} color="white" />
              <span style={{ fontSize: 13, fontWeight: 500 }}>{c.l}</span>
            </div>
            <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{c.v}</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'chart') {
    return (
      <div style={{
        background: 'var(--bg)', borderRadius: 12, padding: 14, height: '100%',
        border: '1px solid var(--line)',
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 60, marginBottom: 8 }}>
          {[30, 55, 38, 70, 45, 80, 62].map((h, i) => (
            <div key={i} style={{ flex: 1, height: `${h}%`, background: i === 5 ? 'var(--purple)' : 'var(--purple-soft)', borderRadius: 3 }} />
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-4)' }} className="mono">
          <span>SEG</span><span>QUI</span><span>DOM</span>
        </div>
      </div>
    );
  }
  if (kind === 'history') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[
          { m: 'Mar 26', v: 'R$ 9.214' },
          { m: 'Fev 26', v: 'R$ 8.730' },
          { m: 'Jan 26', v: 'R$ 11.402' },
        ].map(m => (
          <div key={m.m} style={{
            background: 'var(--bg)', borderRadius: 8, padding: '10px 12px',
            display: 'flex', justifyContent: 'space-between', fontSize: 12,
            border: '1px solid var(--line)',
          }}>
            <span style={{ color: 'var(--ink-3)' }}>{m.m}</span>
            <span className="mono" style={{ color: 'var(--ink)', fontWeight: 600 }}>{m.v}</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'soon') {
    return (
      <div style={{
        background: 'var(--bg)',
        border: '1px dashed var(--line)',
        borderRadius: 12,
        padding: 20,
        textAlign: 'center',
        color: 'var(--ink-4)',
        fontSize: 13,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      }}>
        <Icon.Sparkle size={24} color="var(--orange)" />
        <span className="mono" style={{ fontSize: 11, letterSpacing: '0.04em' }}>EM DESENVOLVIMENTO</span>
      </div>
    );
  }
  return null;
}

window.FeaturesSection = FeaturesSection;