/* Aifit — mid parts: JourneySection, SupportSection */
(function () {
  const Icon = window.Icon;

  function JourneySection({ cards, accents, onSelect }) {
    return (
      <section className="journey" id="journey">
        <div className="wrap journey-wrap">
          <div className="journey-intro reveal">
            <span className="eyebrow">Aifit Life Journey</span>
            <h2 className="journey-title">人生の節目に、<br />いつでも寄り添う<br />存在でありたい。</h2>
            <p className="journey-lead">迷いや不安があるとき、まずは Aifit にご相談ください。経験豊富なスタッフが、最適なご提案をいたします。</p>
            <a className="btn btn--ghost" href="merit.html">Aifitの想いを見る<Icon name="arrow" strokeWidth={1.7} /></a>
          </div>
          <div className="journey-cards">
            {cards.map((c, i) => (
              <a key={c.key} href={c.href || "#platform"} className="jcard reveal" style={{ transitionDelay: i * 0.08 + "s", "--node": accents[c.key] }}>
                <div className="jcard-media">
                  <image-slot id={c.slot} src={c.photo} shape="rect" placeholder={c.title + "の写真"} style={{ width: "100%", height: "100%" }}></image-slot>
                  <span className="jcard-media-scrim" aria-hidden="true"></span>
                  <span className="jcard-tag">{c.tag}</span>
                  <span className="jcard-index" aria-hidden="true">0{i + 1}</span>
                </div>
                <div className="jcard-body">
                  <h3 className="jcard-title">{c.title}</h3>
                  <p className="jcard-desc">{c.desc}</p>
                  <span className="jcard-more">詳しく見る<span className="jcard-more-arr"><Icon name="arrow" strokeWidth={1.8} /></span></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function SupportSection({ cards, halls, contact }) {
    const [hall, setHall] = React.useState("");
    const go = () => { if (hall) window.location.href = hall; };
    return (
      <section className="support" id="support">
        <div className="wrap support-wrap">
          <div className="support-grid">
            <div className="support-intro reveal">
              <h2 className="support-title">Aifitの<br />安心サポート</h2>
              <p className="support-sub">すべての不安を、<br />ひとつの安心へ。</p>
              <a className="support-more" href="merit.html">詳しく見る<Icon name="arrow" strokeWidth={1.8} /></a>
            </div>
            {cards.map((c, i) => (
              <a key={i} className="scard reveal" style={{ transitionDelay: i * 0.06 + "s" }} href={c.href}
                 target={/^https?:/.test(c.href || "") ? "_blank" : undefined}
                 rel={/^https?:/.test(c.href || "") ? "noopener" : undefined}>
                <span className="scard-ic"><Icon name={c.icon} strokeWidth={1.5} /></span>
                <h3 className="scard-title">{c.title}</h3>
                <p className="scard-desc">{c.desc}</p>
                <span className="scard-arr"><Icon name="arrow" strokeWidth={1.8} /></span>
              </a>
            ))}
          </div>

          <div className="venue reveal">
            <div className="venue-media">
              <image-slot id="ph-venue" src="img/hall-yasuragi.webp" shape="rect" placeholder="会館の写真" style={{ width: "100%", height: "100%" }}></image-slot>
            </div>
            <div className="venue-body">
              <h3 className="venue-title">会場を探す</h3>
              <p className="venue-sub">東広島・呉・三原の会場から、お近くをお選びいただけます。</p>
              <div className="venue-form">
                <div className="venue-select">
                  <select aria-label="会場を選択" value={hall} onChange={(e) => setHall(e.target.value)}>
                    <option value="">会場を選ぶ</option>
                    {halls.map((h, i) => <option key={i} value={h.href}>{h.name}</option>)}
                  </select>
                  <Icon name="arrow" className="venue-caret" strokeWidth={1.8} />
                </div>
                <button className="btn btn--primary venue-btn" onClick={go} disabled={!hall}>探す</button>
              </div>
              <a className="venue-all" href="access.html">会場一覧・アクセスを見る<Icon name="arrow" strokeWidth={1.8} /></a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { JourneySection, SupportSection });
})();