(() => {
const { Button, GhostLink, SectionLabel, DisplayHeading, GradientOrb, ConcentricRings, ScrollCue, StatBlock, Card, Divider, Tag, ScrollReveal, LineReveal, Parallax, PointerDrift } = window.DigitalConteDoDesignSystem_c80f58;
const C = window.DC_CONTENT;
const PAD = (m) => (m ? "46px 19px" : "76px 30px");

function Hero({ onNavigate }) {
  const m = window.useIsMobile();
  const narrow = window.useIsMobile(1180);
  return (
    <section style={{ position: "relative", minHeight: m ? "auto" : "660px", padding: m ? "46px 19px" : "76px 30px 30px", overflow: "hidden" }}>
      <Parallax speed={0.1} clamp={140} style={{ position: "absolute", right: m ? "-320px" : "-180px", top: m ? "-200px" : "-140px" }}>
        <PointerDrift strength={14} damping={0.05}><ConcentricRings size={m ? 560 : 900} rings={3} /></PointerDrift>
      </Parallax>
      <Parallax speed={0.22} clamp={220} style={{ position: "absolute", right: m ? "-90px" : narrow ? "-120px" : "6%", top: m ? "-30px" : "40px" }}>
        <PointerDrift strength={m ? 0 : 34} damping={0.07} scaleWithScroll={m ? 0 : 0.14}><GradientOrb size={m ? 230 : narrow ? 320 : 410} tone="violet" style={narrow ? { opacity: 0.45 } : null} /></PointerDrift>
      </Parallax>
      <div style={{ position: "relative", maxWidth: "var(--page-max)", margin: "0 auto" }}>
        <SectionLabel index="01" style={{ marginBottom: "46px" }}>{C.hero.kicker}</SectionLabel>
        <LineReveal as="h1" size={m ? "xs" : narrow ? "sm" : "md"} lines={C.hero.lines} />
        <ScrollReveal delay={200} style={{ marginTop: "19px", maxWidth: "46ch" }}>
          <p style={{ margin: 0, fontSize: m ? "var(--text-body)" : "var(--text-subheading)", lineHeight: m ? "1.2" : "var(--leading-subheading)", letterSpacing: "var(--tracking-subheading)", textTransform: "uppercase", color: "var(--text-accent)" }}>com tecnologia, IA e processo comercial</p>
        </ScrollReveal>
        <ScrollReveal delay={300} style={{ display: "flex", gap: m ? "30px" : "46px", alignItems: m ? "stretch" : "flex-end", flexDirection: m ? "column" : "row", marginTop: "46px", flexWrap: "wrap", maxWidth: "820px" }}>
          <p style={{ margin: 0, maxWidth: "46ch", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", letterSpacing: "var(--tracking-body-sm)" }}>{C.hero.sub}</p>
          <div style={{ display: "flex", gap: "15px", flexWrap: "wrap" }}>
            <Button arrow href={window.DC_LINKS.agenda} target="_blank" rel="noreferrer">Diagnóstico gratuito</Button>
            <Button variant="quiet" arrow href={window.DC_LINKS.whatsapp} target="_blank" rel="noreferrer">WhatsApp</Button>
            <Button variant="ghost" arrow onClick={() => onNavigate("servicos")}>Ver serviços</Button>
          </div>
        </ScrollReveal>
        <ScrollReveal delay={420} style={{ marginTop: "46px", display: "flex", gap: "15px", flexWrap: "wrap" }}>
          {C.hero.proof.map((p) => <Tag key={p}>{p}</Tag>)}
        </ScrollReveal>
      </div>
      {m ? null : <ScrollCue style={{ position: "absolute", right: "30px", bottom: "30px" }} />}
    </section>
  );
}

function Problema() {
  const m = window.useIsMobile();
  return (
    <section style={{ padding: PAD(m), borderTop: "1px solid var(--border-hairline)" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1fr", gap: m ? "30px" : "76px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "30px" }}>
          <SectionLabel index="02">O problema</SectionLabel>
          <LineReveal as="h2" size={m ? "xs" : "sm"} lines={C.problema.title} />
          <ScrollReveal delay={120}><p style={{ margin: 0, maxWidth: "38ch", fontSize: "var(--text-body)", lineHeight: "var(--leading-body)" }}>{C.problema.lead}</p></ScrollReveal>
        </div>
        <div style={{ display: "flex", flexDirection: "column" }}>
          {C.problema.items.map((item, i) => (
            <ScrollReveal key={item} delay={i * 70}>
              <div style={{ display: "flex", gap: "19px", padding: "19px 0", borderBottom: "1px solid var(--border-hairline)" }}>
                <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", color: "var(--text-muted)", paddingTop: "4px" }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)" }}>{item}</span>
              </div>
            </ScrollReveal>
          ))}
          <ScrollReveal delay={380}>
            <p style={{ margin: "30px 0 0", fontSize: "var(--text-body)", lineHeight: "var(--leading-body)", color: "var(--text-accent)", maxWidth: "42ch" }}>{C.problema.close}</p>
          </ScrollReveal>
        </div>
      </div>
    </section>
  );
}

function ServicosResumo({ onNavigate }) {
  const m = window.useIsMobile();
  return (
    <section style={{ padding: m ? "0 19px 46px" : "0 30px 76px" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "30px" }}>
        <SectionLabel index="03">Nossos serviços</SectionLabel>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "30px", flexWrap: "wrap" }}>
          <LineReveal as="h2" size={m ? "xs" : "sm"} lines={["Uma agência de marketing", "com alma de tecnologia"]} />
          <GhostLink size="sm" onClick={(e) => { e.preventDefault(); onNavigate("servicos"); }}>Ver todos os serviços</GhostLink>
        </div>
        <ScrollReveal delay={100}>
          <p style={{ margin: 0, maxWidth: "72ch", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>
            Não entregamos peças soltas. Cada serviço pode ser contratado isoladamente — mas foi desenhado para funcionar em conjunto, formando uma operação comercial integrada de ponta a ponta.
          </p>
        </ScrollReveal>
        <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "repeat(3, 1fr)", gap: "1px", background: "var(--border-hairline)" }}>
          {C.servicos.map((s, i) => (
            <ScrollReveal key={s.nome} delay={i * 60}>
              <a href="#" onClick={(e) => { e.preventDefault(); onNavigate("servicos"); }} style={{ display: "flex", flexDirection: "column", gap: "15px", height: "100%", boxSizing: "border-box", background: "var(--surface-card)", padding: "30px", textDecoration: "none", color: "var(--text-primary)", border: "none" }}>
                <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", color: "var(--text-muted)" }}>{String(i + 1).padStart(2, "0")}</span>
                <h3 style={{ margin: 0, fontSize: "var(--text-subheading)", lineHeight: "var(--leading-subheading)", letterSpacing: "var(--tracking-subheading)", fontWeight: "var(--weight-regular)", textTransform: "uppercase" }}>{s.nome}</h3>
                <p style={{ margin: 0, fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>{s.resumo}</p>
              </a>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Metodo() {
  const m = window.useIsMobile();
  return (
    <section style={{ padding: m ? "46px 19px" : "46px 30px 76px", background: "var(--surface-inverse)" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "46px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "30px", flexWrap: "wrap" }}>
          <SectionLabel index="04" tone="inverse">Como trabalhamos</SectionLabel>
          <LineReveal as="h2" size="xs" tone="inverse" lines={["Um método,", "quatro etapas"]} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "repeat(4, 1fr)", gap: "30px" }}>
          {C.metodo.map(([n, titulo, texto], i) => (
            <ScrollReveal key={n} delay={i * 80} style={{ borderTop: "1px solid rgba(255,255,255,0.22)", paddingTop: "19px" }}>
              <div style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
                <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", color: "var(--stone)" }}>{n}</span>
                <h3 style={{ margin: 0, fontSize: "var(--text-subheading)", lineHeight: "var(--leading-subheading)", letterSpacing: "var(--tracking-subheading)", fontWeight: "var(--weight-regular)", textTransform: "uppercase", color: "var(--text-inverse)" }}>{titulo}</h3>
                <p style={{ margin: 0, fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--stone)" }}>{texto}</p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Porque() {
  const m = window.useIsMobile();
  return (
    <section style={{ padding: PAD(m) }}>
      <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: "19px" }}>
          <SectionLabel index="05">Por que a Digital Conteúdo</SectionLabel>
          <LineReveal as="h2" size="xs" lines={["Cinco motivos", "concretos"]} />
        </div>
        <div>
          {C.porque.map(([titulo, texto], i) => (
            <ScrollReveal key={titulo} delay={i * 60}>
              <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1.4fr", gap: m ? "8px" : "30px", padding: "19px 0", borderBottom: "1px solid var(--border-hairline)" }}>
                <h3 style={{ margin: 0, fontSize: "var(--text-body)", lineHeight: "var(--leading-body)", fontWeight: "var(--weight-regular)" }}>{titulo}</h3>
                <p style={{ margin: 0, fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>{texto}</p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ParaQuem() {
  const m = window.useIsMobile();
  return (
    <section style={{ padding: m ? "0 19px 46px" : "0 30px 76px" }}>
      <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "30px" }}>
        <SectionLabel index="06">Para quem é</SectionLabel>
        <ScrollReveal><p style={{ margin: 0, maxWidth: "52ch", fontSize: "var(--text-body)", lineHeight: "var(--leading-body)" }}>Atendemos empresas que já vendem e querem estruturar o crescimento:</p></ScrollReveal>
        <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "repeat(3, 1fr)", gap: "1px", background: "var(--border-hairline)" }}>
          {C.paraQuem.map((p, i) => (
            <ScrollReveal key={p} delay={i * 50}>
              <div style={{ background: "var(--surface-card)", padding: "30px", height: "100%", boxSizing: "border-box", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)" }}>{p}</div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Fechamento({ onNavigate }) {
  const m = window.useIsMobile();
  return (
    <section style={{ padding: m ? "46px 19px" : "119px 30px", borderTop: "1px solid var(--border-hairline)", position: "relative", overflow: "hidden" }}>
      <Parallax speed={0.16} clamp={180} style={{ position: "absolute", left: m ? "-160px" : "-110px", bottom: "-140px" }}>
        <PointerDrift strength={m ? 0 : 22} damping={0.06}><GradientOrb size={m ? 220 : 340} soft blur={2} /></PointerDrift>
      </Parallax>
      <div style={{ position: "relative", maxWidth: "var(--page-max)", margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "46px", flexWrap: "wrap" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "19px" }}>
          <LineReveal as="h2" size={m ? "xs" : "md"} lines={["Vamos montar a sua", "máquina de vendas?"]} />
          <ScrollReveal delay={160}>
            <p style={{ margin: 0, maxWidth: "48ch", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>
              Agende um diagnóstico gratuito de 30 minutos. Vamos analisar sua operação atual e apontar as três maiores oportunidades de crescimento. Sem compromisso, sem apresentação genérica.
            </p>
          </ScrollReveal>
        </div>
        <ScrollReveal delay={240} style={{ display: "flex", gap: "15px", flexWrap: "wrap", width: m ? "100%" : undefined }}>
          <Button size="lg" arrow href={window.DC_LINKS.agenda} target="_blank" rel="noreferrer">Agendar diagnóstico</Button>
          <Button size="lg" variant="ghost" arrow href={window.DC_LINKS.whatsapp} target="_blank" rel="noreferrer">Falar no WhatsApp</Button>
        </ScrollReveal>
      </div>
    </section>
  );
}

function HomeScreen({ onNavigate }) {
  return (
    <React.Fragment>
      <Hero onNavigate={onNavigate} />
      <Problema />
      <ServicosResumo onNavigate={onNavigate} />
      <Metodo />
      <Porque />
      <ParaQuem />
      <Fechamento onNavigate={onNavigate} />
    </React.Fragment>
  );
}
Object.assign(window, { HomeScreen });
})();
