/* global React */
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

/* ============================================
   Problem
   ============================================ */
function Problem() {
  const cards = [
    { n: "01", q: "Tenho ideias demais e direção de menos." },
    { n: "02", q: "Compro curso, leio livro, e a empresa continua igual." },
    { n: "03", q: "Não sei o que é prioridade na próxima segunda-feira." },
    { n: "04", q: "Falta disciplina. Não falta vontade." }
  ];
  return (
    <section className="section section--light" id="problema">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">01 / Problema</span>
          <h2 className="title">
            Você não está perdido.<br/>
            Você está <em>sem governo</em>.
          </h2>
          <p className="lede lede--light">
            A maioria dos empreendedores não falha por falta de ideia.
            Falha por falta de plano, ritmo e confiabilidade. Soa familiar?
          </p>
        </div>
        <div className="problem-grid">
          {cards.map((c) => (
            <div key={c.n} className="problem-card">
              <span className="problem-card__num">{c.n}</span>
              <p className="problem-card__quote">{c.q}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Solution / Manifesto
   ============================================ */
function Solution() {
  return (
    <section className="section section--dark" id="solucao">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">02 / Solução</span>
          <p className="manifesto__big">
            Você não precisa de mais <span className="strike">conteúdo</span>.<br/>
            Precisa de <span className="gold">direção, execução e governo.</span>
          </p>
        </div>

        <div className="manifesto__pillars">
          <div className="pillar">
            <span className="pillar__num">→ DIREÇÃO</span>
            <h3 className="pillar__title">Sabe para onde ir.</h3>
            <p className="pillar__body">
              Diagnóstico do negócio em minutos. Mapa claro do que está travando o crescimento — e do que vem antes.
            </p>
          </div>
          <div className="pillar">
            <span className="pillar__num">→ EXECUÇÃO</span>
            <h3 className="pillar__title">Sabe o que fazer.</h3>
            <p className="pillar__body">
              Plano de ação 30/90/180 dias com tarefas semanais. Sem ambiguidade. Pronto para abrir e executar.
            </p>
          </div>
          <div className="pillar">
            <span className="pillar__num">→ GOVERNO</span>
            <h3 className="pillar__title">Mantém o ritmo.</h3>
            <p className="pillar__body">
              Check-ins inteligentes, metas mensuráveis e princípios bíblicos aplicados às decisões — todos os dias.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   How It Works
   ============================================ */
function HowItWorks() {
  const steps = [
    { n: "i", t: "Diagnóstico", b: "Em 7 minutos você responde à entrevista do Jethro. Ele entende seu modelo, fase, dor e meta.", tag: "Etapa 01 · 7 min" },
    { n: "ii", t: "Plano", b: "Você recebe o plano 30/90/180 dias. Tarefas semanais, prioridades claras, métricas que importam.", tag: "Etapa 02 · 1 dia" },
    { n: "iii", t: "Execução", b: "Cada manhã, Jethro entrega o que importa hoje. Sem ruído. Sem 200 abas abertas.", tag: "Etapa 03 · diário" },
    { n: "iv", t: "Governo", b: "Check-in semanal, ajuste de rota, princípios bíblicos aplicados às decisões difíceis.", tag: "Etapa 04 · contínuo" }
  ];
  return (
    <section className="section section--ice" id="como">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--light">03 / Como funciona</span>
          <h2 className="title">Quatro passos. <em>Sem complexidade.</em></h2>
          <p className="lede lede--light">
            Um fluxo simples, repetido com disciplina. É isso que separa empresa que cresce de empresa que se arrasta.
          </p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className="step">
              <div className="step__num">{s.n}</div>
              <h3 className="step__title">{s.t}</h3>
              <p className="step__body">{s.b}</p>
              <span className="step__tag">{s.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Features (bento grid)
   ============================================ */
function Features() {
  return (
    <section className="section section--dark" id="recursos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">04 / Recursos</span>
          <h2 className="title">Um produto. <em>Tudo o que falta para executar.</em></h2>
        </div>

        <div className="features">
          <div className="feature feature--span2">
            <span className="feature__label">→ Mentor com IA</span>
            <h3 className="feature__title">Conversa que responde como mentor — não como chatbot.</h3>
            <p className="feature__body">
              Jethro conhece seu negócio, sua fase e suas metas. Pergunte qualquer coisa. Ele responde com direção, não com lista de bullets.
            </p>
            <div className="chat">
              <div className="chat__bubble chat__bubble--user">Estou perdendo cliente para concorrência mais barata. O que faço?</div>
              <div className="chat__bubble chat__bubble--bot">Antes de baixar preço: revise sua oferta. Em 9 de 10 casos o problema é percepção de valor, não tabela. Vamos auditar sua proposta agora?</div>
            </div>
          </div>

          <div className="feature feature--tall">
            <span className="feature__label">→ Plano 30/90/180</span>
            <h3 className="feature__title">Tarefas que mudam a empresa, não a planilha.</h3>
            <p className="feature__body">Prioridades claras por semana. Sem ambiguidade.</p>
            <div className="mock">
              <div className="mock__row">
                <span className="mock__dot mock__dot--done"></span>
                <span className="mock__text mock__text--strike">Definir oferta âncora</span>
                <span className="mock__time">SEG</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot mock__dot--done"></span>
                <span className="mock__text mock__text--strike">Script de qualificação</span>
                <span className="mock__time">TER</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot"></span>
                <span className="mock__text">Auditar funil de vendas</span>
                <span className="mock__time">QUA</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot mock__dot--idle"></span>
                <span className="mock__text">Definir KPI mensal</span>
                <span className="mock__time">QUI</span>
              </div>
              <div className="mock__row">
                <span className="mock__dot mock__dot--idle"></span>
                <span className="mock__text">Reunião de governo</span>
                <span className="mock__time">SEX</span>
              </div>
            </div>
          </div>

          <div className="feature">
            <span className="feature__label">→ Diagnóstico</span>
            <h3 className="feature__title">Raio-X do negócio em 7 minutos.</h3>
            <p className="feature__body">Aponta o que está travando o crescimento — e o que vem antes.</p>
          </div>

          <div className="feature">
            <span className="feature__label">→ Biblioteca</span>
            <h3 className="feature__title">Scripts, templates, calculadoras.</h3>
            <p className="feature__body">Vendas, marketing, gestão. Pronto para usar hoje.</p>
          </div>

          <div className="feature feature--span2">
            <span className="feature__label">→ Princípios + Check-in</span>
            <h3 className="feature__title">Sabedoria que decide. Ritmo que mantém.</h3>
            <p className="feature__body">
              Princípios bíblicos aplicados ao negócio com clareza empresarial. Check-ins semanais que mantêm você no jogo, mesmo nas semanas em que tudo quer te tirar.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, Solution, HowItWorks, Features });