/* PAGES: BLOG, CONTATO, SOBRE, CASE DETAIL, MKT DIGITAL */

const BlogPage = ({ onNav }) => {
  const [filter, setFilter] = React.useState('Todos');
  const filters = [['grid','Todos'],['brain','IA'],['workflow','Automação'],['monitor','Software'],['user','Vendas'],['cog','Operação'],['compass','Estratégia']];
  return (
    <div className="page-enter">
      <section style={{ padding: '60px 0 40px' }}>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-start' }}>
            <Reveal>
              <div className="eyebrow mb-5">Blog & Conteúdo</div>
              <h1 className="h-display mb-5">Ideias e práticas para transformar tecnologia em <span className="italic-accent">execução real.</span></h1>
              <p className="muted mb-6" style={{ fontSize: 17, maxWidth: 540 }}>
                Reflexões, frameworks e casos práticos sobre IA, automação, software e estratégia para gerar impacto no seu negócio.
              </p>
              <div className="flex flex-col gap-3">
                <span className="check-bullet">Conteúdo prático e aplicável</span>
                <span className="check-bullet">Experiência de mercado real</span>
                <span className="check-bullet">Foco em execução e resultado</span>
              </div>
            </Reveal>
            <div className="card" style={{ padding: 28, background: 'linear-gradient(180deg, #FFF0E6 0%, #FFFFFF 100%)' }}>
              <span className="tag mb-4">ARTIGO EM DESTAQUE</span>
              <div className="flex items-center gap-2 mb-3" style={{ fontSize: 12, color: '#6B6770' }}>
                <Icon name="play" size={12}/> 8 min de leitura
              </div>
              <h2 className="h-2 mb-3">IA aplicada à operação:<br/>do experimento ao <span className="italic-accent">impacto real.</span></h2>
              <p className="muted text-sm mb-4">Como sair da fase de testes e estruturar iniciativas de IA que geram eficiência, reduzem custos e criam vantagem competitiva.</p>
              <div className="flex gap-2 mb-5">
                {['IA','Automação','Estratégia'].map(t => <span key={t} className="chip" style={{ padding: '4px 10px', fontSize: 11 }}>{t}</span>)}
              </div>
              <div style={{ background: '#1A1C22', borderRadius: 12, height: 160, position: 'relative', overflow: 'hidden', marginBottom: 16, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="brain" size={64} color="#FF6B1A"/>
                <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, rgba(255,107,26,0.3), transparent 60%)' }}/>
              </div>
              <a className="tlink">Ler artigo completo <Icon name="arrow-right" size={14} className="arrow"/></a>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '20px 0' }}>
        <div className="container">
          <div className="flex gap-2 items-center" style={{ flexWrap: 'wrap' }}>
            {filters.map(([ic, l]) => (
              <button key={l} className={`chip${filter === l ? ' active' : ''}`} onClick={() => setFilter(l)}>
                <Icon name={ic} size={12}/> {l}
              </button>
            ))}
            <div style={{ marginLeft: 'auto', position: 'relative' }}>
              <input className="input" placeholder="Buscar conteúdo..." style={{ paddingLeft: 36, width: 220, padding: '8px 12px 8px 36px', fontSize: 13 }}/>
              <Icon name="search" size={14} className="abs" style={{ left: 12, top: 12, color: '#6B6770' }} color="#6B6770"/>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="grid grid-3 gap-4">
            {[
              ['AUTOMAÇÃO','Automação de processos: como começar do jeito certo','Um guia prático para mapear, priorizar e automatizar processos que realmente geram resultado.','14 de mai. de 2024','6 min de leitura', 0],
              ['ESTRATÉGIA','Dashboards que decidem: métricas que importam','Como estruturar painéis de gestão que trazem clareza, agilidade e foco para o seu time.','30 de abr. de 2024','7 min de leitura', 1],
              ['IA','5 aplicações de IA que já geram valor hoje','Exemplos práticos de como empresas estão usando IA para vender mais, atender melhor e reduzir custos.','22 de abr. de 2024','5 min de leitura', 2],
              ['SOFTWARE','Software sob medida: quando faz sentido investir','Os sinais de que sua empresa precisa de uma solução personalizada — e como conduzir o projeto com sucesso.','10 de abr. de 2024','6 min de leitura', 3],
              ['VENDAS','Processo comercial inteligente: menos esforço, mais resultado','Como estruturar um funil eficiente com CRM, automações e follow-ups que funcionam.','02 de abr. de 2024','6 min de leitura', 4],
              ['OPERAÇÃO','Indicadores operacionais: o que medir para melhorar','Métricas essenciais para acompanhar a performance da operação e tomar decisões com confiança.','25 de mar. de 2024','5 min de leitura', 5],
            ].map(([cat, t, d, dt, mn, i]) => (
              <Reveal key={t} className="card" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }}>
                <div style={{ height: 150, background: i % 2 === 0 ? '#1A1C22' : '#F1E0DA', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <BlogThumb i={i}/>
                  <span className="tag mb-4" style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(255,255,255,0.92)' }}>{cat}</span>
                </div>
                <div style={{ padding: 22 }}>
                  <h3 className="h-3 mb-3" style={{ fontSize: 18 }}>{t}</h3>
                  <p className="muted text-sm mb-4">{d}</p>
                  <div className="flex items-center gap-4" style={{ fontSize: 11.5, color: '#6B6770', paddingTop: 12, borderTop: '1px solid #F1E0DA' }}>
                    <span className="flex items-center gap-1"><Icon name="calendar" size={12}/> {dt}</span>
                    <span className="flex items-center gap-1"><Icon name="play" size={12}/> {mn}</span>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Series dark */}
      <section style={{ padding: '40px 32px' }}>
        <div className="container" style={{ background: 'var(--c-grafite)', borderRadius: 24, padding: 40 }}>
          <div className="grid" style={{ gridTemplateColumns: '1fr 1.6fr', gap: 40 }}>
            <div>
              <div className="eyebrow mb-3">Temas que eu exploro</div>
              <h2 className="h-2 mb-4" style={{ color: 'white' }}>Séries de conteúdo para aprofundar o que realmente <span className="italic-accent">importa.</span></h2>
              <p className="muted-on-dark mb-5">Aprofunde-se em trilhas de conhecimento com artigos conectados por um mesmo tema.</p>
              <a className="tlink">Ver todas as séries <Icon name="arrow-right" size={14}/></a>
            </div>
            <div className="grid grid-4 gap-3">
              {[
                ['brain','IA na prática','Aplicações, ferramentas e estratégias para usar IA com foco em resultado.','7 artigos'],
                ['workflow','Automação inteligente','Processos, integrações e sistemas que eliminam retrabalho e aumentam a eficiência.','9 artigos'],
                ['cube','Software e sistemas','Desenvolvimento, arquitetura e tecnologia para construir soluções que escalam.','6 artigos'],
                ['target','Estratégia e execução','Gestão, vendas, operação e indicadores para transformar estratégia em impacto real.','8 artigos'],
              ].map(([ic, t, d, n]) => (
                <div key={t} style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 14, padding: 18 }}>
                  <Icon name={ic} size={20} color="#FF6B1A" className="mb-3"/>
                  <div style={{ color: 'white', fontWeight: 600, fontSize: 14, marginBottom: 6 }}>{t}</div>
                  <p style={{ color: '#9A9591', fontSize: 11.5, lineHeight: 1.45, marginBottom: 10 }}>{d}</p>
                  <div style={{ color: '#FF6B1A', fontSize: 11 }}>{n}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Quem escreve */}
      <section className="section-tight">
        <div className="container">
          <div className="card" style={{ padding: 32 }}>
            <div className="grid" style={{ gridTemplateColumns: '180px 1fr auto', gap: 32, alignItems: 'center' }}>
              <div style={{
                width: 180, height: 180, borderRadius: 16, overflow: 'hidden',
                backgroundImage: `url(${YOHANN_PHOTO_PORTRAIT})`,
                backgroundSize: 'cover', backgroundPosition: 'center',
                flexShrink: 0
              }}/>
              <div>
                <div className="eyebrow mb-3">Quem escreve</div>
                <h3 className="h-3 mb-3">Yohann <span className="italic-accent">Escher</span></h3>
                <p className="muted text-sm" style={{ maxWidth: 480, marginBottom: 12 }}>
                  Especialista em IA, automação e sistemas. Compartilho aqui o que aprendo na prática conduzindo projetos que transformam operação em resultado.
                </p>
                <div className="flex gap-3" style={{ flexWrap: 'wrap' }}>
                  <span className="chip" style={{ fontSize: 11 }}>IA aplicada</span>
                  <span className="chip" style={{ fontSize: 11 }}>Automação</span>
                  <span className="chip" style={{ fontSize: 11 }}>Sistemas</span>
                </div>
              </div>
              <div className="flex flex-col gap-2">
                <button className="btn btn-primary" onClick={() => onNav('sobre')}>Conhecer mais <Icon name="arrow-right" size={14}/></button>
                <button className="btn btn-secondary" onClick={() => onNav('contato')} style={{ justifyContent: 'center' }}>Falar comigo</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section style={{ padding: '0 32px 64px' }}>
        <div className="container" style={{ background: 'white', border: '1px solid #E8DFD2', borderRadius: 24, padding: 32 }}>
          <div className="grid" style={{ gridTemplateColumns: 'auto 1fr auto', gap: 32, alignItems: 'center' }}>
            <div style={{ width: 80, height: 80, borderRadius: 16, background: '#FFF0E6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="mail" size={32} color="#FF6B1A"/>
            </div>
            <div>
              <h3 className="h-3 mb-2">Receba novos conteúdos no seu e-mail</h3>
              <p className="muted text-sm">Insights práticos sobre IA, automação, software e estratégia para você no dia a dia da sua operação.</p>
            </div>
            <div className="flex gap-2">
              <input className="input" placeholder="Seu melhor e-mail" style={{ width: 240 }}/>
              <button className="btn btn-primary">Inscrever-se <Icon name="arrow-right" size={14}/></button>
            </div>
          </div>
          <div style={{ marginTop: 16, fontSize: 12, color: '#6B6770', display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="shield" size={12}/> Sem spam. Você pode sair quando quiser.
          </div>
        </div>
      </section>
    </div>
  );
};

const BlogThumb = ({ i }) => {
  const items = [
    <svg key="0" width="80" height="80" viewBox="0 0 80 80"><rect x="20" y="20" width="40" height="40" rx="6" fill="#FF6B1A"/><circle cx="20" cy="20" r="4" fill="#FF6B1A" opacity="0.5"/><circle cx="60" cy="60" r="4" fill="#FF6B1A" opacity="0.5"/></svg>,
    <svg key="1" width="120" height="80" viewBox="0 0 120 80"><path d="M10 60 Q30 50 50 35 T110 10" stroke="#FF6B1A" strokeWidth="2" fill="none"/><circle cx="30" cy="40" r="14" fill="rgba(255,107,26,0.3)"/></svg>,
    <svg key="2" width="80" height="80" viewBox="0 0 80 80"><circle cx="40" cy="40" r="20" fill="rgba(255,107,26,0.4)"/><Icon name="brain" size={40}/></svg>,
    <svg key="3" width="80" height="80" viewBox="0 0 80 80"><rect x="10" y="20" width="60" height="40" rx="6" fill="#FF6B1A" opacity="0.7"/><text x="20" y="44" fill="white" fontFamily="monospace" fontSize="10">{`{ }`}</text></svg>,
    <div key="4" style={{ width: 100, height: 60, background: '#FF6B1A', borderRadius: 30, opacity: 0.7 }}/>,
    <svg key="5" width="100" height="60" viewBox="0 0 100 60"><rect x="0" y="20" width="100" height="20" fill="#FF6B1A" opacity="0.4"/><rect x="20" y="0" width="20" height="60" fill="#FF6B1A"/></svg>,
  ];
  return items[i] || items[0];
};

const ContatoPage = ({ onNav }) => (
  <div className="page-enter">
    <section style={{ padding: '60px 0 40px', position: 'relative' }}>
      <SunBurst size={300} className="abs" style={{ left: -60, bottom: 0 }} opacity={0.4}/>
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid" style={{ gridTemplateColumns: '1fr 1.05fr', gap: 56 }}>
          <Reveal>
            <div className="eyebrow mb-5">Contato</div>
            <h1 className="h-display mb-5">Vamos desenhar a próxima estrutura que gera <span className="italic-accent">resultado real.</span></h1>
            <p className="muted mb-6" style={{ fontSize: 17, maxWidth: 540 }}>
              Conte sobre o cenário do seu negócio, seus objetivos, principais gargalos e ideias. Vamos entender juntos como transformar tudo isso em impacto real.
            </p>
            <div className="flex gap-6 mb-6" style={{ flexWrap: 'wrap' }}>
              <div className="flex flex-col gap-1">
                <Icon name="message" size={20} color="#FF6B1A"/>
                <div style={{ fontSize: 12.5, color: '#6B6770' }}>Respostas em até</div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>1 dia útil</div>
              </div>
              <div className="flex flex-col gap-1">
                <Icon name="lock" size={20} color="#FF6B1A"/>
                <div style={{ fontSize: 12.5, color: '#6B6770' }}>Confidencialidade</div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>garantida</div>
              </div>
              <div className="flex flex-col gap-1">
                <Icon name="target" size={20} color="#FF6B1A"/>
                <div style={{ fontSize: 12.5, color: '#6B6770' }}>Soluções personalizadas</div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>para o seu contexto</div>
              </div>
            </div>
          </Reveal>
          <ContactForm/>
        </div>
      </div>
    </section>

    {/* O que esperar da conversa */}
    <section className="section-tight">
      <div className="container">
        <div className="grid grid-2 gap-8" style={{ alignItems: 'center' }}>
          <Reveal>
            <div style={{ position: 'relative' }}>
              <div className="photo-tinted" style={{ height: 500, borderRadius: 20 }}>
                <img src={YOHANN_GALLERY[4]} alt="Yohann em conversa"/>
              </div>
              <div style={{
                position: 'absolute', bottom: -16, right: -16,
                background: 'white', borderRadius: 14, padding: '14px 18px',
                boxShadow: '0 16px 36px rgba(20,14,8,0.12)',
                display: 'flex', alignItems: 'center', gap: 12
              }}>
                <Icon name="calendar" size={20} color="#FF6B1A"/>
                <div>
                  <div style={{ fontSize: 11, color: '#6B6770' }}>Primeira conversa</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>30 minutos · sem custo</div>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal>
            <div className="eyebrow mb-4">O que esperar</div>
            <h2 className="h-2 mb-4">Uma conversa <span className="italic-accent">objetiva</span> sobre o seu cenário.</h2>
            <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
              Não é uma reunião de venda. É uma conversa estratégica para entender seus desafios e te dar direção prática — mesmo que a gente não trabalhe junto depois.
            </p>
            <div className="flex flex-col gap-3 mb-6">
              {[
                ['eye','Diagnóstico inicial','Entender o cenário, gargalos e oportunidades reais do seu negócio.'],
                ['compass','Direção prática','Caminhos concretos que você pode aplicar — com ou sem mim.'],
                ['target','Próximos passos claros','Se fizer sentido seguirmos juntos, alinhamos escopo e plano de ação.'],
                ['shield','Sem compromisso','Você sai da conversa com clareza, mesmo que decida não contratar.'],
              ].map(([ic, t, d]) => (
                <div key={t} className="flex items-start gap-3">
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-orange-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={ic} size={18} color="#FF6B1A"/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, marginBottom: 2 }}>{t}</div>
                    <p className="muted text-sm">{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    <section style={{ padding: '20px 0 30px' }}>
      <div className="container">
        <div className="card" style={{ padding: 28, background: 'linear-gradient(120deg, #FFF0E6 0%, white 60%)' }}>
          <div className="flex items-center gap-5" style={{ flexWrap: 'wrap' }}>
            <div style={{
              width: 92, height: 92, borderRadius: '50%', overflow: 'hidden',
              backgroundImage: `url(${YOHANN_PHOTO_PORTRAIT_2})`,
              backgroundSize: 'cover', backgroundPosition: 'center',
              border: '3px solid white',
              boxShadow: '0 8px 20px rgba(20,14,8,0.1)',
              flexShrink: 0
            }}/>
            <div style={{ flex: 1, minWidth: 240 }}>
              <div className="eyebrow mb-2">Quem responde</div>
              <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 4 }}>
                Sou eu, <span className="italic-accent">Yohann</span> — pessoalmente.
              </div>
              <p className="muted text-sm" style={{ maxWidth: 540 }}>
                Toda mensagem é lida e respondida por mim. Sem intermediários, sem formulários genéricos. Vamos direto ao ponto que importa para o seu negócio.
              </p>
            </div>
            <div className="flex items-center gap-2" style={{ fontSize: 12, color: '#6B6770' }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: '#67A765', boxShadow: '0 0 0 3px rgba(103,167,101,0.2)' }}/>
              Online agora
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="section-tight">
      <div className="container">
        <h2 className="h-3 mb-6">Outras formas de contato</h2>
        <div className="grid grid-3 gap-4">
          {[
            { ic: 'whatsapp', t: 'Fale no WhatsApp', d: 'Converse diretamente e tire suas dúvidas com agilidade.', l: 'Abrir conversa', action: () => window.open('https://wa.me/5562998550007', '_blank') },
            { ic: 'mail', t: 'Envie um e-mail', d: 'Detalhe seu projeto e receba um retorno por e-mail.', l: 'contato@yohannescher.com.br', action: () => window.location.href = 'mailto:contato@yohannescher.com.br' },
            { ic: 'calendar', t: 'Agende uma conversa', d: 'Marque uma sessão rápida para alinharmos seu cenário.', l: 'Agendar agora', action: () => window.open('https://wa.me/5562998550007', '_blank') },
          ].map((c) => (
            <div key={c.t} className="card flex items-start gap-4" onClick={c.action} style={{ cursor: 'pointer' }}>
              <div style={{ width: 50, height: 50, borderRadius: 12, background: '#FFF0E6', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={c.ic} size={22} color="#FF6B1A"/>
              </div>
              <div>
                <div style={{ fontWeight: 600, marginBottom: 4 }}>{c.t}</div>
                <p className="muted text-sm mb-3">{c.d}</p>
                <a className="tlink">{c.l} <Icon name="arrow-right" size={12} className="arrow"/></a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="section-tight">
      <div className="container">
        <h2 className="h-3 mb-6">Como é trabalhar comigo</h2>
        <div className="card" style={{ padding: 32 }}>
          <div className="grid grid-4 gap-6" style={{ position: 'relative' }}>
            {[['user','Entendimento','Conheço seu cenário, objetivos, desafios e prioridades para ter clareza do contexto.'],
              ['search','Diagnóstico','Analiso dados, processos e pessoas para identificar causas raiz e oportunidades de impacto.'],
              ['doc','Proposta','Apresento um plano estratégico com soluções, metas, prazos e indicadores claros.'],
              ['rocket','Implementação','Coloco o plano em prática com acompanhamento próximo e foco em resultados sustentáveis.']].map(([ic, t, d], i) => (
              <div key={t} style={{ position: 'relative' }}>
                <div className="flex items-center gap-3 mb-4">
                  <div className="num-badge">0{i+1}</div>
                  {i < 3 && <div style={{ flex: 1, height: 1, borderTop: '1px dashed #FF6B1A' }}/>}
                </div>
                <Icon name={ic} size={22} color="#FF6B1A" className="mb-3"/>
                <div style={{ fontWeight: 600, marginBottom: 6 }}>{t}</div>
                <p className="muted text-sm">{d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    <FAQSection items={[
      ['Quais tipos de empresas você atende?', 'Atendo PMEs, startups e times de empresas maiores em busca de eficiência e escala.'],
      ['Em quanto tempo recebo um retorno?', 'Em até 1 dia útil após o envio do formulário.'],
      ['Como funciona a primeira conversa?', 'Uma conversa de 30 minutos para entender seu cenário e direcionar próximos passos.'],
      ['Como são definidos os honorários?', 'A partir do escopo, complexidade e duração do projeto. Sempre transparente.'],
      ['Vocês trabalham com projetos pontuais ou contínuos?', 'Ambos. Trabalho com projetos pontuais e parcerias contínuas de evolução.'],
      ['Minha informação está segura?', 'Sim. Toda informação é tratada com confidencialidade e segurança.'],
    ]}/>

    <FinalCTA onNav={onNav}/>
  </div>
);

const ContactForm = () => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ nome: '', empresa: '', objetivo: '', desafio: '', mensagem: '' });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3000);
  };
  return (
    <form className="card" onSubmit={submit} style={{ padding: 32, position: 'relative' }}>
      <SparkStar size={18} className="abs" style={{ top: 24, right: 24 }}/>
      <h3 className="h-3 mb-2">Envie sua mensagem</h3>
      <p className="muted text-sm mb-5">Preencha o formulário e receba um retorno personalizado.</p>

      <label className="label">Nome</label>
      <input className="input mb-4" placeholder="Seu nome completo" value={form.nome} onChange={e => setForm({...form, nome: e.target.value})}/>

      <label className="label">Empresa</label>
      <input className="input mb-4" placeholder="Nome da sua empresa" value={form.empresa} onChange={e => setForm({...form, empresa: e.target.value})}/>

      <label className="label">Objetivo principal</label>
      <select className="select mb-4" value={form.objetivo} onChange={e => setForm({...form, objetivo: e.target.value})}>
        <option value="">Selecione o que melhor descreve seu objetivo</option>
        <option>Automatizar processos</option>
        <option>Aplicar IA ao negócio</option>
        <option>Construir um sistema sob medida</option>
        <option>Estruturar marketing/vendas</option>
        <option>Outro</option>
      </select>

      <label className="label">Qual desafio você quer resolver?</label>
      <input className="input mb-4" placeholder="Conte sobre o principal desafio ou oportunidade"/>

      <label className="label">Como posso ajudar?</label>
      <textarea className="textarea mb-5" placeholder="Fale sobre o contexto, metas e expectativas"/>

      <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
        {sent ? '✓ Mensagem enviada com sucesso' : <>Enviar mensagem <Icon name="arrow-right" size={16} className="arrow"/></>}
      </button>
      <div style={{ marginTop: 12, fontSize: 11.5, color: '#6B6770', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
        <Icon name="shield" size={12}/> Suas informações estão seguras conosco.
      </div>
    </form>
  );
};

const SobrePage = ({ onNav }) => (
  <div className="page-enter">
    <section style={{ padding: '60px 0 40px', position: 'relative' }}>
      <SunBurst size={400} className="abs" style={{ right: -100, top: 100 }} opacity={0.4}/>
      <div className="container">
        <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow mb-5">Sobre</div>
            <h1 className="h-display mb-5">Estratégia, sistema e IA para transformar operação em <span className="italic-accent">resultado real.</span></h1>
            <p className="muted mb-6" style={{ fontSize: 17, maxWidth: 540 }}>
              Acredito que tecnologia só faz sentido quando resolve problemas reais e gera liberdade. Transformo estratégia em sistemas, sistemas em automações, automações em resultados.
            </p>
            <div className="flex gap-3 mb-6" style={{ flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => onNav('contato')}>Falar comigo <Icon name="arrow-right" size={16}/></button>
              <button className="btn btn-secondary" onClick={() => onNav('metodo')}>Ver método</button>
            </div>
          </Reveal>
          <div style={{ position: 'relative', height: 480 }}>
            <div className="photo-tinted" style={{ height: 460, width: '78%' }}>
              <img src={YOHANN_PHOTO_PORTRAIT} alt="Yohann Escher"/>
            </div>
            <div style={{
              position: 'absolute', bottom: 0, right: 0,
              width: 180, height: 230,
              borderRadius: 16, overflow: 'hidden',
              border: '6px solid var(--c-bege-claro)',
              backgroundImage: `url(${YOHANN_PHOTO_PORTRAIT_2})`,
              backgroundSize: 'cover', backgroundPosition: 'center',
              boxShadow: '0 16px 40px rgba(20,14,8,0.18)'
            }}/>
            <div style={{
              position: 'absolute', top: 24, left: -20,
              background: 'white', borderRadius: 14, padding: '12px 16px',
              boxShadow: '0 12px 30px rgba(20,14,8,0.1)',
              display: 'flex', alignItems: 'center', gap: 10
            }}>
              <SparkStar size={16}/>
              <div>
                <div style={{ fontSize: 11, color: '#6B6770' }}>Disponível para</div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>novos projetos</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="section-tight">
      <div className="container">
        <div className="grid grid-2 gap-8">
          <div>
            <h2 className="h-2 mb-5">Manifesto da <span className="italic-accent">marca.</span></h2>
            <div className="muted" style={{ fontSize: 15.5, lineHeight: 1.65 }}>
              <p className="mb-4">Acredito que tecnologia só faz sentido quando resolve problemas reais e gera liberdade.</p>
              <p className="mb-4">Transformo estratégia em sistemas. Sistemas em automações. Automações em resultados.</p>
              <p className="mb-4">Não entrego ferramentas. Entrego estrutura, clareza e evolução.</p>
              <p className="mb-4">Meu compromisso é com a eficiência inteligente, com a operação que funciona e o crescimento que se sustenta.</p>
              <p>Tecnologia sem estratégia vira solução solta. <strong>Estratégia com execução vira resultado real.</strong></p>
            </div>
          </div>
          <div>
            <div className="grid grid-2 gap-3">
              {[
                ['target','Posicionamento','Estratégia, sistemas, automação e IA para transformar operação em resultado real.'],
                ['users','Público','Empresas e profissionais que buscam eficiência, clareza e crescimento sustentável.'],
                ['star','Promessa','Estruturar, automatizar e escalar o que realmente gera valor no seu negócio.'],
                ['cog','Entrega','Sistemas, automações, IA, marketing inteligente, dashboards, site e estratégia em execução.'],
                ['sparkles','Diferencial','União entre estratégia, tecnologia e execução. Tudo conectado para gerar resultado real.'],
              ].map(([ic, t, d]) => (
                <div key={t} className="card" style={{ padding: 18 }}>
                  <Icon name={ic} size={18} color="#FF6B1A" className="mb-3"/>
                  <div style={{ fontWeight: 600, marginBottom: 4, fontSize: 14 }}>{t}</div>
                  <p className="muted text-sm" style={{ fontSize: 12.5 }}>{d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>

    <section style={{ padding: '40px 32px' }}>
      <div className="container" style={{ background: 'var(--c-grafite)', borderRadius: 24, padding: 40 }}>
        <div className="text-center mb-8">
          <div className="eyebrow mb-3" style={{ justifyContent: 'center', display: 'inline-flex' }}>Tom de voz</div>
          <h2 className="h-2" style={{ color: 'white' }}>Comunicação <span className="italic-accent">premium</span>, simples e elegante.</h2>
        </div>
        <div className="grid grid-5 gap-4">
          {[
            ['target','Estratégico','Foco em direção, clareza e resultado.'],
            ['user','Humano','Conversamos com pessoas, não com números.'],
            ['cog','Tecnológico','Usamos tecnologia como alavanca de negócio.'],
            ['chart','Prático','Sem enrolação. Foco no que importa.'],
            ['sparkles','Sofisticado','Comunicação premium, simples e elegante.'],
          ].map(([ic, t, d]) => (
            <div key={t} className="text-center">
              <div style={{ width: 56, height: 56, borderRadius: 14, background: 'rgba(255,107,26,0.12)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                <Icon name={ic} size={22} color="#FF6B1A"/>
              </div>
              <div style={{ color: 'white', fontWeight: 600, marginBottom: 6 }}>{t}</div>
              <p style={{ color: '#9A9591', fontSize: 12.5, lineHeight: 1.5 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Como eu trabalho */}
    <section className="section-tight">
      <div className="container">
        <div className="grid grid-2 gap-8" style={{ alignItems: 'center' }}>
          <Reveal>
            <div style={{ height: 540, display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
              <img 
                src={YOHANN_GALLERY[3]} 
                alt="Yohann no dia a dia" 
                style={{ maxHeight: '100%', width: 'auto', objectFit: 'contain' }}
              />
            </div>
          </Reveal>
          <Reveal>
            <div className="eyebrow mb-4">Como eu trabalho</div>
            <h2 className="h-2 mb-4">Proximidade, clareza e <span className="italic-accent">foco no resultado.</span></h2>
            <p className="muted mb-6" style={{ fontSize: 16, maxWidth: 500 }}>
              Acredito que os melhores resultados nascem da combinação entre estratégia clara, execução disciplinada e relação próxima com quem confia em mim para conduzir um projeto.
            </p>
            <div className="flex flex-col gap-3 mb-6">
              {[
                ['user','Atendimento direto','Sem intermediários. Você fala comigo do primeiro ao último dia.'],
                ['lightbulb','Pensamento estratégico','Cada decisão técnica conectada ao impacto que ela gera no negócio.'],
                ['lock','Confidencialidade total','Tudo que você compartilha comigo é tratado com sigilo absoluto.'],
                ['star','Compromisso com a entrega','Prazo combinado é prazo entregue. Sempre.'],
              ].map(([ic, t, d]) => (
                <div key={t} className="flex items-start gap-3">
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-orange-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={ic} size={18} color="#FF6B1A"/>
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, marginBottom: 2 }}>{t}</div>
                    <p className="muted text-sm">{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Bastidores - galeria de fotos */}
    <section className="section-tight">
      <div className="container">
        <div className="flex items-end justify-between mb-6" style={{ flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div className="eyebrow mb-3">Bastidores</div>
            <h2 className="h-2">Por trás do <span className="italic-accent">trabalho.</span></h2>
            <p className="muted mt-3" style={{ maxWidth: 540 }}>
              Mais que entregar projetos, construir relações, compartilhar ideias e estar perto de quem confia em mim.
            </p>
          </div>
        </div>
      <div style={{ overflow: 'hidden', padding: '20px 0' }}>
        <div className="marquee-track">
          {[...YOHANN_GALLERY.slice(7, 12), ...YOHANN_GALLERY.slice(7, 12)].map((src, i) => (
            <div 
              key={i} 
              className="marquee-item" 
              style={{ backgroundImage: `url(${src})` }}
            />
          ))}
        </div>
      </div>
      </div>
    </section>

    <FinalCTA onNav={onNav}/>
  </div>
);

window.BlogPage = BlogPage;
window.ContatoPage = ContatoPage;
window.SobrePage = SobrePage;