// ───────────────────────────────────────────────
// Nav + Hero + Trust Strip
// ───────────────────────────────────────────────

const Logo = () =>
<a href="#" className="pp-logo" aria-label="PáduaPRO">
    <span className="pp-logo-mark" aria-hidden="true">
      <svg width="38" height="38" viewBox="0 0 38 38" fill="none">
        <path d="M3 30 L34 30" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        <rect x="6" y="24" width="4" height="6" rx="0.5" stroke="currentColor" strokeWidth="1.5" fill="none" />
        <rect x="13" y="19" width="4" height="11" rx="0.5" stroke="currentColor" strokeWidth="1.5" fill="none" />
        <rect x="20" y="14" width="4" height="16" rx="0.5" stroke="currentColor" strokeWidth="1.5" fill="none" />
        <path d="M4 22 C 14 22, 22 18, 31 7" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" fill="none" />
        <path d="M25 5 L32 6 L31 13" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    </span>
    <span className="pp-logo-word">
      <span className="pp-logo-padua">PÁDUA</span><span className="pp-logo-pro">PRO</span>
    </span>
  </a>;


const Nav = () =>
<header className="pp-nav">
    <div className="wrap pp-nav-row">
      <Logo />
      <nav className="pp-nav-links" aria-label="Principal">
        <a href="#metodo">Método</a>
        <a href="#cases">Cases</a>
        <a href="#oferta">Oferta</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div className="pp-nav-cta">
        <a href="#diagnostico" className="btn btn-ghost">Diagnóstico gratuito</a>
      </div>
    </div>
  </header>;


const SparkIcon = ({ className = "spark" }) =>
<svg className={className} viewBox="0 0 12 12" fill="none" aria-hidden="true">
    <path d="M6 0 L7.2 4.8 L12 6 L7.2 7.2 L6 12 L4.8 7.2 L0 6 L4.8 4.8 Z" fill="currentColor" />
  </svg>;


const CheckIcon = ({ className = "check" }) =>
<svg className={className} viewBox="0 0 18 18" fill="none" aria-hidden="true">
    <path d="M3.5 9.5 L7 13 L14.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


// Hero variations (Bloco 1)
const HERO_VARIANTS = {
  A: {
    pre: 'Você paga portal todo mês',
    em: 'e o lead já chega',
    post: 'falando com 8 concorrentes ao mesmo tempo.'
  },
  B: {
    pre: 'Sua imobiliária não precisa mais',
    em: 'depender de portal',
    post: 'para ter leads todos os dias.'
  },
  C: {
    pre: 'Pare de competir com',
    em: '10 imobiliárias',
    post: 'pelo mesmo lead. Construa seu canal próprio de aquisição.'
  }
};

// CTA variations (Bloco 4)
const CTA_VARIANTS = {
  A: {
    label: 'Quero uma análise gratuita da minha operação',
    sub: 'Sem custo, sem compromisso. Entrega clara do que pode ser melhorado.'
  },
  B: {
    label: 'Quero construir meu canal próprio de aquisição',
    sub: 'Análise gratuita · Fala direto com o gestor · Resposta em até 48h'
  }
};

const Hero = ({ headlineVariant = 'A', ctaVariant = 'A' }) => {
  const h = HERO_VARIANTS[headlineVariant];
  const c = CTA_VARIANTS[ctaVariant];

  return (
    <section className="pp-hero">
      <div className="pp-hero-bg" aria-hidden="true">
        <div className="pp-hero-orb" />
        <div className="pp-hero-grid" />
      </div>

      <div className="wrap pp-hero-inner">
        <div className="pp-hero-eyebrow">
          <span className="tag tag-accent">
            <SparkIcon />
            Tráfego pago para imobiliárias
          </span>
        </div>

        <h1 className="display pp-hero-h1">
          {h.pre} <em>{h.em}</em> {h.post}
        </h1>

        <p className="lead pp-hero-sub">
          A PáduaPRO é a operação de tráfego pago especializada em imobiliárias.
          Aquisição estruturada com método, sem depender de portal,{' '}
          <span className="hl">com o fundador direto na sua conta.</span>
        </p>

        <div className="pp-hero-cta">
          <div className="pp-cta-block">
            <a href="#diagnostico" className="btn btn-primary btn-lg">
              {c.label}
              <ArrowIcon />
            </a>
            <div className="pp-cta-sub">{c.sub}</div>
          </div>
          <a href="#metodo" className="btn btn-ghost btn-lg">
            Ver o Método PRO
          </a>
        </div>

        <HeroVisual />
      </div>
    </section>);

};

const ArrowIcon = () =>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M3 7 H11 M7 3 L11 7 L7 11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


