/* Maitha Tech — "AI Unit" page sections.
   Reuses shared primitives + DS Button/Eyebrow + home's Nav/Contact/Footer.
   Content mirrors the real AI Unit: 3 phases (discover / build / operate)
   and the proprietary AI7 method. */

/* —— Hero (immersive: integrated background image) ————— */
function AiHero() {
  return (
    <header id="top" className="mt-hero-immersive">
      <img className="mt-hero-bg" src="assets/images/ai-hero.jpg" alt="AI Unit: inteligência artificial com foco em impacto" style={{ filter: "saturate(1.05) brightness(0.8)" }} />
      <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)" }}>AI 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 o potencial da Inteligência Artificial em resultados <Accent scribble="s5" tone="blue" width={0.98}>reais</Accent>.
          </h1>
          <p style={{ marginTop: 22, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 620 }}>
            A AI Unit ajuda empresas a transformar o poder da IA em vantagem competitiva, com uma abordagem pragmática, segura e orientada a 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 AI 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 AiStatement() {
  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" }}>
            Pragmática, segura e orientada a valor, para a IA gerar <Accent scribble="s4" tone="orange">impacto</Accent> real, não desperdício.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* —— Frentes (3 fases, cada uma com seus serviços) ————— */
const AI_PHASES = [
  { n: "01", phase: "Discover & strategize", t: "Caminho claro, futuro mais previsível.", d: "Definimos a estratégia e validamos hipóteses, conectando o potencial da IA aos desafios e metas do seu negócio.", services: ["AI Journey", "AI POC", "AI Cultural Change"], img: "assets/images/ai-phase-1.jpg" },
  { n: "02", phase: "Build & scale", t: "IA na prática, impacto real.", d: "Implementamos soluções customizadas (de POCs e RAGs inteligentes a agentes autônomos), sempre com foco em escalabilidade e performance.", services: ["AI Foundation", "AI Custom RAG", "AI Agents", "Agents Orchestration"], img: "assets/images/ai-phase-2.jpg" },
  { n: "03", phase: "Operate & evolve", t: "Soluções prontas para evoluir.", d: "Mais do que conectar a um modelo de linguagem, garantimos que a IA gere impacto real, evitando os riscos e desperdícios que comprometem a maioria dos projetos.", services: ["AI Operations & Support", "AI Evolution", "AI Innovation Lab"], img: "assets/images/ai-phase-3.jpg" },
];

function AiPhaseRow({ p, 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={p.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>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ fontSize: "var(--fs-h6)", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)" }}>({p.n})</span>
        <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--accent)" }}>{p.phase}</span>
      </div>
      <h3 style={{ margin: "16px 0 0", fontSize: "clamp(1.6rem, 2.6vw, 2.3rem)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)" }}>{p.t}</h3>
      <p style={{ margin: "16px 0 0", fontSize: "var(--fs-body-lg)", lineHeight: 1.62, color: "var(--text-body)", maxWidth: 480 }}>{p.d}</p>
      <div style={{ marginTop: 22, display: "flex", flexWrap: "wrap", gap: 10 }}>
        {p.services.map((sv) => (
          <span key={sv} style={{ padding: "9px 16px", borderRadius: "var(--radius-pill)", border: "1px solid var(--border-default)", background: "var(--surface-card)", fontSize: "var(--fs-sub)", color: "var(--text-body)", letterSpacing: "0.01em" }}>{sv}</span>
        ))}
      </div>
    </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 AiPhases() {
  return (
    <Section id="servicos">
      <Reveal>
        <SectionHead
          eyebrow="Frentes de atuação"
          title={<>Do primeiro piloto à IA em <Accent scribble="s5" tone="blue" width={0.98}>produção</Accent></>}
          lead="Acompanhamos toda a jornada de IA em três fases: da estratégia à operação contínua."
          max={820}
        />
      </Reveal>
      <div style={{ marginTop: 64, display: "flex", flexDirection: "column", gap: "clamp(48px, 6vw, 88px)" }}>
        {AI_PHASES.map((p, i) => <AiPhaseRow key={p.phase} p={p} flip={i % 2 === 1} />)}
      </div>
    </Section>
  );
}

/* —— Método AI7 (interactive vertical list of 7 pillars) —— */
const AI7 = [
  { n: "01", t: "Estratégia", d: "Alinhamos a IA aos objetivos e às metas do negócio antes de qualquer linha de código." },
  { n: "02", t: "Dados", d: "Base sólida, confiável e governada para alimentar modelos com qualidade." },
  { n: "03", t: "Governança", d: "Segurança, ética e conformidade em cada iniciativa de IA." },
  { n: "04", t: "Performance", d: "Eficiência, escalabilidade e custo sob controle nas soluções em produção." },
  { n: "05", t: "Adoção", d: "Cultura, mudança e capacitação para que a IA seja usada de verdade." },
  { n: "06", t: "Operação", d: "Disponibilidade, suporte e monitoramento contínuo dos sistemas de IA." },
  { n: "07", t: "Evolução", d: "Melhoria contínua para sustentar inovação e valor ao longo do tempo." },
];

function Ai7Row({ p, active, onActivate }) {
  return (
    <div
      onMouseEnter={onActivate}
      onClick={onActivate}
      style={{
        borderBottom: active ? "1px solid transparent" : "1px solid var(--border-faint)",
        background: active ? "var(--mt-white)" : "transparent",
        borderRadius: active ? "var(--radius-xl)" : 0,
        transition: "background var(--dur-base) var(--ease-out), border-radius var(--dur-base)",
      }}
    >
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 20, padding: active ? "24px 26px" : "24px 6px" }}>
        <span style={{ fontSize: "var(--fs-h6)", letterSpacing: "var(--ls-eyebrow)", color: active ? "rgba(0,0,0,0.5)" : "var(--text-faint)", transition: "color var(--dur-base)" }}>({p.n})</span>
        <span>
          <span style={{ fontSize: "clamp(1.15rem, 1.7vw, 1.5rem)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)", color: active ? "var(--mt-black)" : "var(--text-strong)", transition: "color var(--dur-base)" }}>{p.t}</span>
          <span style={{ display: "grid", gridTemplateRows: active ? "1fr" : "0fr", transition: "grid-template-rows var(--dur-base) var(--ease-out)" }}>
            <span style={{ overflow: "hidden" }}>
              <span style={{ display: "block", paddingTop: active ? 8 : 0, maxWidth: 620, fontSize: "var(--fs-body)", lineHeight: 1.55, color: "rgba(0,0,0,0.66)" }}>{p.d}</span>
            </span>
          </span>
        </span>
        <span style={{ width: 38, height: 38, borderRadius: "50%", border: `1px solid ${active ? "rgba(0,0,0,0.25)" : "var(--border-strong)"}`, display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
          <img src="assets/icons/arrow-white.svg" alt="" style={{ width: 13, filter: active ? "invert(1)" : "none", transition: "filter var(--dur-base)" }} />
        </span>
      </div>
    </div>
  );
}

function MetodoAI7() {
  const [active, setActive] = React.useState(0);
  return (
    <Section id="ai7">
      <div className="mt-contact-grid" style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 56, alignItems: "start" }}>
        <Reveal>
          <Eyebrow marker="rule">Método AI7</Eyebrow>
          <h2 style={{ position: "relative", isolation: "isolate", 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" }}>
            Menos risco no seu <Accent scribble="s3" tone="orange" behind>investimento</Accent> em IA
          </h2>
          <p style={{ marginTop: 22, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65, maxWidth: 460 }}>
            O AI7 é o framework proprietário da Maitha que estrutura toda a jornada de Inteligência Artificial em sete pilares essenciais, da estratégia à operação, eliminando os riscos que fazem a maioria dos projetos falharem.
          </p>
          <div style={{ marginTop: 30 }}>
            <Button as="a" href="#fale-conosco" dot>Fale com nossos especialistas</Button>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ borderTop: "1px solid var(--border-faint)" }}>
            {AI7.map((p, i) => <Ai7Row key={p.t} p={p} active={active === i} onActivate={() => setActive(i)} />)}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

Object.assign(window, { AiHero, AiStatement, AiPhases, MetodoAI7 });