// ───────────────────────────────────────────────
// Problem identification + Data callout + Método PRO
// ───────────────────────────────────────────────

const PROBLEMS = [
{
  n: '01',
  title: 'Você investe em portal todo mês',
  body: 'e o lead que chega já veio falando com 4 ou 5 concorrentes ao mesmo tempo.'
},
{
  n: '02',
  title: 'Sua marca aparece, mas ninguém memoriza',
  body: 'O comprador lembra do imóvel, não da imobiliária que anunciou.'
},
{
  n: '03',
  title: 'O custo sobe todo ano',
  body: 'Você paga mais para competir pela mesma atenção do mesmo público.'
},
{
  n: '04',
  title: 'Você não controla a regra',
  body: 'Quando o portal muda, muda o seu resultado. Zero previsibilidade.'
},
{
  n: '05',
  title: 'Já tentou tráfego pago e não deu',
  body: 'A campanha entrou no ar, vieram leads ruins, e o investimento foi embora.'
}];


const Problem = () =>
<section className="section section-tight pp-problem">
    <div className="wrap">
      <div className="pp-problem-head reveal">
        <div className="eyebrow">
          <span className="dot" />
          Onde a operação está hoje
        </div>
        <h2 className="section-title">
          Se você tem uma imobiliária,<br />
          <em className="serif-italic">provavelmente já passou por isso.</em>
        </h2>
      </div>

      <div className="pp-problem-grid">
        {PROBLEMS.map((p, i) =>
      <div key={p.n} className="pp-problem-card reveal" style={{ transitionDelay: `${i * 60}ms` }}>
            <div className="pp-problem-n">{p.n}</div>
            <h3 className="pp-problem-title">{p.title}</h3>
            <p className="pp-problem-body">{p.body}</p>
          </div>
      )}
        <div className="pp-problem-summary reveal" style={{ transitionDelay: `${PROBLEMS.length * 60}ms` }}>
          <div className="pp-problem-summary-mark">
            <SparkIcon className="" />
          </div>
          <p>
            O problema quase nunca é o canal.
            <br />
            <em className="serif-italic">É a falta de método para operar nele.</em>
          </p>
        </div>
      </div>
    </div>
  </section>;


// Data callout — 43% CRM + 400% velocidade de resposta
const DataCallout = () =>
<section className="section pp-data">
    <div className="wrap">
      <div className="pp-data-head reveal">
        <div className="eyebrow"><span className="dot" /> O que o mercado mostra</div>
        <h2 className="section-title">
          O problema raramente é a falta<br />
          de interesse do comprador.<br />
          <em className="serif-italic">É a estrutura de como os leads chegam.</em>
        </h2>
      </div>

      <div className="pp-data-grid">
        <div className="card pp-data-card reveal">
          <div className="pp-data-num">
            <span className="pp-data-num-big">43</span>
            <span className="pp-data-num-pct">%</span>
          </div>
          <div className="pp-data-text">
            <strong>das imobiliárias no Brasil integram seus leads com CRM.</strong>
            <span>A maior parte ainda perde negócio na cadência de atendimento, não na geração.</span>
          </div>
          <div className="pp-data-src">Leadster · Panorama BR 2025</div>
        </div>

        <div className="card pp-data-card pp-data-card-hi reveal" style={{ transitionDelay: '120ms' }}>
          <div className="pp-data-num">
            <span className="pp-data-num-big">400</span>
            <span className="pp-data-num-pct">%</span>
            <span className="pp-data-num-mod">+</span>
          </div>
          <div className="pp-data-text">
            <strong>mais conversão quando o lead é atendido em até 5 minutos</strong>
            <span>comparado a leads atendidos depois de uma hora.</span>
          </div>
          <div className="pp-data-meter">
            <div className="pp-data-meter-row">
              <span>≤ 5 min</span>
              <div className="pp-data-meter-bar"><div style={{ width: '100%' }} /></div>
              <span className="pp-data-meter-val">5x</span>
            </div>
            <div className="pp-data-meter-row dim">
              <span>≥ 1h</span>
              <div className="pp-data-meter-bar"><div style={{ width: '20%' }} /></div>
              <span className="pp-data-meter-val">1x</span>
            </div>
          </div>
        </div>
      </div>

      <p className="pp-data-foot lead reveal">
        Existe um caminho diferente: construir um <em className="serif-italic">canal próprio</em> de aquisição,
        onde os leads chegam direto para você, com segmentação por região, padrão de imóvel e momento de compra.
      </p>
    </div>
  </section>;


