// === PAGE SECTIONS ===
const { useState: useS, useEffect: useE, useRef: useR } = React;

/* =============== MANIFESTO / QUEM SOMOS =============== */
function Manifesto() {
  return (
    <section className="manifesto" id="manifesto">
      <div className="container">
        <div className="manifesto-grid">
          <div className="reveal">
            <div className="eyebrow">Quem somos · 01</div>
          </div>
          <div className="manifesto-text">
            <h2 className="serif reveal" data-delay="1">
              Processos que <em>respiram</em>,<br/>
              operação que entrega.
            </h2>
            <p className="reveal" data-delay="2">
              Somos uma consultoria de melhoria e automação de processos operacionais.
              Entramos em operações complexas, <strong>redesenhamos o fluxo, automatizamos as etapas
              repetitivas</strong>, construimos sistema próprio quando o problema se repete entre clientes,
              e permanecemos até o time do cliente operar sozinho.
            </p>
            <div className="manifesto-pillars">
              <Pillar n="01" title="Método" desc="Diagnóstico, desenho e execução documentados. Nada de consultoria que acaba em slide." />
              <Pillar n="02" title="Autonomia" desc="Transferimos conhecimento enquanto entregamos. Seu time sai mais forte do projeto." />
              <Pillar n="03" title="Resultado" desc="Indicadores acordados antes de começar. Mensurados durante. Auditados depois." />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pillar({ n, title, desc }) {
  return (
    <div className="pillar reveal" data-delay="3">
      <div className="pillar-n mono">{n}</div>
      <h3 className="pillar-title serif">{title}</h3>
      <p className="pillar-desc">{desc}</p>
    </div>
  );
}

/* =============== COMO FUNCIONA =============== */
function ComoFunciona() {
  const [active, setActive] = useS(0);
  const steps = [
    {
      n: '01',
      label: 'Diagnosticar',
      t: 'Entender o processo como ele é hoje.',
      d: 'Mapeamos o fluxo real — não o documentado. Conversamos com quem executa, medimos tempo, custo e retrabalho, identificamos gargalos e pontos de controle que não existem.',
      bullets: ['Mapeamento do processo as-is', 'Entrevistas com operadores e gestores', 'Medição de tempo, custo e retrabalho', 'Diagnóstico com oportunidades priorizadas']
    },
    {
      n: '02',
      label: 'Redesenhar e automatizar',
      t: 'Desenhar como deveria ser. E executar.',
      d: 'Redesenhamos o processo to-be, definimos indicadores, e automatizamos o que faz sentido automatizar. Usamos ferramenta de mercado quando existe; construímos sistema próprio quando o problema se repete.',
      bullets: ['Processo to-be documentado', 'Automações em produção', 'Sistemas próprios quando necessário', 'Treinamento do time operacional']
    },
    {
      n: '03',
      label: 'Acompanhar',
      t: 'Ficar até o time operar sozinho.',
      d: 'Não entregamos relatório e sumimos. Acompanhamos a operação rodando, ajustamos o que precisa ajuste, transferimos conhecimento. Só saímos quando o time do cliente está seguro.',
      bullets: ['Acompanhamento da operação em produção', 'Ajustes contínuos no processo e automações', 'Transferência de conhecimento', 'Saída planejada com autonomia do cliente']
    },
  ];

  return (
    <section className="como" id="como">
      <div className="container">
        <header className="section-head reveal">
          <div className="eyebrow">Metodologia · 02</div>
          <h2 className="serif section-title">
            Como a gente<br/>
            faz a <em>mágica</em> acontecer.
          </h2>
          <p className="section-lead">
            Três etapas. Sem papo de transformação digital. Método aplicado, documentável, auditado.
          </p>
        </header>

        <div className="como-wrap reveal" data-delay="1">
          <div className="como-nav">
            {steps.map((s, i) => (
              <button
                key={i}
                className={`como-nav-btn ${active===i?'on':''}`}
                onClick={()=>setActive(i)}
              >
                <span className="como-nav-n mono">{s.n}</span>
                <span className="como-nav-label">{s.label}</span>
                <span className="como-nav-bar"><span style={{width: active===i?'100%':'0'}}/></span>
              </button>
            ))}
          </div>

          <div className="como-panel">
            <div className="como-panel-left">
              <div className="como-step-n serif">{steps[active].n}</div>
              <h3 className="como-step-t serif">{steps[active].t}</h3>
              <p className="como-step-d">{steps[active].d}</p>
              <ul className="como-step-bullets">
                {steps[active].bullets.map((b, i) => (
                  <li key={i} className="mono"><span>+</span>{b}</li>
                ))}
              </ul>
            </div>
            <div className="como-panel-right">
              <ComoVisual step={active} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ComoVisual({ step }) {
  // Visualizações para cada etapa
  if (step === 0) return <DiagnosticoViz />;
  if (step === 1) return <DesenhoViz />;
  if (step === 2) return <ImplementacaoViz />;
  if (step === 3) return <ControleViz />;
  return null;
}

function DiagnosticoViz() {
  return (
    <div className="viz viz-diag">
      <div className="viz-label mono">SCAN EM ANDAMENTO</div>
      <svg viewBox="0 0 400 320" width="100%" height="100%">
        <defs>
          <linearGradient id="scan-g" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {/* Nodes */}
        {[
          {x:80,y:80,l:'VENDAS'},{x:200,y:60,l:'FINANC.'},{x:320,y:100,l:'LOG.'},
          {x:100,y:180,l:'RH'},{x:230,y:200,l:'TI'},{x:340,y:220,l:'CS'},
          {x:150,y:280,l:'COMPRAS'},
        ].map((n,i) => (
          <g key={i}>
            <circle cx={n.x} cy={n.y} r="18" fill="var(--bg-3)" stroke="var(--line-2)"/>
            <circle cx={n.x} cy={n.y} r="4" fill="var(--accent)">
              <animate attributeName="opacity" values="1;0.2;1" dur="2s" begin={`${i*0.2}s`} repeatCount="indefinite"/>
            </circle>
            <text x={n.x} y={n.y+35} fontFamily="JetBrains Mono" fontSize="9" fill="var(--fg-dim)" textAnchor="middle">{n.l}</text>
          </g>
        ))}
        {/* connections */}
        <g stroke="var(--line-2)" fill="none" strokeDasharray="2 3">
          <path d="M 80 80 L 200 60"/><path d="M 200 60 L 320 100"/>
          <path d="M 80 80 L 100 180"/><path d="M 200 60 L 230 200"/>
          <path d="M 320 100 L 340 220"/><path d="M 100 180 L 230 200"/>
          <path d="M 230 200 L 340 220"/><path d="M 100 180 L 150 280"/>
          <path d="M 230 200 L 150 280"/>
        </g>
        {/* Scan bar */}
        <rect x="0" y="0" width="400" height="60" fill="url(#scan-g)">
          <animate attributeName="y" values="-60;320" dur="3s" repeatCount="indefinite"/>
        </rect>
      </svg>
      <div className="viz-foot mono">7 áreas · 34 processos · 128 pontos de contato</div>
    </div>
  );
}

function DesenhoViz() {
  return (
    <div className="viz viz-desenho">
      <div className="viz-split">
        <div className="viz-half">
          <div className="viz-half-label mono">ANTES</div>
          <div className="viz-flow-bad">
            {['Pedido','Aprovação','Aprovação','Aprovação','Sistema A','Planilha','Sistema B','Email','Cliente'].map((s,i)=>(
              <div className="flow-node bad" key={i}>{s}</div>
            ))}
          </div>
        </div>
        <div className="viz-arrow serif">→</div>
        <div className="viz-half">
          <div className="viz-half-label mono accent">DEPOIS</div>
          <div className="viz-flow-good">
            {['Pedido','Aprovação auto','Integração','Cliente'].map((s,i)=>(
              <div className="flow-node good" key={i}>{s}</div>
            ))}
          </div>
        </div>
      </div>
      <div className="viz-foot mono">9 etapas → 4 etapas · 72h → 4h</div>
    </div>
  );
}

function ImplementacaoViz() {
  const [tick, setTick] = useS(0);
  useE(() => {
    const id = setInterval(() => setTick(t => (t+1) % 100), 60);
    return () => clearInterval(id);
  }, []);
  const lines = [
    '> conectando ao ERP...',
    '> OK',
    '> mapeando 34 processos...',
    '> 34/34 OK',
    '> construindo automações [■■■■■■■■■■] 100%',
    '> testando em ambiente staging...',
    '> OK · 0 falhas',
    '> deploy em produção...',
    '> LIVE ✓',
  ];
  const visible = Math.min(lines.length, Math.floor(tick / 10));

  return (
    <div className="viz viz-impl">
      <div className="viz-term">
        <div className="viz-term-head">
          <span/><span/><span/>
          <span className="mono">thinkprocess.deploy</span>
        </div>
        <div className="viz-term-body mono">
          {lines.slice(0, visible).map((l, i) => (
            <div key={i} className={l.includes('OK') || l.includes('LIVE') ? 'success' : ''}>{l}</div>
          ))}
          <div className="cursor">_</div>
        </div>
      </div>
      <div className="viz-foot mono">deploy contínuo · integrações nativas</div>
    </div>
  );
}

function ControleViz() {
  return (
    <div className="viz viz-ctrl">
      <div className="ctrl-grid">
        <div className="ctrl-card">
          <div className="ctrl-card-label mono">UPTIME</div>
          <div className="ctrl-card-n serif">99.8<span>%</span></div>
          <div className="ctrl-sparkline">
            <svg viewBox="0 0 100 30"><polyline points="0,20 10,18 20,22 30,15 40,16 50,12 60,14 70,10 80,12 90,8 100,10" fill="none" stroke="var(--accent)" strokeWidth="1.5"/></svg>
          </div>
        </div>
        <div className="ctrl-card">
          <div className="ctrl-card-label mono">SLA ATENDIDO</div>
          <div className="ctrl-card-n serif">96<span>%</span></div>
          <div className="ctrl-sparkline">
            <svg viewBox="0 0 100 30"><polyline points="0,18 10,14 20,16 30,12 40,10 50,14 60,8 70,12 80,6 90,10 100,8" fill="none" stroke="var(--fg)" strokeWidth="1.5"/></svg>
          </div>
        </div>
        <div className="ctrl-card wide">
          <div className="ctrl-card-label mono">OPERAÇÕES/DIA</div>
          <div className="ctrl-bars">
            {[40,60,55,80,70,95,85,90,75,88,100,92].map((h,i)=>(
              <span key={i} style={{height:`${h}%`, animationDelay:`${i*0.05}s`}}/>
            ))}
          </div>
        </div>
        <div className="ctrl-card">
          <div className="ctrl-card-label mono">ALERTAS</div>
          <div className="ctrl-card-n serif">0</div>
          <div className="ctrl-dots">
            <span className="g"/><span className="g"/><span className="g"/><span className="g"/>
          </div>
        </div>
      </div>
      <div className="viz-foot mono">painel 24/7 · dados em tempo real</div>
    </div>
  );
}

/* =============== SERVIÇOS / OFERTA =============== */
function Servicos() {
  const services = [
    { n:'01', t:'Diagnóstico e redesenho', d:'Mapeamento do processo atual, identificação de gargalos e proposta de redesenho com indicadores acordados.', tag:'Projeto' },
    { n:'02', t:'Automação de processos', d:'Execução das automações definidas no redesenho. Ferramentas de mercado ou construção sob medida.', tag:'Projeto' },
    { n:'03', t:'Sistemas sob medida', d:'Quando um problema se repete entre clientes, construímos sistema próprio ao invés de automatizar a dor.', tag:'Produto' },
    { n:'04', t:'Acompanhamento operacional', d:'Permanência junto à operação até que o time do cliente esteja seguro para operar sozinho.', tag:'Contínuo' },
  ];
  return (
    <section className="servicos" id="servicos">
      <div className="container">
        <header className="section-head reveal">
          <div className="eyebrow">Ofertas · 03</div>
          <h2 className="serif section-title">
            Quatro formas<br/>
            de começar.
          </h2>
        </header>
        <div className="serv-grid">
          {services.map((s, i) => (
            <div key={i} className="serv-card reveal" data-delay={i%3+1}>
              <div className="serv-card-top">
                <span className="serv-n mono">{s.n}</span>
                <span className="tag">{s.tag}</span>
              </div>
              <h3 className="serv-t serif">{s.t}</h3>
              <p className="serv-d">{s.d}</p>
              <a href="#contato" className="serv-link mono">
                Saber mais <span>→</span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =============== BLOG =============== */
function Blog() {
  const posts = [
    { cat:'Case · Farma', date:'ABR 2026', t:'Como reduzimos em 52,5% a ruptura em uma operação farmacêutica', read:'6 min' },
    { cat:'Case · S&OP', date:'MAR 2026', t:'Ciclo de S&OP de 4 semanas para 1: o que muda quando o dado chega antes da reunião', read:'8 min' },
    { cat:'Método', date:'MAR 2026', t:'Por que redesenhar antes de automatizar — e o que acontece quando se pula essa etapa', read:'5 min' },
    { cat:'Sistemas', date:'FEV 2026', t:'Quando construir sistema próprio faz mais sentido do que adotar um de mercado', read:'7 min' },
  ];
  return (
    <section className="blog" id="blog">
      <div className="container">
        <header className="section-head blog-head reveal">
          <div>
            <div className="eyebrow">Conteúdo · 04</div>
            <h2 className="serif section-title">
              Ideias que <em>mexem</em><br/>
              com sua operação.
            </h2>
          </div>
          <a href="#" className="btn btn-ghost">Ver tudo →</a>
        </header>
        <div className="blog-list">
          {posts.map((p, i) => (
            <a href="#" className="blog-item reveal" key={i} data-delay={i%3+1}>
              <div className="blog-meta mono">
                <span className="tag">{p.cat}</span>
                <span>{p.date}</span>
                <span>· {p.read} de leitura</span>
              </div>
              <h3 className="blog-t serif">{p.t}</h3>
              <span className="blog-arrow">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =============== FAQ =============== */
function FAQ() {
  const [open, setOpen] = useS(0);
  const qs = [
    { q:'Vocês são consultoria ou empresa de software?', a:'Somos consultoria. Construímos sistemas próprios apenas quando identificamos que um mesmo problema se repete entre clientes — nesses casos, faz mais sentido desenvolver algo sob medida do que automatizar a dor isolada.' },
    { q:'Como vocês trabalham?', a:'Em três etapas: diagnosticar o processo como ele é hoje, redesenhar e automatizar o que faz sentido automatizar, e acompanhar a operação até que o time do cliente esteja seguro para operar sozinho.' },
    { q:'O que vocês NÃO fazem?', a:'Não vendemos software de prateleira, não entregamos relatório e desaparecemos, não automatizamos processo ruim. Se o processo precisa ser redesenhado, ele é redesenhado antes.' },
    { q:'Com que setores vocês trabalham?', a:'Temos entregas comprovadas em farmacêutica, agronegócio, indústria, varejo, logística e serviços. O método é agnóstico ao setor; o que muda é o conteúdo.' },
    { q:'Quando o projeto termina?', a:'Quando o time do cliente está operando com autonomia. Não saímos no meio da curva de aprendizado, e não ficamos além do necessário.' },
    { q:'Como começa uma conversa?', a:'Descreva o processo que está te incomodando — de forma livre, no formulário desta página. Respondemos em até 1 dia útil com as próximas perguntas.' },
  ];
  return (
    <section className="faq" id="faq">
      <div className="container">
        <header className="section-head reveal">
          <div className="eyebrow">Perguntas · 05</div>
          <h2 className="serif section-title">
            Dúvidas<br/>
            <em>legítimas.</em>
          </h2>
        </header>
        <div className="faq-list reveal" data-delay="1">
          {qs.map((item, i) => (
            <div className={`faq-item ${open===i?'on':''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open===i?-1:i)}>
                <span className="faq-n mono">0{i+1}</span>
                <span className="faq-qt serif">{item.q}</span>
                <span className="faq-plus" aria-hidden>{open===i?'−':'+'}</span>
              </button>
              <div className="faq-a">
                <p>{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =============== CONTATO =============== */
function Contato() {
  const [sent, setSent] = useS(false);
  const [form, setForm] = useS({ nome:'', email:'', empresa:'', time:'20-50', desafio:'' });
  const times = ['5-20','20-50','50-200','200-500','500+'];

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section className="contato" id="contato">
      <div className="container">
        <div className="contato-grid">
          <div className="contato-left reveal">
            <div className="eyebrow">Contato · 06</div>
            <h2 className="serif section-title">
              Agende seu<br/>
              <em>diagnóstico.</em>
            </h2>
            <p className="contato-lead">
              Descreva o processo que está te incomodando. Sem formulário cheio de campos,
              sem vendedor. Respondemos em até 1 dia útil com as próximas perguntas certas
              para entender se tem fit — e se tiver, como a gente começa.
            </p>
            <div className="contato-info">
              <div className="contato-info-row">
                <span className="mono">E-MAIL</span>
                <a href="mailto:contato@thinkprocess.com.br">contato@thinkprocess.com.br</a>
              </div>
              <div className="contato-info-row">
                <span className="mono">TELEFONE</span>
                <a href="tel:+5551991173647">+55 (51) 99117-3647</a>
              </div>
              <div className="contato-info-row">
                <span className="mono">WHATSAPP</span>
                <a href="https://wa.me/5551991173647?text=Ol%C3%A1%2C%20gostaria%20de%20conversar%20sobre%20um%20processo." target="_blank" rel="noopener" style={{display:'inline-flex',alignItems:'center',gap:8}}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{flexShrink:0, color:'var(--accent)'}}>
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.464 3.488"/>
                  </svg>
                  Conversar agora
                </a>
              </div>
              <div className="contato-info-row">
                <span className="mono">ENDEREÇO</span>
                <span>Porto Alegre · RS</span>
              </div>
            </div>
          </div>

          <div className="contato-right reveal" data-delay="1">
            {!sent ? (
              <form className="contato-form" onSubmit={submit}>
                <div className="form-row">
                  <label><span className="mono">01 · NOME</span>
                    <input type="text" required value={form.nome} onChange={e=>setForm({...form, nome:e.target.value})} placeholder="Seu nome completo"/>
                  </label>
                </div>
                <div className="form-row">
                  <label><span className="mono">02 · E-MAIL CORPORATIVO</span>
                    <input type="email" required value={form.email} onChange={e=>setForm({...form, email:e.target.value})} placeholder="voce@empresa.com.br"/>
                  </label>
                </div>
                <div className="form-row">
                  <label><span className="mono">03 · EMPRESA</span>
                    <input type="text" required value={form.empresa} onChange={e=>setForm({...form, empresa:e.target.value})} placeholder="Nome da empresa"/>
                  </label>
                </div>
                <div className="form-row">
                  <label><span className="mono">04 · TAMANHO DO TIME</span>
                    <div className="chip-group">
                      {times.map(t => (
                        <button type="button" key={t}
                          className={`chip ${form.time===t?'on':''}`}
                          onClick={()=>setForm({...form, time:t})}>{t}</button>
                      ))}
                    </div>
                  </label>
                </div>
                <div className="form-row">
                  <label><span className="mono">05 · QUAL SEU MAIOR DESAFIO OPERACIONAL HOJE?</span>
                    <textarea value={form.desafio} onChange={e=>setForm({...form, desafio:e.target.value})} rows="3" placeholder="Em poucas linhas. Nada de formalidade."/>
                  </label>
                </div>
                <button type="submit" className="btn btn-primary form-submit">
                  Enviar pedido <span className="arrow">→</span>
                </button>
                <p className="form-fine mono">
                  Retornamos em até 1 dia útil. Sem spam, sem nutrição forçada.
                </p>
              </form>
            ) : (
              <div className="contato-success">
                <div className="success-icon">
                  <svg viewBox="0 0 48 48" width="48" height="48">
                    <circle cx="24" cy="24" r="22" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
                    <path d="M 14 24 L 22 32 L 34 16" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <h3 className="serif">Recebido.</h3>
                <p>Em até 1 dia útil, alguém do time entra em contato. Enquanto isso, dá uma olhada no <a href="#blog">blog</a>.</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============== FOOTER =============== */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-hero">
          <div className="footer-brand serif">Think<em>Process</em>.</div>
          <div className="footer-tag mono">OPERATIONAL INTELLIGENCE · EST. 2019</div>
        </div>
        <div className="footer-cols">
          <div>
            <h4 className="mono">Empresa</h4>
            <a href="#manifesto">Manifesto</a>
            <a href="#como">Metodologia</a>
            <a href="#servicos">Serviços</a>
            <a href="#contato">Contato</a>
          </div>
          <div>
            <h4 className="mono">Conteúdo</h4>
            <a href="#blog">Blog</a>
            <a href="#">Newsletter</a>
            <a href="#">Cases</a>
            <a href="#faq">FAQ</a>
          </div>
          <div>
            <h4 className="mono">Social</h4>
            <a href="#">LinkedIn</a>
            <a href="#">Instagram</a>
            <a href="#">YouTube</a>
          </div>
          <div>
            <h4 className="mono">Legal</h4>
            <a href="#">Termos</a>
            <a href="#">Privacidade</a>
            <a href="#">LGPD</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="mono">© 2026 THINKPROCESS — TODOS OS DIREITOS RESERVADOS</span>
          <span className="mono">SP · BR</span>
        </div>
      </div>
    </footer>
  );
}

window.Manifesto = Manifesto;
window.ComoFunciona = ComoFunciona;
window.Servicos = Servicos;
window.Blog = Blog;
window.FAQ = FAQ;
window.Contato = Contato;
window.Footer = Footer;