/* Aifit — ReasonsSection (4つの特長) + PlansSection (9プラン/料金). */
(function () {
  const Icon = window.Icon;

  function ReasonsSection({ reasons }) {
    return (
      <section className="reasons" id="reasons">
        <div className="wrap">
          <div className="reasons-head reveal">
            <span className="eyebrow">Why Aifit</span>
            <h2 className="reasons-title">アイフィットさいきが、<br className="br-sp" />選ばれ続ける理由。</h2>
            <p className="reasons-lead">「近くて便利で、選べて納得」。創業{new Date().getFullYear() - 1947}年、東広島ご依頼件数 第1位を10年連続でいただいてきた理由が、ここにあります。</p>
          </div>
          <div className="reasons-grid">
            {reasons.map((r, i) => (
              <article key={i} className="rcard reveal" style={{ transitionDelay: i * 0.07 + "s" }}>
                <span className="rcard-watermark" aria-hidden="true">{r.no}</span>
                <span className="rcard-ic"><Icon name={r.icon} strokeWidth={1.4} /></span>
                <span className="rcard-kicker">POINT {r.no}</span>
                <h3 className="rcard-title">{r.title}</h3>
                <p className="rcard-desc">{r.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function PlansSection({ plans, note, contact, shucchou }) {
    return (
      <section className="plans" id="plans">
        <div className="wrap">
          <div className="plans-head reveal">
            <span className="eyebrow">Funeral Plans</span>
            <h2 className="plans-title">ご事情とご予算に合わせて、<br className="br-sp" />選べる葬儀プラン。</h2>
            <p className="plans-lead">直葬から家族葬・一般葬まで。下記はいずれも<strong>やすらぎ共済会の会員価格</strong>です。明朗会計で、総額が見える安心を。</p>
          </div>
          <div className="plans-grid">
            {plans.map((p, i) => (
              <article key={i} className={"pcard reveal" + (p.featured ? " pcard--featured" : "")} style={{ transitionDelay: i * 0.05 + "s" }}>
                <div className="pcard-media">
                  <image-slot id={p.slot} src={p.photo} shape="rect" placeholder={p.name + "の写真"} style={{ width: "100%", height: "100%" }}></image-slot>
                  <span className="pcard-media-scrim" aria-hidden="true"></span>
                  <span className="pcard-people"><Icon name="people" strokeWidth={1.6} />{p.people}</span>
                </div>
                <div className="pcard-body">
                  <div className="pcard-top">
                    <h3 className="pcard-name">{p.name}</h3>
                  </div>
                  <p className="pcard-note">{p.note}</p>
                  <div className="pcard-price">
                    {p.reg && <span className="pcard-reg">一般価格 <s>{p.reg}万円〜</s></span>}
                    <span className="pcard-member"><Icon name="check" strokeWidth={2.4} />会員価格</span>
                    <span className="pcard-num">{p.price}<i>万円〜</i></span>
                    <span className="pcard-tax">税込 {p.tax}万円〜</span>
                  </div>
                  <a className="pcard-cta" href={p.href || "plan.html"}>このプランを相談<Icon name="arrow" strokeWidth={1.8} /></a>
                </div>
              </article>
            ))}
          </div>
          {shucchou && (
            <a className="pshucchou reveal" href={shucchou.href}>
              <div className="pshucchou-media">
                <image-slot id={shucchou.slot} src={shucchou.photo} shape="rect" placeholder="出張葬の祭壇写真" style={{ width: "100%", height: "100%" }}></image-slot>
                <span className="pshucchou-scrim" aria-hidden="true"></span>
              </div>
              <div className="pshucchou-body">
                <span className="pshucchou-tag">{shucchou.tag}</span>
                <h3 className="pshucchou-title">{shucchou.title}</h3>
                <p className="pshucchou-desc">{shucchou.body}</p>
                <div className="pshucchou-chips">{shucchou.chips.map((c, i) => (<span key={i}>{c}</span>))}</div>
                <div className="pshucchou-foot">
                  <span className="pshucchou-price"><i>会員価格</i>{shucchou.price}<b>万円〜</b><em>税込 {shucchou.tax}万円〜</em></span>
                  <span className="pshucchou-cta">出張葬プランを見る<Icon name="arrow" strokeWidth={1.8} /></span>
                </div>
              </div>
            </a>
          )}
          <p className="plans-note reveal">{note}</p>
          <div className="plans-foot reveal">
            <a className="btn btn--primary" href={contact.telLink}><Icon name="phoneCall" strokeWidth={1.7} />費用を相談する（無料）</a>
            <a className="ai-badge ai-badge--md" href={contact.chat} target="_blank" rel="noopener"><Icon name="spark" className="spark" strokeWidth={1.6} />Aifitに費用を聞く</a>
            <a className="btn" href={contact.line} target="_blank" rel="noopener" style={{ background: "#06C755", color: "#fff", borderColor: "#06C755" }}><Icon name="line" strokeWidth={1.6} />公式LINEで相談</a>
            <span className="plans-foot-note">分割ローン・クレジットカードもご利用いただけます</span>
          </div>
        </div>
      </section>
    );
  }

  function LargeSection({ data, contact }) {
    const [lightbox, setLightbox] = React.useState(null);
    const [expanded, setExpanded] = React.useState(false);
    const shown = expanded ? data.gallery : data.gallery.slice(0, 3);
    return (
      <section className="large" id="shaso">
        {lightbox && (
          <div className="lgal-lightbox" onClick={() => setLightbox(null)}>
            <button className="lgal-lightbox-close" aria-label="閉じる" onClick={() => setLightbox(null)}>×</button>
            <img src={lightbox} alt="社葬・大型葬の実績写真" onClick={(e) => e.stopPropagation()} />
          </div>
        )}
        <div className="wrap">
          <div className="large-head reveal">
            <span className="eyebrow">Large-scale &amp; Corporate Funerals</span>
            <h2 className="large-title">100名以上、1000名以上。<br className="br-sp" />すべてお任せください。</h2>
            <p className="large-lead">社葬・合同葬・団体葬、お別れの会まで。大式場やホール、ホテルを舞台に、会場手配・運営・進行・受付までを専任チームが一括でお引き受けします。</p>
          </div>
          <div className="large-stats reveal">
            {data.stats.map((s, i) => (
              <div key={i} className="lstat">
                <span className="lstat-num">{s.num}<i>{s.unit}</i></span>
                <span className="lstat-label">{s.label}</span>
              </div>
            ))}
          </div>
          <div className="large-venues">
            {data.venues.map((v, i) => (
              <article key={i} className="lvenue reveal" style={{ transitionDelay: i * 0.08 + "s" }}>
                <div className="lvenue-media">
                  <image-slot id={v.slot} src={v.photo} shape="rect" placeholder={v.name + "の写真"} style={{ width: "100%", height: "100%" }}></image-slot>
                  <span className="lvenue-scrim" aria-hidden="true"></span>
                  <span className="lvenue-cap">{v.cap}</span>
                  <h3 className="lvenue-name">{v.name}</h3>
                </div>
                <p className="lvenue-desc">{v.desc}</p>
              </article>
            ))}
          </div>
          <div className="large-gallery reveal">
            <p className="large-gallery-cap"><Icon name="viewer" strokeWidth={1.5} />社葬・大型葬の実績ギャラリー</p>
            <div className="lgal-grid">
              {shown.map((g, i) => (
                <button key={i} type="button" className="lgal-cell" onClick={() => setLightbox(g.photo)} aria-label="写真を拡大">
                  <image-slot id={g.slot} src={g.photo} shape="rect" placeholder="写真" style={{ width: "100%", height: "100%", pointerEvents: "none" }}></image-slot>
                </button>
              ))}
            </div>
            {data.gallery.length > 3 && (
              <div className="lgal-toggle-wrap">
                <button type="button" className="lgal-toggle" onClick={() => setExpanded(v => !v)} aria-expanded={expanded}>
                  {expanded ? "閉じる" : "実績写真をすべて見る（" + data.gallery.length + "枚）"}
                  <Icon name="arrow" strokeWidth={1.7} className={expanded ? "lgal-toggle-ic lgal-toggle-ic--up" : "lgal-toggle-ic"} />
                </button>
              </div>
            )}
          </div>
          <div className="large-cta reveal">
            <a className="btn btn--primary" href={contact.telLink}><Icon name="phoneCall" strokeWidth={1.7} />社葬・大型葬を相談する</a>
            <a className="btn btn--ghost" href="#support">会場・アクセスを見る<Icon name="arrow" strokeWidth={1.7} /></a>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, { ReasonsSection, PlansSection, LargeSection });
})();