// Sections: Hero, Logos, Quote, Tese, Comparison

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function Hero() {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: T.bg, padding: '56px 0 64px' }}>
      <Container style={{ position: 'relative' }}>
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center', animation: 'saasFadeUp .6s ease both' }}>
          <Pill tone="soft" style={{ marginBottom: 24, display: 'inline-flex' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: T.accent }} /> Lançamento 2026
          </Pill>
          <p style={{
            margin: '0 auto 18px',
            fontFamily: T.font, fontSize: 38, lineHeight: 1.25,
            letterSpacing: '-0.015em',
            color: T.inkMuted, fontWeight: 400, maxWidth: 980,
            textWrap: 'balance',
          }}>
            Empresas extraordinárias não são feitas de vendedores extraordinários.
          </p>
          <h1 style={{
            margin: 0, fontFamily: T.font, fontSize: 56, lineHeight: 1.1,
            letterSpacing: '-0.03em', color: T.ink, fontWeight: 700,
            maxWidth: 1100, marginLeft: 'auto', marginRight: 'auto',
            textAlign: 'center', textWrap: 'balance',
          }}>
            São feitas de vendedores comuns seguindo um <em style={{ fontStyle: 'normal', color: T.accent, whiteSpace: 'nowrap' }}>Playbook de Vendas</em>
            <br/>
            <em style={{ fontStyle: 'normal', color: T.accent, position: 'relative', whiteSpace: 'nowrap' }}>
              extraordinário
              <svg width="100%" height="10" style={{ position: 'absolute', left: 0, bottom: -6 }} viewBox="0 0 360 10" preserveAspectRatio="none">
                <path d="M2 6 Q 90 0 180 5 T 358 4" stroke={T.accent} strokeWidth="3" fill="none" strokeLinecap="round" />
              </svg>
            </em>.
          </h1>

          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
            <PrimaryBtn big style={{ padding: '16px 28px', maxWidth: 540, fontSize: 14, lineHeight: 1.2 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
                <span style={{ display: 'flex' }}>
                  {['#7a5a2e','#2a6f5a','#3a3732','#857d70'].map((c, i) => (
                    <span key={i} style={{
                      width: 26, height: 26, borderRadius: '50%', background: c,
                      border: `2.5px solid ${T.cta}`, marginLeft: i ? -10 : 0,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      color: '#fff', fontFamily: T.mono, fontWeight: 600, fontSize: 10,
                    }}>{['JS','MA','RV','LC'][i]}</span>
                  ))}
                </span>
                <span style={{ textAlign: 'left', lineHeight: 1.25 }}>
                  +70 mil empresas já transformaram<br/>
                  suas vendas com os scripts do Conrado
                </span>
              </span>
            </PrimaryBtn>
          </div>

          <p style={{ margin: '40px auto 0', fontSize: 28, lineHeight: 1.35, letterSpacing: '-0.015em', color: T.ink, maxWidth: 980, fontFamily: T.font, fontWeight: 400 }}>
            O Playbook de Vendas é a estratégia comercial que empresas como <strong style={{ fontWeight: 600 }}>IBM, Johnson &amp; Johnson, Microsoft e Caterpillar</strong> adotam para treinar seus times comerciais.
          </p>
          <p style={{ margin: '18px auto 0', fontSize: 28, lineHeight: 1.35, letterSpacing: '-0.015em', color: T.ink, maxWidth: 980, fontFamily: T.font, fontWeight: 600 }}>
            Agora você pode ter o seu também.
          </p>
        </div>

        <QuoteBlock />

        {/* Stats row */}
        <div style={{
          marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          background: T.surface, borderRadius: 18, border: `1px solid ${T.rule}`,
          overflow: 'hidden',
        }}>
          {[
            ['41', 'anos de experiência acumulada em vendas'],
            ['70k+', 'empresas treinadas nos últimos 15 anos'],
            ['5k+', 'scripts que geraram +R$100mi em vendas'],
          ].map(([v, l], i) => (
            <div key={l} style={{
              padding: '32px 28px',
              borderRight: i < 2 ? `1px solid ${T.rule}` : 'none',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ fontFamily: T.font, fontSize: 56, fontWeight: 700, color: T.ink, letterSpacing: '-0.04em', lineHeight: 1 }}>{v}</div>
              <div style={{ fontSize: 17, color: T.inkSoft, lineHeight: 1.45, maxWidth: 280 }}>{l}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── Logos band ────────────────────────────────────────────
function LogoBand() {
  return (
    <section style={{ background: T.dark, color: T.darkInk, padding: '40px 0' }}>
      <Container style={{ display: 'grid', gridTemplateColumns: '1fr 2.4fr', gap: 48, alignItems: 'center' }}>
        <div style={{ fontFamily: T.mono, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(251,247,240,0.55)', lineHeight: 1.5 }}>
          Algumas empresas globais que usam playbooks de vendas para treinar seus times comerciais
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, alignItems: 'center' }}>
          {['XEROX', 'PRUDENTIAL', 'IBM'].map((n, i) => (
            <div key={n} style={{
              padding: '18px 0', textAlign: 'center',
              borderLeft: i ? '1px solid rgba(251,247,240,0.18)' : 'none',
              fontFamily: T.font, fontWeight: 700, fontSize: 28,
              letterSpacing: n === 'PRUDENTIAL' ? '0.02em' : '-0.01em',
            }}>{n}</div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── Quote (Conrado) ───────────────────────────────────────
function QuoteBlock() {
  return (
    <div style={{
      marginTop: 72,
      background: T.surface, borderRadius: 24, padding: '40px 44px',
      border: `1px solid ${T.rule}`,
      boxShadow: '0 24px 56px -28px rgba(21,17,10,0.18)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 56, alignItems: 'center', textAlign: 'left' }}>
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: -8, borderRadius: 22,
            background: T.accentSoft, transform: 'rotate(-3deg)',
          }} />
          <img src="assets/conrado.jpg" alt="Conrado Adolpho" style={{
            position: 'relative', width: '100%', aspectRatio: '3 / 4', objectFit: 'cover',
            borderRadius: 18, display: 'block',
            boxShadow: '0 20px 40px rgba(21,17,10,0.18)',
          }} />
          <div style={{
            position: 'absolute', bottom: -16, right: -16,
            background: T.ink, color: T.bg, padding: '12px 16px', borderRadius: 14,
            fontFamily: T.mono, fontSize: 12, letterSpacing: '0.08em',
            boxShadow: '0 12px 24px rgba(21,17,10,0.25)',
          }}>
            <div style={{ opacity: .65, marginBottom: 2 }}>VENDEDOR HÁ</div>
            <div style={{ fontSize: 28, fontFamily: T.font, fontWeight: 700, letterSpacing: '-0.02em' }}>41 anos</div>
          </div>
        </div>
        <div>
          <Eyebrow>O que é o Copiloto Comercial</Eyebrow>
          <div style={{
            margin: '20px 0 0', fontFamily: T.font, fontSize: 28, lineHeight: 1.35,
            letterSpacing: '-0.02em', color: T.ink, fontWeight: 400,
          }}>
            <p style={{ margin: 0 }}>
              O Copiloto Comercial é um aplicativo em que eu reuni <em style={{ fontStyle: 'normal', fontWeight: 600, background: `linear-gradient(transparent 62%, ${T.accentSoft} 62%)` }}>mais de 5 mil scripts</em> que eu tenho usado nos meus 41 anos de vendas (e que já me fizeram gerar <em style={{ fontStyle: 'normal', fontWeight: 600 }}>mais de R$100 milhões em faturamento</em> nessas 4 décadas) disponíveis para você de maneira personalizada para o seu negócio por meio de uma IA.
            </p>
            <p style={{ margin: '20px 0 0' }}>
              É como se eu estivesse ao seu lado criando todos os scripts de vendas personalizados para a sua empresa e desenvolvendo assim o seu <em style={{ fontStyle: 'normal', fontWeight: 600, color: T.ink }}>Playbook de Vendas</em>.
            </p>
          </div>
          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 36, height: 1, background: T.ruleStrong }} />
            <div>
              <div style={{ fontSize: 17, fontWeight: 600, color: T.ink }}>Conrado Adolpho</div>
              <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.08em', marginTop: 2 }}>VENDEDOR · CRIADOR DO MÉTODO 8Ps</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Tese pull-quote ───────────────────────────────────────
function Tese() {
  return (
    <section style={{ background: T.accentSoft, padding: '20px 0', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: `radial-gradient(${T.accent} 1px, transparent 1px)`, backgroundSize: '24px 24px', opacity: .12 }} />
      <Container style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <p style={{
              margin: '24px 0 0', maxWidth: 720,
              fontFamily: T.font, fontSize: 38, lineHeight: 1.25, letterSpacing: '-0.015em',
              fontWeight: 400, color: '#7d4426',
            }}>
              Você não precisa de vendedores extraordinários.
            </p>
            <h2 style={{
              margin: '18px 0 0', maxWidth: 720,
              fontFamily: T.font, fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em',
              fontWeight: 700, color: '#3d1d0c',
            }}>
              Você precisa de um Playbook de Vendas que faça vendedores comuns entregarem resultados extraordinários.
            </h2>
          </div>
          <PlaybookMock />
        </div>
      </Container>
    </section>
  );
}

function PlaybookMock() {
  return (
    <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
      <img
        src="assets/playbook-stack.png"
        alt="Stack de Playbooks de vendas impressos — Clínica sorrisoh!"
        style={{
          width: '100%', maxWidth: 460, height: 'auto', display: 'block',
          filter: 'drop-shadow(0 30px 50px rgba(21,17,10,0.32)) drop-shadow(0 10px 18px rgba(21,17,10,0.18))',
        }}
      />
    </div>
  );
}

// ── Comparison cards ──────────────────────────────────────
const COMP = [
  ['Vendedor trava na hora do preço.', 'Vendedor passa o preço naturalmente porque treinou exaustivamente.'],
  ['Não vende quando está de mau humor.', 'Todo dia tem fechamento. O script protege o vendedor contra o humor dele.'],
  ['Cada um contorna objeção de um jeito diferente.', 'Todos contornam do mesmo jeito: o melhor.'],
  ['Se o melhor vendedor sai, leva a inteligência de vendas embora.', 'A inteligência está no script, não no vendedor.'],
  ['O dono vive com medo de perder o melhor vendedor.', 'Sem medo: com um bom script, todos performam bem.'],
];

function CompareCards() {
  return (
    <section style={{ padding: '80px 0' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {/* Sem script */}
          <div style={{
            background: T.surface, borderRadius: 20, padding: '32px 32px 16px',
            border: `1px solid ${T.rule}`, opacity: .92,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: '#f1ebdf', color: T.inkMuted, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 17 }}>✕</div>
              <div>
                <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Time sem Playbook de Vendas</div>
                <div style={{ fontWeight: 600, color: T.ink, fontSize: 17, marginTop: 2 }}>Improvisa, reclama, desiste.</div>
              </div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {COMP.map(([bad], i) => (
                <li key={i} style={{
                  display: 'flex', gap: 12, padding: '14px 0',
                  borderTop: `1px dashed ${T.rule}`,
                  fontSize: 17, lineHeight: 1.45, color: T.inkMuted,
                }}>
                  <span style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, paddingTop: 2, minWidth: 24 }}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(21,17,10,0.18)' }}>{bad}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Com script */}
          <div style={{
            background: T.dark, color: T.darkInk, borderRadius: 20, padding: '32px 32px 16px',
            position: 'relative', overflow: 'hidden',
            boxShadow: '0 24px 56px rgba(21,17,10,0.18)',
          }}>
            <div aria-hidden style={{ position: 'absolute', top: -60, right: -60, width: 220, height: 220, borderRadius: '50%', background: T.accent, opacity: .25, filter: 'blur(30px)' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, position: 'relative' }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: T.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 17 }}>✓</div>
              <div>
                <div style={{ fontFamily: T.mono, fontSize: 12, color: 'rgba(251,247,240,0.55)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Time com Playbook de Vendas</div>
                <div style={{ fontWeight: 600, fontSize: 17, marginTop: 2 }}>Padronizado, previsível, profissional.</div>
              </div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, position: 'relative' }}>
              {COMP.map(([_, good], i) => (
                <li key={i} style={{
                  display: 'flex', gap: 12, padding: '14px 0',
                  borderTop: `1px dashed rgba(251,247,240,0.14)`,
                  fontSize: 17, lineHeight: 1.45,
                }}>
                  <span style={{ fontFamily: T.mono, fontSize: 12, color: T.accent, paddingTop: 2, minWidth: 24, fontWeight: 600 }}>{String(i+1).padStart(2,'0')}</span>
                  <span>{good}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, LogoBand, QuoteBlock, Tese, CompareCards });