/* Page sections for R3 Club landing — all copy from r3club-landing-page.md */
const { useState: useStateS, useEffect: useEffectS } = React;


/* ---------- CountUp ---------- */
function CountUp({ end, prefix = "", suffix = "", duration = 1400, delay = 0 }) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    let raf = 0;
    let start;
    const startAt = performance.now() + delay;
    const tick = (now) => {
      if (now < startAt) { raf = requestAnimationFrame(tick); return; }
      if (start === undefined) start = now;
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(end * eased));
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [end, duration, delay]);
  return <>{prefix}{val}{suffix}</>;
}

/* ---------- Hero ---------- */
function Hero({ heroVariant, ctaVariant, subVariant, seatsLeft, imageSrc, imageAlt = "" }) {
  const headlines = {
    A: <>Conhecimento que conecta, experiência que transforma.</>,
    B: <>Um clube anual para<br />empresários e<br />executivos C-Level.</>,
    C: <>Lote 1 aberto.<br />Dez vagas.</>
  };
  const ctas = {
    A: "Solicitar informações sobre o Lote 1",
    B: "Quero garantir minha vaga",
    C: "Falar com um dos fundadores"
  };
  const subs = {
    A: "O R3 Club é um ecossistema de experiência executiva, desenvolvimento empresarial e networking estratégico criado para empoderar lideranças, acelerar negócios e conectar profissionais que buscam evolução constante em um mercado cada vez mais dinâmico, competitivo e colaborativo.",
    B: "Clube anual para empresários e C-Level. Imersão, jantares trimestrais, visitas guiadas e mentorias com o Conselho R3 Club."
  };
  return (
    <section className="r3-hero" id="top">
      <div className="r3-hero-bg" aria-hidden="true">
        {imageSrc
          ? <img src={imageSrc} alt={imageAlt} className="r3-hero-bg-img" loading="eager" />
          : <div className="r3-hero-bg-img r3-hero-bg-placeholder">
              <span>// imagem editorial — ambiente executivo, plano amplo, tom sóbrio</span>
            </div>
        }
      </div>
      <div className="r3-hero-overlay" aria-hidden="true" />
      <div className="r3-hero-glow" aria-hidden="true" />

      <div className="r3-hero-content">
        <div className="r3-eyebrow r3-reveal" style={{ "--r3-delay": "0ms" }}>
          <span className="r3-eyebrow-mark">R3CLUB</span>
          <span className="r3-eyebrow-sep">·</span>
          <span>Experiência Executiva e Networking Estratégico</span>
        </div>

        <h1 className="r3-h1 r3-reveal" style={{ "--r3-delay": "120ms" }}>
          {headlines[heroVariant]}
        </h1>

        <p className="r3-hero-sub r3-reveal" style={{ "--r3-delay": "320ms" }}>
          {subs[subVariant]}
        </p>

        <div className="r3-hero-ctas r3-reveal" style={{ "--r3-delay": "460ms" }}>
          <a href="#form" className="r3-btn r3-btn-primary">
            <span>{ctas[ctaVariant]}</span>
            <span className="r3-btn-arrow" aria-hidden="true">→</span>
          </a>
          <a href="#calendario" className="r3-btn r3-btn-ghost">
            Conheça o programa <span aria-hidden="true">↓</span>
          </a>
        </div>

        <div className="r3-hero-meta r3-reveal" style={{ "--r3-delay": "640ms" }}>
          <div>
            <span className="r3-meta-num"><CountUp end={10} delay={700} /></span>
            <span>vagas no Lote 1</span>
          </div>
          <div>
            <span className="r3-meta-num"><CountUp end={seatsLeft} delay={900} /></span>
            <span>restantes</span>
          </div>
          <div>
            <span className="r3-meta-num"><CountUp end={30} prefix="R$ " suffix="k" delay={1100} /></span>
            <span>preço de lote</span>
          </div>
        </div>
      </div>

      <a href="#manifesto" className="r3-hero-cue" aria-label="Rolar para a apresentação">
        <span className="r3-hero-cue-line" aria-hidden="true" />
        <span className="r3-hero-cue-label">Continuar</span>
      </a>
    </section>);

}


