/* Mid sections: Guides, Features, Highlights, BuildInfo, Gallery, About */

function Guides() {
  return (
    <section className="guides">
      <div className="inner">
        <div className="sec-head">
          <span className="label-en">your guides</span>
          <h2>見学ついでに<br/>住宅に関するご相談も<br/>お気軽にどうぞ</h2>
        </div>
        <div className="guides-list">
          {GUIDES.map((g, i) => (
            <article key={i} className={`guide${g.lead ? ' lead' : ''}`}>
              <div className="guide-photo"><img src={g.photo} alt={g.name}/></div>
              <div className="guide-body">
                {g.lead && <span className="guide-badge">一級建築士が直接ご案内</span>}
                <span className="guide-role-ja">{g.roleJa}</span>
                <div className="guide-name">
                  <ruby>{g.name}<rt className="guide-kana">{g.kana}</rt></ruby>
                </div>
                <p className="guide-comment">{g.comment}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}


function Highlights() {
  return (
    <section className="highlights">
      <div className="inner">
        <div className="sec-head">
          <span className="label-en">highlights</span>
          <h2>この完成物件の見どころ</h2>
        </div>
        <div className="hl-list">
          {HIGHLIGHTS.map((h, i) => (
            <div key={i} className="hl-item">
              <div className="hl-media">
                <img src={h.image} alt=""/>
              </div>
              <div className="hl-body">
                <span className="num">0{i+1} / 0{HIGHLIGHTS.length}</span>
                <h3>{h.title}</h3>
                <p>{h.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BuildInfo() {
  return (
    <section className="buildinfo">
      <div className="inner">
        <div className="h-block">
          <span className="label-en">building data</span>
          <h2>建物情報</h2>
        </div>
        <table className="tbl">
          <tbody>
            {BUILDINFO.map(([k, v], i) => (
              <tr key={i}><th>{k}</th><td>{v}</td></tr>
            ))}
          </tbody>
        </table>
        <p className="foot-note">※詳細な間取り図は、ご予約の方に当日会場でご案内いたします。</p>
      </div>
      {IMG['building-pers'] && (
        <img src={IMG['building-pers']} alt="建物パース" className="buildinfo-pers"/>
      )}
    </section>
  );
}

function Gallery() {
  return (
    <section className="gallery">
      <div className="inner">
        <div className="sec-head">
          <span className="label-en">gallery</span>
          <h2>木と、手仕事の、空気感。</h2>
        </div>

        {IMG.gallery01 && (
          <figure className="gallery-full">
            <img src={IMG.gallery01} alt=""/>
          </figure>
        )}

        {IMG.gallery02 && (
          <figure className="gallery-full">
            <img src={IMG.gallery02} alt=""/>
          </figure>
        )}

        {(IMG.gallery03_1 || IMG.gallery03_2 || IMG.gallery03_3) && (
          <div className="gallery-bento">
            <div className="g-bento-item g-bento-tl">
              {IMG.gallery03_1 && <img src={IMG.gallery03_1} alt=""/>}
            </div>
            <div className="g-bento-item g-bento-bl">
              {IMG.gallery03_2 && <img src={IMG.gallery03_2} alt=""/>}
            </div>
            <div className="g-bento-item g-bento-r">
              {IMG.gallery03_3 && <img src={IMG.gallery03_3} alt=""/>}
            </div>
          </div>
        )}

        {(IMG.gallery04_1 || IMG.gallery04_2 || IMG.gallery04_3) && (
          <div className="gallery-bento is-reverse">
            <div className="g-bento-item g-bento-tl">
              {IMG.gallery04_2 && <img src={IMG.gallery04_2} alt=""/>}
            </div>
            <div className="g-bento-item g-bento-bl">
              {IMG.gallery04_3 && <img src={IMG.gallery04_3} alt=""/>}
            </div>
            <div className="g-bento-item g-bento-r">
              {IMG.gallery04_1 && <img src={IMG.gallery04_1} alt=""/>}
            </div>
          </div>
        )}

        {IMG.gallery05 && (
          <figure className="gallery-full">
            <img src={IMG.gallery05} alt=""/>
          </figure>
        )}
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="about">
      <div className="inner">
        {(IMG.about01 || IMG.intro1) && (
          <div className="about-photo about-photo-top">
            <img src={IMG.about01 || IMG.intro1} alt="郡上の工房にて"/>
          </div>
        )}
        <div className="about-text">
          <span className="label-en">about us</span>
          <h2>木と向き合って、<span className="year">44</span>年。</h2>
          <div className="body">
            <p>1982年より、郡上八幡で木を扱ってきた私たちは、やがてお客様から「あなたたちの木で家を建ててほしい」と言われるようになりました。</p>
            <p>木のことを、誰よりも知っている。だから、本物の無垢材を、本物の使い方で建てられる。</p>
            <p>代表・伊藤昌記は、製材業の家に生まれ育った一級建築士。木の良し悪しを誰よりも知る目で、一棟一棟を設計しています。</p>
          </div>
        </div>
        {IMG.about02 && (
          <div className="about-photo about-photo-bot">
            <img src={IMG.about02} alt=""/>
          </div>
        )}
      </div>
    </section>
  );
}

function Recommend() {
  const items = [
    { src: IMG.recommend01, text: "自然素材・無垢材の家を、\n本気で検討中の方" },
    { src: IMG.recommend02, text: "大手ハウスメーカーではなく、\n作る人の顔が見える家づくりをしたい方" },
    { src: IMG.recommend03, text: "愛知県・岐阜県内で、\n家づくりを検討されている方" },
  ].filter(item => item.src);
  if (!items.length) return null;
  return (
    <section className="recommend">
      <div className="inner">
        <div className="sec-head center">
          <span className="label-en">Recommend</span>
          <h2>こんな方にオススメの<br/>見学会です</h2>
        </div>
        <div className="recommend-list">
          {items.map((item, i) => (
            <div key={i} className="recommend-item">
              <div className="recommend-header">
                <span className="recommend-num">0{i + 1}</span>
                <p className="recommend-text">
                  {item.text.split('\n').map((line, j) => (
                    <span key={j} className="recommend-text-line">{line}</span>
                  ))}
                </p>
              </div>
              <div className="recommend-img-wrap">
                <img src={item.src} alt=""/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TakeYourTime() {
  const items = [
    {
      image: IMG.take01,
      title: "設計者に、直接質問できる",
      body: "一級建築士・伊藤が、設計の意図や素材選び、間取りの理由まで、直接お話しします。",
    },
    {
      image: IMG.take02,
      title: "見学がメイン。\n営業トークはありません。",
      body: "長時間の営業トークは一切ありません。見学後はお礼メールが1通だけ届きます。",
    },
    {
      image: IMG.take03,
      title: "完全予約制だから、ゆったり",
      body: "1枠2組まで。じっくり、ご家族のペースで見ていただけます。",
    },
  ];
  return (
    <section className="take-time">
      <div className="inner">
        <div className="sec-head center">
          <span className="label-en">Take your time.</span>
          <h2>じっくり見学できて、<br/>ゆったりと相談できます。</h2>
        </div>
        <div className="take-time-list">
          {items.map((item, i) => (
            <article key={i} className="take-time-card">
              {item.image && (
                <div className="take-time-img">
                  <img src={item.image} alt=""/>
                </div>
              )}
              <div className="take-time-body">
                <span className="take-time-num">0{i + 1}</span>
                <h3 className="take-time-title">
                  {item.title.split('\n').map((line, j) => (
                    <span key={j} className="take-time-title-line">{line}</span>
                  ))}
                </h3>
                <p className="take-time-desc">{item.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Guides, Highlights, BuildInfo, Gallery, About, Recommend, TakeYourTime });