/* global React */

const CTA_LINE_URL = "https://line.me/R/ti/p/@398wplue?from=page&liff.referrer=https%3A%2F%2Freplanning-fukuoka.studio.site%2F&searchId=398wplue";

function ContactCta() {
  return (
    <section className="section cta-section" id="contact">
      <div className="container">
        <div className="section-head">
          <div><div className="idx">09 / 09 &nbsp; CONTACT</div></div>
          <div>
            <h2>お気軽に、<br />お問い合わせください。</h2>
            <p className="lede">
              お電話・LINE、どちらでも。<br />
              ご相談のみ、他社見積もりのチェックのみ、もちろん無料で承ります。
            </p>
          </div>
        </div>

        <div className="cta-grid">
          <div className="cta-tel">
            <div className="eyebrow">A · CALL</div>
            <div className="cta-tel-label">お電話でのご相談</div>
            <a href="tel:09077781111" className="cta-tel-num mono heading">090-7778-1111</a>
            <div className="cta-tel-hours">
              <div><span className="mono">受付</span> 8:00 〜 22:00</div>
              <div><span className="mono">定休</span> 年中無休</div>
              <div><span className="mono">深夜</span> 要相談（+30%）</div>
            </div>
            <div className="cta-tel-badges">
              <span className="cta-chip mono"><span className="pulse-dot" /> 本日 受付中</span>
            </div>
          </div>

          <div className="cta-tel">
            <div className="eyebrow">B · LINE</div>
            <div className="cta-tel-label">LINEでのご相談</div>
            <a href={CTA_LINE_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{marginTop: 16, marginBottom: 20}}>
              LINEで友だち追加して相談 <span aria-hidden="true">↗</span>
            </a>
            <div className="cta-tel-hours">
              <div><span className="mono">写真</span> 送るだけで概算お見積り</div>
              <div><span className="mono">深夜</span> メッセージは24時間OK</div>
              <div><span className="mono">返信</span> 営業時間内に順次</div>
            </div>
            <div className="cta-tel-badges">
              <span className="cta-chip mono">@398wplue</span>
            </div>
          </div>
        </div>

        <div className="cta-final">
          <p className="cta-final-quote heading">
            「呼んで、よかった」と<br />
            静かに言っていただける会社で、ありたい。
          </p>
          <p className="cta-final-sign mono">— RE PLANNING</p>
        </div>
      </div>
    </section>
  );
}

window.ContactCta = ContactCta;