// Final strong CTA + Footer
function FinalCTA() {
  return (
    <section id="cta" className="section grain aim-final-cta" style={{
      position:'relative', padding:'160px 0', overflow:'hidden',
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'url(https://images.unsplash.com/photo-1508252592163-5d3c3c559b17?w=1800&q=80)',
        backgroundSize:'cover', backgroundPosition:'center',
        filter:'brightness(0.28) contrast(1.15) saturate(0.7) hue-rotate(200deg)',
      }} />
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse 900px 500px at 50% 50%, oklch(65% 0.24 250 / 0.55), transparent 65%)',
        mixBlendMode:'screen',
      }} />
      <div style={{
        position:'absolute', top:0, left:0, right:0, height:120,
        background:'linear-gradient(180deg, var(--bg-0), transparent)',
      }} />
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, height:120,
        background:'linear-gradient(0deg, var(--bg-0), transparent)',
      }} />

      <div className="section-inner" style={{ position:'relative', textAlign:'center', zIndex:5 }}>
        <div className="aim-button-row" style={{
          display:'inline-flex', alignItems:'center', gap:12,
          padding:'6px 14px',
          border:'1px solid var(--accent)',
          fontFamily:'var(--ff-display)', fontSize:12, letterSpacing:3,
          color:'var(--accent-2)',
          boxShadow:'var(--accent-glow)',
          marginBottom:28,
        }}>
          <span style={{ width:7, height:7, borderRadius:'50%', background:'var(--accent)',
            boxShadow:'0 0 10px var(--accent)', animation:'pulseC 1.6s infinite' }} />
          NOW BOOKING · APR 2026
        </div>

        <h2 style={{
          margin:0, fontSize:'clamp(56px, 8vw, 120px)', fontWeight:900,
          lineHeight:0.98, letterSpacing:-3,
          textShadow:'0 0 60px rgba(100,140,220,0.4)',
        }}>
          次のカラオケまでに、<br/>
          <em style={{ fontStyle:'italic', color:'var(--accent)',
            textShadow:'0 0 40px oklch(70% 0.25 250 / 0.6)' }}>本気で</em>変わろう。
        </h2>

        <p style={{
          margin:'32px auto 0', maxWidth:620,
          fontSize:17, lineHeight:1.9, color:'var(--ink-2)',
        }}>
          60分の無料体験レッスン。手ぶらでOK。入会金¥0キャンペーン実施中。
        </p>

        <div style={{
          display:'flex', justifyContent:'center', gap:20, marginTop:44, flexWrap:'wrap',
        }}>
          <a href="#" className="btn btn-primary" style={{ padding:'22px 32px' }}>
            <span style={{ display:'flex', flexDirection:'column', alignItems:'flex-start', gap:3 }}>
              <span className="display" style={{ fontSize:11, letterSpacing:2, opacity:0.7 }}>FREE · 60 MIN · 入会金¥0</span>
              <span style={{ fontSize:19, fontWeight:900 }}>無料体験レッスンを予約する</span>
            </span>
            <span className="arrow" style={{ fontSize:24 }}>→</span>
          </a>
          <a href="tel:" className="btn btn-ghost" style={{ padding:'22px 28px' }}>
            📞 03-0000-0000
            <span className="mono" style={{ fontSize:11, color:'var(--ink-3)', marginLeft:8 }}>
              平日 12:00–22:00
            </span>
          </a>
        </div>

        <div style={{
          marginTop:72, display:'flex', justifyContent:'center', gap:48, flexWrap:'wrap',
          fontFamily:'var(--ff-mono)', fontSize:12, letterSpacing:1.5, color:'var(--ink-3)',
        }}>
          <span>● 手ぶらでOK</span>
          <span>● 当日入会 義務なし</span>
          <span>● 20:00以降も予約可</span>
          <span>● 完全マンツーマン</span>
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  return (
    <footer style={{ background:'var(--bg-1)', borderTop:'1px solid var(--rule)' }}>
      <div className="section-inner" style={{ padding:'64px 48px 28px' }}>
        <div className="aim-footer-grid" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:40 }}>
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:10,
              fontFamily:'var(--ff-display)', fontSize:22 }}>
              <span style={{ width:4, height:24, background:'var(--accent)',
                boxShadow:'0 0 10px var(--accent)' }} />
              All in Music
            </div>
            <p style={{ margin:'16px 0 0', fontSize:13, lineHeight:1.8, color:'var(--ink-2)', maxWidth:320 }}>
              大人の「歌いたい」を、本気で楽しむ音楽教室。ボイトレ・弾き語り・DTM。東京 / 2010年〜。
            </p>
            <div style={{ display:'flex', gap:10, marginTop:20 }}>
              {['X','IG','YT','LINE'].map(s => (
                <a key={s} href="#" style={{
                  width:36, height:36, border:'1px solid var(--rule-strong)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:11, color:'var(--ink-2)', fontFamily:'var(--ff-display)',
                }}>{s}</a>
              ))}
            </div>
          </div>
          {[
            { t:'SERVICE', items:['ボイストレーニング','弾き語り','DTM','発表会'] },
            { t:'ABOUT', items:['About us','講師紹介','レッスン方針','運営情報'] },
            { t:'SUPPORT', items:['よくある質問','お問い合わせ','利用規約','プライバシー'] },
          ].map(c => (
            <div key={c.t}>
              <div className="display" style={{ fontSize:11, letterSpacing:2.5, color:'var(--accent-2)',
                marginBottom:16 }}>{c.t}</div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {c.items.map(it => (
                  <a key={it} href="#" style={{ fontSize:13, color:'var(--ink-2)' }}>{it}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop:56, paddingTop:22, borderTop:'1px solid var(--rule)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:20,
          fontFamily:'var(--ff-mono)', fontSize:11, letterSpacing:1.5, color:'var(--ink-3)',
        }}>
          <span>© 2026 ALL IN MUSIC · TOKYO, JP</span>
          <span>MADE WITH ♪ FOR GROWN-UPS WHO STILL WANT TO SING LOUD</span>
        </div>
      </div>
    </footer>
  );
}

window.FinalCTA = FinalCTA;
window.SiteFooter = SiteFooter;