/* === For Lawyers (with imagery) === */
const ForLawyers = () => {
  const benefits = [
    { icon: <Icon.shield s={18} />, title: 'Proteção da reputação', body: 'Reduza drasticamente o risco de uso indevido do seu nome e número de OAB.', c: 'var(--accent-sky)', bg: 'var(--accent-sky-bg)' },
    { icon: <Icon.badge s={18} />, title: 'Selo de verificação', body: 'Mostre nos contratos, e-mails e WhatsApp que você é um advogado JurisID verificado.', c: 'var(--safe-deep)', bg: 'var(--safe-bg)' },
    { icon: <Icon.alert s={18} />, title: 'Alertas em tempo real', body: 'Receba notificação imediata quando alguém tenta usar sua identidade em uma fraude.', c: 'var(--accent-coral)', bg: 'var(--accent-coral-bg)' },
    { icon: <Icon.scales s={18} />, title: 'Boletim em 1 clique', body: 'Gere laudo técnico para boletim de ocorrência com data, hora e prova digital.', c: 'var(--accent-violet)', bg: 'var(--accent-violet-bg)' },
  ];

  const plans = [
    {
      name: 'Profissional',
      price: '19,90',
      period: '/mês',
      desc: 'Para advogados autônomos',
      features: ['Perfil verificado vitalício', 'Selo digital JurisID', 'Até 3 canais oficiais (WhatsApp, e-mail, telefone)', 'Alertas de tentativa de fraude', 'Laudo técnico para B.O.', 'Suporte por e-mail'],
      cta: 'Assinar agora',
      featured: false,
    },
    {
      name: 'Escritórios',
      price: '15,92',
      period: '/mês por advogado',
      desc: '20% de desconto · a partir de 3 advogados',
      features: ['Tudo do plano Profissional', 'Painel administrativo do escritório', 'Validação em massa de OABs', 'Domínio personalizado de verificação', 'API REST + webhooks', 'Gerente de conta dedicado'],
      cta: 'Falar com vendas',
      featured: true,
      badge: '−20% OFF',
    },
  ];

  return (
    <section id="advogados" className="section-pad" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center', marginBottom: 80 }} className="advoc-intro">
          <div>
            <div className="eyebrow" style={{ color: 'var(--accent-gold)', marginBottom: 18 }}>PARA ADVOGADOS</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 56px)', margin: 0, color: 'var(--navy-900)' }}>
              Sua reputação é seu<br /><span style={{ fontStyle: 'italic', color: 'var(--accent-gold)' }}>maior patrimônio.</span>
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 480 }}>
              Por menos que um café por dia, você cadastra seus números oficiais, ganha um selo de verificação e recebe alertas em tempo real quando golpistas usam sua identidade.
            </p>

            <div style={{
              marginTop: 32, position: 'relative',
              borderRadius: 16, overflow: 'hidden',
              border: '1px solid var(--line)',
              aspectRatio: '4/3',
              backgroundImage: 'url("https://images.unsplash.com/photo-1521791136064-7986c2920216?w=900&q=80")',
              backgroundSize: 'cover', backgroundPosition: 'center',
            }}>
              <div style={{
                position: 'absolute', bottom: 16, left: 16,
                background: 'rgba(255,255,255,0.96)',
                padding: '12px 16px', borderRadius: 10,
                display: 'flex', alignItems: 'center', gap: 12,
                boxShadow: '0 8px 24px -8px rgba(0,0,0,0.2)',
              }}>
                <div style={{ width: 32, height: 32, borderRadius: 16, background: 'var(--safe-bg)', display: 'grid', placeItems: 'center', color: 'var(--safe-deep)' }}>
                  <Icon.check s={16} />
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy-900)' }}>Verificado JurisID</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>OAB/SP 248.917</div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {benefits.map((b, i) => (
              <div key={i} style={{
                background: 'var(--white)', padding: 22, borderRadius: 12,
                border: '1px solid var(--line)',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: b.bg, color: b.c,
                  display: 'grid', placeItems: 'center', marginBottom: 14,
                }}>{b.icon}</div>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--navy-900)', marginBottom: 6 }}>{b.title}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5 }}>{b.body}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="plans-grid">
          {plans.map(p => (
            <div key={p.name} style={{
              background: p.featured ? 'var(--navy-900)' : 'var(--white)',
              color: p.featured ? '#fff' : 'var(--ink)',
              borderRadius: 20,
              border: p.featured ? '1px solid var(--navy-900)' : '1px solid var(--line)',
              padding: 40,
              position: 'relative',
              overflow: 'hidden',
            }}>
              {p.badge && (
                <div style={{
                  position: 'absolute', top: 24, right: 24,
                  padding: '6px 12px', borderRadius: 6,
                  background: 'var(--accent-gold)', color: 'var(--navy-900)',
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', fontWeight: 700,
                }}>{p.badge}</div>
              )}
              <div className="eyebrow" style={{ color: p.featured ? 'var(--accent-gold)' : 'var(--accent-sky)', marginBottom: 12 }}>
                {p.name}
              </div>
              <div style={{ fontSize: 14, color: p.featured ? 'var(--blue-200)' : 'var(--ink-3)', marginBottom: 20 }}>
                {p.desc}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 28 }}>
                <span style={{ fontSize: 16, color: p.featured ? 'var(--blue-200)' : 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>R$</span>
                <span className="display" style={{ fontSize: 64, color: p.featured ? '#fff' : 'var(--navy-900)', lineHeight: 1 }}>
                  {p.price}
                </span>
                <span style={{ fontSize: 14, color: p.featured ? 'var(--blue-200)' : 'var(--ink-3)' }}>{p.period}</span>
              </div>
              <a href="#cadastro" className={`btn ${p.featured ? 'btn-light' : 'btn-primary'}`} style={{ width: '100%', marginBottom: 28 }}>
                {p.cta} <Icon.arrow s={14} />
              </a>
              <div style={{ height: 1, background: p.featured ? 'var(--line-dark)' : 'var(--line)', marginBottom: 24 }}></div>
              <div style={{ display: 'grid', gap: 12 }}>
                {p.features.map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 14 }}>
                    <span style={{ color: p.featured ? 'var(--safe)' : 'var(--safe-deep)', marginTop: 2 }}>
                      <Icon.check s={14} />
                    </span>
                    <span style={{ color: p.featured ? 'var(--blue-200)' : 'var(--ink-2)' }}>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32, padding: '24px 28px',
          background: 'var(--white)', borderRadius: 14,
          border: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap', justifyContent: 'center',
        }}>
          <Icon.lock s={16} />
          <span style={{ fontSize: 14, color: 'var(--ink-2)' }}>
            Pagamento seguro · Cancele quando quiser · Sem fidelidade · Nota fiscal automática
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .advoc-intro { grid-template-columns: 1fr !important; gap: 48px !important; }
          .plans-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

