// pages/como-ajudar.jsx — Página "Como Ajudar"

function PixCard() {
  var [pixCopied, setPixCopied] = React.useState(false);
  var [bankCopied, setBankCopied] = React.useState(false);

  var PIX_KEY = '12.187.675/0001-70';
  var BANK_DATA = 'Razão Social: Casa Lar Luz do Caminho\nBanco: Caixa Econômica Federal (104)\nAgência: 1638\nConta Corrente: 577548986-8\nChave PIX (CNPJ): 12.187.675/0001-70';

  function copy(text, setter) {
    navigator.clipboard.writeText(text).then(function() {
      setter(true);
      setTimeout(function() { setter(false); }, 2200);
    });
  }

  return (
    <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 22 }}>
      {/* PIX card */}
      <div style={{
        background: 'var(--ink)', color: 'var(--paper)',
        borderRadius: 16, padding: '32px 32px 28px',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', top: -20, right: -20, opacity: 0.32 }}>
          <DecSunburst size={180} origin="tr" />
        </div>
        <div style={{ position: 'relative' }}>
          <Badge tone="sol">PIX</Badge>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.14em',
            textTransform: 'uppercase', opacity: 0.65, marginTop: 22 }}>Chave · CNPJ</div>
          <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 42,
            lineHeight: 1, marginTop: 8, letterSpacing: '-0.015em' }}>
            12.187.675<span style={{ opacity: 0.45 }}>/</span>0001-70
          </div>
          <div style={{ marginTop: 28, paddingTop: 22,
            borderTop: '1px solid color-mix(in oklab, var(--paper) 18%, transparent)',
            display: 'flex', flexDirection: 'column', gap: 8 }}>
            <Row label="Razão social"    value="Casa Lar Luz do Caminho" dark />
            <Row label="Banco"           value="Caixa Econômica Federal · 104" dark />
            <Row label="Agência"         value="1638" dark />
            <Row label="Conta corrente"  value="577548986-8" dark />
          </div>
          <div style={{ marginTop: 22, display: 'flex', gap: 8 }}>
            <button
              onClick={function() { copy(PIX_KEY, setPixCopied); }}
              style={{
                fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600,
                padding: '11px 18px', borderRadius: 999,
                background: pixCopied ? 'var(--folha)' : 'var(--sol)',
                color: 'var(--ink)', border: 'none', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                transition: 'background .2s',
              }}
            >
              {Icons.Pix}
              {pixCopied ? 'Copiado!' : 'Copiar chave PIX'}
            </button>
            <button
              onClick={function() { copy(BANK_DATA, setBankCopied); }}
              style={{
                fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 600,
                padding: '11px 18px', borderRadius: 999,
                background: 'transparent', border: '1.5px solid transparent',
                color: bankCopied ? 'var(--sol)' : 'var(--paper)', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                transition: 'color .2s',
              }}
            >
              {bankCopied ? 'Copiado!' : 'Copiar dados bancários'}
            </button>
          </div>
        </div>
      </div>

      {/* QR / instruction */}
      <div style={{ background: 'var(--paper-2)', border: '1px solid var(--line)',
        borderRadius: 16, padding: 28, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--ink-mute)' }}>QR Code · PIX</div>
        <div style={{
          flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center',
          background: 'var(--paper)', borderRadius: 12, padding: 20,
        }}>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" shapeRendering="crispEdges"
            role="img" aria-label="QR Code PIX para doação à Casa Lar Luz do Caminho"
            style={{ width: '100%', maxWidth: 200, height: 'auto', display: 'block' }}>
            <path fill="#ffffff" d="M0 0h49v49H0z"/>
            <path stroke="#241a12" d="M2 2.5h7m3 0h1m1 0h1m2 0h2m1 0h4m1 0h9m4 0h1m1 0h7M2 3.5h1m5 0h1m2 0h2m1 0h1m2 0h2m1 0h1m2 0h1m1 0h2m1 0h1m1 0h2m5 0h1m2 0h1m5 0h1M2 4.5h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h1m4 0h2m1 0h1m2 0h1m5 0h1m1 0h1m2 0h1m1 0h3m1 0h1M2 5.5h1m1 0h3m1 0h1m1 0h3m2 0h1m2 0h1m3 0h1m3 0h1m4 0h2m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1M2 6.5h1m1 0h3m1 0h1m1 0h1m2 0h4m3 0h7m2 0h2m2 0h2m1 0h3m1 0h1m1 0h3m1 0h1M2 7.5h1m5 0h1m1 0h1m2 0h3m3 0h1m2 0h1m3 0h1m2 0h1m2 0h4m4 0h1m5 0h1M2 8.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M10 9.5h1m5 0h2m4 0h1m3 0h1m2 0h1m1 0h1m1 0h1m1 0h1m2 0h1M2 10.5h1m1 0h5m2 0h1m7 0h1m2 0h9m2 0h2m1 0h1m3 0h5M5 11.5h3m5 0h5m2 0h2m3 0h3m2 0h2m3 0h4m2 0h4M2 12.5h2m2 0h1m1 0h1m1 0h1m1 0h3m1 0h1m1 0h1m1 0h2m1 0h2m1 0h1m2 0h1m4 0h1m3 0h1m5 0h1M2 13.5h2m5 0h2m1 0h1m3 0h1m1 0h1m1 0h1m2 0h1m1 0h2m2 0h3m2 0h2m1 0h1m1 0h2m1 0h1m1 0h1M2 14.5h1m1 0h1m1 0h4m1 0h1m2 0h2m2 0h1m1 0h2m1 0h2m1 0h1m2 0h1m2 0h4m2 0h3m1 0h2M3 15.5h1m1 0h1m4 0h1m3 0h1m1 0h2m2 0h1m3 0h1m3 0h1m1 0h1m1 0h1m1 0h1m2 0h8M2 16.5h1m2 0h1m2 0h3m2 0h4m1 0h1m2 0h1m1 0h3m1 0h1m2 0h1m5 0h1m1 0h1m1 0h1m4 0h1M4 17.5h3m3 0h4m1 0h3m2 0h1m1 0h1m1 0h1m7 0h4m1 0h4m2 0h1m1 0h1M2 18.5h1m2 0h2m1 0h1m2 0h2m1 0h2m1 0h1m1 0h1m1 0h3m2 0h1m3 0h2m2 0h2m1 0h2m3 0h1m1 0h2M3 19.5h2m9 0h3m2 0h2m1 0h3m1 0h4m2 0h3m3 0h7M2 20.5h1m1 0h1m3 0h1m1 0h1m2 0h4m1 0h2m4 0h4m2 0h3m1 0h4m1 0h1m1 0h1m1 0h2m1 0h1M2 21.5h1m3 0h1m5 0h1m4 0h1m3 0h1m1 0h1m2 0h4m3 0h2m3 0h1M2 22.5h2m2 0h7m4 0h1m1 0h2m1 0h5m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h5m1 0h1M5 23.5h2m3 0h2m2 0h5m1 0h1m1 0h1m3 0h10m1 0h2m3 0h1m1 0h1M5 24.5h2m1 0h1m1 0h3m4 0h2m1 0h3m1 0h1m1 0h1m5 0h2m1 0h2m1 0h1m1 0h1m1 0h2M2 25.5h5m3 0h1m1 0h1m1 0h1m3 0h3m1 0h1m3 0h1m1 0h1m1 0h4m1 0h1m2 0h1m3 0h1m1 0h2M5 26.5h6m9 0h9m3 0h3m2 0h6m2 0h1M2 27.5h1m7 0h1m2 0h1m2 0h2m1 0h2m1 0h1m1 0h5m2 0h1m5 0h4m3 0h1M2 28.5h1m1 0h2m2 0h1m1 0h1m1 0h1m5 0h1m2 0h4m4 0h1m1 0h4m1 0h1m1 0h1m2 0h2m3 0h1M2 29.5h3m4 0h1m1 0h1m2 0h1m1 0h1m2 0h2m1 0h2m4 0h1m8 0h1m1 0h4m1 0h3M3 30.5h2m3 0h1m1 0h3m1 0h2m2 0h4m2 0h1m1 0h1m2 0h1m2 0h1m1 0h2m2 0h2m4 0h1M3 31.5h2m2 0h1m2 0h1m1 0h1m2 0h1m1 0h2m1 0h1m1 0h7m3 0h1m1 0h2m1 0h1m1 0h4m1 0h1m1 0h1M2 32.5h1m1 0h1m3 0h3m1 0h1m4 0h2m1 0h2m1 0h1m2 0h1m2 0h1m2 0h1m1 0h1m2 0h2m3 0h1m3 0h1M2 33.5h2m1 0h2m3 0h2m2 0h2m1 0h3m1 0h3m1 0h1m1 0h2m3 0h4m2 0h1m1 0h1m2 0h1M4 34.5h1m1 0h1m1 0h1m2 0h2m1 0h1m1 0h1m1 0h1m2 0h2m5 0h1m1 0h2m1 0h1m1 0h7m1 0h2M7 35.5h1m1 0h2m1 0h2m6 0h1m1 0h2m1 0h1m1 0h4m1 0h3m3 0h2m1 0h1m1 0h2M6 36.5h1m1 0h2m2 0h1m1 0h1m1 0h1m2 0h3m1 0h1m1 0h3m1 0h1m1 0h2m1 0h4m1 0h1m2 0h2m1 0h1M3 37.5h4m2 0h1m1 0h1m2 0h2m1 0h3m2 0h1m2 0h1m3 0h3m3 0h1m1 0h1m3 0h1m1 0h2m1 0h1M2 38.5h1m2 0h2m1 0h2m3 0h1m2 0h5m1 0h6m2 0h1m3 0h1m3 0h6m1 0h2M10 39.5h1m2 0h1m3 0h6m3 0h1m2 0h3m2 0h2m2 0h1m3 0h4M2 40.5h7m3 0h1m1 0h1m1 0h7m1 0h1m1 0h2m1 0h1m2 0h1m2 0h1m2 0h1m1 0h1m1 0h4M2 41.5h1m5 0h1m1 0h1m1 0h3m1 0h1m1 0h1m2 0h2m3 0h1m5 0h1m2 0h1m2 0h1m3 0h1m1 0h2M2 42.5h1m1 0h3m1 0h1m1 0h1m4 0h2m2 0h1m1 0h6m2 0h1m4 0h1m1 0h1m1 0h5m1 0h1M2 43.5h1m1 0h3m1 0h1m1 0h1m2 0h4m1 0h2m2 0h2m2 0h1m1 0h1m1 0h2m2 0h2m1 0h2m5 0h1M2 44.5h1m1 0h3m1 0h1m1 0h5m1 0h1m2 0h2m1 0h1m6 0h2m1 0h2m2 0h2m4 0h1m1 0h1M2 45.5h1m5 0h1m2 0h1m2 0h6m1 0h1m1 0h2m4 0h1m2 0h3m4 0h4m1 0h2M2 46.5h7m1 0h3m2 0h4m1 0h2m1 0h1m1 0h1m2 0h2m5 0h1m1 0h3m1 0h2"/>
          </svg>
        </div>
        <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0 }}>
          Após a doação, envie o comprovante para receber recibo automático
          de doação. Disponível para dedução no Imposto de Renda.
        </p>
      </div>
    </div>
  );
}

