// AveraTech — Process accordion + Tech stack + Cases + Sobre + Contato
const { useState: useStateP, useRef: useRefP } = React;

// ─── PROCESSO ───────────────────────────────────────────────────────────────
const PROCESS_STEPS = [
  {
    id: '01',
    title: 'Discovery',
    duration: '1–2 semanas',
    summary: 'Imersão no negócio, mapeamento de processos e definição do escopo real.',
    detail: 'Entrevistas com stakeholders, observação operacional, análise de dados e sistemas legados. Saímos com um documento de visão, riscos identificados e uma estimativa que se sustenta.',
    deliverables: ['Documento de visão', 'Mapa de processos', 'Estimativa por fase', 'Plano de riscos'],
  },
  {
    id: '02',
    title: 'Design & arquitetura',
    duration: '2–4 semanas',
    summary: 'Protótipo navegável, arquitetura técnica e decisões de stack documentadas.',
    detail: 'Wireframes de alta fidelidade, fluxos validados com usuários reais, ADRs (architecture decision records) para cada escolha técnica importante. O cliente aprova antes da primeira linha de código de produção.',
    deliverables: ['Protótipo navegável', 'ADRs documentados', 'Backlog priorizado', 'Plano de releases'],
  },
  {
    id: '03',
    title: 'Build',
    duration: '8–24 semanas',
    summary: 'Sprints curtos com demo semanal e ambiente de staging sempre vivo.',
    detail: 'Squad dedicado com tech lead, devs sêniores e PM. CI/CD desde o dia 1, testes automatizados, code review interno e externo. Você acompanha o board, o staging e o burndown.',
    deliverables: ['Demo semanal', 'Staging contínuo', 'Testes automatizados', 'Code review duplo'],
  },
  {
    id: '04',
    title: 'Launch & evolução',
    duration: 'contínuo',
    summary: 'Deploy assistido, transferência de conhecimento e contrato de evolução.',
    detail: 'Lançamento gradual com feature flags, monitoramento de produção, treinamento do time interno e contrato opcional de evolução para os primeiros 12 meses pós-launch.',
    deliverables: ['Runbook operacional', 'Treinamento do time', 'Observabilidade configurada', 'SLA combinado'],
  },
];

