// Section components — FinalCTA, FAQ, Footer

const FinalCTA = () => {
  const { finalCta } = CONTENT;
  return (
    <section className="final-cta" id="agendar" data-screen-label="07 CTA Final">
      <SectionLabel light>{finalCta.section}</SectionLabel>
      <h2 className="display-h2 display-h2-deep final-cta-headline">
        {finalCta.headline.map((l, i) => (
          <span key={i} className="final-cta-line"><span>{l}</span></span>
        ))}
      </h2>
      <ul className="final-cta-points">
        {finalCta.points.map((p, i) => (
          <li key={i} className="reveal">
            <span className="final-cta-num">0{i + 1}</span>
            <span>{p}</span>
          </li>
        ))}
      </ul>
      <div className="final-cta-action">
        <a href="https://wa.me/5511995370742?text=Ol%C3%A1%20Carlos%2C%20vim%20pela%20landing%20page%20e%20quero%20saber%20mais%20sobre%20o%20Diagn%C3%B3stico%20Patrimonial." target="_blank" rel="noopener noreferrer" className="btn-primary btn-primary-deep">
          <span>{finalCta.cta}</span>
          <span className="btn-arrow">→</span>
        </a>
        <p className="final-cta-sub">{finalCta.subtext}</p>
      </div>
    </section>
  );
};

const FAQItem = ({ item, idx, openIdx, setOpen }) => {
  const isOpen = openIdx === idx;
  return (
    <div className={`faq-item ${isOpen ? "is-open" : ""}`}>
      <button
        className="faq-q"
        onClick={() => setOpen(isOpen ? -1 : idx)}
        aria-expanded={isOpen}
      >
        <span className="faq-q-num">{String(idx + 1).padStart(2, "0")}</span>
        <span className="faq-q-text">{item.q}</span>
        <span className="faq-q-icon" aria-hidden="true">
          <span className="faq-q-icon-h" />
          <span className="faq-q-icon-v" />
        </span>
      </button>
      <div className="faq-a-wrap" style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}>
        <div className="faq-a-inner">
          <p className="faq-a">{item.a}</p>
        </div>
      </div>
    </div>
  );
};

const FAQ = () => {
  const { faq } = CONTENT;
  const [openIdx, setOpen] = React.useState(0);
  return (
    <section className="faq" data-screen-label="08 FAQ">
      <SectionLabel>{faq.section}</SectionLabel>
      <h2 className="display-h2">Perguntas que aparecem com frequência.</h2>
      <div className="faq-list">
        {faq.items.map((it, i) => (
          <FAQItem key={i} item={it} idx={i} openIdx={openIdx} setOpen={setOpen} />
        ))}
      </div>
    </section>
  );
};

const Footer = () => {
  const { footer } = CONTENT;
  return (
    <footer className="footer" data-screen-label="09 Rodapé">
      <div className="footer-grid">
        <div className="footer-id">
          <img src="assets/logo.png" alt="" className="footer-logo" />
          <div className="footer-name">{footer.name}</div>
          <div className="footer-role">{footer.role}</div>
          <div className="footer-co">{footer.company}</div>
        </div>
        <div className="footer-contact">
          <div className="footer-label">Contato</div>
          <a href={`mailto:${footer.email}`}>{footer.email}</a>
          <a href={`tel:${footer.phone.replace(/\D/g, "")}`}>{footer.phone}</a>
        </div>
        <div className="footer-links">
          <div className="footer-label">Links</div>
          <a href="#">Site completo</a>
          <a href="#">Privacidade</a>
          <a href="#">Instagram {footer.instagram}</a>
        </div>
      </div>
      <div className="footer-base">
        <span>{footer.copyright}</span>
        <span className="footer-mono">CFP® · CVM</span>
      </div>
    </footer>
  );
};

Object.assign(window, { FinalCTA, FAQ, FAQItem, Footer });
