/* global React, useReveal, Eyebrow, Container */
const { useState: useStateN, useEffect: useEffectN } = React;

function TopRibbon() {
  return (
    <div
      style={{
        background: "var(--accent)",
        color: "#fff",
        textAlign: "center",
        padding: "10px 16px",
        fontSize: 13,
        fontWeight: 600,
        letterSpacing: ".02em",
      }}
    >
      <strong>06 e 07 de julho, às 19h</strong> · ao vivo
    </div>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useStateN(false);
  useEffectN(() => {
    const on = () => setScrolled(window.scrollY > 14);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [
    ["O que é", "#aprender"],
    ["Cronograma", "#programacao"],
    ["Sobre", "#sobre"],
    ["Investimento", "#planos"],
    ["FAQ", "#faq"],
  ];
  return (
    <div
      className={"nav-shell" + (scrolled ? " is-scrolled" : "")}
      style={{
        position: "sticky",
        top: 0,
        zIndex: 40,
        padding: scrolled ? "10px 0" : "18px 0",
      }}
    >
      <Container w={1240}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 24,
          }}
        >
          <a
            href="#top"
            style={{
              textDecoration: "none",
              display: "inline-flex",
              alignItems: "baseline",
              gap: 8,
            }}
          >
            <span
              style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 700,
                fontSize: 22,
                color: "var(--on-surface)",
                letterSpacing: "-.01em",
              }}
            >
              Carla
            </span>
            <span
              style={{
                fontFamily: "var(--font-script)",
                fontWeight: 500,
                fontSize: 22,
                color: "var(--accent)",
              }}
            >
              da Hello
            </span>
          </a>
          <nav className="nav-links" style={{ display: "flex", gap: 28 }}>
            {links.map(([label, href]) => (
              <a
                key={href}
                href={href}
                style={{
                  fontSize: 13.5,
                  fontWeight: 500,
                  color: "var(--on-surface-2)",
                  textDecoration: "none",
                  letterSpacing: ".01em",
                }}
                onMouseEnter={(e) =>
                  (e.currentTarget.style.color = "var(--accent)")
                }
                onMouseLeave={(e) =>
                  (e.currentTarget.style.color = "var(--on-surface-2)")
                }
              >
                {label}
              </a>
            ))}
          </nav>
          <a
            href="https://chk.eduzz.com/VWGNEXGR07"
            target="_blank"
            rel="noopener"
            className="btn btn-primary"
            style={{ padding: "11px 18px", fontSize: 13.5 }}
          >
            Garantir vaga →
          </a>
        </div>
      </Container>
    </div>
  );
}

function Hero({ t }) {
  return (
    <section
      id="top"
      className="hero-section"
      style={{ padding: "56px 0 88px", background: "var(--page-bg)" }}
    >
      <Container w={1240}>
        <div
          className="hero-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 0.9fr",
            gap: 72,
            alignItems: "center",
          }}
        >
          <div ref={useReveal()} className="reveal hero-text">
            <div style={{ marginBottom: 18 }}>
              <Eyebrow>{t.heroEyebrow}</Eyebrow>
            </div>
            <h1
              className="cdh-display hero-h1"
              style={{
                fontSize: "clamp(36px, 5vw, 68px)",
                margin: "0 0 28px",
                lineHeight: 1.02,
                letterSpacing: "-0.025em",
                color: "var(--on-surface)",
                textWrap: "balance",
              }}
            >
              {t.heroLine1}{" "}
              <em
                style={{
                  fontStyle: "italic",
                  fontWeight: 500,
                  color: "var(--accent)",
                  fontFamily: "var(--font-serif)",
                }}
              >
                {t.heroItalic}
              </em>
              <br />
              {t.heroLine2}
            </h1>
            <p
              className="hero-lede"
              style={{
                fontFamily: "var(--font-serif)",
                fontStyle: "italic",
                fontSize: 22,
                lineHeight: 1.35,
                color: "var(--accent)",
                maxWidth: 520,
                margin: "0 0 28px",
                textWrap: "balance",
              }}
            >
              {t.heroLede}
            </p>
            <p
              style={{
                fontSize: 16,
                lineHeight: 1.7,
                color: "var(--on-surface-2)",
                maxWidth: 520,
                margin: "0 0 36px",
              }}
            >
              Dias 6 e 7 de julho você vai começar a trabalhar com IA de forma
              simples e prática.
            </p>
            <div
              style={{
                display: "flex",
                gap: 14,
                alignItems: "center",
                flexWrap: "wrap",
              }}
            >
              <a href="#planos" className="btn btn-primary btn-lg">
                Quero minha vaga →
              </a>
              <a href="#aprender" className="btn btn-ghost btn-lg">
                O que você vai aprender
              </a>
            </div>
            <p
              style={{
                fontSize: 13,
                color: "var(--on-surface-3)",
                marginTop: 18,
              }}
            >
              06 e 07 de julho · Ao vivo · 30 dias de gravação
            </p>
          </div>

          <div
            style={{ position: "relative" }}
            ref={useReveal()}
            className="reveal hero-photo"
          >
            <div className="hero-photo-glow"></div>
            <div
              style={{
                position: "relative",
                aspectRatio: "4/5",
                borderRadius: "var(--r-frame)",
                overflow: "hidden",
                boxShadow: "var(--shadow-lg)",
                background: "#2a2a2a",
              }}
            >
              <img
                src="assets/10.png"
                alt="Carla Dias"
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  display: "block",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  left: 16,
                  top: 16,
                  background: "var(--surface)",
                  color: "var(--on-surface)",
                  padding: "10px 14px",
                  borderRadius: "var(--r-btn)",
                  fontSize: 12,
                  fontWeight: 600,
                  letterSpacing: ".02em",
                  boxShadow: "var(--shadow-md)",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                <span
                  style={{
                    width: 6,
                    height: 6,
                    borderRadius: "50%",
                    background: "var(--accent)",
                  }}
                />
                ao vivo · no Zoom
              </div>
            </div>
            <div
              className="hero-badge"
              style={{
                position: "absolute",
                right: -8,
                bottom: -24,
                background: "var(--accent)",
                color: "#fff",
                padding: "16px 20px",
                borderRadius: "var(--r-btn)",
                maxWidth: 280,
                fontSize: 14,
                fontWeight: 600,
                lineHeight: 1.35,
                boxShadow: "var(--shadow-md)",
              }}
            >
              +15 anos de marketing.
              <br />
              <span style={{ fontWeight: 400, opacity: 0.92 }}>
                ninguém te ensinou a usar o Instagram como ferramenta de
                negócio. Eu vou!
              </span>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { TopRibbon, Nav, Hero });