// Método PRO — 3 phases
const METODO = [
{
  letter: 'P',
  name: 'Posicionamento',
  full: 'Posicionamento da oferta',
  body: 'Antes de qualquer anúncio, mapeamos o imóvel, o padrão, o público e o ângulo de comunicação. Imóvel de alto padrão não se vende com a mesma linguagem que imóvel popular.',
  chips: ['Mapeamento de público', 'Ângulo por faixa', 'Pesquisa de região']
},
{
  letter: 'R',
  name: 'Rotas',
  full: 'Rotas de aquisição',
  body: 'Google Ads para capturar quem já está buscando. Meta Ads para construir desejo antes da busca. Remarketing para recuperar quem não fechou. WhatsApp para converter em conversa real.',
  chips: ['Google Ads', 'Meta Ads', 'Remarketing', 'WhatsApp']
},
{
  letter: 'O',
  name: 'Otimização',
  full: 'Otimização do funil',
  body: 'Análise contínua de CPL, qualidade dos leads, criativos, copy e alinhamento comercial. Cada mês a operação evolui com base em dados reais, não em suposição.',
  chips: ['CPL semanal', 'Qualidade de lead', 'Rotação de criativo', 'Alinhamento comercial']
}];


const Method = () => {
  const [active, setActive] = React.useState(0);
  return (
    <section id="metodo" className="section pp-method">
      <div className="wrap">
        <div className="pp-method-head reveal">
          <div className="eyebrow"><span className="dot" /> Mecanismo único</div>
          <h2 className="section-title">
            Método PRO de<br />
            <em className="serif-italic">aquisição imobiliária.</em>
          </h2>
          <p className="lead pp-method-lead">
            Três fases que funcionam como um ciclo contínuo, não como uma campanha avulsa.
          </p>
        </div>

        <div className="pp-method-stage reveal">
          {/* Tabs */}
          <div className="pp-method-tabs" role="tablist">
            {METODO.map((m, i) =>
            <button
              key={m.letter}
              role="tab"
              aria-selected={active === i}
              className={`pp-method-tab ${active === i ? 'is-active' : ''}`}
              onClick={() => setActive(i)}>
              
                <span className="pp-method-tab-letter">{m.letter}</span>
                <span className="pp-method-tab-name">{m.name}</span>
                <span className="pp-method-tab-step">0{i + 1}</span>
              </button>
            )}
          </div>

          {/* Panel */}
          <div className="pp-method-panel">
            <div className="pp-method-letter-big" aria-hidden="true">
              {METODO[active].letter}
            </div>
            <div className="pp-method-panel-body">
              <div className="pp-method-fase">Fase 0{active + 1} de 03</div>
              <h3 className="pp-method-fullname">{METODO[active].full}</h3>
              <p className="pp-method-text">{METODO[active].body}</p>
              <div className="pp-method-chips">
                {METODO[active].chips.map((c) =>
                <span key={c} className="pp-method-chip">{c}</span>
                )}
              </div>
            </div>
          </div>

          {/* Cycle indicator */}
          <div className="pp-method-cycle" aria-hidden="true">
            <span>Ciclo contínuo</span>
            <svg width="60" height="14" viewBox="0 0 60 14" fill="none">
              <path d="M2 7 L52 7 M46 2 L52 7 L46 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { Problem, DataCallout, Method, PROBLEMS, METODO });