/* ---------- Apresentação ---------- */
function Apresentacao() {
  return (
    <section className="r3-section r3-mesa" id="manifesto" data-screen-label="03 Apresentação">
      <div className="r3-mesa-grid">
        <div>
          <SectionHeader number="01" eyebrow="Apresentação">
            Um seleto grupo de empresários e executivos.
          </SectionHeader>
          <div className="r3-prose" data-reveal="" style={{ "--reveal-delay": "120ms" }}>
            <p>
              Criado para líderes que entendem que crescimento profissional não acontece apenas através da teoria, nossas experiências foram desenhadas para gerar aprendizado real, visão de mercado e desenvolvimento prático da liderança em um cenário corporativo cada vez mais dinâmico e desafiador.
            </p>
            <ul className="r3-no-list">
              <li><span>Não é curso.</span></li>
              <li><span>Não é evento solto.</span></li>
              <li><span>Não é comunidade aberta.</span></li>
            </ul>
            <blockquote className="r3-pull">
              Grandes decisões exigem grandes mesas.
            </blockquote>
          </div>
        </div>
        <div className="r3-mesa-art">
          <img src="assets/images/executives.jpg" alt="Ambiente executivo" className="r3-mesa-img" data-reveal="" style={{ "--reveal-delay": "200ms" }} />
          
        </div>
      </div>
    </section>);

}

/* ---------- Calendário ---------- */
function Calendario() {
  const items = [
  {
    n: "I",
    kicker: "Imersão",
    title: "Imersão Executiva de Alta Performance",
    cadence: "1 dia · 8h às 17h30",
    body:
    "Um dia, das 8h às 17h30. Quatro painéis com gestores C-Level. Business clinics e resolução de problemas reais."
  },
  {
    n: "II",
    kicker: "Jantares",
    title: "Quatro jantares trimestrais com Grupo C-Level",
    cadence: "4× por ano · ambiente reservado",
    body:
    "Quatro encontros por ano, em ambiente reservado, com a totalidade do grupo."
  },
  {
    n: "III",
    kicker: "Visitas",
    title: "Duas visitas guiadas em empresas referência",
    cadence: "2× por ano · in loco",
    body:
    "Bastidores de inovação, benchmarking guiado, conversas privadas com lideranças."
  },
  {
    n: "IV",
    kicker: "Mentorias",
    title: "Doze mentorias com o Conselho R3 Club",
    cadence: "12× por ano · mensal",
    body:
    "Uma mentoria por mês. O conselho R3 Club com você, dividindo decisões e ampliando as possibilidades de crescimento e novos negócios."
  }];

  return (
    <section className="r3-section r3-calendar" id="calendario" data-screen-label="04 O ano">
      <SectionHeader number="02" eyebrow="Programa">
        O calendário.
      </SectionHeader>

      <div className="r3-cal-list">
        {items.map((it, i) =>
        <article className="r3-cal-row" key={it.n} data-reveal="up-sm" style={{ "--reveal-delay": `${i * 90}ms` }}>
            <div className="r3-cal-num">{it.n}</div>
            <div className="r3-cal-meta">
              <span className="r3-cal-kicker">{it.kicker}</span>
              <span className="r3-cal-cadence">{it.cadence}</span>
            </div>
            <h3 className="r3-cal-title">{it.title}</h3>
            <p className="r3-cal-body">{it.body}</p>
          </article>
        )}
      </div>
    </section>);

}

