/* Top sections: Header, Hero, Overview bar, Privilege, Audience */

function Header() {
  return (
    <header className="site-header" id="top">
      <div className="bar">
        <BrandLock />
        <Cta small>予約の空き状況をみる</Cta>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="hero">
      <div className="hero-media"><img src={IMG.fv} alt=""/></div>

      <div className="fv-content">
        <p className="fv-tag">〜 1週間限定、完成見学会 〜</p>
        <h1 className="fv-title">木と暮らす無垢の家</h1>
        <div className="fv-info">
          {IMG.fvDate && <img src={IMG.fvDate} alt="6/13（土）〜21（日）" className="fv-date-img"/>}
        </div>
      </div>
    </section>
  );
}

function OverviewBar() {
  return (
    <div className="overview-bar">
      <p className="lead">
        完成したばかりの<br/>無垢の家を、見にきませんか。
      </p>
      <div className="meta-row">
        <dl>
          <dt>date</dt>
          <dd>2026年6月<br/>13日–21日 (土日)</dd>
        </dl>
        <dl>
          <dt>place</dt>
          <dd>岐阜県<br/>瑞浪市</dd>
        </dl>
        <dl>
          <dt>duration</dt>
          <dd>約60分</dd>
        </dl>
        <dl>
          <dt>fee</dt>
          <dd>無料</dd>
        </dl>
      </div>
    </div>
  );
}

function PrivilegeRibbon() {
  return (
    <section className="privilege">
      <div className="inner">
        <div className="card">
          <div className="stamp">
            <div>
              <small>Gift</small>
              <b style={{ fontSize: 13, display:'block', margin: '2px 0' }}>ご来場<br/>特典</b>
              <small>for you</small>
            </div>
          </div>
          <h2>
            アンケートにお答えいただいた方に、<br/>
            <span className="amount">Amazonギフト券 5,000円分</span><br/>
            をプレゼントいたします。
          </h2>
          <p className="note">ご来場くださった方、全員が対象です。<br/>ご家族揃ってのお越しも歓迎しております。</p>
        </div>
        <p className="privilege-foot">
          {EVENT.region}<br/>
          <span style={{ fontSize: 10 }}>{EVENT.notice}</span>
        </p>
      </div>
    </section>
  );
}

function Audience() {
  return (
    <section className="audience">
      <div className="inner">
        <div className="sec-head center">
          <span className="label-en">for you</span>
          <h2>こんな方に、<br/>ぜひ来ていただきたい。</h2>
        </div>
        <div className="audience-list">
          {AUDIENCE.map((a, i) => (
            <article key={i} className="audience-card">
              <div className="num-wrap">
                <span className="num">0{i+1}</span>
                <div className="icon">{Icons[a.icon]}</div>
              </div>
              <h3>{a.title}</h3>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AmazonBanner() {
  return (
    <div className="amazon-banner">
      <div className="amazon-banner-img">
        {IMG.amazon && <img src={IMG.amazon} alt="Amazonギフト券"/>}
      </div>
      <div className="amazon-banner-body">
        <p className="amazon-banner-label">当日アンケート回答で</p>
        <p className="amazon-banner-title">Amazonギフト券</p>
        <p className="amazon-banner-amount">
          <span className="amazon-banner-price">5,000</span><span className="amazon-banner-unit">円分</span> <span className="amazon-banner-present">プレゼント！</span>
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { Header, Hero, OverviewBar, PrivilegeRibbon, Audience, AmazonBanner });