// Hero visual: Método PRO funnel preview + live metrics card
const HeroVisual = () =>
<div className="pp-hero-visual">
    {/* Left: funnel flow */}
    <div className="pp-funnel card card-hi">
      <div className="pp-funnel-h">
        <div className="tag">
          <SparkIcon />
          Método PRO · em operação
        </div>
        <div className="pp-funnel-status">
          <span className="pp-dot-live" /> Ao vivo
        </div>
      </div>

      <div className="pp-funnel-grid">
        <FunnelNode
        label="Google Ads"
        subline="Intenção alta"
        metric="142"
        unit="cliques/semana"
        letter="G" />
      
        <FunnelNode
        label="Meta Ads"
        subline="Construção de desejo"
        metric="38.2k"
        unit="alcance"
        letter="M"
        active />
      
        <FunnelNode
        label="Remarketing"
        subline="Recuperação"
        metric="4.1x"
        unit="ROAS"
        letter="R" />
      
        <FunnelNode
        label="WhatsApp"
        subline="Conversa real"
        metric="27"
        unit="leads qualificados"
        letter="W"
        accent />
      
      </div>

      <div className="pp-funnel-foot">
        <div className="pp-funnel-stat">
          <span className="pp-stat-num">R$ 38,40</span>
          <span className="pp-stat-lbl">CPL médio · 7 dias</span>
        </div>
        <div className="pp-funnel-bar" aria-hidden="true">
          <div className="pp-funnel-bar-fill" style={{ width: '68%' }} />
        </div>
        <div className="pp-funnel-stat right">
          <span className="pp-stat-num">68%</span>
          <span className="pp-stat-lbl">qualificação</span>
        </div>
      </div>
    </div>

    {/* Right: WhatsApp report preview */}
    <div className="pp-report card">
      <div className="pp-report-h">
        <div className="pp-avatar">PP</div>
        <div>
          <div className="pp-report-name">Paulo Pádua <span className="pp-verified" title="Fundador">✓</span></div>
          <div className="pp-report-sub">Relatório semanal · ter 14:32</div>
        </div>
      </div>

      <div className="pp-msg">
        <div className="pp-msg-bubble">
          <strong>Resumo da semana → Eurico Imóveis Valinhos</strong>
          <div className="pp-msg-body">
            <div>📊 27 leads qualificados · CPL R$ 38,40</div>
            <div>🏠 Cobertura Vinhedo + Valinhos</div>
            <div>🎯 Top criativo: Casa Vinhedo 5 suítes (CTR 4.2%)</div>
          </div>
        </div>
        <div className="pp-msg-time">14:32 ✓✓</div>
      </div>

      <div className="pp-msg pp-msg-mine">
        <div className="pp-msg-bubble pp-msg-bubble-mine">Excelente. Pode subir o orçamento desse imóvel em 30%?

      </div>
        <div className="pp-msg-time">14:34 ✓✓</div>
      </div>

      <div className="pp-msg">
        <div className="pp-msg-bubble">
          Subindo agora. Te confirmo o novo CPL na sexta.
        </div>
        <div className="pp-msg-time">14:34 ✓✓</div>
      </div>
    </div>
  </div>;


const FunnelNode = ({ label, subline, metric, unit, letter, active, accent }) =>
<div className={`pp-fn-node ${active ? 'is-active' : ''} ${accent ? 'is-accent' : ''}`}>
    <div className="pp-fn-letter">{letter}</div>
    <div className="pp-fn-body">
      <div className="pp-fn-label">{label}</div>
      <div className="pp-fn-sub">{subline}</div>
    </div>
    <div className="pp-fn-metric">
      <span className="pp-fn-num">{metric}</span>
      <span className="pp-fn-unit">{unit}</span>
    </div>
  </div>;


// Trust strip (Bloco 8 numbers)
const TrustStrip = () =>
<section className="pp-trust">
    <div className="wrap">
      <div className="pp-trust-label">A operação em números</div>
      <div className="pp-trust-grid">
        <Stat num="+4" suffix="anos" label="dedicados ao mercado imobiliário" />
        <Stat num="3" suffix="faixas" label="alto, médio-alto e popular" />
        <Stat num="12+" suffix="meses" label="permanência média dos clientes" />
        <Stat num="Campinas" label="e interior paulista · expansão por região" wide />
      </div>
    </div>
  </section>;


const Stat = ({ num, suffix, label, wide }) =>
<div className={`pp-stat ${wide ? 'wide' : ''}`}>
    <div className="pp-stat-row">
      <span className="pp-stat-big">{num}</span>
      {suffix && <span className="pp-stat-suf">{suffix}</span>}
    </div>
    <div className="pp-stat-lbl">{label}</div>
  </div>;


Object.assign(window, {
  Logo, Nav, Hero, TrustStrip, SparkIcon, CheckIcon, ArrowIcon,
  HERO_VARIANTS, CTA_VARIANTS
});