// ───────────────────────────────────────────────
// Benefits + Cases + Offer
// ───────────────────────────────────────────────

const BENEFITS = [
{
  icon: 'channel',
  title: 'Leads chegam direto para você',
  body: 'Você para de competir no mesmo espaço que 10 imobiliárias e começa a operar um canal próprio.'
},
{
  icon: 'chart',
  title: 'Acompanhamento semanal por imóvel',
  body: 'Custo por lead e desempenho de cada imóvel toda semana, sem precisar perguntar.'
},
{
  icon: 'target',
  title: 'Comunicação calibrada por padrão',
  body: 'Seus imóveis aparecem no momento exato em que o comprador está pesquisando, com mensagem certa para a faixa e região.'
},
{
  icon: 'user',
  title: 'Fala direto com o gestor da conta',
  body: 'Sem intermediário, sem fila, sem júnior aprendendo no seu investimento. Paulo Pádua no comando.'
},
{
  icon: 'shield',
  title: 'Exclusividade por região',
  body: 'A PáduaPRO não atende imobiliárias concorrentes diretas na mesma cidade. Sua estratégia fica protegida.'
},
{
  icon: 'cycle',
  title: 'Operação que evolui mês a mês',
  body: 'Conduzida com método e dados, não com tentativa e erro. Cada ciclo refina o próximo.'
}];


const BenefitIcon = ({ name }) => {
  const ico = {
    channel:
    <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 12 H21" />
        <path d="M17 8 L21 12 L17 16" />
        <circle cx="6" cy="6" r="2" />
        <circle cx="6" cy="18" r="2" />
      </g>,

    chart:
    <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 19 V5" />
        <path d="M3 19 H21" />
        <path d="M7 15 L11 11 L14 13 L19 7" />
        <circle cx="19" cy="7" r="1" fill="currentColor" />
      </g>,

    target:
    <g fill="none" stroke="currentColor" strokeWidth="1.4">
        <circle cx="12" cy="12" r="9" />
        <circle cx="12" cy="12" r="5" />
        <circle cx="12" cy="12" r="1.5" fill="currentColor" />
      </g>,

    user:
    <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="8" r="3.5" />
        <path d="M4 20 C 4 15 8 13 12 13 C 16 13 20 15 20 20" />
      </g>,

    shield:
    <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3 L20 6 V12 C 20 16.5 16.5 19.5 12 21 C 7.5 19.5 4 16.5 4 12 V6 L12 3 Z" />
        <path d="M9 12 L11 14 L15 10" />
      </g>,

    cycle:
    <g fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 12 A 8 8 0 0 1 18 7" />
        <path d="M15 4 L18 7 L21 4" />
        <path d="M20 12 A 8 8 0 0 1 6 17" />
        <path d="M9 20 L6 17 L3 20" />
      </g>

  }[name];
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
      {ico}
    </svg>);

};

const Benefits = () =>
<section className="section pp-benefits">
    <div className="wrap">
      <div className="pp-benefits-head reveal">
        <div className="eyebrow"><span className="dot" /> Transformação, não features</div>
        <h2 className="section-title">
          O que muda na sua operação<br />
          <em className="serif-italic">a partir do mês um.</em>
        </h2>
      </div>

      <div className="pp-benefits-grid">
        {BENEFITS.map((b, i) =>
      <div key={b.title} className="pp-benefit-card reveal" style={{ transitionDelay: `${i * 50}ms` }}>
            <div className="pp-benefit-icon">
              <BenefitIcon name={b.icon} />
            </div>
            <h3 className="pp-benefit-title">{b.title}</h3>
            <p className="pp-benefit-body">{b.body}</p>
          </div>
      )}
      </div>
    </div>
  </section>;


// Cases (Bloco 8)
const CASES = [
{
  name: 'Eurico Imóveis',
  tier: 'Alto padrão',
  region: 'Valinhos / Vinhedo',
  duration: '12+ meses ativos',
  range: 'R$ 1M — R$ 10M',
  detail: 'Google Ads + Meta Ads com captação de público regional e migrante da capital paulista.',
  metrics: [
  { label: 'CPL médio', value: 'R$ 38,40' },
  { label: 'Imóveis ativos', value: '8 — 12' },
  { label: 'Tempo de operação', value: '12+ meses' }]

},
{
  name: 'Valor Imóveis',
  tier: 'Médio-alto',
  region: 'Campinas',
  duration: 'Operação ativa',
  range: '8 a 12 imóveis em paralelo',
  detail: 'Meta Ads com rotação de imóveis divulgados simultaneamente, acompanhamento semanal por imóvel e ajustes contínuos de criativo e segmentação.',
  metrics: [
  { label: 'Rotação semanal', value: 'sim' },
  { label: 'Ajuste de criativo', value: 'contínuo' },
  { label: 'Foco', value: 'Meta Ads' }]

},
{
  name: 'Empreendimentos populares',
  tier: 'Popular',
  region: 'Hortolândia / Campinas',
  duration: '2 anos contínuos',
  range: 'R$ 300k — R$ 500k',
  detail: 'Comunicação focada em primeiro imóvel e condições de financiamento. Operação consistente desde 2024.',
  metrics: [
  { label: 'Duração', value: '2 anos' },
  { label: 'Faixa', value: 'R$ 300-500k' },
  { label: 'Ângulo', value: '1º imóvel' }]

}];


