/* Aifit — bottom parts: ConnectSection, VoicesSection, Footer */
(function () {
  const Icon = window.Icon;

  function ConnectSection({ contact }) {
    return (
      <section className="connect" id="contact">
        <div className="wrap connect-grid">
          {/* brand story */}
          <article className="story reveal">
            <image-slot id="ph-story" src="img/mock/story-tree.webp" shape="rect" placeholder="情景写真（樹・空など）"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}></image-slot>
            <div className="story-scrim" aria-hidden="true"></div>
            <div className="story-body">
              <h2 className="story-title">人生最後の困ったを、<br />ひとりで抱えないように。</h2>
              <p className="story-text">「人生の最後に、ひとりで困る人を残したくない」。その願いが、Aifit のやさしさの原点です。</p>
              <a className="story-link" href="company.html"><span className="story-play"><Icon name="play" strokeWidth={1.5} /></span>Aifitの原点を見る</a>
            </div>
          </article>

          {/* contact card */}
          <article className="ccard reveal">
            <h2 className="ccard-title">まずはお気軽に<br />ご相談ください</h2>
            <a className="ccard-row" href={contact.telLink}>
              <span className="ccard-ic"><Icon name="phoneCall" strokeWidth={1.7} /></span>
              <span className="ccard-tx"><small>ご葬儀のご依頼・ご相談（通話無料）</small><b><ruby className="tel-ruby">{contact.tel}<rt>{contact.mnemonic}</rt></ruby></b><em>{contact.hours}</em></span>
              <Icon name="arrow" className="ccard-arr" strokeWidth={1.8} />
            </a>
            <a className="ccard-row" href="https://saiki-sousai.com/chat/?start=target" target="_blank" rel="noopener">
              <span className="ccard-ic ccard-ic--ai"><Icon name="spark" strokeWidth={1.6} /></span>
              <span className="ccard-tx"><b>Aifitチャットで相談</b><em>24時間・登録不要・匿名可</em></span>
              <Icon name="arrow" className="ccard-arr" strokeWidth={1.8} />
            </a>
            <a className="ccard-row" href={contact.line} target="_blank" rel="noopener">
              <span className="ccard-ic ccard-ic--line"><Icon name="line" strokeWidth={1.5} /></span>
              <span className="ccard-tx"><b>LINEで相談する</b><em>友だち追加はこちら</em></span>
              <Icon name="arrow" className="ccard-arr" strokeWidth={1.8} />
            </a>
            <div className="ccard-foot">
              <span><b>お急ぎの方へ</b><br />深夜・早朝でもすぐにご対応いたします。</span>
              <a className="ccard-fab" href={contact.telLink} aria-label="電話する"><Icon name="phoneCall" strokeWidth={1.7} /></a>
            </div>
          </article>
        </div>
      </section>
    );
  }

  const VREEL_DUR = 7000;
  const vreelCSS = `
  .vreel { position:relative; overflow:hidden; isolation:isolate; padding: clamp(3.4rem,8vh,6.5rem) 0; background:#14111F; }
  .vreel-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .vreel-scrim { position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(18,14,30,.74) 0%, rgba(18,14,30,.5) 38%, rgba(18,14,30,.86) 100%), linear-gradient(90deg, rgba(18,14,30,.72) 0%, rgba(18,14,30,.15) 58%, transparent 100%); }
  .vreel-inner { position:relative; z-index:2; display:flex; flex-direction:column; gap: clamp(1.4rem,3.4vh,2.4rem); min-height: clamp(20rem,52vh,30rem); justify-content:center; }
  .vreel-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom: clamp(1.4rem,3vh,2.2rem); }
  .vreel-title { font-family:var(--mincho); font-size: clamp(1.7rem,3.4vw,2.6rem); color:#fff; margin:.2rem 0 0; letter-spacing:.02em; text-shadow:0 2px 20px rgba(0,0,0,.45); }
  .vreel-head .eyebrow { color:#E4D6A8; }
  .vreel-all { display:inline-flex; align-items:center; gap:.4em; font-weight:700; color:#F4ECCF; font-size:.92rem; white-space:nowrap; }
  .vreel-all svg { width:1.05em; height:1.05em; transition:transform .2s; }
  .vreel-all:hover svg { transform:translateX(3px); }

  /* full-bleed video background — no card */

  .vreel-screen { display:flex; flex-direction:column; gap: clamp(1.1rem,2.6vh,1.7rem); max-width:54rem; }
  .vreel-tag { align-self:flex-start; font-family:var(--gothic); font-size:.62rem; letter-spacing:.24em; font-weight:700; color:#CDBFEC; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:.42em .95em; border-radius:999px; }

  .vreel-quote { position:relative; font-family:var(--mincho); font-size: clamp(1.25rem,2.3vw,2.15rem); line-height:1.95; color:#FBF9FF; font-weight:500; max-width:50rem; margin:0; text-wrap:pretty; text-shadow:0 2px 22px rgba(0,0,0,.55); }
  .vreel-quote::before { content:"“"; position:absolute; left:-.2rem; top:-1.7rem; font-family:var(--mincho); font-size:3rem; line-height:1; color:var(--gold,#C2A55E); opacity:.85; }
  .vreel-ghost { visibility:hidden; }
  .vreel-typed { position:absolute; inset:0; }
  .vreel-caret { display:inline-block; width:2px; height:1.05em; background:var(--gold,#C2A55E); margin-left:3px; vertical-align:-.14em; animation: vreelBlink 1s step-end infinite; }
  @keyframes vreelBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

  .vreel-person { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
  .vreel-avatar { flex:0 0 auto; width:3.4rem; height:3.4rem; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px rgba(194,165,94,.7), 0 8px 18px -8px rgba(0,0,0,.6); }
  .vreel-avatar image-slot { display:block; width:100%; height:100%; }
  .vreel-who { color:#fff; font-weight:700; font-size:.96rem; line-height:1.3; }
  .vreel-who small { display:block; color:rgba(255,255,255,.6); font-weight:600; font-size:.74rem; margin-top:.15rem; }
  .vreel-star { margin-left:auto; font-family:var(--gothic); font-size:.66rem; font-weight:800; color:#1A1626; background:linear-gradient(135deg,#F4DF9B,#C2A55E); padding:.42em .85em; border-radius:999px; box-shadow:0 8px 18px -8px rgba(194,165,94,.8); white-space:nowrap; }

  .vreel-bar { display:flex; align-items:center; gap:1rem; margin-top: clamp(.6rem,1.4vh,1.2rem); max-width:54rem; }
  .vreel-play { flex:0 0 auto; width:2.7rem; height:2.7rem; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, transform .2s; }
  .vreel-play:hover { background:rgba(255,255,255,.22); transform:scale(1.07); }
  .vreel-play svg { width:1.1rem; height:1.1rem; }
  .vreel-segs { flex:1; display:flex; gap:.5rem; }
  .vreel-seg { flex:1; height:4px; border:0; padding:0; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden; cursor:pointer; }
  .vreel-seg-fill { display:block; height:100%; width:0; background:linear-gradient(90deg,#E4D6A8,#C2A55E); border-radius:999px; }
  .vreel-seg.is-done .vreel-seg-fill { width:100%; }
  .vreel-seg.is-active .vreel-seg-fill { animation: vreelFill linear forwards; }
  @keyframes vreelFill { from { width:0; } to { width:100%; } }
  .vreel-count { flex:0 0 auto; font-family:var(--mincho); font-size:.92rem; color:rgba(255,255,255,.85); font-weight:700; letter-spacing:.05em; }
  .vreel-count i { font-style:normal; color:rgba(255,255,255,.4); margin:0 .18em; }

  @media (max-width: 700px) {
    .vreel-quote { font-size:1.08rem; line-height:1.85; }
    .vreel-star { margin-left:0; }
  }
  @media (prefers-reduced-motion: reduce) { .vreel-caret { animation:none; } }`;

  function VoicesSection({ voices }) {
    const { useState, useEffect, useRef } = React;
    const [active, setActive] = useState(0);
    const [playing, setPlaying] = useState(true);
    const [typed, setTyped] = useState("");
    const n = voices.length;
    const cur = voices[active];
    const quote = cur.quote;
    const videoRef = useRef(null);
    const advance = () => setActive((a) => (a + 1) % n);
    useEffect(() => {
      const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (reduce) { setTyped(quote); return; }
      setTyped("");
      let k = 0;
      const id = setInterval(() => {
        k++; setTyped(quote.slice(0, k));
        if (k >= quote.length) clearInterval(id);
      }, 32);
      return () => clearInterval(id);
    }, [active, quote]);
    useEffect(() => {
      const v = videoRef.current; if (!v) return;
      let url;
      fetch("video/voice.mp4").then((r) => r.blob()).then((b) => {
        url = URL.createObjectURL(b); v.src = url; v.play().catch(() => {});
      }).catch(() => {});
      return () => { if (url) URL.revokeObjectURL(url); };
    }, []);
    useEffect(() => {
      const v = videoRef.current; if (!v) return;
      if (playing) v.play().catch(() => {}); else v.pause();
    }, [playing]);
    return (
      <section className="vreel" id="voices">
        <video className="vreel-video" autoPlay muted loop playsInline preload="auto" poster="img/genre-poster-voice.webp" ref={videoRef} aria-hidden="true"></video>
        <div className="vreel-scrim" aria-hidden="true"></div>
        <div className="wrap vreel-inner reveal">
          <div className="vreel-head">
            <div>
              <span className="eyebrow">Voice</span>
              <h2 className="vreel-title">お客様の声</h2>
            </div>
            <a className="vreel-all" href="voice.html">一覧を見る<Icon name="arrow" strokeWidth={1.8} /></a>
          </div>

          <div className="vreel-screen">
              <span className="vreel-tag">VOICE {String(active + 1).padStart(2, "0")}</span>
              <blockquote className="vreel-quote">
                <span className="vreel-ghost" aria-hidden="true">{quote}</span>
                <span className="vreel-typed">{typed}<i className="vreel-caret"></i></span>
              </blockquote>
              <div className="vreel-person">
                <span className="vreel-avatar">
                  <image-slot key={cur.slot} id={cur.slot} src={cur.photo} shape="circle" placeholder="お顔" style={{ width: "100%", height: "100%" }}></image-slot>
                </span>
                <div className="vreel-who">{cur.who}<small>{cur.meta}</small></div>
                {cur.real ? <span className="vreel-star">★ Google 4.9</span> : null}
              </div>
            </div>

            <div className="vreel-bar">
              <button className="vreel-play" onClick={() => setPlaying((p) => !p)} aria-label={playing ? "一時停止" : "再生"}>
                {playing
                  ? <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1" /><rect x="14" y="5" width="4" height="14" rx="1" /></svg>
                  : <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5l12 7-12 7z" /></svg>}
              </button>
              <div className="vreel-segs">
                {voices.map((v, i) => (
                  <button
                    key={i}
                    className={"vreel-seg" + (i === active ? " is-active" : (i < active ? " is-done" : ""))}
                    onClick={() => setActive(i)}
                    aria-label={(i + 1) + "番目の声へ"}
                  >
                    <span
                      className="vreel-seg-fill"
                      style={{ animationDuration: VREEL_DUR + "ms", animationPlayState: (i === active && playing) ? "running" : "paused" }}
                      onAnimationEnd={i === active ? advance : undefined}
                    ></span>
                  </button>
                ))}
              </div>
              <span className="vreel-count">{String(active + 1).padStart(2, "0")}<i>/</i>{String(n).padStart(2, "0")}</span>
            </div>
          </div>
        <style>{vreelCSS}</style>
      </section>
    );
  }

  function Footer({ contact, nav }) {
    return (
      <footer className="ftr" id="footer">
        <div className="wrap ftr-grid">
          <div className="ftr-brand">
            <img className="ftr-logo" src="logo/aifit-logo-white.png" alt="aifit" />
            <p className="ftr-tag">JR西条駅から一番近くて便利で、選べて納得。</p>
            <p className="ftr-desc">創業{new Date().getFullYear() - 1947}年、東広島ご依頼件数第1位（10年連続）。終活・葬儀・ペット・相続をひとつにつなぐ、Aifitグループ さいき葬祭。東広島・呉・三原に会場を構え、ご家族の「まさか」と「もしも」を「いつも」支えます。</p>
          </div>
          <div className="ftr-cols">
            <div className="ftr-col">
              <h4>サービス</h4>
              <a href="#plans">葬儀プラン</a><a href="#membership">やすらぎ共済会</a>
              <a href="#chat">終活相談ならアイフィット</a><a href="pet.html">ペットのお葬式</a>
            </div>
            <div className="ftr-col">
              <h4>AIFITについて</h4>
              <a href="#support">会場・アクセス</a><a href="#reasons">選ばれる理由</a>
              <a href="#voices">お客様の声</a><a href={contact.chat} target="_blank" rel="noopener">Aifitに相談</a>
            </div>
            <div className="ftr-col ftr-col--info">
              <h4>お問い合わせ</h4>
              <p>{contact.address}</p>
              <p>本社 TEL {contact.hqTel}／FAX {contact.fax}</p>
              <p>ご葬儀のご依頼は<br /><ruby className="tel-ruby">{contact.tel}<rt>{contact.mnemonic}</rt></ruby>（{contact.hours}）</p>
              <p>{contact.site}</p>
              <a href="links.html">関連リンク・所属団体</a>
              <a href="sitemap.html">サイトマップ</a>
              <a href="privacy.html">プライバシーポリシー</a>
            </div>
          </div>
        </div>
        <div className="ftr-base wrap">
          <span>© Aifitグループ さいき葬祭 — Aifit Life Platform</span>
          <span className="ftr-note">※ 写真・一部文言は仮置きです（差し替え可）</span>
        </div>
      </footer>
    );
  }

  Object.assign(window, { ConnectSection, VoicesSection, Footer });
})();