(() => {
const { SectionLabel, DisplayHeading, Input, Textarea, Select, Checkbox, Radio, Switch, Button, Dialog, GradientOrb, ConcentricRings, Divider, ScrollReveal, LineReveal, Parallax, PointerDrift } = window.DigitalConteDoDesignSystem_c80f58;

function ContactScreen({ onNavigate }) {
  const [budget, setBudget] = React.useState("b");
  const [sent, setSent] = React.useState(false);
  const m = window.useIsMobile();
  return (
    <React.Fragment>
      <section style={{ position: "relative", padding: m ? "46px 19px" : "76px 30px 119px", overflow: "hidden" }}>
        <Parallax speed={0.1} clamp={120} style={{ position: "absolute", left: "-260px", bottom: "-260px" }}>
          <ConcentricRings size={m ? 480 : 760} rings={3} />
        </Parallax>
        <Parallax speed={0.2} clamp={160} style={{ position: "absolute", left: "-130px", bottom: "-130px" }}>
          <PointerDrift strength={m ? 0 : 20} damping={0.06}><GradientOrb size={m ? 180 : 260} soft blur={2} /></PointerDrift>
        </Parallax>
        <div style={{ position: "relative", maxWidth: "var(--page-max)", margin: "0 auto", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1.2fr", gap: m ? "30px" : "76px" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "30px" }}>
            <SectionLabel index="01">Briefing</SectionLabel>
            <LineReveal as="h1" size={m ? "xs" : "md"} lines={["Vamos", "conversar"]} style={{ maxWidth: "12ch" }} />
            <p style={{ margin: 0, maxWidth: "34ch", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>
              Respondemos em um dia útil. Se preferir, escreva direto para o nosso e-mail ou chame no WhatsApp.
            </p>
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: "8px", fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-secondary)" }}>
              <span>São Paulo · Brasil</span><span>Seg a sex · 9h–18h</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "8px", alignItems: "flex-start" }}>
              <a href={window.DC_LINKS.agenda} target="_blank" rel="noreferrer" style={{ fontSize: "var(--text-body-sm)" }}>Agendar diagnóstico de 30 min</a>
              <a href={window.DC_LINKS.emailHref} style={{ fontSize: "var(--text-body-sm)" }}>{window.DC_LINKS.email}</a>
              <a href={window.DC_LINKS.whatsapp} target="_blank" rel="noreferrer" style={{ fontSize: "var(--text-body-sm)" }}>WhatsApp · (11) 95783-5324</a>
              <a href={window.DC_LINKS.instagram} target="_blank" rel="noreferrer" style={{ fontSize: "var(--text-body-sm)" }}>Instagram · @digitalconteudo_</a>
              <a href={window.DC_LINKS.facebook} target="_blank" rel="noreferrer" style={{ fontSize: "var(--text-body-sm)" }}>Facebook · /digconteudo</a>
            </div>
          </div>
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: "19px" }}>
            <Input label="Nome" placeholder="Como podemos te chamar?" required />
            <Input label="E-mail" type="email" placeholder="voce@empresa.com.br" required />
            <Input label="Empresa" placeholder="Razão social ou marca" />
            <Select label="Frente principal" options={["Estratégia","Criação e conteúdo","Mídia paga","Tecnologia"]} />
            <div style={{ gridColumn: "1 / -1" }}>
              <Textarea label="Sobre o projeto" rows={4} placeholder="Conte o desafio, o prazo e como você mede sucesso." />
            </div>
            <div style={{ gridColumn: "1 / -1", display: "flex", flexDirection: "column", gap: "15px" }}>
              <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-secondary)" }}>Verba mensal de mídia</span>
              <div style={{ display: "flex", gap: "30px", flexWrap: "wrap" }}>
                <Radio name="verba" checked={budget === "a"} onChange={() => setBudget("a")} label="Até R$ 10 mil" />
                <Radio name="verba" checked={budget === "b"} onChange={() => setBudget("b")} label="R$ 10–50 mil" />
                <Radio name="verba" checked={budget === "c"} onChange={() => setBudget("c")} label="Acima de R$ 50 mil" />
              </div>
            </div>
            <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "19px", flexWrap: "wrap" }}>
              <div style={{ display: "flex", gap: "30px", flexWrap: "wrap" }}>
                <Checkbox label="Aceito a política de privacidade" defaultChecked />
                <Switch label="Quero o relatório mensal" />
              </div>
              <Button type="submit" arrow>Enviar briefing</Button>
            </div>
          </form>
        </div>
      </section>
      <Dialog open={sent} title="Briefing recebido" onClose={() => setSent(false)}
        footer={<><Button variant="ghost" size="sm" onClick={() => setSent(false)}>Fechar</Button><Button size="sm" arrow href={window.DC_LINKS.agenda} target="_blank" rel="noreferrer">Agendar agora</Button></>}>
        Obrigado. Um estrategista responde em até um dia útil com as próximas perguntas.
      </Dialog>
    </React.Fragment>
  );
}
Object.assign(window, { ContactScreen });
})();