/* global React, Badge, BtnPrimary, BtnGhost */
// Hero — the split cream/gold headline.

const Hero = ({ onNavigate }) => (
  <section
    id="hero"
    data-screen-label="01 Hero"
    style={{
      position: 'relative',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '120px 32px 80px',
      textAlign: 'center',
      overflow: 'hidden',
    }}
  >
    {/* Gold hero glow */}
    <div
      aria-hidden
      style={{
        position: 'absolute',
        top: '50%', left: '50%',
        transform: 'translate(-50%, -40%)',
        width: 900, height: 600,
        background: 'radial-gradient(ellipse, rgba(244,205,99,0.10), transparent 60%)',
        filter: 'blur(40px)',
        pointerEvents: 'none',
      }}
    />
    <div style={{ position: 'relative', maxWidth: 860, zIndex: 1 }}>
      <Badge>Now in Beta</Badge>
      <h1
        style={{
          fontSize: 64,
          fontWeight: 700,
          lineHeight: 1.1,
          letterSpacing: '-0.02em',
          margin: 0,
        }}
      >
        <span style={{ color: 'var(--mlc-cream)' }}>Your Little Trading</span>
        <br />
        <span style={{ color: 'var(--mlc-gold)' }}>Companion</span>
      </h1>
      <p
        style={{
          fontSize: 17,
          fontWeight: 400,
          lineHeight: 1.6,
          color: 'rgba(254,255,238,0.65)',
          maxWidth: 640,
          margin: '28px auto 0',
        }}
      >
        A friendly, powerful charting terminal with multi-exchange support
        and real-time data — built for traders who want professional tools
        without the complexity.
      </p>
      <div
        style={{
          marginTop: 40,
          display: 'flex',
          gap: 16,
          justifyContent: 'center',
          flexWrap: 'wrap',
        }}
      >
        <BtnPrimary onClick={(e) => { e.preventDefault(); onNavigate?.('download'); }}>
          Get Started Free →
        </BtnPrimary>
        <BtnGhost onClick={(e) => { e.preventDefault(); onNavigate?.('features'); }}>
          See Features
        </BtnGhost>
      </div>
    </div>

    {/* Down arrow */}
    <div
      onClick={() => onNavigate?.('stats')}
      style={{
        position: 'absolute',
        bottom: 32,
        fontSize: 22,
        color: 'rgba(254,255,238,0.30)',
        cursor: 'pointer',
        animation: 'mlcHeroBounce 2s ease-in-out infinite',
        fontFamily: 'var(--mlc-font-mono)',
        lineHeight: 1,
      }}
    >
      ⌄
    </div>
    <style>{`
      @keyframes mlcHeroBounce {
        0%, 100% { transform: translateY(0); opacity: 0.30; }
        50% { transform: translateY(6px); opacity: 0.60; }
      }
    `}</style>
  </section>
);

window.Hero = Hero;