// Sections: Pullquote2, WhatIs (feature blocks), Pricing, Guarantee, FAQ, FinalCTA, Footer

function Pullquote2() {
  return (
    <section style={{ background: T.dark, color: T.darkInk, padding: '72px 0', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(135deg, transparent 0 49.5%, rgba(233,92,44,0.06) 49.5% 50.5%, transparent 50.5%)`,
        backgroundSize: '60px 60px',
      }} />
      <Container style={{ position: 'relative' }}>
        <h2 style={{
          margin: 0, maxWidth: 1140,
          fontFamily: T.font, fontSize: 56, lineHeight: 1.1, letterSpacing: '-0.03em',
          fontWeight: 400, color: T.darkInk,
        }}>
          O Playbook de vendas (conjunto de todos os scripts) concentra a{' '}
          <span style={{ fontWeight: 700, color: T.cta }}>inteligência comercial da empresa</span>{' '}
          e faz com que o negócio gere resultados mesmo com vendedores medíocres ou com a saída do melhor vendedor.
        </h2>
      </Container>
    </section>
  );
}

// ── O que é (3 pilares como feature blocks alternados) ────
const PILLARS = [
  {
    n: '01', title: 'As informações do seu negócio',
    body: 'O que você responde sobre seu produto, seu mercado, seu público-alvo, seu ticket médio e suas objeções mais comuns.',
    visual: 'form',
  },
  {
    n: '02', title: 'Os mais de 5 mil blocos persuasivos do Conrado',
    body: 'Frases de vendas <strong style="color:#15110a;font-weight:600">testadas, melhoradas e validadas exaustivamente</strong> em mais de 4 décadas de vendas que o próprio Conrado reuniu para você',
    visual: 'cards',
  },
  {
    n: '03', title: 'A IA que fará a personalização para o seu negócio de um script já validado pelo Conrado',
    body: 'Uma IA que conecta as informações sobre o seu negócio com as frases persuasivas do Conrado para <strong style="color:#15110a;font-weight:600">criar todos os seus scripts personalizados</strong> para sua empresa sem ficar genérico.',
    visual: 'ai',
  },
  {
    n: '04', title: 'Criação do script completo por produto',
    body: 'O conjunto de todos os blocos de persuasão criará o <strong style="color:#15110a;font-weight:600">script completo de cada produto</strong> para cada público-alvo e para cada canal de vendas.',
    visual: 'script',
  },
  {
    n: '05', title: 'O seu playbook pronto script por script',
    body: 'O conjunto de todos os scripts completos compõem o Playbook de vendas. Todos os scripts de todos os produtos <strong style="color:#15110a;font-weight:600">prontos para imprimir</strong> e treinar seu time comercial.',
    visual: 'playbook',
  },
];

function FeatureVisual({ kind }) {
  if (kind === 'form') {
    return (
      <div style={{ background: T.surface, borderRadius: 18, padding: 22, border: `1px solid ${T.rule}`, boxShadow: '0 20px 40px -20px rgba(21,17,10,0.18)' }}>
        <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 14 }}>BRIEFING · ETAPA 1</div>
        {[
          ['Qual o seu produto?', 'Implantes dentários com prótese fixa'],
          ['Ticket médio do tratamento', 'R$ 4.500 por elemento'],
          ['Maior objeção do paciente', 'Está caro · vou pensar com calma'],
          ['Decisor', 'Paciente adulto · 40-65 anos'],
        ].map(([k, v], i) => (
          <div key={k} style={{ paddingBottom: 14, marginBottom: 14, borderBottom: i < 3 ? `1px dashed ${T.rule}` : 'none' }}>
            <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{k}</div>
            <div style={{ fontSize: 17, color: T.ink, marginTop: 4, fontWeight: 400 }}>{v}</div>
          </div>
        ))}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
          <div style={{ fontFamily: T.mono, fontSize: 12, color: T.accent }}>● 12 perguntas restantes</div>
          <div style={{ padding: '8px 14px', background: T.ink, color: T.bg, borderRadius: 8, fontSize: 12, fontWeight: 600 }}>Continuar →</div>
        </div>
      </div>
    );
  }
  if (kind === 'cards') {
    const tags = ['Abertura', 'Quebra-gelo', 'Diagnóstico', 'Apresentação', 'Ancoragem', 'Objeção: preço', 'Objeção: tempo', 'Urgência', 'Fechamento', 'Follow-up', 'Reabertura', 'Indicação'];
    return (
      <div style={{ background: T.chipSoft, borderRadius: 18, padding: 22, border: `1px solid ${T.rule}` }}>
        <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 16 }}>BIBLIOTECA · 5.423 SCRIPTS</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 18 }}>
          {tags.map((t, i) => (
            <span key={t} style={{
              padding: '7px 12px', borderRadius: 999,
              background: i === 4 ? T.accent : '#fff',
              color: i === 4 ? '#fff' : T.inkSoft,
              border: i === 4 ? 'none' : `1px solid ${T.rule}`,
              fontSize: 12, fontWeight: 400,
            }}>{t}</span>
          ))}
        </div>
        <div style={{ background: '#fff', borderRadius: 12, padding: 14, border: `1px solid ${T.rule}` }}>
          <div style={{ fontFamily: T.mono, fontSize: 12, color: T.accent, letterSpacing: '0.1em', marginBottom: 6 }}>★ ANCORAGEM · 0214</div>
          <div style={{ fontSize: 17, lineHeight: 1.5, color: T.ink }}>
            "Antes de eu falar o investimento, deixa eu te perguntar uma coisa: quanto está te custando, todo mês, <em style={{ fontStyle: 'normal', background: T.accentSoft, padding: '0 3px' }}>não resolver isso</em>?"
          </div>
        </div>
      </div>
    );
  }
  if (kind === 'script') {
    const blocks = [
      ['ABERTURA', '"Maria, antes de eu te explicar o tratamento, posso te perguntar três coisas rápidas?"'],
      ['DIAGNÓSTICO', '"O que mais te incomoda hoje quando você sorri ou mastiga?"'],
      ['ANCORAGEM', '"Pra você ter ideia: quem fez esse tratamento aqui voltou a sorrir em 90 dias."'],
      ['OBJEÇÃO · PREÇO', '"Entendo. Vou te mostrar como o investimento se divide e o que muda no seu dia a dia."'],
      ['FECHAMENTO', '"Posso te encaixar pra começarmos essa semana, ou prefere agendar a próxima?"'],
    ];
    return (
      <div style={{ background: T.surface, borderRadius: 18, padding: 22, border: `1px solid ${T.rule}`, boxShadow: '0 20px 40px -20px rgba(21,17,10,0.18)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
          <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.12em', textTransform: 'uppercase' }}>SCRIPT COMPLETO · IMPLANTE DENTÁRIO</div>
          <div style={{ fontFamily: T.mono, fontSize: 12, color: T.accent, letterSpacing: '0.08em' }}>WHATSAPP</div>
        </div>
        {blocks.map(([tag, line], i) => (
          <div key={tag} style={{
            position: 'relative', display: 'grid', gridTemplateColumns: '94px 1fr',
            gap: 14, padding: '12px 0',
            borderTop: i ? `1px dashed ${T.rule}` : 'none',
          }}>
            <div style={{ fontFamily: T.mono, fontSize: 12, color: T.accent, letterSpacing: '0.08em', fontWeight: 600, lineHeight: 1.3 }}>{String(i+1).padStart(2,'0')} · {tag}</div>
            <div style={{ fontSize: 14, lineHeight: 1.4, color: T.inkSoft }}>{line}</div>
          </div>
        ))}
        <div style={{ marginTop: 14, padding: '10px 12px', background: T.accentSoft, borderRadius: 8, fontFamily: T.mono, fontSize: 12, color: '#4f3a1a', letterSpacing: '0.06em', display: 'flex', justifyContent: 'space-between' }}>
          <span>★ MONTADO · 5 BLOCOS</span><span>PRONTO PARA O TIME</span>
        </div>
      </div>
    );
  }
  if (kind === 'playbook') {
    const sections = [
      ['Implantes · Tratamento principal', ['SDR · WhatsApp', 'SDR · Telefone', 'Closer · Consulta'], 3],
      ['Estética · Clareamento, facetas', ['Closer · Consulta', 'Pós-venda'], 2],
      ['Pacientes recorrentes', ['Manutenção semestral', 'Indicação'], 2],
    ];
    return (
      <div style={{ background: T.dark, color: T.darkInk, borderRadius: 18, padding: 24, position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, borderRadius: '50%', background: T.accent, opacity: .35, filter: 'blur(40px)' }} />
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div style={{ fontFamily: T.mono, fontSize: 12, color: 'rgba(251,247,240,0.55)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>PLAYBOOK · CLÍNICA ODONTOLÓGICA</div>
          <div style={{ fontFamily: T.mono, fontSize: 12, color: T.accent, letterSpacing: '0.08em' }}>PDF · 87 PÁG.</div>
        </div>
        <div style={{ position: 'relative', marginTop: 16, fontFamily: T.font, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>
          Manual completo de vendas
        </div>
        <div style={{ position: 'relative', marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {sections.map(([title, scripts, count], i) => (
            <div key={title} style={{
              background: 'rgba(251,247,240,0.06)', borderRadius: 10, padding: '12px 14px',
              display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center',
            }}>
              <div>
                <div style={{ fontFamily: T.mono, fontSize: 12, color: 'rgba(251,247,240,0.55)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{String(i+1).padStart(2,'0')} · CAPÍTULO</div>
                <div style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>{title}</div>
                <div style={{ fontSize: 12, color: 'rgba(251,247,240,0.55)', marginTop: 2, lineHeight: 1.4 }}>{scripts.join(' · ')}</div>
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 12, color: T.accent, letterSpacing: '0.08em' }}>{count} SCRIPTS</div>
            </div>
          ))}
        </div>
        <div style={{ position: 'relative', marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: T.mono, fontSize: 12, color: 'rgba(251,247,240,0.7)' }}>
          <span>● Total · 7 scripts</span>
          <button style={{
            background: T.cta, color: T.ctaInk, border: 'none',
            padding: '8px 14px', borderRadius: 999,
            fontFamily: T.mono, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
            fontWeight: 700, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            boxShadow: '0 6px 14px rgba(122,90,46,0.25)',
          }}>
            <span style={{ fontSize: 13 }}>⎙</span> Imprimir em PDF
          </button>
        </div>
      </div>
    );
  }
  return (
    <div style={{ background: T.dark, color: T.darkInk, borderRadius: 18, padding: 22, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: -40, right: -40, width: 180, height: 180, borderRadius: '50%', background: T.accent, opacity: .4, filter: 'blur(40px)' }} />
      <div style={{ position: 'relative', fontFamily: T.mono, fontSize: 12, color: 'rgba(251,247,240,0.55)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>SÍNTESE · GERANDO SCRIPT</div>
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 18 }}>
        <div style={{ background: 'rgba(251,247,240,0.06)', borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 12, color: 'rgba(251,247,240,0.55)' }}>Contexto</div>
          <div style={{ fontSize: 12, marginTop: 4, lineHeight: 1.4 }}>Clínica odonto · implantes · ticket R$ 4.500 · adulto</div>
        </div>
        <div style={{ background: 'rgba(251,247,240,0.06)', borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 12, color: 'rgba(251,247,240,0.55)' }}>Template base</div>
          <div style={{ fontSize: 12, marginTop: 4, lineHeight: 1.4 }}>Ancoragem 0214 · Objeção preço</div>
        </div>
      </div>
      <div style={{
        position: 'relative', marginTop: 14, padding: 14,
        background: T.accent, borderRadius: 10, fontSize: 17, lineHeight: 1.5,
      }}>
        <div style={{ fontFamily: T.mono, fontSize: 12, opacity: .8, letterSpacing: '0.08em', marginBottom: 6 }}>SCRIPT PERSONALIZADO ★</div>
        "Maria, entendo o receio com o investimento. Mas quanto está te custando, todo dia, evitar sorrir nas fotos e na frente das pessoas?"
      </div>
      <div style={{ position: 'relative', display: 'flex', gap: 8, marginTop: 12, fontFamily: T.mono, fontSize: 12, color: 'rgba(251,247,240,0.7)' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: T.accent, animation: 'saasPulse 1.5s infinite' }} />
        Gerado em 2,4s · alta confiança
      </div>
    </div>
  );
}

function WhatIs() {
  return (
    <section style={{ padding: '80px 0 24px', background: T.bg }}>
      <Container>
        <div style={{ marginBottom: 56 }}>
          <h2 style={{ margin: 0, fontFamily: T.font, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 700, color: T.ink }}>
            Como criar o seu Playbook de Vendas com o Copiloto Comercial.
          </h2>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {PILLARS.map((p, i) => {
            const reverse = i % 2 === 1;
            return (
              <div key={p.n} style={{
                display: 'grid',
                gridTemplateColumns: reverse ? '1fr 1.05fr' : '1.05fr 1fr',
                gap: 56, alignItems: 'center',
                background: T.surface, borderRadius: 24, padding: 36,
                border: `1px solid ${T.rule}`,
              }}>
                <div style={{ order: reverse ? 2 : 1 }}>
                  <FeatureVisual kind={p.visual} />
                </div>
                <div style={{ order: reverse ? 1 : 2 }}>
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    fontFamily: T.mono, fontSize: 12, letterSpacing: '0.14em',
                    textTransform: 'uppercase', color: T.accent, fontWeight: 600,
                  }}>
                    <span style={{
                      width: 36, height: 36, borderRadius: 12, background: T.accentSoft,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 12, fontWeight: 700,
                    }}>{p.n}</span>
                    Passo {p.n}
                  </div>
                  <h3 style={{ margin: '18px 0 12px', fontFamily: T.font, fontSize: 38, fontWeight: 700, color: T.ink, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
                    {p.title}
                  </h3>
                  <p style={{ margin: 0, fontSize: 27, lineHeight: 1.45, color: T.inkSoft }} dangerouslySetInnerHTML={{ __html: p.body }} />
                </div>
              </div>
            );
          })}
        </div>

        {/* Resultado box */}
        <div style={{
          marginTop: 40, padding: '36px 44px',
          background: T.accentSoft, borderRadius: 20,
        }}>
          <div>
            <p style={{ margin: 0, fontFamily: T.font, fontSize: 28, lineHeight: 1.35, color: '#3d1d0c', fontWeight: 400, letterSpacing: '-0.015em' }}>
              Scripts validados no campo de batalha das vendas, <em style={{ fontStyle: 'normal', fontWeight: 700 }}>totalmente personalizados</em> para sua empresa prontos para treinar o seu time comercial.
            </p>
            <p style={{ margin: '10px 0 0', fontSize: 17, color: '#7d4426', lineHeight: 1.5 }}>
              Torne cada vendedor um vendedor de elite com a inteligência de um dos maiores treinadores de vendas do país.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

function PhotoMarquee() {
  // 8 frames; replace src with assets/photo-NN.jpg later
  const photos = [
    { n: 1, src: 'assets/photo-01.jpg' },
    { n: 2, src: 'assets/photo-02.jpg' },
    { n: 3, src: 'assets/photo-03.jpg' },
    { n: 4, src: 'assets/photo-04.jpg' },
    { n: 5, src: 'assets/photo-05.jpg' },
    { n: 6, src: 'assets/photo-06.jpg' },
    { n: 7, src: 'assets/photo-07.jpg' },
    { n: 8, src: 'assets/photo-08.jpg' },
  ];
  // duplicate for seamless loop
  const reel = [...photos, ...photos];
  return (
    <section style={{ padding: '32px 0', background: T.bg, position: 'relative' }}>
      <style>{`@keyframes saasMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
      <div style={{ position: 'relative', overflow: 'hidden', width: '100%' }}>
        {/* fade masks on edges */}
        <div aria-hidden style={{
          position: 'absolute', top: 0, bottom: 0, left: 0, width: 120, zIndex: 2,
          background: `linear-gradient(90deg, ${T.bg}, rgba(251,247,240,0))`,
          pointerEvents: 'none',
        }} />
        <div aria-hidden style={{
          position: 'absolute', top: 0, bottom: 0, right: 0, width: 120, zIndex: 2,
          background: `linear-gradient(270deg, ${T.bg}, rgba(251,247,240,0))`,
          pointerEvents: 'none',
        }} />

        <div style={{
          display: 'flex', gap: 20, width: 'max-content',
          animation: 'saasMarquee 60s linear infinite reverse',
        }}>
          {reel.map((p, i) => (
            <div key={`${p.n}-${i}`} style={{
              width: 'clamp(360px, 32vw, 540px)',
              aspectRatio: '647 / 358',
              borderRadius: 14,
              background: p.src ? '#1a1612' : '#d8d2c5',
              border: `1px solid ${T.rule}`,
              flexShrink: 0,
              position: 'relative',
              overflow: 'hidden',
              boxShadow: '0 14px 28px -16px rgba(21,17,10,0.18)',
            }}>
              {p.src ? (
                <img src={p.src} alt={`Foto ${p.n}`} style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%',
                  objectFit: 'cover', display: 'block',
                }} />
              ) : (
                <div style={{
                  position: 'absolute', inset: 0, display: 'flex',
                  alignItems: 'center', justifyContent: 'center',
                  fontFamily: T.mono, fontSize: 14, color: 'rgba(21,17,10,0.45)',
                  letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600,
                }}>
                  Foto {String(p.n).padStart(2, '0')} · 647×358
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pullquote2, WhatIs, WhoIsConrado, Benefits, SalesQuestion, PhotoMarquee });

function SalesQuestion() {
  return (
    <section style={{ background: T.dark, color: T.darkInk, padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: `radial-gradient(${T.accent} 1px, transparent 1px)`, backgroundSize: '28px 28px', opacity: .10 }} />
      <div aria-hidden style={{ position: 'absolute', top: -120, left: '12%', width: 380, height: 380, borderRadius: '50%', background: T.accent, opacity: .18, filter: 'blur(60px)' }} />
      <div aria-hidden style={{ position: 'absolute', bottom: -140, right: '10%', width: 340, height: 340, borderRadius: '50%', background: T.cta, opacity: .14, filter: 'blur(70px)' }} />
      <Container style={{ position: 'relative', textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, fontFamily: T.mono, fontSize: 12, color: T.cta, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>
          <span style={{ width: 28, height: 1.5, background: T.cta, opacity: .7 }} />
          Pense por um instante
        </div>
        <h2 style={{
          margin: '28px auto 0', maxWidth: 1180,
          fontFamily: T.font, fontSize: 56, lineHeight: 1.1, letterSpacing: '-0.03em',
          fontWeight: 400, color: 'rgba(251,247,240,0.78)',
          textWrap: 'balance',
        }}>
          Se seu time comercial tivesse <span style={{ color: '#fff', fontWeight: 700 }}>todos os scripts de vendas validados pelo próprio Conrado</span>, quanto você acha que o seu time venderia <em style={{ fontStyle: 'normal', color: T.cta, fontWeight: 700 }}>a mais por mês?</em>
        </h2>
      </Container>
    </section>
  );
}

const BENEFITS = [
  ['Padronização do discurso', 'Garante que todos os clientes recebam as informações corretas e que a mensagem principal da marca seja transmitida sem distorções.'],
  ['Redução do tempo de treinamento', 'Novos vendedores conseguem entender o processo, conhecer o produto e começar a falar com os clientes muito mais rápido.'],
  ['Aumento da confiança', 'Saber exatamente o que dizer a seguir reduz a ansiedade e o nervosismo do vendedor, transmitindo muito mais segurança ao cliente.'],
  ['Agilidade no atendimento', 'Com respostas e direções já mapeadas, o tempo de ligação ou reunião é otimizado, tornando a conversa mais objetiva e produtiva.'],
  ['Maior controle da conversa', 'O script ajuda o vendedor a guiar o cliente pelo funil de vendas, evitando que a conversa fuja do objetivo principal.'],
  ['Mapeamento e contorno de objeções', 'As principais dúvidas e resistências do cliente já são previstas, permitindo que o vendedor tenha argumentos prontos e eficazes.'],
  ['Identificação rápida de leads desqualificados', 'Ajuda a filtrar clientes que não têm o perfil ideal ou orçamento para o seu produto, economizando o tempo da equipe.'],
  ['Facilidade de testes e melhorias', 'Com um roteiro estruturado, fica mais fácil identificar qual parte do processo está falhando e testar novas abordagens para otimizar os resultados.'],
  ['Taxas de conversão mais altas', 'Ao eliminar os "brancos" durante a conversa e focar nos benefícios certos, o fechamento de negócios se torna um processo mais previsível.'],
  ['Aumento da produtividade', 'Com um caminho claro a seguir, a equipe gasta menos energia pensando em improvisos e pode focar em atender um volume maior de contatos.'],
];

function Benefits() {
  return (
    <section style={{ padding: '24px 0 80px', background: T.bg }}>
      <Container>
        <div style={{ marginBottom: 56, maxWidth: 920 }}>
          <h2 style={{ margin: 0, fontFamily: T.font, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 700, color: T.ink }}>
            O que o Copiloto vai fazer por você e sua empresa.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '24px 32px' }}>
          {BENEFITS.map(([title, body], i) => (
            <div key={title} style={{
              background: T.surface, border: `1px solid ${T.rule}`, borderRadius: 18,
              padding: '28px 28px 26px', display: 'grid',
              gridTemplateColumns: '52px 1fr', gap: 20, alignItems: 'start',
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: 14,
                background: T.accentSoft, color: '#4f3a1a',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: T.font, fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em',
              }}>{String(i+1).padStart(2,'0')}</div>
              <div>
                <h3 style={{ margin: 0, fontFamily: T.font, fontSize: 28, fontWeight: 700, color: T.ink, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
                  {title}
                </h3>
                <p style={{ margin: '10px 0 0', fontSize: 17, lineHeight: 1.55, color: T.inkSoft }}>
                  {body}
                </p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function WhoIsConrado() {
  return (
    <section style={{ padding: '80px 0 32px', background: T.bg }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 64, alignItems: 'start' }}>
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', inset: -10, borderRadius: 24,
              background: T.accentSoft, transform: 'rotate(3deg)',
            }} />
            <img src="assets/conrado-2.jpg" alt="Conrado Adolpho" style={{
              position: 'relative', width: '100%', aspectRatio: '4 / 5', objectFit: 'cover',
              borderRadius: 20, display: 'block',
              boxShadow: '0 24px 56px rgba(21,17,10,0.18)',
            }} />
            <div style={{
              position: 'absolute', bottom: -18, left: -18,
              background: T.ink, color: T.bg, padding: '14px 18px', borderRadius: 14,
              fontFamily: T.mono, fontSize: 12, letterSpacing: '0.08em',
              boxShadow: '0 12px 24px rgba(21,17,10,0.25)',
            }}>
              <div style={{ fontSize: 28, fontFamily: T.font, fontWeight: 700, letterSpacing: '-0.02em' }}>+R$100mi</div>
              <div style={{ opacity: .65 }}>EM VENDAS</div>
            </div>
          </div>
          <div>
            <Eyebrow>Quem é</Eyebrow>
            <h2 style={{ margin: '20px 0 0', fontFamily: T.font, fontSize: 56, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 700, color: T.ink }}>
              Conrado Adolpho.
            </h2>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 18, fontFamily: T.font, fontSize: 27, lineHeight: 1.45, color: T.inkSoft, fontWeight: 400, maxWidth: 720 }}>
              <p style={{ margin: 0 }}>
                Conrado Adolpho é <strong style={{ color: T.ink, fontWeight: 600 }}>empresário há 30 anos</strong>, <strong style={{ color: T.ink, fontWeight: 600 }}>vendedor há 41 anos</strong> e autor best-seller em marketing de livros usados em faculdades de negócios no Brasil e em Portugal.
              </p>
              <p style={{ margin: 0 }}>
                Conrado Adolpho já gerou <strong style={{ color: T.ink, fontWeight: 600 }}>mais de R$ 100 milhões em vendas</strong> ao longo da carreira e já ajudou <strong style={{ color: T.ink, fontWeight: 600 }}>mais de 70 mil empresas</strong> a venderem mais por meio de seu método.
              </p>
            </div>
            <div style={{ marginTop: 32, display: 'flex', flexWrap: 'wrap', gap: 28 }}>
              {[
                ['30', 'anos de empresário'],
                ['41', 'anos vendendo'],
                ['+70k', 'empresas treinadas'],
                ['+R$100mi', 'gerados em vendas'],
              ].map(([n, l]) => (
                <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{ fontFamily: T.font, fontSize: 28, fontWeight: 700, color: T.ink, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
                  <div style={{ fontFamily: T.mono, fontSize: 12, color: T.inkMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}