// ============================================================
// Hero — full-bleed illustrated city under two moons
// ============================================================

function Hero() {
  // generate deterministic stars
  const stars = React.useMemo(() => {
    const arr = [];
    let seed = 7;
    const rand = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
    for (let i = 0; i < 80; i++) {
      arr.push({
        x: rand() * 100,
        y: rand() * 60,
        r: rand() * 1.5 + 0.4,
        delay: rand() * 4,
        o: rand() * 0.6 + 0.4,
      });
    }
    return arr;
  }, []);

  return (
    <section className="hero" id="hero">
      <div className="hero-illustration">
        <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice">
          <defs>
            <linearGradient id="skygrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%"   stopColor="var(--hero-sky-top)"/>
              <stop offset="60%"  stopColor="var(--hero-sky-mid)"/>
              <stop offset="100%" stopColor="var(--hero-sky-bot)"/>
            </linearGradient>
            <radialGradient id="moonglow" cx="50%" cy="50%" r="50%">
              <stop offset="0%"   stopColor="var(--hero-moon-warm)" stopOpacity="0.35"/>
              <stop offset="60%"  stopColor="var(--hero-moon-warm)" stopOpacity="0.12"/>
              <stop offset="100%" stopColor="var(--hero-moon-warm)" stopOpacity="0"/>
            </radialGradient>
            <radialGradient id="moonglow2" cx="50%" cy="50%" r="50%">
              <stop offset="0%"   stopColor="var(--hero-moon-cool)" stopOpacity="0.30"/>
              <stop offset="60%"  stopColor="var(--hero-moon-cool)" stopOpacity="0.08"/>
              <stop offset="100%" stopColor="var(--hero-moon-cool)" stopOpacity="0"/>
            </radialGradient>
            <radialGradient id="spireglow" cx="50%" cy="50%" r="50%">
              <stop offset="0%"   stopColor="var(--hero-spire-glow)" stopOpacity="0.55"/>
              <stop offset="100%" stopColor="var(--hero-spire-glow)" stopOpacity="0"/>
            </radialGradient>
            <linearGradient id="fog" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%"   stopColor="var(--hero-fog)" stopOpacity="0"/>
              <stop offset="100%" stopColor="var(--hero-fog)" stopOpacity="1"/>
            </linearGradient>
            <linearGradient id="cityback" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%"   stopColor="var(--hero-city-back)"/>
              <stop offset="100%" stopColor="var(--hero-city-front)"/>
            </linearGradient>
            <linearGradient id="cityfront" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%"   stopColor="var(--hero-city-front)"/>
              <stop offset="100%" stopColor="var(--hero-mountain)"/>
            </linearGradient>
          </defs>

          {/* Sky */}
          <rect width="1600" height="900" fill="url(#skygrad)"/>

          {/* Moon 1 (warm) — large, low. Pale moon by day, blood moon by night. */}
          <circle cx="1240" cy="280" r="220" fill="url(#moonglow)"/>
          <circle cx="1240" cy="280" r="64"  fill="var(--hero-moon-warm)" opacity="0.9"/>
          <circle cx="1252" cy="270" r="6"   fill="var(--hero-moon-warm-2)" opacity="0.6"/>
          <circle cx="1228" cy="294" r="4"   fill="var(--hero-moon-warm-2)" opacity="0.6"/>
          <circle cx="1244" cy="296" r="3"   fill="var(--hero-moon-warm-2)" opacity="0.5"/>

          {/* Moon 2 (cool) — smaller, higher. The Doubling, almost. */}
          <circle cx="380" cy="190" r="160" fill="url(#moonglow2)"/>
          <circle cx="380" cy="190" r="42"  fill="var(--hero-moon-cool)" opacity="0.8"/>
          <circle cx="390" cy="184" r="4"   fill="var(--hero-moon-cool-2)" opacity="0.5"/>
          <circle cx="372" cy="200" r="3"   fill="var(--hero-moon-cool-2)" opacity="0.5"/>

          {/* Stars */}
          {stars.map((s, i) => (
            <circle
              key={i}
              cx={s.x * 16}
              cy={s.y * 9}
              r={s.r}
              fill="var(--hero-star)"
              opacity={s.o}
              className="star"
              style={{ animationDelay: `${s.delay}s` }}
            />
          ))}

          {/* Distant mountains */}
          <path d="M 0,580 L 120,500 L 220,540 L 340,470 L 460,520 L 600,460 L 740,510 L 880,470 L 1020,520 L 1160,480 L 1300,530 L 1440,500 L 1600,540 L 1600,900 L 0,900 Z" fill="var(--hero-mountain)" opacity="0.7"/>

          {/* City silhouette — middle layer */}
          <g fill="url(#cityback)" opacity="0.95">
            <path d="M 0,660 L 60,660 L 60,580 L 90,580 L 90,520 L 130,520 L 130,600 L 180,600 L 180,540 L 220,540 L 220,560 L 270,560 L 270,500 L 320,500 L 320,580 L 360,580 L 360,620 L 420,620 L 420,560 L 480,560 L 480,600 L 540,600 L 540,560 L 600,560 L 600,640 L 660,640 L 660,580 L 720,580 L 720,540 L 760,540 L 760,600 L 820,600 L 820,560 L 880,560 L 880,620 L 940,620 L 940,580 L 1000,580 L 1000,540 L 1060,540 L 1060,620 L 1120,620 L 1120,580 L 1180,580 L 1180,640 L 1240,640 L 1240,580 L 1300,580 L 1300,620 L 1360,620 L 1360,560 L 1420,560 L 1420,620 L 1480,620 L 1480,580 L 1540,580 L 1540,640 L 1600,640 L 1600,900 L 0,900 Z"/>
          </g>

          {/* Cathedral spire — centerpiece; windows lit with magic (green/red) */}
          <circle cx="800" cy="460" r="180" fill="url(#spireglow)"/>
          <g fill="var(--hero-city-front)">
            <path d="M 760,640 L 760,420 L 770,420 L 770,360 L 780,360 L 800,300 L 820,360 L 830,360 L 830,420 L 840,420 L 840,640 Z"/>
          </g>
          <g>
            {/* Cross atop */}
            <rect x="797" y="280" width="6"  height="28" fill="var(--hero-spire-light)" opacity="0.95"/>
            <rect x="788" y="288" width="24" height="4"  fill="var(--hero-spire-light)" opacity="0.95"/>
            {/* Windows — the magic glows from inside */}
            <rect x="785" y="440" width="6"  height="14" fill="var(--hero-spire-light)" opacity="0.7"/>
            <rect x="795" y="440" width="10" height="14" fill="var(--hero-spire-glow)"  opacity="0.85" className="hero-pulse"/>
            <rect x="809" y="440" width="6"  height="14" fill="var(--hero-spire-light)" opacity="0.7"/>
            <rect x="790" y="480" width="6"  height="12" fill="var(--hero-spire-light)" opacity="0.55"/>
            <rect x="804" y="480" width="6"  height="12" fill="var(--hero-spire-light)" opacity="0.55"/>
            <rect x="788" y="540" width="24" height="22" fill="var(--hero-spire-light)" opacity="0.35"/>
          </g>

          {/* Front rooftop silhouette — closest, darkest */}
          <g fill="url(#cityfront)">
            <path d="M 0,760 L 40,720 L 80,740 L 120,700 L 180,720 L 240,690 L 300,720 L 360,680 L 420,720 L 500,700 L 580,730 L 680,700 L 760,720 L 860,690 L 940,720 L 1020,700 L 1100,730 L 1180,710 L 1260,740 L 1340,700 L 1420,730 L 1500,710 L 1600,740 L 1600,900 L 0,900 Z"/>
          </g>

          {/* Lanterns — magic-flame points across the rooftops */}
          <g>
            {[120, 280, 480, 700, 1020, 1300].map((x, i) => (
              <g key={i} transform={`translate(${x}, ${710 + (i % 2) * 14})`} className="hero-lantern" style={{ animationDelay: `${i * 0.7}s` }}>
                <circle r="16" fill="var(--hero-spire-glow)" opacity="0.18"/>
                <circle r="3"  fill="var(--hero-spire-glow)"/>
              </g>
            ))}
          </g>

          {/* Bottom fog — page-edge fade */}
          <rect x="0" y="600" width="1600" height="300" fill="url(#fog)"/>
        </svg>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow">A campaign in Thoria</div>
        <h1 className="hero-title">
          <span className="redacted-title">[REDACTED]</span>
        </h1>
        <p className="hero-sub">
          The tax post is local. The roots are ancient. Some names are better left unspoken for now.
        </p>
        <div className="hero-meta">
          <span>Session <strong>{window.CAMPAIGN.session}</strong></span>
          <span className="dot"></span>
          <span>Act <strong>1</strong> · Aldenmire</span>
          <span className="dot"></span>
          <span>The Greyvein road</span>
        </div>
      </div>

      <div className="scroll-cue">
        <span>scroll</span>
        <span className="scroll-cue-line"></span>
      </div>
    </section>
  );
}

window.Hero = Hero;
