// Event LP — Hero + About + Audience

const Hero = () => (
  <section className="hero" id="top">
    <div className="hero-bg">
      <img src="assets/hero-fv-ig.jpg" alt="Instagram グラスアイコン" />
      <div className="hero-scrim"></div>
    </div>
    <div className="hero-content">
      <span className="eyebrow eyebrow--cap">INSTA WORK MEETUP @ 札幌</span>
      <h1>楽しく、学んで、<br/>つながる作業オフ会</h1>
      <p>最近インスタを始めたばかり。<br/>ひとりだとついサボってしまう…。<br/>そんな方こそ、おいしいコーヒー片手に一緒に作業しませんか？<br/>職種・経験は問いません。</p>
      <div className="hero-meta">
        <span className="meta-chip"><span className="mi">calendar_month</span>6/4(木) 10:00–12:00</span>
        <span className="meta-chip"><span className="mi">location_on</span>札幌オフィス</span>
        <span className="meta-chip"><span className="mi">group</span>定員4名</span>
        <span className="meta-chip"><span className="mi">payments</span>参加費無料</span>
      </div>
      <div className="hero-buttons">
        <Button variant="primary" href="#join">参加する</Button>
        <Button variant="secondary" href="#info">開催詳細を見る</Button>
      </div>
    </div>
  </section>
);

const About = () => (
  <section className="section" id="about">
    <div className="section-inner about">
      <span className="eyebrow">ABOUT</span>
      <h2 className="lp-h2" style={{ margin: 0 }}>作業オフ会、やります！</h2>
      <span className="lead">ひとりじゃ続かない、を「みんなで」に。</span>
      <p>インスタを使って発信している方なら、職種も経験も問いません。<br/>おしゃべりしながら、もくもく作業しながら、ゆるっと集まる2時間。<br/>同じように頑張っている人とつながれる場所です。</p>
    </div>
  </section>
);

const AUDIENCE = [
  "インスタ、なかなか続かない…",
  "同じように頑張ってる人と繋がりたい",
  "作業仲間がほしい",
  "ひとりだと、ついサボりがち（笑）",
];

const Audience = () => (
  <section className="section section--alt" id="audience">
    <div className="section-inner">
      <SectionHead eyebrow="FOR YOU" title="こんな方におすすめ"
        sub="ひとつでも当てはまったら、ぜひ気軽に遊びにきてください。" />
      <div className="problem-list">
        {AUDIENCE.map((t, i) => (
          <div className="check-item card" key={i}>
            <CheckIcon />
            <span className="ct">{t}</span>
          </div>
        ))}
      </div>
      <p className="audience-note">そんな方は、ぜひ一緒に作業しましょー ☺️</p>
    </div>
  </section>
);

Object.assign(window, { Hero, About, Audience });