// ───────────────────────────────────────────────
// Objections + Guarantee + Urgency
// ───────────────────────────────────────────────

const OBJECTIONS = [
  {
    q: 'Já uso portal e está funcionando para mim.',
    a: 'Portal funciona e deve continuar na estratégia. O ponto é que depender exclusivamente dele é um risco real: quando muda a regra ou sobe o preço, o seu resultado muda junto. Construir um canal próprio em paralelo não substitui o portal, protege você e cria previsibilidade que o portal não oferece.'
  },
  {
    q: 'Já tentei tráfego pago antes e não funcionou.',
    a: 'Tráfego pago sem método vira despesa rapidamente, isso é real e muito comum no mercado imobiliário. Campanha genérica, sem posicionamento por faixa de imóvel, sem estrutura de funil, sem alinhamento comercial: o lead chega ruim ou não é atendido a tempo. O que muda com a PáduaPRO é a forma como a operação é conduzida: método em 3 fases, análise semanal de qualidade, ajuste contínuo. A experiência anterior é aprendizado válido, não impeditivo.'
  },
  {
    q: 'Já tenho uma agência ou equipe de tráfego.',
    a: 'Vale perguntar: essa equipe tem especialização específica em imobiliário? Conhece as diferenças de comunicação entre alto padrão e popular? Opera com método estruturado por faixa e região? Muitas agências generalistas aplicam o mesmo framework de e-commerce ou serviço em contas imobiliárias. A PáduaPRO trabalha exclusivamente com imobiliárias, e essa especialização muda o que é possível construir.'
  }
];

