/* Maitha Tech — "Salesforce Unit" page sections.
   Reuses shared primitives + DS Button/Eyebrow + home's Nav/Contact/Footer.
   Content mirrors the real Salesforce Unit. */

/* —— Hero (immersive: integrated background image) ————— */
function SfHero() {
  return (
    <header id="top" className="mt-hero-immersive">
      <img className="mt-hero-bg" src="assets/images/about-creativity.webp" alt="Salesforce Unit: ecossistema Salesforce" 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)" }}>Salesforce 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)" }}>
            Acelere resultados com todo o potencial do ecossistema <Accent scribble="s5" tone="blue" width={0.98}>Salesforce</Accent>.
          </h1>
          <p style={{ marginTop: 22, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 640 }}>
            Unimos conhecimento de negócios, tecnologia e indústrias para implementar, evoluir e extrair valor real das soluções Salesforce, do primeiro projeto à otimização contínua com IA.
          </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 Salesforce 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>
  );
}

/* —— Por que a Maitha? (inverted white band + diferenciais) —— */
const SF_WHY = [
  "Visão consultiva de negócio + tecnologia",
  "Experiência prática nas principais Clouds Salesforce",
  "Metodologias consolidadas de governança e evolução",
  "Foco em geração rápida de valor",
];

function SfWhy() {
  return (
    <section id="por-que" 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)" }}>Por que a Maitha?</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: 960, textWrap: "balance" }}>
            Especialistas lado a lado com você para transformar Salesforce em vantagem <Accent scribble="s4" tone="orange">competitiva</Accent>.
          </p>
        </Reveal>
        <Reveal delay={140} style={{ marginTop: "clamp(40px, 5vw, 64px)" }}>
          <div className="mt-sf-why-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(0,0,0,0.12)" }}>
            {SF_WHY.map((w, i) => (
              <div key={w} style={{ display: "flex", gap: 18, alignItems: "flex-start", padding: "26px 0", borderBottom: "1px solid rgba(0,0,0,0.12)", borderRight: i % 2 === 0 ? "1px solid rgba(0,0,0,0.12)" : "0", paddingRight: i % 2 === 0 ? 40 : 0, paddingLeft: i % 2 === 1 ? 40 : 0 }}>
                <span style={{ fontSize: "var(--fs-sub)", letterSpacing: "var(--ls-eyebrow)", color: "rgba(0,0,0,0.4)", paddingTop: 4 }}>{`0${i + 1}`}</span>
                <span style={{ fontSize: "clamp(1.2rem, 1.9vw, 1.55rem)", lineHeight: 1.3, fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)", color: "var(--mt-black)" }}>{w}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* —— Serviços (interactive auto-advancing stepper) ——————— */
const SF_SERVICES = [
  { n: "01", t: "Implementação Salesforce", d: "Uma base sólida, escalável e alinhada aos seus processos desde o início: implementação das principais Clouds, aderência aos requisitos do negócio e arquitetura preparada para crescer.", img: "assets/images/sf-step-1.jpg" },
  { n: "02", t: "Hyper Care", d: "Evolução contínua para manter o Salesforce gerando valor: manutenção, governança e melhorias contínuas com metodologias reconhecidas (ITIL, COBIT e PDCA).", img: "assets/images/sf-step-2.jpg" },
  { n: "03", t: "Quick Start", d: "Implantação rápida e enxuta, com as funcionalidades essenciais priorizadas, ideal para projetos de baixa complexidade ou para os primeiros passos no ecossistema.", img: "assets/images/sf-step-3.jpg" },
  { n: "04", t: "Agentforce (IA Salesforce)", d: "IA nativa aplicada às suas operações: parametrização de soluções como Einstein, automação de tarefas e decisões orientadas por dados que impactam a jornada do cliente.", img: "assets/images/sf-step-4.jpg" },
];
const SF_STEP_DURATION = 5200;

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

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

  const s = SF_SERVICES[active];

  return (
    <Section id="servicos">
      <div style={{ position: "relative" }}>
        <img className="mt-sf-blob mt-float" src="assets/images/mat-blob-2.png" alt="" aria-hidden="true" />
        <Reveal style={{ position: "relative", zIndex: 1, display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 30, flexWrap: "wrap", marginBottom: 52 }}>
        <div style={{ maxWidth: 640 }}>
          <Eyebrow marker="rule">Serviços</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" }}>
            Como aceleramos sua <Accent scribble="s3" tone="orange">jornada</Accent>
          </h2>
        </div>
        <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)" }}>
          Serviço {s.n} / {SF_SERVICES[SF_SERVICES.length - 1].n}
        </span>
      </Reveal>

      <Reveal delay={100} style={{ position: "relative", zIndex: 1 }}>
        <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 }}>
              {SF_SERVICES.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(${SF_SERVICES.length}, 1fr)`, borderTop: "1px solid var(--border-default)" }}>
            {SF_SERVICES.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 ${SF_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>
      </div>
    </Section>
  );
}

/* —— Clouds que dominamos ————————————————————————— */
const SF_CLOUDS = ["Sales Cloud", "Service Cloud", "Marketing Cloud", "Commerce Cloud", "Experience Cloud", "Data Cloud", "Einstein / Agentforce"];

function SfClouds() {
  return (
    <Section id="clouds">
      <div className="mt-contact-grid" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "start" }}>
        <Reveal>
          <SectionHead
            eyebrow="Clouds que dominamos"
            title={<>Atuação nas principais soluções do <Accent scribble="s5" tone="blue" width={0.98}>ecossistema</Accent></>}
            lead="Combinamos experiência prática nas Clouds mais relevantes do Salesforce para entregar valor em cada frente do negócio."
          />
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
            {SF_CLOUDS.map((c) => (
              <span key={c} 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)" }}>{c}</span>
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* —— CTA centralizado ————————————————————————————— */
function SfCta() {
  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)" }}>Salesforce 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" }}>
          Prontos para acelerar a <Accent scribble="s5" tone="blue" width={0.98}>jornada</Accent> com Salesforce?
        </h2>
        <p style={{ margin: "26px auto 0", maxWidth: 720, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65 }}>
          Transforme sua operação, evolua continuamente e gere valor mais rápido com a Maitha.
        </p>
        <div style={{ marginTop: 40 }}>
          <Button as="a" href="#fale-conosco" size="lg" dot>Fale com nossos especialistas</Button>
        </div>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { SfHero, SfWhy, SfServices, SfClouds, SfCta });