/* Aifit — content-rich sections from the real chat platform:
   TrustStrip, ChatSection, AmbassadorBand, NotesSection, MembershipSection */
(function () {
  const Icon = window.Icon;

  /* ---------- trust stats strip ---------- */
  function TrustStrip({ items }) {
    return (
      <section className="trust" aria-label="実績">
        <div className="wrap trust-inner">
          <p className="trust-lead reveal">諸事情対応専門の葬儀社として、<br className="br-sp" />東広島の「もしも」に寄り添ってきました。</p>
          <div className="trust-stats">
            {items.map((s, i) => (
              <div key={i} className="tstat reveal" style={{ transitionDelay: i * 0.07 + "s" }}>
                <span className="tstat-num">{s.num}<i>{s.unit}</i></span>
                <span className="tstat-label">{s.label}</span>
              </div>
            ))}
          </div>
        </div>
        <p className="trust-note wrap">※ 東広島ご依頼件数 第1位＝一般社団法人 日本儀礼文化調査協会調べ／<a href="reason-no1.html">表示の根拠を見る</a></p>
        <a className="wrap watch-ribbon reveal" href="company.html#mimamori">
          <img src="img/company/share-yell.svg" alt="東広島市 見守りサポーター シアエール 公式ロゴ" />
          <div className="watch-ribbon-tx">
            <strong>仕事中も、帰り道も。この街で暮らす皆様の安心を守るパートナーへ。</strong>
            <span>当社の社員が東広島市の「見守りサポーター」に登録（2026年5月）。葬儀の前後だけでなく、日頃から地域の「もしも」に寄り添う葬儀社です。</span>
            <em className="watch-ribbon-eyebrow">東広島市 見守りサポーター 登録事業者</em>
            <em className="watch-ribbon-kicker">CSR活動：当社の社会的責任として</em>
          </div>
          <svg className="watch-ribbon-chev" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </a>
      </section>
    );
  }

  /* ---------- AI chat section ---------- */
  function ChatSection({ worries, modes, badges, questions, contact }) {
    return (
      <section className="chat" id="chat">
        <div className="wrap">
          <div className="chat-head reveal">
            <span className="eyebrow">Aifit Life Design Chat</span>
            <h2 className="chat-title">今どきの家族事情に寄り添う、<br /><em>無理のない葬儀と終活</em>を。</h2>
            <p className="chat-lead">
              ごく少人数のお見送り、お寺とのつながりがない方、マンション暮らし、高齢の一人暮らし、核家族など。<strong>Claude AI を搭載した事前相談チャットを独自開発</strong>。あなたの諸事情に合わせて、24時間いつでもお答えします。
            </p>
          </div>

          {/* worries */}
          <div className="worries">
            {worries.map((w, i) => (
              <article key={i} className="worry reveal" style={{ transitionDelay: i * 0.07 + "s" }}>
                <span className="worry-ic"><Icon name={w.icon} strokeWidth={1.5} /></span>
                <h3 className="worry-title">{w.title}</h3>
                <p className="worry-desc">{w.desc}</p>
              </article>
            ))}
          </div>

          {/* consultation modes — mirrors the real /chat/ start screen */}
          <div className="consult reveal">
            <div className="consult-head">
              <span className="eyebrow">Consultation Mode</span>
              <h3 className="consult-title">相談の仕方を、選べます。</h3>
              <p className="consult-sub">24時間受付中　/　登録不要ですぐ開始　/　2つの相談モードから選べます</p>
            </div>
            <div className="consult-grid">
              {modes.map((m) => (
                <article key={m.key} className={"cmode cmode--" + m.theme}>
                  <span className="cmode-tag">{m.en}</span>
                  {m.theme === "boxing" ? (
                    <div className="cmode-ring">
                      <span className="cmode-rope" aria-hidden="true"></span>
                      <span className="cmode-avatar">
                        <image-slot id={m.slot} src={m.photo} shape="circle" placeholder="竹原慎二さん" style={{ width: "100%", height: "100%" }}></image-slot>
                      </span>
                      <span className="cmode-telop">{m.telop}</span>
                      <span className="cmode-rope" aria-hidden="true"></span>
                    </div>
                  ) : (
                    <span className="cmode-ic"><Icon name={m.icon} strokeWidth={1.5} /></span>
                  )}
                  <h4 className="cmode-name">{m.name}</h4>
                  <p className="cmode-tagline">{m.tagline}</p>
                  <p className="cmode-desc">{m.desc}</p>
                  {m.person && <p className="cmode-person"><b>{m.person}</b><span>{m.note}</span></p>}
                  <a className="cmode-cta" href={m.href} target="_blank" rel="noopener">{m.cta}<Icon name="arrow" strokeWidth={1.9} /></a>
                </article>
              ))}
            </div>
            <div className="consult-badges">
              {badges.map((b, i) => (
                <span key={i} className="cbadge"><Icon name="check" strokeWidth={2.2} />{b}</span>
              ))}
            </div>
          </div>

          {/* quick entry — 2-minute ending note */}
          <a className="consult-quick reveal" href="https://saiki-sousai.com/chat/quick-note" target="_blank" rel="noopener">
            <span className="cq-note"><Icon name="check" strokeWidth={2.2} /></span>
            <span className="cq-tx"><b>まずは2分で、エンディングノート</b><em>個人情報の記入は不要。15問（約2分）から、いまの備えを会話のように確かめられます。</em></span>
            <span className="cq-go">2分ではじめる<Icon name="arrow" strokeWidth={1.9} /></span>
          </a>

          {/* sample questions */}
          <div className="chat-q reveal">
            <p className="chat-q-cap">聞きづらいことから、そのままどうぞ</p>
            <div className="chat-q-list">
              {questions.map((q, i) => (
                <a key={i} className="qchip" href={q.url} target="_blank" rel="noopener">{q.q}<Icon name="arrow" strokeWidth={1.8} /></a>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- ambassador band ---------- */
  function AmbassadorBand({ data }) {
    return (
      <section className="amb" id="ambassador">
        <div className="wrap amb-grid">
          <div className="amb-photo reveal">
            <image-slot id={data.slot} src={data.photo} shape="rect" placeholder="竹原慎二さんの写真"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}></image-slot>
            <span className="amb-catch"><Icon name="boxing" strokeWidth={1.6} />{data.catch}</span>
          </div>
          <div className="amb-body reveal">
            <span className="eyebrow">Aifit Ambassador</span>
            <h2 className="amb-name">{data.name}<small>{data.title}</small></h2>
            <p className="amb-text">{data.body}</p>
            <div className="amb-cta">
              <a className="btn btn--primary" href={data.chatHref} target="_blank" rel="noopener"><Icon name="boxing" strokeWidth={1.7} />竹原慎二モードで相談</a>
              <a className="btn btn--ghost" href={data.whyHref} target="_blank" rel="noopener">なぜ竹原慎二？<Icon name="arrow" strokeWidth={1.7} /></a>
              <a className="btn" href="https://line.me/R/ti/p/%40zmq9093v" target="_blank" rel="noopener" style={{ background: "#06C755", color: "#fff", borderColor: "#06C755" }}><Icon name="line" strokeWidth={1.6} />公式LINEで相談</a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- ending notes ---------- */
  function NotesSection({ notes }) {
    return (
      <section className="notes" id="notes">
        <div className="wrap">
          <div className="notes-head reveal">
            <span className="eyebrow">Ending Note</span>
            <h2 className="notes-title">今の気持ちに合わせて、<br className="br-sp" />残し方を選べます。</h2>
            <p className="notes-lead">いきなり重く考えなくても大丈夫。短く始める入口と、しっかり記録する入口の両方を用意しています。</p>
          </div>
          <div className="notes-grid">
            {notes.map((n, i) => (
              <article key={i} className="ncard reveal" style={{ transitionDelay: i * 0.08 + "s" }}>
                <span className="ncard-badge">{n.badge}</span>
                <h3 className="ncard-title">{n.title}</h3>
                <p className="ncard-desc">{n.desc}</p>
                <a className="ncard-cta" href={n.href} target="_blank" rel="noopener">{n.cta}<Icon name="arrow" strokeWidth={1.8} /></a>
              </article>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- membership ---------- */
  function MembershipSection({ data }) {
    return (
      <section className="member" id="membership">
        <div className="wrap member-grid">
          <div className="member-intro reveal">
            <span className="eyebrow">Membership</span>
            <h2 className="member-title">{data.lead}</h2>
            <p className="member-name">{data.name}</p>
            <p className="member-desc">{data.desc}</p>
            <div className="member-tags">
              <span>入会金 1万円のみ</span><span>積立なし</span><span>解約手数料なし</span>
            </div>
          </div>
          <div className="member-benefits">
            <article className="mpoint reveal">
              <div className="mpoint-figure">
                <img src="img/mpoint-consult.jpg" alt="ご家族で葬儀費用のお見積もりを相談する様子" loading="lazy" />
                <span className="mpoint-badge">必読</span>
                <p className="mpoint-alert"><span>この情報を知らずに</span><span><em>後悔</em>するご家庭が<em>多数</em></span></p>
                <h3 className="mpoint-title">葬儀社選びは、<em>総額</em>で検討を！</h3>
              </div>
              <div className="mpoint-body">
                <p className="mpoint-desc">昔、親御さまが冠婚葬祭の<b>互助会に入ってしまっている</b>方は、<u>絶対にお見積もりをおすすめします。</u>積立金や解約手数料まで含めた“本当の総額”で比べると、差がはっきりします。</p>
                <a className="mpoint-cta" href="price.html">総額の目安・お見積もりを見る<Icon name="arrow" strokeWidth={2} /></a>
              </div>
            </article>
            {data.benefits.map((b, i) => (
              <article key={i} className="mben reveal" style={{ transitionDelay: i * 0.08 + "s" }}>
                <span className="mben-no">{b.no}</span>
                <div>
                  <h3 className="mben-title">{b.title}</h3>
                  <p className="mben-desc">{b.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>

        <div className="wrap">
          <div className="vsbanner reveal">
            <div className="vsb-campaign">
              <span className="vsb-campaign-badge">今なら乗り換え特典</span>
              <p className="vsb-campaign-text">他社互助会の<em>解約手数料</em>を、当社が<em>負担します！</em></p>
              <p className="vsb-campaign-note">※適用には条件がございます。詳しくはお気軽にご相談ください。</p>
            </div>
            <div className="vsb-head">
              <span className="vsb-pop">まるっと割引って、なに？</span>
              <h3>面倒な月々の積立、もう解約。</h3>
              <p className="vsb-sub">よくある積立会員は「一人ひと口」せねば…。でもAifit会員は<b>毎月のお支払い不要</b>。しかも<b>一口でまるっと家族全員分！</b></p>
            </div>
            <div className="vsb-compare">
              <div className="vsb-card vsb-card--old">
                <span className="vsb-tag">よくある積立会員</span>
                <p className="vsb-lead">「一人ひと口、<br />せねば…」</p>
                <ul className="vsb-pts">
                  <li>毎月コツコツ積立</li>
                  <li>家族の人数ぶん必要</li>
                  <li>解約に手数料も</li>
                </ul>
              </div>
              <div className="vsb-arrow" aria-hidden="true">VS</div>
              <div className="vsb-card vsb-card--new">
                <span className="vsb-stamp">まるっと</span>
                <span className="vsb-tag vsb-tag--new">Aifit やすらぎ共済会</span>
                <p className="vsb-zero"><b>毎月のお支払い</b><strong>0<small>円</small></strong></p>
                <p className="vsb-punch">一口で<em>家族ぜんぶ</em>カバー！</p>
                <ul className="vsb-pts vsb-pts--new">
                  <li>入会金 1万円のみ</li>
                  <li>一家に一口でOK</li>
                  <li>解約手数料なし</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { TrustStrip, ChatSection, AmbassadorBand, NotesSection, MembershipSection });
})();