/* ---------- Para quem é ---------- */
function QuemSenta() {
  const yes = [
  "Você é empresário, fundador ou C-Level com operação rodando.",
  "Você procura pares à altura.",
  "Você quer aplicar no curto prazo o que conversa em alto nível.",
  "Você entende que networking estratégico exige presença e contribuição.",
  "Você espera retorno financeiro garantido em prazo específico."];

  return (
    <section className="r3-section r3-quem" data-screen-label="05 Para quem é">
      <SectionHeader number="03" eyebrow="Curadoria">
        Para quem é.
      </SectionHeader>

      <div className="r3-quem-grid">
        <div className="r3-quem-col r3-quem-yes" data-reveal="">
          <ul>
            {yes.slice(0, 3).map((t, i) => <li key={i}><span className="r3-bullet" aria-hidden="true">●</span>{t}</li>)}
          </ul>
        </div>
        <div className="r3-quem-col r3-quem-yes" data-reveal="" style={{ "--reveal-delay": "140ms" }}>
          <ul>
            {yes.slice(3).map((t, i) => <li key={i}><span className="r3-bullet" aria-hidden="true">●</span>{t}</li>)}
          </ul>
        </div>
      </div>
    </section>);

}

/* ---------- Founders ---------- */
function Founders() {
  const f = [
  {
    name: "Raul Maudonnet",
    role: "Fundador",
    bio: "Empresário com mais de 30 anos em desenvolvimento comercial. Administrador, advogado, pós-graduado em Negociação Avançada pela FGV.",
    quote: "Minha história começa como vendedor.",
    img: "assets/images/founders/raul.jpg"
  },
  {
    name: "Ricardo Tozzi",
    role: "Fundador",
    bio: "Executivo com trajetória em IBM, Motorola, Samsung e Sony Mobile. Graduado pela Unicamp, pós-graduado pela FGV. Especialista em operações, supply chain e relacionamento estratégico.",
    quote: "Conectar pessoas certas transforma relações em negócios reais.",
    img: "assets/images/founders/ricardo.jpg"
  },
  {
    name: "Ronaldo Vinagre",
    role: "Fundador",
    bio: "CEO da Tetra Consulting desde 2013 e Sócio de Negócios na Bwin Tech Seguros desde 2017. Especialista em desenvolvimento de negócios, logística e gestão de projetos, com atuação focada nos setores de consultoria e tecnologia.",
    quote: "Experência e networking são os pilares de um crescimento seguro e exponencial",
    img: "assets/images/founders/ronaldo.jpg"
  }];

  return (
    <section className="r3-section r3-founders" id="arquitetos" data-screen-label="06 Fundadores">
      <SectionHeader number="04" eyebrow="Os fundadores">
        Os fundadores.
      </SectionHeader>
      <div className="r3-founders-grid r3-founders-grid-3">
        {f.map((p, i) =>
        <article className="r3-founder" key={p.name} data-reveal="" style={{ "--reveal-delay": `${i * 120}ms` }}>
            <img src={p.img} alt={p.name} className="r3-founder-img" />
            <div className="r3-founder-meta">
              <span className="r3-founder-role">{p.role}</span>
              <h3 className="r3-founder-name">{p.name}</h3>
            </div>
            <p className="r3-founder-bio">{p.bio}</p>
            {p.quote && <blockquote className="r3-founder-quote">{p.quote}</blockquote>}
          </article>
        )}
      </div>
    </section>);

}

