// Event LP — Overview (開催概要)

const INFO = [
  { mi: "calendar_month", label: "日時", value: <span>2026年6月4日（木）<br/>10:00 〜 12:00</span> },
  { mi: "location_on", label: "場所", value: <span>北海道・札幌オフィス</span> },
  { mi: "group", label: "定員", value: <span>4名（管理人のほかに）<span className="tag">募集中</span></span> },
  { mi: "payments", label: "参加費", value: <span className="free">無料</span> },
  { mi: "backpack", label: "持ち物", value: <span>PCなど作業に使うツール、<br/>そして楽しむ気持ち</span> },
  { mi: "waving_hand", label: "主催", value: <span>しるこ</span> },
];

const Overview = () => (
  <section className="section section--dots" id="info">
    <div className="section-inner">
      <SectionHead eyebrow="EVENT INFO" title="開催概要"
        sub="当日の詳細です。気になることがあれば、お気軽にお問い合わせください。" />
      <div className="info-wrap">
        <div className="info-card card">
          {INFO.map((r, i) => (
            <div className="info-row" key={i}>
              <div className="label"><span className="mi">{r.mi}</span>{r.label}</div>
              <div className="value">{r.value}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Overview, INFO });