const Hero = ({ onOpenForm, onWhatsApp }) => {
  return (
    <section id="top" className="hero-wrap" style={{
      position: "relative",
      minHeight: "100vh",
      display: "flex",
      alignItems: "center",
      overflow: "hidden",
      background: "#000"
    }}>

      {/* Foto posicionada na metade direita — sem overflow horizontal */}
      <img
        src="img/hero.jpg"
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute",
          right: 0, top: 0,
          width: "62%", height: "100%",
          objectFit: "cover",
          objectPosition: "center top",
          zIndex: 0,
          display: "block"
        }}
      />

      {/* Gradiente cobre toda a seção — some sem corte visível */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 1,
        background: "linear-gradient(to right, #000 0%, #000 36%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0.2) 68%, transparent 100%)"
      }} />

      {/* Conteúdo — lado esquerdo */}
      <div style={{
        position: "relative", zIndex: 2,
        width: "100%", maxWidth: 1280,
        margin: "0 auto",
        padding: "150px 40px 80px"
      }}>

        <div style={{ maxWidth: 520 }}>

          <h1 data-anim data-delay="2" style={{
            fontFamily: "'Outfit', sans-serif",
            fontSize: "clamp(38px, 4.5vw, 72px)",
            lineHeight: 1.05,
            letterSpacing: "-0.03em",
            fontWeight: 400,
            color: "white",
            marginBottom: 24,
            textWrap: "balance"
          }}>
            Construa um <span style={{ color: "#e8324a" }}>shape magro</span>{" "}
            <span style={{ fontStyle: "italic", color: "#e8324a" }}>e definido</span>{" "}
            comendo o que gosta.
          </h1>

          <div data-anim data-delay="3" style={{ maxWidth: 440, marginBottom: 36 }}>
            <p style={{
              fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,0.75)",
              marginBottom: 14
            }}>
              Aqui você não recebe um plano genérico.
            </p>
            <p style={{
              fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,0.75)",
              marginBottom: 20
            }}>
              Você recebe um planejamento montado para o seu corpo e rotina que une nutrição estratégica, treino personalizado e acompanhamento próximo, para transformar seu físico com constância, leveza e resultado real.
            </p>
            <ul style={{
              listStyle: "none", padding: 0, margin: 0,
              display: "flex", flexDirection: "column", gap: 8
            }}>
              <li style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15, color: "rgba(255,255,255,0.85)" }}>
                <span style={{ color: "var(--sage-200)", fontSize: 16, fontWeight: 700 }}>✕</span>
                Sem terrorismo alimentar.
              </li>
              <li style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15, color: "rgba(255,255,255,0.85)" }}>
                <span style={{ color: "var(--sage-200)", fontSize: 16, fontWeight: 700 }}>✕</span>
                Sem protocolos impossíveis.
              </li>
              <li style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15, color: "rgba(255,255,255,0.85)" }}>
                <span style={{ color: "var(--sage-200)", fontSize: 16, fontWeight: 700 }}>✕</span>
                Sem efeito sanfona.
              </li>
            </ul>
          </div>

          <div data-anim data-delay="4" className="hero-cta-row" style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center", justifyContent: "center" }}>
            <button
              className="hero-btn-whats"
              style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                padding: "16px 26px", borderRadius: 999,
                background: "#1A9E4A", color: "white",
                fontSize: 16, fontWeight: 500,
                transition: "transform 0.2s, background 0.2s"
              }}
              onClick={onWhatsApp}
              onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = "#157A3A"; }}
              onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.background = "#1A9E4A"; }}
            >
              <IconWhatsApp size={18} color="white" />
              Falar no WhatsApp
            </button>
          </div>

          <div data-anim data-delay="5" className="hero-proof" style={{
            display: "flex", alignItems: "center", gap: 14,
            marginTop: 36, paddingTop: 32,
            borderTop: "1px solid rgba(255,255,255,0.12)"
          }}>
            <div style={{ display: "flex" }}>
              {[
                "img/antes%20e%20depois%20(2).jpg",
                "img/antes%20e%20depois%20(5).jpg",
                "img/antes%20e%20depois%20(3).jpg"
              ].map((src, i) => (
                <div key={i} style={{
                  width: 36, height: 36, borderRadius: "50%",
                  border: "2px solid rgba(255,255,255,0.3)",
                  marginLeft: i > 0 ? -10 : 0,
                  backgroundImage: `url("${src}")`,
                  backgroundSize: "36px 36px",
                  backgroundPosition: "-18px 0px",
                  flexShrink: 0
                }} />
              ))}
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "white" }}>+400 mulheres transformadas</div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,0.6)" }}>"Melhor decisão que já tomei."</div>
            </div>
          </div>

          {/* Credenciais — abaixo do proof */}
          <div className="hero-credentials" style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 6 }}>
            <div className="hero-eyebrow" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "5px 10px", borderRadius: 999,
              background: "rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.65)",
              fontSize: 11, fontWeight: 500, letterSpacing: "0.02em",
              boxShadow: "0 4px 14px rgba(0,0,0,0.45)"
            }}>
              <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--sage-500)", flexShrink: 0 }}></span>
              <span>Nutricionista Esportiva • CRN SC 14264 • Florianópolis SC</span>
            </div>
            <div className="hero-eyebrow-secondary" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "5px 10px", borderRadius: 999,
              background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.55)",
              fontSize: 11, fontWeight: 500, letterSpacing: "0.02em",
              boxShadow: "0 4px 14px rgba(0,0,0,0.45)"
            }}>
              <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--sage-500)", flexShrink: 0 }}></span>
              <span>Luciano S. Marques CREF 163689-G/SP</span>
            </div>
          </div>

        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .hero-wrap { min-height: 90vh !important; }
          .hero-wrap img[aria-hidden] { object-position: 70% top !important; }
        }

        @media (max-width: 640px) {
          .hero-wrap {
            min-height: 123svh !important;
            align-items: flex-end !important;
          }
          .hero-wrap > img[aria-hidden] {
            width: 100% !important;
            right: auto !important;
            left: 0 !important;
            object-position: center top !important;
          }
          .hero-wrap > div[aria-hidden] {
            background: linear-gradient(to top, #000 0%, #000 28%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.1) 75%, transparent 100%) !important;
          }
          .hero-wrap > div[style] { padding: 0 20px 16px !important; }
          .hero-wrap > div[style] > div { max-width: 100% !important; }
          .hero-wrap h1 { font-size: 26px !important; letter-spacing: -0.01em !important; margin-bottom: 10px !important; }
          .hero-wrap p { font-size: 14px !important; margin-bottom: 10px !important; }
          .hero-proof { margin-top: 16px !important; padding-top: 16px !important; }
          .hero-credentials { margin-top: 10px !important; }
          .hero-eyebrow { font-size: 10px !important; padding: 4px 8px !important; }
          .hero-eyebrow-secondary { font-size: 10px !important; padding: 4px 8px !important; }
          .hero-cta-row { flex-direction: column !important; gap: 10px !important; }
          .hero-btn-whats, .hero-btn-start {
            width: 100% !important; justify-content: center !important;
          }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Hero });