/* Maitha Tech — "Data 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 Data Unit: data-driven journey, engineering → analytics → cultura. */

/* —— Hero (immersive: integrated background image) ————— */
function DataHero() {
  return (
    <header id="top" className="mt-hero-immersive">
      <img className="mt-hero-bg" src="assets/images/data-hero.webp" alt="Data Unit: dados que viram decisão" 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)" }}>Data 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 dados em oportunidades reais de <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: 620 }}>
            Ajudamos empresas a evoluírem na jornada data-driven, conectando, tratando e organizando dados para que se tornem a base de decisões estratégicas e do uso eficiente da IA. Do primeiro pipeline à cultura analítica, transformamos dados em valor.
          </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 Data 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 DataStatement() {
  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" }}>
            Do primeiro pipeline à cultura analítica, transformamos dados dispersos em <Accent scribble="s4" tone="orange">decisões</Accent> inteligentes.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* —— Offerings (3 pilares) ————————————————————————— */
const DATA_OFFERINGS = [
  { n: "01", t: "Data Engineering", d: "Conectamos, tratamos e organizamos seus dados, transformando-os em uma base sólida para IA e para decisões que movem o negócio.", img: "assets/images/data-engineering.jpg" },
  { n: "02", t: "Hyper Personalization Data", d: "Usamos dados para personalizar experiências em escala, conectando comportamento, contexto e canais para entregar a mensagem certa, à pessoa certa, no momento certo.", img: "assets/images/gallery-one.webp" },
  { n: "03", t: "Data Driven Journey", d: "Ajudamos sua empresa a evoluir na jornada de maturidade em dados, transformando cultura, ferramentas e decisões para que os dados deixem de ser promessa e virem prática.", img: "assets/images/service-design.webp" },
];

function DataOfferingRow({ 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 DataOfferings() {
  return (
    <Section id="servicos">
      <div style={{ position: "relative" }}>
        <img className="mt-data-blob mt-float" src="assets/images/mat-blob-1.png" alt="" aria-hidden="true" />
        <Reveal style={{ position: "relative", zIndex: 1 }}>
          <SectionHead
            eyebrow="Frentes de atuação"
            title={<>Da base de dados ao <Accent scribble="s5" tone="blue" width={0.98}>insight</Accent></>}
            lead="Combine as frentes conforme a maturidade dos seus dados: da engenharia que estrutura a base à cultura que sustenta as decisões."
            max={820}
          />
        </Reveal>
      </div>
      <div style={{ marginTop: 64, display: "flex", flexDirection: "column", gap: "clamp(48px, 6vw, 88px)" }}>
        {DATA_OFFERINGS.map((o, i) => <DataOfferingRow key={o.t} o={o} flip={i % 2 === 1} />)}
      </div>
    </Section>
  );
}

/* —— Tecnologias e ferramentas ————————————————————— */
const DATA_TOOLS = ["Power BI", "Tableau", "Qlik", "Looker", "Apache Spark", "Hadoop", "BigQuery", "Databricks", "Snowflake", "Airflow", "dbt", "Azure Synapse"];

function DataTools() {
  return (
    <Section id="tecnologias">
      <div className="mt-contact-grid" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "start" }}>
        <Reveal>
          <SectionHead
            eyebrow="Tecnologias e ferramentas"
            title={<>Prontos para o seu <Accent scribble="s4" tone="orange">contexto</Accent></>}
            lead="Atuamos de acordo com as necessidades do seu negócio, com as ferramentas e tecnologias mais atuais do mercado de dados."
          />
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
            {DATA_TOOLS.map((t) => (
              <span key={t} style={{ padding: "12px 20px", borderRadius: "var(--radius-pill)", border: "1px solid var(--border-default)", background: "var(--surface-card)", fontSize: "var(--fs-h6)", color: "var(--text-body)", letterSpacing: "var(--ls-tight)" }}>{t}</span>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* —— Processo (interactive auto-advancing stepper) ——————— */
const DATA_STEPS = [
  { n: "01", t: "Data Assessment", d: "Diagnóstico de maturidade em dados, mapeamento de fontes e priorização de iniciativas com impacto.", img: "assets/images/data-step-1.jpg" },
  { n: "02", t: "Data Engineering", d: "Pipelines, integração e governança: estruturamos uma base de dados confiável e pronta para escalar.", img: "assets/images/data-step-2.jpg" },
  { n: "03", t: "Analytics & BI", d: "Dashboards e métricas que tornam os dados visíveis e orientam decisões no dia a dia do negócio.", img: "assets/images/data-step-3.jpg" },
  { n: "04", t: "Data Science & IA", d: "Modelos preditivos e analíticos que antecipam cenários e abrem caminho para o uso eficiente da IA.", img: "assets/images/data-step-4.jpg" },
  { n: "05", t: "Cultura data-driven", d: "Pessoas, ferramentas e ritos para que decisões guiadas por dados deixem de ser promessa e virem prática.", img: "assets/images/data-step-5.jpg" },
];
const DATA_STEP_DURATION = 5200;

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

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

  const s = DATA_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" }}>
            Uma jornada clara, do dado à <Accent scribble="s3" tone="orange">decisão</Accent>
          </h2>
        </div>
        <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)" }}>
          Etapa {s.n} / {DATA_STEPS[DATA_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)" }}>
          <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: 440 }}>{s.d}</p>
              </div>
            </div>
            <div style={{ position: "relative", background: "var(--mt-graphite)", minHeight: 300 }}>
              {DATA_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>

          <div className="mt-stepper-tabs" style={{ display: "grid", gridTemplateColumns: `repeat(${DATA_STEPS.length}, 1fr)`, borderTop: "1px solid var(--border-default)" }}>
            {DATA_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)" }}>
                  <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 ${DATA_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 DataCta() {
  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)" }}>Data 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" }}>
          Muito mais que dados, <Accent scribble="s5" tone="blue" width={0.98}>direção</Accent>.
        </h2>
        <p style={{ margin: "26px auto 0", maxWidth: 760, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65 }}>
          Combinamos engenharia, estratégia e tecnologia para transformar dados dispersos em decisões inteligentes e em oportunidades concretas de crescimento.
        </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, { DataHero, DataStatement, DataOfferings, DataTools, DataStepper, DataCta });
