/* Maitha Tech — "Cloud Unit" page sections.
   Reuses shared primitives + DS Button/Eyebrow + home's Nav/Contact/Footer.
   Content mirrors the real Cloud Unit: AI-First, 5 frentes, parceiros. */

/* —— Hero (immersive: integrated background image) ————— */
function CloudHero() {
  return (
    <header id="top" className="mt-hero-immersive">
      <img className="mt-hero-bg" src="assets/images/hero-about.avif" alt="Cloud Unit: ambientes em nuvem com IA" style={{ filter: "saturate(1.05) brightness(0.82)" }} />
      <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" />

      <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)" }}>Cloud 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)" }}>
            Transforme sua infraestrutura em vantagem <Accent scribble="s5" tone="blue" width={0.98}>competitiva</Accent>.
          </h1>
          <p style={{ marginTop: 22, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 640 }}>
            Estruturamos, modernizamos e operamos ambientes em nuvem com foco em performance, segurança, previsibilidade financeira e geração real de valor para o negócio.
          </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 Cloud 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 CloudStatement() {
  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" }}>
            Somos AI-First por princípio: aplicamos IA da estratégia à <Accent scribble="s4" tone="orange">operação</Accent>, com inteligência contínua na nuvem.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* —— Frentes (interactive auto-advancing stepper) ——————— */
const CLOUD_FRENTES = [
  { n: "01", t: "Cloud Managed Services", d: "Operação 24x7 de ambientes multicloud críticos, com SLAs definidos e governança contínua: monitoramento, telemetria, machine learning e agentes de IA em um sistema preditivo.", img: "assets/images/cloud-step-1.jpg" },
  { n: "02", t: "Cloud Consulting", d: "Desenhamos, avaliamos e evoluímos arquiteturas cloud com dados e visão estratégica, usando IA para assessments automatizados, identificação de riscos e simulação de cenários.", img: "assets/images/cloud-step-2.jpg" },
  { n: "03", t: "Cloud Adoption & Migration", d: "Adoção e migração com metodologia consolidada e aceleradores de IA: inventário, dependências e estratégias para uma jornada mais segura, previsível e eficiente.", img: "assets/images/cloud-step-3.jpg" },
  { n: "04", t: "FinOps 3.0", d: "Da lógica reativa de relatórios mensais ao monitoramento contínuo: modelos preditivos de consumo, detecção automática de desperdícios e recomendações em tempo real.", img: "assets/images/cloud-step-4.jpg" },
  { n: "05", t: "DevSecOps", d: "Desenvolvimento, segurança e operação em um fluxo contínuo e automatizado (do primeiro commit ao runtime), com decisões baseadas em risco real.", img: "assets/images/cloud-step-5.jpg" },
];
const CLOUD_STEP_DURATION = 5200;

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

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

  const s = CLOUD_FRENTES[active];

  return (
    <Section id="servicos">
      <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 30, flexWrap: "wrap", marginBottom: 52 }}>
        <div style={{ maxWidth: 640 }}>
          <Eyebrow marker="rule">Frentes de atuação</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" }}>
            Tudo o que a sua <Accent scribble="s3" tone="orange">nuvem</Accent> precisa
          </h2>
        </div>
        <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)" }}>
          Frente {s.n} / {CLOUD_FRENTES[CLOUD_FRENTES.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)" }}>
          <div className="mt-stepper-stage" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", minHeight: 420 }}>
            <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: 460 }}>{s.d}</p>
              </div>
            </div>
            <div style={{ position: "relative", background: "var(--mt-graphite)", minHeight: 300 }}>
              {CLOUD_FRENTES.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>

          <div className="mt-stepper-tabs" style={{ display: "grid", gridTemplateColumns: `repeat(${CLOUD_FRENTES.length}, 1fr)`, borderTop: "1px solid var(--border-default)" }}>
            {CLOUD_FRENTES.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)" }}>
                  <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 ${CLOUD_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>
  );
}

/* —— Parceiros ————————————————————————————————————— */
const CLOUD_PARTNERS = ["AWS", "Google Cloud", "Microsoft Azure"];

function CloudPartners() {
  return (
    <Section id="parceiros">
      <div className="mt-contact-grid" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "center" }}>
        <Reveal>
          <SectionHead
            eyebrow="Parcerias estratégicas"
            title={<>Parceiros das principais plataformas do <Accent scribble="s5" tone="blue" width={0.98}>mundo</Accent></>}
            lead="Nossa atuação é fortalecida por alianças com os maiores ecossistemas de nuvem, para entregar soluções robustas, escaláveis e inovadoras."
          />
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 0, borderTop: "1px solid var(--border-faint)" }}>
            {CLOUD_PARTNERS.map((p, i) => (
              <div key={p} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "26px 0", borderBottom: "1px solid var(--border-faint)" }}>
                <span style={{ fontSize: "clamp(1.4rem, 2.4vw, 2rem)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)", color: "var(--text-strong)" }}>{p}</span>
                <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)" }}>Cloud Partner</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* —— CTA centralizado ————————————————————————————— */
function CloudCta() {
  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)" }}>Cloud 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" }}>
          Não entregamos apenas infraestrutura. Entregamos <Accent scribble="s5" tone="blue" width={0.98}>evolução</Accent> contínua.
        </h2>
        <p style={{ margin: "26px auto 0", maxWidth: 720, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65 }}>
          Performance, segurança e previsibilidade financeira em ambientes de nuvem que evoluem junto com o seu negócio.
        </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, { CloudHero, CloudStatement, CloudStepper, CloudPartners, CloudCta });