/* === Testimonials with photos === */
const Testimonials = () => {
  const items = [
    {
      quote: 'Em três meses, evitei dois clientes caindo em golpe usando meu nome. O selo JurisID virou parte do meu protocolo de atendimento.',
      name: 'Dra. Patrícia Lemos',
      role: 'Direito Empresarial · OAB/RJ',
      img: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&q=80',
    },
    {
      quote: 'Nosso escritório tem 18 advogados — antes eu vivia com medo de fraude. Hoje cada um tem perfil verificado e dormimos tranquilos.',
      name: 'Dr. Henrique Andrade',
      role: 'Sócio · Andrade & Costa Advocacia',
      img: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80',
    },
    {
      quote: 'A minha mãe quase caiu num golpe. Verifiquei o número no JurisID em 5 segundos e era falso. Salvou R$ 12 mil.',
      name: 'Roberto S.',
      role: 'Cliente · São Paulo',
      img: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&q=80',
    },
  ];

  return (
    <section style={{ background: 'var(--white)', padding: '120px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--accent-violet)', marginBottom: 14 }}>QUEM USA</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', margin: 0, color: 'var(--navy-900)', maxWidth: 640 }}>
              Mais de <span style={{ fontStyle: 'italic' }}>34 mil</span> profissionais e clientes já protegidos.
            </h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--accent-gold)' }}>
            <Icon.star s={20} /><Icon.star s={20} /><Icon.star s={20} /><Icon.star s={20} /><Icon.star s={20} />
            <span style={{ marginLeft: 8, fontSize: 14, color: 'var(--ink-2)', fontWeight: 500 }}>4.9 · 2.140 avaliações</span>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="testimonials-grid">
          {items.map((t, i) => (
            <div key={i} style={{
              background: 'var(--paper)', borderRadius: 16,
              border: '1px solid var(--line)', padding: 28,
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', gap: 4, color: 'var(--accent-gold)', marginBottom: 16 }}>
                {[...Array(5)].map((_, j) => <Icon.star key={j} s={14} />)}
              </div>
              <div className="display" style={{ fontSize: 18, lineHeight: 1.45, color: 'var(--navy-900)', flex: 1 }}>
                "{t.quote}"
              </div>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 22,
                  backgroundImage: `url("${t.img}")`,
                  backgroundSize: 'cover', backgroundPosition: 'center',
                  border: '2px solid var(--safe)',
                  flexShrink: 0,
                }}></div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--navy-900)' }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .testimonials-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

/* === For Clients (with imagery) === */
const ForClients = () => {
  return (
    <section id="clientes" className="section-pad" style={{ background: 'var(--navy-900)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px)`,
        backgroundSize: '64px 64px', opacity: 0.4,
        maskImage: 'radial-gradient(ellipse 80% 60% at 80% 50%, black 30%, transparent 100%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 80% 50%, black 30%, transparent 100%)',
      }}></div>
      <div style={{
        position: 'absolute', top: '20%', left: '-15%',
        width: 500, height: 500, borderRadius: '50%',
        background: 'radial-gradient(circle, oklch(0.68 0.16 155 / 0.18), transparent 60%)',
      }}></div>

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="clients-grid">
          <div>
            <div className="pill" style={{ marginBottom: 24, color: 'oklch(0.85 0.16 155)', borderColor: 'oklch(0.68 0.16 155 / 0.4)' }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--safe)' }}></span>
              GRATUITO E ILIMITADO
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 56px)', margin: 0 }}>
              Para o cidadão,<br />
              <span style={{ fontStyle: 'italic', color: 'oklch(0.82 0.13 155)' }}>sempre grátis.</span>
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color: 'var(--blue-200)', maxWidth: 480 }}>
              Quanto mais fácil for verificar, menor é o golpe. Por isso, a consulta no JurisID é gratuita, ilimitada e sem cadastro — para qualquer pessoa.
            </p>

            <div style={{ marginTop: 36, display: 'grid', gap: 14 }}>
              {[
                'Consultas ilimitadas, sem cadastro',
                'Disponível na web, iOS e Android',
                'Sem compartilhamento de dados pessoais',
                'Funciona com telefone, e-mail, nome ou OAB',
              ].map(f => (
                <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: 'var(--blue-200)' }}>
                  <span style={{ color: 'var(--safe)' }}><Icon.check s={16} /></span>
                  {f}
                </div>
              ))}
            </div>

            <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#verificar" className="btn btn-light btn-lg">
                <Icon.search s={18} /> Verificar agora
              </a>
              <a href="#" className="btn btn-ghost btn-lg">
                <Icon.download s={16} /> Baixar app
              </a>
            </div>
          </div>

          <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
            {/* Photo backdrop */}
            <div style={{
              position: 'absolute',
              width: 360, height: 480, top: 40, left: '50%', transform: 'translateX(-65%) rotate(-6deg)',
              borderRadius: 20, overflow: 'hidden',
              border: '4px solid var(--navy-700)',
              backgroundImage: 'url("https://images.unsplash.com/photo-1573164574572-cb89e39749b4?w=600&q=80")',
              backgroundSize: 'cover', backgroundPosition: 'center',
              boxShadow: '0 24px 48px -12px rgba(0,0,0,0.4)',
            }} className="client-photo-back"></div>

            {/* Phone mock */}
            <div style={{
              position: 'relative',
              width: 320, height: 640,
              background: '#0A1828',
              borderRadius: 44,
              border: '8px solid #1B2940',
              boxShadow: '0 40px 80px -30px rgba(0,0,0,0.6)',
              padding: 14,
              transform: 'translateX(40px) rotate(3deg)',
            }} className="client-phone">
              <div style={{
                background: 'var(--paper)', borderRadius: 32, height: '100%',
                overflow: 'hidden', color: 'var(--ink)', position: 'relative',
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{ padding: '14px 20px 8px', display: 'flex', justifyContent: 'space-between', fontSize: 12, fontWeight: 600 }}>
                  <span>9:41</span>
                  <span style={{ display: 'flex', gap: 4 }}>
                    <span style={{ fontSize: 10 }}>●●●●</span>
                    <span style={{ fontSize: 10 }}>5G</span>
                  </span>
                </div>
                <div style={{ padding: '8px 20px 20px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <Logo size={18} />
                  <div className="eyebrow" style={{ color: 'var(--ink-3)', marginTop: 24, fontSize: 10 }}>RESULTADO</div>

                  <div style={{ marginTop: 12, background: 'var(--white)', border: '1px solid var(--line)', borderRadius: 16, padding: 18 }}>
                    <div style={{
                      display: 'inline-flex', alignItems: 'center', gap: 6,
                      padding: '4px 10px', borderRadius: 999,
                      background: 'var(--safe-bg)', color: 'var(--safe-deep)',
                      fontSize: 10, fontWeight: 600, letterSpacing: '0.05em', marginBottom: 14,
                    }}>
                      <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--safe)' }}></span>
                      VERIFICADO
                    </div>
                    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                      <div style={{
                        width: 44, height: 44, borderRadius: 10,
                        backgroundImage: 'url("https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&q=80")',
                        backgroundSize: 'cover', backgroundPosition: 'center',
                        border: '2px solid var(--safe)',
                      }}></div>
                      <div>
                        <div className="display" style={{ fontSize: 16, color: 'var(--navy-900)', lineHeight: 1.2 }}>Dr. João Silva</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>OAB/RJ 142.305</div>
                      </div>
                    </div>
                    <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)' }}>
                      <div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 6 }}>Direito Tributário</div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-2)' }}>
                        <span style={{ color: 'var(--safe-deep)' }}><Icon.whatsapp s={11} /></span>
                        +55 21 98742-3322
                      </div>
                    </div>
                  </div>

                  <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
                    <button style={{ flex: 1, padding: '12px', borderRadius: 10, background: 'var(--navy-900)', color: '#fff', border: 'none', fontSize: 12, fontWeight: 600 }}>Salvar contato</button>
                    <button style={{ padding: '12px 14px', borderRadius: 10, background: 'var(--white)', color: 'var(--navy-900)', border: '1px solid var(--line-strong)', fontSize: 12, fontWeight: 600 }}>Compartilhar</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .clients-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .client-photo-back { display: none !important; }
          .client-phone { transform: none !important; }
        }
      `}</style>
    </section>
  );
};

window.ForLawyers = ForLawyers;
window.ForClients = ForClients;
window.Testimonials = Testimonials;