// Hero.jsx — full-bleed terminal-style hero with running clock + dot grid
const { useState: useStateHero, useEffect: useEffectHero } = React;

function HeroClock() {
  const [now, setNow] = useStateHero(() => new Date());
  useEffectHero(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const pad = (n) => String(n).padStart(2, '0');
  const ts =
    now.getUTCFullYear() + '-' + pad(now.getUTCMonth() + 1) + '-' + pad(now.getUTCDate()) +
    ' ' + pad(now.getUTCHours()) + ':' + pad(now.getUTCMinutes()) + ':' + pad(now.getUTCSeconds()) + ' UTC';
  return <span className="num">{ts}</span>;
}

function Hero() {
  return (
    <section style={{ position: 'relative', borderBottom: '1px solid var(--border)' }}>
      {/* dot grid backdrop */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(var(--gray-5) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
        backgroundPosition: '0 0',
        maskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)',
        WebkitMaskImage: 'linear-gradient(to bottom, black 60%, transparent 100%)',
        opacity: 0.7, pointerEvents: 'none',
      }} />
      <div style={{
        position: 'relative',
        maxWidth: 1200, margin: '0 auto',
        padding: '40px var(--gutter) 72px',
      }}>
        {/* Top status row */}
        <div style={{
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
          color: 'var(--fg-3)', textTransform: 'uppercase',
          paddingBottom: 24, borderBottom: '1px dashed var(--border-soft)',
        }}>
          <span><HeroClock /></span>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-mono)', fontSize: 'clamp(56px, 11vw, 144px)',
          lineHeight: 0.92, letterSpacing: '-0.035em', color: 'var(--fg)',
          fontWeight: 400, margin: '64px 0 0',
        }}>
          Now or Never.
        </h1>

        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 22,
          color: 'var(--fg-2)', marginTop: 20, letterSpacing: '-0.01em',
        }}>
          要麼現在做，要麼別做
        </div>

        <p style={{
          fontFamily: 'var(--font-mono)', fontSize: 18,
          color: 'var(--fg-1)', maxWidth: 640, lineHeight: 1.5,
          letterSpacing: '-0.005em',
          marginTop: 40,
        }}>
          Small tools, built fast, shipped now.
        </p>

        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 12,
          color: 'var(--fg-3)', letterSpacing: '0.08em',
          textTransform: 'uppercase',
          marginTop: 12,
        }}>
          all free · macOS &amp; web
        </div>

        {/* CTAs */}
        <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href="#products" style={btnPrimary}>
            See the catalog <span style={{ marginLeft: 4 }}>→</span>
          </a>
          <a href="https://github.com/therealechan" style={btnGhost}>
            github.com/therealechan ↗
          </a>
        </div>
      </div>
      <style>{`@keyframes nn-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0.25 } }`}</style>
    </section>
  );
}

const btnPrimary = {
  fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.02em',
  padding: '12px 18px', background: 'var(--fg)', color: 'var(--bg)',
  textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
  border: '1px solid var(--fg)',
  transition: 'background 120ms var(--ease-out)',
};
const btnGhost = {
  fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.02em',
  padding: '12px 18px', background: 'transparent', color: 'var(--fg-1)',
  textDecoration: 'none', display: 'inline-flex', alignItems: 'center',
  border: '1px solid var(--border-strong)',
  transition: 'background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out)',
};

window.Hero = Hero;