/* DESIGN O — FLOW
   A step-driven, vertical-scroll "journey" layout. The page is led by
   the customer flow: 相談 → ご提案 → ご契約 → 継続サポート.
   A sticky side index (left, desktop) tracks the current step via an
   IntersectionObserver scroll-spy and highlights it with var(--accent).
   Big step numbers + a vertical connector line stitch the journey
   together. Collapses to a single column with a sticky top index chip
   row on ≤720px. All markup scoped under `.O`. */

function DesignFlow() {
  const nav = [
    { jp: "会社案内", en: "About" },
    { jp: "サービス案内", en: "Service" },
    { jp: "採用情報", en: "Recruit" },
    { jp: "お知らせ", en: "News" },
    { jp: "お問い合わせ", en: "Contact" },
  ];

  const steps = [
    {
      no: "01", jp: "相談", en: "Consultation",
      lead: "まずは、お話をお聞かせください。",
      p: "現状のお悩みやご要望を丁寧にヒアリング。初回のご相談は無料です。税務・会計・労務、どんな些細なことでもお気軽にお問い合わせください。",
      note: "初回相談無料 / オンライン面談も可",
      icon: "phone", img: "assets/contact.jpg", alt: "無料相談の様子",
    },
    {
      no: "02", jp: "ご提案", en: "Proposal",
      lead: "最適なプランを、ご提案します。",
      p: "お客様の事業規模やフェーズに合わせて、必要なサービスと費用感を明確にご提示。ご不明点を一つずつクリアにしながら、納得のいくかたちを一緒に描きます。",
      note: "お見積り・サービス内容を明示",
      icon: "chart", img: null, alt: "",
    },
    {
      no: "03", jp: "ご契約", en: "Agreement",
      lead: "安心して、スタートできます。",
      p: "契約内容とサポート範囲をご確認いただいたうえで、正式にご契約。担当者がつき、必要書類のご案内から初期セットアップまでしっかりサポートします。",
      note: "担当者が伴走 / 初期設定を支援",
      icon: "calc", img: null, alt: "",
    },
    {
      no: "04", jp: "継続サポート", en: "Ongoing Support",
      lead: "末永く、伴走しつづけます。",
      p: "顧問契約後も、月次の巡回監査や経営のご相談を通じて継続的にサポート。羅針盤のように、お客様の事業が進むべき道を共に見つめつづけます。",
      note: "月次サポート / 経営相談",
      icon: "people", img: "assets/about.jpg", alt: "継続的なサポート",
    },
  ];

  const serv = [
    { jp: "税務・会計顧問", en: "TAX / ACCOUNTING", icon: "calc",
      p: "税務申告や会計業務のサポートを通じて、正確で信頼性の高い経営基盤を支えます。" },
    { jp: "社会保険労務士業務", en: "LABOR", icon: "people",
      p: "労務管理や社会保険手続きの最適化で、安心して働ける環境づくりを支援します。" },
    { jp: "経営コンサルティング", en: "CONSULTING", icon: "chart",
      p: "経営課題を共に解決し、企業の成長と未来のビジョン実現をサポートします。" },
  ];

  const news = [
    { d: "2025.12.09", t: "年末年始営業のお知らせ" },
    { d: "2025.07.18", t: "夏期休業のお知らせ" },
    { d: "2024.12.05", t: "年末年始営業のお知らせ" },
  ];

  const stepRefs = React.useRef([]);
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const els = stepRefs.current.filter(Boolean);
    if (!("IntersectionObserver" in window) || !els.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            const idx = Number(e.target.getAttribute("data-idx"));
            if (!Number.isNaN(idx)) setActive(idx);
          }
        });
      },
      { rootMargin: "-45% 0px -45% 0px", threshold: 0 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const jumpTo = (i) => (ev) => {
    ev.preventDefault();
    const el = stepRefs.current[i];
    if (el && el.scrollIntoView) el.scrollIntoView({ behavior: "smooth", block: "center" });
  };

  return (
    <div className="page O" id="top">
      {/* ---- simple header ---- */}
      <header className="O-header">
        <a className="O-brand" href="#top">
          <LogoMark color="var(--brand)" size={38} />
          <span className="O-brand-name">
            コンパス会計社<small>COMPASS-TAX</small>
          </span>
        </a>
        <nav className="O-nav" aria-label="メインナビ">
          {nav.map((n) => (
            <a key={n.jp} href="#">{n.jp}</a>
          ))}
        </nav>
        <a className="O-hcta" href="#contact">
          まずは無料相談<span className="O-ar" />
        </a>
      </header>

      {/* ---- hero ---- */}
      <section className="O-hero">
        <div className="O-hero-copy">
          <div className="O-eyebrow"><span className="bar" />Your Journey Starts Here</div>
          <h1>はじめての方も、<br />迷わない。</h1>
          <p className="O-hero-sub">お客様の“不安”をクリアに、私たちが提案します。</p>
          <p className="O-hero-lead">
            税務・会計・社会保険労務の専門家が、はじめてのご相談から
            ご契約、そして継続的な経営支援まで。ひとつひとつの段階に
            寄り添いながら、迷わず進める道すじをご用意します。
          </p>
          <div className="O-hero-actions">
            <a className="O-btn" href="#contact">まずは無料相談<span className="O-ar" /></a>
            <a className="O-btn ghost" href="#flow">ご利用の流れ</a>
          </div>
        </div>
        <div className="O-hero-visual">
          <figure className="O-hero-fig">
            <Img tone="deskDark" src="assets/hero1.jpg" alt="コンパス会計社 メインビジュアル" />
          </figure>
          <ol className="O-hero-mini" aria-hidden="true">
            {steps.map((s) => (
              <li key={s.no}><span className="n">{s.no}</span>{s.jp}</li>
            ))}
          </ol>
        </div>
      </section>

      {/* ---- flow: sticky index + big step sections ---- */}
      <section className="O-flow" id="flow">
        <div className="O-flow-head">
          <div className="O-eyebrow"><span className="bar" />Flow</div>
          <h2>ご相談から契約・継続支援まで</h2>
          <p>ご契約までの流れは、大きく4つのステップ。今どの段階にいるのか、一目でわかる導線でご案内します。</p>
        </div>

        <div className="O-flow-wrap">
          {/* sticky side index */}
          <aside className="O-index" aria-label="ご利用の流れ 目次">
            <span className="O-index-lab">STEP</span>
            <ol className="O-index-list">
              {steps.map((s, i) => (
                <li key={s.no} className={"O-index-item" + (active === i ? " on" : "")}>
                  <a href={"#step-" + s.no} onClick={jumpTo(i)}>
                    <span className="no">{s.no}</span>
                    <span className="jp">{s.jp}</span>
                  </a>
                </li>
              ))}
            </ol>
          </aside>

          {/* big step sections */}
          <div className="O-steps">
            {steps.map((s, i) => {
              const Icon = I[s.icon];
              return (
                <article
                  className={"O-step" + (i === steps.length - 1 ? " last" : "")}
                  id={"step-" + s.no}
                  data-idx={i}
                  key={s.no}
                  ref={(el) => (stepRefs.current[i] = el)}
                >
                  <div className="O-step-rail">
                    <span className="O-step-dot" />
                    <span className="O-step-no">{s.no}</span>
                  </div>
                  <div className="O-step-body">
                    <div className="O-step-en">Step {s.no} — {s.en}</div>
                    <h3>{s.jp}</h3>
                    <p className="O-step-lead">{s.lead}</p>
                    <p className="O-step-p">{s.p}</p>
                    <div className="O-step-foot">
                      <span className="O-step-icon">{Icon ? Icon() : null}</span>
                      <span className="O-step-note">{s.note}</span>
                    </div>
                    {s.img && (
                      <figure className="O-step-fig">
                        <Img tone="office" src={s.img} alt={s.alt} />
                      </figure>
                    )}
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* ---- service: 3 pillars ---- */}
      <section className="O-serv" id="service">
        <div className="O-flow-head center">
          <div className="O-eyebrow"><span className="bar" />Service</div>
          <h2>3つの専門サービス</h2>
        </div>
        <div className="O-serv-grid">
          {serv.map((s, i) => {
            const Icon = I[s.icon];
            return (
              <a className="O-serv-card" href="#" key={s.jp}>
                <span className="O-serv-no">{"0" + (i + 1)}</span>
                <span className="O-serv-ic">{Icon ? Icon() : null}</span>
                <span className="O-serv-jp">{s.jp}</span>
                <span className="O-serv-en">{s.en}</span>
                <span className="O-serv-p">{s.p}</span>
                <span className="O-serv-more">詳しく見る<span className="O-ar" /></span>
              </a>
            );
          })}
        </div>
      </section>

      {/* ---- news ---- */}
      <section className="O-news" id="news">
        <div className="O-news-inner">
          <div className="O-news-head">
            <div className="O-eyebrow"><span className="bar" />News</div>
            <h2>お知らせ</h2>
          </div>
          <div className="O-news-list">
            {news.map((n, i) => (
              <a className="O-news-row" href="#" key={i}>
                <span className="date">{n.d}</span>
                <span className="ttl">{n.t}</span>
                <span className="chev"><I.chev /></span>
              </a>
            ))}
            <a className="O-news-more" href="#">お知らせ一覧<span className="O-ar" /></a>
          </div>
        </div>
      </section>

      {/* ---- contact band ---- */}
      <section className="O-contact" id="contact">
        <div className="O-contact-inner">
          <div className="O-contact-copy">
            <div className="O-eyebrow light"><span className="bar" />Contact</div>
            <h2>まずは、お気軽に。</h2>
            <p>ご相談・ご質問など、お電話またはフォームよりお問い合わせください。はじめの一歩を、私たちがサポートします。</p>
          </div>
          <div className="O-contact-actions">
            <a className="O-cbtn" href="tel:0362793375">
              <span className="O-cbtn-ic"><I.phone s={24} /></span>
              <span className="txt">
                <span className="big">03-6279-3375</span>
                <span className="sub">受付時間：平日 9:00-18:00</span>
              </span>
            </a>
            <a className="O-cbtn form" href="#">
              <span className="O-cbtn-ic"><I.mail s={22} /></span>
              <span className="txt">
                <span className="lab">お問い合わせフォーム</span>
                <span className="sub">24時間受付中</span>
              </span>
              <span className="O-ar light" />
            </a>
          </div>
        </div>
      </section>

      <Footer variant="A" />
    </div>
  );
}

window.DesignFlow = DesignFlow;