/* Maitha Tech — hero. Three treatments selectable via Tweaks:
   'framed'  → headline then a full-width framed media block (default)
   'split'   → headline left, portrait media right
   'type'    → pure typographic hero on black, no media */

const HERO_LEAD = "Uma consultoria end-to-end apaixonada por tecnologia e inovação. Apoiamos times Tech de algumas das principais empresas do Brasil.";

/* Build the headline, wrapping the chosen word in a Playfair accent. */
function HeroHeadline({ accentWord, style }) {
  const text = "Unimos inteligência artificial e humana para cocriar soluções digitais de alto impacto";
  const words = text.split(" ");
  return (
    <h1 style={style}>
      {words.map((w, i) => {
        const clean = w.toLowerCase().replace(/[^a-zà-ú]/gi, "");
        const isAccent = clean === accentWord;
        return (
          <React.Fragment key={i}>
            {isAccent ? <Accent scribble="s3" tone="blue">{w}</Accent> : w}
            {i < words.length - 1 ? " " : ""}
          </React.Fragment>
        );
      })}
    </h1>
  );
}

function HeroCtas({ size = "lg" }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 22, flexWrap: "wrap", marginTop: 34 }}>
      <Button as="a" href="#fale-conosco" size={size} dot>Fale conosco</Button>
      <a href="#units" className="mt-link" style={{ display: "inline-flex", alignItems: "center", gap: 14, color: "var(--text-body)" }}>
        <span style={{ width: 46, height: 46, borderRadius: "50%", border: "1px solid var(--border-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
          <span style={{ width: 0, height: 0, borderLeft: "6px solid transparent", borderRight: "6px solid transparent", borderTop: "9px solid var(--mt-white)", marginTop: 2 }} />
        </span>
        <span style={{ fontSize: "var(--fs-h5)", color: "var(--text-strong)" }}>Conheça nossos serviços</span>
      </a>
    </div>
  );
}

function HeroMedia({ ratio = "21 / 9", label = "Maitha Tech: quem somos" }) {
  return (
    <div style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", aspectRatio: ratio, background: "var(--mt-graphite)", border: "1px solid var(--border-default)" }}>
      <video
        autoPlay muted loop playsInline
        poster="assets/images/hero-one.avif"
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "var(--mt-media-gray, grayscale(0.4) contrast(1.04))" }}
      >
        <source src="https://maitha.com.br/videos/bg-site-maitha-home-transcode.mp4" type="video/mp4" />
      </video>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.5))", pointerEvents: "none" }} />
      <div style={{ position: "absolute", left: 24, bottom: 22, display: "flex", alignItems: "center", gap: 10 }}>
        <span className="mt-dot" style={{ background: "var(--accent)" }} />
        <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "rgba(255,255,255,0.9)" }}>{label}</span>
      </div>
    </div>
  );
}

function Hero({ variant = "framed", accentWord = "humana" }) {
  const eyebrow = <Eyebrow marker="dot" color="var(--text-muted)">Consultoria de tecnologia end-to-end</Eyebrow>;

  if (variant === "immersive") {
    return (
      <header id="top" className="mt-hero-immersive">
        <img className="mt-hero-bg" src="assets/images/hero-vr-home.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" />

        <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)" }}>
          <div>
            <Reveal style={{ maxWidth: 1000 }}>
              {eyebrow}
              <HeroHeadline accentWord={accentWord} style={{ fontSize: "clamp(2.6rem, 5.6vw, 5rem)", lineHeight: 1.03, letterSpacing: "var(--ls-display)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: "22px 0 0", textWrap: "balance", textShadow: "0 2px 40px rgba(0,0,0,0.5)" }} />
            </Reveal>
            <Reveal delay={140} style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, flexWrap: "wrap", marginTop: 30 }}>
              <div>
                <p style={{ margin: 0, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 540 }}>{HERO_LEAD}</p>
                <HeroCtas />
              </div>
              <a href="#units" className="mt-link" style={{ display: "inline-flex", alignItems: "center", gap: 12, color: "var(--text-muted)", whiteSpace: "nowrap" }}>
                <span style={{ fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)" }}>Role para explorar</span>
                <span style={{ width: 38, height: 38, borderRadius: "50%", border: "1px solid var(--border-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <img src="assets/icons/down-arrow.svg" alt="" style={{ width: 14, filter: "brightness(0) invert(1)" }} />
                </span>
              </a>
            </Reveal>
          </div>
        </div>
      </header>
    );
  }

  if (variant === "split") {
    return (
      <header id="top" className="mt-container" style={{ paddingTop: "clamp(54px, 7vw, 96px)", paddingBottom: "clamp(40px, 6vw, 72px)" }}>
        <div className="mt-hero-split" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center" }}>
          <Reveal>
            {eyebrow}
            <HeroHeadline accentWord={accentWord} style={{ fontSize: "clamp(2.4rem, 4.4vw, 3.9rem)", lineHeight: 1.05, letterSpacing: "var(--ls-display)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: "22px 0 0", textWrap: "balance" }} />
            <p style={{ marginTop: 26, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 480 }}>{HERO_LEAD}</p>
            <HeroCtas />
          </Reveal>
          <Reveal delay={120}><HeroMedia ratio="4 / 5" /></Reveal>
        </div>
      </header>
    );
  }

  if (variant === "type") {
    return (
      <header id="top" className="mt-container" style={{ paddingTop: "clamp(72px, 11vw, 150px)", paddingBottom: "clamp(64px, 9vw, 120px)" }}>
        <Reveal style={{ maxWidth: 1080 }}>
          {eyebrow}
          <HeroHeadline accentWord={accentWord} style={{ fontSize: "clamp(2.8rem, 7vw, 6rem)", lineHeight: 1.02, letterSpacing: "var(--ls-display)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: "26px 0 0", textWrap: "balance" }} />
          <p style={{ marginTop: 30, color: "var(--text-body)", fontSize: "var(--fs-h5)", lineHeight: 1.55, maxWidth: 620 }}>{HERO_LEAD}</p>
          <HeroCtas />
        </Reveal>
        <Reveal delay={160} style={{ marginTop: 64, display: "flex", flexWrap: "wrap", gap: 0, borderTop: "1px solid var(--border-faint)" }}>
          {[["+10 anos", "transformando negócios"], ["5 Units", "frentes de especialização"], ["120+", "projetos entregues"], ["AI + humano", "no centro de tudo"]].map(([k, v], i) => (
            <div key={i} style={{ flex: "1 1 200px", padding: "28px 0", borderRight: i < 3 ? "1px solid var(--border-faint)" : "0", paddingRight: 24, paddingLeft: i ? 28 : 0 }}>
              <div style={{ fontSize: "var(--fs-h3)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)" }}>{k}</div>
              <div style={{ fontSize: "var(--fs-sub)", color: "var(--text-faint)", marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </Reveal>
      </header>
    );
  }

  /* framed (default) */
  return (
    <header id="top" className="mt-container" style={{ paddingTop: "clamp(56px, 7vw, 100px)", paddingBottom: "clamp(40px, 5vw, 64px)" }}>
      <Reveal style={{ maxWidth: 940 }}>
        {eyebrow}
        <HeroHeadline accentWord={accentWord} 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" }} />
        <p style={{ marginTop: 26, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 560 }}>{HERO_LEAD}</p>
        <HeroCtas />
      </Reveal>
      <Reveal delay={140} style={{ marginTop: 52 }}>
        <HeroMedia ratio="21 / 9" />
      </Reveal>
    </header>
  );
}

window.Hero = Hero;