/* ---------- Conselho ---------- */
function Conselho() {
  return (
    <section className="r3-section r3-conselho" data-screen-label="07 Conselho">
      <SectionHeader number="05" eyebrow="O Conselho">
        O Conselho.
      </SectionHeader>
      <p className="r3-section-sub">
        Composição apresentada após autorização. Grade abaixo é placeholder
        editorial — seis a oito nomes em duas colunas, com foto, cargo atual
        e uma frase de cada conselheiro.
      </p>

      <div className="r3-council-grid">
        {Array.from({ length: 6 }).map((_, i) =>
        <article className="r3-council-card" key={i} data-reveal="up-sm" style={{ "--reveal-delay": `${i * 70}ms` }}>
            <ImageSlot
            label={"// conselheiro " + String(i + 1).padStart(2, "0")}
            ratio="1 / 1"
            className="r3-council-img" />
          
            <div className="r3-council-meta">
              <span className="r3-council-role">// cargo atual · empresa</span>
              <h4 className="r3-council-name">// nome completo</h4>
              <p className="r3-council-quote">// frase do conselheiro — uma linha, máx. 14 palavras</p>
            </div>
          </article>
        )}
      </div>

      <p className="r3-disclaimer">
        [A LEVANTAR] Seção condicional à autorização para divulgação pública
        dos nomes do Conselho.
      </p>
    </section>);

}

/* ---------- Lote 1 / Value anchor ---------- */
function Lote1({ seatsLeft, showCounter }) {
  return (
    <section className="r3-section r3-lote1" id="lote1" data-screen-label="08 Lote 1">
      <div className="r3-lote1-grid">
        <div className="r3-lote1-left">
          <SectionHeader number="06" eyebrow="Lote 1 — dez primeiras vagas">
            Lote 1.
          </SectionHeader>
          <p className="r3-section-sub">
            Dez primeiras vagas. Quando as dez vagas forem ocupadas, o lote fecha.
          </p>
          <ul className="r3-includes" data-reveal="" style={{ "--reveal-delay": "120ms" }}>
            <li>Imersão Executiva de Alta Performance</li>
            <li>Quatro jantares trimestrais com Grupo C-Level</li>
            <li>Duas visitas guiadas em empresas referência</li>
            <li>Doze mentorias com o Conselho R3 Club</li>
          </ul>
        </div>

        <aside className="r3-pricecard" data-reveal="" style={{ "--reveal-delay": "200ms" }}>
          <div className="r3-pricecard-head">
            <span className="r3-pricecard-kicker">Lote 1 · âncora de valor</span>
            {showCounter &&
            <span className="r3-pricecard-seats">
                <strong>{seatsLeft}</strong> de 10 disponíveis
              </span>
            }
          </div>

          <div className="r3-price-row r3-price-strike">
            <span>Valor cheio</span>
            <span><s>R$ 50.000</s></span>
          </div>
          <div className="r3-price-row r3-price-main">
            <span>Lote 1 (10 vagas)</span>
            <span>R$ 30.000</span>
          </div>
          <div className="r3-price-row">
            <span>À vista no Pix</span>
            <span>R$ 24.000</span>
          </div>
          <div className="r3-price-row">
            <span>Parcelado</span>
            <span>até 10× no cartão</span>
          </div>

          <a href="#form" className="r3-btn r3-btn-primary r3-btn-block">
            <span>Solicitar informações</span>
            <span className="r3-btn-arrow" aria-hidden="true">→</span>
          </a>

          <p className="r3-pricecard-foot">
            Sem pagamento na página. Você preenche o formulário — um dos
            fundadores entra em contato em até 24h para confirmar o
            encaixe de perfil antes de qualquer compromisso.
          </p>
        </aside>
      </div>
    </section>);

}

