/* Maitha Tech — "Sobre a Maitha" page sections.
   Reuses the shared primitives (Section, SectionHead, Accent, Reveal, Glyph),
   the DS Button/Eyebrow, and the home's Nav + Contact + Footer. */

/* —— Hero (immersive: photo as background) —————————————— */
function AboutHero() {
  return (
    <header id="top" className="mt-hero-immersive">
      <img className="mt-hero-bg" src="assets/images/hero-vr-color.avif" alt="Experiência imersiva de tecnologia" 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" />
      <img className="mt-hero-spiral mt-float" src="assets/images/glass-bubble.png" alt="" aria-hidden="true" />

      <div className="mt-container" style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", justifyContent: "center", width: "100%", paddingTop: "clamp(104px, 13vh, 150px)", paddingBottom: "clamp(56px, 8vh, 96px)" }}>
        <Reveal style={{ maxWidth: 940 }}>
          <Eyebrow marker="dot" color="var(--text-muted)">Sobre a Maitha</Eyebrow>
          <h1 style={{ fontSize: "clamp(2.6rem, 5.4vw, 4.6rem)", lineHeight: 1.04, letterSpacing: "var(--ls-display)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: "24px 0 0", textWrap: "balance", textShadow: "0 2px 40px rgba(0,0,0,0.5)" }}>
            Uma consultoria que já nasceu com o espírito de <Accent scribble="s5" tone="blue" width={0.98}>transformação</Accent>
          </h1>
          <p style={{ marginTop: 26, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 600 }}>
            A Maitha é uma consultoria de tecnologia e inovação que apoia negócios na concepção e no desenvolvimento de soluções digitais, do primeiro insight à operação em escala.
          </p>
          <div style={{ marginTop: 34, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <Button as="a" href="#fale-conosco" size="lg" dot>Fale com a gente</Button>
            <Button as="a" href="#manifesto" variant="outline" size="lg">
              <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 22, height: 22, borderRadius: "50%", border: "1px solid currentColor", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                  <span style={{ width: 0, height: 0, borderTop: "4px solid transparent", borderBottom: "4px solid transparent", borderLeft: "6px solid currentColor", marginLeft: 2 }} />
                </span>
                Veja nosso manifesto
              </span>
            </Button>
          </div>
        </Reveal>
      </div>
    </header>
  );
}

/* —— Manifesto ————————————————————————————————————— */
function Manifesto() {
  return (
    <Section id="manifesto">
      <Reveal>
        <Eyebrow marker="rule">Pessoas + tecnologia</Eyebrow>
      </Reveal>
      <Reveal delay={80}>
        <p style={{ margin: "26px 0 0", fontSize: "clamp(1.7rem, 3.4vw, 2.9rem)", lineHeight: 1.28, letterSpacing: "var(--ls-h2)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", maxWidth: 1040, textWrap: "balance" }}>
          Queremos desafiar o status quo e entregar o melhor que a tecnologia pode oferecer, sem nunca deixar a parte <Accent scribble="s4" tone="orange">humana</Accent> de lado.
        </p>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ marginTop: 28, color: "var(--text-muted)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65, maxWidth: 620 }}>
          Unimos inteligência artificial e humana para cocriar soluções digitais de alto impacto, apoiando empresas dispostas a transformar seus negócios.
        </p>
      </Reveal>
    </Section>
  );
}

/* —— Pessoas no centro ————————————————————————————— */
function Pessoas() {
  return (
    <Section id="pessoas">
      <div className="mt-contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
        <Reveal>
          <SectionHead
            eyebrow="O que nos diferencia"
            title={<>A principal diferença competitiva está nas <Accent scribble="s5" tone="blue">pessoas</Accent></>}
            lead="Desde o início acreditamos que, neste mercado, o que separa uma consultoria da outra são as pessoas. E o ambiente criado para que elas entreguem o seu melhor."
          />
          <p style={{ marginTop: 22, color: "var(--text-muted)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65, maxWidth: 520 }}>
            Por isso nunca separamos o reconhecimento dos nossos colaboradores do reconhecimento do mercado: um é causa, o outro é consequência.
          </p>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}>
            <div style={{ gridRow: "span 2", borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "3 / 4", background: "var(--mt-graphite)", border: "1px solid var(--border-default)" }}>
              <img src="assets/images/dif-1.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "var(--mt-media-gray, grayscale(0.4) contrast(1.04))" }} />
            </div>
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "4 / 3", background: "var(--mt-graphite)", border: "1px solid var(--border-default)" }}>
              <img src="assets/images/dif-2.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "var(--mt-media-gray, grayscale(0.4) contrast(1.04))" }} />
            </div>
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "4 / 3", background: "var(--mt-graphite)", border: "1px solid var(--border-default)" }}>
              <img src="assets/images/dif-3.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "var(--mt-media-gray, grayscale(0.4) contrast(1.04))" }} />
            </div>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* —— Valores / cultura: interactive numbered list (Kreaza-style) ——— */
const VALORES = [
  { n: "01", t: "Pessoas no centro", d: "Um ambiente humano, colaborativo e com foco em crescimento. Cuidar das pessoas é um compromisso, não um benefício." },
  { n: "02", t: "Desafiar o status quo", d: "Nascemos com o espírito de transformação. Questionamos o óbvio para entregar o que a tecnologia tem de melhor." },
  { n: "03", t: "Inteligência híbrida", d: "Combinamos IA e inteligência humana, guiadas por propósito, ética e aprendizado contínuo, para gerar valor real." },
  { n: "04", t: "Aprendizado contínuo", d: "Segurança psicológica e espaço para experimentar: é assim que a curiosidade vira inovação no dia a dia." },
  { n: "05", t: "Foco em resultado", d: "Conectamos estratégia, design e engenharia para acelerar a transformação e impulsionar resultados de negócio." },
];

function ValorRow({ v, active, onActivate }) {
  return (
    <div
      onMouseEnter={onActivate}
      onClick={onActivate}
      style={{
        position: "relative", cursor: "default",
        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), color var(--dur-base)",
      }}
    >
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 20, padding: active ? "30px 30px" : "30px 8px" }}>
        <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)" }}>({v.n})</span>
        <span style={{ textAlign: "center" }}>
          <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)" }}>{v.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", maxWidth: 520, margin: "0 auto", paddingTop: active ? 10 : 0, fontSize: "var(--fs-body)", lineHeight: 1.55, color: "rgba(0,0,0,0.66)" }}>{v.d}</span>
            </span>
          </span>
        </span>
        <span style={{ width: 40, height: 40, borderRadius: "50%", border: `1px solid ${active ? "rgba(0,0,0,0.25)" : "var(--border-strong)"}`, display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none", transition: "border-color var(--dur-base)" }}>
          <img src="assets/icons/arrow-white.svg" alt="" style={{ width: 14, filter: active ? "invert(1)" : "none", transition: "filter var(--dur-base)" }} />
        </span>
      </div>
    </div>
  );
}

