/* global React */
(function () {
const { Reveal, Placeholder, Counter, Compare, navigate } = window;
const { useState } = React;

const CASES = [
  { tag: 'LICITAÇÃO PÚBLICA · 2024', title: 'Hospital Regional', loc: 'MG', meta: 'R$ 84 Mi · 18.500 m²', span: 'big' },
  { tag: 'CONSTRUTORA · 2023', title: 'Centro Logístico', loc: 'SP', meta: 'R$ 32 Mi · 12.000 m²' },
  { tag: 'LICITAÇÃO · 2024', title: 'Escola Municipal', loc: 'PE', meta: 'R$ 8,4 Mi · 3.200 m²' },
  { tag: 'INFRAESTRUTURA · 2023', title: 'Viaduto Estadual', loc: 'RS', meta: 'R$ 22 Mi · 480 m' },
  { tag: 'INDUSTRIAL · 2025', title: 'Planta Industrial', loc: 'BA', meta: 'R$ 54 Mi · 24.000 m²' },
];

const AUDIENCES = [
  {
    n: '01',
    title: 'Construtoras',
    em: 'que escalam.',
    desc: 'Orçamentos detalhados em prazo agressivo, com composições realistas e auditoria interna antes da entrega ao cliente final.',
  },
  {
    n: '02',
    title: 'Cliente final',
    em: 'que constroem.',
    desc: 'Para pessoas físicas com obras de médio porte: previsibilidade de custo, cronograma realista e revisão técnica antes de assinar contrato.',
  },
  {
    n: '03',
    title: 'Empresas em',
    em: 'licitações.',
    desc: 'Da análise do edital à proposta técnica vencedora — passando por planilhas SINAPI/SICRO, BDI e defesa de preços.',
  },
];

const FAQS = [
  { q: 'Qual o prazo médio para uma proposta de licitação?', a: 'Trabalhamos em ciclos de 5 a 10 dias úteis para licitações de médio porte, com possibilidade de regime expresso 5 dias para itens emergenciais. O escopo, volume de itens e disponibilidade do edital definem o prazo final.' },
  { q: 'Vocês trabalham com SINAPI e SICRO?', a: 'Sim. As duas bases oficiais são nossas referências padrão, atualizadas mês a mês. Também usamos composições próprias auditadas internamente quando o item não consta nas tabelas oficiais.' },
  { q: 'Precisamos ter projeto em BIM para contratar?', a: 'Não. Trabalhamos com projetos em qualquer formato — desde plantas em PDF até modelos federados em Revit/Navisworks. Se o projeto não estiver em BIM, modelamos as etapas críticas para extração de quantitativos.' },
  { q: 'Como funciona a defesa de proposta em licitação?', a: 'Acompanhamos todas as fases do certame: impugnações, recursos, esclarecimentos técnicos e diligências. Em caso de contestação por preço inexequível, montamos memorial completo com composições e fontes.' },
  { q: 'Vocês auditam orçamentos de terceiros?', a: 'Sim. Esse é um serviço crescente — analisamos composições, sobreposições, jogo de planilha e BDI de orçamentos elaborados por outras consultorias ou pelos próprios licitantes.' },
  // { q: 'Qual a faixa de valor de uma consultoria?', a: 'Varia conforme escopo. Orçamentos pontuais começam em torno de R$ 4.800. Consultorias contínuas seguem fee mensal a partir de R$ 7.200. Auditoria por planilha tem valor por item.' },
];

function HomePage() {
  return (
    <main>
      {/* ============ HERO ============ */}
      <section className="section hero" style={{ borderTop: 0 }}>
        <div className="hero-grid-bg"></div>
        <div className="container" style={{ position: 'relative' }}>
          <div className="hero-meta">
            <span className="dot"></span>
            <span className="muted-meta">Perfect Consulting · Belo Horizonte / MG</span>
          </div>
          <h1 className="display h-xxl hero-title">
            Da <em>licitação</em><br/>
            ao último <em>tijolo</em>,<br/>
            orçado com <em>precisão.</em>
          </h1>
          <div className="hero-cols">
            <div>
              <p className="lede" style={{ marginTop: 12 }}>
                Orçamentos de obras, projetos em BIM e propostas técnicas para licitações públicas.
                Trabalhamos com construtoras, clientes finais e empresas que disputam editais.
                Entregando previsibilidade onde a maioria entrega estimativa.
              </p>
              <div className="hero-actions">
                <button className="btn" onClick={() => navigate('contato')}>
                  Solicitar orçamento <span className="arr">→</span>
                </button>
                <button className="btn btn--ghost" onClick={() => navigate('servicos')}>
                  Ver serviços
                </button>
              </div>
            </div>
            <div className="hero-slogan">
              <strong>↘ NOSSO COMPROMISSO</strong><br/>
              Mitigando riscos,<br/>
              maximizando resultados.
            </div>
          </div>
        </div>
      </section>

      {/* ============ MARQUEE ============ */}
      <div className="marquee">
        <div className="marquee-track">
          {[...Array(2)].map((_, k) => (
            <React.Fragment key={k}>
              <span className="marquee-item">Consultorias</span>
              <span className="marquee-item">Licitações públicas</span>
              <span className="marquee-item">Obras residenciais</span>
              <span className="marquee-item">Planilhas automatizadas</span>
              <span className="marquee-item">Melhoria continua</span>
              <span className="marquee-item">Auditoria de oçamentos</span>
              <span className="marquee-item">Propostas técnicas</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ============ STATS ============ */}
      <section>
        <div className="stats">
          {[
            { v: 150, suf: '+', lbl: 'OBRAS\nORÇADAS' },
            { v: 1.3, suf: ' Bi', pre: 'R$ ', lbl: 'EM VALOR\nESTIMADO' },
            { v: 10, suf: ' anos', lbl: 'DE EXPERIENCIA DOS\nPROFISSIONAIS NO RAMO' },
            { v: 15, suf: ' dias', lbl: 'PRAZO MÉDIO\nDE ENTREGA' },
          ].map((s, i) => (
            <Reveal key={i} delay={i * 60} as="div" className="stat">
              <div className="stat-num">
                <em><Counter value={s.v} prefix={s.pre || ''} suffix={s.suf} /></em>
              </div>
              <div className="stat-label">{s.lbl.split('\n').map((l, k) => <div key={k}>{l}</div>)}</div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ CASES ============ */}
      {/* <section className="section">
        <div className="container">
          <Reveal>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36, gap: 24, flexWrap: 'wrap' }}>
              <div>
                <span className="section-label">Cases em destaque</span>
                <h2 className="display h-xl">Obras que ajudamos<br/>a tirar do <em>papel.</em></h2>
              </div>
              <a className="link-arrow" onClick={() => navigate('servicos')}>
                Ver todos os cases <span className="arr">→</span>
              </a>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="mosaic-2">
              {CASES.map((c, i) => (
                <div className="case" key={i}>
                  <div className="case-img"></div>
                  <span className="case-img-label">[foto · {c.title.toLowerCase()}]</span>
                  <div className="case-overlay"></div>
                  <div className="case-info">
                    <div className="case-info-inner">
                      <span className="case-tag">{c.tag}</span>
                      <h3 className="case-title">{c.title} <span style={{ color: 'var(--orange)' }}>· {c.loc}</span></h3>
                      <div className="case-meta">{c.meta}</div>
                    </div>
                    <div className="case-arrow">→</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section> */}{/*QUANDO TIVER CASES DE SUCESSO É PARA INCLUIR*/}

      {/* ============ AUDIENCES ============ */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{ marginBottom: 36 }}>
              <span className="section-label">Para quem</span>
              <h2 className="display h-xl">Três públicos.<br/>Um <em>padrão.</em></h2>
              <p className="lede" style={{ marginTop: 20 }}>
                Não somos uma consultoria genérica. Cada vertical tem time dedicado, fluxo próprio e prazo SLA distinto.
              </p>
            </div>
          </Reveal>
          <div className="aud-grid">
            {AUDIENCES.map((a, i) => (
              <Reveal key={i} delay={i * 80} as="div" className="aud" onClick={() => navigate('servicos')}>
                <div className="aud-num">{a.n} · público</div>
                <h3 className="aud-title">{a.title} <em>{a.em}</em></h3>
                <p className="aud-desc">{a.desc}</p>
                <div className="aud-link">
                  <a className="link-arrow">Ver serviços <span className="arr">→</span></a>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ============ BIM compare ============ */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{ marginBottom: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'end' }} className="bim-head">
              <div>
                <span className="section-label">BIM em ação</span>
                <h2 className="display h-l">Do modelo 3D à <em>planilha</em> orçamentária.</h2>
              </div>
              <p className="lede">
                Extração automatizada de quantitativos a partir do modelo BIM, sem retrabalho, sem divergência entre o que está desenhado e o que está orçado. Arraste a barra para comparar.
              </p>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <Compare heightPx={520} />
          </Reveal>
        </div>
      </section>

      {/* ============ PROCESS ============ */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{ marginBottom: 36 }}>
              <span className="section-label">Nosso processo</span>
              <h2 className="display h-xl">Como a gente <em>trabalha.</em></h2>
            </div>
          </Reveal>
          <div className="process">
            {[
              { n: '01', t: 'Briefing', d: 'Entendemos o projeto, edital ou demanda e definimos escopo e prazo.' },
              { n: '02', t: 'Análise técnica', d: 'Revisamos plantas, memoriais, edital. Identificamos riscos e gaps.' },
              { n: '03', t: 'Modelagem / extração', d: 'BIM ou planilha base, depende do material disponível.' },
              { n: '04', t: 'Composição & BDI', d: 'Cada item com fonte (SINAPI, SICRO, próprio). BDI auditado.' },
              { n: '05', t: 'Entrega & defesa', d: 'Planilha + memorial + acompanhamento da fase de proposta.' },
            ].map((p, i) => (
              <Reveal key={i} delay={i * 70} as="div" className="proc-step">
                <div className="proc-num">{p.n}</div>
                <h3 className="proc-title">{p.t}</h3>
                <p className="proc-desc">{p.d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ============ FAQ ============ */}
      <section className="section">
        <div className="container">
          <Reveal>
            <div style={{ marginBottom: 36 }}>
              <span className="section-label">Dúvidas frequentes</span>
              <h2 className="display h-l">Antes de você <em>perguntar.</em></h2>
            </div>
          </Reveal>
          <FAQList />
        </div>
      </section>

      {/* ============ CTA ============ */}
      <CTA />
    </main>
  );
}

function FAQList() {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      <div className="muted-meta" style={{ paddingTop: 8 }}>
        Não achou sua dúvida?<br/><br/>
        <a className="link-arrow" onClick={() => navigate('contato')}>Pergunte direto <span className="arr">→</span></a>
      </div>
      <div>
        {FAQS.map((f, i) => (
          <div
            key={i}
            className={'faq-item' + (open === i ? ' open' : '')}
            onClick={() => setOpen(open === i ? -1 : i)}
          >
            <h3 className="faq-q">
              {f.q}
              <span className="faq-toggle">+</span>
            </h3>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CTA() {
  return (
    <section className="cta">
      <div className="cta-inner">
        <h2 className="display h-xl">
          Seu próximo projeto<br/>começa <em>aqui.</em>
        </h2>
        <div>
          <div className="cta-side">
            <strong>Mande os arquivos.</strong>
            Em até 48h retornamos com prazo, valor e abordagem técnica. Sem compromisso, sem cadastro — só engenharia.
          </div>
          <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => navigate('contato')}>
              Enviar projeto <span className="arr">→</span>
            </button>
            <a href="mailto:comercial@perfectconsulting.com.br" className="btn btn--ghost" style={{ borderColor: 'rgba(255,255,255,0.3)', color: 'rgba(255,255,255,0.85)' }}>
              comercial@perfect.com.br
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatsAppButton() {
  const phone = '5531988817140';
  const url = 'https://wa.me/' + phone;
  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="wa-btn"
      aria-label="Fale conosco pelo WhatsApp"
    >
      <svg className="wa-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <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.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.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 00-3.48-8.413z"/>
      </svg>
      <span className="wa-label">Fale conosco</span>
    </a>
  );
}

window.HomePage = HomePage;
window.SiteCTA = CTA;
window.WhatsAppButton = WhatsAppButton;
})();