/* ---------- Lead form ---------- */
function LeadForm({ formCtaVariant = "A" }) {
  const ctas = {
    A: "Solicitar informações sobre o Lote 1",
    B: "Quero a vaga",
    C: "Falar com um dos fundadores"
  };
  const [submitted, setSubmitted] = useStateS(false);
  const [loading, setLoading] = useStateS(false);
  const [serverError, setServerError] = useStateS('');
  const [errors, setErrors] = useStateS({});
  const [values, setValues] = useStateS({
    nome: "", cargo: "", empresa: "", email: "", whats: "", origem: ""
  });

  const update = (k) => (e) => setValues((v) => ({ ...v, [k]: e.target.value }));

  const onSubmit = async (e) => {
    e.preventDefault();
    const required = ["nome", "cargo", "empresa", "email", "whats"];
    const next = {};
    for (const k of required) {
      if (!values[k] || !values[k].trim()) {
        next[k] = "Este campo é necessário para que um dos fundadores possa entrar em contato com você.";
      }
    }
    if (values.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
      next.email = "Confira o e-mail — é por ele que um dos fundadores responde.";
    }
    setErrors(next);
    if (Object.keys(next).length > 0) return;

    const isLocal = ['localhost', '127.0.0.1'].includes(window.location.hostname);
    const turnstileToken = isLocal ? 'local' : (window._r3Turnstile?.token ?? '');

    if (!turnstileToken) {
      setServerError('Aguarde a verificação de segurança carregar e tente novamente.');
      return;
    }

    setLoading(true);
    setServerError('');

    const body = new FormData();
    body.append('nome',                  values.nome);
    body.append('cargo',                 values.cargo);
    body.append('empresa',               values.empresa);
    body.append('email',                 values.email);
    body.append('whats',                 values.whats);
    body.append('origem',                values.origem);
    body.append('cf-turnstile-response', turnstileToken);

    try {
      const res  = await fetch('envia/informacoes.php', { method: 'POST', body });
      const data = await res.json();
      if (data.success) {
        window._r3Turnstile.token = '';
        setSubmitted(true);
        window.scrollTo({ top: document.getElementById("form").offsetTop - 80, behavior: "smooth" });
      } else {
        setServerError(data.message || 'Erro ao enviar. Tente novamente.');
        window._r3Turnstile.token = '';
        if (window.turnstile) window.turnstile.reset();
      }
    } catch {
      setServerError('Erro de conexão. Tente novamente.');
      window._r3Turnstile.token = '';
      if (window.turnstile) window.turnstile.reset();
    } finally {
      setLoading(false);
    }
  };

  if (submitted) {
    return (
      <section className="r3-section r3-form r3-form-success" id="form" data-screen-label="09 Solicitação recebida">
        <div className="r3-form-shell">
          <div className="r3-form-success-mark" aria-hidden="true">
            <span></span>
          </div>
          <span className="r3-section-eyebrow">Recebido</span>
          <h2 className="r3-form-success-title">Solicitação recebida.</h2>
          <p className="r3-form-success-body">
            Um dos fundadores entra em contato em até 24 horas pelo WhatsApp
            informado. Se preferir antecipar a conversa, fale com o R3 Club agora.
          </p>
          <a
            href="https://wa.me/5519996904283?text=Ol%C3%A1%2C%20acabei%20de%20preencher%20o%20formul%C3%A1rio%20do%20R3%20Club%20e%20quero%20saber%20mais%20sobre%20o%20Lote%201."
            className="r3-btn r3-btn-primary"
            target="_blank" rel="noopener noreferrer">
            
            <span>Falar com o R3 Club</span>
            <span className="r3-btn-arrow" aria-hidden="true">→</span>
          </a>
          <button
            type="button"
            className="r3-form-success-reset"
            onClick={() => {setSubmitted(false);setValues({ nome: "", cargo: "", empresa: "", email: "", whats: "", origem: "" });}}>
            
            Enviar outro formulário
          </button>
        </div>
      </section>);

  }

  return (
    <section className="r3-section r3-form" id="form" data-screen-label="09 Formulário">
      <div className="r3-form-shell">
        <div className="r3-form-meta" data-reveal="">
          <span className="r3-section-number">07</span>
          <span className="r3-section-eyebrow">Formulário de interesse</span>
        </div>
        <h2 className="r3-form-title" data-reveal="" style={{ "--reveal-delay": "80ms" }}>Solicitar informações.</h2>
        <p className="r3-form-intro" data-reveal="" style={{ "--reveal-delay": "160ms" }}>
          Preencha abaixo. Um dos fundadores entra em contato em até 24
          horas — sem apresentação de vendas, sem script. Só para entender
          seu momento e confirmar o encaixe de perfil.
        </p>

        <form className="r3-form-grid" onSubmit={onSubmit} noValidate data-reveal="" style={{ "--reveal-delay": "240ms" }}>
          <Field id="nome" label="Nome completo" placeholder="João da Silva"
          value={values.nome} onChange={update("nome")} error={errors.nome} required />
          <Field id="cargo" label="Cargo" placeholder="CEO / Diretor / Fundador"
          value={values.cargo} onChange={update("cargo")} error={errors.cargo} required />
          <Field id="empresa" label="Empresa" placeholder="Nome da empresa"
          value={values.empresa} onChange={update("empresa")} error={errors.empresa} required />
          <Field id="email" label="E-mail" type="email" placeholder="joao@empresa.com.br"
          value={values.email} onChange={update("email")} error={errors.email} required />
          <Field id="whats" label="WhatsApp" type="tel" placeholder="(11) 99999-9999"
          value={values.whats} onChange={update("whats")} error={errors.whats} required />
          <div className="r3-field">
            <label htmlFor="origem">Como ficou sabendo do R3 Club? <span className="r3-field-opt">(opcional)</span></label>
            <select id="origem" value={values.origem} onChange={update("origem")}>
              <option value="">Selecione</option>
              <option value="linkedin">LinkedIn</option>

              <option value="indicacao">Indicação</option>
              <option value="ads">Anúncio (Meta / LinkedIn Ads)</option>
              <option value="outro">Outro</option>
            </select>
          </div>

          <div className="r3-form-actions">
            {serverError && <p className="r3-field-error">{serverError}</p>}
            <button type="submit" className="r3-btn r3-btn-primary r3-btn-xl" disabled={loading}>
              <span>{loading ? 'Enviando…' : ctas[formCtaVariant]}</span>
              {!loading && <span className="r3-btn-arrow" aria-hidden="true">→</span>}
            </button>
            <p className="r3-form-privacy">
              Seus dados são usados exclusivamente para o contato de
              qualificação. Sem spam, sem revenda.
            </p>
          </div>
        </form>
      </div>
    </section>);

}

