// Subsidy list page components — real subsidy data (no fabricated figures)
const { useState: useStateSub } = React;

// ============ Subsidy Hero ============
function SubsidyHero() {
  return (
    <section className="page-hero subsidy-hero" data-screen-label="01 SubsidyHero">
      <div className="ph-grid-bg" aria-hidden="true" />
      <div className="ph-glow ph-glow-touch" aria-hidden="true" />
      <div className="ph-inner">
        <nav className="ph-crumb">
          <a href="index.html">HOME</a>
          <span>/</span>
          <span className="is-current">SUBSIDY</span>
        </nav>
        <div className="ph-eyebrow">
          <span className="line-deco" />SUBSIDY DATABASE<span className="line-deco" />
        </div>
        <h1 className="ph-title">
          <span className="ph-title-en">Subsidy</span>
          <span className="ph-title-jp">補助金・助成金一覧</span>
        </h1>
        <p className="ph-lead">
          中小企業・小規模事業者の活用が多い補助金・助成金を、樫乃屋が整理。<br />
          補助上限・補助率・対象者を一目で比較できます。
        </p>

        {/* Quick search bar (UI only) */}
        <div className="sh-search">
          <div className="sh-search-field">
            <label>キーワード</label>
            <div className="sh-input">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8"/>
                <path d="M20 20l-3.5-3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
              <input type="text" placeholder="例：ものづくり、設備投資" />
            </div>
          </div>
          <div className="sh-search-field">
            <label>地域</label>
            <select>
              <option>全国</option>
              <option>関東</option>
              <option>神奈川県</option>
              <option>東京都</option>
            </select>
          </div>
          <div className="sh-search-field">
            <label>金額</label>
            <select>
              <option>すべて</option>
              <option>〜100万円</option>
              <option>100万円〜1,000万円</option>
              <option>1,000万円〜</option>
            </select>
          </div>
          <button className="sh-search-btn">
            検索する
            <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
              <path d="M5 10h10M10 5l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>

        <div className="ph-stats">
          <div className="ph-stat"><b>8</b><span> 制度掲載</span></div>
          <div className="ph-stat-divider" />
          <div className="ph-stat"><b>6</b><span> 公募中</span></div>
          <div className="ph-stat-divider" />
          <div className="ph-stat"><b>2</b><span> 随時受付</span></div>
        </div>
      </div>
    </section>
  );
}

// ============ Filter Tabs ============
const SUB_CATS = [
  { id: "all",   label: "すべて",   count: 8 },
  { id: "open",  label: "公募中",   count: 6 },
  { id: "zuiji", label: "随時受付", count: 2 },
];

function StatusTabs({ active, onChange }) {
  return (
    <div className="status-tabs">
      {SUB_CATS.map(c => (
        <button
          key={c.id}
          className={`st-tab ${active === c.id ? "is-active" : ""}`}
          onClick={() => onChange(c.id)}
        >
          {c.label}<span>{c.count}</span>
        </button>
      ))}
    </div>
  );
}