function Valores() {
  const [active, setActive] = React.useState(0);
  return (
    <Section id="valores">
      <Reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 30, flexWrap: "wrap" }}>
        <div style={{ maxWidth: 640 }}>
          <Eyebrow marker="rule">Nossa cultura</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" }}>
            Comportamentos que colocam as pessoas no <Accent scribble="s3" tone="orange">centro</Accent>
          </h2>
        </div>
        <div style={{ paddingTop: 8 }}>
          <Button as="a" href="#fale-conosco" dot>Vamos conversar</Button>
        </div>
      </Reveal>

      <div className="mt-valores-grid" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "0.82fr 1.18fr", gap: 56, alignItems: "start" }}>
        <Reveal>
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "1 / 1", background: "var(--mt-graphite)", border: "1px solid var(--border-default)" }}>
            <img src="assets/images/cultura-motion.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "var(--mt-media-gray, grayscale(0.4) contrast(1.04))" }} />
          </div>
          <p style={{ marginTop: 24, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 380 }}>
            Nossa cultura coloca as pessoas no centro e estimula os comportamentos que acreditamos serem fundamentais para o crescimento das pessoas e do negócio.
          </p>
        </Reveal>

        <Reveal delay={120}>
          <div style={{ borderTop: "1px solid var(--border-faint)" }}>
            {VALORES.map((v, i) => (
              <ValorRow key={v.t} v={v} active={active === i} onActivate={() => setActive(i)} />
            ))}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* —— Números ————————————————————————————————————— */
