// LINE-only contact section for moja_run run

const LINE_URL = "https://lin.ee/hm4bJdp";

const Booking = () => (
  <section id="booking" className="line-contact">
    <div className="wrap">
      <div className="section-head" style={{justifyContent:'center', textAlign:'center', flexDirection:'column', alignItems:'center'}}>
        <div className="eyebrow en" style={{fontSize:12, letterSpacing:'0.4em', color:'var(--pink-500)', marginBottom:8}}>CONTACT / RESERVATION</div>
        <h2>ご予約・お問い合わせ</h2>
        <p style={{margin:'12px 0 0', fontSize:14, color:'var(--muted)'}}>
          ご連絡はすべて公式 LINE にて承っております
        </p>
      </div>

      <div className="line-card">
        <div className="line-notice">
          <div className="ico">!</div>
          <div className="body">
            <strong>※ 現在、ご新規様の受付は停止しております</strong>
            既存のお客様のご予約・ご相談は引き続き LINE にて承っております。<br/>
            再開の際には Instagram および LINE にてお知らせいたします。
          </div>
        </div>

        <p className="lead-text">— 公式 LINE のご案内 —</p>
        <p className="big">
          ご予約・ご相談は<br/>
          <span className="accent">LINE</span> にてどうぞ
        </p>

        <a className="line-btn" href={LINE_URL} target="_blank" rel="noopener noreferrer">
          <span className="line-icon">L</span>
          LINE で友だち追加してご連絡
        </a>

        <div className="line-id">moja_run run · OFFICIAL LINE</div>

        <div style={{marginTop:36, padding:'22px 28px', background:'var(--pink-50)', border:'1px dashed var(--pink-300)', borderRadius:16, fontSize:13, lineHeight:1.8, color:'var(--ink-2)', textAlign:'left'}}>
          ※ 施術中、お返事にお時間がかかる場合がございます。当日中にお返事致しますので、しばらくお待ちください。<br/>
          ※ 日時のご変更、遅刻、キャンセルの場合は必ずご連絡ください。
        </div>
      </div>
    </div>
  </section>
);

window.Booking = Booking;
window.LINE_URL = LINE_URL;