// 令和財託株式会社 - Corporate Site App
const { useState, useEffect } = React;

// ===============================
// Company data
// ===============================
const COMPANY = {
  nameJp: '令和財託株式会社',
  nameEn: 'REIWA ZAITAKU',
  tel: '03-6822-4603',
  email: 'info@reiwa-zaitaku.co.jp',
  address: '東京都中央区日本橋小網町8-2 BIZMARKS日本橋茅場町311号室',
  zip: '103-0016',
  headOfficeAddress: '東京都中央区日本橋兜町16番4号 島田ビル7F',
  headOfficeZip: '103-0026',
  ceo: '遠田 隆介',
  capital: '900万円',
  founded: '2024年',
  hours: '平日 9:00 - 20:00',
  corporateNumber: '1011103015635',
  // 公式LINEアカウントの友だち追加URL
  lineUrl: 'https://lin.ee/ZBMlCFG',
};

const STATS = [
  { value: '5', unit: '億円', label: '累計買取額' },
  { value: '3,000', unit: '件+', label: '累計取引件数' },
  { value: '2', unit: '時間', label: '最短入金スピード' },
  { value: '98', unit: '%', label: '審査通過率' },
];

const REASONS = [
  { icon: '⚡', title: '最短2時間の\nスピード入金', desc: '面倒な書類提出は最小限。オンライン完結で、お申込み当日中の資金化も可能です。急な資金需要にも即対応。' },
  { icon: '％', title: '業界最安水準の\n低手数料', desc: '2社間ファクタリングでも柔軟な手数料設定。長期取引・乗り換えでも他社に負けない条件をご提示します。' },
  { icon: '🏗', title: '建設業に強い\n現場を知る提案', desc: '日本で唯一、内装工事事業を自社運営。工期・出来高・下請け構造を熟知した最適な資金繰り提案が可能。' },
  { icon: '◎', title: '他社で断られた\n案件も柔軟審査', desc: '赤字決算・税金滞納・債務超過でも独自基準で審査。他社ファクタリングやローンご利用中、銀行リスケ中でも、売掛先の信用力を重視した柔軟な審査で資金調達が可能です。' },
  { icon: '🔒', title: '売掛先に知られない\n2社間対応', desc: '取引先への通知・承諾は不要。お客様と当社だけで完結するため、大切な取引関係に一切影響しません。' },
  { icon: '💼', title: '法人・個人事業主\n両方に対応', desc: '個人事業主から大型法人案件まで、数万円から数億円規模まで幅広くカバー。業種も基本すべて対応。' },
];

const WORRIES = [
  '入金までのつなぎ資金が急に必要になった',
  '銀行融資の審査に落ちてしまった',
  '税金の滞納があり融資が受けられない',
  '他社ファクタリングの手数料が高すぎる',
  '他社ファクタリングやローンを利用中でも資金調達したい',
  '銀行のリスケ(返済猶予)中でも資金調達したい',
  '建設業で出来高払いまでのつなぎに困っている',
  '個人事業主でも即日資金調達したい',
  '売掛先に知られずに資金化したい',
  '赤字決算でも資金調達できる方法を探している',
];

const CASES = [
  { no: '01', industry: '内装工事業', amount: '2,500万円', days: '当日', comment: '大型案件の受注後、材料仕入と職人手配で資金が必要でした。<strong>現場を理解した担当者</strong>の提案で、出来高を待たずにスムーズに資金化できました。' },
  { no: '02', industry: '運送業', amount: '450万円', days: '2時間', comment: '燃料費高騰で資金繰りが悪化していたところ、<strong>朝の問い合わせで午前中に着金</strong>。翌週の支払いに間に合いました。担当者の対応も迅速丁寧でした。' },
  { no: '03', industry: 'IT・広告業', amount: '1,200万円', days: '1日', comment: '大手クライアントの請求書を活用。<strong>入金サイト60日を待たず</strong>に運転資金を確保でき、新規プロジェクトへの投資も判断できました。' },
  { no: '04', industry: '製造業', amount: '3,000万円', days: '3日', comment: '3社間ファクタリングで<strong>手数料を抑えた資金調達</strong>を実現。他社より0.5%以上低い条件をご提示いただき、乗り換えて正解でした。' },
  { no: '05', industry: '飲食業(個人事業主)', amount: '80万円', days: '当日', comment: '個人事業主でも門前払いされず、<strong>売掛先の信用で柔軟に審査</strong>していただけました。開業間もない当店には本当にありがたいサービスです。' },
  { no: '06', industry: '建築塗装業', amount: '850万円', days: '2日', comment: '他社で断られた注文書ファクタリング。<strong>建設業に理解のある令和財託</strong>だからこそ実現できた資金調達でした。今後も継続利用します。' },
];

// トップページ ヒーロー直下の数値バッジ(※全て想定・訴求上の目安値)
const HERO_BADGES = [
  { icon: '⚡', value: '最短2時間', label: 'スピード入金' },
  { icon: '％', value: '1%〜', label: '業界最安水準の手数料' },
  { icon: '📄', value: '3点', label: '必要書類' },
  { icon: '💰', value: '最大数億円', label: '調達可能額' },
];

// 導入事例ストーリー(※イメージです。実在の特定企業・事案を示すものではありません)
const CASE_STORIES = [
  {
    industry: '内装工事業・金属加工業',
    founded: '2015年',
    area: '東京都',
    sales: '2億8,000万円',
    employees: '22名',
    topics: [
      '出来高払い待ちの資金繰りを解消し、受注拡大へ',
      'ファクタリングを急場しのぎから成長投資の手段へ転換',
      '建設業の実情を理解した担当者との信頼関係を構築',
    ],
    body: [
      '内装工事業を営むA社様は、大型案件を立て続けに受注したものの、出来高払いの入金サイクルと材料仕入・職人手配のタイミングが合わず、資金繰りに頭を悩ませていました。',
      '以前利用していた他社ファクタリングでは、建設業特有の出来高払いの仕組みへの理解が浅く、条件面で納得感を得られなかったといいます。そんな中で出会ったのが、自社でも内装工事事業を運営する令和財託でした。',
      '現場の実情を熟知した担当者が、工期や下請け構造を踏まえた柔軟な提案を行ったことで、スムーズな資金化を実現。以降は出来高払いを待たずに次の案件へ着手できる体制が整い、受注機会を逃さない経営基盤を築いています。',
      '現在はつなぎ資金としてだけでなく、新規設備投資や人材採用など、事業拡大の資金調達手段としてもファクタリングを継続的に活用いただいています。',
    ],
  },
  {
    industry: '運送業',
    founded: '2012年',
    area: '神奈川県',
    sales: '1億5,000万円',
    employees: '15名',
    topics: [
      '燃料費高騰による資金ショートの危機を回避',
      '朝の相談から当日中の資金化を実現',
      '継続利用により資金繰りの見通しが安定',
    ],
    body: [
      '運送業を営むB社様は、燃料費の急激な高騰により、仕入先への支払いと売上の入金サイクルにズレが生じ、資金繰りが逼迫していました。',
      '「今日・明日の支払いに間に合わせたい」というご相談を朝一番でいただき、担当者がすぐにヒアリング。必要書類も請求書・通帳・本人確認書類の3点のみで、オンラインで手続きを進められたため、午前中には審査結果と条件をご提示できました。',
      'ご納得いただいた上でご契約いただき、その日のうちに指定口座へ着金。急な支払いにも間に合わせることができました。',
      '以降は単発の資金調達にとどまらず、燃料費の変動に備えた定期的な資金繰りの相談先として、継続的にご利用いただいています。',
    ],
  },
];

// お客様の声(※イメージです。実在の特定企業・事案を示すものではありません)
const TESTIMONIALS = [
  { industry: '建設資材販売業', area: '東京都', title: '必要書類が少なく、スムーズに進められました', body: '資金調達を急いでいましたが、用意する書類が請求書・通帳・本人確認書類の3点だけでわかりやすく、相談から見積りまで滞りなく進みました。初めての利用でも丁寧な説明があり安心できました。' },
  { industry: '精密機械部品製造業', area: '愛知県', title: '手数料がわかりやすく、納得して利用できました', body: '複数のファクタリング会社に問い合わせましたが、令和財託は手数料や振込額を最初に明確に説明してくれました。不明な費用がなく、見積りを確認してから判断できたので安心して契約できました。' },
  { industry: '食品加工業', area: '福岡県', title: '来店不要で、オンライン完結でした', body: '遠方のため訪問せずに利用できるか不安でしたが、相談から書類提出、契約までオンラインで完結。スマートフォンから書類を送ることができ、忙しい業務の合間でも手続きできました。' },
  { industry: '建築塗装業', area: '大阪府', title: '他社で断られた案件も柔軟に対応してもらえました', body: '一般的なファクタリング会社では対応が難しいと言われた注文書ファクタリングでしたが、建設業に理解のある令和財託だからこそ実現できました。今後も継続して利用したいと思います。' },
  { industry: '飲食業(個人事業主)', area: '北海道', title: '個人事業主でも門前払いされませんでした', body: '開業したばかりで実績も少ない中でしたが、売掛先の信用力を重視して柔軟に審査していただけました。小口の案件でも真摯に対応していただき、大変助かりました。' },
  { industry: 'IT・広告業', area: '大阪府', title: '急な資金需要にスピーディーに対応', body: '新規プロジェクトの着手に伴い急きょ運転資金が必要になり相談しました。必要書類や流れをすぐに案内してもらえ、入金サイトを待たずに資金を確保できたことで、投資判断を先送りせずに進められました。' },
];

const FAQ = [
  { q: 'ファクタリングとは何ですか？', a: 'ファクタリングとは、企業が保有する売掛債権（請求書）を当社に売却することで、支払期日前に現金化する資金調達方法です。融資ではないため、負債にならず、信用情報にも影響しません。国が推奨する健全な資金調達手段です。' },
  { q: '審査に必要な書類は何ですか？', a: '基本的には「請求書」「通帳のコピー(直近3ヶ月分)」「本人確認書類」の3点で審査可能です。追加書類が必要な場合もありますが、他社と比較して必要書類は最小限に抑えています。' },
  { q: '手数料はどのくらいかかりますか？', a: '2社間ファクタリングで2%〜、3社間ファクタリングで1%〜が目安です。売掛先の信用力・取引金額・継続利用の有無によって変動します。他社利用中・乗り換えの方には特別な条件もご用意しております。' },
  { q: '個人事業主でも利用できますか？', a: 'はい、ご利用いただけます。数万円の小口案件から対応可能です。売掛先が法人であれば、開業間もない方でも柔軟に審査いたします。' },
  { q: '赤字・税金滞納・債務超過でも利用できますか？', a: '可能です。ファクタリングは融資ではないため、貴社の財務状況ではなく<strong>売掛先の信用力</strong>を重視して審査します。他社で断られた方も、ぜひ一度ご相談ください。' },
  { q: '売掛先に知られずに利用できますか？', a: '2社間ファクタリングをご利用いただければ、売掛先への通知・承諾は一切不要です。お客様と当社だけで完結するため、取引関係に影響を与えません。' },
  { q: '建設業でも利用できますか？', a: 'はい、むしろ得意分野です。当社は自社で内装工事事業を運営しており、建設業特有の出来高払い・工期・下請け構造を熟知しています。請求書だけでなく<strong>注文書ファクタリング</strong>も対応可能です。' },
  { q: '最短でどのくらいで資金化できますか？', a: '最短2時間での入金実績があります。オンライン完結の申込・面談で、書類が揃っていれば即日中の資金化も十分可能です。お急ぎの旨をお伝えください。' },
  { q: 'ファクタリングと融資の違いは何ですか？', a: '融資は「借入」であり負債として計上され信用情報にも影響します。ファクタリングは所有する<strong>売掛債権の「売却」</strong>であり、負債にならず信用情報への影響もありません。国(経済産業省・中小企業庁)も推奨する資金調達手法です。' },
  { q: '手数料が高いと言われるのはなぜですか？', a: '一部の悪徳業者が違法な高手数料を取るケースが問題視されているためです。適正な事業者の手数料は2社間で2%〜、3社間で1%〜が相場です。当社では<strong>業界最安水準の手数料</strong>でご提供しています。' },
  { q: 'ファクタリングを利用すると銀行融資に影響しますか？', a: 'ファクタリングは負債ではないため、原則として銀行融資の審査にマイナスの影響を与えません。むしろ資金繰りが安定することで、融資審査にプラスに働くケースもあります。' },
  { q: '申込みから入金までどのような流れですか？', a: 'STEP1お申込み(3分)→STEP2審査申込・必要書類提出(3分)→STEP3ご契約・ご入金(30分)の3ステップです。オンライン完結で、<strong>最短2時間</strong>でお客様の指定口座へご入金いたします。' },
  { q: 'どのくらいの金額から利用できますか？', a: '数万円の小口案件から数億円規模の大口案件まで幅広く対応しています。上限・下限を理由にお断りすることはほとんどありません。まずはお気軽にご相談ください。' },
  { q: 'ファクタリング会社を選ぶ際のポイントは？', a: '手数料の透明性、対応スピード、必要書類の少なさ、業種への理解度、契約書の内容(買戻し特約の有無等)が重要です。当社は<strong>建設業を含む幅広い業種の実務を理解</strong>した審査・提案が強みです。' },
  { q: '他社から乗り換えることはできますか？', a: 'はい、可能です。手数料が高い、対応が遅いといった不満がある場合、他社ご利用中でも乗り換えいただけます。他社よりも低い手数料をご提示できるケースが多くございます。また、他社ファクタリングやローンをご利用中の方、銀行のリスケ(返済猶予)をご利用中の方でも、売掛先の信用力を重視した審査でご対応可能です。' },
  { q: '必要書類は何ですか？', a: '基本的には「請求書」「通帳のコピー(直近3ヶ月分)」「本人確認書類」の<strong>3点のみ</strong>です。案件によって追加資料をお願いする場合もありますが、他社と比較して必要書類は最小限です。' },
  { q: '取引先が個人事業主でも利用できますか？', a: '売掛先が個人事業主の場合でも、信用力や取引実績によっては利用いただける場合があります。個別の状況をお伺いした上で柔軟に審査いたしますので、まずはご相談ください。' },
  { q: '契約で注意すべき点は何ですか？', a: '<strong>買戻し特約(償還請求権)</strong>の有無、手数料以外の追加費用、債権譲渡登記の要否を必ず確認してください。当社は契約前に全ての費用・条件を明確にご説明いたします。' },
  { q: 'ファクタリングは違法ではないのですか？', a: '適正な手続きに基づくファクタリングは合法で、国も中小企業の資金調達手段として推奨しています。違法性が問題になるのは、給与ファクタリングを偽装した実質的な貸金業などの悪質なケースです。' },
  { q: '建設業の出来高払いにも対応できますか？', a: '対応可能です。当社は自社で内装工事事業を運営しているため、<strong>出来高払い・工期・下請け構造</strong>といった建設業特有の資金繰りの実情を理解した審査・提案ができます。' },
  { q: '注文書(発注書)だけでも利用できますか？', a: 'はい、可能です。注文書ファクタリングは請求書発行前の受注段階で資金化できるサービスで、建設業・製造業のように前払いが多い業種に特に適しています。' },
  { q: '確定申告をしていない個人事業主でも可能ですか？', a: '確定申告書がなくても、請求書や取引の実態が確認できれば審査可能なケースがあります。開業間もない方でも一度ご相談ください。' },
  { q: 'オンラインだけで契約は完結しますか？', a: 'はい、当社ではオンライン完結でのお申込み・審査・契約に対応しています。来社不要で、最短2時間でのご入金が可能です。' },
  { q: '利用がばれることはありますか？', a: '<strong>2社間ファクタリング</strong>であれば、売掛先への通知・承諾は一切不要です。お客様と当社だけで取引が完結するため、取引先にファクタリング利用を知られることはありません。' },
  { q: '複数の請求書をまとめてファクタリングできますか？', a: '複数の請求書をまとめてご相談いただくことも可能です。一度の審査で複数の売掛債権を資金化できるため、事務手続きの手間を削減できます。' },
  { q: '税金や社会保険料を滞納していても利用できますか？', a: '利用可能です。ファクタリングは融資ではないため、貴社の税金・保険料の滞納状況ではなく<strong>売掛先の信用力</strong>を重視して審査します。他社で断られた方もぜひご相談ください。' },
  { q: '利用回数に制限はありますか？', a: '回数制限はありません。継続的にご利用いただくお客様も多く、継続利用の場合は手数料の優遇をご提案できるケースもあります。' },
  { q: '相談は無料ですか？', a: 'ご相談・お見積りは無料です。会社名・月商・代表者名などの基本情報だけで簡単に診断できる無料相談フォームもご用意しています。強引な営業は一切ございません。' },
  { q: '夜間や休日でも相談はできますか？', a: '営業時間は平日9:00〜20:00です。営業時間内であれば<strong>最短30分</strong>でご返信いたします。お急ぎの場合はお電話でのご相談もおすすめです。' },
];

const BLOG_POSTS = [
  { id: 'p1', cat: 'ファクタリング基礎', date: '2026.08.28', title: 'ファクタリングとは？仕組みから手数料相場まで完全解説', tags: ['ファクタリング', '基礎知識'], excerpt: '売掛金を早期に現金化するファクタリングの仕組み、種類、手数料相場を徹底解説します。' },
  { id: 'p2', cat: '建設業', date: '2026.08.20', title: '建設業のファクタリング活用法｜出来高払いのつなぎ資金に', tags: ['建設業', '資金繰り'], excerpt: '出来高払い制度で資金繰りに悩む建設業向けに、注文書ファクタリングを含む活用法を紹介。' },
  { id: 'p3', cat: '審査', date: '2026.08.14', title: 'ファクタリング審査に通らない理由と対策5選', tags: ['審査', 'ノウハウ'], excerpt: '審査落ちの原因を分析し、通過率を上げるための具体的な対策を経験豊富な担当者が解説。' },
  { id: 'p4', cat: '乗り換え', date: '2026.08.05', title: '他社ファクタリングから乗り換えるメリット・注意点', tags: ['乗り換え', '手数料'], excerpt: '手数料が高い、対応が遅い…そんな悩みを解決する乗り換えのタイミングと選び方。' },
  { id: 'p5', cat: '個人事業主', date: '2026.07.30', title: '個人事業主の請求書即日資金化ガイド', tags: ['個人事業主', '即日'], excerpt: '銀行融資が難しい個人事業主でも活用できる、請求書を使った即日資金調達の方法。' },
  { id: 'p6', cat: 'ファクタリング基礎', date: '2026.07.22', title: '2社間・3社間ファクタリングの違いと選び方', tags: ['2社間', '3社間'], excerpt: '売掛先に知られたくない場合の2社間、手数料を抑えたい場合の3社間、それぞれの選び方を解説。' },
];

