// Page banner — reusable hero for inner pages
function PageBanner({ kicker, title, accent, lead, tag, photo }) {
  return (
    <section className="section grain" style={{
      position:'relative', padding:'160px 0 80px', overflow:'hidden',
      borderBottom:'1px solid var(--rule)',
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:`url(${photo})`, backgroundSize:'cover', backgroundPosition:'center',
        filter:'brightness(0.32) contrast(1.2) saturate(0.75) hue-rotate(200deg)',
      }} />
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse 700px 420px at 50% 70%, oklch(65% 0.24 250 / 0.4), transparent 65%)',
        mixBlendMode:'screen',
      }} />
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, height:200,
        background:'linear-gradient(0deg, var(--bg-0), transparent)',
      }} />

      <div className="section-inner" style={{ position:'relative', zIndex:5, paddingTop:40 }}>
        <div className="mono" style={{
          display:'flex', alignItems:'center', gap:14,
          fontSize:11, letterSpacing:2, color:'var(--ink-3)',
          marginBottom:20,
        }}>
          <a href="index.html" style={{ color:'var(--ink-3)' }}>HOME</a>
          <span style={{ color:'var(--ink-4)' }}>/</span>
          <span style={{ color:'var(--accent-2)' }}>{tag}</span>
        </div>
        <span className="eyebrow"><span className="dot" /> {kicker}</span>
        <h1 style={{
          margin:'16px 0 0', fontWeight:900, letterSpacing:-2.5,
          fontSize:'clamp(52px, 7vw, 96px)', lineHeight:1.02,
        }}>
          {title}{accent && <em style={{ fontStyle:'normal', color:'var(--accent)',
            textShadow:'0 0 30px oklch(70% 0.25 250 / 0.5)' }}>{accent}</em>}
        </h1>
        {lead && <p className="lead" style={{ marginTop:22, fontSize:17 }}>{lead}</p>}
      </div>
    </section>
  );
}

// Small CTA block for bottom of inner pages
function CTABlock() {
  return (
    <section className="section" style={{ padding:'80px 0', background:'var(--bg-1)', borderTop:'1px solid var(--rule)' }}>
      <div className="section-inner" style={{
        display:'flex', justifyContent:'space-between', alignItems:'center', gap:32, flexWrap:'wrap',
      }}>
        <div>
          <div className="display" style={{ fontSize:12, letterSpacing:2.5, color:'var(--accent-2)' }}>
            FREE · 60 MIN · 入会金¥0
          </div>
          <div style={{ fontSize:32, fontWeight:900, marginTop:10, letterSpacing:-1 }}>
            まずは、歌ってみる。
          </div>
          <div style={{ fontSize:14, color:'var(--ink-2)', marginTop:8 }}>
            手ぶらでOK。当日入会の義務はありません。
          </div>
        </div>
        <a href="trial.html" className="btn btn-primary" style={{ padding:'20px 28px' }}>
          <span style={{ fontSize:16, fontWeight:900 }}>無料体験レッスンを予約</span>
          <span className="arrow" style={{ fontSize:22 }}>→</span>
        </a>
      </div>
    </section>
  );
}

window.PageBanner = PageBanner;
window.CTABlock = CTABlock;