/**
 * Hero — homepage top section.
 * Uses shared <SearchBar /> component; the search trigger is the main CTA.
 */

function Hero({ onSelect }) {
  const w = useWindowWidth();
  const mobile = w < 768;
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => { setTimeout(() => setVisible(true), 80); }, []);

  return (
    <section style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: mobile ? '100px 20px 80px' : '120px 48px 100px',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Local hero glow layered on top of global Ambient */}
      <div style={{
        position: 'absolute', top: '-5%', left: '50%', transform: 'translateX(-50%)',
        width: mobile ? '600px' : '1100px', height: mobile ? '500px' : '800px',
        pointerEvents: 'none',
        background: 'radial-gradient(ellipse 50% 50% at 50% 30%, rgba(201,76,255,0.07) 0%, rgba(94,43,255,0.05) 40%, transparent 70%)',
      }} />
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: '200px',
        pointerEvents: 'none',
        background: 'linear-gradient(to bottom, transparent, #050508)',
      }} />

      <div style={{
        maxWidth: mobile ? '100%' : '960px', width: '100%', textAlign: 'center',
        opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(32px)',
        transition: 'opacity 900ms cubic-bezier(0.16,1,0.3,1), transform 900ms cubic-bezier(0.16,1,0.3,1)',
        position: 'relative', zIndex: 1,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', marginBottom: mobile ? '36px' : '48px' }}>
          <img src="assets/logo-sphere.png" alt="" style={{ width: '24px', height: '24px', objectFit: 'contain' }} />
          <span style={{ color: '#7C7C90', fontSize: '11px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', fontFamily: "'JetBrains Mono', monospace" }}>Aesthetics Records</span>
        </div>

        <h1 style={{ fontSize: mobile ? 'clamp(48px,13vw,72px)' : 'clamp(64px,8.5vw,108px)', fontWeight: 800, lineHeight: 1.01, letterSpacing: '-0.04em', color: '#F5F2FF', margin: '0 0 28px' }}>
          Real listeners.<br />
          <span style={{ background: 'linear-gradient(135deg, #8B5CFF 0%, #C94CFF 55%, #E7C8FF 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>Real algorithm.</span>
        </h1>

        <p style={{ fontSize: mobile ? '15px' : '18px', color: '#A1A1B3', fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.6, margin: `0 auto ${mobile ? '40px' : '56px'}`, maxWidth: '480px' }}>
          Meta Ads campaigns built around your Spotify link. Real fans find your music — Spotify's algorithm takes it from there.
        </p>

        <SearchBar onSelect={onSelect} placeholder="Search the track you want to promote" />

        <p style={{ marginTop: '18px', color: '#7C7C90', fontSize: '12px', letterSpacing: '-0.01em', fontFamily: "'JetBrains Mono', monospace" }}>
          Powered by Spotify · Takes 5 seconds
        </p>
      </div>

      <div style={{ position: 'absolute', bottom: '40px', left: '50%', opacity: 0.2, animation: 'bobDown 2.5s ease-in-out infinite' }}>
        <div style={{ width: '1px', height: '48px', background: 'linear-gradient(to bottom, #C94CFF, transparent)' }} />
      </div>
    </section>
  );
}

function ArtistInitials({ name, size = 40 }) {
  const initials = (name || '??').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: 'linear-gradient(135deg, rgba(94,43,255,0.4), rgba(201,76,255,0.2))',
      border: '1px solid rgba(94,43,255,0.3)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.32, fontWeight: 800, color: '#E7C8FF',
      flexShrink: 0, letterSpacing: '-0.02em',
    }}>{initials}</div>
  );
}

Object.assign(window, { Hero, ArtistInitials });