function Field({ id, label, type = "text", placeholder, value, onChange, error, required }) {
  return (
    <div className={"r3-field " + (error ? "is-error" : "")}>
      <label htmlFor={id}>
        {label}{required && <span className="r3-field-req" aria-hidden="true"> *</span>}
      </label>
      <input
        id={id} name={id} type={type}
        placeholder={placeholder}
        value={value} onChange={onChange}
        aria-invalid={!!error}
        aria-describedby={error ? id + "-err" : undefined} />
      
      {error && <span id={id + "-err"} className="r3-field-error">{error}</span>}
    </div>);

}

/* ---------- FAQ ---------- */
function Faq() {
  const qs = [
  {
    q: "O que acontece depois que eu preencho o formulário?",
    a: "Um dos fundadores entra em contato em até 24 horas pelo WhatsApp informado. A conversa é rápida — o objetivo é entender seu momento e confirmar o encaixe de perfil."
  },
  {
    q: "Qual é o investimento?",
    a: "O Lote 1 são as dez primeiras vagas a R$ 30.000 o ano. À vista no Pix: R$ 24.000. Parcelado: até 10× no cartão. Valor cheio após o Lote 1: R$ 50.000."
  },
  {
    q: "Quanto tempo dura o compromisso?",
    a: "Um ano. A vaga é anual — imersão de abertura, quatro jantares, duas visitas e doze mentorias. Renovação por convite."
  },
  {
    q: "Preciso fechar na conversa ou posso pensar?",
    a: "Não há compromisso no primeiro contato. A conversa serve para alinhar perfil e tirar dúvidas — a decisão é sua e no seu tempo."
  },
  {
    q: "Posso pagar pelo CNPJ da minha empresa?",
    a: "Sim. No momento do pagamento, você escolhe se a nota fiscal sai em CPF ou CNPJ."
  },
  {
    q: "Em que cidade acontecem os encontros?",
    a: "Imersão e jantares concentrados no eixo São Paulo · Campinas. Visitas guiadas ocorrem na cidade da empresa referência visitada no semestre. (Cidades em confirmação final antes do go-live.)"
  },
  {
    q: "A imersão e os jantares são presenciais?",
    a: "Sim. Mentorias com o Conselho R3 Club podem ser remotas ou presenciais, conforme o caso."
  },
  {
    q: "Como funciona a curadoria do grupo?",
    a: "A conversa com um dos fundadores acontece antes de qualquer compromisso financeiro — serve exatamente para confirmar o encaixe de perfil, setor e momento. Nenhuma vaga é confirmada sem essa etapa."
  }];

  return (
    <section className="r3-section r3-faq" id="faq" data-screen-label="10 FAQ">
      <SectionHeader number="08" eyebrow="FAQ">
        Antes de solicitar.
      </SectionHeader>
      <div className="r3-faq-list">
        {qs.map((it, i) =>
        <div key={i} data-reveal="up-sm" style={{ "--reveal-delay": `${i * 60}ms` }}>
          <FaqItem q={it.q} a={it.a} defaultOpen={i === 0} />
        </div>
        )}
      </div>
    </section>);

}

