/* Maitha Tech — "Carreiras" page sections.
   Reuses shared primitives + DS Button/Eyebrow/Avatar + home's Nav/Contact/Footer.
   Content mirrors the real Carreiras page: GPTW, cultura, benefícios, depoimentos. */

const VAGAS_URL = "https://maitha.com.br/vagas";

/* —— Hero (immersive: team photo bg) ———————————————— */
function CarreirasHero() {
  return (
    <header id="top" className="mt-hero-immersive">
      <img className="mt-hero-bg" src={(window.__resources && window.__resources.heroAbout) || "assets/images/hero-about.avif"} alt="Time Maitha Tech" style={{ filter: "saturate(1.04) 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(112px, 14vh, 164px)", 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)" }}>Carreiras</span>
          <span style={{ height: 1, background: "rgba(255,255,255,0.25)", width: 64 }} />
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 14px", borderRadius: "var(--radius-pill)", border: "1px solid var(--border-strong)", background: "rgba(0,0,0,0.4)", backdropFilter: "blur(8px)" }}>
            <img src={(window.__resources && window.__resources.iconStar) || "assets/icons/star.svg"} alt="" style={{ width: 13 }} />
            <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-strong)" }}>Somos mais de 200 Maithers</span>
          </span>
        </Reveal>
        <Reveal style={{ maxWidth: 1040 }}>
          <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)" }}>
            Inspirados pela inovação, guiados por <Accent scribble="s5" tone="blue" width={0.98}>pessoas</Accent>
          </h1>
          <p style={{ marginTop: 22, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 600 }}>
            Acreditamos que grandes resultados nascem de pessoas que se sentem valorizadas. Aqui, você encontra um ambiente humano, colaborativo e com espaço real para crescer.
          </p>
          <div style={{ marginTop: 34, display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
            <Button as="a" href={VAGAS_URL} target="_blank" rel="noreferrer" size="lg" dot>Conheça nossas oportunidades</Button>
            <a href="#cultura" className="mt-link" style={{ fontSize: "var(--fs-h6)", color: "var(--text-strong)" }}>Nossa cultura ↓</a>
          </div>
        </Reveal>
      </div>
    </header>
  );
}

/* —— Statement ———————————————————————————————————— */
function CarreirasStatement() {
  return (
    <Section id="sobre">
      <Reveal>
        <Eyebrow marker="rule">Por que a Maitha</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" }}>
          A principal diferença competitiva de uma consultoria está nas <Accent scribble="s4" tone="orange">pessoas</Accent>. Por isso, cuidamos das nossas.
        </p>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ marginTop: 28, color: "var(--text-muted)", fontSize: "var(--fs-body-lg)", lineHeight: 1.65, maxWidth: 620 }}>
          Nunca separamos o reconhecimento dos nossos colaboradores do reconhecimento do mercado: um é causa, o outro é consequência. É assim que construímos um time forte, motivado e pronto para resolver desafios complexos.
        </p>
      </Reveal>
    </Section>
  );
}

/* —— O que você ganha (benefícios) ————————————————— */
const BENEFITS = [
  { n: "01", t: "Challenges", d: "Nós não apenas consumimos tecnologia, nós a transformamos. Essas iniciativas fortalecem o conhecimento técnico em IA aplicada a dores reais do mercado e do nosso dia a dia. É o nosso laboratório para dar visibilidade aos talentos e às soluções inovadoras que construímos juntos." },
  { n: "02", t: "Next", d: "Cada Maither tem uma jornada única. O Next é um acompanhamento individual mensal conduzido pelo time de DHO, focado no seu crescimento real e na remoção de barreiras para o seu desenvolvimento." },
  { n: "03", t: "MoviMaitha", d: "Mentes criativas precisam de energia. Esse é o nosso desafio contínuo de saúde e bem-estar, criado para movimentar o corpo, oxigenar as ideias e, principalmente, fortalecer a parceria e o incentivo entre os Maithers." },
];

function BenefitCard({ b, delay }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ height: "100%", 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" }}>
        <span style={{ fontSize: "var(--fs-h6)", letterSpacing: "var(--ls-eyebrow)", color: h ? "var(--accent)" : "var(--text-faint)", transition: "color var(--dur-base)" }}>({b.n})</span>
        <h3 style={{ margin: "26px 0 0", fontSize: "var(--fs-h4)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)", textWrap: "balance" }}>{b.t}</h3>
        <p style={{ margin: "14px 0 0", fontSize: "var(--fs-body)", lineHeight: 1.6, color: "var(--text-body)" }}>{b.d}</p>
      </div>
    </Reveal>
  );
}

