const { useEffect, useState } = React;

/* ============================================================
   Small helpers
   ============================================================ */
function useScrolled(threshold = 40) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return scrolled;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}});
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function Icon({ name, className }) {
  // Render a lucide element; lucide.createIcons() replaces <i data-lucide>
  return <i data-lucide={name} className={`icon ${className || ''}`} />;
}

/* Inline brand SVGs — lucide CDN dropped these. Stroked to match the 2.25 lucide weight. */
const BrandIcon = ({ name, className }) => {
  const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2.25, strokeLinecap: 'round', strokeLinejoin: 'round', className: `icon ${className || ''}` };
  if (name === 'instagram') return (
    <svg {...common}>
      <rect x="2" y="2" width="20" height="20" rx="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>);

  if (name === 'linkedin') return (
    <svg {...common}>
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect x="2" y="9" width="4" height="12" />
      <circle cx="4" cy="4" r="2" />
    </svg>);

  if (name === 'youtube') return (
    <svg {...common}>
      <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
      <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
    </svg>);

  return null;
};

/* ============================================================
   NAV
   ============================================================ */
function Nav() {
  const scrolled = useScrolled(60);
  const go = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <header className={`nav ${scrolled ? 'nav--scrolled' : ''}`} data-screen-label="Nav">
      <div className="nav__inner">
        <button className="nav__mark" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          <img src="assets/logos/cg-monogram.svg" alt="" />
          <span>Cesar Genehr</span>
        </button>
        <nav className="nav__links">
          <button className="nav__link" onClick={() => go('sobre')}>Sobre</button>
          <button className="nav__link" onClick={() => go('palestras')}>Palestras</button>
          <button className="nav__link" onClick={() => go('consultoria')}>Consultoria</button>
          <button className="nav__link" onClick={() => go('livros')}>Livros</button>
          <button className="nav__link" onClick={() => go('blog')}>Blog</button>
          <button className="nav__link" onClick={() => go('contato')}>Contato</button>
        </nav>
      </div>
    </header>);

}

/* ============================================================
   1 · HERO
   ============================================================ */
function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__bg" />
      <div className="hero__overlay" />
      <div className="container hero__content">
        <h1 className="hero__headline rise rise--d1" style={{ maxWidth: "22ch", fontFamily: "Inter", fontSize: "76px", width: "800px" }}>
          Vendas que dão <span className="hl">resultado.</span>
           Gestão que forma <span className="hl">pessoas.</span>
        </h1>

        <p className="hero__lead rise rise--d2" style={{ width: "700px" }}>
          Há mais de uma década
          ajuda empresas a construir equipes comerciais que batem meta sem destruir
          quem as compõe.
        </p>

        <div className="hero__cta rise rise--d3">
          <a className="btn" href="https://wa.me/5555999999999" target="_blank" rel="noreferrer">
            Falar no WhatsApp
            <Icon name="arrow-right" />
          </a>
          <span className="hero__microcopy">
</span>
        </div>

        <div className="hero__foot rise rise--d4">
          <span>Empresário</span>
          <span className="sep">|</span>
          <span>Palestrante</span>
          <span className="sep">|</span>
          <span>Escritor</span>
          <span className="sep">|</span>
          <span>Psicanalista</span>
          <span className="handle">@cesargenehr</span>
        </div>
      </div>
    </section>);
}

/* ============================================================
   2 · SOCIAL PROOF
   ============================================================ */
const CLIENTS = [
{ name: 'Agrotec Sul', cls: 'proof__logo--serif' },
{ name: 'Cooperativa Pampa', cls: 'proof__logo--sans' },
{ name: 'Grupo Vianna', cls: 'proof__logo--weight' },
{ name: 'Sicredi', cls: 'proof__logo--sans' },
{ name: 'Marcopolo', cls: 'proof__logo--weight' },
{ name: 'Randon', cls: 'proof__logo--serif' },
{ name: 'Grupo RBS', cls: 'proof__logo--sans' },
{ name: 'Fruki', cls: 'proof__logo--weight' }];


