/* Maitha Tech — "O que fazemos": the Units grid + clients marquee. */

const UNITS = [
  { n: "01", t: "Digital Unit", d: "Criamos experiências digitais e soluções tecnológicas que aceleram a transformação, conectando estratégia, design e engenharia.", href: "digital-unit.html" },
  { n: "02", t: "AI Unit", d: "Desenvolvemos e implementamos soluções de Inteligência Artificial para aumentar a eficiência, automatizar decisões e gerar vantagem competitiva.", href: "ai-unit.html" },
  { n: "03", t: "Data Unit", d: "Transformamos dados em insights acionáveis, estruturando arquiteturas e análises avançadas que orientam decisões.", href: "data-unit.html" },
  { n: "04", t: "Cloud Unit", d: "Estruturamos, modernizamos e operamos ambientes em nuvem com automação e IA, garantindo escala, eficiência e governança.", href: "cloud-unit.html" },
  { n: "05", t: "Salesforce Unit", d: "Implementamos Salesforce com visão 360º, do planejamento à operação, conectando processos, times e clientes.", href: "salesforce-unit.html" },
];

function UnitCard({ unit, delay }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <a href={unit.href || "#"} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 300, background: "var(--surface-card)", border: `1px solid ${h ? "var(--border-strong)" : "var(--border-default)"}`, borderRadius: "var(--radius-lg)", padding: "30px 28px", transition: "border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)", transform: h ? "translateY(-4px)" : "none" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontSize: "var(--fs-h6)", letterSpacing: "var(--ls-eyebrow)", color: h ? "var(--accent)" : "var(--text-faint)", transition: "color var(--dur-base)" }}>({unit.n})</span>
          <span style={{ width: 36, height: 36, borderRadius: "50%", border: "1px solid var(--border-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center", background: h ? "var(--mt-white)" : "transparent", transition: "background var(--dur-base)" }}>
            <img src="assets/icons/arrow-white.svg" alt="" style={{ width: 13, filter: h ? "invert(1)" : "none", transition: "filter var(--dur-base)" }} />
          </span>
        </div>
        <h3 style={{ margin: "auto 0 0", fontSize: "var(--fs-h3)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)" }}>{unit.t}</h3>
        <p style={{ margin: "14px 0 0", fontSize: "var(--fs-body)", lineHeight: 1.6, color: "var(--text-body)" }}>{unit.d}</p>
        <span style={{ marginTop: 22, fontSize: "var(--fs-sub)", fontWeight: "var(--fw-semibold)", letterSpacing: "0.04em", textTransform: "uppercase", color: h ? "var(--text-strong)" : "var(--text-muted)", transition: "color var(--dur-base)" }}>Saiba mais</span>
      </a>
    </Reveal>
  );
}

function CtaCard({ delay }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <a href="#fale-conosco" onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%", minHeight: 300, background: h ? "var(--mt-white)" : "var(--mt-near-black)", border: `1px solid ${h ? "var(--mt-white)" : "var(--border-default)"}`, borderRadius: "var(--radius-lg)", padding: "30px 28px", transition: "background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base)", transform: h ? "translateY(-4px)" : "none" }}>
        <img src="assets/logo/maitha-mark-white.svg" alt="" style={{ width: 40, filter: h ? "invert(1)" : "none", opacity: h ? 1 : 0.85, transition: "filter var(--dur-base)" }} />
        <div>
          <h3 style={{ margin: 0, fontSize: "var(--fs-h3)", color: h ? "var(--mt-black)" : "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)", transition: "color var(--dur-base)", textWrap: "balance" }}>
            Não sabe por onde começar?
          </h3>
          <p style={{ margin: "12px 0 0", fontSize: "var(--fs-body)", lineHeight: 1.55, color: h ? "rgba(0,0,0,0.66)" : "var(--text-muted)", transition: "color var(--dur-base)" }}>
            Nossos especialistas ajudam a desenhar a frente certa para o seu próximo passo.
          </p>
          <span style={{ marginTop: 20, display: "inline-flex", alignItems: "center", gap: 12, fontSize: "var(--fs-h6)", fontWeight: "var(--fw-medium)", color: h ? "var(--mt-black)" : "var(--text-strong)" }}>
            Fale conosco
            <span style={{ width: 30, height: 30, borderRadius: "50%", border: `1px solid ${h ? "rgba(0,0,0,0.3)" : "var(--border-strong)"}`, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <img src="assets/icons/arrow-white.svg" alt="" style={{ width: 12, filter: h ? "invert(1)" : "none" }} />
            </span>
          </span>
        </div>
      </a>
    </Reveal>
  );
}

function Units() {
  return (
    <Section id="units">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 30, flexWrap: "wrap", marginBottom: 56 }}>
        <Reveal>
          <SectionHead
            eyebrow="O que fazemos"
            title={<>Foco e especialização em frentes cruciais para transformar <Accent scribble="s4" tone="orange">negócios</Accent>.</>}
            lead="Nossas Units foram criadas para atuar em frentes estratégicas de transformação digital, combinadas conforme o desafio de cada cliente."
          />
        </Reveal>
      </div>
      <div className="mt-units-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {UNITS.map((u, i) => <UnitCard key={u.t} unit={u} delay={i * 70} />)}
        <CtaCard delay={UNITS.length * 70} />
      </div>
    </Section>
  );
}

const CLIENTS = [
  { name: "Oracle", file: "oracle" }, { name: "Yamaha", file: "yamaha" }, { name: "Cobasi", file: "cobasi" },
  { name: "Serasa", file: "serasa" }, { name: "Iguatemi", file: "iguatemi" }, { name: "Marisa", file: "marisa" },
  { name: "Leroy Merlin", file: "leroy-merlin" }, { name: "Tok&Stok", file: "tok-stok" }, { name: "Ambipar", file: "ambipar" },
  { name: "ClickBus", file: "clickbus" }, { name: "Trademaster", file: "trademaster" }, { name: "FutureBrand", file: "futurebrand" },
  { name: "Infracommerce", file: "infracommerce" }, { name: "Matrix", file: "matrix" }, { name: "Pet Anjo", file: "pet-anjo" },
  { name: "LTM", file: "ltm" }, { name: "Pague Veloz", file: "pague-veloz" },
];
// Yamaha's emblem is drawn with tonal shading (not negative space), so the flat
// white-silhouette filter erases the tuning forks — give it a detail-preserving
// lighten filter instead.
const LOGO_FILTER = { yamaha: "grayscale(1) brightness(1.9) contrast(1.15)" };

function TrustBar() {
  const row = CLIENTS.concat(CLIENTS);
  return (
    <section style={{ borderTop: "1px solid var(--border-faint)", borderBottom: "1px solid var(--border-faint)", padding: "34px 0", overflow: "hidden" }}>
      <div className="mt-container" style={{ marginBottom: 26 }}>
        <Eyebrow marker="rule" color="var(--text-faint)">Empresas que confiam na Maitha</Eyebrow>
      </div>
      <div className="mt-marquee">
        <div className="mt-marquee-track">
          {row.map((c, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", height: 56, padding: "0 38px" }}>
              <img className="mt-client-logo" src={`assets/logos/${c.file}.png`} alt={c.name} loading="lazy" style={LOGO_FILTER[c.file] ? { filter: LOGO_FILTER[c.file] } : undefined} />
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Units, TrustBar });