const NEWS = [
  { date: '2026.09.26', cat: 'お知らせ', title: '日本橋(中央区)へオフィス移転いたしました' },
  { date: '2026.09.01', cat: 'お知らせ', title: '公式ウェブサイトをリニューアルいたしました' },
  { date: '2026.08.15', cat: 'コラム', title: '建設業向けファクタリング特集記事を公開しました' },
  { date: '2026.07.20', cat: 'サービス', title: 'オンライン完結サービスの対応時間を拡大いたしました' },
  { date: '2026.05.01', cat: 'お知らせ', title: '創業1周年を迎えることができました' },
];

// ===============================
// Components
// ===============================
function Header({ page, setPage, theme }) {
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    document.body.classList.toggle('drawer-open', menuOpen);
    return () => document.body.classList.remove('drawer-open');
  }, [menuOpen]);
  const items = [
    { id: 'top', label: 'トップ' },
    { id: 'factoring', label: 'ファクタリング事業' },
    { id: 'strengths', label: '選ばれる理由' },
    { id: 'flow', label: 'ご利用の流れ' },
    { id: 'consult', label: '無料相談' },
    { id: 'construction', label: '建設事業' },
    { id: 'company', label: '会社概要' },
    { id: 'blog', label: 'ブログ' },
    { id: 'contact', label: 'お問い合わせ' },
  ];
  const [expandedItem, setExpandedItem] = useState(null);
  const menuStructure = [
    { type: 'featured', links: [
      { id: 'flow', label: 'ご利用の流れ', icon: '📋' },
      { id: 'consult', label: '今すぐ資金調達したい方', icon: '⚡' },
      { id: 'consult', label: '相談してから利用したい方', icon: '💬' },
    ]},
    { type: 'group', title: '事業領域', links: [
      { id: 'factoring', label: 'ファクタリング事業', key: 'factoring', children: [
        { id: 'factoring', label: 'ファクタリングについて' },
        { id: 'factoring', label: '2者間ファクタリング', hash: '#type-2party' },
        { id: 'factoring', label: '3者間ファクタリング', hash: '#type-3party' },
        { id: 'factoring', label: '注文書ファクタリング', hash: '#type-po' },
      ]},
      { id: 'construction', label: '建設事業' },
    ]},
    { type: 'group', title: '検討する', links: [
      { id: 'strengths', label: '選ばれる理由' },
      { id: 'faq', label: 'よくある質問' },
      { id: 'blog', label: 'ファクタリング知識' },
    ]},
    { type: 'group', title: '会社情報', links: [
      { id: 'company', label: '会社概要' },
      { id: 'contact', label: 'お問い合わせ' },
    ]},
  ];
  const handleMenuClick = (link) => {
    setPage(link.id);
    setMenuOpen(false);
    setExpandedItem(null);
    if (link.hash) {
      setTimeout(() => {
        const el = document.querySelector(link.hash);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 200);
    }
  };
  const toggleExpand = (key) => {
    setExpandedItem(expandedItem === key ? null : key);
  };
  return (
    <header className="header">
      <div className="header-top">
        <a className="logo" href="/" onClick={(e) => { e.preventDefault(); setPage('top'); }} style={{ cursor: 'pointer' }}>
          <span className="logo-jp">令和財託</span>
          <span className="logo-en">REIWA ZAITAKU CO., LTD.</span>
        </a>
        <div className="header-actions">
          <div className="header-ctas">
            <button className="header-cta-btn dark" onClick={() => setPage('consult')}>
              <div className="header-cta-label">
                <span className="tilde-left">〜</span>担当者に相談で安心！<span className="tilde-right">〜</span>
              </div>
              <div className="header-cta-main">
                無料で相談する <span className="arrow">›</span>
              </div>
            </button>
            <button className="header-cta-btn light" onClick={() => setPage('consult')}>
              <div className="header-cta-label">
                <span className="tilde-left">〜</span>やりとり不要で早い！<span className="tilde-right">〜</span>
              </div>
              <div className="header-cta-main">
                今すぐ審査に進む <span className="arrow">›</span>
              </div>
            </button>
          </div>
          <button className="header-menu-btn" onClick={() => setMenuOpen(true)} aria-label="メニュー">
            <span></span>
            <span></span>
            <span></span>
            <div className="header-menu-label">MENU</div>
          </button>
          <a href={'tel:' + COMPANY.tel.replace(/-/g, '')} className="header-tel-wrap">
            <div className="header-tel-label">お電話でのご相談</div>
            <div className="header-tel">
              <svg className="header-tel-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
              </svg>
              {COMPANY.tel}
            </div>
            <div className="header-tel-hours">受付 {COMPANY.hours}</div>
          </a>
        </div>
      </div>
      <div className="header-bottom">
        <nav className="nav">
          {items.map(it => (
            <a
              key={it.id}
              href={PAGE_PATHS[it.id] || '/'}
              className={`nav-item ${page === it.id ? 'active' : ''}`}
              onClick={(e) => { e.preventDefault(); setPage(it.id); }}
            >{it.label}</a>
          ))}
        </nav>
      </div>

      {/* ドロワーメニュー */}
      <div className={`drawer-overlay ${menuOpen ? 'open' : ''}`} onClick={() => setMenuOpen(false)}></div>
      <div className={`drawer ${menuOpen ? 'open' : ''}`}>
        <div className="drawer-head">
          <div className="drawer-brand">
            <div className="logo-jp">令和財託</div>
            <div className="logo-en">REIWA ZAITAKU CO., LTD.</div>
          </div>
          <button className="drawer-close" onClick={() => setMenuOpen(false)} aria-label="閉じる">×</button>
        </div>
        <div className="drawer-body">
          {menuStructure.map((section, si) => {
            if (section.type === 'featured') {
              return (
                <div key={si} className="drawer-featured">
                  {section.links.map((l, li) => (
                    <a key={li} href={PAGE_PATHS[l.id] || '/'} className="drawer-featured-btn" onClick={(e) => { e.preventDefault(); handleMenuClick(l); }}>
                      <span className="drawer-featured-icon">{l.icon}</span>
                      <span className="drawer-featured-label">{l.label}</span>
                      <span className="drawer-featured-arrow">›</span>
                    </a>
                  ))}
                </div>
              );
            }
            return (
              <div key={si} className="drawer-group">
                <div className="drawer-group-title">{section.title}</div>
                <ul className="drawer-links">
                  {section.links.map((l, li) => (
                    l.children ? (
                      <li key={li} className={`has-children ${expandedItem === l.key ? 'expanded' : ''}`}>
                        <button className="drawer-link-parent" onClick={() => toggleExpand(l.key)}>
                          <span>{l.label}</span>
                          <span className="drawer-link-arrow expand">▾</span>
                        </button>
                        <ul className="drawer-sublinks">
                          {l.children.map((c, ci) => (
                            <li key={ci}>
                              <a href={(PAGE_PATHS[c.id] || '/') + (c.hash || '')} onClick={(e) => { e.preventDefault(); handleMenuClick(c); }}>
                                <span>{c.label}</span>
                                <span className="drawer-link-arrow">›</span>
                              </a>
                            </li>
                          ))}
                        </ul>
                      </li>
                    ) : (
                      <li key={li}>
                        <a href={PAGE_PATHS[l.id] || '/'} onClick={(e) => { e.preventDefault(); handleMenuClick(l); }}>
                          <span>{l.label}</span>
                          <span className="drawer-link-arrow">›</span>
                        </a>
                      </li>
                    )
                  ))}
                </ul>
              </div>
            );
          })}

          <a href={`tel:${COMPANY.tel}`} className="drawer-cta-tel">
            <div className="drawer-cta-tel-label">お電話でのご相談</div>
            <div className="drawer-cta-tel-num">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
              </svg>
              {COMPANY.tel}
            </div>
            <div className="drawer-cta-tel-hours">受付 {COMPANY.hours}</div>
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ setPage, theme }) {
  return (
    <section className="hero">
      <div className="container hero-inner">
        <div className="hero-eyebrow">FACTORING × CONSTRUCTION</div>
        <h1 className="hero-title" aria-label="ファクタリング即日調達なら令和財託 - 最短2時間で資金化。他社ファクタリング利用中・銀行リスケ中でも調達可能。建設業に強い日本唯一のファクタリング会社">
          <span className="sr-only">ファクタリング即日調達で最短2時間 - </span>
          最短2時間で資金調達、<br/>
          お持ちの<span className="accent">請求書</span>で。<br/>
          <span className="hero-title-sub">他社ファクタリング利用中・銀行リスケ中でも調達可能</span>
        </h1>
        <p className="hero-sub">
          令和財託は、ファクタリングと建設(内装工事)の<strong>両輪</strong>を自社で運営する、<strong>日本で唯一の資金調達パートナー</strong>。<br/>
          <strong>最短2時間</strong>で入金、業界最安水準の<strong>手数料1%〜</strong>。個人事業主・他社利用中の乗り換えも歓迎です。
        </p>
        <div className="hero-cta-grid">
          {/* 小口: オレンジグラデ (シンプル: 大きなサブ + 白ボタン) — モバイル先頭 / デスクトップ右 */}
          <div className="cta-lux warm order-mobile-first" onClick={() => setPage('consult')}>
            <div className="cta-lux-headband warm-band">
              <span className="cta-lux-amount warm-amount">数万〜300万円</span>の資金調達をご希望の
            </div>
            <div className="cta-lux-target">法人・個人事業主の方</div>
            <div className="cta-lux-sub warm-sub">
              <div className="cta-lux-sub-inner">
                <div>スマホで完結</div>
                <div><strong>最短2時間以内で先払い</strong></div>
              </div>
            </div>
            <div className="cta-lux-phone warm-phone">
              <div className="cta-lux-phone-tag warm-phone-tag">2時間資金化相談窓口</div>
              <a href={'tel:' + COMPANY.tel.replace(/-/g, '')} className="cta-lux-phone-num warm-phone-num" onClick={(e) => e.stopPropagation()}>
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
                {COMPANY.tel}
              </a>
            </div>
            <button className="cta-lux-btn warm-btn" onClick={(e) => { e.stopPropagation(); setPage('consult'); }}>
              今すぐオンライン審査に進む <span>›</span>
            </button>
            <div className="cta-lux-note">※300万円以上をご希望の個人事業主の方は<u>こちら</u></div>
          </div>

          {/* 大型: 黒×ゴールド — デスクトップ左 */}
          <div className="cta-lux dark order-desktop-first" onClick={() => setPage('consult')}>
            <div className="cta-lux-headband">
              <span className="cta-lux-amount">300万〜数億円</span>の資金調達をご希望の
            </div>
            <div className="cta-lux-target">法人・大型資金調達専門</div>
            <div className="cta-lux-sub">
              <div className="cta-lux-sub-inner">
                <div>大型案件専門チームが</div>
                <div>ご対応</div>
              </div>
            </div>
            <div className="cta-lux-phone">
              <div className="cta-lux-phone-tag">法人・大型決済 専用窓口</div>
              <a href={'tel:' + COMPANY.tel.replace(/-/g, '')} className="cta-lux-phone-num" onClick={(e) => e.stopPropagation()}>
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
                {COMPANY.tel}
              </a>
            </div>
            <button className="cta-lux-btn dark-btn" onClick={(e) => { e.stopPropagation(); setPage('consult'); }}>
              法人相談に進む <span>›</span>
            </button>
            <div className="cta-lux-note" aria-hidden="true">&nbsp;</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ヒーロー直下: 数値を即座に見せる訴求バッジ帯
function HeroBadgesSection() {
  return (
    <section className="hero-badges">
      <div className="container hero-badges-grid">
        {HERO_BADGES.map((b, i) => (
          <div key={i} className="hero-badge">
            <div className="hero-badge-icon">{b.icon}</div>
            <div className="hero-badge-value">{b.value}</div>
            <div className="hero-badge-label">{b.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function PointsStrip() {
  const points = [
    { num: '01', title: '最短2時間で入金', sub: 'SPEEDY FUNDING' },
    { num: '02', title: '業界最安水準の手数料', sub: 'LOWEST FEE' },
    { num: '03', title: '建設業に強い唯一の会社', sub: 'ONLY IN JAPAN' },
  ];
  return (
    <section className="points">
      <div className="container">
        <div className="points-grid">
          {points.map(p => (
            <div key={p.num} className="point">
              <div className="point-num">{p.num}</div>
              <div>
                <div className="point-title">{p.title}</div>
                <div className="point-sub">{p.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===============================
// 実績カード (刷新: 2数字並列 + 洗練された月桂冠)
// ===============================
function Laurel() {
  return null; // 廃止(残しておくと呼び出しエラー)
}

function AchievementStats() {
  const stats = [
    { top: '累計お取引件数', big: '3,000', unit: '件+', bottom: 'TRANSACTIONS' },
    { top: '累計買取債権額', big: '5', unit: '億円', bottom: 'PURCHASE VOL.' },
    { top: '最短入金スピード', big: '2', unit: '時間', bottom: 'SPEED' },
    { top: '審査通過率', big: '98', unit: '%', bottom: 'APPROVAL RATE' },
  ];
  return (
    <div className="ach-stats">
      {stats.map((s, i) => (
        <div key={i} className="ach-stat">
          <div className="ach-stat-top">{s.top}</div>
          <div className="ach-stat-num">
            <span className="ach-stat-big">{s.big}</span>
            <span className="ach-stat-unit">{s.unit}</span>
          </div>
          <div className="ach-stat-bottom">{s.bottom}</div>
        </div>
      ))}
    </div>
  );
}

// ===============================
// betrading 風: ファクタリングの特長(6グリッド 大きな線画)
// ===============================
function FeaturesSection() {
  const stroke = 'currentColor';
  const features = [
    {
      // 時計に矢印(スピード)
      icon: (
        <svg viewBox="0 0 160 160" width="140" height="140" fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="90" cy="82" r="46"/>
          <path d="M90 82 L90 54 M90 82 L112 82"/>
          <path d="M90 30 L90 40 M132 82 L142 82 M90 134 L90 124 M38 82 L48 82"/>
          <path d="M10 60 L38 60 M4 82 L34 82 M10 104 L38 104"/>
        </svg>
      ),
      topLabel: '即日の資金調達も可能',
      middleLabel: 'スピード審査',
      big: '最短2時間',
    },
    {
      // PC + スマホ にチェック
      icon: (
        <svg viewBox="0 0 160 160" width="140" height="140" fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <rect x="16" y="34" width="88" height="60" rx="3"/>
          <path d="M40 108 L86 108 M54 94 L54 108 M72 94 L72 108 M32 116 L94 116"/>
          <circle cx="60" cy="62" r="14"/>
          <path d="M54 62 L58 66 L66 58"/>
          <rect x="110" y="52" width="38" height="64" rx="4"/>
          <path d="M124 62 L134 62"/>
          <circle cx="129" cy="108" r="2" fill={stroke}/>
        </svg>
      ),
      topLabel: 'クラウドサインを導入',
      middleLabel: '',
      big: 'PC・スマホで\nオンライン契約',
    },
    {
      // お金袋(手数料アイコン)
      icon: (
        <svg viewBox="0 0 160 160" width="140" height="140" fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <path d="M56 40 L104 40 L96 56 L64 56 Z"/>
          <path d="M64 56 C40 74 30 96 30 114 C30 130 44 140 80 140 C116 140 130 130 130 114 C130 96 120 74 96 56"/>
          <text x="80" y="112" fontSize="30" textAnchor="middle" fontFamily="Noto Serif JP, serif" fontWeight="700" stroke="none" fill={stroke}>%</text>
        </svg>
      ),
      topLabel: '業界最安水準の',
      middleLabel: '手数料',
      big: '1%〜',
    },
    {
      // 握手する2人
      icon: (
        <svg viewBox="0 0 160 160" width="140" height="140" fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="48" cy="46" r="16"/>
          <path d="M22 108 C22 88 34 74 48 74 C58 74 66 80 70 88"/>
          <circle cx="112" cy="46" r="16"/>
          <path d="M138 108 C138 88 126 74 112 74 C102 74 94 80 90 88"/>
          <path d="M60 100 L80 96 L100 100 L100 118 L60 118 Z"/>
          <path d="M60 108 L100 108"/>
        </svg>
      ),
      topLabel: '豊富な取引実績',
      middleLabel: '累計取引件数',
      big: '3,000件+',
    },
    {
      // お金袋
      icon: (
        <svg viewBox="0 0 160 160" width="140" height="140" fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <path d="M56 40 L104 40 L96 56 L64 56 Z"/>
          <path d="M64 56 C40 74 30 96 30 114 C30 130 44 140 80 140 C116 140 130 130 130 114 C130 96 120 74 96 56"/>
          <text x="80" y="112" fontSize="34" textAnchor="middle" fontFamily="Noto Serif JP, serif" fontWeight="700" stroke="none" fill={stroke}>¥</text>
        </svg>
      ),
      topLabel: '確度の高い資金調達',
      middleLabel: '最大買取率',
      big: '98%',
    },
    {
      // 書類 + チェック印
      icon: (
        <svg viewBox="0 0 160 160" width="140" height="140" fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <rect x="36" y="20" width="70" height="100" rx="3"/>
          <circle cx="48" cy="42" r="2.5" fill={stroke} stroke="none"/>
          <path d="M58 42 L96 42"/>
          <circle cx="48" cy="60" r="2.5" fill={stroke} stroke="none"/>
          <path d="M58 60 L96 60"/>
          <circle cx="48" cy="78" r="2.5" fill={stroke} stroke="none"/>
          <path d="M58 78 L96 78"/>
          <circle cx="48" cy="96" r="2.5" fill={stroke} stroke="none"/>
          <path d="M58 96 L90 96"/>
          <circle cx="112" cy="98" r="20"/>
          <path d="M103 98 L110 105 L122 92" strokeWidth="3.6"/>
        </svg>
      ),
      topLabel: '受注時点での',
      middleLabel: '',
      big: '注文書\nファクタリング',
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>令和財託の</div>
          <h2 className="section-title" style={{ color: 'var(--accent)' }}>ファクタリングの特長 - 即日・低手数料・オンライン契約</h2>
        </div>
        <div className="feat6-grid">
          {features.map((f, i) => (
            <div key={i} className="feat6-cell">
              <div className="feat6-icon">{f.icon}</div>
              <div className="feat6-top">{f.topLabel}</div>
              <div className="feat6-mid">{f.middleLabel || '\u00A0'}</div>
              <div className="feat6-big">
                {f.big.split('\n').map((t, j, arr) => (
                  <span key={j}>{t}{j < arr.length - 1 && <br/>}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===============================
// betrading 風: ファクタリングとは(3者関係図)
// ===============================
function FactoringAboutSection({ setPage }) {
  return (
    <section className="section fact-about">
      <div className="container">
        <div className="fact-about-head">
          <div className="fact-about-lead">お持ちの請求書で早期に資金化</div>
          <h2 className="fact-about-title">
            <span className="marker">手軽で素早い資金調達</span>を可能にします
          </h2>
          <p className="fact-about-desc">
            ファクタリングはお持ちの請求書を早期に資金化したい方におすすめのサービスです。資金調達まで<strong>最短2時間〜3日ほど</strong>なので、お急ぎの方におすすめの資金調達方法です。<br/>
            売掛債権を利用した資金調達は<strong>国が促進している資金調達方法</strong>のため、安心してご利用いただけます。
          </p>
          <p className="fact-about-note">
            ※給与債権・不良債権・売掛先が個人事業主の<br/>売掛金の買取は行っておりません。
          </p>
        </div>

        <div className="fact-diagram">
          <div className="fact-node">
            <div className="fact-node-circle">
              <svg viewBox="0 0 100 100" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                <rect x="22" y="26" width="56" height="60"/>
                <path d="M32 40 L44 40 M56 40 L68 40 M32 54 L44 54 M56 54 L68 54 M32 68 L44 68 M56 68 L68 68"/>
                <path d="M42 86 L42 78 L58 78 L58 86"/>
              </svg>
            </div>
            <div className="fact-node-label">売掛先</div>
          </div>
          <div className="fact-dash"></div>
          <div className="fact-node">
            <div className="fact-node-circle">
              <svg viewBox="0 0 100 100" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="50" cy="38" r="14"/>
                <path d="M24 84 C24 66 36 56 50 56 C64 56 76 66 76 84"/>
              </svg>
            </div>
            <div className="fact-node-label">利用者</div>
          </div>
          <div className="fact-dash"></div>
          <div className="fact-node">
            <div className="fact-node-circle fact-node-brand">
              <div className="fact-node-brand-jp">令和財託</div>
              <div className="fact-node-brand-en">REIWA ZAITAKU</div>
            </div>
            <div className="fact-node-label">ファクタリング会社</div>
          </div>
        </div>

        <div className="fact-about-cta">
          <button className="fact-cta-btn" onClick={() => setPage('factoring')}>
            ファクタリングについて詳しく見る <span>→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

// ===============================
// betrading 風: 会社紹介 (パイオニア)
// ===============================
function PioneerSection({ setPage }) {
  return (
    <section className="section pioneer">
      <div className="container">
        <div className="pioneer-grid">
          <div className="pioneer-text">
            <div className="pioneer-eyebrow">令和財託は</div>
            <h2 className="pioneer-title">
              日本で唯一の<br/>
              <span className="accent pioneer-title-accent">ファクタリング × 建設</span>
            </h2>
            <div className="pioneer-lead">
              <strong>現場を知る、資金調達のパートナー</strong>
            </div>
            <p className="pioneer-desc">
              会社の「資産」である売掛債権(売掛金)を活用することで、
              より多くのお客様に資金調達の機会を提供できると考え、
              2024年に令和財託を設立し、ファクタリングの提供をはじめました。
            </p>
            <p className="pioneer-desc">
              私たちは日本で唯一、ファクタリングと建設(内装工事)を両輪で自社運営しています。
              建設業の出来高払い、下請け構造、工期のリアルを現場で理解しているからこそ、
              教科書通りではない、貴社の事業に本当に合った資金調達のご提案が可能です。
            </p>
            <p className="pioneer-desc">
              業種を問わず、法人・個人事業主まで幅広く対応。
              お客様のニーズに寄り添いサービス向上に努め、
              担保に依存しない新しい資金調達方法として
              ファクタリングを確立させることが令和財託の使命です。
            </p>
            <button className="fact-cta-btn" style={{marginTop: 20}} onClick={() => setPage('company')}>
              会社概要を見る <span>→</span>
            </button>
          </div>
          <div className="pioneer-visual">
            <div className="pioneer-image">
              <img src="/assets/tokyo-building.jpg" alt="日本橋の令和財託オフィス" />
            </div>
            <div className="pioneer-badge">
              <div className="pioneer-badge-label">日本で唯一の</div>
              <div className="pioneer-badge-main">ファクタリング × 建設</div>
              <div className="pioneer-badge-sub">REIWA ZAITAKU</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===============================
// betrading 風: 累計実績(月桂樹)
// ===============================
function AchievementSection() {
  return (
    <section className="section section-alt achievement">
      <div className="container">
        <div className="achievement-grid">
          <div className="achievement-text">
            <div className="section-eyebrow" style={{ textAlign: 'left', marginBottom: 8 }}>ACHIEVEMENT</div>
            <div className="ach-lead">取引実績3,000件以上</div>
            <h2 className="ach-title">
              高い信頼を得て<br/>
              ファクタリング<br/>累計買取額<br/><span className="ach-title-accent">5億円</span>を達成
            </h2>
            <div className="ach-note">※2026年9月時点</div>
            <p className="ach-desc">
              令和財託は2024年の創業以来、多くのお客様に選ばれています。
              豊富な取引実績と経験から、お客様のニーズに合わせた柔軟な審査、
              対応が可能な点が令和財託の強みです。
            </p>
            <p className="ach-desc">
              また、日本で唯一ファクタリングと建設(内装工事)を両輪で運営する会社として、
              建設業に特化した資金調達サービスも提供しております。
              中小企業の資金調達はもちろん、資金繰りや経営についてもご相談ください。
            </p>
          </div>
          <div className="achievement-visual">
            <AchievementStats />
          </div>
        </div>
      </div>
    </section>
  );
}

// ===============================
// betrading 風: 資金調達の流れ(3大STEP + 各3サブ)
// ===============================
function FundingFlowSection() {
  const stages = [
    {
      no: 'STEP 01',
      title: 'お申し込み',
      time: '所要時間 約3分',
      subs: [
        { i: '①', text: 'WEBフォーム・お電話・LINEからお申込み' },
        { i: '②', text: 'メールまたはSMSで受付完了のご連絡' },
        { i: '③', text: '担当者よりヒアリングのご連絡' },
      ],
    },
    {
      no: 'STEP 02',
      title: '審査申し込み',
      time: '所要時間 約3分',
      subs: [
        { i: '①', text: '必要書類は「請求書」と「通帳コピー」の2点のみ' },
        { i: '②', text: 'オンラインで書類をアップロード' },
        { i: '③', text: '最短30分で審査結果をご提示' },
      ],
    },
    {
      no: 'STEP 03',
      title: 'ご契約〜ご入金',
      time: '所要時間 約30分',
      subs: [
        { i: '①', text: 'クラウドサインでオンライン契約' },
        { i: '②', text: 'ご指定口座へ即日お振込み' },
        { i: '③', text: '最短2時間で資金化が完了' },
      ],
    },
  ];
  return (
    <section className="section section-alt funding-flow">
      <div className="container">
        <div className="section-head">
          <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>お申込みから最短2時間</div>
          <h2 className="section-title" style={{ color: 'var(--accent)' }}>ファクタリングによる資金調達の流れ</h2>
        </div>
        <div className="ff3-list">
          {stages.map((s, i) => (
            <div key={i} className="ff3-item">
              <div className="ff3-head">
                <div className="ff3-no">
                  <div className="ff3-no-label">STEP</div>
                  <div className="ff3-no-num">{String(i+1).padStart(2, '0')}</div>
                </div>
                <div className="ff3-title-wrap">
                  <div className="ff3-time">{s.time}</div>
                  <div className="ff3-title">{s.title}</div>
                </div>
              </div>
              <div className="ff3-body">
                {s.subs.map((sub, j) => (
                  <div key={j} className="ff3-sub">
                    <span className="ff3-sub-i">{sub.i}</span>
                    <span className="ff3-sub-text">{sub.text}</span>
                  </div>
                ))}
              </div>
              {i < stages.length - 1 && <div className="ff3-arrow">▼</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BusinessSection({ setPage }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">OUR BUSINESS</div>
          <h2 className="section-title">2つの事業で、<span className="accent">貴社の成長</span>を支える</h2>
          <p className="section-sub">
            令和財託は「ファクタリング」と「内装工事」を自社で運営。<br/>
            金融と現場、両方の視点から、他社にはない資金調達提案をご提供します。
          </p>
        </div>

        <div className="biz-cards">
          <div className="biz-card">
            <div className="biz-card-tag">BUSINESS 01</div>
            <h4>
              <span className="en">FACTORING SERVICE</span>
              ファクタリング事業<br/>
              <span style={{fontSize: '14px', color: 'var(--text-mute)', fontWeight: 500}}>売掛金の即日現金化サービス</span>
            </h4>
            <p>数万円〜数億円まで、法人・個人事業主問わず対応。オンライン完結で、最短2時間の入金を実現します。</p>
            <ul className="biz-card-features">
              <li>2社間・3社間ファクタリング両対応</li>
              <li>注文書ファクタリング(建設業向け)</li>
              <li>業界最安水準の手数料(2%〜)</li>
              <li>他社からの乗り換え歓迎</li>
            </ul>
            <a className="biz-card-link" href="/factoring/" onClick={(e) => { e.preventDefault(); setPage('factoring'); }}>詳しく見る →</a>
          </div>

          <div className="biz-card">
            <div className="biz-card-tag">BUSINESS 02</div>
            <h4>
              <span className="en">CONSTRUCTION SERVICE</span>
              建設(内装工事)事業<br/>
              <span style={{fontSize: '14px', color: 'var(--text-mute)', fontWeight: 500}}>店舗内装を中心とした施工</span>
            </h4>
            <p>店舗内装をメインに、飲食店・オフィス・物販店の設計施工まで一貫対応。現場ノウハウがファクタリング提案にも活きています。</p>
            <ul className="biz-card-features">
              <li>店舗内装(飲食・物販・オフィス)</li>
              <li>設計〜施工〜アフターまで一貫</li>
              <li>建設業のリアルな資金繰りを熟知</li>
              <li>同業者向けファクタリングも強み</li>
            </ul>
            <a className="biz-card-link" href="/construction/" onClick={(e) => { e.preventDefault(); setPage('construction'); }}>詳しく見る →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function USPSection() {
  return (
    <section className="usp">
      <div className="container usp-inner">
        <div className="usp-eyebrow">ONLY ONE IN JAPAN</div>
        <h2>
          <span className="highlight">現場を知るからこそ</span>、<br/>
          最適な資金調達提案ができる。
        </h2>
        <p>
          令和財託は日本で唯一、ファクタリングと建設(内装工事)を両輪で運営する会社です。<br/>
          建設業の出来高払い・下請け構造・工期の実態を熟知しているからこそ、<br/>
          「教科書通り」ではない、貴社の事業に本当に合った資金繰り提案が可能です。<br/>
          もちろん、建設業以外のあらゆる業種にも、同じ姿勢で寄り添います。
        </p>
      </div>
    </section>
  );
}

function WorriesSection() {
  return (
    <section className="section section-alt">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">CONCERNS</div>
          <h2 className="section-title">こんな<span className="accent">お悩み</span>はありませんか？</h2>
          <p className="section-sub">令和財託にご相談いただければ、必ず解決の糸口が見つかります。</p>
        </div>
        <div className="worries-grid">
          {WORRIES.map((w, i) => <div key={i} className="worry">{w}</div>)}
        </div>
      </div>
    </section>
  );
}

function ReasonsSection() {
  return (
    <section className="section section-alt reasons-section">
      <div className="reasons-watermark" aria-hidden="true">REASON</div>
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">WHY US</div>
          <h2 className="section-title">令和財託が<span className="accent">選ばれる理由</span></h2>
        </div>
        <div className="reasons-grid">
          {REASONS.map((r, i) => (
            <div key={i} className="reason">
              <div className="reason-num">{String(i+1).padStart(2, '0')}</div>
              <div className="reason-icon">{r.icon}</div>
              <h4>{r.title.split('\n').map((t, j) => <span key={j}>{t}{j < r.title.split('\n').length - 1 && <br/>}</span>)}</h4>
              <p>{r.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FlowSection() {
  const steps = [
    { num: 1, title: 'お問い合わせ', desc: 'WEBフォーム・お電話・LINEでご相談ください。24時間受付。' },
    { num: 2, title: 'ヒアリング\n・書類提出', desc: '請求書・通帳3ヶ月分・本人確認書類の3点のみで審査可能。' },
    { num: 3, title: '審査\n・お見積り', desc: '最短30分で審査結果と手数料の見積もりをご提示します。' },
    { num: 4, title: 'ご契約\n・ご入金', desc: 'オンライン契約後、指定口座へ即座に入金。最短2時間。' },
  ];
  return (
    <section className="section section-alt">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">FLOW</div>
          <h2 className="section-title">ファクタリングご利用の<span className="accent">流れ</span></h2>
          <p className="section-sub">お問い合わせから入金まで、最短2時間。シンプルな4ステップで完了します。</p>
        </div>
        <div className="flow-grid">
          {steps.map(s => (
            <div key={s.num} className="flow-step">
              <div className="flow-step-badge">{String(s.num).padStart(2, '0')}</div>
              <h4>{s.title.split('\n').map((t, j) => <span key={j}>{t}{j < s.title.split('\n').length - 1 && <br/>}</span>)}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// 導入事例: 長文ストーリー型(※イメージです。実在の特定企業・事案を示すものではありません)
function CaseStoriesSection() {
  const [active, setActive] = useState(0);
  const total = CASE_STORIES.length;
  const go = (dir) => setActive((active + dir + total) % total);
  const s = CASE_STORIES[active];
  return (
    <section className="section case-stories">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">CASE STUDIES</div>
          <h2 className="section-title">お客様の<span className="accent">導入ストーリー</span></h2>
          <p className="section-sub">資金繰りの課題から、ファクタリング活用後の変化までをご紹介します。</p>
          <p className="case-story-disclaimer">※よくあるご相談内容をもとに再構成したイメージです。特定の企業・事案を示すものではありません。</p>
        </div>
        <div className="case-story-slider">
          <button className="case-story-nav prev" onClick={() => go(-1)} aria-label="前の事例">‹</button>
          <div className="case-story">
            <div className="case-story-profile">
              <div className="case-story-industry">{s.industry}</div>
              <div className="case-story-meta">
                <div><span>設立</span>{s.founded}</div>
                <div><span>地域</span>{s.area}</div>
                <div><span>売上</span>{s.sales}</div>
                <div><span>従業員数</span>{s.employees}</div>
              </div>
              <div className="case-story-topics">
                <div className="case-story-topics-label">TOPICS</div>
                <ul>
                  {s.topics.map((t, j) => <li key={j}>{t}</li>)}
                </ul>
              </div>
            </div>
            <div className="case-story-body">
              {s.body.map((p, j) => <p key={j}>{p}</p>)}
            </div>
          </div>
          <button className="case-story-nav next" onClick={() => go(1)} aria-label="次の事例">›</button>
        </div>
        <div className="case-story-dots">
          {CASE_STORIES.map((_, i) => (
            <button key={i} className={`case-story-dot ${i === active ? 'active' : ''}`} onClick={() => setActive(i)} aria-label={`事例${i+1}`}></button>
          ))}
        </div>
      </div>
    </section>
  );
}

function CasesSection() {
  const trackRef = React.useRef(null);
  const scroll = (dir) => {
    if (!trackRef.current) return;
    const w = trackRef.current.clientWidth;
    trackRef.current.scrollBy({ left: dir * (w * 0.85), behavior: 'smooth' });
  };
  return (
    <section className="section section-alt">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">MORE CASES</div>
          <h2 className="section-title">その他の<span className="accent">導入実績</span></h2>
          <p className="section-sub">様々な業種・規模のお客様にご利用いただいています。</p>
        </div>
        <div className="carousel">
          <button className="carousel-btn prev" onClick={() => scroll(-1)} aria-label="前へ">‹</button>
          <div className="carousel-track cases-track" ref={trackRef}>
            {CASES.map(c => (
              <div key={c.no} className="case carousel-item">
                <div className="case-head">
                  <div className="case-industry">{c.industry}</div>
                  <div className="case-no">CASE {c.no}</div>
                </div>
                <div className="case-body">
                  <div className="case-nums">
                    <div className="case-num-item">
                      <div className="case-num-label">調達金額</div>
                      <div className="case-num-value">{c.amount}</div>
                    </div>
                    <div className="case-num-item">
                      <div className="case-num-label">調達期間</div>
                      <div className="case-num-value">{c.days}</div>
                    </div>
                  </div>
                  <p className="case-comment" dangerouslySetInnerHTML={{ __html: c.comment }} />
                </div>
              </div>
            ))}
          </div>
          <button className="carousel-btn next" onClick={() => scroll(1)} aria-label="次へ">›</button>
        </div>
      </div>
    </section>
  );
}

// お客様の声: 短文レビュー(※イメージです。実在の特定企業・事案を示すものではありません)
function TestimonialsSection() {
  const trackRef = React.useRef(null);
  const scroll = (dir) => {
    if (!trackRef.current) return;
    const w = trackRef.current.clientWidth;
    trackRef.current.scrollBy({ left: dir * (w * 0.85), behavior: 'smooth' });
  };
  return (
    <section className="section testimonials">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">VOICE</div>
          <h2 className="section-title">お客様の<span className="accent">声</span></h2>
          <p className="section-sub">ご利用いただいたお客様からいただいた、生の声の一部をご紹介します。</p>
          <p className="case-story-disclaimer">※よくあるご感想をもとに再構成したイメージです。特定の企業・事案を示すものではありません。</p>
        </div>
        <div className="carousel">
          <button className="carousel-btn prev" onClick={() => scroll(-1)} aria-label="前へ">‹</button>
          <div className="carousel-track testimonial-track" ref={trackRef}>
            {TESTIMONIALS.map((t, i) => (
              <div key={i} className="testimonial-card carousel-item">
                <div className="testimonial-tags">
                  <span className="testimonial-industry">{t.industry}</span>
                  <span className="testimonial-area">{t.area}</span>
                </div>
                <h4 className="testimonial-title">{t.title}</h4>
                <p className="testimonial-body">{t.body}</p>
              </div>
            ))}
          </div>
          <button className="carousel-btn next" onClick={() => scroll(1)} aria-label="次へ">›</button>
        </div>
      </div>
    </section>
  );
}

function FaqSection({ limit }) {
  const [open, setOpen] = useState(0);
  const items = limit ? FAQ.slice(0, limit) : FAQ;
  return (
    <section className="section section-alt">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Q&amp;A</div>
          <h2 className="section-title">よくある<span className="accent">ご質問</span></h2>
        </div>
        <div className="faq-list">
          {items.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>{f.q}</div>
              <div className="faq-a" dangerouslySetInnerHTML={{ __html: f.a }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BlogSection({ setPage, setBlogId, limit, carousel = true }) {
  // 新記事データがあればそれを使う、無ければ従来のダミー
  const allPosts = (typeof window !== 'undefined' && window.BLOG_POSTS_FULL && window.BLOG_POSTS_FULL.length > 0)
    ? window.BLOG_POSTS_FULL
    : BLOG_POSTS;
  const posts = limit ? allPosts.slice(0, limit) : allPosts;
  const trackRef = React.useRef(null);
  const scroll = (dir) => {
    if (!trackRef.current) return;
    const w = trackRef.current.clientWidth;
    trackRef.current.scrollBy({ left: dir * (w * 0.85), behavior: 'smooth' });
  };
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">COLUMN</div>
          <h2 className="section-title">ファクタリング<span className="accent">コラム</span></h2>
          <p className="section-sub">資金繰りに役立つ情報を発信しています。</p>
        </div>
        {carousel ? (
          <div className="carousel">
            <button className="carousel-btn prev" onClick={() => scroll(-1)} aria-label="前へ">‹</button>
            <div className="carousel-track blog-track" ref={trackRef}>
              {posts.map(p => (
                <a key={p.id} href={`/blog/${p.slug || p.id}/`} className="blog-card carousel-item" onClick={(e) => { e.preventDefault(); setBlogId(p.id); setPage('blog-detail'); }}>
                  <div className="blog-thumb">
                    {p.cover ? (
                      <img src={p.cover} alt={p.title} loading="lazy" className="blog-thumb-img" />
                    ) : (
                      <div className="blog-thumb-en">COLUMN</div>
                    )}
                    <div className="blog-cat">{p.cat}</div>
                  </div>
                  <div className="blog-body">
                    <div className="blog-date">{p.date}</div>
                    <div className="blog-title">{p.title}</div>
                    <div className="blog-tags">
                      {p.tags.map(t => <span key={t} className="blog-tag">#{t}</span>)}
                    </div>
                  </div>
                </a>
              ))}
            </div>
            <button className="carousel-btn next" onClick={() => scroll(1)} aria-label="次へ">›</button>
          </div>
        ) : (
          <div className="blog-grid">
            {posts.map(p => (
              <a key={p.id} href={`/blog/${p.slug || p.id}/`} className="blog-card" onClick={(e) => { e.preventDefault(); setBlogId(p.id); setPage('blog-detail'); }}>
                <div className="blog-thumb">
                  {p.cover ? (
                    <img src={p.cover} alt={p.title} loading="lazy" className="blog-thumb-img" />
                  ) : (
                    <div className="blog-thumb-en">COLUMN</div>
                  )}
                  <div className="blog-cat">{p.cat}</div>
                </div>
                <div className="blog-body">
                  <div className="blog-date">{p.date}</div>
                  <div className="blog-title">{p.title}</div>
                  <div className="blog-tags">
                    {p.tags.map(t => <span key={t} className="blog-tag">#{t}</span>)}
                  </div>
                </div>
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function NewsSection() {
  return (
    <section className="section section-alt">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">NEWS</div>
          <h2 className="section-title">お知らせ</h2>
        </div>
        <div className="news-list">
          {NEWS.map((n, i) => (
            <div key={i} className="news-item">
              <div className="news-date">{n.date}</div>
              <div className="news-cat">{n.cat}</div>
              <div className="news-title">{n.title}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactCTA({ setPage }) {
  return (
    <section className="contact-cta">
      <div className="container">
        <h2>まずは無料見積もりから</h2>
        <p>お見積りは無料です。<br/>営業時間以内なら最短30分で審査結果をご返答致します。</p>
        <div className="contact-buttons">
          <button className="contact-btn" onClick={() => setPage('consult')}>
            <span>▶</span> 無料見積り・査定を申し込む
          </button>
          <a href={'tel:' + COMPANY.tel.replace(/-/g, '')} className="contact-btn tel">
            <div>
              <div style={{fontSize: 10, letterSpacing: '0.2em', marginBottom: 4}}>お電話でのご相談</div>
              <div className="num">{COMPANY.tel}</div>
              <div style={{fontSize: 10, opacity: 0.75, marginTop: 4}}>{COMPANY.hours}</div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div className="footer-brand">
            <div className="logo">
              <span className="logo-jp" style={{color: '#fff'}}>令和財託株式会社</span>
              <span className="logo-en" style={{color: 'rgba(255,255,255,0.5)'}}>REIWA ZAITAKU CO., LTD.</span>
            </div>
            <p style={{marginTop: 16, marginBottom: 12}}>
              <strong style={{color: 'var(--accent)'}}>ファクタリング即日・最短2時間</strong>で資金調達。
              建設業ファクタリング・注文書ファクタリング・2社間/3社間ファクタリングに対応。
              個人事業主・法人・他社利用中の乗り換え歓迎。
            </p>
            <p>
              本店: 〒{COMPANY.headOfficeZip} {COMPANY.headOfficeAddress}<br/>
              東京オフィス: 〒{COMPANY.zip} {COMPANY.address}<br/>
              TEL: <a href={'tel:' + COMPANY.tel.replace(/-/g, '')} style={{color:'inherit'}}>{COMPANY.tel}</a><br/>
              Email: <a href={`mailto:${COMPANY.email}`} style={{color:'inherit'}}>{COMPANY.email}</a>
            </p>
          </div>
          <div>
            <h5>サービス</h5>
            <ul>
              <li><a href="/factoring/" onClick={(e) => { e.preventDefault(); setPage('factoring'); }} style={{color:'inherit', textDecoration:'none'}}>ファクタリング事業</a></li>
              <li><a href="/construction/" onClick={(e) => { e.preventDefault(); setPage('construction'); }} style={{color:'inherit', textDecoration:'none'}}>建設事業</a></li>
              <li><a href="/faq/" onClick={(e) => { e.preventDefault(); setPage('faq'); }} style={{color:'inherit', textDecoration:'none'}}>よくある質問</a></li>
            </ul>
          </div>
          <div>
            <h5>会社情報</h5>
            <ul>
              <li><a href="/company/" onClick={(e) => { e.preventDefault(); setPage('company'); }} style={{color:'inherit', textDecoration:'none'}}>会社概要</a></li>
              <li><a href="/blog/" onClick={(e) => { e.preventDefault(); setPage('blog'); }} style={{color:'inherit', textDecoration:'none'}}>ブログ</a></li>
              <li><a href="/contact/" onClick={(e) => { e.preventDefault(); setPage('contact'); }} style={{color:'inherit', textDecoration:'none'}}>お問い合わせ</a></li>
            </ul>
            <div className="footer-related">
              <div className="footer-related-label">関連サイト</div>
              <a href="https://reiwa-factoring.jp/" target="_blank" rel="noopener" className="footer-related-link" title="令和財託が運営する即日ファクタリング相談窓口(別サイト)">
                即日ファクタリング相談窓口 <span className="footer-related-arrow">↗</span>
              </a>
            </div>
          </div>
          <div>
            <h5>お問い合わせ</h5>
            <ul>
              <li><a href={'tel:' + COMPANY.tel.replace(/-/g, '')} style={{color:'inherit', textDecoration:'none'}}>{COMPANY.tel}</a></li>
              <li style={{fontSize: 11}}>{COMPANY.hours}</li>
              <li style={{fontSize: 11}}><a href={`mailto:${COMPANY.email}`} style={{color:'inherit', textDecoration:'none'}}>{COMPANY.email}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 REIWA ZAITAKU CO., LTD. All Rights Reserved.</div>
          <div>プライバシーポリシー / 特定商取引法に基づく表記</div>
        </div>
      </div>
    </footer>
  );
}

// ===============================
// Pages
// ===============================
function TopPage({ setPage, setBlogId, setConsultEntrySubmissionId }) {
  // 新デザイン(LP型トップ)が読み込まれていればそちらを使用。
  // 下層ページ(ファクタリング/建設/会社概要/ブログ等)はこれまで通り本関数以下のコンポーネントを使用。
  if (typeof window !== 'undefined' && window.LPTop) {
    const lpCompany = {
      ...COMPANY,
      hqZip: COMPANY.headOfficeZip,
      hqAddress: COMPANY.headOfficeAddress,
      officeZip: COMPANY.zip,
      officeAddress: COMPANY.address,
    };
    return (
      <window.LPTop
        setPage={setPage}
        setBlogId={setBlogId}
        setConsultEntrySubmissionId={setConsultEntrySubmissionId}
        COMPANY={lpCompany}
        FAQ={FAQ}
        CASES={CASES}
        BlogSection={BlogSection}
        CasesSection={CasesSection}
      />
    );
  }
  return (
    <>
      <Hero setPage={setPage} />
      <HeroBadgesSection />
      <WorriesSection />
      <FactoringAboutSection setPage={setPage} />
      <AchievementSection />
      <FeaturesSection />
      <ReasonsSection />
      <FlowSection />
      <CaseStoriesSection />
      <CasesSection />
      <TestimonialsSection />
      <FaqSection limit={6} />
      <BlogSection setPage={setPage} setBlogId={setBlogId} limit={6} />
      <NewsSection />
      <PioneerSection setPage={setPage} />
      <ContactCTA setPage={setPage} />
    </>
  );
}

// ファクタリング事業ページ用: サービス選択カード
function ServiceSelectorSection() {
  return (
    <section className="section svc-select">
      <div className="container">
        <div className="section-head">
          <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 8 }}>令和財託では</div>
          <h2 className="section-title" style={{ color: 'var(--text)', fontSize: 24 }}>
            <span style={{ color: 'var(--accent)' }}>2者間</span> ・
            <span style={{ color: 'var(--accent)' }}>3者間</span> ・
            <span style={{ color: 'var(--accent)' }}>注文書</span><br/>
            3種類のファクタリングに<br className="mobile-br"/>対応しています。
          </h2>
        </div>
        <div className="svc-select-grid three">
          <a className="svc-select-card" href="#type-2party">
            <div className="svc-select-num">01</div>
            <div className="svc-select-tag">最短2時間で入金可能</div>
            <div className="svc-select-title">2者間<br/>ファクタリング</div>
            <div className="svc-select-arrow">↓ 詳しく見る</div>
          </a>
          <a className="svc-select-card" href="#type-3party">
            <div className="svc-select-num">02</div>
            <div className="svc-select-tag">低手数料で利用可能</div>
            <div className="svc-select-title">3者間<br/>ファクタリング</div>
            <div className="svc-select-arrow">↓ 詳しく見る</div>
          </a>
          <a className="svc-select-card featured" href="#type-po">
            <div className="svc-select-num">03</div>
            <div className="svc-select-tag">受注段階で資金化可能</div>
            <div className="svc-select-title">注文書<br/>ファクタリング</div>
            <div className="svc-select-arrow">↓ 詳しく見る</div>
          </a>
        </div>
      </div>
    </section>
  );
}

// ==========================
// 図解共通: ノード
// ==========================
const DiagNodes = ({ highlight }) => (
  <>
    {/* お客様 (上中央) */}
    <g>
      <circle cx="400" cy="100" r="52" fill="#fff" stroke="var(--primary)" strokeWidth="2.5"/>
      <g transform="translate(400,100)" stroke="var(--primary)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="0" cy="-10" r="13"/>
        <path d="M-20 22 C-20 6 -12 -2 0 -2 C12 -2 20 6 20 22"/>
      </g>
      <text x="400" y="180" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--text)">お客様</text>
    </g>
    {/* 取引先 (左下) */}
    <g>
      <circle cx="130" cy="340" r="52" fill="#fff" stroke="var(--primary)" strokeWidth="2.5"/>
      <g transform="translate(130,340)" stroke="var(--primary)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <rect x="-16" y="-18" width="32" height="36" rx="1"/>
        <path d="M-10 -10 L-6 -10 M2 -10 L6 -10 M-10 -2 L-6 -2 M2 -2 L6 -2 M-10 6 L-6 6 M2 6 L6 6 M-4 12 L4 12 M-4 18 L4 18"/>
      </g>
      <text x="130" y="418" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--text)">取引先(売掛先)</text>
    </g>
    {/* ファクタリング会社 (右下) - 令和財託 */}
    <g>
      <circle cx="670" cy="340" r="52" fill="var(--primary)" stroke="var(--accent)" strokeWidth="3.5"/>
      <text x="670" y="335" textAnchor="middle" fontSize="14" fontWeight="700" fill="#fff" fontFamily="Noto Serif JP, serif" letterSpacing="2">令和財託</text>
      <text x="670" y="354" textAnchor="middle" fontSize="8" fill="var(--accent)" letterSpacing="1.5" fontWeight="600">REIWA ZAITAKU</text>
      <text x="670" y="418" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--text)">ファクタリング会社</text>
    </g>
  </>
);

const StepLabel = ({ x, y, num, text, color = 'primary' }) => (
  <g>
    <rect x={x - 60} y={y - 20} width="120" height="40" rx="6"
      fill="#fff"
      stroke={color === 'accent' ? 'var(--accent)' : 'var(--primary)'}
      strokeWidth="1.5"/>
    <text x={x} y={y - 4} textAnchor="middle" fontSize="10" fontWeight="700" fill="var(--accent)" letterSpacing="1">STEP.{num}</text>
    <text x={x} y={y + 12} textAnchor="middle" fontSize="11" fontWeight="700" fill="var(--text)">{text}</text>
  </g>
);

const Arrow = ({ from, to, color = 'primary', dashed, offset = 0 }) => {
  // オフセット付き(並行線)
  const dx = to.x - from.x, dy = to.y - from.y;
  const len = Math.sqrt(dx*dx + dy*dy);
  const nx = -dy / len * offset, ny = dx / len * offset;
  // ノード半径分だけ短縮
  const R = 56;
  const shrink = R / len;
  const fx = from.x + dx * shrink + nx;
  const fy = from.y + dy * shrink + ny;
  const tx = to.x - dx * shrink + nx;
  const ty = to.y - dy * shrink + ny;
  const stroke = color === 'accent' ? 'var(--accent)' : 'var(--primary)';
  const marker = color === 'accent' ? 'url(#arrow-gold)' : 'url(#arrow-blue)';
  return (
    <path d={`M${fx} ${fy} L${tx} ${ty}`}
      stroke={stroke}
      strokeWidth="2.5"
      fill="none"
      strokeDasharray={dashed ? "8 5" : undefined}
      markerEnd={marker}/>
  );
};

const DiagDefs = () => (
  <defs>
    <marker id="arrow-blue" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0 L10 5 L0 10 z" fill="var(--primary)"/>
    </marker>
    <marker id="arrow-gold" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0 L10 5 L0 10 z" fill="var(--accent)"/>
    </marker>
  </defs>
);

// ==========================
// 2社間ファクタリング図解
// ==========================
function Diagram2Party() {
  const K = { x: 400, y: 100 };
  const T = { x: 130, y: 340 };
  const F = { x: 670, y: 340 };

  return (
    <div className="fact-diagram-box">
      <div className="fact-diagram-tag">2社間ファクタリング</div>
      <div className="fact-diagram-lead">お客様と令和財託の2社で交わす契約です。</div>
      <svg viewBox="0 0 800 480" className="fact-diagram-svg">
        <DiagDefs />

        {/* 左辺: 取引先→お客様 (青) */}
        <Arrow from={T} to={K} />
        {/* 右辺: お客様→令和財託 (青) */}
        <Arrow from={K} to={F} />
        {/* 右辺 並行: 令和財託→お客様 (金) */}
        <Arrow from={F} to={K} offset={-22} color="accent" />

        <DiagNodes />

        <StepLabel x={230} y={240} num="1" text="売掛金の発生" />
        <StepLabel x={570} y={240} num="2" text="ファクタリング契約" />
        <StepLabel x={550} y={290} num="3" text="買取代金の支払い" color="accent" />
      </svg>
      <div className="fact-diagram-points">
        <div className="fact-diagram-point">
          <div className="fact-diagram-point-icon">✓</div>
          <div>売掛先に債権譲渡を<br/><strong>知られることなく契約可</strong></div>
        </div>
        <div className="fact-diagram-point">
          <div className="fact-diagram-point-icon">✓</div>
          <div><strong>最短即日</strong>で現金を<br/>調達できる</div>
        </div>
      </div>
    </div>
  );
}

// ==========================
// 注文書ファクタリング図解
// ==========================
function DiagramPO() {
  const K = { x: 400, y: 100 };
  const T = { x: 130, y: 340 };
  const F = { x: 670, y: 340 };

  return (
    <div className="fact-diagram-box">
      <div className="fact-diagram-tag">注文書ファクタリング</div>
      <div className="fact-diagram-lead">請求書発行前の「注文書」段階で資金化できるサービスです。</div>
      <svg viewBox="0 0 800 480" className="fact-diagram-svg">
        <DiagDefs />

        {/* 左辺: 取引先→お客様(注文書) */}
        <Arrow from={T} to={K} />
        {/* 右辺: お客様→令和財託(注文書提出・契約) */}
        <Arrow from={K} to={F} />
        {/* 右辺 並行: 令和財託→お客様(先払い・金) */}
        <Arrow from={F} to={K} offset={-22} color="accent" />

        <DiagNodes />

        <StepLabel x={230} y={240} num="1" text="注文書の発行" />
        <StepLabel x={570} y={240} num="2" text="注文書の提出・契約" />
        <StepLabel x={550} y={290} num="3" text="買取代金の先払い" color="accent" />
      </svg>
      <div className="fact-diagram-points">
        <div className="fact-diagram-point">
          <div className="fact-diagram-point-icon">✓</div>
          <div>請求書発行前の<br/><strong>注文書段階で資金化</strong></div>
        </div>
        <div className="fact-diagram-point">
          <div className="fact-diagram-point-icon">✓</div>
          <div><strong>建設業・製造業</strong>の<br/>着手金確保に最適</div>
        </div>
      </div>
    </div>
  );
}

// ==========================
// 3社間ファクタリング図解
// ==========================
function Diagram3Party() {
  const K = { x: 400, y: 100 };
  const T = { x: 130, y: 340 };
  const F = { x: 670, y: 340 };

  return (
    <div className="fact-diagram-box">
      <div className="fact-diagram-tag">3社間ファクタリング</div>
      <div className="fact-diagram-lead">お客様・令和財託・お取引先(売掛先)の3社で交わす契約です。</div>
      <svg viewBox="0 0 800 480" className="fact-diagram-svg">
        <DiagDefs />

        {/* 左辺: 取引先→お客様(請求書) */}
        <Arrow from={T} to={K} />
        {/* 右辺: お客様→令和財託(契約) */}
        <Arrow from={K} to={F} />
        {/* 右辺 並行: 令和財託→お客様(買取代金・金) */}
        <Arrow from={F} to={K} offset={-22} color="accent" />
        {/* 下辺: 取引先→令和財託(直接支払い) */}
        <path d={`M${T.x + 56} ${T.y} L${F.x - 56} ${F.y}`}
          stroke="var(--primary)" strokeWidth="2.5" fill="none" markerEnd="url(#arrow-blue)"/>

        <DiagNodes />

        <StepLabel x={230} y={240} num="1" text="請求書の発行" />
        <StepLabel x={570} y={240} num="2" text="ファクタリング契約" />
        <StepLabel x={550} y={290} num="3" text="買取代金の支払い" color="accent" />
        <StepLabel x={400} y={392} num="4" text="売掛金の直接支払い" />
      </svg>
      <div className="fact-diagram-points">
        <div className="fact-diagram-point">
          <div className="fact-diagram-point-icon">✓</div>
          <div>売掛先への<br/><strong>債権譲渡通知は必須</strong></div>
        </div>
        <div className="fact-diagram-point">
          <div className="fact-diagram-point-icon">✓</div>
          <div><strong>2社間ファクタリングよりも</strong><br/>手数料が低い</div>
        </div>
      </div>
    </div>
  );
}

// ファクタリング事業ページ用: 契約形態の詳細
function ServiceTypeSection({ id, no, title, subtitle, description, features, recommendedFor, reverse, diagram }) {
  return (
    <section id={id} className={`section svc-type ${reverse ? 'section-alt' : ''}`}>
      <div className="container">
        <div className="svc-type-head">
          <div className="svc-type-no">{no}</div>
          <div>
            <div className="svc-type-sub">{subtitle}</div>
            <h2 className="svc-type-title">{title}</h2>
          </div>
        </div>
        <div className="svc-type-desc">
          {description.map((p, i) => <p key={i}>{p}</p>)}
        </div>

        {diagram && <div className="svc-type-diagram">{diagram}</div>}

        <div className="svc-type-features-head">
          <div style={{ fontSize: 14, color: 'var(--text-mute)', letterSpacing: '0.1em' }}>令和財託の</div>
          <div className="svc-type-features-title">{title}の特長</div>
        </div>
        <div className="svc-features">
          {features.map((f, i) => (
            <div key={i} className="svc-feature">
              <div className="svc-feature-icon">{f.icon}</div>
              <div className="svc-feature-top">{f.top}</div>
              <div className="svc-feature-big">
                {f.big}
                {f.bigUnit && <span className="svc-feature-unit">{f.bigUnit}</span>}
              </div>
              {f.note && <div className="svc-feature-note">{f.note}</div>}
            </div>
          ))}
        </div>

        <div className="svc-recommend">
          <div className="svc-recommend-title">{title}がおすすめの方</div>
          <ul>
            {recommendedFor.map((r, i) => <li key={i}>{r}</li>)}
          </ul>
        </div>
      </div>
    </section>
  );
}

// アイコン(色は currentColor)
const IconClock = () => (
  <svg viewBox="0 0 80 80" width="70" height="70" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
    <circle cx="40" cy="40" r="28"/>
    <path d="M40 40 L40 24 M40 40 L54 40"/>
  </svg>
);
const IconYen = () => (
  <svg viewBox="0 0 80 80" width="70" height="70" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
    <circle cx="40" cy="40" r="28"/>
    <path d="M28 26 L40 44 L52 26 M28 44 L52 44 M28 52 L52 52 M40 44 L40 58"/>
  </svg>
);
const IconChart = () => (
  <svg viewBox="0 0 80 80" width="70" height="70" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14 60 L14 20 M14 60 L66 60"/>
    <path d="M20 50 L32 38 L44 44 L60 26"/>
    <path d="M52 26 L60 26 L60 34"/>
  </svg>
);
const IconDoc = () => (
  <svg viewBox="0 0 80 80" width="70" height="70" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 12 L52 12 L60 20 L60 66 L22 66 Z"/>
    <path d="M52 12 L52 20 L60 20"/>
    <path d="M30 32 L52 32 M30 42 L52 42 M30 52 L44 52"/>
  </svg>
);
const IconMoneyBag = () => (
  <svg viewBox="0 0 80 80" width="70" height="70" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M28 18 L52 18 L48 28 L32 28 Z"/>
    <path d="M32 28 C20 40 14 52 14 60 C14 68 24 72 40 72 C56 72 66 68 66 60 C66 52 60 40 48 28"/>
    <text x="40" y="60" fontSize="20" textAnchor="middle" fontFamily="Noto Serif JP, serif" fontWeight="700" stroke="none" fill="currentColor">¥</text>
  </svg>
);
const IconHospital = () => (
  <svg viewBox="0 0 80 80" width="70" height="70" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <rect x="16" y="20" width="48" height="46" rx="2"/>
    <path d="M40 30 L40 54 M28 42 L52 42"/>
    <path d="M16 20 L64 20 M16 66 L64 66"/>
  </svg>
);

function FactoringPage({ setPage }) {
  const type2 = {
    id: 'type-2party',
    no: '01',
    subtitle: '最短即日で手軽な資金調達',
    title: '2者間ファクタリング',
    description: [
      'ファクタリングとは、売掛金をファクタリング会社が買い取ることで、売掛金を早期に現金化するサービスです。',
      'その中でも2者間ファクタリングは利用者とファクタリング会社の2者で契約するため、原則として売掛先への連絡が必要ありません。そのため、必要な時に速やかに資金調達が可能です。',
      'また、万が一売掛先が倒産した場合のリスクはファクタリング会社が負担する(償還請求権がない)のも大きな特長です。',
    ],
    features: [
      { icon: <IconClock />, top: 'オンライン完結\n申し込み〜資金調達まで', big: '最短', bigUnit: '2時間' },
      { icon: <IconYen />, top: '無理のないコスト設定', big: '平均', bigUnit: '5.0%', note: '※当社2024年度実績' },
      { icon: <IconChart />, top: '豊富な実績と経験から\n柔軟な審査が可能', big: '累計取引', bigUnit: '3,000件+' },
      { icon: <IconDoc />, top: '受注段階から資金化', big: '注文書対応', bigUnit: 'OK' },
    ],
    recommendedFor: [
      '急ぎで資金調達したい方',
      '手間をかけずに資金調達したい方',
      'オンライン完結で利用したい方',
      '売掛先に知られずに利用したい方',
    ],
  };

  const type3 = {
    id: 'type-3party',
    no: '02',
    subtitle: '低手数料で利用可能な資金調達',
    title: '3者間ファクタリング',
    description: [
      '3者間ファクタリングは、「利用者」「ファクタリング会社」「売掛先」の3つの企業で契約し、早期現金化するサービスです。',
      '契約に「売掛先」が関わるため、3者間ファクタリングでは、売掛先へファクタリングを承諾してもらう必要があります。',
      '売掛先が直接、ファクタリング会社へ売掛金を支払うため、利用者は振込手続きを行う手間がかからないというのも特長の1つです。低手数料で資金調達をご希望のお客様におすすめのサービスです。',
    ],
    features: [
      { icon: <IconMoneyBag />, top: '10万円〜数億円の買取実績', big: '買取金額', bigUnit: '無制限' },
      { icon: <IconYen />, top: '低手数料からご利用可能', big: '平均', bigUnit: '2.5%', note: '※当社2024年度実績' },
      { icon: <IconClock />, top: 'スピード審査', big: '最短', bigUnit: '30分' },
      { icon: <IconHospital />, top: '売掛債権以外も対応', big: '介護報酬', bigUnit: '対応' },
    ],
    recommendedFor: [
      '手数料を抑えて利用したい方',
      '調達希望日まで時間がある方',
      '大きな金額の売掛金を現金化したい方',
      '売掛先の理解・協力が得られる方',
    ],
  };

  const typePO = {
    id: 'type-po',
    no: '03',
    subtitle: '受注段階で資金化できる、建設業・製造業に最適',
    title: '注文書ファクタリング',
    description: [
      '注文書ファクタリングは、請求書発行前の「注文書」段階で資金化できるサービスです。まだ売掛金が発生していない状態でも、確定した受注を担保に資金調達が可能になります。',
      '建設業の出来高払いや、製造業の材料仕入れなど、「受注はあるが、着手前・完成前の資金が必要」というシーンで威力を発揮します。日本で唯一ファクタリングと建設事業を両輪で運営する令和財託だからこそ、建設業特有の商習慣を熟知した柔軟な審査でご対応可能です。',
    ],
    features: [
      { icon: <IconDoc />, top: '受注段階で\n即資金化', big: '請求書', bigUnit: '発行前OK' },
      { icon: <IconClock />, top: '建設業の\n着手金確保に', big: '最短', bigUnit: '即日' },
      { icon: <IconYen />, top: '手数料は個別見積り', big: '平均', bigUnit: '5〜10%' },
      { icon: <IconMoneyBag />, top: '大型案件にも対応', big: '数万〜', bigUnit: '数億円' },
    ],
    recommendedFor: [
      '建設業で着手金の確保が必要な方',
      '大型受注の材料仕入資金が必要な方',
      '請求書発行までの期間が長い業種の方',
      '出来高払いのつなぎ資金が必要な方',
    ],
  };

  return (
    <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">FACTORING SERVICE</div>
          <h1 className="hero-title">ファクタリングについて<br/><span style={{fontSize: '0.55em', opacity: 0.9}}>売掛金を、最短2時間で現金化</span></h1>
        </div>
      </section>

      <ServiceSelectorSection />

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 8, letterSpacing: '0.1em' }}>令和財託の</div>
            <h2 className="section-title" style={{ color: 'var(--accent)' }}>ファクタリング</h2>
          </div>
          <div style={{ maxWidth: 820, margin: '0 auto', fontSize: 15, lineHeight: 2.1, color: 'var(--text)' }}>
            <p style={{ marginBottom: 20 }}>
              令和財託は日本で唯一「ファクタリング」と「建設(内装工事)」を両輪で運営する会社です。
              現場を知るからこそ最適な資金調達を提案でき、累計取引3,000件以上、累計買取額5億円を達成しました。
              これまでの経験と実績から、スピーディーな審査と柔軟な対応を実現しています。
            </p>
            <p style={{ marginBottom: 20 }}>
              建設業はもちろん、運送業・製造業・IT・広告・小売・飲食など、業種を問わずご相談を承ります。
              銀行融資が難しい個人事業主の方や、他社からの乗り換えをご検討中の方も、まずはお気軽にご連絡ください。
            </p>
            <p style={{ fontSize: 12, color: 'var(--text-mute)', marginTop: 24 }}>
              ※給与債権・不良債権・売掛先が個人事業主の売掛金の買取は行っておりません。
            </p>
          </div>
        </div>
      </section>

      <ServiceTypeSection {...type2} diagram={<Diagram2Party />} />
      <ServiceTypeSection {...type3} reverse diagram={<Diagram3Party />} />
      <ServiceTypeSection {...typePO} diagram={<DiagramPO />} />

      <FundingFlowSection />
      <CasesSection />
      <ContactCTA setPage={setPage} />
    </>
  );
}

function ConstructionPage({ setPage }) {
  return (
    <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">CONSTRUCTION SERVICE</div>
          <h1 className="hero-title">建設(内装工事)事業<br/><span style={{fontSize: '0.6em', opacity: 0.9}}>店舗内装を、確かな技術で</span></h1>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="biz-intro" style={{marginBottom: 0}}>
            <div>
              <div className="accent-bar"></div>
              <h3>現場を、金融の力で。<br/>金融を、現場の目線で。</h3>
              <p>
                令和財託の建設事業は、店舗内装をメインに設計・施工まで一貫で対応します。<br/>
                飲食店、物販店、オフィス、クリニック、美容室…と、多様な業態の内装を手がけてきました。<br/><br/>
                この現場経験こそが、令和財託のファクタリング事業の最大の強み。<br/>
                建設業の出来高払い、下請け構造、工期のリアルを知っているからこそ、他社にはない資金調達提案ができるのです。
              </p>
            </div>
            <div className="biz-intro-visual">
              <img src="/assets/interior-1.jpg" alt="店舗内装" />
            </div>
          </div>
        </div>
      </section>
      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">CAPABILITY</div>
            <h2 className="section-title">対応可能な<span className="accent">工事</span></h2>
          </div>
          <div className="reasons-grid">
            {[
              {icon: '🍽', title: '飲食店内装', desc: 'カフェ・レストラン・バー・居酒屋。厨房設計から客席レイアウトまで対応。'},
              {icon: '👔', title: '物販店・アパレル', desc: 'ブランドコンセプトを表現する内装設計。什器・照明計画まで一貫対応。'},
              {icon: '💼', title: 'オフィス内装', desc: '働きやすさを追求したオフィスデザイン。原状回復工事も対応します。'},
            ].map((r, i) => (
              <div key={i} className="reason">
                <div className="reason-icon">{r.icon}</div>
                <h4>{r.title}</h4>
                <p>{r.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">WORKS</div>
            <h2 className="section-title">施工事例</h2>
          </div>
          <div className="blog-grid">
            {['/assets/interior-1.jpg','/assets/interior-2.jpg','/assets/interior-3.jpg','/assets/interior-4.jpg'].slice(0,3).map((src, i) => (
              <div key={i} className="blog-card">
                <div className="blog-thumb" style={{background: 'none', padding: 0}}>
                  <img src={src} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                </div>
                <div className="blog-body">
                  <div className="blog-date">2026.0{i+1}</div>
                  <div className="blog-title">
                    {['都内飲食店 内装リニューアル工事','アパレル路面店 新規出店','港区オフィス 移転内装工事'][i]}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <ContactCTA setPage={setPage} />
    </>
  );
}

// ===============================
// 選ばれる理由ページ
// ===============================
function StrengthsPage({ setPage }) {
  const growthData = [
    { year: '2024', amount: 0.8, users: 320 },
    { year: '2025', amount: 2.6, users: 1200 },
    { year: '2026', amount: 5.0, users: 3000, current: true },
  ];
  const maxAmount = Math.max(...growthData.map(d => d.amount));
  const maxUsers = Math.max(...growthData.map(d => d.users));

  const differentiators = [
    {
      title: '独自の審査基準',
      desc: '売掛先の信用力を最重視した独自審査で、赤字決算・税金滞納・債務超過でも柔軟に対応。他社で断られた案件も、まずはご相談ください。',
    },
    {
      title: '必要書類は最小限',
      desc: '「請求書」と「通帳のコピー(直近3ヶ月分)」の2点のみで審査可能。追加書類のご依頼を最小限に抑え、スピード審査を実現しています。',
    },
    {
      title: '買取金額に制限なし',
      desc: '10万円の小口案件から数億円の大型案件まで、金額に制限なく対応。法人はもちろん、個人事業主もご利用いただけます。',
    },
    {
      title: '建設業に強い唯一の会社',
      desc: '日本で唯一ファクタリングと建設(内装工事)を両輪で運営。現場を知っているからこそ、出来高払い・下請け構造を踏まえた最適な提案が可能です。',
    },
  ];

  return (
    <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">STRENGTHS</div>
          <h1 className="hero-title">選ばれる理由<br/><span style={{fontSize: '0.5em', opacity: 0.9}}>令和財託のファクタリングには理由があります</span></h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
            <p style={{ fontSize: 15, lineHeight: 2, color: 'var(--text)' }}>
              多くの企業様に選ばれ、高い顧客満足度を維持している令和財託のファクタリングには選ばれる理由があります。<br/>
              他社にはない当社の強みをご紹介します。
            </p>
            <p style={{ fontSize: 12, color: 'var(--text-mute)', marginTop: 20 }}>
              ※給与債権・不良債権・売掛先が個人事業主の売掛金の買取は行っておりません。
            </p>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>ACHIEVEMENT</div>
            <h2 className="section-title" style={{ color: 'var(--accent)' }}>実績</h2>
            <p className="section-sub">累計取引3,000件以上、累計買取債権額5億円以上の実績がございます。</p>
          </div>

          <div className="growth-wrap">
            <div className="growth-block">
              <div className="growth-title">買取債権額推移</div>
              <div className="growth-chart">
                {growthData.map((d, i) => (
                  <div key={i} className={`growth-bar ${d.current ? 'current' : ''}`}>
                    <div className="growth-bar-value">{d.amount}<span>億円</span></div>
                    <div className="growth-bar-visual" style={{ height: `${(d.amount / maxAmount) * 100}%` }}></div>
                    <div className="growth-bar-year">{d.year}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="growth-block">
              <div className="growth-title">利用件数推移</div>
              <div className="growth-chart">
                {growthData.map((d, i) => (
                  <div key={i} className={`growth-bar ${d.current ? 'current' : ''}`}>
                    <div className="growth-bar-value">{d.users.toLocaleString()}<span>件</span></div>
                    <div className="growth-bar-visual" style={{ height: `${(d.users / maxUsers) * 100}%` }}></div>
                    <div className="growth-bar-year">{d.year}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>令和財託が</div>
            <h2 className="section-title" style={{ color: 'var(--accent)' }}>選ばれる理由</h2>
            <p className="section-sub">
              豊富な実績と経験を活かした柔軟な審査・対応と、<br/>
              スピーディーな資金調達により、多くのお客様に選ばれています。
            </p>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>DIFFERENCE</div>
            <h2 className="section-title" style={{ color: 'var(--accent)' }}>他社・他の資金調達方法との違い</h2>
          </div>
          <div className="diff-list">
            {differentiators.map((d, i) => (
              <div key={i} className="diff-item">
                <div className="diff-num">0{i + 1}</div>
                <div className="diff-body">
                  <div className="diff-title">{d.title}</div>
                  <p className="diff-desc">{d.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>COMPARE</div>
            <h2 className="section-title" style={{ color: 'var(--accent)' }}>他の資金調達方法との比較</h2>
          </div>
          <div className="compare-table-wrap">
            <table className="compare-table">
              <thead>
                <tr>
                  <th></th>
                  <th className="highlight">令和財託の<br/>ファクタリング</th>
                  <th>銀行融資</th>
                  <th>ビジネスローン</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>入金までの速度</th>
                  <td className="highlight">◎ 最短2時間</td>
                  <td>△ 数週間〜1ヶ月</td>
                  <td>○ 数日〜1週間</td>
                </tr>
                <tr>
                  <th>担保・保証人</th>
                  <td className="highlight">◎ 不要</td>
                  <td>× 原則必要</td>
                  <td>△ 場合による</td>
                </tr>
                <tr>
                  <th>審査</th>
                  <td className="highlight">◎ 売掛先の信用力重視</td>
                  <td>× 厳しい</td>
                  <td>△ 信用情報重視</td>
                </tr>
                <tr>
                  <th>信用情報への影響</th>
                  <td className="highlight">◎ なし(負債ではない)</td>
                  <td>× 借入として記録</td>
                  <td>× 借入として記録</td>
                </tr>
                <tr>
                  <th>赤字決算での利用</th>
                  <td className="highlight">◎ 可能</td>
                  <td>× 困難</td>
                  <td>△ 条件による</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>COMPARISON</div>
            <h2 className="section-title" style={{ color: 'var(--accent)' }}>他のファクタリング会社との比較</h2>
            <p className="section-sub">
              ファクタリング会社選びで失敗しないために。<br/>
              手数料・スピード・対応業種など、比較検討の際にチェックすべきポイントをまとめました。
            </p>
          </div>
          <div className="compare-table-wrap">
            <table className="compare-table">
              <thead>
                <tr>
                  <th></th>
                  <th className="highlight">令和財託</th>
                  <th>一般的な<br/>ファクタリング会社A</th>
                  <th>一般的な<br/>ファクタリング会社B</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>2社間手数料</th>
                  <td className="highlight">◎ 2%〜</td>
                  <td>△ 5%〜15%</td>
                  <td>△ 8%〜20%</td>
                </tr>
                <tr>
                  <th>3社間手数料</th>
                  <td className="highlight">◎ 1%〜</td>
                  <td>○ 2%〜9%</td>
                  <td>△ 3%〜10%</td>
                </tr>
                <tr>
                  <th>最短入金スピード</th>
                  <td className="highlight">◎ 最短2時間</td>
                  <td>○ 最短4時間</td>
                  <td>△ 最短半日〜1日</td>
                </tr>
                <tr>
                  <th>必要書類</th>
                  <td className="highlight">◎ 2〜3点</td>
                  <td>△ 5点以上</td>
                  <td>△ 4〜6点</td>
                </tr>
                <tr>
                  <th>建設業への対応</th>
                  <td className="highlight">◎ 自社建設事業運営で深い理解</td>
                  <td>△ 一般対応</td>
                  <td>× 対応不可の場合あり</td>
                </tr>
                <tr>
                  <th>注文書ファクタリング</th>
                  <td className="highlight">◎ 対応可</td>
                  <td>△ 一部対応</td>
                  <td>× 非対応</td>
                </tr>
                <tr>
                  <th>赤字・税金滞納での利用</th>
                  <td className="highlight">◎ 柔軟審査で対応可</td>
                  <td>△ 場合による</td>
                  <td>× 断られるケースが多い</td>
                </tr>
                <tr>
                  <th>個人事業主の小口案件</th>
                  <td className="highlight">◎ 数万円から対応</td>
                  <td>△ 最低金額の制限あり</td>
                  <td>△ 最低金額の制限あり</td>
                </tr>
                <tr>
                  <th>オンライン完結</th>
                  <td className="highlight">◎ 完全対応</td>
                  <td>○ 対応</td>
                  <td>△ 一部来社が必要な場合あり</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p style={{ fontSize: 12, color: 'var(--text-mute)', marginTop: 16, textAlign: 'center' }}>
            ※一般的なファクタリング会社の相場・傾向を基にした比較表です。個社の条件は各社の公開情報・実績に基づき変動します。正確な比較のため、実際のお見積りでのご確認をおすすめします。
          </p>
        </div>
      </section>

      <CasesSection />
      <FundingFlowSection />
      <ContactCTA setPage={setPage} />
    </>
  );
}

// ===============================
// ご利用の流れページ
// ===============================
function FlowPage({ setPage }) {
  const detailSteps = [
    {
      no: '01',
      time: '所要時間 約3分',
      title: 'お問い合わせ・お申し込み',
      lead: 'WEBフォーム・お電話・LINEにて24時間受付いたします。',
      subs: [
        { i: '①', title: 'お問い合わせ方法を選択', text: 'WEBフォーム / お電話 / LINE のいずれかからご連絡ください。24時間受け付けています。' },
        { i: '②', title: '受付完了のご連絡', text: 'メールまたはSMSで受付完了のご連絡をお送りします。' },
        { i: '③', title: 'ヒアリング', text: '専門スタッフが貴社の状況をお伺いします。適切なプランをご提案します。' },
      ],
    },
    {
      no: '02',
      time: '所要時間 約3分',
      title: '審査申し込み・書類提出',
      lead: '必要書類は「請求書」と「通帳コピー」の2点のみ。事前にご準備いただくとスムーズです。',
      subs: [
        { i: '①', title: '書類の準備', text: '請求書(売掛金に関する書類) / 口座の入出金明細(直近3ヶ月分) / 本人確認書類 をご用意ください。' },
        { i: '②', title: 'オンラインで書類提出', text: 'メール・LINE・マイページから書類をアップロード。ご来社不要でオンライン完結です。' },
        { i: '③', title: '審査結果のご提示', text: '最短30分で審査結果と手数料の見積もりをご提示いたします。' },
      ],
    },
    {
      no: '03',
      time: '所要時間 約30分',
      title: 'ご契約〜ご入金',
      lead: 'ご提示内容にご了承いただけましたら、WEB上でご契約手続きが可能です。',
      subs: [
        { i: '①', title: 'オンライン契約', text: 'クラウドサインを利用したオンライン契約。ご来社不要でスピーディーに完結します。' },
        { i: '②', title: 'ご入金', text: 'ご指定口座へ即日お振込みいたします。※時間帯によっては翌営業日になる場合がございます。' },
        { i: '③', title: 'お取引完了', text: '取引先からご入金後、令和財託へお振込みください。ご入金確認でお取引完了です。' },
      ],
    },
  ];

  return (
    <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">FLOW</div>
          <h1 className="hero-title">ご利用の流れ<br/><span style={{fontSize: '0.5em', opacity: 0.9}}>お申込みから最短2時間で資金化</span></h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
            <p style={{ fontSize: 15, lineHeight: 2, color: 'var(--text)' }}>
              令和財託のファクタリングは、シンプルな3ステップでご利用いただけます。<br/>
              お問い合わせから最短2時間で資金化が完了。オンライン完結でご来社は不要です。
            </p>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <div className="flow-detail-list">
            {detailSteps.map((step, i) => (
              <div key={i} className="flow-detail-item">
                <div className="flow-detail-head">
                  <div className="flow-detail-no">
                    <div className="flow-detail-no-label">STEP</div>
                    <div className="flow-detail-no-num">{step.no}</div>
                  </div>
                  <div>
                    <div className="flow-detail-time">{step.time}</div>
                    <div className="flow-detail-title">{step.title}</div>
                    <div className="flow-detail-lead">{step.lead}</div>
                  </div>
                </div>
                <div className="flow-detail-subs">
                  {step.subs.map((s, j) => (
                    <div key={j} className="flow-detail-sub">
                      <div className="flow-detail-sub-i">{s.i}</div>
                      <div className="flow-detail-sub-body">
                        <div className="flow-detail-sub-title">{s.title}</div>
                        <div className="flow-detail-sub-text">{s.text}</div>
                      </div>
                    </div>
                  ))}
                </div>
                {i < detailSteps.length - 1 && <div className="flow-detail-arrow">▼</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div style={{ fontSize: 14, color: 'var(--text-mute)', marginBottom: 6, letterSpacing: '0.1em' }}>DOCUMENTS</div>
            <h2 className="section-title" style={{ color: 'var(--accent)' }}>審査に必要な書類</h2>
            <p className="section-sub">たった2点で審査可能。事前にご用意いただくとスムーズです。</p>
          </div>
          <div className="docs-grid">
            <div className="doc-card">
              <div className="doc-icon">
                <svg viewBox="0 0 80 80" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="14" y="20" width="52" height="40" rx="3"/>
                  <path d="M14 32 L66 32"/>
                  <path d="M22 44 L34 44 M42 44 L52 44 M22 52 L28 52"/>
                </svg>
              </div>
              <div className="doc-tag">必要書類 01</div>
              <div className="doc-title">口座の入出金明細</div>
              <div className="doc-sub">売掛先からの入金がある口座</div>
              <ul className="doc-list">
                <li>ネットバンクの場合: PDF・スクリーンショット</li>
                <li>通帳の場合: コピー・写真(表紙付2ヶ月分)</li>
                <li>直近3ヶ月分をご用意ください</li>
              </ul>
            </div>
            <div className="doc-card">
              <div className="doc-icon">
                <svg viewBox="0 0 80 80" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 12 L52 12 L60 20 L60 66 L22 66 Z"/>
                  <path d="M52 12 L52 20 L60 20"/>
                  <path d="M30 32 L52 32 M30 42 L52 42 M30 52 L44 52"/>
                </svg>
              </div>
              <div className="doc-tag">必要書類 02</div>
              <div className="doc-title">売掛金に関する書類</div>
              <div className="doc-sub">請求書もしくは請求内容が分かるもの</div>
              <ul className="doc-list">
                <li>売却したい売掛金が複数ある場合は全てご提出ください</li>
                <li>注文書ファクタリングの場合は注文書</li>
                <li>建設業の場合は工事請負契約書でも可</li>
              </ul>
            </div>
          </div>
          <p style={{ fontSize: 12, color: 'var(--text-mute)', textAlign: 'center', marginTop: 32, maxWidth: 780, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.9 }}>
            ※お客様にご提出いただいた情報は厳重に管理し、法令に基づく場合等を除き、お客様の同意を得ず第三者に開示することはありません。<br/>
            ※給与債権・不良債権・売掛先が個人事業主である売掛金の買取は行っておりません。
          </p>
        </div>
      </section>

      <ContactCTA setPage={setPage} />
    </>
  );
}

function CompanyPage({ setPage }) {
  const rows = [
    ['会社名', COMPANY.nameJp + '(' + COMPANY.nameEn + ' CO., LTD.)'],
    ['法人番号', COMPANY.corporateNumber],
    ['設立', COMPANY.founded],
    ['代表取締役', COMPANY.ceo],
    ['資本金', COMPANY.capital],
    ['本店', '〒103-0026<br/>東京都中央区日本橋兜町16番4号 島田ビル7F'],
    ['東京オフィス', '〒103-0016<br/>東京都中央区日本橋小網町8-2 BIZMARKS日本橋茅場町311号室'],
    ['電話番号', `<a href="tel:${COMPANY.tel.replace(/-/g, '')}" style="color:inherit">${COMPANY.tel}</a>`],
    ['メールアドレス', COMPANY.email],
    ['営業時間', COMPANY.hours],
    ['事業内容', 'ファクタリング事業<br/>建設業(内装工事)'],
  ];
  return (
    <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">COMPANY</div>
          <h1 className="hero-title">会社概要</h1>
        </div>
      </section>
      {/* 代表挨拶 - 1カラム格調デザイン */}
      <section className="section ceo-section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">CEO MESSAGE</div>
            <h2 className="section-title">代表からの<span className="accent">ご挨拶</span></h2>
          </div>

          <div className="ceo-wrap">
            {/* 大見出し */}
            <div className="ceo-headline">
              <span>資金繰りの現実は、</span>
              <span>机上ではなく<span className="ceo-headline-accent">現場</span>にある。</span>
            </div>

            {/* メッセージ本文 */}
            <div className="ceo-message-body">
              <p>
                令和財託株式会社をご覧いただき、誠にありがとうございます。
                代表取締役の遠田隆介と申します。
              </p>
              <p>
                私たちは、日本で唯一「<strong>ファクタリング</strong>」と「<strong>建設(内装工事)</strong>」の両輪を自社で運営する会社です。
                なぜこの2つを併営するのか。それは、<strong className="ceo-emphasis">資金繰りに悩む中小企業の現実を、机上ではなく現場で理解したかった</strong>からです。
              </p>
              <p>
                建設業の出来高払い、下請け構造、季節変動、突発的な資材費──。
                現場に立って初めて見える資金繰りの厳しさを、私たちは日々肌で感じています。
                だからこそ、教科書通りではない、<strong>貴社の事業に本当に合った資金調達</strong>をご提案できると自負しております。
              </p>
              <p>
                一社でも多くの事業者様の「明日の資金」を支え、次の一歩を後押しする。
                それが令和財託の使命です。
              </p>
            </div>

            {/* サイン(筆書き風) */}
            <div className="ceo-signature">
              <div className="ceo-signature-role">令和財託株式会社 代表取締役</div>
              <div className="ceo-signature-name">遠田 隆介</div>
            </div>
          </div>
        </div>
      </section>
      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">COMPANY PROFILE</div>
            <h2 className="section-title">会社情報</h2>
          </div>
          <div className="company-table">
            {rows.map(([label, value], i) => (
              <div key={i} className="company-row">
                <div className="company-label">{label}</div>
                <div className="company-value" dangerouslySetInnerHTML={{__html: value}} />
              </div>
            ))}
          </div>
        </div>
      </section>
      <ContactCTA setPage={setPage} />
    </>
  );
}

// 記事セクション用: id配列から記事オブジェクトを取得(新データ優先、無ければ従来ダミー)
function useAllBlogPosts() {
  const fullPosts = (typeof window !== 'undefined' && window.BLOG_POSTS_FULL && window.BLOG_POSTS_FULL.length > 0)
    ? window.BLOG_POSTS_FULL
    : BLOG_POSTS;
  return fullPosts;
}

function getPostsByIds(allPosts, ids) {
  return ids.map(id => allPosts.find(p => p.id === id)).filter(Boolean);
}

// 横型カード1枚(画像左・テキスト右)
function BlogRowCard({ p, setPage, setBlogId }) {
  return (
    <a href={`/blog/${p.slug || p.id}/`} className="blog-row-card" onClick={(e) => { e.preventDefault(); setBlogId(p.id); setPage('blog-detail'); }}>
      <div className="blog-row-thumb">
        {p.cover ? (
          <img src={p.cover} alt={p.title} loading="lazy" />
        ) : (
          <div className="blog-thumb-en">COLUMN</div>
        )}
        <div className="blog-cat">{p.cat}</div>
      </div>
      <div className="blog-row-body">
        <div className="blog-date">{p.date}</div>
        <div className="blog-row-title">{p.title}</div>
        <div className="blog-tags">
          {(p.tags || []).slice(0, 3).map(t => <span key={t} className="blog-tag">#{t}</span>)}
        </div>
      </div>
    </a>
  );
}

// 横スクロールの帯(カルーセル)
function BlogRowTrack({ posts, setPage, setBlogId }) {
  if (!posts.length) return null;
  return (
    <div className="blog-row-track">
      {posts.map(p => <BlogRowCard key={p.id} p={p} setPage={setPage} setBlogId={setBlogId} />)}
    </div>
  );
}

// カテゴリ別セクション(横スクロールの帯で表示)
function BlogCatSection({ tag, title, posts, setPage, setBlogId, moreLabel }) {
  if (!posts.length) return null;
  return (
    <div className="blog-cat-section">
      <div className="blog-cat-section-head">
        <div className="blog-cat-section-title">
          <span className="tag">{tag}</span>
          {title}
        </div>
        {moreLabel && <a href="#blog-all" className="blog-cat-section-more" onClick={(e) => { e.preventDefault(); document.getElementById('blog-all')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}>{moreLabel} ›</a>}
      </div>
      <BlogRowTrack posts={posts} setPage={setPage} setBlogId={setBlogId} />
    </div>
  );
}

function BlogListPage({ setPage, setBlogId }) {
  const allPosts = useAllBlogPosts();
  const [showAll, setShowAll] = useState(false);

  // 業種別の人気記事(医療・介護、個人事業主、運送業)
  const byIndustry = getPostsByIds(allPosts, ['p16', 'p3', 'p14']);
  // 初めての方向け(基礎・必要書類・審査ポイント)
  const forBeginners = getPostsByIds(allPosts, ['p1', 'p4', 'p29']);
  // 比較・選び方(他社比較・手数料相場・乗り換え交渉)
  const compare = getPostsByIds(allPosts, ['p24', 'p8', 'p25']);
  // 最新記事(日付降順で先頭8件、新データは新しい順に並んでいる前提のため末尾から取得)
  const latest = allPosts.slice(-8).reverse();

  return (
    <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">COLUMN &amp; BLOG</div>
          <h1 className="hero-title">ファクタリング<br/>コラム</h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <BlogCatSection
            tag="業種別"
            title="業種別の人気記事"
            posts={byIndustry}
            setPage={setPage}
            setBlogId={setBlogId}
          />
          <BlogCatSection
            tag="初めての方"
            title="初めての方向け"
            posts={forBeginners}
            setPage={setPage}
            setBlogId={setBlogId}
          />
          <BlogCatSection
            tag="比較"
            title="比較・選び方"
            posts={compare}
            setPage={setPage}
            setBlogId={setBlogId}
          />
          <BlogCatSection
            tag="NEW"
            title="最新記事"
            posts={latest}
            setPage={setPage}
            setBlogId={setBlogId}
          />
        </div>
      </section>

      <section id="blog-all" className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">ALL ARTICLES</div>
            <h2 className="section-title">記事一覧<span className="accent">({allPosts.length}件)</span></h2>
          </div>

          {!showAll ? (
            <BlogRowTrack posts={allPosts} setPage={setPage} setBlogId={setBlogId} />
          ) : (
            <div className="blog-list-row">
              {allPosts.map(p => <BlogRowCard key={p.id} p={p} setPage={setPage} setBlogId={setBlogId} />)}
            </div>
          )}

          <div className="blog-toggle-wrap">
            <button className={`blog-toggle-btn ${showAll ? 'open' : ''}`} onClick={() => setShowAll(v => !v)}>
              {showAll ? '表示を減らす' : `すべての記事を見る(${allPosts.length}件)`}
              <span className="chevron">▾</span>
            </button>
          </div>
        </div>
      </section>

      <ContactCTA setPage={setPage} />
    </>
  );
}

function BlogDetailPage({ setPage, blogId }) {
  // 新しい詳細記事データがあればそれを優先、無ければ従来のダミーで
  const fullPosts = (typeof window !== 'undefined' && window.BLOG_POSTS_FULL) || [];
  const post = fullPosts.find(p => p.id === blogId) || BLOG_POSTS.find(p => p.id === blogId) || fullPosts[0] || BLOG_POSTS[0];
  const isFullPost = !!post.body;

  // 関連記事(記事の internalLinks で指定されたもの、または最新3件)
  const relatedPosts = (post.internalLinks || [])
    .map(id => fullPosts.find(p => p.id === id))
    .filter(Boolean)
    .slice(0, 3);
  const fallbackRelated = fullPosts.filter(p => p.id !== post.id).slice(0, 3);
  const finalRelated = relatedPosts.length > 0 ? relatedPosts : fallbackRelated;

  // 本文の内部リンク(data-link="pX")をクリック可能にする
  const bodyRef = React.useRef(null);
  useEffect(() => {
    if (!bodyRef.current || !isFullPost) return;
    const links = bodyRef.current.querySelectorAll('a[data-link]');
    const handlers = [];
    links.forEach(link => {
      const targetId = link.getAttribute('data-link');
      const target = fullPosts.find(p => p.id === targetId);
      if (target) {
        link.classList.add('internal-link');
        link.setAttribute('href', 'javascript:void(0)');
        const handler = (e) => {
          e.preventDefault();
          if (window.__setBlogId) window.__setBlogId(targetId);
          setPage('blog-detail');
          setTimeout(() => window.scrollTo(0, 0), 100);
        };
        link.addEventListener('click', handler);
        handlers.push([link, handler]);
      }
    });
    return () => handlers.forEach(([link, handler]) => link.removeEventListener('click', handler));
  }, [post.id, isFullPost]);

  // JSON-LD Article + FAQPage スキーマを注入
  useEffect(() => {
    if (!isFullPost) return;
    // Article
    const articleScript = document.createElement('script');
    articleScript.type = 'application/ld+json';
    articleScript.id = 'article-jsonld';
    articleScript.textContent = JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": post.title,
      "description": post.metaDesc || post.excerpt,
      "image": post.cover ? "https://reiwa-zaitaku.co.jp" + post.cover : undefined,
      "keywords": post.keyword,
      "datePublished": post.date.replace(/\./g, '-'),
      "dateModified": post.date.replace(/\./g, '-'),
      "author": {
        "@type": "Organization",
        "name": post.author ? post.author.name : "令和財託株式会社"
      },
      "publisher": {
        "@type": "Organization",
        "name": "令和財託株式会社",
        "logo": { "@type": "ImageObject", "url": "https://reiwa-zaitaku.co.jp/assets/logo.png" }
      },
      "mainEntityOfPage": "https://reiwa-zaitaku.co.jp/blog/" + (post.slug || post.id) + "/"
    });
    document.head.appendChild(articleScript);

    // FAQPage(記事内FAQ用)
    let faqScript = null;
    if (post.faq && post.faq.length > 0) {
      faqScript = document.createElement('script');
      faqScript.type = 'application/ld+json';
      faqScript.id = 'article-faq-jsonld';
      faqScript.textContent = JSON.stringify({
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": post.faq.map(f => ({
          "@type": "Question",
          "name": f.q,
          "acceptedAnswer": { "@type": "Answer", "text": f.a }
        }))
      });
      document.head.appendChild(faqScript);
    }

    // Breadcrumb
    const bcScript = document.createElement('script');
    bcScript.type = 'application/ld+json';
    bcScript.id = 'article-bc-jsonld';
    bcScript.textContent = JSON.stringify({
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "トップ", "item": "https://reiwa-zaitaku.co.jp/" },
        { "@type": "ListItem", "position": 2, "name": "ファクタリング知識", "item": "https://reiwa-zaitaku.co.jp/blog/" },
        { "@type": "ListItem", "position": 3, "name": post.cat, "item": "https://reiwa-zaitaku.co.jp/blog/category/" + (post.catSlug || 'basics') + "/" },
        { "@type": "ListItem", "position": 4, "name": post.title, "item": "https://reiwa-zaitaku.co.jp/blog/" + (post.slug || post.id) + "/" }
      ]
    });
    document.head.appendChild(bcScript);

    // metaタイトル・description・canonical・OGも書き換え
    const postUrl = 'https://reiwa-zaitaku.co.jp/blog/' + (post.slug || post.id) + '/';
    if (post.metaTitle) {
      document.title = post.metaTitle;
      const ogTitle = document.querySelector('meta[property="og:title"]');
      if (ogTitle) ogTitle.setAttribute('content', post.metaTitle);
      const twTitle = document.querySelector('meta[name="twitter:title"]');
      if (twTitle) twTitle.setAttribute('content', post.metaTitle);
    }
    const descEl = document.querySelector('meta[name="description"]');
    if (descEl && post.metaDesc) descEl.setAttribute('content', post.metaDesc);
    const kwEl = document.querySelector('meta[name="keywords"]');
    if (kwEl && post.keyword) {
      const kwList = [post.keyword, ...(post.tags || [])].filter(Boolean).join(',');
      kwEl.setAttribute('content', kwList);
    }
    const ogDesc = document.querySelector('meta[property="og:description"]');
    if (ogDesc && post.metaDesc) ogDesc.setAttribute('content', post.metaDesc);
    const twDesc = document.querySelector('meta[name="twitter:description"]');
    if (twDesc && post.metaDesc) twDesc.setAttribute('content', post.metaDesc);
    const canon = document.querySelector('link[rel="canonical"]');
    if (canon) canon.setAttribute('href', postUrl);
    const ogUrl = document.querySelector('meta[property="og:url"]');
    if (ogUrl) ogUrl.setAttribute('content', postUrl);
    // SPA内クリック遷移時はURLもpushStateで同期(初回SSR表示時はサーバー側で既に正しいURLなのでスキップ)
    if (window.location.pathname !== '/blog/' + (post.slug || post.id) + '/') {
      window.history.pushState({ page: 'blog-detail', blogId: post.id }, '', postUrl);
    }
    return () => {
      const el = document.getElementById('article-jsonld');
      if (el) el.remove();
      const el2 = document.getElementById('article-faq-jsonld');
      if (el2) el2.remove();
      const el3 = document.getElementById('article-bc-jsonld');
      if (el3) el3.remove();
    };
  }, [post.id, isFullPost]);

  // FAQ アコーディオン
  const [openFaq, setOpenFaq] = useState(-1);

  return (
    <>
      <div className="container">
        <article className="blog-detail">
          {/* パンくず */}
          <nav className="blog-breadcrumb" aria-label="パンくずリスト">
            <a href="/" onClick={(e) => { e.preventDefault(); setPage('top'); }}>トップ</a>
            <span>›</span>
            <a href="/blog/" onClick={(e) => { e.preventDefault(); setPage('blog'); }}>ファクタリング知識</a>
            <span>›</span>
            <span>{post.cat}</span>
          </nav>

          <div className="blog-detail-meta">
            <span style={{background:'var(--accent)', color:'var(--primary)', fontSize:10, fontWeight:700, padding:'3px 10px', letterSpacing:'0.15em'}}>{post.cat}</span>
            <span>{post.date}</span>
            {post.readingTime && <span>読了 {post.readingTime}</span>}
            {post.tags && post.tags.map(t => (
              <span key={t} style={{fontSize:10, color: 'var(--text-mute)', border:'1px solid var(--line)', padding:'2px 8px'}}>#{t}</span>
            ))}
          </div>
          <h1>{post.title}</h1>

          {/* 著者情報(E-E-A-T) */}
          {post.author && (
            <div className="blog-author">
              <div className="blog-author-avatar">令</div>
              <div className="blog-author-info">
                <div className="blog-author-name">{post.author.name}</div>
                <div className="blog-author-role">{post.author.role}</div>
              </div>
            </div>
          )}

          {/* 表紙画像 */}
          {isFullPost && post.cover && (
            <div className="blog-cover">
              <img src={post.cover} alt={post.title} loading="eager" />
            </div>
          )}

          {isFullPost && post.excerpt && (
            <p className="blog-lead">{post.excerpt}</p>
          )}

          {/* 目次 */}
          {isFullPost && post.toc && (
            <div className="toc">
              <h4>この記事の目次</h4>
              <ol>
                {post.toc.map(t => (
                  <li key={t.id}><a href={'#' + t.id}>{t.text}</a></li>
                ))}
              </ol>
            </div>
          )}

          {/* 記事本文 */}
          {isFullPost ? (
            <div className="blog-body" ref={bodyRef} dangerouslySetInnerHTML={{ __html: post.body }} />
          ) : (
            <>
              <p>{post.excerpt}</p>
              <p style={{color: 'var(--text-mute)', fontSize: 13, marginTop: 24}}>この記事は準備中です。</p>
            </>
          )}

          {/* 記事内 FAQ */}
          {isFullPost && post.faq && post.faq.length > 0 && (
            <section className="blog-faq" id="faq">
              <h2>この記事のよくあるご質問</h2>
              <div className="blog-faq-list">
                {post.faq.map((f, i) => (
                  <div key={i} className={`blog-faq-item ${openFaq === i ? 'open' : ''}`}>
                    <button className="blog-faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                      <span className="blog-faq-q-label">Q</span>
                      <span className="blog-faq-q-text">{f.q}</span>
                      <span className="blog-faq-q-icon">{openFaq === i ? '−' : '+'}</span>
                    </button>
                    {openFaq === i && (
                      <div className="blog-faq-a">
                        <span className="blog-faq-a-label">A</span>
                        <div className="blog-faq-a-text">{f.a}</div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </section>
          )}

          {/* 記事末CTA */}
          <div className="blog-cta">
            <div className="blog-cta-tag">相談無料 / 相談のみ可</div>
            <div className="blog-cta-title">この記事を読んで気になった方へ</div>
            <p className="blog-cta-desc">令和財託では最短2時間で資金化可能。<br/>まずは無料相談からお気軽にお問い合わせください。<br/>強引な営業や、しつこいご連絡は一切いたしません。</p>
            <div className="blog-cta-buttons">
              <button className="blog-cta-btn primary" onClick={() => setPage('consult')}>
                無料相談する →
              </button>
              <button className="blog-cta-btn secondary" onClick={() => setPage('factoring')}>
                サービス詳細を見る
              </button>
            </div>
          </div>

          {/* 関連記事(内部リンクベース) */}
          {finalRelated.length > 0 && (
            <div className="blog-related">
              <h4>あわせて読みたい関連記事</h4>
              <div className="blog-related-list">
                {finalRelated.map(rp => (
                  <div key={rp.id} className="blog-related-card" onClick={() => {
                    if (window.__setBlogId) window.__setBlogId(rp.id);
                    setPage('blog-detail');
                    setTimeout(() => window.scrollTo(0, 0), 100);
                  }}>
                    {rp.cover && (
                      <div className="blog-related-thumb">
                        <img src={rp.cover} alt={rp.title} loading="lazy" />
                      </div>
                    )}
                    <div className="blog-related-body">
                      <div className="blog-related-cat">{rp.cat}</div>
                      <div className="blog-related-title">{rp.title}</div>
                      <div className="blog-related-date">{rp.date}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </article>
      </div>
      <ContactCTA setPage={setPage} />
    </>
  );
}

// ===============================
// 無料相談ページ (2段階フォーム)
// ===============================
function FreeConsultPage({ setPage, initialSubmissionId, clearInitialSubmissionId }) {
  // トップページの無料お見積りフォームで既にSTEP1相当の送信を済ませている場合は、
  // STEP1の入力画面を省略し、書類提出(STEP2)から始める。
  const [step, setStep] = useState(() => initialSubmissionId ? 2 : 1);
  const [form, setForm] = useState({
    company: '', revenue: '', ceo: '', address: '', tel: '', email: '',
    desiredAmount: '', desiredTiming: '', note: '',
  });
  const [submissionId, setSubmissionId] = useState(() => initialSubmissionId || null);
  const [sending, setSending] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');
  const [hasOtherFactoring, setHasOtherFactoring] = useState('');
  const update = (k, v) => setForm(s => ({ ...s, [k]: v }));

  // 一度このページで消費したらクリアしておく(戻る→STEP1→再度consultページ遷移時に
  // 古いsubmissionIdが再利用されないようにするため)
  useEffect(() => {
    if (initialSubmissionId && clearInitialSubmissionId) clearInitialSubmissionId();
  }, []);

  const handleStep1 = async (e) => {
    e.preventDefault();
    setSending(true);
    setErrorMsg('');
    try {
      const res = await fetch('/api/consult/step1', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        throw new Error(data.error || 'STEP1の送信に失敗しました。');
      }
      setSubmissionId(data.submissionId);
      setStep(1.5);
      window.scrollTo(0, 0);
    } catch (err) {
      setErrorMsg(err.message || '送信中にエラーが発生しました。時間をおいて再度お試しください。');
    } finally {
      setSending(false);
    }
  };

  const handleStep2 = async (e) => {
    e.preventDefault();
    setSending(true);
    setErrorMsg('');
    try {
      const fd = new FormData(e.target);
      fd.set('submissionId', String(submissionId));
      const res = await fetch('/api/consult/step2', {
        method: 'POST',
        body: fd
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        throw new Error(data.error || 'STEP2の送信に失敗しました。');
      }
      setStep(3);
      window.scrollTo(0, 0);
    } catch (err) {
      setErrorMsg(err.message || '送信中にエラーが発生しました。時間をおいて再度お試しください。');
    } finally {
      setSending(false);
    }
  };

  return (
    <>
      <section className="hero" style={{padding: '60px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">FREE CONSULTATION</div>
          <h1 className="hero-title">
            まずは<span className="accent">無料相談</span>から
          </h1>
          <p className="hero-sub">
            最短30秒で入力完了。ファクタリングが利用できるか、まずはお気軽にご相談ください。<br/>
            強引な営業や、しつこいご連絡は一切いたしません。
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="consult-stepper">
            <div className={`consult-step ${step >= 1 ? 'done' : ''} ${step === 1 ? 'current' : ''}`}>
              <div className="consult-step-no">STEP 1</div>
              <div className="consult-step-label">かんたん相談</div>
            </div>
            <div className="consult-step-line"></div>
            <div className={`consult-step ${step >= 2 ? 'done' : ''} ${step === 1.5 ? 'current' : ''}`}>
              <div className="consult-step-no">診断結果</div>
              <div className="consult-step-label">相談可否のご案内</div>
            </div>
            <div className="consult-step-line"></div>
            <div className={`consult-step ${step >= 2 ? 'done' : ''} ${step === 2 ? 'current' : ''}`}>
              <div className="consult-step-no">STEP 2</div>
              <div className="consult-step-label">本格相談・書類提出</div>
            </div>
            <div className="consult-step-line"></div>
            <div className={`consult-step ${step >= 3 ? 'done' : ''} ${step === 3 ? 'current' : ''}`}>
              <div className="consult-step-no">STEP 3</div>
              <div className="consult-step-label">審査・回答</div>
            </div>
          </div>

          {step === 1.5 && (
            <div className="consult-panel consult-done">
              <div className="consult-done-icon">
                <svg viewBox="0 0 80 80" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="40" cy="40" r="34"/>
                  <path d="M26 40 L36 50 L54 30"/>
                </svg>
              </div>
              <h2 className="consult-done-title">ファクタリング相談可能です</h2>
              <p className="consult-done-desc">
                ご入力いただいた内容を確認いたしました。<br/>
                {form.company} 様は、ファクタリングによる資金調達のご相談が<strong>可能</strong>です。<br/>
                引き続き、必要書類をご提出いただくことで本格的な審査にお進みいただけます。
              </p>
              <div className="consult-done-info">
                <div className="consult-done-info-row">
                  <span className="consult-done-info-label">お急ぎの場合</span>
                  <a href={'tel:' + COMPANY.tel.replace(/-/g, '')} className="consult-done-info-value">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{marginRight: 6, verticalAlign: 'middle'}}>
                      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                    </svg>
                    {COMPANY.tel}
                  </a>
                </div>
              </div>
              <button className="form-submit" onClick={() => { setStep(2); window.scrollTo(0, 0); }} style={{ maxWidth: 360, margin: '32px auto 0' }}>
                今すぐ書類を提出して2時間以内の入金を目指す →
              </button>
            </div>
          )}

          {step === 1 && (
            <div className="consult-panel">
              <div className="consult-panel-head">
                <div className="consult-panel-lead">STEP 1</div>
                <h2 className="consult-panel-title">まずはファクタリングできるか相談する</h2>
                <p className="consult-panel-desc">
                  貴社の基本情報をお伺いします。この段階では書類提出は不要です。<br/>
                  ヒアリング後、ファクタリングが利用可能かをまずお伝えします。
                </p>
              </div>
              <form className="form-wrap" onSubmit={handleStep1}>
                <div className="form-row">
                  <label className="form-label">会社名(屋号) <span className="req">必須</span></label>
                  <input className="form-input" type="text" placeholder="株式会社サンプル"
                    required value={form.company} onChange={e => update('company', e.target.value)} />
                </div>
                <div className="form-row">
                  <label className="form-label">売上月商 <span className="req">必須</span></label>
                  <select className="form-select" required value={form.revenue} onChange={e => update('revenue', e.target.value)}>
                    <option value="">選択してください</option>
                    <option>〜100万円</option>
                    <option>100〜500万円</option>
                    <option>500〜1,000万円</option>
                    <option>1,000〜5,000万円</option>
                    <option>5,000万円〜1億円</option>
                    <option>1億円〜</option>
                  </select>
                </div>
                <div className="form-row">
                  <label className="form-label">代表者様お名前 <span className="req">必須</span></label>
                  <input className="form-input" type="text" placeholder="山田 太郎"
                    required value={form.ceo} onChange={e => update('ceo', e.target.value)} />
                </div>
                <div className="form-row">
                  <label className="form-label">所在地(住所) <span className="req">必須</span></label>
                  <input className="form-input" type="text" placeholder="東京都中央区日本橋小網町8-2"
                    required value={form.address} onChange={e => update('address', e.target.value)} />
                </div>
                <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
                  <div>
                    <label className="form-label">電話番号 <span className="req">必須</span></label>
                    <input className="form-input" type="tel" placeholder="03-0000-0000"
                      required value={form.tel} onChange={e => update('tel', e.target.value)} />
                  </div>
                  <div>
                    <label className="form-label">メールアドレス <span className="req">必須</span></label>
                    <input className="form-input" type="email" placeholder="you@example.com"
                      required value={form.email} onChange={e => update('email', e.target.value)} />
                  </div>
                </div>
                <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
                  <div>
                    <label className="form-label">ご希望調達金額</label>
                    <select className="form-select"
                      value={form.desiredAmount} onChange={e => update('desiredAmount', e.target.value)}>
                      <option value="">未選択</option>
                      <option>〜100万円</option>
                      <option>100〜500万円</option>
                      <option>500〜1,000万円</option>
                      <option>1,000〜5,000万円</option>
                      <option>5,000万円〜</option>
                    </select>
                  </div>
                  <div>
                    <label className="form-label">ご希望入金時期</label>
                    <select className="form-select"
                      value={form.desiredTiming} onChange={e => update('desiredTiming', e.target.value)}>
                      <option value="">未選択</option>
                      <option>本日中</option>
                      <option>2〜3日以内</option>
                      <option>1週間以内</option>
                      <option>相談したい</option>
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <label className="form-label">ご相談内容(任意)</label>
                  <textarea className="form-textarea" placeholder="現在の資金繰りの状況、他社利用中かどうか、その他ご質問など"
                    value={form.note} onChange={e => update('note', e.target.value)}></textarea>
                </div>
                {errorMsg && (
                  <p style={{ color: '#c0392b', fontSize: 13, marginBottom: 12, textAlign: 'center' }}>{errorMsg}</p>
                )}
                <button type="submit" className="form-submit" disabled={sending}>
                  {sending ? '送信中...' : 'まずはファクタリングできるか相談する →'}
                </button>
                <p style={{ fontSize: 11, color: 'var(--text-mute)', textAlign: 'center', marginTop: 16, lineHeight: 1.8 }}>
                  ご入力いただいた情報は、当社プライバシーポリシーに基づき厳重に管理いたします。<br/>
                  営業時間内であれば最短30分でご返信いたします。
                </p>
              </form>
            </div>
          )}

          {step === 2 && (
            <div className="consult-panel">
              <div className="consult-panel-head">
                <div className="consult-panel-lead">STEP 2</div>
                <h2 className="consult-panel-title">本格相談 - 審査に必要な書類</h2>
                <p className="consult-panel-desc">
                  ヒアリング内容をご確認いただきありがとうございます。<br/>
                  実際にファクタリングを進める場合は、以下の2点の書類をご提出ください。<strong>最短2時間で入金が可能です。</strong>
                </p>
              </div>

              <div className="docs-required">
                <div className="doc-required-card">
                  <div className="doc-required-tag">必要書類 01</div>
                  <div className="doc-required-icon">
                    <svg viewBox="0 0 80 80" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="14" y="20" width="52" height="40" rx="3"/>
                      <path d="M14 32 L66 32"/>
                      <path d="M22 44 L34 44 M42 44 L52 44 M22 52 L28 52"/>
                    </svg>
                  </div>
                  <div className="doc-required-title">口座通帳のコピー</div>
                  <div className="doc-required-sub"><strong>直近3ヶ月分</strong></div>
                  <ul className="doc-required-list">
                    <li>売掛先からの入金がある口座</li>
                    <li>ネットバンクの場合: PDF・スクリーンショット</li>
                    <li>通帳の場合: 写真・コピー(表紙付)</li>
                  </ul>
                </div>
                <div className="doc-required-card">
                  <div className="doc-required-tag">必要書類 02</div>
                  <div className="doc-required-icon">
                    <svg viewBox="0 0 80 80" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="14" y="20" width="52" height="40" rx="3"/>
                      <circle cx="28" cy="38" r="6"/>
                      <path d="M42 32 L58 32 M42 42 L58 42 M22 52 L58 52"/>
                    </svg>
                  </div>
                  <div className="doc-required-title">身分証明書</div>
                  <div className="doc-required-sub"><strong>代表者様の本人確認書類</strong></div>
                  <ul className="doc-required-list">
                    <li>運転免許証</li>
                    <li>マイナンバーカード</li>
                    <li>パスポート など いずれか1点</li>
                  </ul>
                </div>
              </div>

              <form className="form-wrap" onSubmit={handleStep2} style={{ marginTop: 40 }}>
                <div className="form-row">
                  <label className="form-label">口座通帳のコピー(3ヶ月分) <span className="req">必須</span></label>
                  <input className="form-input" type="file" name="bankbook" accept="image/*,.pdf" multiple required />
                  <div className="form-hint">複数ファイル選択可 / PDF・画像OK</div>
                </div>
                <div className="form-row">
                  <label className="form-label">身分証明書(表) <span className="req">必須</span></label>
                  <input className="form-input" type="file" name="idDocument" accept="image/*,.pdf" required />
                  <div className="form-hint">運転免許証・マイナンバーカード等</div>
                </div>
                <div className="form-row">
                  <label className="form-label">今回買取分の請求書</label>
                  <input className="form-input" type="file" name="invoice" accept="image/*,.pdf" multiple />
                  <div className="form-hint">お手元にあればあわせてご提出ください</div>
                </div>
                <div className="form-row">
                  <label className="form-label">ご希望調達金額</label>
                  <select className="form-select" name="desiredAmount" defaultValue={form.desiredAmount}>
                    <option value="">未選択</option>
                    <option>〜100万円</option>
                    <option>100〜500万円</option>
                    <option>500〜1,000万円</option>
                    <option>1,000〜5,000万円</option>
                    <option>5,000万円〜</option>
                  </select>
                </div>
                <div className="form-row">
                  <label className="form-label">ご希望入金時期</label>
                  <select className="form-select" name="desiredTiming" defaultValue={form.desiredTiming}>
                    <option value="">未選択</option>
                    <option>本日中</option>
                    <option>2〜3日以内</option>
                    <option>1週間以内</option>
                    <option>相談したい</option>
                  </select>
                </div>

                {/* ===== 追加情報(任意) ===== */}
                <div className="consult-extra-divider">
                  <div className="consult-extra-divider-label">追加情報(任意)</div>
                  <p className="consult-extra-divider-note">
                    こちらは全て任意項目ですが、<strong>ご記入・ご提出いただいた項目が多いほど、審査にかかる確認のお時間が短縮され、入金までのスピードが早くなります。</strong><br/>
                    お手元にある範囲で構いませんので、ご協力いただけますと幸いです。
                  </p>
                </div>

                <div className="form-row">
                  <label className="form-label">身分証明書(裏)<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="file" name="idDocumentBack" accept="image/*,.pdf" />
                </div>
                <div className="form-row">
                  <label className="form-label">過去の請求書<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="file" name="pastInvoice" accept="image/*,.pdf" multiple />
                </div>
                <div className="form-row">
                  <label className="form-label">売掛先とのやりとり(メール等)<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="file" name="correspondence" accept="image/*,.pdf" multiple />
                </div>

                <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
                  <div>
                    <label className="form-label">従業員数<span className="lp-form-opt">任意</span></label>
                    <input className="form-input" type="text" name="employeeCount" placeholder="例: 5名" />
                  </div>
                  <div>
                    <label className="form-label">FAX番号<span className="lp-form-opt">任意</span></label>
                    <input className="form-input" type="tel" name="fax" placeholder="03-0000-0000" />
                  </div>
                </div>
                <div className="form-row">
                  <label className="form-label">資金使途<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="text" name="fundUsage" placeholder="例: 仕入代金の支払い、人件費など" />
                </div>
                <div className="form-row">
                  <label className="form-label">緊急連絡先<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="text" name="emergencyContact" placeholder="お名前・ご関係・電話番号など" />
                </div>
                <div className="form-row">
                  <label className="form-label">会社住所(本店所在地)<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="text" name="companyAddress" placeholder="STEP1の所在地と異なる場合はこちら" />
                </div>
                <div className="form-row">
                  <label className="form-label">ご自宅住所(代表者様)<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="text" name="homeAddress" placeholder="東京都〇〇区..." />
                </div>
                <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
                  <div>
                    <label className="form-label">年商<span className="lp-form-opt">任意</span></label>
                    <input className="form-input" type="text" name="annualRevenue" placeholder="例: 5,000万円" />
                  </div>
                  <div>
                    <label className="form-label">主要取引先<span className="lp-form-opt">任意</span></label>
                    <input className="form-input" type="text" name="mainClient" placeholder="主な売掛先の会社名" />
                  </div>
                </div>
                <div className="form-row">
                  <label className="form-label">お使いの主要口座・銀行<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="text" name="mainBank" placeholder="例: 〇〇銀行 〇〇支店" />
                </div>
                <div className="form-row">
                  <label className="form-label">融資履歴<span className="lp-form-opt">任意</span></label>
                  <input className="form-input" type="text" name="loanHistory" placeholder="例: 日本政策金融公庫より500万円(返済中)" />
                </div>
                <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
                  <div>
                    <label className="form-label">リスケジュールの有無<span className="lp-form-opt">任意</span></label>
                    <select className="form-select" name="hasReschedule" defaultValue="">
                      <option value="">未選択</option>
                      <option>あり</option>
                      <option>なし</option>
                    </select>
                  </div>
                  <div>
                    <label className="form-label">現在の他社ファクタリング利用<span className="lp-form-opt">任意</span></label>
                    <select className="form-select" name="hasOtherFactoring" value={hasOtherFactoring} onChange={e => setHasOtherFactoring(e.target.value)}>
                      <option value="">未選択</option>
                      <option>あり</option>
                      <option>なし</option>
                    </select>
                  </div>
                </div>
                {hasOtherFactoring === 'あり' && (
                  <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
                    <div>
                      <label className="form-label">利用中の会社名<span className="lp-form-opt">任意</span></label>
                      <input className="form-input" type="text" name="otherFactoringName" placeholder="〇〇ファクタリング株式会社" />
                    </div>
                    <div>
                      <label className="form-label">利用中の金額<span className="lp-form-opt">任意</span></label>
                      <input className="form-input" type="text" name="otherFactoringAmount" placeholder="例: 300万円" />
                    </div>
                  </div>
                )}
                <div className="form-row">
                  <label className="form-label">備考・ご相談内容</label>
                  <textarea className="form-textarea" name="note" placeholder="ご質問や気になる点があればご記入ください"></textarea>
                </div>
                {errorMsg && (
                  <p style={{ color: '#c0392b', fontSize: 13, marginBottom: 12, textAlign: 'center' }}>{errorMsg}</p>
                )}
                <div className="consult-btn-row">
                  <button type="button" className="form-submit-back" onClick={() => setStep(1)} disabled={sending}>← 戻る</button>
                  <button type="submit" className="form-submit" disabled={sending}>{sending ? '送信中...' : '今すぐ提出して審査を進める →'}</button>
                </div>
              </form>
            </div>
          )}

          {step === 3 && (
            <div className="consult-panel consult-done">
              <div className="consult-done-icon">
                <svg viewBox="0 0 80 80" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="40" cy="40" r="34"/>
                  <path d="M26 40 L36 50 L54 30"/>
                </svg>
              </div>
              <h2 className="consult-done-title">お申込みありがとうございます</h2>
              <p className="consult-done-desc">
                担当者より営業時間内 (平日9:00〜20:00) に、<br/>
                最短30分でご連絡させていただきます。<br/>
                審査結果と手数料のお見積りをご提示いたします。
              </p>
              <div className="consult-done-info">
                <div className="consult-done-info-row">
                  <span className="consult-done-info-label">お急ぎの場合</span>
                  <a href={'tel:' + COMPANY.tel.replace(/-/g, '')} className="consult-done-info-value">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{marginRight: 6, verticalAlign: 'middle'}}>
                      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                    </svg>
                    {COMPANY.tel}
                  </a>
                </div>
              </div>
              <button className="form-submit" onClick={() => setPage('top')} style={{ maxWidth: 300, margin: '32px auto 0' }}>トップに戻る</button>
            </div>
          )}
        </div>
      </section>
    </>
  );
}

function ContactPage() {
  const [form, setForm] = useState({
    name: '', company: '', tel: '', email: '',
    inquiryType: '', desiredAmount: '', desiredTiming: '', message: ''
  });
  const [status, setStatus] = useState('idle'); // idle | sending | done | error
  const [errorMsg, setErrorMsg] = useState('');
  const update = (k, v) => setForm(s => ({ ...s, [k]: v }));

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        throw new Error(data.error || '送信に失敗しました。');
      }
      setStatus('done');
      window.scrollTo(0, 0);
    } catch (err) {
      setStatus('error');
      setErrorMsg(err.message || '送信中にエラーが発生しました。時間をおいて再度お試しください。');
    }
  };

  if (status === 'done') {
    return (
      <>
        <section className="hero" style={{padding: '80px 0'}}>
          <div className="container hero-inner">
            <div className="hero-eyebrow">CONTACT</div>
            <h1 className="hero-title">お問い合わせ<br/><span style={{fontSize:'0.55em', opacity: 0.9}}>無料見積もり・査定のお申し込み</span></h1>
          </div>
        </section>
        <section className="section">
          <div className="container">
            <div className="consult-panel consult-done">
              <div className="consult-done-icon">
                <svg viewBox="0 0 80 80" width="72" height="72" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="40" cy="40" r="34"/>
                  <path d="M26 40 L36 50 L54 30"/>
                </svg>
              </div>
              <h2 className="consult-done-title">お問い合わせありがとうございます</h2>
              <p className="consult-done-desc">
                担当者より営業時間内 (平日9:00〜20:00) に、<br/>
                最短30分でご連絡させていただきます。
              </p>
            </div>
          </div>
        </section>
      </>
    );
  }

  return (
    <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">CONTACT</div>
          <h1 className="hero-title">お問い合わせ<br/><span style={{fontSize:'0.55em', opacity: 0.9}}>無料見積もり・査定のお申し込み</span></h1>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">FORM</div>
            <h2 className="section-title">お問い合わせフォーム</h2>
            <p className="section-sub">下記フォームよりお気軽にご相談ください。営業時間内なら最短30分でご返信します。</p>
          </div>
          <form className="form-wrap" onSubmit={handleSubmit}>
            <div className="form-row">
              <label className="form-label">お名前 <span className="req">必須</span></label>
              <input className="form-input" type="text" placeholder="山田 太郎" required
                value={form.name} onChange={e => update('name', e.target.value)} />
            </div>
            <div className="form-row">
              <label className="form-label">会社名</label>
              <input className="form-input" type="text" placeholder="株式会社サンプル"
                value={form.company} onChange={e => update('company', e.target.value)} />
            </div>
            <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
              <div>
                <label className="form-label">電話番号 <span className="req">必須</span></label>
                <input className="form-input" type="tel" placeholder="03-0000-0000" required
                  value={form.tel} onChange={e => update('tel', e.target.value)} />
              </div>
              <div>
                <label className="form-label">メールアドレス <span className="req">必須</span></label>
                <input className="form-input" type="email" placeholder="you@example.com" required
                  value={form.email} onChange={e => update('email', e.target.value)} />
              </div>
            </div>
            <div className="form-row">
              <label className="form-label">お問い合わせ内容 <span className="req">必須</span></label>
              <select className="form-select" required
                value={form.inquiryType} onChange={e => update('inquiryType', e.target.value)}>
                <option value="">選択してください</option>
                <option>ファクタリング(資金調達)について</option>
                <option>建設・内装工事について</option>
                <option>その他のご相談</option>
              </select>
            </div>
            <div className="form-row" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
              <div>
                <label className="form-label">ご希望調達金額</label>
                <select className="form-select"
                  value={form.desiredAmount} onChange={e => update('desiredAmount', e.target.value)}>
                  <option value="">未選択</option>
                  <option>〜100万円</option>
                  <option>100〜500万円</option>
                  <option>500〜1,000万円</option>
                  <option>1,000〜5,000万円</option>
                  <option>5,000万円〜</option>
                </select>
              </div>
              <div>
                <label className="form-label">ご希望入金時期</label>
                <select className="form-select"
                  value={form.desiredTiming} onChange={e => update('desiredTiming', e.target.value)}>
                  <option value="">未選択</option>
                  <option>本日中</option>
                  <option>2〜3日以内</option>
                  <option>1週間以内</option>
                  <option>相談したい</option>
                </select>
              </div>
            </div>
            <div className="form-row">
              <label className="form-label">お問い合わせ詳細</label>
              <textarea className="form-textarea" placeholder="ご相談内容をご記入ください"
                value={form.message} onChange={e => update('message', e.target.value)}></textarea>
            </div>
            {status === 'error' && (
              <p style={{ color: '#c0392b', fontSize: 13, marginBottom: 12, textAlign: 'center' }}>{errorMsg}</p>
            )}
            <button type="submit" className="form-submit" disabled={status === 'sending'}>
              {status === 'sending' ? '送信中...' : '上記内容で送信する →'}
            </button>
          </form>
        </div>
      </section>
    </>
  );
}

// ===============================
// Root App
// ===============================
// ===== URL <-> SPAページ状態 の相互変換(SEO・ブラウザ戻る/進む対応) =====
const PAGE_PATHS = {
  top: '/', factoring: '/factoring/', strengths: '/strengths/', flow: '/flow/',
  construction: '/construction/', company: '/company/', blog: '/blog/', faq: '/faq/',
  contact: '/contact/', consult: '/consult/'
};

function resolvePathFromPage(pageId, blogId) {
  if (pageId === 'blog-detail') {
    const fullPosts = (typeof window !== 'undefined' && window.BLOG_POSTS_FULL) || [];
    const post = fullPosts.find(p => p.id === blogId);
    return '/blog/' + (post ? post.slug : (blogId || '')) + '/';
  }
  return PAGE_PATHS[pageId] || '/';
}

function resolvePageFromPath(pathname) {
  if (PAGE_PATHS_REVERSE[pathname]) return { page: PAGE_PATHS_REVERSE[pathname] };
  if (pathname === '/factoring/2party/') return { page: 'factoring', hash: '#type-2party' };
  if (pathname === '/factoring/3party/') return { page: 'factoring', hash: '#type-3party' };
  if (pathname === '/factoring/po/') return { page: 'factoring', hash: '#type-po' };
  const blogMatch = pathname.match(/^\/blog\/([^\/]+)\/$/);
  if (blogMatch) {
    const slug = blogMatch[1];
    const fullPosts = (typeof window !== 'undefined' && window.BLOG_POSTS_FULL) || [];
    const post = fullPosts.find(p => p.slug === slug);
    if (post) return { page: 'blog-detail', blogId: post.id };
  }
  return { page: 'top' };
}
const PAGE_PATHS_REVERSE = Object.fromEntries(Object.entries(PAGE_PATHS).map(([k, v]) => [v, k]));

function App() {
  const theme = 'A';

  const initialRoute = (typeof window !== 'undefined' && window.__INITIAL_ROUTE__) || {};
  const [page, setPage] = useState(() => initialRoute.pageId || localStorage.getItem('reiwa-page') || 'top');
  const [blogId, setBlogId] = useState(() => initialRoute.blogId || 'p1');
  // トップページの無料お見積りフォーム送信後、「今すぐ書類を提出する」ボタンから
  // 無料相談ページのSTEP2(書類提出)へ直接ジャンプするためのID引き継ぎ
  const [consultEntrySubmissionId, setConsultEntrySubmissionId] = useState(null);
  const isFirstRender = React.useRef(true);
  useEffect(() => { window.__setBlogId = setBlogId; }, []);

  // ブラウザの「戻る/進む」ボタン対応: URLが変わったらページ状態を同期する
  useEffect(() => {
    const handlePopState = () => {
      const resolved = resolvePageFromPath(window.location.pathname);
      setPage(resolved.page);
      if (resolved.blogId) setBlogId(resolved.blogId);
      if (resolved.hash) {
        setTimeout(() => {
          const el = document.querySelector(resolved.hash);
          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 300);
      }
    };
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  useEffect(() => {
    localStorage.setItem('reiwa-page', page);
    const path = resolvePathFromPage(page, blogId);

    if (isFirstRender.current) {
      // 初回表示: サーバー側が既に正しいURL・meta情報を返しているので何もしない
      isFirstRender.current = false;
      if (initialRoute.hash) {
        setTimeout(() => {
          const el = document.querySelector(initialRoute.hash);
          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 300);
      } else {
        window.scrollTo(0, 0);
      }
      return;
    }

    window.scrollTo(0, 0);
    // SPA内クリック遷移時は URL を pushState で更新(ブラウザの戻る/進むにも対応)
    if (window.location.pathname !== path) {
      window.history.pushState({ page, blogId }, '', path);
    }
    // blog-detail のtitle/description/canonicalはBlogDetailPage側で個別に設定するためスキップ
    if (page !== 'blog-detail' && window.__updateMeta) window.__updateMeta(page, path);
  }, [page, blogId]);

  const pageRoutes = {
    top: <TopPage setPage={setPage} setBlogId={setBlogId} setConsultEntrySubmissionId={setConsultEntrySubmissionId} />,
    factoring: <FactoringPage setPage={setPage} />,
    strengths: <StrengthsPage setPage={setPage} />,
    flow: <FlowPage setPage={setPage} />,
    construction: <ConstructionPage setPage={setPage} />,
    company: <CompanyPage setPage={setPage} />,
    blog: <BlogListPage setPage={setPage} setBlogId={setBlogId} />,
    'blog-detail': <BlogDetailPage setPage={setPage} blogId={blogId} />,
    faq: <>
      <section className="hero" style={{padding: '80px 0'}}>
        <div className="container hero-inner">
          <div className="hero-eyebrow">Q&amp;A</div>
          <h1 className="hero-title">よくあるご質問</h1>
        </div>
      </section>
      <FaqSection />
      <ContactCTA setPage={setPage} />
    </>,
    contact: <ContactPage />,
    consult: <FreeConsultPage setPage={setPage} initialSubmissionId={consultEntrySubmissionId} clearInitialSubmissionId={() => setConsultEntrySubmissionId(null)} />,
  };

  return (
    <>
      <Header page={page} setPage={setPage} theme={theme} />
      <main>{pageRoutes[page] || pageRoutes.top}</main>
      <Footer setPage={setPage} />
    </>
  );
}

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