/* global React */
function Contact() {
  return (
    <section id="contact" className="contact">
      <div className="container inner">
        <div className="section-head">
          <div className="label-col">
            <div className="num" style={{ color: "var(--gold-soft)" }}>11</div>
            <div className="eyebrow">CONTACT</div>
            <div className="hr" style={{ background: "var(--gold-soft)" }}></div>
            <div className="kicker-jp" style={{ color: "var(--muted-2)" }}>最終CTA</div>
          </div>
          <div>
            <div className="section-title">
              まずは<em style={{ color: "var(--gold-soft)" }}>無料相談</em>から。
            </div>
          </div>
        </div>

        <div style={{ maxWidth: 820, margin: "60px auto 0", textAlign: "center" }}>
          <p style={{ fontFamily: "var(--serif)", fontSize: "clamp(17px, 1.6vw, 22px)", lineHeight: 2.2, letterSpacing: "0.06em", color: "rgba(250,247,242,0.92)" }}>
            この仕組みを<em style={{ fontStyle: "normal", color: "var(--gold-soft)", borderBottom: "1px solid var(--gold)" }}>知るだけ</em>でも、<br />
            サロン経営の見え方が変わります。
          </p>

          <div style={{ marginTop: 56, display: "flex", gap: 20, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="#" className="btn btn-primary" style={{ background: "var(--gold)", color: "var(--ink)", borderColor: "var(--gold)", padding: "20px 36px", fontSize: 14 }}>
              ▶ LINE登録して相談する <span className="arrow"></span>
            </a>
            <a href="#" className="btn btn-ghost" style={{ color: "var(--ivory)", borderColor: "rgba(201,168,103,0.5)", padding: "20px 36px", fontSize: 14 }}>
              今すぐ申し込む <span className="arrow"></span>
            </a>
          </div>

          <div style={{ marginTop: 80, paddingTop: 40, borderTop: "1px solid rgba(201,168,103,0.2)", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 320px))", gap: 24, textAlign: "left", justifyContent: "center" }}>
            <a className="method" href="https://lin.ee/7w8vxiJ" target="_blank" rel="noopener" style={{ background: "transparent", border: "1px solid rgba(201,168,103,0.22)", padding: "20px 24px", display: "block", textDecoration: "none" }}>
              <div className="k">LINE</div>
              <div className="v" style={{ fontSize: "15px" }}>https://lin.ee/7w8vxiJ</div>
            </a>
            <a className="method" href="mailto:info@youforio.com" style={{ background: "transparent", border: "1px solid rgba(201,168,103,0.22)", padding: "20px 24px", display: "block", textDecoration: "none" }}>
              <div className="k">Email</div>
              <div className="v" style={{ fontSize: "15px" }}>info@youforio.com</div>
            </a>
          </div>
        </div>
      </div>
    </section>);

}
window.Contact = Contact;