/* Maitha Tech — "Digital Unit" page sections.
   Reuses shared primitives (Section, SectionHead, Accent, Reveal), the DS
   Button/Eyebrow, and the home's Nav + Contact + Footer. Content mirrors the
   real Digital Unit: diagnóstico (Assessment) → ideação → delivery. */

/* —— Hero (immersive: integrated background image) ————— */
function DigitalHero() {
  return (
    <header id="top" className="mt-hero-immersive">
      <img className="mt-hero-bg" src="assets/images/hero-one.avif" alt="Digital Unit: produtos e plataformas digitais" style={{ filter: "saturate(1.05) brightness(0.84)" }} />
      <div className="mt-hero-scrim" />
      <div className="mt-hero-grid" />
      <div className="mt-hero-vignette" />
      <span className="mt-corner tl" /><span className="mt-corner tr" /><span className="mt-corner bl" /><span className="mt-corner br" />
      <img className="mt-digital-blob mt-float" src="assets/images/glass-digital.png" alt="" aria-hidden="true" />

      <div className="mt-container" style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", justifyContent: "center", width: "100%", paddingTop: "clamp(108px, 14vh, 156px)", paddingBottom: "clamp(56px, 8vh, 96px)" }}>
        <Reveal style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
          <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--accent)" }}>Digital Unit</span>
          <span style={{ height: 1, background: "rgba(255,255,255,0.25)", width: 64 }} />
          <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-muted)" }}>O que fazemos</span>
        </Reveal>
        <Reveal style={{ maxWidth: 1020 }}>
          <h1 style={{ fontSize: "clamp(2.6rem, 5.4vw, 4.8rem)", lineHeight: 1.04, letterSpacing: "var(--ls-display)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: 0, textWrap: "balance", textShadow: "0 2px 40px rgba(0,0,0,0.5)" }}>
            Soluções digitais que unem tecnologia, design e <Accent scribble="s5" tone="blue" width={0.98}>negócio</Accent>.
          </h1>
          <p style={{ marginTop: 22, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 600 }}>
            Com velocidade, qualidade e foco em resultado, nossos times atuam como uma extensão do seu, acelerando produtos e plataformas que impulsionam o crescimento da sua empresa.
          </p>
          <div style={{ marginTop: 34, display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
            <Button as="a" href="#fale-conosco" size="lg" dot>Fale com a Digital Unit</Button>
            <a href="/#units" className="mt-link" style={{ display: "inline-flex", alignItems: "center", gap: 12, color: "var(--text-strong)", fontSize: "var(--fs-h6)" }}>
              Ver todas as Units
              <span style={{ width: 38, height: 38, borderRadius: "50%", border: "1px solid var(--border-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <img src="assets/icons/arrow-white.svg" alt="" style={{ width: 13 }} />
              </span>
            </a>
          </div>
        </Reveal>
      </div>
    </header>
  );
}

/* —— Statement (inverted: white band, black text) ————— */
function DigitalStatement() {
  return (
    <section id="abordagem" style={{ background: "var(--mt-white)" }}>
      <div className="mt-container" style={{ paddingTop: "clamp(72px, 9vw, 124px)", paddingBottom: "clamp(72px, 9vw, 124px)" }}>
        <Reveal style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ width: 28, height: 1, background: "rgba(0,0,0,0.32)" }} />
          <span style={{ fontSize: "var(--fs-sub)", fontWeight: "var(--fw-semibold)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "rgba(0,0,0,0.55)" }}>Como atuamos</span>
        </Reveal>
        <Reveal delay={80}>
          <p style={{ margin: "26px 0 0", fontSize: "clamp(1.6rem, 3.2vw, 2.7rem)", lineHeight: 1.3, letterSpacing: "var(--ls-h2)", color: "var(--mt-black)", fontWeight: "var(--fw-medium)", maxWidth: 1000, textWrap: "balance" }}>
            Conectamos estratégia, design e engenharia num só fluxo. Do <Accent scribble="s4" tone="orange">diagnóstico</Accent> à evolução contínua do produto.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* —— Offerings (3 pilares) ————————————————————————— */
const OFFERINGS = [
  { n: "01", t: "Digital Assessment", d: "Diagnóstico completo que combina análise técnica, experiência do usuário e objetivos de negócio. Entenda sua maturidade digital, mapeie gargalos e direcione investimentos com impacto mensurável.", img: "assets/images/digital-of-1.jpg" },
  { n: "02", t: "Da ideia ao produto", d: "Transforme ideias em produtos digitais com propósito, valor e impacto. Com design estratégico, dados e pensamento orientado a valor, reduzimos incertezas e aceleramos o caminho da ideia ao produto validado.", img: "assets/images/digital-of-2.jpg" },
  { n: "03", t: "Digital Delivery", d: "Times e experts atuando como extensão do seu. Desenvolvemos e evoluímos produtos e sistemas na velocidade que o mundo exige, com squads sob demanda, qualidade e foco em resultado.", img: "assets/images/digital-of-3.jpg" },
];

function OfferingRow({ o, flip }) {
  const [h, setH] = React.useState(false);
  const media = (
    <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: "4 / 3", background: "var(--mt-graphite)", border: "1px solid var(--border-default)" }}>
      <img src={o.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "var(--mt-media-gray, grayscale(0.4) contrast(1.04))", transform: h ? "scale(1.04)" : "scale(1)", transition: "transform var(--dur-slow) var(--ease-out)" }} />
    </div>
  );
  const text = (
    <div>
      <span style={{ fontSize: "var(--fs-h6)", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)" }}>({o.n})</span>
      <h3 style={{ margin: "18px 0 0", fontSize: "clamp(1.6rem, 2.6vw, 2.3rem)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)" }}>{o.t}</h3>
      <p style={{ margin: "16px 0 0", fontSize: "var(--fs-body-lg)", lineHeight: 1.62, color: "var(--text-body)", maxWidth: 480 }}>{o.d}</p>
    </div>
  );
  return (
    <Reveal>
      <div className="mt-offering-row" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        {flip
          ? <React.Fragment><div style={{ order: 1 }}>{text}</div><div style={{ order: 2 }}>{media}</div></React.Fragment>
          : <React.Fragment>{media}{text}</React.Fragment>}
      </div>
    </Reveal>
  );
}

function Offerings() {
  return (
    <Section id="servicos">
      <Reveal>
        <SectionHead
          eyebrow="Frentes de atuação"
          title={<>Três formas de acelerar seu <Accent scribble="s5" tone="blue" width={0.98}>produto</Accent></>}
          lead="Combine as frentes conforme o momento do seu produto: do primeiro diagnóstico à operação contínua."
          max={820}
        />
      </Reveal>
      <div style={{ marginTop: 64, display: "flex", flexDirection: "column", gap: "clamp(48px, 6vw, 88px)" }}>
        {OFFERINGS.map((o, i) => <OfferingRow key={o.t} o={o} flip={i % 2 === 1} />)}
      </div>
    </Section>
  );
}

/* —— Capabilities ————————————————————————————————— */
const CAPS = ["Discovery & Estratégia", "Product Design (UX/UI)", "Engenharia de Software", "Web & Mobile", "Design Systems", "APIs & Integrações", "QA & Performance", "DevOps & Cloud"];

function Capabilities() {
  return (
    <Section id="capacidades">
      <div className="mt-contact-grid" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "start" }}>
        <Reveal>
          <SectionHead
            eyebrow="Capacidades"
            title={<>Um time completo, sob <Accent scribble="s4" tone="orange">demanda</Accent></>}
            lead="Especialistas que se integram ao seu time para cobrir todo o ciclo de um produto digital."
          />
        </Reveal>
        <Reveal delay={120}>
          <div style={{ borderTop: "1px solid var(--border-faint)" }}>
            {CAPS.map((c, i) => (
              <div key={c} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 20, alignItems: "center", padding: "20px 0", borderBottom: "1px solid var(--border-faint)" }}>
                <span style={{ fontSize: "var(--fs-sub)", color: "var(--text-faint)", letterSpacing: "var(--ls-eyebrow)", minWidth: 34 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontSize: "var(--fs-h5)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)" }}>{c}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* —— Processo (interactive auto-advancing stepper) ——————— */
const STEPS = [
  { n: "01", t: "Assessment", d: "Diagnóstico de maturidade digital, mapeamento de gargalos e priorização de iniciativas.", img: "assets/images/digital-step-1.jpg" },
  { n: "02", t: "Discovery & Ideação", d: "Design estratégico e dados para reduzir incertezas e definir o que realmente importa.", img: "assets/images/digital-step-2.jpg" },
  { n: "03", t: "Design & Prototipação", d: "UX/UI, design systems e validação com usuários antes de escrever a primeira linha.", img: "assets/images/digital-step-3.jpg" },
  { n: "04", t: "Engenharia & Delivery", d: "Squads sob demanda desenvolvendo produtos e plataformas com qualidade e velocidade.", img: "assets/images/digital-step-4.jpg" },
  { n: "05", t: "Evolução contínua", d: "Métricas, performance e melhoria contínua para o produto seguir gerando valor.", img: "assets/images/digital-step-5.jpg" },
];
const STEP_DURATION = 5200;

function Processo() {
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setTimeout(() => setActive((a) => (a + 1) % STEPS.length), STEP_DURATION);
    return () => clearTimeout(id);
  }, [active, paused]);

  const s = STEPS[active];

  return (
    <Section id="processo">
      <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 30, flexWrap: "wrap", marginBottom: 52 }}>
        <div style={{ maxWidth: 620 }}>
          <Eyebrow marker="rule">Como entregamos</Eyebrow>
          <h2 style={{ fontSize: "clamp(2rem, 3.6vw, 3rem)", lineHeight: 1.1, letterSpacing: "var(--ls-h1)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: "20px 0 0", textWrap: "balance" }}>
            Um fluxo claro, da ideia à <Accent scribble="s3" tone="orange">entrega</Accent>
          </h2>
        </div>
        <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)" }}>
          Etapa {s.n} / {STEPS[STEPS.length - 1].n}
        </span>
      </Reveal>

      <Reveal delay={100}>
        <div onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
          style={{ border: "1px solid var(--border-default)", borderRadius: "var(--radius-xl)", overflow: "hidden", background: "var(--surface-card)" }}>
          {/* Stage */}
          <div className="mt-stepper-stage" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", minHeight: 420 }}>
            {/* Left content */}
            <div style={{ padding: "clamp(28px, 3.4vw, 52px)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div key={active} className="mt-step-pop">
                <div style={{ fontSize: "clamp(4rem, 9vw, 8rem)", lineHeight: 0.9, fontWeight: "var(--fw-medium)", letterSpacing: "-0.04em", color: "transparent", WebkitTextStroke: "1.5px var(--border-strong)" }}>{s.n}</div>
                <h3 style={{ margin: "22px 0 0", fontSize: "clamp(1.6rem, 2.8vw, 2.4rem)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)" }}>{s.t}</h3>
                <p style={{ margin: "16px 0 0", fontSize: "var(--fs-body-lg)", lineHeight: 1.62, color: "var(--text-body)", maxWidth: 440 }}>{s.d}</p>
              </div>
            </div>
            {/* Right image stack (crossfade) */}
            <div style={{ position: "relative", background: "var(--mt-graphite)", minHeight: 300 }}>
              {STEPS.map((st, i) => (
                <img key={st.t} src={st.img} alt="" className="mt-step-fade"
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: i === active ? 1 : 0, filter: "var(--mt-media-gray, grayscale(0.4) contrast(1.04))" }} />
              ))}
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.35))", pointerEvents: "none" }} />
            </div>
          </div>

          {/* Tabs */}
          <div className="mt-stepper-tabs" style={{ display: "grid", gridTemplateColumns: `repeat(${STEPS.length}, 1fr)`, borderTop: "1px solid var(--border-default)" }}>
            {STEPS.map((st, i) => {
              const isActive = i === active;
              const done = i < active;
              return (
                <button key={st.t} onClick={() => setActive(i)}
                  style={{ position: "relative", textAlign: "left", background: isActive ? "var(--mt-near-black)" : "transparent", border: 0, borderLeft: i ? "1px solid var(--border-faint)" : "0", padding: "18px 18px 20px", cursor: "pointer", fontFamily: "var(--font-sans)", transition: "background var(--dur-base) var(--ease-out)" }}>
                  {/* progress track */}
                  <span style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: "var(--border-faint)" }}>
                    <span
                      key={isActive ? `a-${active}-${paused}` : `i-${i}`}
                      style={{
                        display: "block", height: "100%", background: "var(--accent)",
                        width: done ? "100%" : isActive ? undefined : "0%",
                        animation: isActive ? `mt-prog ${STEP_DURATION}ms linear forwards` : "none",
                        animationPlayState: paused ? "paused" : "running",
                      }}
                    />
                  </span>
                  <span style={{ display: "block", fontSize: "var(--fs-sub)", letterSpacing: "var(--ls-eyebrow)", color: isActive ? "var(--accent)" : "var(--text-faint)", transition: "color var(--dur-base)" }}>({st.n})</span>
                  <span style={{ display: "block", marginTop: 7, fontSize: "var(--fs-h6)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)", color: isActive ? "var(--text-strong)" : "var(--text-muted)", transition: "color var(--dur-base)" }}>{st.t}</span>
                </button>
              );
            })}
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

