/* === Hero === */

const VerificationCard = () => {
  const [phase, setPhase] = React.useState('searching');
  const [variantState, setVariantState] = React.useState(0);
  const cases = [
    {
      type: 'verified',
      name: 'Mariana Costa Rezende',
      oab: 'OAB/SP 248.917',
      area: 'Direito Civil · Família',
      since: '2014',
      initials: 'MR',
    },
    {
      type: 'alert',
      reasons: ['Número não cadastrado por nenhum advogado', 'Padrão de mensagem associado a fraudes', '12 denúncias nos últimos 30 dias'],
    }
  ];

  React.useEffect(() => {
    let alive = true;
    const cycle = async () => {
      while (alive) {
        setPhase('searching');
        await new Promise(r => setTimeout(r, 1400));
        if (!alive) return;
        setPhase('result');
        await new Promise(r => setTimeout(r, 4500));
        if (!alive) return;
        setVariantState(v => (v + 1) % 2);
      }
    };
    cycle();
    return () => { alive = false; };
  }, []);

  const current = cases[variantState];

  return (
    <div style={{
      background: 'rgba(255,255,255,0.03)',
      border: '1px solid var(--line-dark-strong)',
      borderRadius: 20,
      padding: 4,
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      boxShadow: '0 32px 80px -24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08)',
    }}>
      <div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 16, overflow: 'hidden' }}>
        <div style={{ padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid var(--line-dark)' }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: 'oklch(0.72 0.16 32)' }}></div>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: 'oklch(0.80 0.13 78)' }}></div>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: 'oklch(0.68 0.16 155)' }}></div>
          </div>
          <div style={{
            flex: 1, background: 'rgba(0,0,0,0.25)',
            border: '1px solid var(--line-dark)', borderRadius: 6,
            padding: '5px 12px', fontFamily: 'var(--font-mono)',
            fontSize: 11, color: 'var(--blue-300)',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <Icon.lock s={11} /> jurisid.com.br/verificar
          </div>
        </div>

        <div style={{ padding: 24 }}>
          <div className="eyebrow" style={{ color: 'var(--blue-300)', marginBottom: 12 }}>VERIFICAR CONTATO</div>
          <div style={{
            background: 'rgba(0,0,0,0.3)',
            border: '1px solid var(--line-dark-strong)',
            borderRadius: 10, padding: '14px 16px',
            display: 'flex', alignItems: 'center', gap: 12,
            color: '#fff', fontFamily: 'var(--font-mono)', fontSize: 14,
          }}>
            <Icon.search s={16} />
            <span style={{ flex: 1 }}>{variantState === 0 ? 'OAB/SP 248917' : '+55 11 91234-5678'}</span>
            {phase === 'searching' && (
              <div style={{ width: 14, height: 14, borderRadius: 7, border: '2px solid var(--line-dark)', borderTopColor: 'var(--safe)', animation: 'spin 0.8s linear infinite' }}></div>
            )}
          </div>

          <div style={{ marginTop: 20, minHeight: 280, position: 'relative' }}>
            {phase === 'searching' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, opacity: 0.7 }}>
                <div className="eyebrow" style={{ color: 'var(--blue-300)' }}>CONSULTANDO BASES OFICIAIS</div>
                {['Conselho Federal da OAB', 'ICP-Brasil', 'Sistema antifraude JurisID'].map((s, i) => (
                  <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 13, color: 'var(--blue-300)', fontFamily: 'var(--font-mono)', animation: `fadeUp 0.4s ${i * 0.2}s both` }}>
                    <div style={{ width: 12, height: 12, borderRadius: 6, border: '2px solid var(--safe)', borderTopColor: 'transparent', animation: 'spin 0.8s linear infinite' }}></div>
                    {s}
                  </div>
                ))}
              </div>
            )}

            {phase === 'result' && current.type === 'verified' && (
              <div className="fade-up" key={`v-${variantState}`}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  padding: '8px 14px',
                  background: 'oklch(0.68 0.16 155 / 0.18)',
                  border: '1px solid oklch(0.68 0.16 155 / 0.4)',
                  borderRadius: 999, width: 'fit-content', marginBottom: 18,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: 'var(--safe)', boxShadow: '0 0 0 4px oklch(0.68 0.16 155 / 0.3)' }}></span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'oklch(0.85 0.16 155)', letterSpacing: '0.05em' }}>IDENTIDADE VERIFICADA</span>
                </div>

                <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 64, height: 64, borderRadius: 12,
                    backgroundImage: 'url("https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=200&q=80")',
                    backgroundSize: 'cover', backgroundPosition: 'center',
                    border: '2px solid var(--safe)',
                    flexShrink: 0, position: 'relative',
                  }}>
                    <div style={{
                      position: 'absolute', bottom: -4, right: -4,
                      width: 22, height: 22, borderRadius: 11,
                      background: 'var(--safe)', display: 'grid', placeItems: 'center',
                      border: '2px solid var(--navy-900)', color: '#fff',
                    }}>
                      <Icon.check s={12} />
                    </div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: '#fff', lineHeight: 1.15, marginBottom: 4 }}>
                      Dra. {current.name}
                    </div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--blue-300)', marginBottom: 4 }}>
                      {current.oab}
                    </div>
                    <div style={{ fontSize: 13, color: 'var(--blue-200)' }}>
                      {current.area} · Em atividade desde {current.since}
                    </div>
                  </div>
                </div>

                <div style={{ marginTop: 18, padding: 14, background: 'rgba(0,0,0,0.25)', borderRadius: 10, border: '1px solid var(--line-dark)' }}>
                  <div className="eyebrow" style={{ color: 'var(--blue-300)', marginBottom: 10 }}>CANAIS OFICIAIS VALIDADOS</div>
                  <div style={{ display: 'grid', gap: 8 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 12, color: '#fff' }}>
                      <span style={{ color: 'var(--safe)' }}><Icon.whatsapp s={14} /></span>
                      +55 11 98765-4321
                      <span style={{ color: 'var(--safe)' }}><Icon.check s={11} /></span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 12, color: '#fff' }}>
                      <span style={{ color: 'var(--safe)' }}><Icon.mail s={14} /></span>
                      mariana@rezende.adv.br
                      <span style={{ color: 'var(--safe)' }}><Icon.check s={11} /></span>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {phase === 'result' && current.type === 'alert' && (
              <div className="fade-up" key={`a-${variantState}`}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px',
                  background: 'oklch(0.62 0.20 25 / 0.18)',
                  border: '1px solid oklch(0.62 0.20 25 / 0.4)',
                  borderRadius: 999, width: 'fit-content', marginBottom: 18,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: 'var(--danger)', boxShadow: '0 0 0 4px oklch(0.62 0.20 25 / 0.3)', animation: 'pulse 1s ease-in-out infinite' }}></span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'oklch(0.82 0.18 25)', letterSpacing: '0.05em' }}>ALERTA DE FRAUDE</span>
                </div>

                <div style={{ marginBottom: 16 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: '#fff', lineHeight: 1.15, marginBottom: 6 }}>
                    Contato suspeito detectado
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--blue-200)' }}>
                    Este número não está vinculado a nenhum advogado verificado e foi sinalizado pelo nosso sistema antifraude.
                  </div>
                </div>

                <div style={{ padding: 14, background: 'oklch(0.62 0.20 25 / 0.08)', borderRadius: 10, border: '1px solid oklch(0.62 0.20 25 / 0.25)' }}>
                  <div className="eyebrow" style={{ color: 'oklch(0.82 0.18 25)', marginBottom: 10 }}>MOTIVOS</div>
                  <div style={{ display: 'grid', gap: 8 }}>
                    {cases[1].reasons.map((r, i) => (
                      <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 12, color: 'var(--blue-200)', lineHeight: 1.5 }}>
                        <span style={{ color: 'oklch(0.82 0.18 25)', marginTop: 2 }}><Icon.alert s={12} /></span>
                        {r}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
      `}</style>
    </div>
  );
};

const Hero = ({ tweaks }) => {
  const headlines = {
    trust: { eyebrow: 'IDENTIDADE VERIFICADA · ICP-BRASIL', title: ['A camada de confiança', 'da advocacia digital'], sub: 'Confirme a identidade do seu advogado em segundos. Bloqueie golpistas antes que eles falem com seu cliente.' },
    alarm: { eyebrow: 'ALERTA · GOLPES JURÍDICOS +340%', title: ['Não caia no golpe', 'do falso advogado.'], sub: 'Em 2024, brasileiros perderam mais de R$ 3 bilhões para advogados falsos. O JurisID verifica em segundos se o contato é real.' },
    direct: { eyebrow: 'VERIFICAÇÃO INSTANTÂNEA', title: ['Identidade segura', 'para advogados.'], sub: 'A primeira plataforma com integração ICP-Brasil + OAB. Verifique em segundos. Cadastre-se e proteja sua reputação.' },
  };
  const h = headlines[tweaks.headline] || headlines.trust;

  return (
    <section id="top" style={{
      background: 'var(--navy-900)',
      color: '#fff',
      paddingTop: 140,
      paddingBottom: 100,
      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',
        maskImage: 'radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 100%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 100%)',
        opacity: 0.5, pointerEvents: 'none',
      }}></div>
      <div style={{
        position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)',
        width: 800, height: 800, borderRadius: '50%',
        background: 'radial-gradient(circle, oklch(0.55 0.14 230 / 0.22), transparent 60%)',
        pointerEvents: 'none',
      }}></div>
      <div style={{
        position: 'absolute', top: '20%', right: '-10%',
        width: 500, height: 500, borderRadius: '50%',
        background: 'radial-gradient(circle, oklch(0.68 0.16 155 / 0.10), transparent 60%)',
        pointerEvents: 'none',
      }}></div>

      <div className="container" style={{ position: 'relative' }}>
        <div className="hero-grid" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80, alignItems: 'center',
        }}>
          <div>
            <div className="pill" style={{ marginBottom: 28 }}>
              <span className="dot"></span>
              {h.eyebrow}
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(40px, 5.6vw, 76px)', margin: 0 }}>
              {h.title[0]}<br />
              <span style={{ fontStyle: 'italic', color: 'oklch(0.80 0.13 78)' }}>{h.title[1]}</span>
            </h1>
            <p style={{ marginTop: 28, fontSize: 18, lineHeight: 1.5, color: 'var(--blue-200)', maxWidth: 520 }}>
              {h.sub}
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <a href="#verificar" className="btn btn-light btn-lg">
                <Icon.search s={18} />
                Verificar contato grátis
              </a>
              <a href="#advogados" className="btn btn-ghost btn-lg">
                Sou advogado <Icon.arrow s={16} />
              </a>
            </div>

            <div style={{
              marginTop: 56, paddingTop: 32,
              borderTop: '1px solid var(--line-dark)',
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            }} className="hero-stats">
              {[
                { n: '2,5 Mi', l: 'Brasileiros vítimas em 2024', c: 'oklch(0.72 0.16 32)' },
                { n: '+340%', l: 'Crescimento dos golpes em 3 anos', c: 'oklch(0.80 0.13 78)' },
                { n: '< 2s', l: 'Para verificar uma identidade', c: 'oklch(0.68 0.16 155)' },
              ].map(s => (
                <div key={s.l}>
                  <div className="display" style={{ fontSize: 28, color: s.c }}>{s.n}</div>
                  <div style={{ fontSize: 12, color: 'var(--blue-300)', marginTop: 4, lineHeight: 1.4 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="hero-card-wrap">
            <VerificationCard />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .hero-stats { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Hero = Hero;