function OrganizationSection() {
  return (
    <section id="organizacao" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Organização</div>
          <h2>Mais organização. Menos erro. Mais clareza.</h2>
          <p>
            Com dados importados e registros do dia a dia no mesmo lugar, fica mais fácil
            conferir o mês e confiar no que você está vendo.
          </p>
        </div>

        <div className="org-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 16,
        }}>
          <OrgCard
            icon="AlertTriangle"
            accent="var(--orange)"
            title="Alerta de duplicidade"
            text="O Econome avisa quando um lançamento parece repetido, ajudando você a evitar registros em dobro."
          >
            <DuplicateAlertMock />
          </OrgCard>

          <OrgCard
            icon="Card"
            accent="var(--purple)"
            title="Formas de pagamento personalizadas"
            text="Cadastre cartões de crédito, débito, Pix, dinheiro e outras fontes para saber de onde cada gasto saiu."
          >
            <PaymentMethodsMock />
          </OrgCard>

          <OrgCard
            icon="Tag"
            accent="var(--green-deep)"
            title="Categorias do seu jeito"
            text="Além das categorias padrão, crie categorias próprias para adaptar o controle à sua realidade."
          >
            <CategoryMock />
          </OrgCard>

          <OrgCard
            icon="Shield"
            accent="var(--purple-deep)"
            title="Histórico mais confiável"
            text="Com registros organizados e dados importados, fica mais fácil revisar o mês com segurança."
          >
            <ReliableHistoryMock />
          </OrgCard>
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .org-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function OrgCard({ icon, accent, title, text, children }) {
  const I = Icon[icon];
  return (
    <div className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: 'var(--bg-soft)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 16,
        }}>
          <I size={18} color={accent} />
        </div>
        <h3 style={{ fontSize: 19, marginBottom: 8 }}>{title}</h3>
        <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.55 }}>{text}</p>
      </div>
      {children}
    </div>
  );
}

function DuplicateAlertMock() {
  return (
    <div style={{
      background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 12 }}>
        <div style={{
          width: 30, height: 30, borderRadius: '50%', flexShrink: 0,
          background: 'var(--orange-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon.AlertTriangle size={15} color="var(--orange)" />
        </div>
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink)' }}>Lançamento parecido</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', lineHeight: 1.4 }}>
            Você já tem um registro com este valor nesta data. Quer adicionar mesmo assim?
          </div>
        </div>
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: 'var(--bg-elevated)', border: '1px solid var(--line)', borderRadius: 10,
        padding: '8px 12px', marginBottom: 10,
      }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>ifood</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>22 jun · Alimentação</div>
        </div>
        <div className="mono" style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink)' }}>R$ 43,16</div>
      </div>
      <div style={{ display: 'flex', gap: 6 }}>
        <div style={{ flex: 1, background: 'var(--green)', color: 'white', borderRadius: 8, padding: '7px 0', textAlign: 'center', fontSize: 11.5, fontWeight: 700 }}>
          Adicionar mesmo assim
        </div>
        <div style={{ flex: 1, background: 'var(--bg-soft)', color: 'var(--ink-3)', borderRadius: 8, padding: '7px 0', textAlign: 'center', fontSize: 11.5, fontWeight: 600 }}>
          Cancelar
        </div>
      </div>
    </div>
  );
}

function PaymentMethodsMock() {
  const rows = [
    { label: 'Pix Nubank', dot: 'var(--purple)' },
    { label: 'Débito Mercado Pago', dot: '#3B82F6' },
    { label: 'Crédito Nubank', dot: 'var(--purple)' },
  ];
  return (
    <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 10 }}>
        {rows.map(r => (
          <div key={r.label} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            background: 'var(--bg-elevated)', border: '1px solid var(--line-soft)',
            borderRadius: 9, padding: '8px 10px',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: r.dot, flexShrink: 0 }} />
            <Icon.Card size={13} color="var(--ink-3)" />
            <span style={{ fontSize: 12.5, color: 'var(--ink-2)', fontWeight: 500 }}>{r.label}</span>
          </div>
        ))}
      </div>
      <div style={{
        border: '1.5px dashed var(--line)', borderRadius: 9, padding: '8px 0',
        textAlign: 'center', fontSize: 12, fontWeight: 600, color: 'var(--purple)',
      }}>
        + Adicionar forma de pagamento
      </div>
    </div>
  );
}

function CategoryMock() {
  return (
    <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 14 }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        background: 'var(--bg-elevated)', border: '1px solid var(--line-soft)',
        borderRadius: 9, padding: '9px 12px', marginBottom: 8,
      }}>
        <span style={{
          width: 26, height: 26, borderRadius: 8, background: 'var(--purple-tint)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Icon.Heart size={13} color="var(--purple)" />
        </span>
        <span style={{ fontSize: 12.5, color: 'var(--ink-2)', fontWeight: 500 }}>Pet</span>
      </div>
      <div style={{
        border: '1.5px dashed var(--line)', borderRadius: 9, padding: '8px 0',
        textAlign: 'center', fontSize: 12, fontWeight: 600, color: 'var(--purple)', marginBottom: 10,
      }}>
        + Adicionar categoria
      </div>
      <p style={{ fontSize: 10.5, color: 'var(--ink-4)', lineHeight: 1.4 }}>
        Categorias pessoais ficam disponíveis para gastos do mês, recorrentes e parcelados.
      </p>
    </div>
  );
}

function ReliableHistoryMock() {
  const items = ['Sem duplicar lançamentos', 'Sem buracos no mês', 'Dados importados e manuais juntos'];
  return (
    <div style={{ background: 'var(--bg)', border: '1px solid var(--line)', borderRadius: 14, padding: 16 }}>
      <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(it => (
          <li key={it} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--ink-2)' }}>
            <span style={{
              width: 20, height: 20, borderRadius: '50%', flexShrink: 0,
              background: 'var(--green-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon.Check size={11} color="var(--green-deep)" />
            </span>
            {it}
          </li>
        ))}
      </ul>
    </div>
  );
}

window.OrganizationSection = OrganizationSection;