/* Section 10 — Final CTA */

const FinalCTA = () => (
  <section className="final-cta" id="final" data-screen-label="10 Final CTA">
    <div className="container">
      <Eyebrow style={{color:'rgba(255,255,255,.75)'}}>CONTACT</Eyebrow>
      <h2>社長のストレス、<br/>一度ぜんぶ話してみませんか。</h2>
      <p>30分のオンライン無料相談で、御社の労務の現状と、使える助成金の可能性、そして「ここを変えるといい」をお伝えします。無理な営業は一切ありません。</p>
      <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.16em', color:'rgba(255,255,255,.7)', margin:'4px 0 12px'}}>無料相談で分かること</div>
      <ul style={{listStyle:'none', padding:0, margin:'0 auto 28px', display:'flex', flexWrap:'wrap', gap:'10px 20px', justifyContent:'center', maxWidth:780}}>
        {['使える助成金の可能性','いまの社労士を替えるべきか','freee運用の詰まり','最初に着手すべき人事課題'].map((t,i)=>(
          <li key={i} style={{fontSize:13.5, color:'rgba(255,255,255,.9)', display:'inline-flex', alignItems:'center', gap:7}}><span style={{color:'var(--accent)', fontWeight:800}}>✓</span>{t}</li>
        ))}
      </ul>
      <div className="final-cta__ctas">
        <a className="btn btn--primary btn--lg" href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">カレンダーで予約 <Arrow/></a>
        <a className="btn btn--white btn--lg" href="contact.html">フォームから相談 <Arrow/></a>
      </div>
      <div className="final-cta__phone">
        050-5784-3633
        <small>お電話でのご相談 / 平日 9:00–18:00</small>
      </div>
    </div>
  </section>
);

window.FinalCTA = FinalCTA;