function Proof() {
  return (
    <section className="proof reveal" data-screen-label="02 Social Proof">
      <div className="container">
        <p className="proof__intro">
          <strong>Empresas que já trouxeram o Cesar para dentro.</strong>
        </p>
        <div className="proof__logos">
          {CLIENTS.map((c, i) =>
          <div key={i} className={`proof__logo ${c.cls}`}>{c.name}</div>
          )}
        </div>
        <div className="proof__nums">
          <div className="proof__num" style={{ margin: "32px" }}>
            <span className="big">+180</span>
            <p className="label">empresas atendidas</p>
          </div>
          <div className="proof__num" style={{ margin: "32px" }}>
            <span className="big">+12</span>
            <p className="label">anos de atuação</p>
          </div>
          <div className="proof__num" style={{ margin: "32px" }}>
            <span className="big">+300</span>
            <p className="label">palestras realizadas</p>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   3 · WHAT HE DOES
   ============================================================ */
function WhatHeDoes() {
  return (
    <section className="section reveal" data-screen-label="03 What He Does">
      <div className="container" style={{ textAlign: "left", letterSpacing: "0px" }}>
        <div className="section-head" style={{ textAlign: "left" }}>
          <div>
            <span className="eyebrow">Atuação</span>
            <h2 className="section-head__title" style={{ marginTop: 24, width: "788px" }}>
              Dois caminhos. Um mesmo <span className="hl">método.</span>
            </h2>
          </div>
        </div>
      </div>
      <div className="container">
        <div className="duo">
          <a id="palestras" className="duo__card" href="#palestras">
            <span className="eyebrow">
              <Icon name="mic" /> Palestras
            </span>
            <h3>Palestras que tiram a equipe do <span className="hl">automático.</span></h3>
            <p>
              Conteúdo construído para convenções, kick-offs e eventos corporativos.
              Temas que vão de performance em vendas a gestão de pessoas, sempre
              com aplicação imediata no dia seguinte.
            </p>
            <span className="link-arrow">
              Conhecer as palestras
              <Icon name="arrow-right" />
            </span>
          </a>

          <a id="consultoria" className="duo__card" href="#consultoria" style={{ flexDirection: "column" }}>
            <span className="eyebrow">
              <Icon name="user-round" /> Consultoria
            </span>
            <h3 style={{ width: "480px" }}>Consultoria para quem quer <span className="hl">destravar</span> o comercial.</h3>
            <p>
              Um trabalho próximo, presencial ou remoto, para estruturar o processo
              de vendas, desenvolver lideranças e transformar a equipe comercial em
              motor de crescimento.
            </p>
            <span className="link-arrow">
              Entender a consultoria
              <Icon name="arrow-right" />
            </span>
          </a>
        </div>
      </div>
    </section>);

}

/* ============================================================
   4 · OCTÓGONO DA SABEDORIA
   ============================================================ */
const PILARES = [
{ n: '01', t: 'Vendas', d: 'Processo, disciplina, previsibilidade. O fim do improviso como método.' },
{ n: '02', t: 'Liderança', d: 'Quem cobra meta também precisa formar gente — não apenas cobrar.' },
{ n: '03', t: 'Propósito', d: 'Saber para onde se vai antes de decidir com que velocidade correr.' },
{ n: '04', t: 'Comunicação', d: 'Dizer o que precisa ser dito, no tempo certo, sem perder o respeito.' },
{ n: '05', t: 'Saúde', d: 'Equipe boa é feita de gente inteira. Corpo que aguenta, cabeça que pensa.' },
{ n: '06', t: 'Família', d: 'O trabalho não é tudo. E quando é, normalmente algo mais importante desabou.' },
{ n: '07', t: 'Finanças', d: 'Liberdade financeira como ferramenta, não como troféu.' },
{ n: '08', t: 'Espiritualidade', d: 'Silêncio, escuta e a humildade de não ter todas as respostas.' }];


function Octogono() {
  return (
    <section id="metodo" className="section section--dark octogono reveal" data-screen-label="04 Octogono">
      <div className="octogono__pattern" />
      <div className="container">
        <div className="octogono__head">
          <span className="eyebrow">OCTÓGONO DA SABEDORIA</span>
          <h2 style={{ marginTop: 24 }}>
            Não falta tempo.<br />
            Falta <span className="hl">prioridade.</span>
          </h2>
          <p className="lead">
            O Octógono da Sabedoria é o método desenvolvido por Cesar ao longo de
            mais de uma década orientando equipes e lideranças. Oito pilares que
            conectam performance profissional com equilíbrio pessoal — porque
            equipe boa é feita de gente inteira, não de gente esgotada.
          </p>
        </div>

        <div className="octogono__grid">
          {PILARES.map((p) =>
          <div key={p.n} className="pillar">
              <span className="pillar__num">{p.n}</span>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          )}
        </div>

        <p className="octogono__close">
          É essa estrutura que sustenta cada palestra, cada consultoria, cada conversa.
        </p>
      </div>
    </section>);

}

/* ============================================================
   5 · TRAJECTORY
   ============================================================ */
const CAROUSEL = [
  'assets/photos/carrossel/cesar_pensando.JPG',
  'assets/photos/carrossel/cesar_terno_cinza.jpg',
  'assets/photos/carrossel/cesar_livro.jpg',
  'assets/photos/carrossel/palestra_wide.jpeg',
  'assets/photos/carrossel/palestra_close_up.jpeg',
  'assets/photos/carrossel/cesar_poltrona.jpg',
];

function Trajectory() {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setActive(i => (i + 1) % CAROUSEL.length), 3000);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="sobre" className="section trajectory reveal" data-screen-label="05 Trajectory">
      <div className="trajectory__portrait" aria-hidden="true">
        {CAROUSEL.map((src, i) => (
          <div
            key={src}
            className={`trajectory__slide${i === active ? ' trajectory__slide--active' : ''}`}
            style={{ backgroundImage: `url('${src}')` }}
          />
        ))}
      </div>
      <div className="container">
        <div className="trajectory__body">
            <span className="eyebrow">Quem é Cesar</span>
            <h2>De vendedor de brigadeiro a <span className="hl">consultor de empresas.</span></h2>
            <p>
              Começou vendendo doces nos eventos do CTG em Santa Maria. Passou por
              frigorífico, distribuição de folhetos, gestão de equipes comerciais.
              Em 2018, virou consultor. Em 2020, formalizou a empresa. Em 2024,
              lançou o primeiro livro. Em 2026, o segundo.
            </p>

            <div className="trajectory__timeline">
              <div className="trajectory__year">
                <span className="y">2018</span>
                <p className="what">Primeiros clientes de consultoria</p>
              </div>
              <div className="trajectory__year" style={{ padding: "20px 16px 0px" }}>
                <span className="y">2020</span>
                <p className="what">Empresa formalizada</p>
              </div>
              <div className="trajectory__year" style={{ padding: "20px 16px 0px" }}>
                <span className="y">2024</span>
                <p className="what">Primeiro livro</p>
              </div>
              <div className="trajectory__year" style={{ padding: "20px 0px 0px 16px" }}>
                <span className="y">2026</span>
                <p className="what">Segundo livro</p>
              </div>
            </div>

            <p className="trajectory__close">
              Tudo que ele ensina, aprendeu fazendo.
            </p>

            <a className="link-arrow" href="#sobre">
              Conhecer a história completa
              <Icon name="arrow-right" />
            </a>
          </div>
      </div>
    </section>);

}

