// Hero.jsx — time-aware greeting, progress line, next-up target, moon glyph.

function Hero({ kidName, seen, total, nextUp, onPickNext, earnedCount, moon }) {
  const hour = new Date().getHours();
  const greet =
    hour < 5  ? 'Good night'    :
    hour < 12 ? 'Good morning'  :
    hour < 17 ? 'Good afternoon':
    hour < 21 ? 'Good evening'  : 'Clear skies';

  // Local starfield positions (stable across rerenders)
  const stars = React.useMemo(() => {
    const out = [];
    for (let i = 0; i < 50; i++) {
      const warm = Math.random() < 0.18;
      out.push({
        x: Math.random() * 100,
        y: Math.random() * 100,
        r: Math.random() * 1.7 + 0.4,
        d: Math.random() * 3 + 2,
        t: Math.random() * 4,
        o: Math.random() * 0.55 + 0.3,
        warm,
      });
    }
    return out;
  }, []);

  const { size, cx, cy, r, litPath } = React.useMemo(() => {
    if (!moon) return { size: 64 };
    const size = 64, cx = 32, cy = 32, r = 26;
    const k = 1 - 2 * moon.illumination;
    const rx = r * Math.abs(k);
    const outerSweep = moon.waxing ? 1 : 0;
    const innerSweep = k > 0 ? outerSweep : 1 - outerSweep;
    const litPath = `M ${cx} ${cy - r} A ${r} ${r} 0 0 ${outerSweep} ${cx} ${cy + r} A ${rx} ${r} 0 0 ${innerSweep} ${cx} ${cy - r} Z`;
    return { size, cx, cy, r, litPath };
  }, [moon?.illumination, moon?.waxing]);

  return (
    <section className="hero" aria-label="Tonight's field log overview">
      <div className="hero__stars" aria-hidden="true">
        {stars.map((s, i) => (
          <span
            key={i}
            className={`starfield__dot ${s.warm ? 'starfield__dot--warm' : ''}`}
            style={{
              left: `${s.x}%`,
              top: `${s.y}%`,
              width: `${s.r}px`,
              height: `${s.r}px`,
              animationDuration: `${s.d}s`,
              animationDelay: `${s.t}s`,
              '--o': s.o,
            }}
          />
        ))}
      </div>

      <div className="hero__grid">
        <div>
          <div className="hero__kicker">Field log · tonight</div>
          <h1 className="hero__greeting">
            {greet}, <em>{kidName}</em>.
          </h1>

          <div className="hero__stats">
            <span className="hero__stat">
              <span className="hero__stat-num">{seen}</span>
              <span className="hero__stat-label">of {total} logged</span>
            </span>
            <span className="hero__stat-sep" aria-hidden="true" />
            <span className="hero__stat">
              <span className="hero__stat-num">{earnedCount}</span>
              <span className="hero__stat-label">{earnedCount === 1 ? 'badge' : 'badges'} earned</span>
            </span>
            {moon && (<>
              <span className="hero__stat-sep" aria-hidden="true" />
              <span className="hero__stat">
                <span className="hero__stat-label">Moon:</span>
                <span className="hero__stat-num" style={{ fontSize: 15 }}>{moon.name}</span>
              </span>
            </>)}
          </div>

          {nextUp && (
            <button className="hero__target" onClick={() => onPickNext(nextUp)}>
              <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
                <circle cx="8" cy="8" r="6" fill="none" stroke="var(--amber)" strokeWidth="1" opacity="0.4" />
                <circle cx="8" cy="8" r="3" fill="none" stroke="var(--amber)" strokeWidth="1.1" />
                <circle cx="8" cy="8" r="1" fill="var(--amber)" />
              </svg>
              <span className="hero__target-kicker">NEXT UP</span>
              <span className="hero__target-sep">·</span>
              <span className="hero__target-name">{nextUp.name}</span>
              <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" style={{ opacity: 0.6 }}>
                <path d="M3 1l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          )}
        </div>

        {moon && (
          <div className="hero__moon-wrap">
            <div className="hero__moon" aria-hidden="true">
              <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
                <defs>
                  <radialGradient id="heroMoonSurface" cx="40%" cy="40%">
                    <stop offset="0%" stopColor="#f2ecda" />
                    <stop offset="65%" stopColor="#c8c0a6" />
                    <stop offset="100%" stopColor="#8a826b" />
                  </radialGradient>
                </defs>
                <circle cx={cx} cy={cy} r={r} fill="#0a1028" stroke="rgba(0,0,0,0.35)" strokeWidth="0.6" />
                <path d={litPath} fill="url(#heroMoonSurface)" />
                <circle cx={cx} cy={cy} r={r} fill="none" stroke="rgba(0,0,0,0.25)" strokeWidth="0.8" />
              </svg>
            </div>
            <div className="hero__moon-phase">
              {Math.round(moon.illumination * 100)}% · DAY {Math.round(moon.age)}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Hero });