/* global React */

// ===== Marquee =====
function Marquee() {
  const items = [
    'Apps iOS', 'Sites de alta conversão', 'MVPs em semanas',
    'React Native', 'Next.js', 'Apps Android', 'Integrações de pagamento',
    'Design + Dev no mesmo time', 'Suporte pós-entrega', 'Código do cliente'
  ];
  const loop = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((it, i) => (
          <span className="marquee-item" key={i}>
            <span className="sep"></span>
            {it}
          </span>
        ))}
      </div>
    </div>
  );
}

// ===== Services =====
function Services() {
  return (
    <section className="section services" id="servicos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal"><span className="dot"></span> 01 · Serviços</span>
            <h2 className="reveal delay-1">
              O que a gente faz <span className="accent">muito bem</span>.
            </h2>
          </div>
          <p className="lede reveal delay-2">
            Foco em duas frentes que entregam resultado rápido: aplicativos
            mobile nativos e sites de alta performance. Mesmo time, do
            briefing ao deploy.
          </p>
        </div>

        <div className="service-grid">
          <article className="service-card reveal">
            <span className="corner-tag">// 01</span>
            <h3>Aplicativos mobile</h3>
            <p className="desc">
              Apps iOS e Android construídos para escalar. Do MVP validável
              ao produto completo nas lojas, com performance nativa e UX que
              prende o usuário.
            </p>
            <ul className="feats">
              <li>iOS + Android no mesmo código</li>
              <li>Publicação nas lojas inclusa</li>
              <li>Backend, autenticação e pagamentos</li>
              <li>Push, analytics e crashes monitorados</li>
            </ul>
            <div className="visual">
              <div className="phone-mock">
                <div className="notch"></div>
                <div className="screen">
                  <div className="top-row">
                    <span>09:41</span>
                    <span>●●●●</span>
                  </div>
                  <div className="title">Olá, Sistemas 👋</div>
                  <div className="card-pill big">Saldo · R$ 12.480,00</div>
                  <div className="card-pill">Nova transação</div>
                  <div className="card-pill">Relatório do mês</div>
                </div>
              </div>
            </div>
          </article>

          <article className="service-card reveal delay-1">
            <span className="corner-tag">// 02</span>
            <h3>Sites & landing pages</h3>
            <p className="desc">
              Sites institucionais, landing pages que convertem e
              plataformas web sob medida. Carregamento instantâneo,
              SEO técnico e CMS para você editar sem depender de ninguém.
            </p>
            <ul className="feats">
              <li>Performance 95+ no Lighthouse</li>
              <li>SEO técnico desde o primeiro dia</li>
              <li>CMS para edição sem código</li>
              <li>Integração com WhatsApp, CRM e analytics</li>
            </ul>
            <div className="visual">
              <div className="browser-mock">
                <div className="bar">
                  <span></span><span></span><span></span>
                  <div className="url">https://seusite.com.br</div>
                </div>
                <div className="body">
                  <div className="hero-block">Sua marca, no ar.</div>
                  <div className="row">
                    <div></div><div></div><div></div>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

// ===== Differentials =====
function Differentials() {
  return (
    <section className="section diffs" id="diferenciais">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal" style={{ background: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.1)', color: '#aaa' }}>
              <span className="dot"></span> 02 · Por que Sistemas Club
            </span>
            <h2 className="reveal delay-1">
              Três coisas que <span className="accent">não negociamos</span>.
            </h2>
          </div>
          <p className="lede reveal delay-2">
            Promessa simples e auditável: preço justo, prazo curto e
            qualidade que escala. Sem mistério.
          </p>
        </div>

        <div className="diff-grid">
          <div className="diff-card reveal">
            <span className="num">// 01</span>
            <h3>Preço justo.</h3>
            <p>
              Orçamento transparente, sem surpresa. Você paga pelo
              escopo, não pela complexidade que a gente cria. Modelos
              fixos, por sprint ou por entrega.
            </p>
          </div>
          <div className="diff-card reveal delay-1">
            <span className="num">// 02</span>
            <h3>Prazo curto.</h3>
            <p>
              MVPs em 4 a 8 semanas. Site institucional em 2. Cronograma
              compartilhado em tempo real para você acompanhar cada
              entrega, do dia 1 ao deploy.
            </p>
          </div>
          <div className="diff-card reveal delay-2">
            <span className="num">// 03</span>
            <h3>Qualidade real.</h3>
            <p>
              Código limpo, testado e seu. Design pensado pra escala,
              não só pra parecer bonito. Documentação e suporte pós-
              entrega para você não ficar refém.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Process =====
function Process() {
  const steps = [
    { n: '01', title: 'Briefing', desc: 'Você conta o problema. A gente entende o usuário e o escopo, e propõe o caminho mais curto.', dur: '1–3 dias' },
    { n: '02', title: 'Design', desc: 'Wireframes, fluxos e protótipo navegável. Você valida antes de uma linha de código.', dur: '1–2 sem' },
    { n: '03', title: 'Desenvolvimento', desc: 'Sprints semanais com entregas funcionais. Você acompanha em ambiente de testes.', dur: '3–6 sem' },
    { n: '04', title: 'Lançamento', desc: 'Publicação nas lojas, deploy no domínio próprio, treinamento e handover.', dur: '3–7 dias' },
    { n: '05', title: 'Evolução', desc: 'Métricas, ajustes e novas funcionalidades. Suporte ativo ou contrato de evolução contínua.', dur: 'contínuo' },
  ];
  return (
    <section className="section process" id="processo">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal"><span className="dot"></span> 04 · Processo</span>
            <h2 className="reveal delay-1">
              Cinco etapas. <span className="accent">Zero mistério.</span>
            </h2>
          </div>
          <p className="lede reveal delay-2">
            Um processo simples, repetível e auditável. Toda semana você
            vê algo novo funcionando.
          </p>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <div className={`step reveal ${i < 4 ? `delay-${i}` : ''}`} key={s.n}>
              <span className="num">// {s.n}</span>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              <span className="duration">{s.dur}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Market Stats (benchmark) =====
function MarketStats() {
  return (
    <section className="market">
      <div className="container">
        <div className="market-head">
          <span className="eyebrow"><span className="dot"></span> Mercado · 2024–2025</span>
          <p className="market-lede">
            Por que vale investir agora em app & site próprios.
          </p>
        </div>
        <div className="market-grid">
          <div className="market-card">
            <div className="market-num">US$ <AnimatedNum value={7.77} decimals={2} /><span className="unit">bi</span></div>
            <div className="market-lab">Mercado brasileiro de apps em 2024</div>
            <div className="market-source">Grand View Research</div>
          </div>
          <div className="market-card">
            <div className="market-num">US$ <AnimatedNum value={2.85} decimals={2} /><span className="unit">bi</span></div>
            <div className="market-lab">Investido por empresas BR em aquisição de usuários</div>
            <div className="market-source">AppsFlyer · 2024</div>
          </div>
          <div className="market-card">
            <div className="market-num"><AnimatedNum value={31} /><span className="unit">%</span></div>
            <div className="market-lab">Dos brasileiros baixam um app novo por dia</div>
            <div className="market-source">Mobile Time × Opinion Box</div>
          </div>
          <div className="market-card">
            <div className="market-num">#1<span className="unit"></span></div>
            <div className="market-lab">Brasil entre os mercados de apps com maior crescimento global</div>
            <div className="market-source">Adjust · Mobile App Growth Report</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Comparison (Sistemas Club vs market) =====
function Compare() {
  const rows = [
    { lab: 'Prazo MVP',           a: '4–8 semanas',        b: '3–6 meses',         c: 'imprevisível' },
    { lab: 'Resposta a proposta', a: '48 horas',           b: 'dias a semanas',    c: 'dias' },
    { lab: 'Modelo de preço',     a: 'fixo, transparente', b: 'sob orçamento',     c: 'hora trabalhada' },
    { lab: 'Design + Dev',        a: 'mesmo time',         b: 'squads separados',  c: 'só dev' },
    { lab: 'Posse do código',     a: '100% do cliente',    b: 'variável',          c: 'variável' },
    { lab: 'Publicação nas lojas',a: 'incluída',           b: 'à parte',           c: 'sob acordo' },
    { lab: 'Suporte pós-entrega', a: 'incluso (30 dias)',  b: 'contrato à parte',  c: 'caso a caso' },
    { lab: 'Stack',               a: 'React Native · Next.js · Node', b: 'idem', c: 'varia' },
  ];
  return (
    <section className="section compare" id="comparativo">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow reveal"><span className="dot"></span> 03 · Comparativo</span>
            <h2 className="reveal delay-1">
              Por que <span className="accent">Sistemas Club</span>.
            </h2>
          </div>
          <p className="lede reveal delay-2">
            Velocidade de boutique. Transparência de produto. Qualidade de
            squad sênior — sem o custo de uma agência grande.
          </p>
        </div>

        <div className="compare-table reveal">
          <div className="compare-header">
            <div className="compare-cell label"></div>
            <div className="compare-cell head highlight">
              <span className="brand-mark"><span>SC</span></span>
              <span>Sistemas Club</span>
            </div>
            <div className="compare-cell head">Agência tradicional</div>
            <div className="compare-cell head">Freelancer solo</div>
          </div>
          {rows.map((r, i) => (
            <div className="compare-row" key={i}>
              <div className="compare-cell label">{r.lab}</div>
              <div className="compare-cell value highlight">
                <svg className="check" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>
                {r.a}
              </div>
              <div className="compare-cell value muted">{r.b}</div>
              <div className="compare-cell value muted">{r.c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Marquee, Services, Differentials, Process, MarketStats, Compare });