/* ============================================================
   6 · BOOKS
   ============================================================ */
function Books() {
  return (
    <section id="livros" className="section reveal" data-screen-label="06 Books">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Escritor</span>
            <h2 className="section-head__title" style={{ marginTop: 24, width: "738px" }}>
              Quem ensina, <span className="hl">escreve.</span>
            </h2>
          </div>
          <p className="section-head__sub" style={{ height: "53px", width: "359px" }}>

          </p>
        </div>

        <div className="books__grid">
          <div className="book">
            <div className="book__cover book__cover--1">
              <span className="book__cover__mark"></span>
              <div>
                <div className="book__cover__title">Os Improváveis</div>
              </div>
              <span className="book__cover__author">Cesar Genehr</span>
            </div>
            <div className="book__info">
              <span className="eyebrow">Publicado · 2024</span>
              <h3>Os Improváveis</h3>
              <p>Disponível em todas as livrarias.</p>
              <a className="link-arrow" href="#comprar">
                Comprar
                <Icon name="arrow-right" />
              </a>
            </div>
          </div>

          <div className="book">
            <div className="book__cover book__cover--2">
              <span className="book__cover__mark"></span>
              <div>
                <div className="book__cover__title">Inexplicável é não ter Fé</div>
              </div>
              <span className="book__cover__author">Cesar Genehr</span>
            </div>
            <div className="book__info">
              <span className="eyebrow">Lançamento · 2026</span>
              <h3>Inexplicável é não ter Fé</h3>
              <p>Lançamento em breve.</p>
              <a className="link-arrow" href="#avisar">
                Quero ser avisado
                <Icon name="arrow-right" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   7 · TESTIMONIALS
   ============================================================ */
const TESTIMONIALS = [
{
  q: 'O Cesar não veio aqui fazer motivação de palco. Veio mexer no nosso processo, nas nossas reuniões de segunda, na forma como a gente cobra meta. Três meses depois, a equipe comercial tinha outro padrão.',
  name: 'Ricardo Menezes',
  role: 'Diretor Comercial, Agrotec Sul'
},
{
  q: 'Contratei a palestra esperando mais do mesmo. Saí com a equipe discutindo o Octógono no ônibus de volta. Virou pauta no nosso RH até hoje.',
  name: 'Juliana Kaefer',
  role: 'Gerente de Gente e Gestão, Cooperativa Pampa'
},
{
  q: 'A consultoria do Cesar não entrega relatório. Entrega uma equipe diferente. Isso é raro.',
  name: 'André Bertoldo',
  role: 'CEO, Grupo Vianna'
}];


function Testimonials() {
  return (
    <section className="section section--dark reveal" style={{ padding: '128px 0' }} data-screen-label="07 Testimonials">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 64 }}>
          <div>
            <span className="eyebrow">Depoimentos</span>
            <h2 className="section-head__title" style={{ marginTop: 24 }}>
              O que dizem quem <span className="hl">já viveu.</span>
            </h2>
          </div>
          <p className="section-head__sub" style={{ color: 'rgba(244,236,233,0.7)' }}>
            Três vozes. Três contextos. A mesma leitura: mudança concreta, não palco.
          </p>
        </div>
      </div>
      <div className="container">
        <div className="testimonials__grid">
          {TESTIMONIALS.map((t, i) =>
          <div key={i} className="testimonial">
              <div>
                <span className="testimonial__mark">&ldquo;</span>
                <p className="testimonial__quote">{t.q}</p>
              </div>
              <div className="testimonial__author">
                <span className="name">{t.name}</span>
                <span className="role">{t.role}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   8 · BLOG POSTS
   ============================================================ */
   const BLOG_POSTS = [
    {
      cat: 'Vendas',
      author: 'Cesar Genehr',
      date: '14 abr, 2026',
      read: '6 min',
      title: 'A reunião de segunda-feira está matando sua equipe comercial',
      excerpt: 'Quando virou ritual de cobrança, deixou de ser ferramenta de gestão. O que fazer no lugar.',
    },
    {
      cat: 'Liderança',
      author: 'Cesar Genehr',
      date: '02 abr, 2026',
      read: '8 min',
      title: 'Por que seu melhor vendedor virou seu pior gerente',
      excerpt: 'Promover por performance individual é o erro mais comum — e o mais caro — da gestão comercial brasileira.',
    },
    {
      cat: 'Método',
      author: 'Cesar Genehr',
      date: '21 mar, 2026',
      read: '5 min',
      title: 'Não falta tempo. Falta prioridade.',
      excerpt: 'Sobre o primeiro pilar do Octógono e por que toda agenda lotada é, no fundo, uma escolha mal feita.',
    },];
  
  function BlogPreview() {
    return (
      <section id="blog" className="section blog reveal" data-screen-label="08 Blog">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Blog</span>
              <h2 className="section-head__title" style={{ marginTop: 24 }}>
                Pensamentos em <span className="hl">voz alta.</span>
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
              <p className="section-head__sub">
                Ensaios curtos sobre vendas, liderança e a arte de não confundir pressa com prioridade.
              </p>
              <a className="link-arrow" href="#blog">
                Ver todos os ensaios
                <Icon name="arrow-right" />
              </a>
            </div>
          </div>
  
          <div className="blog__grid">
            {BLOG_POSTS.map((p, i) => (
              <a key={i} className="post" href="#post">
                <div className="post__thumb" data-i={i}>
                  <span className="post__cat">
                    <span className="post__cat-dot" />
                    {p.cat}
                  </span>
                </div>
                <div className="post__body">
                  <h3 className="post__title">{p.title}</h3>
                  <p className="post__excerpt">{p.excerpt}</p>
                </div>
                <div className="post__meta">
                  <span className="post__author">{p.author}</span>
                  <span className="post__sep">·</span>
                  <span>{p.date}</span>
                  <span className="post__sep">·</span>
                  <span className="post__read">
                    <Icon name="clock" />
                    {p.read}
                  </span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>);
  
  }

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <img src="assets/logos/cesar-genehr-horizontal.svg" alt="Cesar Genehr" />
            <p>Consultoria, palestras e escrita.<br /> Rio Grande do Sul · Brasil.</p>
          </div>
          <div className="footer__col">
            <h5>Navegar</h5>
            <ul>
              <li><a href="#sobre">Sobre</a></li>
              <li><a href="#palestras">Palestras</a></li>
              <li><a href="#consultoria">Consultoria</a></li>
              <li><a href="#livros">Livros</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#contato">Contato</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Contato</h5>
            <ul>
              <li><a href="mailto:contato@cesargenehr.com.br">contato@cesargenehr.com.br</a></li>
              <li><a href="tel:+5555900000000">(55) 9 0000 0000</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Redes</h5>
            <div className="footer__social">
              <a href="https://instagram.com/cesargenehr" aria-label="Instagram"><BrandIcon name="instagram" /></a>
              <a href="#" aria-label="LinkedIn"><BrandIcon name="linkedin" /></a>
              <a href="#" aria-label="YouTube"><BrandIcon name="youtube" /></a>
              <a href="mailto:cesar@cesargenehr.com.br" aria-label="Email"><Icon name="mail" /></a>
            </div>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Cesar Genehr</span>
          <span>Políticas de Privacidade</span>
        </div>
      </div>
    </footer>);
}

/* ============================================================
   APP
   ============================================================ */
function App() {
  useReveal();
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 2.25 } });
  });
  return (
    <>
      <Nav />
      <Hero />
      <div className="page-body">
        <Proof />
        <WhatHeDoes />
        <Octogono />
        <Trajectory />
        <Books />
        <Testimonials />
        <BlogPreview />
        <Footer />
      </div>
    </>);

}

Object.assign(window, { App });