/* Maitha Tech — "Conteúdos gratuitos": Artigos + Materiais. */

const CONTEUDOS = [
  { tag: "Blog", img: "assets/images/blog-image.webp", t: "Artigos", d: "Sempre com novidades, nosso blog traz conteúdos rápidos sobre movimentos de mercado, tendências, metodologias, design e inovação.", href: "#" },
  { tag: "Materiais", img: "assets/images/about-creativity.webp", t: "Materiais", d: "Para conteúdos mais densos, nosso time prepara materiais com um olhar profundo e didático sobre práticas, conceitos e tendências relevantes.", href: "#" },
];

function ContentCard({ item, delay }) {
  const [h, setH] = React.useState(false);
  return (
    <Reveal delay={delay}>
      <a href={item.href} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "flex", flexDirection: "column", height: "100%", background: "var(--surface-card)", border: `1px solid ${h ? "var(--border-strong)" : "var(--border-default)"}`, borderRadius: "var(--radius-xl)", overflow: "hidden", transition: "border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out)", transform: h ? "translateY(-4px)" : "none" }}>
        <div style={{ aspectRatio: "16 / 10", overflow: "hidden", background: "var(--mt-graphite)", position: "relative" }}>
          <img src={item.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.05)" : "scale(1)", transition: "transform var(--dur-slow) var(--ease-out), filter var(--dur-base)" }} />
          <span style={{ position: "absolute", top: 18, left: 18, padding: "6px 14px", borderRadius: "var(--radius-pill)", background: "rgba(0,0,0,0.55)", backdropFilter: "blur(8px)", border: "1px solid var(--border-strong)", fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-strong)" }}>{item.tag}</span>
        </div>
        <div style={{ padding: "30px 30px 32px", display: "flex", flexDirection: "column", flex: 1 }}>
          <h3 style={{ margin: 0, fontSize: "var(--fs-h2)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h2)" }}>{item.t}</h3>
          <p style={{ margin: "14px 0 0", fontSize: "var(--fs-body)", lineHeight: 1.6, color: "var(--text-body)" }}>{item.d}</p>
          <span style={{ marginTop: 26, display: "inline-flex", alignItems: "center", gap: 13, fontSize: "var(--fs-h6)", fontWeight: "var(--fw-medium)", color: "var(--text-strong)" }}>
            Saiba mais
            <span style={{ width: 34, height: 34, 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>
          </span>
        </div>
      </a>
    </Reveal>
  );
}

function Conteudos() {
  return (
    <Section id="conteudos">
      <Reveal>
        <SectionHead
          eyebrow="Conteúdos gratuitos"
          title={<>Fique por dentro dos assuntos mais <Accent scribble="s5" tone="blue">relevantes</Accent> do mercado</>}
          lead="Fazemos questão de gerar valor para além dos nossos serviços. Estamos sempre em busca de novos conhecimentos para compartilhar com a comunidade tech e nossos clientes."
          max={820}
        />
      </Reveal>
      <div className="mt-conteudos-grid" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
        {CONTEUDOS.map((c, i) => <ContentCard key={c.t} item={c} delay={i * 100} />)}
      </div>
    </Section>
  );
}

window.Conteudos = Conteudos;