// FAQ + Final CTA + Footer + Sticky + Consent + Header

const FAQSection = () => {
  const fs = CONTENT.faqSection;
  const [open, setOpen] = lfUseState(0);
  return (
    <section className="section faq" id="faq" data-screen-label="09 FAQ">
      <div className="container">
        <div className="faq-grid">
          <Reveal>
            <aside className="faq-aside">
              <span className="eyebrow">{fs.eyebrow}</span>
              <h2 className="h2 faq-headline">{fs.headline}</h2>
              <p className="lede faq-lede">
                Não encontrou sua resposta? Solicite contato pelo formulário desta página — atendimento consultivo de um especialista ROVE em até 24h úteis.
              </p>
              <button
                type="button"
                className="btn btn-primary faq-cta"
                onClick={() => { track("faq_cta_click"); scrollToId("lead-form-final"); }}
              >
                Falar com um consultor
                <Icon name="arrowR" size={14} />
              </button>
            </aside>
          </Reveal>

          <Reveal delay={120}>
            <div className="faq-list">
              {CONTENT.faq.map((item, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} className={`accordion-item ${isOpen ? "is-open" : ""}`}>
                    <button
                      className="accordion-trigger"
                      onClick={() => {
                        setOpen(isOpen ? -1 : i);
                        if (!isOpen) track("faq_open", { question_id: i });
                      }}
                      aria-expanded={isOpen}
                      aria-controls={`faq-content-${i}`}
                    >
                      <span className="accordion-num mono">{String(i + 1).padStart(2, "0")}</span>
                      <span className="accordion-question">{item.q}</span>
                      <span className="accordion-icon" aria-hidden="true"></span>
                    </button>
                    <div className="accordion-content" id={`faq-content-${i}`} role="region">
                      <div>
                        <p className="accordion-body">{item.a}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

const FinalCtaSection = () => {
  const fc = CONTENT.finalCta;
  return (
    <section className="section final-cta" id="lead-form-final" data-screen-label="10 CTA final">
      <div className="container">
        <div className="fc-grid">
          <Reveal>
            <span className="eyebrow">{fc.eyebrow}</span>
            <h2 className="h2 fc-headline">{fc.headline}</h2>
            <p className="lede fc-lede">{fc.lede}</p>
            <ul className="fc-list">
              {fc.bullets.map(b => (
                <li key={b}><Icon name="check" size={16} /> {b}</li>
              ))}
            </ul>
          </Reveal>

          <Reveal delay={120}>
            <div className="lead-form-card is-final">
              <div className="lf-header">
                <h3 className="lf-title">{fc.formTitle}</h3>
                <p className="lf-sub">{fc.formSub}</p>
              </div>
              <LeadForm location="final" />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

const SiteFooter = () => (
  <footer className="site-footer" data-screen-label="11 Footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo />
          <p className="footer-tag">
            {CONTENT.brand.tagline}. Incorporação no Campeche, Florianópolis.
          </p>
          <div className="footer-link-row">
            <a href={CONTENT.brand.instagram} target="_blank" rel="noopener noreferrer">Instagram</a>
            <a href={CONTENT.brand.linkedin} target="_blank" rel="noopener noreferrer">LinkedIn</a>
          </div>
        </div>

        <div>
          <span className="eyebrow footer-eyebrow">Stand de vendas</span>
          <p className="footer-address">{CONTENT.brand.standAddress}</p>
          <div className="footer-contact">
            <a href={`mailto:${CONTENT.brand.email}`}>{CONTENT.brand.email}</a>
          </div>
        </div>

        <div>
          <span className="eyebrow footer-eyebrow">Compliance</span>
          <p className="footer-compliance mono">
            {CONTENT.brand.creci ? <>CRECI {CONTENT.brand.creci}<br /></> : null}
            CNPJ {CONTENT.brand.cnpj}<br />
            Razão Social {CONTENT.brand.razaoSocial}<br />
            Registro de incorporação ativo<br />
            Compliance CRECI: rodapé do site oficial ROVE
          </p>
        </div>
      </div>

      <div className="footer-bottom">
        <span>© 2026 ROVE Empreendimentos · Todos os direitos reservados.</span>
        <span>
          <a href={CONTENT.brand.privacyUrl}>Política de privacidade</a>
          <span className="footer-dot">·</span>
          <a href={CONTENT.brand.privacyUrl}>Termos</a>
        </span>
      </div>
    </div>
  </footer>
);

const StickyMobileBar = () => (
  <div className="sticky-bar" aria-label="Ações rápidas">
    <button
      type="button"
      className="btn btn-primary btn-block"
      onClick={() => { track("sticky_cta_click"); scrollToId("lead-form-final"); }}
    >
      Receber tabela completa
      <Icon name="arrowR" size={14} />
    </button>
  </div>
);

const ConsentBanner = () => {
  const [show, setShow] = lfUseState(false);
  lfUseEffect(() => {
    try {
      const c = localStorage.getItem("__cl_consent");
      if (!c) setTimeout(() => setShow(true), 1500);
    } catch { setShow(true); }
  }, []);
  const decide = (mode) => {
    try { localStorage.setItem("__cl_consent", mode); } catch {}
    track("consent_update", { mode });
    setShow(false);
  };
  if (!show) return null;
  return (
    <div className="consent-banner" role="region" aria-label="Consentimento de cookies">
      <p>
        Usamos cookies para entender o desempenho desta página e melhorar a experiência.
        Você decide. <a href={CONTENT.brand.privacyUrl}>Política de privacidade</a>.
      </p>
      <div className="consent-actions">
        <button className="btn btn-ghost-dark btn-sm" onClick={() => decide("denied")}>Recusar</button>
        <button className="btn btn-gold btn-sm" onClick={() => decide("granted")}>Aceitar</button>
      </div>
    </div>
  );
};

const SiteHeader = () => (
  <header className="site-header" id="site-header">
    <div className="container site-header-inner">
      <Logo />
      <div className="header-actions">
        <button
          type="button"
          className="header-cta"
          onClick={() => { track("header_cta_click"); scrollToId("lead-form-hero"); }}
        >
          Receber tabela
          <Icon name="arrowR" size={14} />
        </button>
      </div>
    </div>
  </header>
);

Object.assign(window, {
  FAQSection, FinalCtaSection, SiteFooter, StickyMobileBar, ConsentBanner, SiteHeader,
});