/* Maitha Tech — "Ready for today." editorial statement section.
   Oversized headline with a floating glass blob overlapping the type,
   and a quiet supporting paragraph + CTA in the lower-right, echoing the
   reference layout while staying inside the monochrome DS. */

function ReadyToday() {
  return (
    <section id="ready" className="mt-container" style={{ position: "relative", paddingTop: "clamp(96px, 12vw, 168px)", paddingBottom: "clamp(96px, 12vw, 168px)", borderTop: "1px solid var(--border-faint)" }}>
      <Reveal style={{ marginBottom: "clamp(28px, 4vw, 52px)" }}>
        <Eyebrow marker="rule">Nosso jeito</Eyebrow>
      </Reveal>

      <div className="mt-ready-stage" style={{ position: "relative" }}>
        {/* Floating glass blob */}
        <img
          className="mt-ready-blob mt-float"
          src="assets/images/glass-blob.png"
          alt=""
          aria-hidden="true"
        />

        {/* Oversized headline */}
        <Reveal as="h2" className="mt-ready-title" style={{ position: "relative", zIndex: 1, margin: 0, fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-display)", lineHeight: 0.96, color: "var(--text-strong)" }}>
          Ready for <Accent scribble="s5" tone="blue">today.</Accent>
        </Reveal>

        {/* Supporting paragraph + CTA, lower-left */}
        <Reveal delay={140} className="mt-ready-aside">
          <p style={{ margin: 0, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.62, textWrap: "pretty" }}>
            Vivemos em um mundo que muda mais rápido do que qualquer planejamento. Por isso, acreditamos menos em previsões e mais em ação. Ajudamos empresas a transformar estratégia em execução, tecnologia em impacto e desafios em novas oportunidades. Porque a transformação não acontece amanhã. Acontece <em style={{ fontStyle: "normal", color: "var(--text-strong)", fontWeight: "var(--fw-medium)" }}>hoje</em>.
          </p>
          <div style={{ marginTop: 30, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <Button as="a" href="#fale-conosco" size="lg" dot>Fale conosco</Button>
            <Button as="a" href="https://www.youtube.com/watch?si=yU1P4s8XXDHLCAJk&v=CriNIyd88FU&feature=youtu.be" target="_blank" rel="noreferrer" 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>
    </section>
  );
}

window.ReadyToday = ReadyToday;