// Hero.jsx — full-screen teaser hero: floating verses, countdown, waitlist form.

const FLOATERS = [
  { t: "मोहब्बत", x: "8%",  y: "20%", s: 38, d: 0,   dur: 13, o: 0.10 },
  { t: "ख़ामोशी",  x: "82%", y: "16%", s: 30, d: 1.5, dur: 15, o: 0.09 },
  { t: "इश्क़",    x: "14%", y: "70%", s: 44, d: 2.2, dur: 14, o: 0.10 },
  { t: "अल्फ़ाज़",  x: "78%", y: "68%", s: 34, d: 0.8, dur: 16, o: 0.08 },
  { t: "सपने",    x: "46%", y: "10%", s: 26, d: 3,   dur: 12, o: 0.08 },
  { t: "रूह",     x: "90%", y: "44%", s: 30, d: 1.1, dur: 15, o: 0.09 },
  { t: "कहानी",   x: "4%",  y: "46%", s: 28, d: 2.6, dur: 17, o: 0.08 },
  { t: "एहसास",   x: "60%", y: "82%", s: 30, d: 1.8, dur: 14, o: 0.09 },
];

function Hero({ headline, subheading, launchDate }) {
  return (
    <section id="top" data-screen-label="Hero" style={{
      position: "relative", minHeight: "100svh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", textAlign: "center",
      padding: "130px 24px 80px", overflow: "hidden",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: "radial-gradient(ellipse 80% 60% at 50% 38%, rgba(207,150,71,0.13), transparent 70%)",
      }} />

      <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        {FLOATERS.map((f, i) => (
          <span key={i} className="hero-floater" lang="hi" style={{
            position: "absolute", left: f.x, top: f.y, fontFamily: "var(--font-display)",
            fontSize: f.s, color: "var(--aohp-ink)", opacity: f.o,
            animation: `floatY ${f.dur}s ease-in-out ${f.d}s infinite`,
            whiteSpace: "nowrap", userSelect: "none",
          }}>{f.t}</span>
        ))}
      </div>

      <div style={{ position: "relative", zIndex: 1, maxWidth: 860, width: "100%" }}>
        <img src="assets/logo-gold-transparent.png" alt="" width="74" height="74"
             style={{ margin: "0 auto 26px", display: "block" }} />

        <div className="reveal is-in" style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 24 }}>
          <span style={{ width: 30, height: 1, background: "var(--aohp-gold-olive)" }} />
          <span className="eyebrow" lang="hi">ऐप जल्द आ रहा है</span>
          <span style={{ width: 30, height: 1, background: "var(--aohp-gold-olive)" }} />
        </div>

        <h1 lang="hi" className="hero-title" style={{
          fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(36px, 6.2vw, 76px)", lineHeight: 1.32, letterSpacing: "-0.01em",
          color: "var(--aohp-ink)", margin: 0,
        }}>
          {headline}
        </h1>

        <p className="hero-sub" style={{
          fontFamily: "var(--font-body)", fontWeight: 400, fontSize: "clamp(16px, 2vw, 19px)",
          lineHeight: 1.65, color: "var(--fg3)", maxWidth: 560, margin: "22px auto 0",
        }}>
          {subheading}
        </p>

        <div style={{ margin: "44px auto 0" }}>
          <Countdown dateStr={launchDate} />
        </div>

        <div style={{ marginTop: 44 }}>
          <WaitlistForm id="waitlist" />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });