(() => {
const { SectionLabel, DisplayHeading, Card, StatBlock, Tag, GhostLink, Divider, Tabs, Tooltip, Badge, Button, ScrollReveal, LineReveal, ScrollProgress } = window.DigitalConteDoDesignSystem_c80f58;

function CaseScreen({ onNavigate }) {
  const [tab, setTab] = React.useState(0);
  const m = window.useIsMobile();
  const narrow = window.useIsMobile(1180);
  const chapters = [
    { title: "Desafio", body: "Uma rede regional com 40 lojas vendia online como se fosse um encarte: catálogo grande, oferta genérica, custo de mídia subindo mês a mês." },
    { title: "O que fizemos", body: "Reorganizamos o catálogo por intenção de compra, reescrevemos 1.200 títulos de produto e reconstruímos as campanhas em três níveis de recorrência." },
    { title: "Resultado", body: "Em dois trimestres, a receita orgânica cresceu 312% e o custo por aquisição caiu 38% — com a mesma verba de mídia." },
  ];
  return (
    <React.Fragment>
      <ScrollProgress />
      <section style={{ padding: m ? "46px 19px 30px" : "76px 30px 46px" }}>
        <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "30px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "15px" }}>
            <SectionLabel index="Case">Varejo alimentar · 2025</SectionLabel>
            <GhostLink size="sm" arrow={false} onClick={(e) => { e.preventDefault(); onNavigate("cases"); }}>← Voltar aos cases</GhostLink>
          </div>
          <LineReveal as="h1" size={m ? "xs" : narrow ? "sm" : "lg"} lines={["Do catálogo", "ao carrinho"]} style={{ maxWidth: "22ch" }} />
          <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
            <Tag>Performance</Tag><Tag>CRM</Tag><Tag>SEO</Tag><Badge tone="tint">2 trimestres</Badge>
          </div>
        </div>
      </section>
      <section style={{ padding: m ? "0 19px 30px" : "0 30px 46px" }}>
        <div style={{ maxWidth: "var(--page-max)", margin: "0 auto" }}>
          <ScrollReveal><Card grid padding="0" style={{ height: m ? "200px" : "360px", display: "grid", placeItems: "center" }}>
            <span style={{ fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-muted)" }}>Espaço reservado para o render do case</span>
          </Card></ScrollReveal>
        </div>
      </section>
      <section style={{ padding: m ? "0 19px 46px" : "0 30px 76px" }}>
        <div style={{ maxWidth: "var(--page-max)", margin: "0 auto", display: "grid", gridTemplateColumns: m ? "1fr" : "1fr 1.4fr", gap: m ? "30px" : "76px" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "30px" }}>
            <ScrollReveal><StatBlock value="+312%" label="Receita orgânica" /></ScrollReveal>
            <Divider />
            <ScrollReveal delay={90}><StatBlock value="−38%" label={<span>Custo por aquisição</span>} /></ScrollReveal>
            <Divider />
            <div style={{ display: "flex", alignItems: "center", gap: "8px", fontSize: "var(--text-caption)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-secondary)" }}>
              <Tooltip content="Custo por aquisição"><span style={{ borderBottom: "1px dotted var(--border-hairline)" }}>CPA</span></Tooltip>
              <span>medido no GA4 + CRM</span>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "30px" }}>
            <Tabs items={chapters.map((c) => c.title)} value={tab} onChange={setTab} />
            <p style={{ margin: 0, maxWidth: "58ch", fontSize: "var(--text-body)", lineHeight: "var(--leading-body)", letterSpacing: "var(--tracking-body)" }}>{chapters[tab].body}</p>
            <Button variant="ghost" arrow onClick={() => onNavigate("contato")}>Falar sobre o meu caso</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
Object.assign(window, { CaseScreen });
})();