const NUMEROS = [
  { k: "4,4/5", v: "avaliação no Glassdoor" },
  { k: "94%", v: "recomendam trabalhar aqui" },
  { k: "5 Units", v: "frentes de especialização" },
];

function Numeros() {
  return (
    <Section id="numeros">
      <Reveal style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-start", gap: 0, borderTop: "1px solid var(--border-faint)", borderBottom: "1px solid var(--border-faint)" }}>
        {NUMEROS.map(({ k, v }, i) => (
          <div key={i} className="mt-num-cell" style={{ flex: "1 1 220px", display: "flex", flexDirection: "column", padding: "40px 28px 40px 0", borderRight: i < NUMEROS.length - 1 ? "1px solid var(--border-faint)" : "0", paddingLeft: i ? 32 : 0 }}>
            <div style={{ fontSize: "clamp(2.2rem, 3.8vw, 3.2rem)", lineHeight: 1.1, color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h1)" }}>{k}</div>
            <div style={{ fontSize: "var(--fs-sub)", color: "var(--text-faint)", marginTop: 10, textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)" }}>{v}</div>
          </div>
        ))}
      </Reveal>
    </Section>
  );
}

/* —— Na mídia ————————————————————————————————————— */
const NEWS_FEATURED = {
  outlet: "Fast Company Brasil", date: null,
  title: "Avanço da IA nas empresas é ameaçado pelo despreparo de líderes",
  desc: "A Maitha entra na discussão sobre por que, mesmo sendo prioridade nas empresas, o avanço da inteligência artificial ainda esbarra no despreparo das lideranças.",
  href: "https://fastcompanybrasil.com/money/prioridade-nas-empresas-avanco-da-ia-e-ameacado-por-despreparo-de-lideres/",
};
const NEWS = [
  { outlet: "Baguete", date: "Nov 2025", title: "Maitha Tech entra no mercado Salesforce", href: "https://www.baguete.com.br/noticias/maitha-tech-entra-no-mercado-salesforce" },
  { outlet: "Baguete", date: "Abr 2025", title: "Maitha Tech fatura R$ 53 milhões em 2024, alta de 47%", href: "https://www.baguete.com.br/noticias/maitha-tech-fatura-r-53-milhoes-alta-de-47" },
  { outlet: "TI Inside", date: "Mar 2025", title: "Maitha fatura R$ 52 milhões desenvolvendo soluções digitais", href: "https://tiinside.com.br/24/03/2025/maitha-fatura-r52-milhoes-desenvolvendo-solucoes-digitais/" },
  { outlet: "TI Inside", date: "Ago 2024", title: "Maitha investe R$ 1,2 milhão em startup de IA", href: "https://tiinside.com.br/22/08/2024/maitha-investe-12-milhao-de-reais-em-startup-de-ia/" },
  { outlet: "Startupi", date: null, title: "Maitha Tech abre mais de 20 vagas no setor de tecnologia", href: "https://startupi.com.br/consultoria-maitha-tech-abre-mais-de-20-vagas-no-setor-de-tecnologia/" },
  { outlet: "IT Forum", date: null, title: "Líderes ainda não estão preparados para a era da IA", href: "https://itforum.com.br/noticias/lideres-nao-preparados-ia/" },
];

function NewsCard({ item, delay }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={delay} style={{ height: "100%" }}>
      <a href={item.href} target="_blank" rel="noreferrer"
        onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 196, background: "var(--surface-card)", border: `1px solid ${h ? "var(--border-strong)" : "var(--border-default)"}`, borderRadius: "var(--radius-lg)", padding: "26px 26px 24px", 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", alignItems: "center", gap: 10, color: "var(--text-faint)" }}>
          <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: h ? "var(--accent)" : "var(--text-muted)", transition: "color var(--dur-base)" }}>{item.outlet}</span>
          {item.date ? <React.Fragment><span style={{ width: 3, height: 3, borderRadius: "50%", background: "var(--border-strong)" }} /><span style={{ fontSize: "var(--fs-sub)", letterSpacing: "0.02em" }}>{item.date}</span></React.Fragment> : null}
        </div>
        <h3 style={{ margin: "18px 0 0", fontSize: "var(--fs-h5)", lineHeight: 1.28, color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)", textWrap: "balance" }}>{item.title}</h3>
        <span style={{ marginTop: "auto", paddingTop: 22, display: "inline-flex", alignItems: "center", gap: 9, fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "0.05em", color: h ? "var(--text-strong)" : "var(--text-muted)", transition: "color var(--dur-base)" }}>
          Ler matéria
          <span style={{ width: 26, height: 26, 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: 11, filter: h ? "invert(1)" : "none", transition: "filter var(--dur-base)" }} />
          </span>
        </span>
      </a>
    </Reveal>
  );
}

