/* global React */
const DS_HERO = window.SubEarthDesignSystem_9ae0a6;

function Hero({ onBuy }) {
  const { Button, Badge, FloatingPanel } = window.SubEarthDesignSystem_9ae0a6;
  return (
    <section id="top" style={{
      position: 'relative', overflow: 'hidden',
      padding: 'calc(var(--space-16)) var(--gutter) var(--space-24)',
      backgroundImage: 'var(--spotlight)',
    }}>
      {/* grain overlay */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, backgroundImage: 'var(--grain)',
        backgroundSize: '160px 160px', opacity: 0.06, mixBlendMode: 'screen', pointerEvents: 'none',
      }} />
      {/* dither overlay — breaks up gradient banding (strength scales with brightness via 'overlay') */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, backgroundImage: 'var(--grain)',
        backgroundSize: '110px 110px', opacity: 0.16, mixBlendMode: 'overlay', pointerEvents: 'none',
      }} />
      <div style={{
        position: 'relative', zIndex: 2, maxWidth: 'var(--max-w)', margin: '0 auto',
        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
        gap: 'var(--space-6)',
      }}>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 800, textTransform: 'uppercase',
          letterSpacing: 'var(--tr-mega)', lineHeight: 0.92, margin: 0,
          fontSize: 'var(--fs-mega)', textShadow: 'var(--glow)',
        }}>Chonkify</h1>
        <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'center', marginTop: 'var(--space-2)' }}>
          <Button variant="primary" size="lg" iconRight={<span>↗</span>} onClick={onBuy}>Buy — $39</Button>
          <Button variant="secondary" size="lg">Listen</Button>
        </div>

        {/* the floating centerpiece */}
        <div style={{ marginTop: 'var(--space-10)', width: '100%', display: 'flex', justifyContent: 'center' }}>
          <FloatingPanel width="min(760px, 94vw)" maxTilt={16}>
            <video
              poster="./assets/images/chonkify-vst.png"
              autoPlay loop muted playsInline
              aria-label="Chonkify VST interface"
              style={{ display: 'block', width: '100%' }}
            >
              <source src="./assets/chonkify-hero-v4.webm" type="video/webm" />
              <source src="./assets/chonkify-hero-v4.mp4" type="video/mp4" />
            </video>
          </FloatingPanel>
        </div>

        <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap', justifyContent: 'center' }}>
          <Badge variant="outline">VST3 · AU</Badge>
          <Badge variant="outline">macOS · Windows</Badge>
          <Badge variant="dot">v2.6</Badge>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;
window.__appReady.Hero = true;