const Objections = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section pp-objections">
      <div className="wrap">
        <div className="pp-obj-head reveal">
          <div className="eyebrow"><span className="dot" /> Você provavelmente está pensando</div>
          <h2 className="section-title">
            Três objeções honestas,<br/>
            <em className="serif-italic">três respostas diretas.</em>
          </h2>
        </div>

        <div className="pp-obj-list reveal">
          {OBJECTIONS.map((o, i) => (
            <article
              key={i}
              className={`pp-obj ${open === i ? 'is-open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="pp-obj-head-row">
                <div className="pp-obj-num">0{i + 1}</div>
                <div className="pp-obj-q">"{o.q}"</div>
                <button className="pp-obj-toggle" aria-label={open === i ? 'Fechar' : 'Abrir'}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 7 H11 M7 3 V11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                  </svg>
                </button>
              </div>
              <div className="pp-obj-a-wrap">
                <p className="pp-obj-a">{o.a}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// Guarantee (Bloco 11)
const GUARANTEES = [
  {
    icon: 'review',
    title: 'Revisão em 30 dias',
    body: 'Se em 30 dias a qualidade dos leads ou a cadência de entrega não estiver no padrão acordado no onboarding, revisamos a estratégia.'
  },
  {
    icon: 'report',
    title: 'Relatório toda semana, comentado',
    body: 'Dados reais por imóvel e por campanha. Sem precisar perguntar, sem dashboard genérico que ninguém entende.'
  },
  {
    icon: 'founder',
    title: 'Canal direto com o fundador',
    body: 'Paulo Pádua é o gestor responsável pela sua conta. Sem intermediário, sem fila de atendimento.'
  },
  {
    icon: 'access',
    title: 'Transparência total de dados',
    body: 'Acesso ao painel de campanhas a qualquer momento, sem filtro. Você vê tudo que a operação vê.'
  }
];

const GuaranteeIcon = ({name}) => {
  const ico = {
    review: (
      <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="9" />
        <path d="M12 7 V12 L15 14" />
      </g>
    ),
    report: (
      <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <rect x="5" y="4" width="14" height="17" rx="2" />
        <path d="M9 9 H15 M9 13 H15 M9 17 H12" />
      </g>
    ),
    founder: (
      <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M8 12 H16 M8 8 H13" />
        <path d="M21 17 V6 a2 2 0 0 0 -2 -2 H5 a2 2 0 0 0 -2 2 V14 a2 2 0 0 0 2 2 H7 L11 20 L11 16 H19 a2 2 0 0 0 2 -2 Z" />
      </g>
    ),
    access: (
      <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="3" />
        <path d="M2 12 C 5 7 8 5 12 5 C 16 5 19 7 22 12 C 19 17 16 19 12 19 C 8 19 5 17 2 12 Z" />
      </g>
    )
  }[name];
  return <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">{ico}</svg>;
};

const Guarantee = () => (
  <section className="section pp-guarantee">
    <div className="wrap">
      <div className="pp-grt-head reveal">
        <div className="eyebrow"><span className="dot" /> O compromisso</div>
        <h2 className="section-title">
          Não vendemos promessa de venda.<br/>
          <em className="serif-italic">Vendemos operação estruturada.</em>
        </h2>
        <p className="lead pp-grt-lead">
          Com método, dados e comunicação direta. Você acompanha tudo semana a semana.
        </p>
      </div>

      <div className="pp-grt-grid">
        {GUARANTEES.map((g, i) => (
          <div key={g.title} className="pp-grt-card reveal" style={{transitionDelay: `${i * 70}ms`}}>
            <div className="pp-grt-icon">
              <GuaranteeIcon name={g.icon} />
            </div>
            <h3 className="pp-grt-title">{g.title}</h3>
            <p className="pp-grt-body">{g.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// Urgency (Bloco 12)
const REGIONS = [
  { city: 'Vinhedo',     tiers: ['filled', 'open', 'open'] },
  { city: 'Valinhos',    tiers: ['filled', 'open', 'open'] },
  { city: 'Campinas',    tiers: ['filled', 'open', 'open'] },
  { city: 'Hortolândia', tiers: ['open', 'open', 'filled'] },
  { city: 'Sumaré',      tiers: ['open', 'open', 'open'] },
  { city: 'Indaiatuba',  tiers: ['open', 'open', 'open'] },
  { city: 'Paulínia',    tiers: ['open', 'open', 'open'] },
];

const Urgency = () => (
  <section className="section pp-urgency">
    <div className="wrap">
      <div className="pp-urg-card reveal">
        <div className="pp-urg-mark" aria-hidden="true">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
            <circle cx="22" cy="22" r="20" stroke="currentColor" strokeWidth="1" strokeDasharray="2 4" opacity="0.4" />
            <circle cx="22" cy="22" r="14" stroke="currentColor" strokeWidth="1" strokeDasharray="2 3" opacity="0.6" />
            <circle cx="22" cy="22" r="8" fill="currentColor" fillOpacity="0.2" />
            <circle cx="22" cy="22" r="3" fill="currentColor" />
          </svg>
        </div>

        <div className="pp-urg-body">
          <div className="eyebrow"><span className="dot" /> Disponibilidade por região</div>
          <h2 className="pp-urg-title">
            Exclusividade por padrão e região,<br/>
            <em className="serif-italic">não por cidade inteira.</em>
          </h2>
          <p className="pp-urg-text">
            A PáduaPRO não atende imobiliárias concorrentes diretas no mesmo
            <strong> padrão de imóvel + região</strong>. Como cada cidade tem alto padrão,
            médio-alto e popular operando em paralelo, sua imobiliária pode entrar
            mesmo onde já existe um cliente ativo, desde que em outro padrão.
          </p>
          <p className="pp-urg-text pp-urg-text-dim">
            Quem fecha primeiro garante a exclusividade do seu padrão na sua cidade.
          </p>
        </div>

        <div className="pp-urg-map" aria-hidden="true">
          <div className="pp-urg-map-h">
            <span>Cidade</span>
            <span title="Alto padrão">A</span>
            <span title="Médio-alto">M</span>
            <span title="Popular">P</span>
          </div>
          <div className="pp-urg-region">
            {REGIONS.map(r => (
              <div key={r.city} className="pp-urg-row">
                <span className="pp-urg-city">{r.city}</span>
                {r.tiers.map((s, i) => (
                  <span key={i} className={`pp-urg-cell pp-urg-cell-${s}`} title={s === 'filled' ? 'ocupado' : 'aberto'}>
                    {s === 'filled' ? <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="currentColor"/></svg>
                                    : <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="3.4" fill="none" stroke="currentColor" strokeWidth="1.2"/></svg>}
                  </span>
                ))}
              </div>
            ))}
          </div>
          <div className="pp-urg-legend">
            <span className="pp-urg-leg-item"><span className="pp-urg-leg-dot filled"/> ocupado</span>
            <span className="pp-urg-leg-item"><span className="pp-urg-leg-dot open"/> aberto</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  Objections, Guarantee, Urgency,
  OBJECTIONS, GUARANTEES
});