function PageComoAjudar() {
  return (
    <PageShell>
      <SiteHeader active="como-ajudar" />

      {/* HERO */}
      <section style={{ padding: '56px 56px', background: 'var(--sol)',
        position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -30, right: -30, opacity: 0.45 }}>
          <DecSunburst size={320} origin="tr" />
        </div>
        <div style={{ position: 'absolute', bottom: 0, left: 0, opacity: 0.32 }}>
          <DecConstellation width={520} height={150} />
        </div>
        <div style={{ position: 'relative', maxWidth: 760 }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--ink)',
            display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <DecSectionMark size={14} /> Como ajudar
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 88,
            lineHeight: 0.95, fontWeight: 400, letterSpacing: '-0.025em',
            margin: '20px 0 24px', color: 'var(--ink)' }}>
            Cada gesto<br/>sustenta uma rotina.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink)',
            maxWidth: 580, margin: 0, opacity: 0.88 }}>
            Na Casa Lar Luz do Caminho, cada doação ajuda a manter o cuidado
            diário, a alimentação, o acolhimento e a proteção de crianças que
            precisam de um lar seguro <strong>neste momento da vida</strong>. Quando
            você contribui, não está apenas fazendo uma doação: está ajudando a
            transformar a rotina e o futuro de uma criança.
          </p>
        </div>
      </section>

      {/* PIX SECTION */}
      <section data-reveal="" style={{ padding: '56px 56px' }}>
        <SectionHead
          kicker="A forma mais rápida"
          title="Doe por PIX, agora."
          intro="O jeito mais direto de apoiar a casa. Use a chave abaixo ou os dados bancários."
          align="center"
        />
        <PixCard />
      </section>

      {/* OTHER WAYS */}
      <section data-reveal="" style={{ padding: '56px 56px', background: 'var(--paper-2)',
        borderTop: '1px solid var(--line)' }}>
        <SectionHead
          kicker="Outras formas de apoio"
          title="Há muitos jeitos de fazer parte."
          intro="Cada caminho tem sua medida — tempo, recurso, presença. Encontre o seu."
        />
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          {[
            {
              tag: 'Programa Associado', tone: 'rosa',
              icon: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M7 12.5 C2 9 1 6 1 4.2 C1 2.4 2.4 1 4.2 1 C5.5 1 6.5 1.8 7 2.7 C7.5 1.8 8.5 1 9.8 1 C11.6 1 13 2.4 13 4.2 C13 6 12 9 7 12.5 Z" /></svg>,
              title: 'Doação mensal recorrente',
              desc: 'Contribua mensalmente com a Casa Lar e ajude a manter, de forma contínua, o cuidado, a alimentação, a estrutura e o acolhimento das crianças. Ser associado é assumir um compromisso de amor com uma causa que acontece todos os dias.',
              cta: 'Quero ser associado',
            },
            {
              tag: 'Voluntariado', tone: 'ceu', icon: Icons.User,
              title: 'Doe seu tempo',
              desc: 'Apoie em campanhas, eventos, bazares e ações institucionais. Para atividades diretamente com as crianças, é necessário participar do curso Pikler oferecido pela instituição.',
              cta: 'Quero ser voluntário',
            },
            {
              tag: 'Alimentos', tone: 'sol',
              icon: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M7 5C7 5 9 3.5 11 5C12.5 6.5 12 10 10 11C9 11.5 8 11 7 11C6 11 5 11.5 4 11C2 10 1.5 6.5 3 5C5 3.5 7 5 7 5Z"/><path d="M7 5C7 3.5 8 2.5 8.5 2"/></svg>,
              title: 'Doação de alimentos',
              desc: 'Itens essenciais para a alimentação das crianças, especialmente carnes, frutas, verduras e outros alimentos que contribuam para uma rotina mais saudável e nutritiva.',
              cta: 'Combinar entrega',
            },
            {
              tag: 'Roupas', tone: 'folha', icon: Icons.Shirt,
              title: 'Doação de roupas',
              desc: 'Recebemos roupas em bom estado para as crianças, principalmente roupas de frio, que ajudam a garantir mais conforto, cuidado e proteção nos dias de baixa temperatura.',
              cta: 'Combinar entrega',
            },
          ].map((o, i) => (
            <div key={i} style={{
              background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14,
              padding: 28, display: 'flex', flexDirection: 'column', gap: 16,
              borderLeft: `4px solid var(--${o.tone})`,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Badge tone={o.tone} size="md">{o.tag}</Badge>
                <span style={{ color: `var(--${o.tone})`, display: 'inline-flex',
                  transform: 'scale(1.3)' }}>{o.icon}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400,
                fontSize: 32, lineHeight: 1.05, margin: 0, letterSpacing: '-0.018em' }}>
                {o.title}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0, flex: 1 }}>
                {o.desc}
              </p>
              <div>
                <a href="contato.html" style={{ textDecoration: 'none' }}>
                  <Button variant="secondary" iconRight={Icons.Arrow}>{o.cta}</Button>
                </a>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* WHAT IT FUNDS */}
      <section data-reveal="" style={{ padding: '56px 56px' }}>
        <SectionHead
          kicker="Para onde vai sua doação"
          title="A casa em rotina."
          intro="Cada contribuição se desdobra em alimentação, escola, saúde e a equipe que cuida da casa todos os dias."
          align="center"
        />
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {[
            { l: 'Alimentação',  d: 'Refeições diárias para cada criança da casa', c: 'var(--sol)' },
            { l: 'Educação',     d: 'Matrícula, transporte e material escolar', c: 'var(--ceu)' },
            { l: 'Saúde',        d: 'Consultas, plano dentário e cuidado psicológico', c: 'var(--folha)' },
            { l: 'Equipe',       d: 'Educadoras, psicologia, serviço social', c: 'var(--ceramica)' },
          ].map((b, i) => (
            <div key={i} style={{ padding: '28px 22px', background: 'var(--paper-2)',
              border: '1px solid var(--line)', borderRadius: 12,
              borderTop: `4px solid ${b.c}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: b.c, flexShrink: 0 }} />
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28,
                  lineHeight: 1, color: 'var(--ink)',
                  letterSpacing: '-0.018em' }}>{b.l}</div>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 8, lineHeight: 1.45 }}>{b.d}</div>
            </div>
          ))}
        </div>
      </section>

      <SiteFooter />
    </PageShell>
  );
}

function Row({ label, value, dark }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      fontFamily: 'var(--sans)', fontSize: 14, lineHeight: 1.4,
      color: dark ? 'var(--paper)' : 'var(--ink)' }}>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em',
        textTransform: 'uppercase', opacity: 0.7 }}>{label}</span>
      <span style={{ fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 500 }}>{value}</span>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<PageComoAjudar />);