/* === Problem Section — with imagery === */
const Problem = () => {
  const stats = [
    { num: 'R$ 3 Bi', label: 'Em prejuízos com golpes jurídicos nos últimos 3 anos no Brasil', source: 'FEBRABAN, 2024', c: 'oklch(0.72 0.16 32)' },
    { num: 'R$ 8.500', label: 'Prejuízo médio por vítima no setor jurídico', source: 'OAB Nacional', c: 'oklch(0.80 0.13 78)' },
    { num: '12 min', label: 'Tempo médio de uma abordagem fraudulenta convincente', source: 'CERT.br', c: 'var(--navy-800)' },
  ];

  return (
    <section className="section-pad" style={{ background: 'var(--paper)', position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'flex-start' }} className="problem-grid">
          <div style={{ position: 'sticky', top: 120 }}>
            <div className="eyebrow" style={{ color: 'var(--accent-coral)', marginBottom: 18 }}>O PROBLEMA</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 56px)', margin: 0, color: 'var(--navy-900)' }}>
              O golpe começa<br />
              <span style={{ fontStyle: 'italic', color: 'var(--accent-coral)' }}>antes</span> da primeira mensagem.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 460 }}>
              Golpistas clonam perfis no WhatsApp, copiam fotos da OAB e usam linguagem jurídica convincente. Quando o cliente percebe, o dinheiro já se foi.
            </p>

            <div style={{
              marginTop: 32,
              borderRadius: 14, overflow: 'hidden',
              border: '1px solid var(--line)',
              aspectRatio: '4 / 3',
              backgroundImage: 'url("https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=900&q=80")',
              backgroundSize: 'cover', backgroundPosition: 'center',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(to top, rgba(11,37,69,0.85), rgba(11,37,69,0.1))',
              }}></div>
              <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20, color: '#fff' }}>
                <div className="eyebrow" style={{ color: 'oklch(0.85 0.16 32)', marginBottom: 8 }}>RELATO REAL</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1.3, fontStyle: 'italic' }}>
                  "Recebi uma mensagem do meu 'advogado' pedindo R$ 4.200 para liberar o processo. Era falso."
                </div>
                <div style={{ fontSize: 12, color: 'var(--blue-200)', marginTop: 10 }}>
                  Carla M., 53 — Belo Horizonte/MG
                </div>
              </div>
            </div>
          </div>

          <div>
            <div style={{ display: 'grid', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 16, overflow: 'hidden' }}>
              {stats.map((s, i) => (
                <div key={i} style={{
                  background: 'var(--white)',
                  padding: '32px 36px',
                  display: 'grid',
                  gridTemplateColumns: '1fr 1.4fr',
                  gap: 32,
                  alignItems: 'center',
                }} className="stat-row">
                  <div className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', color: s.c, lineHeight: 1 }}>
                    {s.num}
                  </div>
                  <div>
                    <div style={{ fontSize: 16, color: 'var(--ink)', lineHeight: 1.5, fontWeight: 500 }}>{s.label}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-4)', marginTop: 8, letterSpacing: '0.05em' }}>
                      FONTE · {s.source}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{
              marginTop: 32, padding: 36,
              background: 'var(--navy-900)', color: '#fff',
              borderRadius: 16, position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -20, left: 24,
                fontFamily: 'var(--font-display)', fontSize: 200,
                color: 'var(--navy-700)', lineHeight: 1, fontStyle: 'italic',
                pointerEvents: 'none',
              }}>"</div>
              <div style={{ position: 'relative' }}>
                <div className="display" style={{ fontSize: 22, fontStyle: 'italic', lineHeight: 1.4, color: '#fff' }}>
                  Não é apenas sobre dinheiro. É sobre confiança, segurança e paz de mente.
                </div>
                <div style={{ marginTop: 20, fontSize: 13, color: 'var(--blue-300)', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 32, height: 1, background: 'var(--blue-300)' }}></div>
                  Manifesto JurisID
                </div>
              </div>
            </div>

            {/* Modus operandi grid */}
            <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }} className="modus-grid">
              {[
                { tag: 'CLONAGEM', body: 'Foto e bio copiadas de OAB pública', c: 'var(--accent-coral)' },
                { tag: 'URGÊNCIA', body: '"Pague em 2h ou perde o processo"', c: 'var(--accent-gold)' },
                { tag: 'CANAL FALSO', body: 'WhatsApp novo, e-mail parecido', c: 'var(--accent-violet)' },
              ].map((m, i) => (
                <div key={i} style={{
                  padding: 18, borderRadius: 12, background: 'var(--white)',
                  border: '1px solid var(--line)',
                }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', color: m.c, marginBottom: 10 }}>
                    {m.tag}
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>{m.body}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .problem-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .problem-grid > div:first-child { position: static !important; }
          .stat-row { grid-template-columns: 1fr !important; gap: 12px !important; }
          .modus-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

/* === How it works === */
const HowItWorks = () => {
  const steps = [
    {
      n: '01',
      title: 'Receba o contato',
      body: 'Um número diz que é seu advogado. Você não tem certeza. Antes de responder, abra o JurisID — web, app iOS ou Android.',
      tag: 'Em qualquer canal',
      icon: <Icon.phone s={20} />,
      color: 'var(--accent-coral)',
      bg: 'var(--accent-coral-bg)',
    },
    {
      n: '02',
      title: 'Consulte em segundos',
      body: 'Digite o telefone, e-mail, nome ou número da OAB. Sistema cruza dados com a OAB, ICP-Brasil e nossa base antifraude em tempo real.',
      tag: 'Sem cadastro',
      icon: <Icon.search s={20} />,
      color: 'var(--accent-sky)',
      bg: 'var(--accent-sky-bg)',
    },
    {
      n: '03',
      title: 'Resposta clara',
      body: 'Identidade verificada com selo verde, ou alerta de fraude com motivos detalhados. Você decide com segurança.',
      tag: '< 2 segundos',
      icon: <Icon.shield s={20} />,
      color: 'var(--safe-deep)',
      bg: 'var(--safe-bg)',
    },
  ];

  return (
    <section id="como-funciona" className="section-pad" style={{ background: 'var(--white)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 72 }}>
          <div className="eyebrow" style={{ color: 'var(--accent-sky)', marginBottom: 18 }}>COMO FUNCIONA</div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 56px)', margin: 0, color: 'var(--navy-900)' }}>
            Três passos para<br />
            segurança total.
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 560 }}>
            Sem cadastro. Sem instalação obrigatória. Sem custo para o cidadão.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, position: 'relative' }} className="steps-grid">
          <div style={{
            position: 'absolute', top: 36, left: '16%', right: '16%',
            height: 1, background: `repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px)`,
            zIndex: 0,
          }} className="steps-line"></div>

          {steps.map((s, i) => (
            <div key={i} style={{
              padding: '0 28px',
              position: 'relative', zIndex: 1,
              borderLeft: i > 0 ? '1px solid var(--line)' : 'none',
            }} className="step-cell">
              <div style={{
                width: 72, height: 72, borderRadius: 36,
                background: s.bg,
                border: `1px solid ${s.color}`,
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-display)', fontSize: 26,
                color: s.color, marginBottom: 28,
                fontVariationSettings: '"opsz" 144',
              }}>
                {s.n}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
                <span style={{ color: s.color }}>{s.icon}</span>
                <span className="eyebrow" style={{ color: 'var(--ink-3)' }}>{s.tag}</span>
              </div>
              <h3 className="display" style={{ fontSize: 28, margin: 0, color: 'var(--navy-900)', fontVariationSettings: '"opsz" 96' }}>
                {s.title}
              </h3>
              <p style={{ marginTop: 14, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6 }}>{s.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 64, padding: 28, background: 'var(--paper)', borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <div style={{ width: 44, height: 44, borderRadius: 22, background: 'var(--safe-bg)', display: 'grid', placeItems: 'center', color: 'var(--safe-deep)' }}>
              <Icon.bolt s={20} />
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--navy-900)' }}>Tempo médio de verificação</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)' }}>Apurado em 1.2M de consultas no último trimestre</div>
            </div>
          </div>
          <div className="display mono" style={{ fontSize: 36, color: 'var(--safe-deep)', fontFamily: 'var(--font-mono)', fontWeight: 500 }}>
            1.84s
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .steps-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .step-cell { border-left: none !important; padding: 0 !important; }
          .steps-line { display: none !important; }
        }
      `}</style>
    </section>
  );
};

window.Problem = Problem;
window.HowItWorks = HowItWorks;