/* Bottom sections: Event, Steps, Works, Voices, Message, FAQ, Company, Footer */

const { useState: useStateB } = React;

function EventDetails({ alt }) {
  return (
    <section className={`event${alt ? ' alt' : ''}`}>
      <div className="inner">
        <span className="label-en">Event Details</span>
        <h2>完成したばかりの<br/>無垢の家を、見にきませんか。</h2>
        {IMG.detail && <img src={IMG.detail} alt="見学会詳細" className="event-detail-img"/>}
        <dl className="tbl">
          <div><dt>開催日</dt><dd>{EVENT.dates}</dd></div>
          <div>
            <dt>時間</dt>
            <dd>
              <span>{EVENT.times.join(' / ')}</span>
              <div style={{ marginTop: 4, fontSize: 12, color: 'var(--sub)' }}>各回 1枠 2組まで</div>
            </dd>
          </div>
          <div><dt>所要時間</dt><dd>{EVENT.duration}</dd></div>
          <div><dt>会場</dt><dd>岐阜県瑞浪市<br/><small style={{ fontSize: 12, color: 'var(--sub)' }}>詳細はご予約後にご案内</small></dd></div>
          <div><dt>参加費</dt><dd>{EVENT.fee}</dd></div>
          <div><dt>予約</dt><dd>{EVENT.reservation}</dd></div>
        </dl>

        <div className="access">
          <h3>アクセス <span className="en">Access</span></h3>
          <ul>
            {EVENT.access.map((a, i) => <li key={i}>{a}</li>)}
          </ul>
        </div>

        {IMG.banner && (
          <div className="event-banner-wrap">
            <a href={window.JICOO_URL} target="_blank" rel="noopener" className="event-banner-link">
              <img src={IMG.banner} alt="" className="event-banner"/>
            </a>
            <p className="event-notice">
              ※愛知県・岐阜県内で建築を計画中の方にご参加いただいております。<br/>
              ※ご好評につき他社さまでご契約済みの方・同業他社さまのお申し込みはご遠慮いただいております。
            </p>
          </div>
        )}

        <div className="cta-row">
          <Cta size="lg">予約の空き状況をみる</Cta>
        </div>
      </div>
    </section>
  );
}

