// Hero — final C direction for the full site
function Hero() {
  return (
    <section id="top" className="section grain aim-hero" style={{
      position:'relative', padding:0, height:'100vh', minHeight:780,
    }}>
      {/* full-bleed stage photo */}
      <div className="aim-hero-bg" style={{
        position:'absolute', inset:0,
        backgroundImage:'url(https://images.unsplash.com/photo-1501386761578-eac5c94b800a?w=1800&q=80)',
        backgroundSize:'cover', backgroundPosition:'center',
        filter:'brightness(0.4) contrast(1.2) saturate(0.7) hue-rotate(200deg)',
      }} />
      <div className="aim-hero-glow" style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse 720px 520px at 50% 40%, rgba(180,210,255,0.18), transparent 60%)',
      }} />
      <div className="aim-hero-floor-glow" style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse 900px 420px at 50% 110%, oklch(65% 0.24 250 / 0.5), transparent 60%)',
        mixBlendMode:'screen',
      }} />
      <div className="aim-hero-scanlines" style={{
        position:'absolute', inset:0,
        backgroundImage:'repeating-linear-gradient(0deg, transparent 0, transparent 2px, #fff 2px, #fff 3px)',
        opacity:0.07, pointerEvents:'none',
      }} />
      <div className="aim-hero-top-fade" style={{
        position:'absolute', top:0, left:0, right:0, height:200,
        background:'linear-gradient(180deg, rgba(5,8,17,0.9), transparent)',
      }} />
      <div className="aim-hero-live" style={{
        position:'absolute', bottom:0, left:0, right:0, height:260,
        background:'linear-gradient(0deg, var(--bg-0), transparent)',
      }} />

      {/* LIVE badge rail */}
      <div style={{
        position:'absolute', left:44, top:130, zIndex:8,
        display:'flex', flexDirection:'column', alignItems:'center', gap:14,
      }}>
        <div style={{ display:'flex', alignItems:'center', gap:8,
          fontFamily:'var(--ff-display)', fontSize:12, letterSpacing:2 }}>
          <span style={{ padding:'4px 10px', background:'#e11', color:'#fff', fontWeight:900,
            boxShadow:'0 0 20px #e11' }}>LIVE</span>
          <span style={{ width:8, height:8, borderRadius:'50%', background:'#e11',
            animation:'pulseC 1.4s infinite' }} />
        </div>
        <div style={{ width:1, height:36, background:'var(--rule-strong)' }} />
        <div className="mono" style={{ display:'flex', flexDirection:'column', gap:2,
          fontSize:12, color:'var(--ink-3)', textAlign:'center' }}>
          <span>21</span><span>04</span><span>26</span>
        </div>
      </div>

      {/* main content */}
      <div className="aim-hero-content" style={{ position:'relative', zIndex:5, padding:'160px 48px 0',
        textAlign:'center', maxWidth:1000, margin:'0 auto' }}>
        <div className="aim-hero-kicker" style={{ display:'inline-flex', gap:14, alignItems:'center',
          fontFamily:'var(--ff-display)', fontSize:13, letterSpacing:4,
          color:'var(--accent-2)', marginBottom:28 }}>
          <span style={{ color:'var(--ink-4)' }}>[</span>
          <span>VOICE · GUITAR&VOCAL · DTM</span>
          <span style={{ color:'var(--ink-4)' }}>]</span>
        </div>
        <h1 style={{ margin:0, textAlign:'center' }}>
          <div style={{ fontSize:26, fontWeight:700, letterSpacing:4,
            color:'rgba(232,237,247,0.85)', marginBottom:10 }}>さぁ、</div>
          <div className="aim-hero-title" style={{
            fontWeight:900, fontSize:'clamp(80px, 11vw, 160px)',
            lineHeight:0.95, letterSpacing:-4,
            textShadow:'0 0 60px rgba(100,140,220,0.4)',
          }}>
            音楽を、<br/>始めよう<span style={{ color:'var(--accent)',
              textShadow:'0 0 20px var(--accent)' }}>.</span>
          </div>
          <div className="aim-hero-subline" style={{
            display:'flex', alignItems:'center', justifyContent:'center', gap:20,
            marginTop:22, fontFamily:'var(--ff-display)', fontSize:22, letterSpacing:8,
            color:'var(--accent-2)',
          }}>
            <span style={{ width:80, height:1, background:'var(--accent-2)',
              boxShadow:'0 0 10px var(--accent-2)' }} />
            TAKE THE MIC
            <span style={{ width:80, height:1, background:'var(--accent-2)',
              boxShadow:'0 0 10px var(--accent-2)' }} />
          </div>
        </h1>

        <p style={{
          margin:'28px auto 0', maxWidth:560, fontSize:17, lineHeight:1.9,
          fontWeight:500, color:'var(--ink-2)',
        }}>
          大人の「歌いたい」を、もう一度日常へ。<br/>
          ボイストレーニングから、弾き語り、DTMまで。
        </p>

        <div className="aim-button-row" style={{ display:'flex', justifyContent:'center', gap:20, marginTop:40, flexWrap:'wrap' }}>
          <a href="trial.html" className="btn btn-primary" style={{ padding:'20px 28px' }}>
            <span style={{ display:'flex', flexDirection:'column', alignItems:'flex-start', gap:2 }}>
              <span className="display" style={{ fontSize:11, letterSpacing:2, opacity:0.7 }}>FREE · 60 MIN</span>
              <span style={{ fontSize:17, fontWeight:900 }}>無料体験レッスンを予約</span>
            </span>
            <span className="arrow" style={{ fontSize:22 }}>→</span>
          </a>
          <a href="pricing.html" className="btn btn-ghost">
            料金プランを見る
            <span className="arrow">↓</span>
          </a>
        </div>

        <div className="aim-social-proof" style={{ marginTop:52, display:'flex', justifyContent:'center',
          alignItems:'center', gap:18 }}>
          <div style={{ display:'flex' }}>
            {[
              'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80',
              'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80',
              'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80',
              'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80',
            ].map((u,i) => (
              <div key={i} style={{
                width:40, height:40, borderRadius:'50%', border:'2px solid var(--bg-0)',
                backgroundImage:`url(${u})`, backgroundSize:'cover', backgroundPosition:'center',
                marginLeft: i===0 ? 0 : -10,
              }} />
            ))}
          </div>
          <div style={{ textAlign:'left' }}>
            <div style={{ fontSize:13, color:'oklch(85% 0.18 90)', letterSpacing:1 }}>
              ★★★★★ <span style={{ color:'#fff', fontWeight:700, marginLeft:4 }}>4.9</span>
            </div>
            <div style={{ fontSize:12, color:'var(--ink-3)', marginTop:2 }}>
              1,200人以上の大人が、ここで歌い始めた。
            </div>
          </div>
        </div>
      </div>

      <div className="scroll-cue">
        <span>SCROLL TO EXPLORE</span>
        <span className="line" />
      </div>
    </section>
  );
}

window.Hero = Hero;