// Event LP — Final CTA (申し込み) + Footer

const FinalCta = () => (
  <section className="section final-cta-section" id="join">
    <div className="fc-bg">
      <img src="assets/hero-fv.jpg" alt="" />
      <div className="fc-scrim"></div>
    </div>
    <div className="section-inner final-cta">
      <span className="eyebrow">ご参加お待ちしています</span>
      <h2>一緒に、作業しませんか？</h2>
      <p>PCと「楽しむ気持ち」を持って、お気軽にどうぞ。<br/>参加費は無料、定員は4名です。<br/>お申し込み・ご質問はリベシティのルームから。</p>
      <div className="ctas">
        <Button variant="primary" href={JOIN_URL} target="_blank">参加する（無料）</Button>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="lp-footer">
    <div className="f-logo">
      <img src="assets/logo-ig-sm.jpg" alt="" style={{ width: 32, height: 32, borderRadius: "50%", objectFit: "cover" }} />
      インスタ作業オフ会
    </div>
    <div className="f-links">
      {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
      <a href={JOIN_URL} target="_blank" rel="noopener noreferrer">参加する</a>
    </div>
    <div className="copy">主催：しるこ ・ © 2026 INSTA WORK MEETUP · Sapporo</div>
  </footer>
);

Object.assign(window, { FinalCta, Footer });