function NaMidia() {
  const [h, setH] = React.useState(false);
  return (
    <Section id="na-midia">
      <Reveal>
        <SectionHead
          eyebrow="Na mídia"
          title={<>Nossa marca e nossas pessoas em <Accent scribble="s5" tone="blue" width={0.98}>evidência</Accent></>}
          lead="Veja algumas das publicações em que a Maitha, ou as pessoas que fazem a Maitha, foram mencionadas."
          max={760}
        />
      </Reveal>

      <Reveal delay={120} style={{ marginTop: 48 }}>
        <a href={NEWS_FEATURED.href} target="_blank" rel="noreferrer"
          onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
          style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 28, alignItems: "center", padding: "clamp(28px, 3.4vw, 44px)", background: "var(--surface-card)", border: `1px solid ${h ? "var(--border-strong)" : "var(--border-default)"}`, borderRadius: "var(--radius-xl)", transition: "border-color var(--dur-base)" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
              <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--accent)" }}>{NEWS_FEATURED.outlet}</span>
              {NEWS_FEATURED.date ? <React.Fragment><span style={{ width: 3, height: 3, borderRadius: "50%", background: "var(--border-strong)" }} /><span style={{ fontSize: "var(--fs-sub)", letterSpacing: "0.02em", color: "var(--text-faint)" }}>{NEWS_FEATURED.date}</span></React.Fragment> : null}
              <span style={{ marginLeft: 6, padding: "4px 11px", borderRadius: "var(--radius-pill)", border: "1px solid var(--border-default)", fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-muted)" }}>Destaque</span>
            </div>
            <h3 style={{ margin: 0, fontSize: "clamp(1.5rem, 2.6vw, 2.2rem)", lineHeight: 1.16, color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)", textWrap: "balance" }}>{NEWS_FEATURED.title}</h3>
            <p style={{ margin: "16px 0 0", fontSize: "var(--fs-body-lg)", lineHeight: 1.55, color: "var(--text-body)", maxWidth: 640 }}>{NEWS_FEATURED.desc}</p>
          </div>
          <span style={{ width: 52, height: 52, 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)", flex: "none", alignSelf: "flex-start" }}>
            <img src="assets/icons/arrow-white.svg" alt="" style={{ width: 16, filter: h ? "invert(1)" : "none", transition: "filter var(--dur-base)" }} />
          </span>
        </a>
      </Reveal>

      <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(290px, 1fr))", gap: 24 }}>
        {NEWS.map((n, i) => <NewsCard key={n.href} item={n} delay={i * 60} />)}
      </div>
    </Section>
  );
}

Object.assign(window, { AboutHero, Manifesto, Pessoas, Valores, Numeros, NaMidia });