function Beneficios() {
  return (
    <Section id="cultura">
      <Reveal>
        <SectionHead
          eyebrow="Por que a Maitha"
          title={<>Um ambiente feito para as pessoas <Accent scribble="s5" tone="blue">crescerem</Accent></>}
          lead="Nossa cultura coloca as pessoas no centro. Veja alguns dos pilares que sustentam a experiência de quem é Maither."
          max={820}
        />
      </Reveal>
      <div className="mt-units-grid" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {BENEFITS.map((b, i) => <BenefitCard key={b.t} b={b} delay={i * 70} />)}
      </div>
      <Reveal delay={120} style={{ marginTop: 40 }}>
        <Button as="a" href="assets/docs/Manifesto-de-Cultura-Maitha-Tech.pdf" target="_blank" rel="noreferrer" variant="outline" size="lg">Conheça nosso manifesto de cultura</Button>
      </Reveal>
    </Section>
  );
}

/* —— Depoimentos (Maithers) ————————————————————————— */
const DEPOIMENTOS = [
  { q: "Aqui eu encontrei espaço para crescer de verdade. A liderança escuta, apoia e cobra na medida certa, sempre com respeito.", name: "Jaqueline", role: "People & Culture" },
  { q: "O que mais me marca é o cuidado com as pessoas. Não é discurso: é prática diária, em cada decisão e em cada projeto.", name: "Leilane", role: "Data & Analytics" },
  { q: "Trabalhar com tecnologia de ponta ao lado de gente que admiro me faz evoluir todos os dias. A Maitha desafia e ampara.", name: "Matheus", role: "Engenharia de Software" },
  { q: "Entrei como dev e fui crescendo com mentoria real. Aqui o seu desenvolvimento é levado a sério, do onboarding em diante.", name: "Pedro", role: "Cloud & Infra" },
];

function DepoimentoCard({ d, delay }) {
  return (
    <Reveal delay={delay}>
      <figure style={{ margin: 0, height: "100%", display: "flex", flexDirection: "column", background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", padding: "30px 28px" }}>
        <img src={(window.__resources && window.__resources.iconStar) || "assets/icons/star.svg"} alt="" style={{ width: 18, opacity: 0.7, marginBottom: 18 }} />
        <blockquote style={{ margin: 0, flex: 1, fontSize: "var(--fs-h6)", lineHeight: 1.5, color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)", textWrap: "pretty" }}>
          “{d.q}”
        </blockquote>
        <figcaption style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 14 }}>
          <Avatar name={d.name} size="md" />
          <span>
            <span style={{ display: "block", fontSize: "var(--fs-body)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)" }}>{d.name}</span>
            <span style={{ display: "block", fontSize: "var(--fs-sub)", color: "var(--text-faint)", marginTop: 2 }}>{d.role}</span>
          </span>
        </figcaption>
      </figure>
    </Reveal>
  );
}

function Depoimentos() {
  return (
    <Section id="depoimentos">
      <Reveal>
        <SectionHead
          eyebrow="Quem é Maither"
          title={<>Histórias de quem vive a Maitha por <Accent scribble="s4" tone="orange">dentro</Accent></>}
          max={760}
        />
      </Reveal>
      <div className="mt-units-grid" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
        {DEPOIMENTOS.map((d, i) => <DepoimentoCard key={d.name} d={d} delay={i * 70} />)}
      </div>
    </Section>
  );
}

/* —— CTA vagas (inverted band) ————————————————————— */
function VagasCta() {
  return (
    <section id="vagas" style={{ background: "var(--mt-white)", scrollMarginTop: 80 }}>
      <div className="mt-container" style={{ paddingTop: "clamp(64px, 8vw, 104px)", paddingBottom: "clamp(64px, 8vw, 104px)", textAlign: "center" }}>
        <Reveal style={{ maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
          <span style={{ fontSize: "var(--fs-sub)", fontWeight: "var(--fw-semibold)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "rgba(0,0,0,0.5)" }}>Vagas abertas</span>
          <h2 style={{ margin: "20px 0 0", fontSize: "clamp(2rem, 3.8vw, 3.1rem)", lineHeight: 1.1, letterSpacing: "var(--ls-h1)", color: "var(--mt-black)", fontWeight: "var(--fw-medium)", textWrap: "balance" }}>
            Bora construir o amanhã com a gente?
          </h2>
          <p style={{ margin: "18px auto 0", maxWidth: 520, color: "rgba(0,0,0,0.62)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6 }}>
            Veja as posições abertas nas nossas Units e dê o próximo passo na sua carreira tech.
          </p>
          <div style={{ marginTop: 32, display: "flex", justifyContent: "center" }}>
            <Button as="a" href={VAGAS_URL} target="_blank" rel="noreferrer" variant="dark" size="lg" dot>Ver vagas abertas</Button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { CarreirasHero, CarreirasStatement, Beneficios, Depoimentos, VagasCta });