(() => {
const { SectionLabel, Button, GhostLink, Tag, ScrollReveal, LineReveal, Parallax, PointerDrift, GradientOrb, ConcentricRings } = window.DigitalConteDoDesignSystem_c80f58;
const C = window.DC_CONTENT;

function ServicoItem({ servico, index, open, onToggle }) {
  const m = window.useIsMobile();
  return (
    <div style={{ borderBottom: "1px solid var(--border-hairline)" }}>
      <button onClick={onToggle} style={{ width: "100%", background: "none", border: "none", cursor: "pointer", textAlign: "left", display: "grid", gridTemplateColumns: m ? "32px 1fr 28px" : "60px 1fr 1.2fr 40px", gap: m ? "15px" : "30px", alignItems: "start", padding: m ? "19px 0" : "30px 0", fontFamily: "var(--font-core)", color: open ? "var(--text-accent)" : "var(--text-primary)", transition: "color var(--dur-base) var(--ease-standard)" }}>
        <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", color: "var(--text-muted)", paddingTop: "8px" }}>{String(index + 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", color: "inherit" }}>{servico.nome}</h3>
        {m ? null : <p style={{ margin: 0, paddingTop: "6px", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>{servico.resumo}</p>}
        <span aria-hidden="true" style={{ fontSize: "var(--text-body)", textAlign: "right", paddingTop: "4px" }}>{open ? "\u2212" : "+"}</span>
      </button>
      {open ? (
        <div style={{ display: "grid", gridTemplateColumns: m ? "1fr" : "60px 1fr 1fr", gap: m ? "19px" : "30px", padding: m ? "0 0 30px" : "0 0 46px" }}>
          {m ? null : <span />}
          <div style={{ display: "flex", flexDirection: "column", gap: "19px" }}>
            <p style={{ margin: 0, fontSize: "var(--text-body)", lineHeight: "var(--leading-body)", maxWidth: "42ch" }}>{servico.abre}</p>
            <div style={{ marginTop: "8px", display: "flex", flexDirection: "column", gap: "8px" }}>
              <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-secondary)" }}>{servico.entregaTitulo}</span>
              {servico.entrega.map((e) => (
                <div key={e} style={{ display: "flex", gap: "8px", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>
                  <span aria-hidden="true" style={{ color: "var(--text-accent)" }}>·</span><span>{e}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background: "var(--surface-card)", padding: m ? "19px" : "30px", display: "flex", flexDirection: "column", gap: "19px" }}>
            <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-secondary)" }}>Como funciona</span>
            {servico.passos.map(([titulo, texto], i) => (
              <div key={titulo} style={{ display: "grid", gridTemplateColumns: "28px 1fr", gap: "15px" }}>
                <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", color: "var(--text-muted)", paddingTop: "3px" }}>{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div style={{ fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)" }}>{titulo}</div>
                  <p style={{ margin: "4px 0 0", fontSize: "var(--text-body-sm)", lineHeight: "var(--leading-body-sm)", color: "var(--text-secondary)" }}>{texto}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function ServicesScreen({ onNavigate }) {
  const [open, setOpen] = React.useState(0);
  const m = window.useIsMobile();
  const narrow = window.useIsMobile(1180);
  return (
    <React.Fragment>
      <section style={{ position: "relative", padding: m ? "46px 19px 30px" : "76px 30px 46px", overflow: "hidden" }}>
        <Parallax speed={0.12} clamp={140} style={{ position: "absolute", right: m ? "-300px" : "-220px", top: "-160px" }}>
          <ConcentricRings size={m ? 520 : 760} rings={3} />
        </Parallax>
        <Parallax speed={0.2} clamp={180} style={{ position: "absolute", right: m ? "-70px" : "4%", top: m ? "0" : "60px" }}>
          <PointerDrift strength={m ? 0 : 26} damping={0.07}><GradientOrb size={m ? 180 : 240} tone="violet" style={narrow ? { opacity: 0.45 } : null} /></PointerDrift>
        </Parallax>
        <div style={{ position: "relative", maxWidth: "var(--page-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "30px" }}>
          <SectionLabel index="01">Serviços</SectionLabel>
          <LineReveal as="h1" size={m ? "xs" : narrow ? "sm" : "lg"} lines={["Uma operação", "comercial inteira"]} />
          <p style={{ margin: 0, maxWidth: "56ch", fontSize: "var(--text-body)", lineHeight: "var(--leading-body)" }}>
            Cada frente pode ser contratada isoladamente — mas foi desenhada para funcionar em conjunto. Abra um serviço para ver o passo a passo.
          </p>
          <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
            {C.servicos.map((s, i) => <Tag key={s.nome} active={open === i} onClick={() => setOpen(i)}>{s.curto}</Tag>)}
          </div>
        </div>
      </section>
      <section style={{ padding: m ? "0 19px 46px" : "0 30px 76px" }}>
        <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", borderTop: "1px solid var(--border-hairline)" }}>
          {C.servicos.map((s, i) => (
            <ServicoItem key={s.nome} servico={s} index={i} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
        <div style={{ maxWidth: "var(--page-max)", margin: "46px auto 0", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "19px", flexWrap: "wrap" }}>
          <GhostLink size="sm" onClick={(e) => { e.preventDefault(); onNavigate("faq"); }}>Perguntas frequentes</GhostLink>
          <Button arrow href={window.DC_LINKS.agenda} target="_blank" rel="noreferrer">Quero um diagnóstico gratuito</Button>
        </div>
      </section>
    </React.Fragment>
  );
}
Object.assign(window, { ServicesScreen });
})();
