// Hero section — left content + right phone mockup
const Hero = () => {
  // Animate waveform bars
  const bars = Array.from({ length: 28 });

  return (
    <section id="top" className="ev-stage" style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: 140,
      paddingBottom: 0,
      overflow: "visible",
    }}>      <span className="ev-blob ev-blob--purple" style={{ width: 720, height: 720, right: -240, top: -180, opacity: 0.55 }} />
      <span aria-hidden="true" style={{
        position: "absolute", width: 460, height: 460, right: 40, top: -60,
        borderRadius: "50%", pointerEvents: "none", zIndex: 0,
        background: "radial-gradient(circle at 30% 30%, rgba(87,255,135,0.4), rgba(0,0,0,0) 55%)",
        filter: "blur(40px)",
      }} />
      <span aria-hidden="true" className="ev-blob--hide-mobile" style={{
        position: "absolute", width: 260, height: 260, right: 220, top: 60,
        borderRadius: "50%", pointerEvents: "none", zIndex: 0,
        background: "radial-gradient(circle, rgba(197,255,94,0.3), rgba(0,0,0,0) 65%)",
        filter: "blur(40px)",
      }} />
      <span className="ev-blob ev-blob--indigo ev-blob--hide-mobile" style={{ width: 580, height: 580, left: -200, bottom: -240, opacity: 0.55 }} />

      <div style={{
        maxWidth: 1320, margin: "0 auto",
        padding: "60px 56px 0",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
        gap: 64,
        alignItems: "center",
        position: "relative",
        zIndex: 2,
      }}>
        {/* Copy — visually on the right on desktop, first on mobile */}
        <div className="hero-copy" style={{ order: 2 }}>
          <window.Reveal delay={80}>
            <h1 style={{
              fontSize: "clamp(38px, 5.4vw, 76px)",
              fontWeight: 900,
              lineHeight: 1.08,
              letterSpacing: "-0.035em",
              color: "var(--fg-1)",
              marginBottom: 24,
              textWrap: "balance",
              maxWidth: "18ch",
            }}>
              Echipa ta externă pentru{" "}
              <span className="ev-text-shimmer">Confirmări</span>
            </h1>
          </window.Reveal>

          <window.Reveal delay={240}>
            <div className="hero-cta-row" style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 40 }}>
              <window.HoverBorderBtn href="https://www.instagram.com/confirmari.ro/" btnStyle={{ padding: "18px 30px", fontSize: 17 }}>
                Implementează acum! <window.Icon name="arrow-right" size={16} color="#fff" />
              </window.HoverBorderBtn>
              <a href="#problema" style={{ textDecoration: "none" }}>
                <button className="ev-btn ev-btn--ghost" style={{ padding: "18px 26px", fontSize: 17 }}>
                  Vezi cum funcționează
                </button>
              </a>
            </div>
          </window.Reveal>
        </div>

        {/* Phone — visually on the left on desktop, second on mobile */}
        <div className="hero-phone" style={{ order: 1 }}>
          <window.PhoneAnim />
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #top > div {
            grid-template-columns: 1fr !important;
            padding: 40px 24px 0 !important;
            text-align: center;
          }
          #top h1, #top p { margin-left: auto; margin-right: auto; }
          #top .nav-links { display: none; }
          #top .hero-copy { order: 1 !important; }
          #top .hero-phone { order: 2 !important; }
          #top .ev-blob--hide-mobile { display: none !important; }
          #top .ev-phoneanim-root { transform: scale(1.2); transform-origin: center top; margin-bottom: 80px; }
          #top .ev-transcript > div { font-size: 13.5px !important; line-height: 1.42 !important; }
          /* Mobile hint: position right under the phone, horizontally centered, scaled down to fit */
          #top .ev-answer-hint {
            right: auto !important;
            left: 50% !important;
            top: auto !important;
            bottom: 15px !important;
            transform: translateX(-50%) scale(0.85) !important;
            max-width: 240px !important;
          }
          /* Hide the left-pointing triangle on mobile (no longer points at the phone) */
          #top .ev-answer-hint > div > div:first-child { display: none !important; }
        }
      `}</style>
    </section>
  );
};

window.LandingHero = Hero;