// ============ Subsidy data ============
const SUBSIDIES = [
  {
    id: "monozukuri",
    status: "open",
    statusLabel: "公募中",
    badge: "人気",
    name: "ものづくり補助金",
    sub: "ものづくり・商業・サービス生産性向上促進補助金",
    category: "設備投資",
    amount: "2,500万円",
    rate: "1/2〜2/3",
    target: "中小企業・小規模事業者・個人事業主",
    fit: ["設備投資", "生産性向上", "新製品開発"],
    desc: "革新的な製品・サービス開発や生産プロセス改善に必要な設備投資を支援。2025年度から収益納付義務が原則撤廃され使いやすくなりました。",
    color: "amber",
    icon: "🏭",
  },
  {
    id: "shorikuka",
    status: "open",
    statusLabel: "公募中",
    badge: "新着",
    name: "省力化投資補助金",
    sub: "中小企業省力化投資補助金",
    category: "設備投資",
    amount: "1億円",
    rate: "1/2〜2/3",
    target: "中小企業・小規模事業者（人手不足）",
    fit: ["人手不足対応", "自動化", "省人化"],
    desc: "人手不足に対応するIoT・ロボット等の省力化設備導入を支援。カタログ注文型と一般型（最大1億円）の2類型。",
    color: "amber",
    icon: "🤖",
  },
  {
    id: "jizokuka",
    status: "open",
    statusLabel: "公募中",
    name: "持続化補助金",
    sub: "小規模事業者持続化補助金",
    category: "販路開拓",
    amount: "250万円",
    rate: "2/3〜3/4",
    target: "小規模事業者等",
    fit: ["販路開拓", "WEB・広報", "店舗改装"],
    desc: "小規模事業者の販路開拓・業務効率化を幅広く支援。チラシ・WEB・展示会・店舗改装などに活用でき、初めての申請にもおすすめ。",
    color: "amber",
    icon: "📈",
  },
  {
    id: "digital-ai",
    status: "open",
    statusLabel: "公募中",
    name: "デジタル化・AI導入補助金",
    sub: "デジタル化・AI導入補助金（旧IT導入補助金）",
    category: "IT・デジタル化",
    amount: "450万円",
    rate: "1/2〜4/5",
    target: "中小企業・小規模事業者",
    fit: ["IT導入", "AI活用", "インボイス対応"],
    desc: "自社の課題に合うITツール・AIソリューション導入を支援。2026年度から名称変更しAI活用枠を新設。インボイス枠は補助率2/3〜4/5。",
    color: "tech",
    icon: "💻",
  },
  {
    id: "shinjigyou",
    status: "open",
    statusLabel: "公募中",
    name: "新事業進出補助金",
    sub: "中小企業新事業進出促進補助金",
    category: "事業転換",
    amount: "9,000万円",
    rate: "1/2",
    target: "中小企業・個人事業主（設立1年以上）",
    fit: ["新分野展開", "業態転換", "成長投資"],
    desc: "新たな事業領域への進出に挑戦する企業を支援する2025年新設制度。建物費・広告宣伝費も対象。最大7,000万円（賃上げ特例9,000万円）。",
    color: "amber",
    icon: "🚀",
  },
  {
    id: "seichou",
    status: "open",
    statusLabel: "公募中",
    name: "成長加速化補助金",
    sub: "中小企業成長加速化補助金",
    category: "設備投資",
    amount: "5億円",
    rate: "1/2",
    target: "売上高100億円を目指す中小企業",
    fit: ["大規模投資", "工場新増設", "成長計画"],
    desc: "将来売上高100億円超を目指す成長志向の中小企業に、投資額1億円以上の大規模設備投資を最大5億円補助する2025年新設制度。",
    color: "amber",
    icon: "🏗️",
  },
  {
    id: "career-up",
    status: "zuiji",
    statusLabel: "随時受付",
    name: "キャリアアップ助成金",
    sub: "キャリアアップ助成金（正社員化コースほか）",
    category: "雇用・人材",
    amount: "80万円/人",
    rate: "定額助成",
    target: "雇用保険適用事業所の事業主",
    fit: ["正社員化", "処遇改善", "雇用"],
    desc: "有期・短時間・派遣労働者の企業内キャリアアップを促進。正社員化コース最大80万円/人ほか。要件を満たせば受給でき確実性が高い。",
    color: "gov",
    icon: "👥",
  },
  {
    id: "jinzai-kaihatsu",
    status: "zuiji",
    statusLabel: "随時受付",
    name: "人材開発支援助成金",
    sub: "人材開発支援助成金（人材育成支援コース）",
    category: "雇用・人材",
    amount: "1,000万円/年",
    rate: "経費30〜75%",
    target: "雇用保険適用事業所の事業主",
    fit: ["人材育成", "リスキリング", "研修"],
    desc: "従業員への職業訓練の経費・賃金の一部を助成。DX・リスキリング研修も対象。1事業所あたり年間最大1,000万円。",
    color: "gov",
    icon: "🎓",
  },
];

