// HeroCosmique — V2 — fond nuit, étoiles, dorés
function HeroCosmique({ tagline, onReserve }) {
  // Stars rendered as positioned dots
  const stars = React.useMemo(() => {
    const out = [];
    for (let i = 0; i < 50; i++) {
      out.push({
        x: Math.random() * 100,
        y: Math.random() * 100,
        s: Math.random() * 2 + 0.5,
        d: Math.random() * 3,
        o: Math.random() * 0.6 + 0.3,
      });
    }
    return out;
  }, []);

  return (
    <section className="mi-hero mi-hero--cosmique">
      <div className="mi-hero__bg" aria-hidden="true">
        <div className="mi-hero__stars">
          {stars.map((st, i) => (
            <span
              key={i}
              style={{
                left: `${st.x}%`,
                top: `${st.y}%`,
                width: `${st.s}px`,
                height: `${st.s}px`,
                opacity: st.o,
                animationDelay: `${st.d}s`,
              }}
            />
          ))}
        </div>
        <div className="mi-hero__moon" aria-hidden="true">
          <svg viewBox="0 0 200 200" width="100%" height="100%">
            <defs>
              <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="#FBF4E4" stopOpacity="0.55"/>
                <stop offset="60%" stopColor="#C89232" stopOpacity="0.2"/>
                <stop offset="100%" stopColor="#C89232" stopOpacity="0"/>
              </radialGradient>
            </defs>
            <circle cx="100" cy="100" r="100" fill="url(#moonGlow)"/>
            <circle cx="100" cy="100" r="42" fill="none" stroke="#E8CC85" strokeWidth="1" opacity="0.65"/>
            <path d="M120 60 a48 48 0 1 0 0 80 a36 36 0 1 1 0 -80z" fill="#E8CC85" opacity="0.85"/>
          </svg>
        </div>
      </div>
      <div className="mi-hero__inner">
        <span className="mi-hero__eyebrow">Mélanie Inzirillo · Lectures cosmiques</span>
        <h1 className="mi-hero__title" dangerouslySetInnerHTML={{ __html: tagline }} />
        <p className="mi-hero__sub">
          Une lecture complète qui croise Human Design, Numérologie et Astrologie, pour révéler qui tu es vraiment et construire ton business<br/>à partir de qui tu es.
        </p>
        <div className="mi-hero__ctas">
          <button className="mi-btn mi-btn--primary mi-btn--lg" onClick={onReserve}>Réserver ma lecture · 47€</button>
          <a href="#lecture" className="mi-btn mi-btn--ghost mi-btn--lg" style={{ color: 'var(--tsc-cream-100)' }}>Découvrir la lecture →</a>
        </div>
        <div className="mi-hero__meta">
          <span><strong>90 min</strong> en visio</span>
          <span aria-hidden="true">·</span>
          <span><strong>+ Synthèse</strong> à garder</span>
          <span aria-hidden="true">·</span>
          <span><strong>Offre lancement</strong> 47 € au lieu de 177 €</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroCosmique });