(() => {
const { SectionLabel, Accordion, Button, GhostLink, ScrollReveal, LineReveal, Divider } = window.DigitalConteDoDesignSystem_c80f58;
const C = window.DC_CONTENT;

function FaqScreen({ onNavigate }) {
  const m = window.useIsMobile();
  return (
    <section style={{ padding: m ? "46px 19px" : "76px 30px 119px" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1.6fr", gap: m ? "30px" : "76px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "30px", alignItems: "flex-start" }}>
          <SectionLabel index="01">Perguntas frequentes</SectionLabel>
          <LineReveal as="h1" size={m ? "xs" : "md"} lines={["Sem letras", "miúdas"]} />
          <p style={{ margin: 0, maxWidth: "32ch", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>
            Se a sua dúvida não está aqui, mande no WhatsApp. Respondemos em um dia útil.
          </p>
          <Button variant="ghost" arrow onClick={() => onNavigate("contato")}>Falar com um especialista</Button>
        </div>
        <ScrollReveal>
          <Accordion items={C.faq.map(([title, body]) => ({ title, body }))} />
        </ScrollReveal>
      </div>
    </section>
  );
}
Object.assign(window, { FaqScreen });
})();