function SubsidyTable({ active }) {
  const filtered = active === "all" ? SUBSIDIES : SUBSIDIES.filter(s => s.status === active);
  return (
    <div className="sub-list">
      <div className="sub-list-header">
        <div className="slh-col slh-status">ステータス</div>
        <div className="slh-col slh-name">補助金名・分野</div>
        <div className="slh-col slh-amount">補助上限</div>
        <div className="slh-col slh-rate">補助率</div>
        <div className="slh-col slh-deadline">対象者</div>
        <div className="slh-col slh-cta" />
      </div>
      {filtered.map(s => (
        <a key={s.id} className={`sub-row sub-row-${s.color} sub-row-${s.status}`} href="contact.html">
          <div className="sr-status">
            <div className={`sr-status-pill sr-status-${s.status}`}>
              {s.status === "open" && <span className="sub-pulse" />}
              {s.statusLabel}
            </div>
            {s.badge && <div className="sr-badge">{s.badge}</div>}
          </div>

          <div className="sr-name">
            <div className="sr-org">{s.sub}</div>
            <h3 className="sr-title">{s.name}</h3>
            <div className="sr-fit">
              <span className="sr-fit-tag">#{s.category}</span>
              {s.fit.slice(0, 2).map((f, i) => <span key={i} className="sr-fit-tag">#{f}</span>)}
            </div>
          </div>

          <div className="sr-amount">
            <div className="sr-amount-val">{s.amount}</div>
          </div>

          <div className="sr-rate">
            <div className="sr-rate-val">{s.rate}</div>
          </div>

          <div className="sr-deadline">
            <div className="sr-deadline-date">{s.target}</div>
          </div>

          <div className="sr-cta">
            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
              <path d="M5 10h10M10 5l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
        </a>
      ))}
    </div>
  );
}

// ============ Process Section ============
function SupportProcess() {
  return (
    <section className="sub-process">
      <div className="sp-inner">
        <div className="sp-head">
          <div className="sp-eyebrow"><span className="line-deco" />OUR SUPPORT<span className="line-deco" /></div>
          <h2 className="sp-title">採択後まで、伴走支援。</h2>
          <p className="sp-lead">
            樫乃屋は申請代行で終わりません。事業計画の策定から、採択後の交付申請・実績報告まで、
            <em>5つのステップ</em>で完全サポートします。
          </p>
        </div>
        <div className="sp-steps">
          {[
            { num: "01", en: "DIAGNOSIS",  jp: "無料診断", desc: "事業内容・課題をヒアリングし、最適な補助金を選定" },
            { num: "02", en: "PLANNING",   jp: "事業計画策定", desc: "採択される事業計画書を専門家と一緒に作成" },
            { num: "03", en: "APPLICATION", jp: "申請代行", desc: "電子申請の手続きを代行、書類チェック完備" },
            { num: "04", en: "EXECUTION",  jp: "事業実行", desc: "採択後の発注・実施、AI/DXツール導入も対応" },
            { num: "05", en: "REPORT",     jp: "実績報告", desc: "交付申請・実績報告まで責任を持って完了" },
          ].map((s, i) => (
            <div key={i} className="sp-step">
              <div className="sp-step-head">
                <div className="sp-step-num">{s.num}</div>
                <div className="sp-step-line" />
              </div>
              <div className="sp-step-en">{s.en}</div>
              <div className="sp-step-jp">{s.jp}</div>
              <div className="sp-step-desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Bottom CTA ============
function SubsidyCTA() {
  return (
    <section className="sub-cta-band">
      <div className="scb-inner">
        <div className="scb-deco" aria-hidden="true">
          <svg viewBox="0 0 600 200" preserveAspectRatio="none">
            <defs>
              <linearGradient id="scbGrad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#d97706" stopOpacity="0.0"/>
                <stop offset="50%" stopColor="#d97706" stopOpacity="0.3"/>
                <stop offset="100%" stopColor="#d97706" stopOpacity="0.0"/>
              </linearGradient>
            </defs>
            <path d="M0 100 Q 150 60 300 100 T 600 100" stroke="url(#scbGrad)" strokeWidth="2" fill="none"/>
            <path d="M0 130 Q 150 90 300 130 T 600 130" stroke="url(#scbGrad)" strokeWidth="1" fill="none"/>
          </svg>
        </div>
        <div className="scb-content">
          <div className="scb-eyebrow">FREE CONSULTATION</div>
          <h2 className="scb-title">
            自社に最適な補助金、<br />
            <em>無料で診断</em>します。
          </h2>
          <p className="scb-lead">
            「どの補助金が使えるか分からない」「申請する時間がない」――そんな方も、まずはお気軽にご相談ください。
          </p>
          <div className="scb-actions">
            <a className="btn btn-touch" href="contact.html">
              無料診断を申し込む
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
                <path d="M5 10h10M10 5l5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
            <a className="btn btn-ghost-dark" href="contact.html">無料で相談する</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ Main App ============
function SubsidyApp() {
  const [active, setActive] = useStateSub("all");
  return (
    <>
      <SubsidyHero />
      <section className="sub-list-section" data-screen-label="02 List">
        <div className="sls-inner">
          <div className="sls-head">
            <h2 className="sls-title">
              <span className="sls-title-en">Subsidy List</span>
              <span className="sls-title-jp">補助金一覧</span>
            </h2>
          </div>
          <StatusTabs active={active} onChange={setActive} />
          <SubsidyTable active={active} />
        </div>
      </section>
      <SupportProcess />
      <SubsidyCTA />
    </>
  );
}

Object.assign(window, { SubsidyApp });