const Cases = () =>
<section id="cases" className="section pp-cases">
    <div className="wrap">
      <div className="pp-cases-head reveal">
        <div className="eyebrow"><span className="dot" /> Cases reais</div>
        <h2 className="section-title">
          Operações ativas em<br />
          <em className="serif-italic">três faixas do mercado.</em>
        </h2>
      </div>

      <div className="pp-cases-grid">
        {CASES.map((c, i) =>
      <article key={c.name} className="pp-case reveal" style={{ transitionDelay: `${i * 80}ms` }}>
            <div className="pp-case-h">
              <div className="pp-case-tier">{c.tier}</div>
              <div className="pp-case-dur">{c.duration}</div>
            </div>
            <h3 className="pp-case-name">{c.name}</h3>
            <div className="pp-case-region">{c.region} · {c.range}</div>
            <p className="pp-case-detail">{c.detail}</p>
            <div className="pp-case-metrics">
              {c.metrics.map((m) =>
          <div key={m.label} className="pp-case-metric">
                  <div className="pp-case-metric-v">{m.value}</div>
                  <div className="pp-case-metric-l">{m.label}</div>
                </div>
          )}
            </div>
          </article>
      )}
      </div>

      {/* Testimonial placeholder */}
      <div className="pp-testimonial reveal">
        <div className="pp-testimonial-mark">"</div>
        <blockquote className="pp-testimonial-quote">
          <span className="pp-placeholder">
            Depoimento do dono · resultado em leads gerados · tempo de parceria · percepção sobre a operação.
          </span>
        </blockquote>
        <div className="pp-testimonial-meta">
          <div className="pp-testimonial-avatar pp-placeholder-block" />
          <div>
            <div className="pp-testimonial-name pp-placeholder">[Nome do dono]</div>
            <div className="pp-testimonial-sub pp-placeholder">[Imobiliária · cidade]</div>
          </div>
          <div className="pp-testimonial-tag">
            <SparkIcon />
            A capturar antes de publicar
          </div>
        </div>
      </div>
    </div>
  </section>;


// Offer (Bloco 9)
const OFFER_ITEMS = [
{ title: 'Onboarding estruturado', sub: 'diagnóstico e configuração completa' },
{ title: 'Gestão ativa das campanhas', sub: 'Google Ads e/ou Meta Ads' },
{ title: 'Relatório semanal via WhatsApp', sub: 'dado vivo, comentado, por imóvel' },
{ title: 'Reunião mensal estratégica', sub: 'revisão de resultados e próximo ciclo' },
{ title: 'Canal direto com o fundador', sub: 'Paulo Pádua, sem intermediário' },
{ title: 'Exclusividade por segmento e região', sub: 'sua estratégia protegida' }];


const Offer = ({ ctaVariant = 'A' }) => {
  const c = CTA_VARIANTS[ctaVariant];
  return (
    <section id="oferta" className="section pp-offer">
      <div className="wrap">
        <div className="pp-offer-head reveal">
          <div className="eyebrow"><span className="dot" /> O que está incluso</div>
          <h2 className="section-title">
            A operação PáduaPRO,<br />
            <em className="serif-italic">item por item.</em>
          </h2>
        </div>

        <div className="pp-offer-grid">
          <div className="pp-offer-list reveal">
            {OFFER_ITEMS.map((o) =>
            <div key={o.title} className="pp-offer-item">
                <CheckIcon />
                <div>
                  <div className="pp-offer-item-t">{o.title}</div>
                  <div className="pp-offer-item-s">{o.sub}</div>
                </div>
              </div>
            )}
          </div>

          <aside className="pp-offer-side reveal" style={{ transitionDelay: '120ms' }}>
            <div className="pp-offer-pricing card card-hi">
              <div className="tag tag-accent">
                <SparkIcon />
                Investimento mínimo em mídia
              </div>
              <div className="pp-price-row">
                <span className="pp-price-from">a partir de</span>
                <span className="pp-price-big">R$ 1.500</span>
                <span className="pp-price-per">/mês</span>
              </div>
              <p className="pp-price-note">
                Para médio e alto padrão, recomendado a partir de <strong>R$ 3.000/mês</strong>.
              </p>
              <div className="pp-price-divider" />
              <p className="pp-price-explain">
                <strong>Por que mídia, e não gestão?</strong>
                Um lead em portal disputa atenção com 8 a 10 imobiliárias. Um lead capturado pelo seu canal próprio chega direto para você. A diferença não está só no custo, está no controle, na exclusividade e na previsibilidade. A proposta de gestão é personalizada por escopo e plataformas.
              



              </p>
              <a href="#diagnostico" className="btn btn-primary btn-lg pp-offer-cta">
                {c.label}
                <ArrowIcon />
              </a>
              <div className="pp-offer-cta-sub">{c.sub}</div>
            </div>
          </aside>
        </div>
      </div>
    </section>);

};

Object.assign(window, { Benefits, Cases, Offer, BENEFITS, CASES, OFFER_ITEMS });