function Steps() {
  return (
    <section className="steps">
      <div className="inner">
        <div className="sec-head center">
          <span className="label-en">flow of the day</span>
          <h2>見学会当日の流れ</h2>
        </div>
        <div className="steps-list">
          {STEPS.map((s, i) => (
            <article key={i} className="step">
              <div className="step-circle">{s.n}</div>
              <div className="step-body">
                <span className="dur">{s.dur}</span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Works() {
  return (
    <section className="works">
      <div className="inner">
        <div className="sec-head">
          <span className="label-en">works</span>
          <h2>当社がこれまでお手伝いさせて<br/>いただいた住まい</h2>
          <p className="lead">木の種類も、間取りも、暮らし方も、一棟ずつ違います。</p>
        </div>
        <div className="works-grid">
          {WORKS.map((w, i) => (
            <article key={i} className="work">
              <div className="work-photo"><img src={w.image} alt={w.title}/></div>
              <div className="work-meta">
                <span>{w.loc}</span>
                <span className="sep"></span>
                <span>{w.type}</span>
              </div>
              <h3>{w.title.split('\n').map((line, j, arr) => (
                <React.Fragment key={j}>{line}{j < arr.length - 1 && <br/>}</React.Fragment>
              ))}</h3>
              <p>{w.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Voices() {
  const [activeYt, setActiveYt] = useStateB(null);

  return (
    <section className="voices">
      <div className="inner">
        <div className="sec-head">
          <span className="label-en">customer's voice</span>
          <h2>お施主様からの、<br/>ありのままの声。</h2>
        </div>
        <div className="voices-list">
          {VOICES.map((v, i) => (
            <div key={i} className="voice-card">
              {v.photo && (
                <div className="voice-photo">
                  <img src={v.photo} alt=""/>
                </div>
              )}
              <div className="voice-body">
                <div className="voice-meta">
                  <span className="voice-loc">{v.loc}</span>
                  <span className="voice-dash">—</span>
                  <span className="voice-name">{v.name}</span>
                </div>
                <blockquote className="voice-quote">{v.quote}</blockquote>
                <button
                  className="voice-yt-btn"
                  onClick={() => v.youtube && setActiveYt(v.youtube)}
                  style={!v.youtube ? { opacity: .45, cursor: 'default' } : {}}
                >
                  <span>インタビュー動画をみる</span>
                  <span className="yt-play-circle">▶</span>
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      {activeYt && (
        <div className="yt-modal" onClick={() => setActiveYt(null)}>
          <div className="yt-modal-inner" onClick={e => e.stopPropagation()}>
            <button className="yt-close" onClick={() => setActiveYt(null)}>✕</button>
            <div className="yt-frame">
              <iframe
                src={`${activeYt}?autoplay=1&rel=0`}
                title="インタビュー動画"
                allow="autoplay; encrypted-media; fullscreen"
                allowFullScreen
              />
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function Message() {
  return (
    <section className="message">
      <div className="inner">
        <span className="label-en">our message</span>
        <h2>私たちが、<br/>お待ちしています。</h2>
      </div>
      {IMG.message && (
        <img src={IMG.message} alt="" className="message-img"/>
      )}
      <div className="inner">
        <div className="body">
          <p>イトウ林産は、岐阜・郡上の小さな工務店です。少人数だからこそ、お客様一人ひとりの想いに、じっくり向き合えます。</p>
          <p>堅苦しいことは抜きにして、まずは「理想のいえ」について、ざっくばらんに、楽しくお話ができたらなあと思っています。</p>
          <p>木の素晴らしさを感じられる、いえになっています。ぜひ、見に来てください。</p>
        </div>
        <div className="signoff">— 株式会社イトウ林産 一同</div>
        <div className="btn-wrap">
          <Cta size="lg">予約の空き状況をみる</Cta>
        </div>
      </div>
    </section>
  );
}

function Faq() {
  const [open, setOpen] = useStateB(0);
  return (
    <section className="faq">
      <div className="inner">
        <div className="sec-head center">
          <span className="label-en">Q & A</span>
          <h2>よくあるご質問</h2>
        </div>
        <div className="faq-list">
          {FAQ.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="mark">Q.</span>
                <span>{f.q}</span>
                <span className="toggle">＋</span>
              </div>
              <div className="faq-a">
                <span className="mark">A.</span>
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Company() {
  return (
    <section className="company">
      <div className="inner">
        <span className="label-en">company</span>
        <h2>会社について</h2>
        <p className="lead">郡上八幡の山あいに本社を構え、製材から設計・施工まで。少数精鋭で、一棟ずつ丁寧に対応しています。</p>
        {IMG.company && (
          <img src={IMG.company} alt="" className="company-img"/>
        )}
        <table className="tbl">
          <tbody>
            {COMPANY.map(([k, v], i) => (
              <tr key={i}><th>{k}</th><td>{v}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      {IMG.footerLogo
        ? <img src={IMG.footerLogo} alt="株式会社イトウ林産" className="brand-logo"/>
        : <BrandLock white />
      }
      <div className="addr">
        〒 岐阜県郡上市八幡町那比291番地<br/>
        TEL 0575-63-2811 / FAX 0575-63-2208
      </div>
      {IMG.banner && (
        <a href={window.JICOO_URL} target="_blank" rel="noopener" className="footer-banner-link">
          <img src={IMG.banner} alt="" className="footer-banner"/>
        </a>
      )}
      <div className="foot-cta">
        <Cta ghost>予約の空き状況をみる</Cta>
      </div>
      <div className="copy">© 2026 ITO RINSAN, Inc. — 完成物件見学会特設ページ</div>
    </footer>
  );
}

Object.assign(window, { EventDetails, Steps, Works, Voices, Message, Faq, Company, Footer });