const Hero = () => {
  // Generate small twinkling stars positions
  const stars = React.useMemo(() => {
    const arr = [];
    for (let i = 0; i < 40; i++) {
      arr.push({
        x: Math.random() * 100,
        y: Math.random() * 100,
        d: (Math.random() * 3).toFixed(2),
        s: (0.5 + Math.random() * 1.5).toFixed(1),
      });
    }
    return arr;
  }, []);

  return (
    <section className="hero">
      <div className="starfield" aria-hidden="true">
        {stars.map((s, i) => (
          <span key={i} className="tw" style={{
            left: s.x + "%", top: s.y + "%",
            animationDelay: -s.d + "s",
            transform: `scale(${s.s})`,
          }} />
        ))}
      </div>

      <div className="shell">
        <div className="hero-grid">
          <div className="hero-left">
            <div className="badge">
              <span className="dot">✦</span>
              Latest · AI integration just arrived
            </div>
            <h1 className="display metal">
              Boost your<br/>
              website's SEO
            </h1>
            <p className="hero-sub">
              Best analytics app for agencies, consultants, affiliates and e-commerce teams who need rankings that actually move.
            </p>
            <div className="hero-cta">
              <a href="#" className="btn-pill">Start a Free Trial <span className="arrow"><ArrowRight /></span></a>
              <a href="#" className="btn-ghost"><Play /> Watch Demo</a>
            </div>
          </div>

          <div className="hero-art" aria-hidden="true">
            <img src="assets/rankly-star-1.webp" alt="" className="star s1" />
            <img src="assets/rankly-star-2.webp" alt="" className="star s2" />
            <img src="assets/rankly-star-3.webp" alt="" className="star s3" />
          </div>
        </div>

        {/* Logo cloud */}
        <div className="logos">
          <div className="logos-track">
            <BrandMark name="Northwind" />
            <BrandMark name="Helio" />
            <BrandMark name="Quanta" />
            <BrandMark name="Loopline" />
            <BrandMark name="Vertex" />
            <BrandMark name="Pixelade" />
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;