/* —— CTA centralizado ————————————————————————————— */
function DigitalCta() {
  return (
    <Section id="modelo">
      <Reveal style={{ maxWidth: 960, margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
        <span style={{ display: "inline-flex", alignItems: "center", padding: "9px 20px", borderRadius: "var(--radius-pill)", background: "var(--mt-graphite)", border: "1px solid var(--border-default)", fontSize: "var(--fs-sub)", fontWeight: "var(--fw-semibold)", letterSpacing: "0.02em", color: "var(--text-strong)" }}>Digital Unit</span>
        <h2 style={{ margin: "28px 0 0", fontSize: "clamp(2.2rem, 5vw, 4.2rem)", lineHeight: 1.05, letterSpacing: "var(--ls-display)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", textWrap: "balance" }}>
          Um modelo pensado para entregar com <Accent scribble="s5" tone="blue" width={0.98}>qualidade</Accent> e velocidade.
        </h2>
        <p style={{ margin: "26px auto 0", maxWidth: 760, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65 }}>
          Nosso modelo matricial equilibra autonomia e coordenação entre squads, chapters e tech managers, garantindo previsibilidade, qualidade e evolução contínua. E o diferencial humano da Maitha faz toda a diferença: 100% dos nossos profissionais passam por acompanhamento comportamental e técnico mensal, o que mantém o time motivado, alinhado e preparado para entregar o melhor.
        </p>
        <div style={{ marginTop: 40 }}>
          <Button as="a" href="#fale-conosco" size="lg" dot>Fale com nosso time</Button>
        </div>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { DigitalHero, DigitalStatement, Offerings, Capabilities, Processo, DigitalCta });