/* ---------- Final CTA ---------- */
function FinalCta({ seatsLeft, showCounter }) {
  return (
    <section className="r3-section r3-final" data-screen-label="11 CTA final">
      <div className="r3-final-inner" data-reveal="">
        <span className="r3-final-kicker">
          Lote 1{showCounter ? " · " + seatsLeft + " vagas restantes" : " aberto"}
        </span>
        <h2 className="r3-final-title">
          Lote 1 aberto.<br />Dez vagas.
        </h2>
        <p className="r3-final-sub">
          Quando as dez vagas forem ocupadas, o lote fecha.
        </p>
        <div className="r3-final-ctas">
          <a href="#form" className="r3-btn r3-btn-primary r3-btn-xl">
            <span>Solicitar informações</span>
            <span className="r3-btn-arrow" aria-hidden="true">→</span>
          </a>
          <a
            href="https://wa.me/5519996904283?text=Quero%20saber%20mais%20sobre%20o%20R3%20Club%20Lote%201"
            className="r3-btn r3-btn-ghost r3-btn-xl"
            target="_blank" rel="noopener noreferrer">
            
            <span>Falar com o R3 Club</span>
            <span className="r3-btn-arrow" aria-hidden="true">→</span>
          </a>
        </div>
        <p className="r3-final-foot">
          Sem compromisso no primeiro contato. A decisão vem depois da conversa.
        </p>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="r3-footer">
      <div className="r3-footer-inner">
        <div className="r3-footer-cols">
          <div>
            <span className="r3-footer-h">R3 Club</span>
            <a href="#manifesto">Apresentação</a>
            <a href="#calendario">O ano</a>
            <a href="#arquitetos">Os fundadores</a>
          </div>
          <div>
            <span className="r3-footer-h">Lote 1</span>
            <a href="#lote1">Preço e condição</a>
            <a href="#faq">FAQ</a>
            <a href="#form">Solicitar informações</a>
          </div>
          <div>
            <span className="r3-footer-h">Contato</span>
            <a href="mailto:contato@r3club.com.br">contato@r3club.com.br</a>
            <a href="https://wa.me/5519996904283">WhatsApp</a>
          </div>
        </div>
        <div className="r3-footer-bottom">
          <span>© 2026 R3 Club. Todos os direitos reservados.</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Hero, Apresentacao, Calendario, QuemSenta,
  Founders, Lote1, LeadForm, Faq, FinalCta, Footer
});