/* global React, ReactDOM */
const { useState } = React;

function HomeIDPE() {
  const services = [
    { num: '01', title: 'Planejamento de obras públicas', desc: 'Estruturação técnica de projetos de infraestrutura — do diagnóstico à matriz de riscos e plano de implementação.', icon: <><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21v-7h6v7"/><path d="M3 21h18"/></> },
    { num: '02', title: 'Consultoria em licitações', desc: 'Elaboração de editais, termos de referência e pareceres alinhados à Nova Lei de Licitações (Lei 14.133/21).', icon: <><path d="M5 4h10l4 4v12H5z"/><path d="M15 4v4h4M8 12h8M8 16h6"/></> },
    { num: '03', title: 'Gestão de projetos PPP', desc: 'Modelagem de Parcerias Público-Privadas, concessões administrativas e patrocinadas, do edital à fiscalização.', icon: <><circle cx="8" cy="8" r="3"/><circle cx="16" cy="16" r="3"/><path d="M11 11l2 2"/></> },
  ];
  const steps = [
    { num: '01', title: 'Diagnóstico', desc: 'Mapeamento técnico, jurídico e financeiro do projeto. Entendimento dos objetivos do órgão público.' },
    { num: '02', title: 'Modelagem', desc: 'Desenho da modalidade contratual, plano de negócios, matriz de riscos e cronograma.' },
    { num: '03', title: 'Edital', desc: 'Redação do instrumento convocatório, termos técnicos e suporte à consulta pública.' },
    { num: '04', title: 'Acompanhamento', desc: 'Suporte durante a licitação e na gestão do contrato, com indicadores auditáveis.' },
  ];
  return (
    <div className="home">
      <header className="h-header">
        <img className="h-header__logo" src="assets/logos/fg/idpe-horizontal-fechada-cinza.png" alt="IDPE" />
        <nav className="h-nav">
          <a href="#">Sobre</a>
          <a href="#">Serviços</a>
          <a href="#">Projetos</a>
          <a href="#">Notícias</a>
          <a href="#">Contato</a>
          <button className="btn btn--primary btn--sm">Solicitar proposta</button>
        </nav>
      </header>

      <section className="h-hero">
        <svg className="h-hero__hex" viewBox="0 0 100 100"><polygon points="25,0 75,0 100,50 75,100 25,100 0,50" fill="none" stroke="var(--primary)" strokeWidth="0.4"/></svg>
        <div className="h-hero__inner">
          <div>
            <div className="h-hero__eyebrow">Instituto · Desenvolvimento · Parcerias Estratégicas</div>
            <h1 className="h-hero__title">Parcerias que <em>constroem</em> cidades médias.</h1>
            <p className="h-hero__lead">Estruturamos obras, licitações e PPPs para municípios de pequeno e médio porte — e conectamos investidores qualificados às oportunidades que aparecem no caminho.</p>
            <div className="h-hero__ctas">
              <button className="btn btn--primary btn--lg">Solicitar proposta</button>
              <a href="#" className="btn btn--ghost">Ver projetos em andamento</a>
            </div>
          </div>
          <div className="h-hero__meta">
            <div className="h-hero__meta-item"><span className="h-hero__meta-label">Fundado em</span><span className="h-hero__meta-val">2018</span></div>
            <div className="h-hero__meta-item"><span className="h-hero__meta-label">Sede</span><span className="h-hero__meta-val">Maceió · AL</span></div>
            <div className="h-hero__meta-item"><span className="h-hero__meta-label">Atuação</span><span className="h-hero__meta-val">9 estados</span></div>
          </div>
        </div>
        <div className="h-hero__indicator">
          <span>Role</span>
          <span className="h-hero__indicator-line"></span>
        </div>
      </section>

      <section className="h-numbers reveal">
        <div className="h-numbers__cell"><div className="h-numbers__num">R$ 4,2<span> bi</span></div><div className="h-numbers__label">Em valor de obras estruturadas</div></div>
        <div className="h-numbers__cell"><div className="h-numbers__num">87</div><div className="h-numbers__label">Municípios atendidos em 9 estados</div></div>
        <div className="h-numbers__cell"><div className="h-numbers__num">142</div><div className="h-numbers__label">Editais publicados desde 2018</div></div>
        <div className="h-numbers__cell"><div className="h-numbers__num">96<span>%</span></div><div className="h-numbers__label">De aprovação dos órgãos parceiros</div></div>
      </section>

      <section className="h-section">
        <div className="h-section__head">
          <div>
            <div className="h-section__eyebrow">/ 01 — Serviços</div>
            <h2 className="h-section__title">O que entregamos.</h2>
          </div>
          <p className="h-section__intro">Três frentes de atuação que conversam entre si. Da concepção do projeto à entrega da obra, mantemos o mesmo time técnico — engenheiros, advogados e economistas — acompanhando cada fase.</p>
        </div>
        <div className="h-services">
          {services.map((s, i) => (
            <div className={`h-service reveal reveal--delay-${i+1}`} key={s.num}>
              <span className="h-service__num">/ {s.num}</span>
              <svg className="h-service__icon" viewBox="0 0 24 24">{s.icon}</svg>
              <h3 className="h-service__title">{s.title}</h3>
              <p className="h-service__desc">{s.desc}</p>
              <a href="#" className="h-service__more">Conhecer →</a>
            </div>
          ))}
        </div>
      </section>

      <section className="h-section h-section--paper">
        <div className="h-section__head">
          <div>
            <div className="h-section__eyebrow">/ 02 — Caso em destaque</div>
            <h2 className="h-section__title">Concessão de iluminação pública.</h2>
          </div>
          <p className="h-section__intro">Como o IDPE estruturou um modelo de PPP que substituiu 380 mil pontos de iluminação em 14 cidades de uma região metropolitana, com indicadores de desempenho auditáveis em tempo real.</p>
        </div>
        <div className="h-case reveal">
          <div className="h-case__visual">
            <div className="h-case__visual-content">
              <div className="h-case__visual-eyebrow">PPP · 20 anos · 2023</div>
              <h3 className="h-case__visual-title">380 mil pontos<br/>em 14 cidades.</h3>
              <div className="h-case__visual-meta">
                <div className="h-case__visual-meta-item"><strong>R$ 1,1 bi</strong><span>Investimento</span></div>
                <div className="h-case__visual-meta-item"><strong>17</strong><span>KPIs auditáveis</span></div>
                <div className="h-case__visual-meta-item"><strong>− 64%</strong><span>Consumo</span></div>
              </div>
            </div>
          </div>
          <div className="h-case__body">
            <div className="h-case__body-eyebrow">Depoimento</div>
            <p className="h-case__body-quote">O trabalho do IDPE traduziu uma demanda complexa em um instrumento jurídico claro e em um contrato fiscalizável. Em três anos, a região teve 100% do parque modernizado.</p>
            <div className="h-case__body-author"><strong>Secretário de Infraestrutura</strong><span>Região Metropolitana parceira do IDPE</span></div>
          </div>
        </div>
      </section>

      <section className="h-section">
        <div className="h-section__head">
          <div>
            <div className="h-section__eyebrow">/ 03 — Método</div>
            <h2 className="h-section__title">Como trabalhamos.</h2>
          </div>
          <p className="h-section__intro">Um processo de quatro fases, validado em mais de uma centena de projetos. Cada etapa entrega um produto auditável — não um relatório a mais.</p>
        </div>
        <div className="h-approach">
          {steps.map((s, i) => (
            <div className={`h-step reveal reveal--delay-${i+1}`} key={s.num}>
              <div className="h-step__num">{s.num}</div>
              <div className="h-step__rule"></div>
              <h3 className="h-step__title">{s.title}</h3>
              <p className="h-step__desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="h-cta reveal">
        <div>
          <div style={{fontSize:'var(--fs-eyebrow)',letterSpacing:'var(--tr-eyebrow)',textTransform:'uppercase',color:'var(--accent)',fontWeight:600,marginBottom:24}}>/ Trabalhe com o IDPE</div>
          <h2 className="h-cta__title">Tem um projeto que pode mudar uma cidade?</h2>
          <p className="h-cta__lead">Conte-nos sobre o desafio. Nosso time técnico responde em até dois dias úteis com uma avaliação preliminar de viabilidade.</p>
        </div>
        <form className="h-cta__form" onSubmit={e => e.preventDefault()}>
          <div className="field"><label className="field__label">Órgão / Instituição</label><input className="field__input" placeholder="Ex: Prefeitura de Recife" /></div>
          <div className="field"><label className="field__label">E-mail institucional</label><input className="field__input" placeholder="nome@orgao.gov.br" /></div>
          <button className="btn btn--primary btn--lg">Solicitar proposta</button>
        </form>
      </section>

      <footer className="h-footer">
        <div className="h-footer__top">
          <div className="h-footer__brand">
            <img src="assets/logos/fg/idpe-horizontal-fechada-cinza.png" alt="IDPE" />
            <p>Instituto de Desenvolvimento de Parcerias Estratégicas. Estruturamos projetos públicos e privados que entregam infraestrutura à população.</p>
          </div>
          <div className="h-footer__col"><h4>Institucional</h4><ul><li><a href="#">Sobre o IDPE</a></li><li><a href="#">Equipe técnica</a></li><li><a href="#">Compliance</a></li><li><a href="#">Imprensa</a></li></ul></div>
          <div className="h-footer__col"><h4>Atuação</h4><ul><li><a href="#">Obras públicas</a></li><li><a href="#">Licitações</a></li><li><a href="#">PPPs &amp; Concessões</a></li><li><a href="#">Pareceres técnicos</a></li></ul></div>
          <div className="h-footer__col"><h4>Contato</h4><ul><li><a href="#">contato@idpe.org.br</a></li><li><a href="#">+55 82 9816-0006</a></li><li><a href="#">Maceió · AL</a></li><li><a href="#">LinkedIn</a></li></ul></div>
        </div>
        <div className="h-footer__bottom">
          <span>© 2026 IDPE — Instituto de Desenvolvimento de Parcerias Estratégicas. Todos os direitos reservados.</span>
          <span>CNPJ 00.000.000/0001-00</span>
        </div>
      </footer>
    </div>
  );
}

window.HomeIDPE = HomeIDPE;
const homeMount = document.getElementById('home-mount');
if (homeMount) ReactDOM.createRoot(homeMount).render(<HomeIDPE />);