function Process() {
  const [openId, setOpenId] = useStateP('01');
  return (
    <section id="processo" className="process section-pad">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot" />Como trabalhamos</div>
          <h2>Quatro fases.<br />Zero surpresa.</h2>
          <p className="section-sub">
            Nenhuma fase começa sem a anterior assinada. Cada etapa tem entregáveis claros e um critério objetivo de pronto — escrito no contrato.
          </p>
        </div>
        <div className="process-list">
          {PROCESS_STEPS.map(step => {
            const open = openId === step.id;
            return (
              <div
                key={step.id}
                className={"process-item " + (open ? 'open' : '')}
              >
                <button
                  className="process-head"
                  onClick={() => setOpenId(open ? null : step.id)}
                  aria-expanded={open}
                >
                  <span className="process-id mono">{step.id}</span>
                  <span className="process-title">{step.title}</span>
                  <span className="process-summary">{step.summary}</span>
                  <span className="process-duration mono">{step.duration}</span>
                  <span className="process-chev" aria-hidden>{open ? '–' : '+'}</span>
                </button>
                <div className="process-body" style={{ maxHeight: open ? '420px' : '0px' }}>
                  <div className="process-body-inner">
                    <p>{step.detail}</p>
                    <div className="process-deliverables">
                      <span className="mono process-deliverables-label">Entregáveis</span>
                      <div className="process-deliverables-list">
                        {step.deliverables.map(d => (
                          <span key={d} className="process-pill mono">{d}</span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── TECNOLOGIAS ────────────────────────────────────────────────────────────
const TECH_GROUPS = [
  {
    label: 'Frontend',
    items: ['React', 'Next.js', 'TypeScript', 'Astro', 'Tailwind', 'React Native'],
  },
  {
    label: 'Backend',
    items: ['Node.js', 'Go', 'Python', '.NET', 'PostgreSQL', 'Redis', 'Kafka'],
  },
  {
    label: 'Cloud & DevOps',
    items: ['AWS', 'GCP', 'Azure', 'Terraform', 'Kubernetes', 'Docker', 'GitHub Actions'],
  },
  {
    label: 'IA & Dados',
    items: ['OpenAI', 'Anthropic', 'LangChain', 'dbt', 'Airbyte', 'BigQuery', 'Snowflake'],
  },
];

function Tech() {
  return (
    <section id="tecnologias" className="tech section-pad">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot" />Stack</div>
          <h2>Ferramenta certa<br />para cada problema.</h2>
          <p className="section-sub">
            Somos pragmáticos: usamos o que funciona, não o que é hype. A escolha de stack acontece no Discovery e fica documentada como ADR.
          </p>
        </div>
        <div className="tech-grid">
          {TECH_GROUPS.map(g => (
            <div key={g.label} className="tech-group">
              <div className="tech-group-head">
                <span className="mono tech-group-label">{g.label}</span>
                <span className="tech-group-count mono">{g.items.length.toString().padStart(2, '0')}</span>
              </div>
              <div className="tech-group-items">
                {g.items.map(it => (
                  <span key={it} className="tech-chip">{it}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CASES ──────────────────────────────────────────────────────────────────
const CLIENTS = [
  { name: 'Maui Bikini',  logo: 'assets/clients/maui-bikini.png',  segment: 'Moda · Beachwear' },
  { name: 'Dress Mahalo', logo: 'assets/clients/dress-mahalo.jpg', segment: 'Moda · Vestuário' },
  { name: 'Cliente 03',   logo: 'assets/clients/cliente-3.svg',    segment: 'A confirmar' },
];

function Clients() {
  return (
    <section id="clientes" className="clients section-pad">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot" />Clientes</div>
          <h2>Marcas que constroem<br />tecnologia com a gente.</h2>
          <p className="section-sub">
            Seleção de marcas que confiaram na AveraTech para desenhar, construir e evoluir suas plataformas digitais.
          </p>
        </div>

        <div className="clients-grid">
          {CLIENTS.map(c => (
            <article key={c.name} className="client-card">
              <div className="client-logo-wrap">
                <img src={c.logo} alt={c.name} className="client-logo" />
              </div>
              <div className="client-meta">
                <div className="client-name">{c.name}</div>
                <div className="client-segment mono">{c.segment}</div>
              </div>
            </article>
          ))}
        </div>

        <div className="clients-cta">
          <p className="clients-cta-text">
            Sua marca pode ser a próxima.
          </p>
          <a href="#contato" className="btn btn-ghost">
            Conversar sobre o seu projeto
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── SOBRE ──────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="sobre" className="about section-pad">
      <div className="container about-grid">
        <div className="about-copy">
          <div className="eyebrow"><span className="dot" />Sobre a AveraTech</div>
          <h2>Tecnologia pensada<br />para quem cria.</h2>
          <p>
            A AveraTech nasceu para resolver um problema simples: empresas que crescem deixam de caber em ferramentas de prateleira. Quando o sistema começa a moldar o negócio (e não o contrário), é hora de construir algo sob medida.
          </p>
          <p>
            Trabalhamos em parceria próxima com cada cliente — entendendo o processo, desenhando junto e entregando uma solução que o time consegue operar e evoluir. Software, sites e consultoria, sempre com o mesmo foco: gerar resultado de verdade.
          </p>
          <div className="about-principles">
            {[
              { k: 'Sob medida', v: 'Cada projeto começa entendendo o seu jeito de trabalhar, não um template pronto.' },
              { k: 'Parceria', v: 'Time pequeno e dedicado — você fala direto com quem constrói, não com camadas de gerentes.' },
              { k: 'Transparência', v: 'Escopo claro, prazos honestos e código entregue no seu repositório. Sem caixa-preta.' },
            ].map(p => (
              <div className="about-principle" key={p.k}>
                <div className="about-principle-k mono">{p.k}</div>
                <div className="about-principle-v">{p.v}</div>
              </div>
            ))}
          </div>
        </div>
        <aside className="about-side">
          <div className="about-side-card">
            <div className="about-side-eyebrow mono">Como começamos juntos</div>
            <ol className="about-side-steps">
              <li>
                <span className="mono about-side-step-num">01</span>
                <span>Você conta o problema. A gente escuta antes de propor.</span>
              </li>
              <li>
                <span className="mono about-side-step-num">02</span>
                <span>Desenhamos o escopo da primeira fase juntos, sem caixa-preta.</span>
              </li>
              <li>
                <span className="mono about-side-step-num">03</span>
                <span>Construímos com entregas curtas e demo a cada sprint.</span>
              </li>
              <li>
                <span className="mono about-side-step-num">04</span>
                <span>Evoluímos junto enquanto o seu negócio cresce.</span>
              </li>
            </ol>
            <a href="#contato" className="btn btn-primary about-side-cta">
              Marcar uma conversa
              <span className="arrow">→</span>
            </a>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ─── CONTATO ────────────────────────────────────────────────────────────────
function Contact() {
  const [form, setForm] = useStateP({ name: '', company: '', email: '', budget: 'A definir', message: '' });
  const [sent, setSent] = useStateP(false);

  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4200);
    setForm({ name: '', company: '', email: '', budget: 'A definir', message: '' });
  };

  const BUDGETS = ['A definir', '< R$ 80k', 'R$ 80–250k', 'R$ 250–600k', '> R$ 600k'];

  return (
    <section id="contato" className="contact section-pad">
      <div className="container contact-grid">
        <div className="contact-copy">
          <div className="eyebrow"><span className="dot" />Contato</div>
          <h2>Vamos conversar<br />sobre seu projeto.</h2>
          <p>
            Conta um pouco sobre o que você precisa e a gente retorna pra entender o contexto, discutir viabilidade e — se fizer sentido — propor os próximos passos.
          </p>
          <div className="contact-info">
            <div className="contact-info-row">
              <span className="mono contact-info-k">e-mail</span>
              <span>contato@averatech.com.br</span>
            </div>
            <div className="contact-info-row">
              <span className="mono contact-info-k">whatsapp</span>
              <span>a definir</span>
            </div>
            <div className="contact-info-row">
              <span className="mono contact-info-k">linkedin</span>
              <span>linkedin.com/company/averatech</span>
            </div>
          </div>
        </div>

        <form className="contact-form" onSubmit={onSubmit}>
          <div className="contact-form-row">
            <label>
              <span className="mono">Nome</span>
              <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Como podemos te chamar?" />
            </label>
            <label>
              <span className="mono">Empresa</span>
              <input required value={form.company} onChange={e => setForm({...form, company: e.target.value})} placeholder="Onde você trabalha?" />
            </label>
          </div>
          <label>
            <span className="mono">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>
          <label>
            <span className="mono">Orçamento previsto</span>
            <div className="contact-budget">
              {BUDGETS.map(b => (
                <button
                  type="button"
                  key={b}
                  className={"contact-budget-btn " + (form.budget === b ? 'active' : '')}
                  onClick={() => setForm({...form, budget: b})}
                >{b}</button>
              ))}
            </div>
          </label>
          <label>
            <span className="mono">Conta pra gente</span>
            <textarea rows="4" value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder="O que você quer construir? Em que prazo? Qual o problema real?" />
          </label>
          <button type="submit" className="btn btn-primary contact-submit" disabled={sent}>
            {sent ? '✓ Recebido! Em breve retornaremos.' : (<>Enviar mensagem <span className="arrow">→</span></>)}
          </button>
        </form>
      </div>
    </section>
  );
}

// ─── FOOTER ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <div className="footer-brand">
          <img src="assets/logo.png" alt="AveraTech" className="footer-logo" />
          <p className="footer-tag mono">Engenharia que vira vantagem competitiva.</p>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <span className="footer-col-label mono">Serviços</span>
            <a href="#servicos">Software sob medida</a>
            <a href="#servicos">Sites e plataformas</a>
            <a href="#servicos">Consultoria técnica</a>
            <a href="#servicos">Integrações & APIs</a>
          </div>
          <div className="footer-col">
            <span className="footer-col-label mono">Empresa</span>
            <a href="#sobre">Sobre</a>
            <a href="#clientes">Clientes</a>
            <a href="#processo">Processo</a>
            <a href="#contato">Contato</a>
          </div>
          <div className="footer-col">
            <span className="footer-col-label mono">Outros</span>
            <a href="#">LinkedIn</a>
            <a href="#">GitHub</a>
            <a href="#">Carreiras</a>
            <a href="#">Política de privacidade</a>
          </div>
        </div>
      </div>
      <div className="container footer-bottom mono">
        <span>© 2026 AveraTech · Tecnologia sob medida</span>
        <span>Feito com carinho no Brasil</span>
      </div>
    </footer>
  );
}

window.Process = Process;
window.Tech = Tech;
window.Clients = Clients;
window.About = About;
window.Contact = Contact;
window.Footer = Footer;