/* eslint-disable */
const { useState, useEffect, useRef, useMemo } = React;

/* ============== Hooks ============== */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useCountUp(target, duration = 1600, trigger = true) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!trigger) return;
    let raf, start;
    const step = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, duration, trigger]);
  return val;
}

function useInView(ref, threshold = 0.2) {
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); io.disconnect(); }
    }, { threshold });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, threshold]);
  return inView;
}

/* ============== TopBar ============== */
function TopBar() {
  return (
    <header className="topbar">
      <div className="topbar__inner">
        <a href="#" className="topbar__brand" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <img className="topbar__seal" src="https://office-tree.jp/img/treelogo2.webp" alt="行政書士法人Tree" />
          <div className="topbar__name">
            行政書士法人Tree
            <small>GYOSEISHOSHI HOJIN TREE</small>
          </div>
        </a>
        <nav className="topbar__nav">
          <a href="#reasons">選ばれる理由</a>
          <a href="#service">サービス</a>
          <a href="#pricing">料金</a>
          <a href="#scope">業務範囲</a>
          <a href="#flow">ご依頼の流れ</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="#contact" className="topbar__cta">無料相談を予約</a>
      </div>
    </header>
  );
}

/* ============== Hero ============== */
function Hero() {
  return (
    <section className="hero washi">
      <div className="hero__bg" />
      <div className="hero__grid-bg" />
      <div className="hero__kanji-bg" aria-hidden="true">入札</div>
      <div className="hero__inner">
        <div>
          <div className="hero__eyebrow">公共入札に挑む、建設業の経営者へ</div>
          <h1 className="hero__title">
            入札参加資格申請を、<br />
            <span className="accent">一律料金</span>で代行。
          </h1>
          <p className="hero__lead">
            全省庁統一資格・全国の自治体・公社まで、行政書士法人Treeが対応。<br />
            追加費用なしのわかりやすい料金体系で、煩雑な公共入札の準備を整えます。
          </p>
          <div className="hero__prices">
            <div className="hero__prices-head">
              <span className="hero__prices-label">一律料金・追加費用なし</span>
              <span className="hero__prices-foot">税抜・実費別</span>
            </div>
            <div className="hero__prices-note">※ 実費は、必要書類（登記簿・納税証明書等）の取得費用、郵送費等のみ発生します。<br />※ 経審とセットで1自治体目 <strong>−¥10,000</strong> 割引（自動適用）。</div>
            <div className="hero__price-row hero__price-row--main">
              <div className="hero__price-name">入札参加資格申請<small>全省庁／自治体 共通・1件あたり</small></div>
              <div className="hero__price-value"><span className="yen">¥</span>35,000</div>
            </div>
            <div className="hero__price-tier">10件以上は10件ごとに −¥1,500 ／ 100件以上 ¥20,000／件（税抜）</div>
            <div className="hero__prices-divider">必要に応じて</div>
            <div className="hero__price-row hero__price-row--option">
              <div className="hero__price-name">電子証明書の取得<small>※ICカード・カードリーダー実費別</small></div>
              <div className="hero__price-value"><span className="yen">¥</span>33,000</div>
            </div>
            <div className="hero__price-row hero__price-row--option">
              <div className="hero__price-name">自治体システムへの紐づけ<small>1自治体あたり</small></div>
              <div className="hero__price-value"><span className="yen">¥</span>16,500</div>
            </div>
          </div>
          <div className="hero__ctas">
            <a href="#contact" className="btn btn--primary">
              無料相談を予約する <span className="arrow">→</span>
            </a>
            <a href="#pricing" className="btn btn--ghost">
              料金プランを見る
            </a>
          </div>
          <div className="hero__trust">※ ご相談はいつでも何度でも無料・秘密厳守。営業電話は一切いたしません。</div>
        </div>
        <aside className="hero__side">
          <div className="hero__vertical">国家資格・明朗会計・全国対応</div>
          <div className="hero__pillars">
            <div className="pillar">
              <div className="pillar__mark">資</div>
              <div>
                <div className="pillar__title">行政書士法人</div>
                <div className="pillar__desc">国家資格者による直接対応。法人として守秘義務を負います。</div>
              </div>
            </div>
            <div className="pillar">
              <div className="pillar__mark">¥</div>
              <div>
                <div className="pillar__title">明朗会計・追加費用なし</div>
                <div className="pillar__desc">HP記載の価格と実費以外、追加費用は一切いただきません。ご相談はいつでも何度でも無料です。</div>
              </div>
            </div>
            <div className="pillar">
              <div className="pillar__mark">全</div>
              <div>
                <div className="pillar__title">全国の発注機関に対応</div>
                <div className="pillar__desc">全省庁統一資格・47都道府県・市区町村・公社まで対応可能。</div>
              </div>
            </div>
            <div className="pillar">
              <div className="pillar__mark">電</div>
              <div>
                <div className="pillar__title">電子申請に完全対応</div>
                <div className="pillar__desc">gBizIDプライム取得から代行可能。来所不要で全国から依頼可。</div>
              </div>
            </div>
          </div>
        </aside>
      </div>
      <div className="hero__scroll">SCROLL</div>
    </section>
  );
}

/* ============== Crisis ============== */
function Crisis() {
  return (
    <section className="crisis">
      <div className="crisis__inner">
        <div className="crisis__title">こんな課題、ありませんか？</div>
        <div className="crisis__items">
          <div className="crisis__item">毎年の申請業務で、現場が止まる</div>
          <div className="crisis__item">自治体ごとに様式が違い、ミスが怖い</div>
          <div className="crisis__item">経審の点数を上げたいが、何から手をつけるか分からない</div>
          <div className="crisis__item">他社の見積りが不透明・追加請求が不安</div>
        </div>
      </div>
    </section>
  );
}

