/* global React */
function Overview() {
  const rows = [
    { k: "状況", v: "準備中" },
    { k: "回数", v: "全6回講座" },
    { k: "時間", v: "11:00 — 17:30" },
    { k: "会場", v: "Attina 恵比寿店", sub: "※リアル参加推奨" },
  ];
  return (
    <section id="overview" className="access">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">08</div>
            <div className="eyebrow">OVERVIEW</div>
            <div className="hr"></div>
            <div className="kicker-jp">開催概要</div>
          </div>
          <div>
            <div className="section-title">
              恵比寿の教室で、<br/>
              <em>6回の実践</em>。
            </div>
          </div>
        </div>

        <div className="access-grid">
          <div className="access-map">
            <iframe
              src="https://www.google.com/maps?q=%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%B8%8B%E8%B0%B7%E5%8C%BA%E6%81%B5%E6%AF%94%E5%AF%BF1-14-8&output=embed"
              width="100%"
              height="100%"
              style={{border: 0, display: "block"}}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Attina 恵比寿店 — 東京都渋谷区恵比寿1-14-8 201号室">
            </iframe>
          </div>
          <div className="access-info">
            <h3>開催概要</h3>
            {rows.map((r, i) => (
              <div className="row" key={i}>
                <div className="k">{r.k}</div>
                <div className="v">{r.v}{r.sub && <small>{r.sub}</small>}</div>
              </div>
            ))}
            <div style={{marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap"}}>
              <a className="btn btn-primary" href="https://www.youtube.com/watch?v=ix1-JqAXvCE" target="_blank" rel="noopener">無料説明を見る <span className="arrow"></span></a>
              <a className="btn btn-ghost" href="https://lin.ee/7w8vxiJ" target="_blank" rel="noopener">申込みはこちら <span className="arrow"></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Overview = Overview;