/* ============== Reasons ============== */
function Reasons() {
  return (
    <section className="section" id="reasons">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">WHY TREE</div>
          <h2 className="section__title">建設業の経営者が、<br /><span className="ja-em">Treeを選ぶ六つの理由</span>。</h2>
          <p className="section__lead">価格・スピード・カバレッジ——明朗会計と専任体制で、入札参加資格申請を確かな品質で進めます。</p>
        </div>
        <div className="reasons-grid reveal">
          <div className="reason">
            <div className="reason__num">REASON 01</div>
            <div className="reason__big"><span className="accent">ダブル</span><span className="unit">チェック</span></div>
            <div className="reason__title">専任2名の<span className="accent">品質体制</span></div>
            <div className="reason__desc">担当者と確認者の2名体制で書類を相互チェック。差戻し・却下を防ぐため、提出前に複数の目で精査します。</div>
          </div>
          <div className="reason">
            <div className="reason__num">REASON 02</div>
            <div className="reason__big">¥<span className="accent">35,000</span></div>
            <div className="reason__title">一律料金、<br />まとめ申請で値引</div>
            <div className="reason__desc">入札参加資格申請は1件あたり ¥35,000（全省庁・自治体問わず）。<strong>10件以上は10件ごとに −¥1,500、100件以上は ¥20,000／件</strong> まで段階的にお値引きいたします。HP掲載価格と実費以外の追加請求は一切ありません。<strong>ご相談はいつでも何度でも無料</strong>です。</div>
          </div>
          <div className="reason">
            <div className="reason__num">REASON 03</div>
            <div className="reason__big"><span className="accent">47</span><span className="unit">都道府県</span></div>
            <div className="reason__title">全国の発注機関に<br />対応可能</div>
            <div className="reason__desc">北海道から沖縄まで、47都道府県＋市区町村＋公社・独立行政法人まで対応可能。本社の所在地を問わず、全国の入札に参加できます。</div>
          </div>
          <div className="reason">
            <div className="reason__num">REASON 04</div>
            <div className="reason__big"><span className="accent">迅速</span><span className="unit">対応</span></div>
            <div className="reason__title">スピード対応・<br />電子申請完全対応</div>
            <div className="reason__desc">急な指名・突発的な案件にも、迅速な書類整備でスピーディに対応。電子申請（gBizID）にも完全対応し、ペーパーレスで完結します。</div>
          </div>
          <div className="reason">
            <div className="reason__num">REASON 05</div>
            <div className="reason__big"><span className="accent">経審</span></div>
            <div className="reason__title">決算変更届＋経審を<br />一貫サポート</div>
            <div className="reason__desc">毎年の決算変更届から経審の点数アップコンサル・申請代行まで、当事務所が一貫対応。技術職員・完工高の戦略設計から伴走し、入札参加資格申請とセットでご依頼の場合は <strong>1自治体目 −¥10,000</strong> 割引いたします。</div>
          </div>
          <div className="reason">
            <div className="reason__num">REASON 06</div>
            <div className="reason__big"><span className="accent">専任</span><span className="unit">担当</span></div>
            <div className="reason__title">担当行政書士による<br />伴走サポート</div>
            <div className="reason__desc">資格取得後の更新申請、決算変更届、追加申請など、入札参加資格に関連する継続的な手続きを専任担当が承ります。LINE・メール・電話でいつでもご相談いただけます。</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Service ============== */
function Service() {
  const regions = ["北海道", "東北", "関東", "中部", "近畿", "中国", "四国", "九州", "沖縄", "札幌", "仙台", "東京", "横浜", "名古屋", "大阪", "広島", "福岡"];
  return (
    <section className="section" id="service" style={{ background: "var(--paper-2)" }}>
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">SERVICES</div>
          <h2 className="section__title">対応範囲は、<br /><span className="ja-em">日本全国・全行政機関</span>。</h2>
          <p className="section__lead">国・地方自治体・公社・独立行政法人・特殊法人——あらゆる発注機関の入札参加資格申請に対応します。</p>
        </div>
        <div className="service-grid reveal">
          <div className="coverage washi">
            <div className="coverage__title">対応可能な発注機関</div>
            <div className="coverage__sub">NATIONWIDE COVERAGE</div>
            <div className="coverage__counter">全国<span className="total">対応可</span></div>
            <div style={{ fontFamily: "var(--sans)", fontSize: 12, color: "rgba(246,241,232,0.6)", letterSpacing: "0.05em" }}>
              全省庁統一資格 + 47都道府県 + 全国市区町村
            </div>
            <div className="coverage__chips">
              {regions.map((r) => (
                <div key={r} className="chip active">{r}</div>
              ))}
            </div>
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid rgba(246,241,232,0.12)", fontFamily: "var(--serif)", fontSize: 13, lineHeight: 1.85, color: "rgba(246,241,232,0.7)" }}>
              ※ 公共建築・土木・設備・物品・役務、すべての業種に対応。
              地元自治体に縛られず、本社所在地を問わず全国の入札へ参加可能。
            </div>
          </div>
          <div className="service-list">
            {[
              { num: "01", name: "入札参加資格申請", desc: "全省庁・自治体すべて同条件／10件以上は段階値引／事前調査・お見積り無料", price: "¥35,000", small: "1件あたり・税抜" },
              { num: "02", name: "電子証明書の取得", desc: "電子入札・電子申請に必要な電子証明書を代行取得", price: "¥33,000", small: "税抜・実費別" },
              { num: "03", name: "自治体システムへの紐づけ", desc: "電子証明書を各自治体システムに登録", price: "¥16,500", small: "1自治体あたり・税抜" },
              { num: "04", name: "決算変更届＋経審サポート", desc: "決算変更届から経審のコンサル＋申請代行まで一貫対応", price: "¥150,000", small: "税抜・一式" },
              { num: "05", name: "建設業許可（新規・更新）", desc: "知事許可・大臣許可いずれも対応", price: "¥100,000", small: "税抜・実費別" },
            ].map((s) => (
              <div className="service-list__item" key={s.num}>
                <div className="service-list__num">{s.num}</div>
                <div>
                  <div className="service-list__name">{s.name}</div>
                  <div className="service-list__desc">{s.desc}</div>
                </div>
                <div className="service-list__price">{s.price}<small>{s.small}</small></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Synergy (経審 × 入札) ============== */
function Synergy() {
  return (
    <section className="section synergy" id="synergy">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">SYNERGY / 経審 × 入札参加資格</div>
          <h2 className="section__title">
            ランクが上がれば、<br />
            <span className="ja-em">応札できる案件</span>が増える。
          </h2>
          <p className="section__lead">
            入札参加資格は「持っているだけ」では十分ではありません。工事種別ごとに付与される<strong>等級（A・B・C・D）</strong>によって、応札できる工事金額の上限が決まります。行政書士法人Treeは、経営事項審査（経審）の事前シミュレーションでランクアップの余地を分析し、戦略的に「狙える発注機関・工事規模」を広げます。
          </p>
        </div>

        <div className="synergy-flow reveal">
          <div className="synergy-step">
            <div className="synergy-step__tag">経審</div>
            <div className="synergy-step__num">01</div>
            <div className="synergy-step__title">事前シミュレーション</div>
            <div className="synergy-step__desc">現在のP点・等級を分析。技術職員・財務指標・社会性の各項目で、加点余地を可視化します。</div>
          </div>
          <div className="synergy-step">
            <div className="synergy-step__tag">経審</div>
            <div className="synergy-step__num">02</div>
            <div className="synergy-step__title">ランクアップ設計</div>
            <div className="synergy-step__desc">技術者の追加登録・建退共加入・社会性加点等、貴社に最適な打ち手を順序立てて提案します。</div>
          </div>
          <div className="synergy-step">
            <div className="synergy-step__tag">入札</div>
            <div className="synergy-step__num">03</div>
            <div className="synergy-step__title">戦略的な入札参加</div>
            <div className="synergy-step__desc">上がった等級で「狙うべき発注機関・工事種別」を選定。指名願をまとめて代行します。</div>
          </div>
        </div>

        <div className="synergy-cta reveal">
          <div className="synergy-cta__text">
            <div className="synergy-cta__head">経審 × 入札を、同じ専任担当が一貫サポート</div>
            <div className="synergy-cta__sub">経審の点数設計から入札参加資格の取得まで、別々の担当者に説明し直す手間はありません。点数のシナジーを最大化するご提案を行います。</div>
          </div>
          <a href="/lp/keishin/" className="btn btn--primary">経審サポートの詳細を見る <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ============== Pricing + Simulator ============== */
function Pricing() {
  return (
    <section className="section pricing" id="pricing">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">PRICING</div>
          <h2 className="section__title"><span className="ja-em">一律料金</span>、<br />追加費用は、一切いただきません。</h2>
          <p className="section__lead">入札参加資格申請は <strong>1件あたり ¥35,000（税抜・全省庁／自治体共通）</strong> の一律料金。<strong>ご相談はいつでも何度でも無料</strong>。事前調査・お見積りも料金内に含まれます。10件以上のまとめ申請で段階値引あり。実費（証紙・登録免許税）以外の追加請求は一切ありません。</p>
        </div>
        <div className="single-plan reveal">
          <div className="single-plan__head">
            <div className="single-plan__name">PLAN</div>
            <div className="single-plan__title">入札参加資格申請</div>
            <div className="single-plan__lead">一律料金・追加費用なし。件数に応じた段階的なお値引きで、まとめての申請ほどお得に。</div>
          </div>

          <div className="tier-table">
            <div className="tier-row">
              <div className="tier-row__count">1 〜 9 件</div>
              <div className="tier-row__rate"><span className="yen">¥</span>35,000<small>／1件</small></div>
              <div className="tier-row__badge">標準価格</div>
            </div>
            <div className="tier-row tier-row--mid">
              <div className="tier-row__count">10 件以上</div>
              <div className="tier-row__rate">10件ごとに <span className="yen">−¥</span>1,500<small>／1件 値引</small></div>
              <div className="tier-row__badge">段階値引</div>
            </div>
            <div className="tier-row tier-row--cap">
              <div className="tier-row__count">100 件以上</div>
              <div className="tier-row__rate"><span className="yen">¥</span>20,000<small>／1件</small></div>
              <div className="tier-row__badge">最終単価</div>
            </div>
          </div>
          <div className="tier-foot">※ 税抜・実費別。全省庁統一資格・自治体（規模問わず）すべて同条件でカウント。<strong>10〜19件 ¥33,000 ／ 20〜29件 ¥31,500 ／ 50件 ¥27,000 ／ 90件 ¥21,000</strong>……と段階的に下がり、100件以上で ¥20,000 に底打ちします。<br /><span className="tier-foot__minor">※ 実費は、必要書類（登記簿謄本・納税証明書・身分証明書等）の取得費用、郵送費等のみ発生します。お見積り時に内訳をご提示いたします。</span></div>

          <div className="set-deal">
            <div className="set-deal__badge">SET DEAL</div>
            <div className="set-deal__body">
              <div className="set-deal__title">決算変更届＋経審セット割引 <strong>−¥10,000</strong></div>
              <div className="set-deal__desc"><strong>決算変更届＋経審サポート</strong>と入札参加資格申請をセットでご依頼の場合、入札参加資格申請の <strong>1自治体目を ¥10,000 引き</strong>でご提供します。決算変更届の対応は必須となります（毎年の決算後の届出から経審まで一貫対応）。<a href="https://office-tree.jp/lp/keishin/" target="_blank" rel="noopener noreferrer">経審LPの詳細を見る →</a></div>
            </div>
          </div>

          <div className="single-plan__features">
            <div className="single-plan__col">
              <div className="single-plan__col-title">プランに含まれるもの</div>
              <ul className="single-plan__list">
                <li>ご相談はいつでも何度でも無料</li>
                <li>事前調査・お見積り（料金内）</li>
                <li>申請書類一式の作成</li>
                <li>電子申請（gBizID）対応</li>
                <li>専任担当による伴走サポート</li>
                <li>更新・継続申請のご相談</li>
              </ul>
            </div>
            <div className="single-plan__col">
              <div className="single-plan__col-title">必要に応じて承る関連サービス</div>
              <ul className="single-plan__list single-plan__list--option">
                <li><span>電子証明書の取得</span><strong>¥33,000</strong><small>※ICカード・カードリーダー実費別</small></li>
                <li><span>自治体システムへの紐づけ</span><strong>¥16,500</strong><small>1自治体あたり</small></li>
                <li><span>決算変更届</span><strong>¥30,000</strong><small>毎年の決算後・1期分</small></li>
                <li><span>決算変更届＋経審サポート</span><strong>¥150,000</strong><small>決算変更届＋経審コンサル＋申請代行（入札セットで −¥10,000）</small></li>
                <li><span>建設業許可（新規・更新）</span><strong>¥100,000</strong><small>知事・大臣許可いずれも対応</small></li>
              </ul>
            </div>
          </div>

          <div className="single-plan__cta">
            <a href="#contact" className="btn btn--primary">無料相談を予約する <span className="arrow">→</span></a>
            <a href="#simulator" className="btn btn--ghost">概算をシミュレーション</a>
          </div>
        </div>
        <Simulator />
      </div>
    </section>
  );
}

function Plan({ name, title, price, sub, features, cta, badge, featured }) {
  return (
    <div className={"plan" + (featured ? " plan--featured" : "")}>
      {badge && <div className="plan__badge">{badge}</div>}
      <div className="plan__name">{name}</div>
      <div className="plan__title">{title}</div>
      <div className="plan__price">{price}</div>
      <div className="plan__price-sub">{sub}</div>
      <div className="plan__divider" />
      <div className="plan__features">
        {features.map((f, i) => <div className="plan__feature" key={i}>{f}</div>)}
      </div>
      <a href="#contact" className="plan__cta">{cta} →</a>
    </div>
  );
}

function Simulator() {
  const [appCount, setAppCount] = useState(1);
  const [cert, setCert] = useState(false);
  const [linkCount, setLinkCount] = useState(0);
  const [keishin, setKeishin] = useState(false);
  const calcRate = (count) => {
    if (count >= 100) return 20000;
    if (count < 10) return 35000;
    const step = Math.floor((count - 10) / 10);
    return 33000 - step * 1500;
  };
  const tierRate = calcRate(appCount);
  const tierLabel = appCount >= 100 ? "最終単価" : appCount >= 10 ? `段階値引（標準比 −¥${(35000 - tierRate).toLocaleString()}）` : "標準価格";
  const calc = useMemo(() => {
    const apps = appCount * tierRate;
    const certFee = cert ? 33000 : 0;
    const link = linkCount * 16500;
    const k = keishin ? 150000 : 0;
    // 決算変更届＋経審セット割：ONかつ入札1件以上で 1自治体目を ¥10,000 引き
    const setDiscount = (keishin && appCount >= 1) ? 10000 : 0;
    const sub = apps + certFee + link + k - setDiscount;
    const tax = Math.round(sub * 0.1);
    return { apps, certFee, link, k, setDiscount, sub, tax, total: sub + tax };
  }, [appCount, cert, linkCount, keishin, tierRate]);
  return (
    <div className="simulator reveal" id="simulator">
      <div>
        <div className="simulator__title">わずか4項目で、<span className="accent">概算がわかる</span>。</div>
        <div className="simulator__sub">FEE SIMULATOR — 入力後、即座に概算が表示されます</div>
        <div className="sim-controls">
          <div className="sim-control">
            <div className="sim-control__label">
              申請件数（全省庁・自治体 共通）
              <span className="sim-control__value">{appCount} 件 × ¥{tierRate.toLocaleString()}</span>
            </div>
            <input
              type="range" min="1" max="200" value={appCount}
              onChange={(e) => setAppCount(+e.target.value)}
              className="sim-slider"
            />
            <div className="sim-control__hint">
              <span className={appCount < 10 ? "sim-tier sim-tier--active" : "sim-tier"}>1〜9件 ¥35,000</span>
              {" / "}
              <span className={appCount >= 10 && appCount < 100 ? "sim-tier sim-tier--active" : "sim-tier"}>10件〜 10件ごと −¥1,500</span>
              {" / "}
              <span className={appCount >= 100 ? "sim-tier sim-tier--active" : "sim-tier"}>100件以上 ¥20,000</span>
              <br />
              現在：<strong>{tierLabel}</strong>（1件あたり ¥{tierRate.toLocaleString()}）
            </div>
          </div>
          <div className="sim-control">
            <div className="sim-control__label">電子証明書の取得
              <span className="sim-control__value">{cert ? "必要（+¥33,000）" : "不要"}</span>
            </div>
            <div className="sim-tabs">
              <button className={!cert ? "active" : ""} onClick={() => setCert(false)}>取得済み・不要</button>
              <button className={cert ? "active" : ""} onClick={() => setCert(true)}>取得から依頼</button>
            </div>
            <div className="sim-control__hint">※ICカード・カードリーダー実費別</div>
          </div>
          <div className="sim-control">
            <div className="sim-control__label">
              自治体システムへの紐づけ件数
              <span className="sim-control__value">{linkCount} 件 / +¥{(linkCount * 16500).toLocaleString()}</span>
            </div>
            <input
              type="range" min="0" max="20" value={linkCount}
              onChange={(e) => setLinkCount(+e.target.value)}
              className="sim-slider"
            />
            <div className="sim-control__hint">1自治体あたり ¥16,500（電子証明書を各システムに登録する作業）</div>
          </div>
          <div className="sim-control">
            <div className="sim-control__label">決算変更届＋経審サポート
              <span className="sim-control__value">{keishin ? "ON" : "OFF"}</span>
            </div>
            <div className="sim-tabs">
              <button className={!keishin ? "active" : ""} onClick={() => setKeishin(false)}>付けない</button>
              <button className={keishin ? "active" : ""} onClick={() => setKeishin(true)}>付ける（+¥150,000）</button>
            </div>
            <div className="sim-control__hint">※ 決算変更届＋経審サポートをセットでご依頼の場合、入札参加資格申請<strong>1自治体目を −¥10,000</strong> 割引いたします（自動適用）。</div>
          </div>
        </div>
      </div>
      <div className="simulator__divider" />
      <div className="sim-result">
        <div className="sim-result__label">CONCEPTUAL TOTAL</div>
        <div className="sim-result__value">
          <span className="yen">¥</span>{calc.total.toLocaleString()}
        </div>
        <div style={{ fontFamily: "var(--sans)", fontSize: 11, color: "rgba(246,241,232,0.5)", marginTop: 4 }}>
          税込・実費別
        </div>
        <div className="sim-result__breakdown">
          申請代行 ({appCount}件 × ¥{tierRate.toLocaleString()}) ¥{calc.apps.toLocaleString()}<br />
          電子証明書取得 ¥{calc.certFee.toLocaleString()}<br />
          自治体紐づけ ({linkCount}件) ¥{calc.link.toLocaleString()}<br />
          決算変更届＋経審サポート ¥{calc.k.toLocaleString()}<br />
          {calc.setDiscount > 0 && (<>経審セット割引 −¥{calc.setDiscount.toLocaleString()}<br /></>)}
          消費税 ¥{calc.tax.toLocaleString()}
        </div>
        <a href="#contact" className="btn btn--primary" style={{ marginTop: 24, display: "inline-flex" }}>
          この内容で見積依頼 →
        </a>
      </div>
    </div>
  );
}

/* ============== Scope (業務範囲・対応内容) ============== */
function Scope() {
  const appSteps = [
    { num: "01", title: "要件・様式調査", desc: "対象自治体の申請受付期間・必要書類・独自様式を確認。事業者様の業種・実績に応じた最適な申請内容を整理します。" },
    { num: "02", title: "必要書類の収集", desc: "履歴事項全部証明書（登記簿）、納税証明書、営業経歴書、経審通知書、決算書類など。行政書士が直接取得可能な書類は弊所で代行します。" },
    { num: "03", title: "申請書類の作成", desc: "自治体独自の申請書様式への記入・業種別の記載・添付書類の整理。担当者と確認者の専任2名でダブルチェックを行います。" },
    { num: "04", title: "電子申請または郵送提出", desc: "電子申請対応自治体は gBizID／電子証明書を用いてシステム入力＋電子署名で送信。郵送対応の自治体は書類整備＋発送まで対応します。" },
    { num: "05", title: "不備対応・追完", desc: "自治体からの照会・追加書類要求・修正対応をすべて弊所で対応。お客様の負担はゼロです。" },
    { num: "06", title: "認定通知の受領・納品", desc: "資格認定通知書を受領後、お客様へ納品。資格番号・有効期限・対象業種等を整理した一覧をあわせてお渡しします。" },
  ];

  return (
    <section className="section scope" id="scope">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">SCOPE / 業務範囲・対応内容</div>
          <h2 className="section__title">「<span className="ja-em">何の費用</span>か」を、<br />すべて明らかに。</h2>
          <p className="section__lead">料金の内訳を「業務」レベルで開示します。<strong>必要な業務だけを、必要な分だけ</strong>ご依頼いただける建て付けです。</p>
        </div>

        <div className="scope-block reveal">
          <div className="scope-block__head">
            <div className="scope-block__label">SERVICE A</div>
            <div className="scope-block__title">入札参加資格申請（1自治体あたり）</div>
            <div className="scope-block__price">¥35,000<small>〜（10件以上は段階値引）</small></div>
          </div>
          <div className="scope-block__lead">「入札に参加できる事業者」として自治体に登録してもらうための、書類作成・提出を <strong>弊所で全工程代行</strong> します。<strong>ご相談はいつでも何度でも無料</strong>。事前調査・お見積りも料金内に含まれます。</div>
          <div className="scope-steps">
            {appSteps.map((s) => (
              <div className="scope-step" key={s.num}>
                <div className="scope-step__num">{s.num}</div>
                <div className="scope-step__body">
                  <div className="scope-step__title">{s.title}</div>
                  <div className="scope-step__desc">{s.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="scope-block reveal">
          <div className="scope-block__head">
            <div className="scope-block__label">SERVICE B</div>
            <div className="scope-block__title">自治体システムへの紐づけ（1自治体あたり）</div>
            <div className="scope-block__price">¥16,500<small>／1自治体</small></div>
          </div>
          <div className="scope-block__lead">取得済みの電子証明書を <strong>各自治体の電子入札システムに「利用者登録」する作業</strong> です。資格申請後、実際に電子入札できる状態にするための設定を代行します。</div>

          <div className="scope-tasks">
            <div className="scope-tasks__title">具体的な作業内容</div>
            <ul className="scope-tasks__list">
              <li><strong>利用者登録申請</strong>自治体の電子入札システムに「使う人」として登録するオンライン申請</li>
              <li><strong>証明書情報の登録</strong>取得済み電子証明書のシリアル番号等をシステムに入力</li>
              <li><strong>ICカード初期設定</strong>カードリーダーの設定・接続確認</li>
              <li><strong>テスト送信・動作確認</strong>システム接続テストを実施</li>
              <li><strong>自治体への通知</strong>一部自治体で必要となる書面通知も対応</li>
            </ul>
          </div>

          <div className="scope-cases">
            <div className="scope-case scope-case--need">
              <div className="scope-case__head">必要なケース</div>
              <ul>
                <li>電子入札に参加したい自治体がある</li>
                <li>自治体ごとの設定作業に時間を割きたくない</li>
                <li>複数自治体での電子入札を予定している</li>
              </ul>
            </div>
            <div className="scope-case scope-case--no">
              <div className="scope-case__head">不要なケース</div>
              <ul>
                <li>紙入札のみで参加する自治体</li>
                <li>全省庁統一資格のみ取得する場合</li>
                <li>お客様自身でシステム登録される場合</li>
              </ul>
            </div>
          </div>

          <div className="scope-block__note">
            ※ <strong>必須サービスではありません</strong>。必要な自治体分のみご依頼いただけます。全省庁統一資格は GEPS（政府電子調達システム）一本で済むため、紐づけ¥0です。
          </div>
        </div>

        <div className="scope-closing reveal">
          <div className="scope-closing__quote">「申請」と「紐づけ」を分けてご提示するのは、<br /><strong>必要な業務だけ</strong>を、<strong>必要な分だけ</strong>ご依頼いただきたいから。</div>
          <a href="#contact" className="btn btn--primary">業務範囲を相談する <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ============== Flow ============== */
function Flow() {
  const steps = [
    { num: "壱", title: "無料相談（オンライン可）", desc: "現状ヒアリング、対象機関の整理、概算見積りをご提示。お申込み前に料金が確定するので安心です。", time: "随時受付" },
    { num: "弐", title: "ご契約・お申込み", desc: "電子契約で完結。書類取得のための委任状・必要書類リストを即時お送りします。", time: "速やかに" },
    { num: "参", title: "書類収集・作成（弊所主導）", desc: "登記簿・納税証明・財務諸表など、行政書士が直接取得。お客様の手間は最小限。", time: "弊所主導" },
    { num: "肆", title: "ダブルチェック・申請", desc: "専任2名で書類を相互チェック。電子申請（gBizID）で送信し、進捗をリアルタイム共有。", time: "提出前点検" },
    { num: "伍", title: "資格取得・継続サポート", desc: "資格通知書を受領し納品。以降の更新・継続申請、変更届などのご相談も専任担当が承ります。", time: "継続伴走" },
  ];
  return (
    <section className="section" id="flow">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">FLOW</div>
          <h2 className="section__title">煩雑な手続きを、<br />全5ステップで<span className="ja-em">クリアに</span>。</h2>
          <p className="section__lead">煩雑な手続きはすべて弊所で巻き取ります。お客様にお願いするのは「最初のヒアリング」と「電子契約への押印」だけ。</p>
        </div>
        <div className="flow reveal">
          <div className="flow__legend">
            <div style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.3em", color: "var(--shu)", marginBottom: 16 }}>OUR APPROACH</div>
            <div style={{ fontFamily: "var(--serif)", fontWeight: 900, fontSize: 40, lineHeight: 1.2, marginBottom: 12, letterSpacing: "0.04em" }}>迅速 + 丁寧。</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 14, lineHeight: 1.85, color: "var(--muted)" }}>
              対象機関数・繁忙期や発注機関の処理状況により所要期間は変動しますが、可能な限り迅速に書類整備・提出までを進めます。お急ぎの案件は別途ご相談ください。
            </div>
          </div>
          <div className="flow__steps">
            {steps.map((s) => (
              <div className="flow-step" key={s.num}>
                <div className="flow-step__num">{s.num}</div>
                <div className="flow-step__content">
                  <div className="flow-step__title">{s.title}</div>
                  <div className="flow-step__desc">{s.desc}</div>
                </div>
                <div className="flow-step__time"><strong>{s.time}</strong></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Cases ============== */
function Cases() {
  const cases = [
    {
      industry: "土木工事業 / 創業32年",
      quote: "他社の半額以下で、しかも経審が＋108点。来年度の工事規模が一段階上がりました。",
      name: "K.H 様",
      company: "中堅ゼネコン・専務取締役",
      avatar: "土",
      label: "経審点数",
      value: "+108点",
    },
    {
      industry: "管工事業 / 従業員12名",
      quote: "全国の自治体に登録できたおかげで、地元案件の閑散期も埋まるように。年商1.6倍。",
      name: "Y.S 様",
      company: "中部地方・管工事会社・代表",
      avatar: "管",
      label: "売上推移",
      value: "1.6×",
    },
    {
      industry: "電気工事業 / 創業7年",
      quote: "突然の指名で焦りましたが3日で資格取得。落札につながり救われました。",
      name: "T.M 様",
      company: "電気工事会社・代表取締役",
      avatar: "電",
      label: "対応スピード",
      value: "3営業日",
    },
    {
      industry: "建築一式工事 / 創業55年",
      quote: "毎年の更新作業で社員が疲弊していたが、丸ごとお任せできて事務負担が激減。",
      name: "N.T 様",
      company: "老舗工務店・代表取締役社長",
      avatar: "建",
      label: "事務時間削減",
      value: "−92%",
    },
  ];
  return (
    <section className="section" id="cases" style={{ background: "var(--paper-2)" }}>
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">CASES</div>
          <h2 className="section__title">数字で語る、<br /><span className="ja-em">お客様の声</span>。</h2>
          <p className="section__lead">業種・規模・地域を問わず、確かな成果を。一部のお客様の声をご紹介します。</p>
        </div>
        <div className="cases-grid reveal">
          {cases.map((c, i) => (
            <article className="case" key={i}>
              <div className="case__industry">{c.industry}</div>
              <div className="case__quote">{c.quote}</div>
              <div className="case__meta">
                <div className="case__avatar">{c.avatar}</div>
                <div>
                  <div className="case__name">{c.name}</div>
                  <div className="case__company">{c.company}</div>
                </div>
                <div className="case__result">
                  <div className="case__result-label">{c.label}</div>
                  <div className="case__result-value">{c.value}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== FAQ ============== */
function FAQ() {
  const items = [
    { q: "全国どこの自治体でも対応できますか？", a: "はい。北海道から沖縄まで、47都道府県・1,741市区町村・各種公社・独立行政法人まで対応しております。本社の所在地を問わず、全国の入札にご参加いただけます。" },
    { q: "費用は本当に表示価格だけですか？追加請求はありませんか？", a: "原則として、HP記載の価格と実費（証紙代・登録免許税等）以外の追加請求はございません。万一、業務範囲外の作業が必要な場合は、必ず事前にお見積りをご提示し、ご了承いただいた上で着手します。" },
    { q: "急ぎの案件には対応できますか？", a: "電子申請（gBizID）対応の機関であれば、書類整備・提出までを可能な限り迅速に進めます。発注機関側の処理期間は弊所では制御できませんが、お急ぎの事情はヒアリング時にお伝えください。スケジュール感をご一緒に整理いたします。" },
    { q: "経審の点数アップは具体的に何をしてくれますか？", a: "技術職員数・完工高・財務諸表の整え方を分析し、点数を上げるための具体的な改善策をご提案します。決算期の組み替え、職員配置、業種選択など多角的に検討し、伴走サポートします。" },
    { q: "建設業許可をまだ持っていません。一緒に取れますか？", a: "もちろんです。建設業許可（知事・大臣）の新規取得から経審・入札参加資格まで、当事務所で一貫して対応いたします。建設業許可は ¥100,000（税抜・実費別）で承ります。" },
    { q: "他県の入札に参加するには本社移転が必要ですか？", a: "いいえ、不要です。全省庁統一資格や各自治体の入札参加資格は、本社所在地に関わらず取得可能です。地元の枠を超えて、全国の入札に挑戦するお客様が増えています。" },
    { q: "オンラインのみで完結できますか？", a: "はい。電子契約・電子申請・オンラインMTGに完全対応していますので、ご来所不要で全国どこからでもご依頼いただけます。Zoom・Teams・Google Meetに対応。" },
  ];
  return (
    <section className="section" id="faq">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">FAQ</div>
          <h2 className="section__title">よくある<span className="ja-em">ご質問</span>。</h2>
          <p className="section__lead">建設業の経営者から実際に寄せられたご質問にお答えします。ここに無いご質問も、無料相談で何でもお聞きください。</p>
        </div>
        <div className="faq-list reveal">
          {items.map((it, i) => <FAQItem key={i} {...it} />)}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-item__q" onClick={() => setOpen(!open)}>
        <span className="marker">問</span>
        <span>{q}</span>
        <span className="icon" />
      </button>
      <div className="faq-item__a">
        <span className="marker">答</span>
        <div className="body">{a}</div>
        <span />
      </div>
    </div>
  );
}

/* ============== Related ============== */
function Related() {
  const items = [
    { num: "01", title: "経営事項審査（経審）", desc: "公共工事の入札参加に必須。決算変更届とあわせて毎年対応します。", href: "https://office-tree.jp/lp/keishin/" },
    { num: "02", title: "建設業許可（新規・更新）", desc: "知事許可・大臣許可いずれも対応。業種追加・般特新規もサポート。", href: "https://office-tree.jp/kensetsu" },
    { num: "03", title: "産業廃棄物収集運搬業 許可", desc: "建設現場から発生する廃棄物を、自社で運搬する場合に必要な許可。", href: "https://office-tree.jp/lp/sanpai/" },
    { num: "04", title: "宅建業免許申請", desc: "不動産業（売買・賃貸の仲介等）を営むための都道府県知事・国土交通大臣免許の申請を代行します。", href: "https://office-tree.jp/lp/takuken/" },
    { num: "05", title: "補助金申請（建設業向け）", desc: "完全成果報酬型・着手金0円。不採択時は完全無料でリスクなし。", href: "https://office-tree.jp/hojokin/" },
    { num: "06", title: "会社設立・法人設立", desc: "個人事業主から法人成りされる方向け。建設業許可・入札参加とあわせて法人化をサポートします。", href: "https://office-tree.jp/lp/kensetsu-setup/" },
  ];
  return (
    <section className="section related" id="related">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">RELATED / 関連する許認可</div>
          <h2 className="section__title">入札・公共工事と<br /><span className="ja-em">あわせて取得される許認可</span>。</h2>
          <p className="section__lead">入札参加資格申請の前後に必要となる、関連する許認可・継続サポートです。各サービスの詳細・料金は、それぞれの専門ページをご覧ください。</p>
        </div>
        <div className="related-grid reveal">
          {items.map((it) => (
            <a key={it.num} href={it.href} className="related-card">
              <div className="related-card__num">{it.num}</div>
              <div className="related-card__body">
                <div className="related-card__title">{it.title}</div>
                <div className="related-card__desc">{it.desc}</div>
              </div>
              <div className="related-card__arrow">→</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============== Blog (建設業関連を自動取得) ============== */
function Blog() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/blog/category/construction/", { credentials: "same-origin" })
      .then((res) => res.text())
      .then((html) => {
        const doc = new DOMParser().parseFromString(html, "text/html");
        const articles = doc.querySelectorAll("article.post-card");
        const items = Array.from(articles).slice(0, 3).map((art) => {
          const a = art.querySelector("a[itemprop='url']");
          const img = art.querySelector("img");
          const title = art.querySelector(".post-card-title")?.textContent.trim() || "";
          const cat = art.querySelector(".post-card-category")?.textContent.trim() || "建設業関連";
          const time = art.querySelector("time");
          const date = time?.textContent.trim() || "";
          return {
            url: a?.getAttribute("href") || "https://office-tree.jp/blog/category/construction/",
            title,
            cat,
            date,
            thumb: img?.getAttribute("src") || img?.getAttribute("data-src") || "",
          };
        });
        setPosts(items);
        setLoading(false);
      })
      .catch((err) => { console.warn("Blog fetch error:", err); setLoading(false); });
  }, []);

  return (
    <section className="section" id="blog" style={{ background: "var(--paper-2)" }}>
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">JOURNAL</div>
          <h2 className="section__title">建設業の<br /><span className="ja-em">最新ノウハウ</span>。</h2>
          <p className="section__lead">建設業許可・経審・入札関連の実務コラムを、Tree公式ブログから自動掲載しています。</p>
        </div>
        {loading ? (
          <div className="blog-loading">記事を読み込んでいます…</div>
        ) : posts.length === 0 ? (
          <div className="blog-loading">
            記事を取得できませんでした。
            <a href="https://office-tree.jp/blog/category/construction/" target="_blank" rel="noopener noreferrer">公式ブログを見る →</a>
          </div>
        ) : (
          <div className="blog-grid">
            {posts.map((p, i) => (
              <a className="post post--auto" href={p.url} target="_blank" rel="noopener noreferrer" key={i}>
                <div className="post__thumb" style={p.thumb ? { backgroundImage: `url(${p.thumb})`, backgroundSize: "cover", backgroundPosition: "center" } : {}}>
                  <div className="post__thumb-cat">{p.cat}</div>
                </div>
                <div className="post__body">
                  <div className="post__date">{p.date}</div>
                  <div className="post__title">{p.title}</div>
                </div>
              </a>
            ))}
          </div>
        )}
        <div className="blog-foot">
          <a href="https://office-tree.jp/blog/category/construction/" target="_blank" rel="noopener noreferrer" className="btn btn--ghost">建設業関連の記事をすべて見る</a>
        </div>
      </div>
    </section>
  );
}

/* ============== Form ============== */
function ContactForm() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    services: [],
    company: "", name: "", email: "", phone: "",
    region: "", message: "",
  });
  const [done, setDone] = useState(false);
  const [errors, setErrors] = useState({});
  const setField = (k, v) => {
    setData((d) => ({ ...d, [k]: v }));
    setErrors((e) => ({ ...e, [k]: undefined }));
  };
  const toggleSvc = (s) => {
    setData((d) => ({ ...d, services: d.services.includes(s) ? d.services.filter((x) => x !== s) : [...d.services, s] }));
    setErrors((e) => ({ ...e, services: undefined }));
  };

  const validateStep = (s) => {
    const errs = {};
    if (s === 0) {
      if (data.services.length === 0) errs.services = "少なくとも1つご選択ください";
    } else if (s === 1) {
      if (!data.company.trim()) errs.company = "会社名をご入力ください";
      if (!data.name.trim()) errs.name = "ご担当者名をご入力ください";
      if (!data.email.trim()) errs.email = "メールアドレスをご入力ください";
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email.trim())) errs.email = "正しいメールアドレスをご入力ください";
      if (!data.phone.trim()) errs.phone = "お電話番号をご入力ください";
      else if (!/^[\d\-+()\s]{8,}$/.test(data.phone.trim())) errs.phone = "正しい電話番号をご入力ください";
    }
    return errs;
  };

  const next = () => {
    const errs = validateStep(step);
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      return;
    }
    setErrors({});
    setStep((s) => Math.min(s + 1, 2));
  };
  const prev = () => { setErrors({}); setStep((s) => Math.max(s - 1, 0)); };
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState("");

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return; // 二重送信防止
    const allErrs = { ...validateStep(0), ...validateStep(1) };
    if (Object.keys(allErrs).length > 0) {
      setErrors(allErrs);
      const firstStep = validateStep(0);
      setStep(Object.keys(firstStep).length > 0 ? 0 : 1);
      return;
    }
    setSubmitError("");
    setSubmitting(true);

    // form の hidden inputs から FormData を構築（フィールド名は kensetsu LP と完全一致）
    const fd = new FormData(e.target);

    try {
      // /lp_send へ POST（kensetsu と同じ inc/lp_send.inc が DB 登録＋メール送信を実行）
      const res = await fetch("/lp_send", { method: "POST", body: fd, credentials: "same-origin" });
      if (!res.ok) throw new Error("status " + res.status);
      // 成功 → コンバージョン発火 → in-app 完了画面表示（ページ遷移なし）
      try {
        if (typeof window.gtag === "function") {
          window.gtag("event", "conversion", {
            send_to: "AW-11120951371/S8wcCMbQzakYEMuA8bYp"
          });
        }
        if (typeof window.ytag === "function") {
          window.ytag({
            type: "yss_conversion",
            config: {
              yahoo_conversion_id: "1001259030",
              yahoo_conversion_label: "AdhzCIC_xscbELy92-0o",
              yahoo_conversion_value: "2000"
            }
          });
        }
        if (window.dataLayer) {
          window.dataLayer.push({
            event: "form_submit",
            form_name: "nyusatsu_contact"
          });
        }
      } catch (err) {
        console.warn("Conversion tag error:", err);
      }
      setDone(true);
    } catch (err) {
      console.warn("Submit error:", err);
      setSubmitError("送信中にエラーが発生しました。お電話・メール・LINEでもご相談いただけます。");
      setSubmitting(false);
    }
  };

  if (done) {
    return (
      <div className="form">
        <div className="form__success">
          <div className="form__success-seal">受付</div>
          <div className="form__success-title">お問合せを受け付けました</div>
          <div className="form__success-desc">
            営業時間内に、専任担当より速やかにご連絡いたします。<br />
            営業時間外のお問合せは、翌営業日以降のご対応となります。
          </div>
        </div>
      </div>
    );
  }

  return (
    <form className="form" action="/lp_send" method="post" onSubmit={submit}>
      {/* kensetsu LP と同じ送信スペック: hidden inputs */}
      <input type="hidden" name="category" value="入札参加資格申請" />
      <input type="hidden" name="page" value="nyusatsu" />
      <input type="hidden" name="your-name" value={`${data.company} / ${data.name}`} />
      <input type="hidden" name="your-mail" value={data.email} />
      <input type="hidden" name="your-tel" value={data.phone} />
      <input type="hidden" name="your-consult" value={data.services.join("、") || "入札参加資格申請"} />
      <input type="hidden" name="your-contact" value="メール" />
      <input type="hidden" name="your-message" value={
        `【ご希望サービス】\n${data.services.join("、") || "—"}\n\n` +
        `【会社名】${data.company}\n【ご担当者名】${data.name}\n【本社所在地】${data.region || "—"}\n\n` +
        `【ご相談内容】\n${data.message || "（記入なし）"}\n\n─ /lp/nyusatsu/ からの送信 ─`
      } />
      {/* honeypot (kensetsu LP と同じ) */}
      <input type="text" name="company_website" tabIndex={-1} autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true" />
      <div className="form__progress">
        {["ご希望サービス", "ご連絡先", "ご相談内容"].map((label, i) => (
          <button type="button" key={i}
            className={(step === i ? "active " : "") + (step > i ? "done" : "")}
            onClick={() => {
              if (i <= step) { setErrors({}); setStep(i); return; }
              const errs = {};
              for (let s = step; s < i; s++) Object.assign(errs, validateStep(s));
              if (Object.keys(errs).length > 0) { setErrors(errs); return; }
              setErrors({}); setStep(i);
            }}>
            <span className="num">0{i + 1}</span>{label}
          </button>
        ))}
      </div>

      <div className={"form__step" + (step === 0 ? " active" : "")}>
        <div className="form__row">
          <div className="form__label">ご希望のサービス（複数選択可）<span className="req">必須</span></div>
          <div className="form__check">
            {["入札参加資格申請（官庁・自治体）", "決算変更届＋経審サポート", "建設業許可（新規・更新）", "産業廃棄物収集運搬業 許可", "宅建業免許申請", "補助金申請（建設業向け）", "会社設立・法人設立"].map((s) => (
              <label key={s} className={data.services.includes(s) ? "checked" : ""}>
                <input type="checkbox" checked={data.services.includes(s)} onChange={() => toggleSvc(s)} />
                {s}
              </label>
            ))}
          </div>
          {errors.services && <div className="form__error">{errors.services}</div>}
        </div>
        <div className="form__nav">
          <button type="button" className="form__btn form__btn--next" onClick={next}>次へ →</button>
        </div>
      </div>

      <div className={"form__step" + (step === 1 ? " active" : "")}>
        <div className="form__row split">
          <div>
            <div className="form__label">会社名<span className="req">必須</span></div>
            <input className={"form__input" + (errors.company ? " has-error" : "")} value={data.company} onChange={(e) => setField("company", e.target.value)} placeholder="株式会社○○建設" />
            {errors.company && <div className="form__error">{errors.company}</div>}
          </div>
          <div>
            <div className="form__label">ご担当者名<span className="req">必須</span></div>
            <input className={"form__input" + (errors.name ? " has-error" : "")} value={data.name} onChange={(e) => setField("name", e.target.value)} placeholder="山田 太郎" />
            {errors.name && <div className="form__error">{errors.name}</div>}
          </div>
        </div>
        <div className="form__row split">
          <div>
            <div className="form__label">メールアドレス<span className="req">必須</span></div>
            <input className={"form__input" + (errors.email ? " has-error" : "")} type="email" value={data.email} onChange={(e) => setField("email", e.target.value)} placeholder="example@company.co.jp" />
            {errors.email && <div className="form__error">{errors.email}</div>}
          </div>
          <div>
            <div className="form__label">お電話番号<span className="req">必須</span></div>
            <input className={"form__input" + (errors.phone ? " has-error" : "")} value={data.phone} onChange={(e) => setField("phone", e.target.value)} placeholder="042-404-2927" />
            {errors.phone && <div className="form__error">{errors.phone}</div>}
          </div>
        </div>
        <div className="form__row">
          <div className="form__label">本社所在地</div>
          <select className="form__select" value={data.region} onChange={(e) => setField("region", e.target.value)}>
            <option value="">選択してください</option>
            {[
              "北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県",
              "茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県",
              "新潟県","富山県","石川県","福井県","山梨県","長野県",
              "岐阜県","静岡県","愛知県","三重県",
              "滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県",
              "鳥取県","島根県","岡山県","広島県","山口県",
              "徳島県","香川県","愛媛県","高知県",
              "福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"
            ].map((r) => <option key={r}>{r}</option>)}
          </select>
        </div>
        <div className="form__nav">
          <button type="button" className="form__btn form__btn--prev" onClick={prev}>← 戻る</button>
          <button type="button" className="form__btn form__btn--next" onClick={next}>次へ →</button>
        </div>
      </div>

      <div className={"form__step" + (step === 2 ? " active" : "")}>
        <div className="form__row">
          <div className="form__label">ご相談内容</div>
          <textarea className="form__textarea" value={data.message} onChange={(e) => setField("message", e.target.value)} placeholder="希望自治体・現状の課題・スケジュール感など、自由にご記入ください。" />
        </div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 13, color: "rgba(246,241,232,0.6)", lineHeight: 1.85, padding: "16px 0", borderTop: "1px solid rgba(246,241,232,0.1)", borderBottom: "1px solid rgba(246,241,232,0.1)" }}>
          送信前に内容をご確認ください。送信後、専任担当より速やかにご連絡を差し上げます。<br />
          ※ ご相談はいつでも何度でも無料・秘密厳守。営業電話は一切いたしません。
        </div>
        {submitError && <div className="form__error" style={{ marginTop: 16 }}>{submitError}</div>}
        <div className="form__nav">
          <button type="button" className="form__btn form__btn--prev" onClick={prev} disabled={submitting}>← 戻る</button>
          <button type="submit" className="form__btn form__btn--submit" disabled={submitting}>{submitting ? "送信中..." : "この内容で送信する →"}</button>
        </div>
      </div>
    </form>
  );
}

function Contact() {
  return (
    <section className="section form-section" id="contact">
      <div className="section__inner">
        <div className="reveal">
          <div className="section__eyebrow">CONTACT</div>
          <h2 className="section__title">まずは、<br /><span style={{ color: "var(--shu-bright)" }}>無料相談</span>から。</h2>
          <p className="section__lead" style={{ color: "rgba(246,241,232,0.7)" }}>お電話・メール・LINE・フォーム、お好きな方法でご相談いただけます。</p>
        </div>
        <div className="form-grid">
          <div className="form-side reveal">
            <div className="form-side__title">お電話・メールでのご相談</div>
            <div className="contact-list">
              <a href="tel:042-404-2927" className="contact-item">
                <div className="contact-item__icon">電</div>
                <div>
                  <div className="contact-item__label">TELEPHONE</div>
                  <div className="contact-item__value">042-404-2927<small>月〜土 9:00 - 17:00（日曜定休）</small></div>
                </div>
              </a>
              <a href="https://page.line.me/oam3089h" target="_blank" rel="noopener noreferrer" className="contact-item">
                <div className="contact-item__icon">L</div>
                <div>
                  <div className="contact-item__label">LINE</div>
                  <div className="contact-item__value">行政書士法人Tree<small>友だち追加で 24時間受付</small></div>
                </div>
              </a>
              <a href="mailto:info@office-tree.jp" className="contact-item">
                <div className="contact-item__icon">M</div>
                <div>
                  <div className="contact-item__label">EMAIL</div>
                  <div className="contact-item__value">info@office-tree.jp<small>24時間受付・速やかに返信</small></div>
                </div>
              </a>
              <div className="contact-item">
                <div className="contact-item__icon">所</div>
                <div>
                  <div className="contact-item__label">OFFICE</div>
                  <div className="contact-item__value">国立オフィス<small>〒186-0004 東京都国立市中1-9-8 第7叶ビル3F</small></div>
                </div>
              </div>
            </div>
            <div style={{ marginTop: 40, padding: 24, background: "rgba(185,29,29,0.12)", border: "1px solid rgba(214,56,56,0.3)" }}>
              <div style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.25em", color: "var(--shu-bright)", marginBottom: 8 }}>NOTICE</div>
              <div style={{ fontFamily: "var(--serif)", fontSize: 14, lineHeight: 1.85 }}>
                ご相談はいつでも何度でも無料・秘密厳守。<br />
                しつこい営業電話は一切いたしません。
              </div>
            </div>
          </div>
          <div className="reveal">
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== Footer ============== */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__top">
          <div>
            <div className="footer__brand-row">
              <img className="topbar__seal" src="https://office-tree.jp/img/treelogo2.webp" alt="行政書士法人Tree" />
              <div className="footer__brand-name">行政書士法人Tree</div>
            </div>
            <div className="footer__address">
              〒186-0004<br />
              東京都国立市中1丁目9-8 第7叶ビル3F<br />
              TEL: 042-404-2927<br />
              月〜土 9:00 - 17:00（日曜定休）<br />
              <br />
              東京都行政書士会所属<br />
              会員番号 第21081224号
            </div>
          </div>
          <div>
            <div className="footer__col-title">SERVICES</div>
            <ul className="footer__links">
              <li><a href="#service">入札参加資格申請（本ページ）</a></li>
              <li><a href="/lp/keishin/" target="_blank" rel="noopener noreferrer">経営事項審査</a></li>
              <li><a href="https://office-tree.jp/kensetsu" target="_blank" rel="noopener noreferrer">建設業許可</a></li>
              <li><a href="https://office-tree.jp/lp/sanpai/" target="_blank" rel="noopener noreferrer">産業廃棄物収集運搬業</a></li>
              <li><a href="https://office-tree.jp/services.html" target="_blank" rel="noopener noreferrer">その他サービス</a></li>
            </ul>
          </div>
          <div>
            <div className="footer__col-title">COMPANY</div>
            <ul className="footer__links">
              <li><a href="https://office-tree.jp/" target="_blank" rel="noopener noreferrer">公式サイト</a></li>
              <li><a href="https://office-tree.jp/company.html" target="_blank" rel="noopener noreferrer">事務所案内</a></li>
              <li><a href="https://office-tree.jp/services.html" target="_blank" rel="noopener noreferrer">サービス一覧</a></li>
              <li><a href="https://office-tree.jp/ryokin/" target="_blank" rel="noopener noreferrer">料金一覧</a></li>
              <li><a href="https://office-tree.jp/blog/" target="_blank" rel="noopener noreferrer">ジャーナル</a></li>
            </ul>
          </div>
          <div>
            <div className="footer__col-title">CONTACT & LEGAL</div>
            <ul className="footer__links">
              <li><a href="https://office-tree.jp/contact/" target="_blank" rel="noopener noreferrer">お問い合わせ</a></li>
              <li><a href="tel:042-404-2927">042-404-2927</a></li>
              <li><a href="https://page.line.me/oam3089h" target="_blank" rel="noopener noreferrer">LINE無料相談</a></li>
              <li><a href="https://office-tree.jp/policy.html" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© 2026 Tree GYOSEISHOSHI HOJIN. ALL RIGHTS RESERVED.</div>
          <div>建設業の挑戦を、書類で支える。</div>
        </div>
      </div>
    </footer>
  );
}

/* ============== Sticky CTA ============== */
function StickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 700);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"sticky-cta" + (visible ? " visible" : "")}>
      <a href="tel:042-404-2927" className="tel">電話で無料相談</a>
      <a href="mailto:info@office-tree.jp" className="mail">メールで無料相談</a>
      <a href="https://page.line.me/oam3089h" target="_blank" rel="noopener noreferrer" className="line">LINEで無料相談</a>
    </div>
  );
}

/* ============== App ============== */
function App() {
  useReveal();
  return (
    <>
      <TopBar />
      <Hero />
      <Crisis />
      <Reasons />
      <Service />
      <Synergy />
      <Pricing />
      <Scope />
      <Flow />
      <FAQ />
      <Related />
      <Blog />
      <Contact />
      <Footer />
      <StickyCTA />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);