const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ===== WordPress 連携 ===== */

// front-page.php から渡される値（未定義でも落ちないようにする）
const HOME = typeof SITE_URL !== "undefined" ? SITE_URL : "/";
const API = typeof WP_API !== "undefined" ? WP_API : "/wp-json";

function formatNewsDate(dateStr) {
  const d = new Date(dateStr);
  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(d.getDate()).padStart(2, "0")}`;
}
function getFeaturedImage(item, fallback = "") {
  return item?._embedded?.["wp:featuredmedia"]?.[0]?.source_url || fallback;
}
function getTermName(item, taxonomy) {
  const groups = item?._embedded?.["wp:term"] || [];
  for (const group of groups) {
    const t = group.find((t) => t.taxonomy === taxonomy);
    if (t) return t.name;
  }
  return "";
}
function stripTags(html) {
  return (html || "").replace(/<[^>]+>/g, "").trim();
}
// title.rendered などの HTML エンティティ（&#8211; など）を文字に戻す
function decodeEntities(html) {
  const el = document.createElement("textarea");
  el.innerHTML = html || "";
  return el.value;
}
// REST API を取得。失敗時は原因をコンソールに残し、呼び出し側はフォールバックを表示し続ける
function fetchWp(path) {
  return fetch(`${API}${path}`)
    .then((r) => {
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json();
    })
    .catch((err) => {
      console.error(`[WP API] ${path} の取得に失敗しました（フォールバック表示）:`, err);
      return null;
    });
}

/* ===== データ（Figma の文言そのまま。REST API が使えないときのフォールバック） ===== */

const NAV_ITEMS = [
  { label: "START REINANとは", href: HOME + "#about" },
  { label: "プログラム", href: HOME + "#programs" },
  { label: "スケジュール", href: HOME + "#schedule" },
  { label: "よくある質問", href: HOME + "#faq" },
  { label: "お問い合わせ", href: HOME + "#contact" },
];

const PEATIX_URL = "https://peatix.com/event/5246697";

// Googleカレンダーの埋め込みURL（決まったら設定。空のときは枠だけ表示）
const CALENDAR_EMBED_URL = "";

const FLOW_STEPS = [
  { step: "STEP 1", icon: "/wp-content/themes/original/assets/icon-comments.svg", title: "相談する", badge: "事業アイデア壁打ち・相談会", text: "「壁打ち会」で、自分のアイデアや現在抱えている課題を相談する。" },
  { step: "STEP 2", icon: "/wp-content/themes/original/assets/icon-pen-line.svg", title: "学ぶ・磨く", badge: "事業計画集中プログラム", text: "「事業計画集中プログラム」で、顧客・市場・ビジネスモデル・事業計画等を実践的に学び、自分の事業をブラッシュアップする。" },
  { step: "STEP 3", icon: "/wp-content/themes/original/assets/icon-presentation-screen.svg", title: "挑戦する", badge: "創業チャレンジコンテスト", text: "「創業チャレンジコンテスト」で、自分のビジネスアイデア・事業計画を発表する。" },
  { step: "STEP 4", icon: "/wp-content/themes/original/assets/icon-seedling.svg", title: "事業にする・成長する", badge: "個別伴走・マッチング", text: "法人設立、地域企業との連携、資金調達、福井ベンチャーピッチ等、それぞれの次のアクションへつなげる。" },
];

const CHECK_ITEMS = [
  { icon: "/wp-content/themes/original/assets/icon-handshake.svg", label: "起業家・専門家・地域企業とつながれる" },
  { icon: "/wp-content/themes/original/assets/icon-yen0.svg", label: "参加費無料" },
  { icon: "/wp-content/themes/original/assets/icon-lightbulb-on.svg", label: "どのステップからでも参加できます" },
];

const PROGRAM_TABS = [
  { no: "01", label: "壁打ち・アイデア相談会", href: "#mentoring" },
  { no: "02", label: "事業計画集中プログラム", href: "#business-plan" },
  { no: "03", label: "創業チャレンジコンテスト", href: "#contest" },
];

const ADVISORS = [
  { company: ["株式会社ATOMica", "代表取締役 Co-CEO"], name: "南原 一輝", text: "学生起業・M&A、三井物産での社内起業を経て現職。初期アイデアの事業化やプロダクト検証等を支援。", image: "/wp-content/themes/original/assets/advisor-01.png", photoBg: "bg-[#69a555]", photoClass: "absolute h-[131.67%] left-[13.76%] top-[-7.19%] w-[72.48%] max-w-none", stretch: false },
  { company: ["ReGACY Innovation Group株式会社"], name: "岡戸 広之", text: "中央省庁入省後、官民協働やスタートアップ連携事業等を推進。大学発スタートアップの起業・事業化を支援。", image: "/wp-content/themes/original/assets/person-placeholder.jpg", photoBg: "bg-[#d9d9d9]", photoClass: "absolute inset-0 size-full object-cover", stretch: false },
  { company: ["ReGACY Innovation Group株式会社"], name: "斎野 秀幸", text: "中央省庁入省後、自治体出向で官民連携事業に従事。自治体等と連携しスタートアップの社会実装を支援。", image: "/wp-content/themes/original/assets/person-placeholder.jpg", photoBg: "bg-[#d9d9d9]", photoClass: "absolute inset-0 size-full object-cover", stretch: true },
  { company: ["ReGACY Innovation Group株式会社"], name: "元崎 直美", text: "サムライインキュベートで新規事業創出支援に従事。ReGACYでは地域の新産業創出・創業支援を担う。", image: "/wp-content/themes/original/assets/person-placeholder.jpg", photoBg: "bg-[#d9d9d9]", photoClass: "absolute inset-0 size-full object-cover", stretch: true },
];

const MENTORING_SPEC = [
  { label: "相談対応", value: ["ふくい産業支援センター職員・創業支援の専門家（仮）"], muted: true },
  { label: "開催日程", value: ["2026年12月2日（水）・16日（水）15:00〜18:00", "2027年1月15日（金）・29日（金）", "2027年2月12日（金）・26日（金）13:00〜17:00", "全6回"] },
  { label: "相談時間", value: ["1回約30分（原則事前予約制／当日空きがあれば相談可）"] },
  { label: "参加費", value: ["無料"] },
  { label: "会場", value: ["カグ～ル", "VENUE_ADDRESS", "※オンライン（Zoom）でのご相談も可能"] },
  { label: "予約方法", value: ["RESERVE"] },
];

const BUSINESS_PLAN_SPEC = [
  { label: "期間", value: ["2026年10月後半〜2027年1月頃（予定）"] },
  { label: "開催日数", value: ["7日程度"] },
  { label: "定員", value: ["各日15名程度"] },
  { label: "参加費", value: ["無料"] },
  { label: "会場", value: ["XXXXXXXX"] },
  { label: "備考", value: ["※各回単独での参加も可能です。継続して参加することで、より深く事業をブラッシュアップできます。"] },
];

const THEMES = [
  { no: "THEME 01", title: "アイデア発掘", date: "2026.12.24（木）17:00〜", image: "/wp-content/themes/original/assets/person-placeholder.jpg", company: "株式会社テスト 代表", name: "山田 太郎", text: "ゲストトーク＋ワークショップ", open: true },
  { no: "THEME 02", title: "顧客・ニーズの検証", date: "2026.12.24（木）17:00〜", image: "/wp-content/themes/original/assets/person-placeholder.jpg", company: "株式会社テスト 代表", name: "山田 太郎", text: "ゲストトーク＋ワークショップ", open: false },
  { no: "THEME 03", title: "ビジネスモデル", date: "2026.12.24（木）17:00〜", image: "/wp-content/themes/original/assets/person-placeholder.jpg", company: "株式会社テスト 代表", name: "山田 太郎", text: "ゲストトーク＋ワークショップ", open: false },
  { no: "THEME 04", title: "プレゼン・行動計画", date: "2026.12.24（木）17:00〜", image: "/wp-content/themes/original/assets/person-placeholder.jpg", company: "株式会社テスト 代表", name: "山田 太郎", text: "ゲストトーク＋ワークショップ", open: false },
];

const CONTEST_STATS = [
  { label: "賞金総額", pre: "", value: "50", unit: "万円以内" },
  { label: "登壇者", pre: "", value: "10", unit: "名程度" },
  { label: "開催", pre: "2027.", value: "2-3", unit: "月予定" },
];

const CONTEST_SPEC = [
  { label: "応募期間", value: ["20XX.XX.XX 〜 20XX.XX.XX"] },
  { label: "募集条件", value: ["XXXXXXXXXXXXXXXX"] },
  { label: "参加費", value: ["無料"] },
  { label: "当日の流れ", value: ["発表 → 審査員フィードバック → 表彰・交流（仮）"], muted: true },
];

const FOLLOW_UP_ITEMS = [
  { icon: "/wp-content/themes/original/assets/icon-building.svg", label: "地域企業との連携" },
  { icon: "/wp-content/themes/original/assets/icon-yen.svg", label: "資金調達" },
  { icon: "/wp-content/themes/original/assets/icon-user-tie.svg", label: "専門家紹介" },
  { icon: "/wp-content/themes/original/assets/icon-shop.svg", label: "販路開拓" },
];

const SCHEDULE_MONTHS = ["2026年10月", "11月", "12月", "2027年1月", "2月", "3月"];

const SCHEDULE_ROWS = [
  { icon: "/wp-content/themes/original/assets/icon-comments.svg", label: "壁打ち・アイデア相談会", bar: "absolute bg-white border-2 border-dashed border-[#cce3ff] h-[32px] left-[8px] rounded-[16px] top-[16px] w-[844px]", text: "毎月開催（年6回以上）", textPos: "left-[24px]" },
  { icon: "/wp-content/themes/original/assets/icon-pen-line.svg", label: "事業計画集中プログラム", bar: "absolute bg-[#cce3ff] h-[32px] left-[94px] rounded-[16px] top-[16px] w-[471.333px]", text: "10月後半〜1月頃（予定）", textPos: "left-[110px]" },
  { icon: "/wp-content/themes/original/assets/icon-presentation-screen.svg", label: "創業チャレンジコンテスト", bar: "absolute bg-[#cce3ff] h-[32px] left-[581.33px] rounded-[16px] top-[16px] w-[270.667px]", text: "2〜3月予定", textPos: "left-[597.33px]" },
];

const NEWS_CATEGORIES = ["すべて", "壁打ち会", "集中プログラム", "コンテスト", "お知らせ"];

const NEWS_ITEMS = [
  { date: "2026.11.XX", category: "壁打ち会", title: "第1回 壁打ち会の参加者を募集します（仮）", href: HOME + "news/" },
  { date: "2026.10.XX", category: "集中プログラム", title: "事業計画集中プログラム 参加者募集のお知らせ（仮）", href: HOME + "news/" },
  { date: "2026.10.XX", category: "お知らせ", title: "START REINAN 特設サイトを公開しました（仮）", href: HOME + "news/" },
  { date: "2026.XX.XX", category: "コンテスト", title: "創業チャレンジコンテスト エントリー受付開始予定（仮）", href: HOME + "news/" },
];

const FAQ_ITEMS = [
  { q: "まだ具体的な事業アイデアがなくても参加できますか？", a: "壁打ち会や一部イベントについては、アイデアを整理する段階からの参加を想定しています。プログラムごとに対象者をご確認ください。" },
  { q: "すでに創業していても参加できますか？", a: "はい。創業後概ね2年以内で、事業のブラッシュアップや成長を目指している方も対象です。" },
  { q: "すべてのプログラムに参加する必要がありますか？", a: "壁打ち会や各イベントなど、必要な支援から参加できます。集中プログラムについても、具体的な参加方法は募集時にご案内します。" },
  { q: "参加費はかかりますか？", a: "本事業の壁打ち会、集中プログラム、創業チャレンジコンテストへの参加は無料です。" },
  { q: "どんな相談ができますか？", a: "事業アイデア、顧客・市場、ビジネスモデル、事業計画、資金調達、販路開拓など、創業・事業づくりに関する幅広い相談に対応します。内容に応じて適切な支援機関や専門家をご紹介します。" },
];

/* ===== 共通パーツ ===== */

const BUTTON_VARIANTS = {
  primary: { cls: "bg-[#007cda] text-white", arrow: "/wp-content/themes/original/assets/icon-arrow-white.svg" },
  lime: { cls: "bg-[#b7ff0e] text-[#111922]", arrow: "/wp-content/themes/original/assets/icon-arrow-dark.svg" },
  white: { cls: "bg-white text-[#111922]", arrow: "/wp-content/themes/original/assets/icon-arrow-dark.svg" },
  secondary: { cls: "bg-white border border-[#111922] text-[#111922]", arrow: "/wp-content/themes/original/assets/icon-arrow-dark.svg" },
  disabled: { cls: "bg-[#e8e8e8] text-[#999]", arrow: "/wp-content/themes/original/assets/icon-arrow-gray.svg" },
};

function Button({ label, href = "#", variant = "primary", className = "", external = false }) {
  const v = BUTTON_VARIANTS[variant];
  const base = `inline-flex gap-[12px] items-center justify-center px-[32px] py-[16px] rounded-full font-bold text-[16px] leading-[1.5] whitespace-nowrap ${v.cls} ${className}`;
  const inner = (
    <>
      <span>{label}</span>
      <img src={v.arrow} alt="" className="w-[15px] h-[13px] shrink-0" />
    </>
  );
  if (variant === "disabled") {
    return <span className={`${base} cursor-not-allowed`} aria-disabled="true">{inner}</span>;
  }
  return (
    <a href={href} className={`${base} transition-opacity hover:opacity-80`} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>
      {inner}
    </a>
  );
}

function SectionHeading({ en, ja, align = "start", tone = "blue", className = "" }) {
  const color = tone === "white" ? "text-white" : "text-[#007cda]";
  return (
    <div className={`relative flex flex-col gap-[4px] ${align === "center" ? "items-center" : "items-start"} ${className}`}>
      <img src="/wp-content/themes/original/assets/heading-slash.svg" alt="" className="absolute top-0 left-[-40px] w-[35px] h-[53px] lg:left-[-79.5px] lg:w-[70px] lg:h-[106px]" />
      <p className={`relative font-['Lato'] font-black italic leading-[1.2] text-[40px] tracking-[4px] lg:text-[64px] lg:tracking-[6.4px] lg:whitespace-nowrap ${color}`}>{en}</p>
      <p className={`relative font-bold leading-[1.5] text-[16px] lg:text-[18px] tracking-[1.08px] ${color}`}>{ja}</p>
    </div>
  );
}

function SlantTop({ src }) {
  return (
    <div className="absolute left-0 top-0 w-full h-[30px] lg:h-[100px] rotate-180 pointer-events-none">
      <img src={src} alt="" className="block size-full object-fill" />
    </div>
  );
}

function SpecTable({ rows }) {
  return (
    <dl className="flex flex-col w-full">
      {rows.map((row) => (
        <div key={row.label} className="flex flex-col gap-[4px] sm:flex-row sm:gap-[16px] items-start py-[14px] border-b border-[#cce3ff] w-full">
          <dt className="shrink-0 w-[120px] font-bold text-[14px] leading-[1.6] text-[#007cda]">{row.label}</dt>
          <dd className={`flex-1 min-w-0 text-[15px] leading-[1.6] ${row.muted ? "text-[#999]" : "text-[#111922]"}`}>
            {row.value.map((line, i) => {
              if (line === "VENUE_ADDRESS") {
                return (
                  <p key={i}>
                    〒914-0063 福井県敦賀市神楽町1丁目1-5 (<a href="#" className="text-[#007cda] underline">MAPを開く</a>)
                  </p>
                );
              }
              if (line === "RESERVE") {
                return (
                  <p key={i}>
                    <a href={PEATIX_URL} target="_blank" rel="noopener noreferrer" className="text-[#007cda] underline">Peatix</a>から希望時間の相談枠を予約
                  </p>
                );
              }
              return <p key={i}>{line}</p>;
            })}
          </dd>
        </div>
      ))}
    </dl>
  );
}

function ProgramHeading({ no, en, icon, title }) {
  return (
    <div className="flex flex-col gap-[8px] items-start w-full">
      <div className="flex gap-[12px] items-center">
        <span className="bg-[#b7ff0e] px-[10px] py-[4px] rounded-[4px] font-['Lato'] font-black italic text-[14px] leading-[1.2] tracking-[1.4px] text-[#111922] whitespace-nowrap">{no}</span>
        <span className="font-['Lato'] font-black italic text-[18px] leading-[1.2] tracking-[3.6px] text-[#007cda] whitespace-nowrap">{en}</span>
      </div>
      <div className="flex gap-[16px] items-start w-full">
        <span className="flex items-center h-[39px] lg:h-[54px] shrink-0">
          <img src={icon} alt="" className="h-[26px] w-auto lg:h-[36px]" />
        </span>
        <h3 className="flex-1 min-w-0 font-bold text-[28px] lg:text-[40px] leading-[1.4] text-[#111922]">{title}</h3>
      </div>
    </div>
  );
}

function CategoryTabs({ active, onChange, categories = NEWS_CATEGORIES }) {
  return (
    <div className="flex flex-wrap justify-center gap-[8px]">
      {categories.map((cat) => (
        <button
          key={cat}
          type="button"
          onClick={() => onChange(cat)}
          className={`px-[18px] py-[8px] rounded-full font-bold text-[14px] leading-[1.5] whitespace-nowrap cursor-pointer ${active === cat ? "bg-[#007cda] text-white" : "bg-white text-[#007cda]"}`}
        >
          {cat}
        </button>
      ))}
    </div>
  );
}

function NewsList({ items, divided = true }) {
  return (
    <ul className="bg-white border border-[#e8e8e8] rounded-[12px] overflow-hidden w-full">
      {items.map((item, i) => (
        <li key={`${item.title}-${i}`} className={divided && i > 0 ? "border-t border-[#e8e8e8]" : ""}>
          <a href={item.href} className="flex flex-wrap md:flex-nowrap gap-x-[20px] gap-y-[8px] items-center px-[20px] py-[18px] md:px-[32px] md:py-[22px] hover:bg-[#f2f4f6]">
            <span className="text-[14px] leading-[1.5] text-[#007cda] whitespace-nowrap">{item.date}</span>
            <span className="bg-[#007cda] px-[10px] py-[2px] rounded-full font-bold text-[12px] leading-[1.5] text-white whitespace-nowrap">{item.category}</span>
            <span className="basis-full md:basis-auto flex-1 min-w-0 font-bold text-[15px] leading-[1.5] text-[#111922]">{item.title}</span>
            <span className="hidden md:inline font-bold text-[16px] leading-[1.5] text-[#cce3ff] whitespace-nowrap">→</span>
          </a>
        </li>
      ))}
    </ul>
  );
}

/* ===== Header / Footer / MobileMenu ===== */

function Header({ onMenu, variant = "overlay" }) {
  const overlay = variant === "overlay";
  return (
    <header className={`${overlay ? "absolute top-0 left-0 z-30" : "relative"} w-full flex items-center justify-between px-[16px] py-[12px] lg:px-[40px] lg:py-[16px] overflow-hidden`}>
      {!overlay && <img src="/wp-content/themes/original/assets/header-bg-white.png" alt="" className="absolute inset-0 size-full object-cover pointer-events-none" />}
      <a href={HOME} className="relative flex gap-[24px] items-center shrink-0">
        <img src={overlay ? "/wp-content/themes/original/assets/logo-header-white.svg" : "/wp-content/themes/original/assets/logo-header-color.svg"} alt="START REINAN" className="w-[88.826px] h-[41.56px]" />
        <span className={`hidden md:inline font-bold text-[12px] leading-[1.5] whitespace-nowrap ${overlay ? "text-white" : "text-[#111922]"}`}>令和8年度 嶺南版ふくい創業サポート事業</span>
      </a>
      <div className="relative hidden xl:flex gap-[32px] items-center">
        <nav className={`flex gap-[28px] items-center font-bold text-[14px] leading-[1.5] whitespace-nowrap ${overlay ? "text-white text-shadow-[0px_2px_10px_rgba(0,0,0,0.15)]" : "text-[#111922]"}`}>
          {NAV_ITEMS.map((item) => (
            <a key={item.label} href={item.href} className="hover:opacity-70">{item.label}</a>
          ))}
        </nav>
        <Button label="参加申し込み" href={HOME + "#entry"} variant="lime" />
      </div>
      <button type="button" onClick={onMenu} aria-label="メニューを開く" className={`relative xl:hidden flex flex-col justify-center gap-[6px] size-[44px] items-center ${overlay ? "text-white" : "text-[#111922]"}`}>
        <span className="block w-[24px] h-[2px] bg-current" />
        <span className="block w-[24px] h-[2px] bg-current" />
        <span className="block w-[24px] h-[2px] bg-current" />
      </button>
    </header>
  );
}

function MobileMenu({ open, onClose }) {
  useEffect(() => {
    document.body.classList.toggle("overflow-hidden", open);
    return () => document.body.classList.remove("overflow-hidden");
  }, [open]);
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 bg-[#111922] flex flex-col px-[24px] py-[16px] xl:hidden">
      <div className="flex justify-end">
        <button type="button" onClick={onClose} aria-label="メニューを閉じる" className="size-[44px] text-white text-[28px] leading-none">×</button>
      </div>
      <nav className="flex flex-col gap-[24px] mt-[24px] font-bold text-[16px] leading-[1.5] text-white">
        {NAV_ITEMS.map((item) => (
          <a key={item.label} href={item.href} onClick={onClose}>{item.label}</a>
        ))}
        <a href={HOME + "privacy-policy/"} onClick={onClose}>プライバシーポリシー</a>
      </nav>
      <div className="mt-[40px]">
        <Button label="参加申し込み" href={HOME + "#entry"} variant="lime" className="w-full" />
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="bg-[#111922] flex flex-col gap-[32px] items-center pt-[56px] pb-[32px] px-[16px] overflow-hidden">
      <div className="flex flex-col gap-[32px] lg:flex-row lg:justify-between items-start w-full max-w-[1080px]">
        <div className="flex flex-col gap-[12px] items-start">
          <img src="/wp-content/themes/original/assets/logo-footer.svg" alt="START REINAN" className="w-[169px] h-[79px]" />
          <div className="text-[13px] leading-[1.8] text-white">
            <p>令和8年度 嶺南版ふくい創業サポート事業</p>
            <p>主催：福井県　運営：株式会社ATOMica</p>
          </div>
        </div>
        <nav className="flex flex-wrap gap-x-[24px] gap-y-[12px] text-[13px] leading-[1.5] text-white whitespace-nowrap">
          {NAV_ITEMS.map((item) => (
            <a key={item.label} href={item.href} className="hover:opacity-70">{item.label}</a>
          ))}
          <a href={HOME + "privacy-policy/"} className="hover:opacity-70">プライバシーポリシー</a>
        </nav>
      </div>
      <p className="text-[12px] leading-[1.5] text-[#999]">© 2026 START REINAN</p>
    </footer>
  );
}

/* ===== TOP（LP） ===== */

function Hero() {
  return (
    <section className="relative overflow-hidden flex flex-col items-center pt-[120px] pb-[140px] lg:py-[120px] px-[16px]">
      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
        <div className="absolute inset-0 bg-[#007cda]" />
        <div className="absolute inset-0 overflow-hidden">
          <img src="/wp-content/themes/original/assets/hero-bg.jpg" alt="" className="absolute h-[114.38%] left-[-6.35%] top-[-0.75%] w-[112.7%] max-w-none object-cover" />
        </div>
        <div className="absolute inset-0 mix-blend-multiply bg-[linear-gradient(105.03deg,rgba(39,163,252,0.6)_14.88%,rgba(79,182,255,0.06)_51.711%)]" />
      </div>
      <img src="/wp-content/themes/original/assets/hero-stripe-01.svg" alt="" aria-hidden="true" className="absolute bottom-[487px] right-0 h-[462px] w-[780px] max-w-none pointer-events-none" />
      <img src="/wp-content/themes/original/assets/hero-stripe-02.svg" alt="" aria-hidden="true" className="absolute bottom-[261px] right-[-190px] h-[530px] w-[780px] max-w-none pointer-events-none" />
      <img src="/wp-content/themes/original/assets/hero-stripe-03.svg" alt="" aria-hidden="true" className="absolute bottom-[393px] right-[828px] h-[530px] w-[780px] max-w-none rotate-180 pointer-events-none" />
      <img src="/wp-content/themes/original/assets/hero-stripe-04.svg" alt="" aria-hidden="true" className="absolute bottom-[92px] right-[828px] h-[530px] w-[780px] max-w-none rotate-180 pointer-events-none" />
      <img src="/wp-content/themes/original/assets/hero-person.png" alt="" className="absolute bottom-0 right-[-40px] h-[428px] w-[300px] md:right-[0px] md:h-[600px] md:w-[420px] lg:right-[74px] lg:h-[856px] lg:w-[600px] max-w-none object-cover pointer-events-none" />

      <div className="relative flex items-center w-full max-w-[1200px]">
        <div className="flex flex-col gap-[40px] items-start">
          <div className="flex flex-col gap-[24px] items-start text-white">
            <p className="font-bold text-[16px] md:text-[24px] leading-[1.5]">令和8年度 嶺南版ふくい創業サポート事業</p>
            <div className="flex flex-col gap-[24px] items-start text-shadow-[0px_4px_44px_rgba(0,139,232,0.5)]">
              <h1 className="font-['Lato'] font-black italic leading-[0.9] text-[64px] tracking-[3.84px] md:text-[120px] md:tracking-[7.2px] lg:text-[186px] lg:tracking-[11.16px] whitespace-nowrap">
                START<br />REINAN
              </h1>
              <p className="font-bold leading-[1.3] text-[32px] tracking-[1.6px] md:text-[48px] lg:text-[68px] lg:tracking-[3.4px]">
                嶺南から、次の<span className="text-[#b7ff0e]">挑戦</span>を。
              </p>
            </div>
          </div>
          <div className="flex flex-col gap-[16px] items-start w-full lg:w-[748px] text-white text-shadow-[0px_4px_44px_rgba(0,139,232,0.5)]">
            <p className="font-bold text-[18px] md:text-[24px] leading-[1.5] tracking-[1.2px]">福井県嶺南地域の挑戦をサポートする創業支援プロジェクト</p>
            <p className="font-medium text-[16px] leading-[1.7]">相談・学び・実践・つながりを通じて、アイデア段階から事業化、その先の成長までサポートします。</p>
          </div>
          <div className="flex flex-wrap gap-[16px] items-start">
            <Button label="プログラムを見る" href="#programs" variant="primary" className="drop-shadow-[0px_1px_10px_#001c5d]" />
            <Button label="イベント情報を見る" href="#news" variant="white" className="drop-shadow-[0px_1px_10px_#001c5d]" />
          </div>
        </div>
      </div>

      <div className="absolute bottom-[-2px] left-0 w-full h-[30px] lg:h-[100px] pointer-events-none">
        <img src="/wp-content/themes/original/assets/hero-bottom-slant.svg" alt="" className="block size-full object-fill" />
      </div>
      <a href="#about" className="hidden lg:block absolute left-[calc(50%+521px)] top-[891.39px] w-[114px] h-[66px]">
        <span className="absolute left-[69px] top-[16.61px] font-['Lato'] font-black text-[16px] leading-[1.7] tracking-[1.6px] text-[#111922] text-shadow-[0px_4px_44px_rgba(0,139,232,0.5)] whitespace-nowrap">Scroll</span>
        <span className="absolute left-0 top-0 flex h-[65.61px] w-[80.956px] items-center justify-center">
          <span className="flex-none rotate-[140.98deg]">
            <span className="relative block h-0 w-[104.204px]">
              <span className="absolute inset-[-3.68px_-0.48%_-3.68px_0]">
                <img src="/wp-content/themes/original/assets/hero-scroll-line.svg" alt="" className="block max-w-none size-full" />
              </span>
            </span>
          </span>
        </span>
      </a>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="relative bg-white flex flex-col gap-[56px] items-center px-[16px] py-[80px]">
      <img src="/wp-content/themes/original/assets/about-stripes.svg" alt="" aria-hidden="true" className="absolute top-[-106px] right-[14px] w-[277px] h-[192.5px] lg:top-[-212px] lg:right-[28px] lg:w-[554px] lg:h-[385px] max-w-none z-10 pointer-events-none" />
      <div className="flex flex-col gap-[40px] lg:flex-row lg:justify-center items-start w-full max-w-[1080px]">
        <div className="flex flex-col gap-[28px] items-start w-full lg:w-[479px] lg:shrink-0">
          <SectionHeading en="ABOUT" ja="START REINANとは" />
          <h2 className="font-bold text-[28px] lg:text-[40px] leading-[1.5] text-[#111922]">
            嶺南で<span className="text-[#007cda]">「やってみたい」</span>を<br />
            <span className="text-[#007cda]">事業</span>にする。
          </h2>
          <p className="text-[16px] leading-[1.9] text-[#111922]">
            START REINANは、福井県嶺南地域での<strong className="font-bold">創業・新規事業への挑戦を応援</strong>するプロジェクトです。相談・学び・実践・つながりを通じて、<strong className="font-bold">アイデア段階から事業化、その先の成長までサポート</strong>します。
          </p>
        </div>
        <img src="/wp-content/themes/original/assets/about-union.png" alt="" className="w-full h-auto lg:w-[602.586px] lg:h-[426px] lg:shrink-0" />
      </div>

      <div className="flex flex-col gap-[24px] items-center w-full max-w-[1080px]">
        <div className="flex gap-[12px] lg:gap-[24px] items-start justify-center font-bold leading-[1.4]">
          <span className="text-[#007cda] text-[20px] lg:text-[28px]">＼</span>
          <p className="text-[#111922] text-[20px] lg:text-[32px] text-center">アイデアから事業化まで、あなたの挑戦をサポートします</p>
          <span className="text-[#007cda] text-[20px] lg:text-[28px]">／</span>
        </div>
        <ol className="flex flex-col lg:flex-row gap-[12px] items-center lg:items-stretch w-full">
          {FLOW_STEPS.map((s, i) => (
            <React.Fragment key={s.step}>
              {i > 0 && <li aria-hidden="true" className="self-center text-[18px] leading-[1.2] text-[#007cda] rotate-90 lg:rotate-0">▶</li>}
              <li className="flex flex-col flex-1 gap-[8px] items-center w-full lg:min-h-[319px] bg-white border-2 border-[#007cda] rounded-[12px] px-[20px] py-[24px] shadow-[0px_4px_24px_0px_rgba(57,79,132,0.07)]">
                <p className="font-['Lato'] font-black italic text-[14px] leading-[1.2] text-[#007cda]">{s.step}</p>
                <span className="flex items-center h-[54px]"><img src={s.icon} alt="" /></span>
                <p className="font-bold text-[22px] leading-[1.5] text-[#111922] text-center">{s.title}</p>
                <span className="bg-[#007cda] px-[10px] py-[4px] rounded-[4px] font-bold text-[12px] leading-[1.5] text-white whitespace-nowrap">{s.badge}</span>
                <p className="w-full text-[13px] leading-[1.6] text-[#666]">{s.text}</p>
              </li>
            </React.Fragment>
          ))}
        </ol>
        <div className="flex flex-col lg:flex-row gap-[12px] lg:gap-[24px] items-center justify-center w-full bg-[#b7ff0e] rounded-[12px] px-[32px] py-[20px]">
          {CHECK_ITEMS.map((c, i) => (
            <React.Fragment key={c.label}>
              {i > 0 && <span aria-hidden="true" className="hidden lg:inline text-[16px] text-[#007cda]">／</span>}
              <div className="flex gap-[12px] items-center">
                <span className="flex items-center justify-center h-[36px] w-[31px]"><img src={c.icon} alt="" /></span>
                <p className="font-bold text-[16px] leading-[1.5] text-[#111922]">{c.label}</p>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function TargetCard({ children, illustration }) {
  return (
    <li className="relative flex flex-col gap-[16px] items-center w-[250px] bg-white rounded-[12px] py-[24px] drop-shadow-[0px_4px_12px_rgba(57,79,132,0.07)]">
      <p className="w-full px-[20px] font-bold text-[16px] leading-[1.6] text-[#111922] text-center">{children}</p>
      <div className="relative h-[140px] w-full">{illustration}</div>
    </li>
  );
}

function Target() {
  const fill = "absolute inset-0 block size-full max-w-none";
  return (
    <section className="relative bg-[#f2f4f6] flex flex-col items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[160px]">
      <SlantTop src="/wp-content/themes/original/assets/slant-top-01.svg" />
      <div className="relative flex flex-col gap-[40px] items-start w-full max-w-[1080px]">
        <SectionHeading en="FOR YOU" ja="こんな方におすすめ" />
        <div className="flex flex-col gap-[24px] items-start w-full">
          <div className="flex flex-col md:flex-row gap-[16px] md:gap-[24px] items-start md:items-center w-full bg-white border-2 border-[#007cda] rounded-[12px] px-[24px] py-[24px] lg:px-[32px]">
            <span className="bg-[#007cda] px-[16px] py-[6px] rounded-full font-bold text-[16px] leading-[1.5] text-white whitespace-nowrap">対象</span>
            <div className="flex flex-col gap-[4px] flex-1 min-w-0">
              <p className="font-bold text-[20px] lg:text-[24px] leading-[1.5] text-[#007cda]">嶺南地域で創業を目指す方・創業後概ね2年以内の経営者</p>
              <p className="text-[14px] leading-[1.7] tracking-[0.42px] text-[#666]">「今後1年程度での創業を志向する方」「創業後概ね2年以内で事業の磨き上げを必要とする方」を中心に想定しています。</p>
            </div>
          </div>
          <ul className="flex flex-wrap gap-[24px] justify-center lg:justify-between items-start w-full">
            <TargetCard illustration={<img src="/wp-content/themes/original/assets/target-01.svg" alt="" className={fill} />}>
              <span className="text-[#007cda]">嶺南地域</span>で<span className="text-[#007cda]">起業・創業</span>を<br />目指している方
            </TargetCard>
            <TargetCard illustration={<img src="/wp-content/themes/original/assets/target-02-base.svg" alt="" className={fill} />}>
              <span className="text-[#007cda]">アイデア</span>を<span className="text-[#007cda]">具体的な</span><br /><span className="text-[#007cda]">事業</span>にしたい方
              <span aria-hidden="true" className="absolute inset-0 z-10 pointer-events-none">
                <span className="absolute left-[71.32px] top-[142px] h-[88px] w-[108px]"><img src="/wp-content/themes/original/assets/target-02-a.svg" alt="" className={fill} /></span>
                <span className="absolute left-[71.32px] top-[126px] h-[103px] w-[108px]"><span className="absolute inset-[-1.07%_-1.02%]"><img src="/wp-content/themes/original/assets/target-02-b.svg" alt="" className="block size-full max-w-none" /></span></span>
                <span className="absolute left-[27.33px] top-[106.42px] h-[43.054px] w-[53.878px]"><span className="absolute inset-[-2.55%_-2.04%]"><img src="/wp-content/themes/original/assets/target-02-c.svg" alt="" className="block size-full max-w-none" /></span></span>
                <span className="absolute left-[168.74px] top-[105.83px] h-[43.054px] w-[53.861px]"><span className="absolute inset-[-2.55%_-2.04%]"><img src="/wp-content/themes/original/assets/target-02-d.svg" alt="" className="block size-full max-w-none" /></span></span>
              </span>
            </TargetCard>
            <TargetCard illustration={<img src="/wp-content/themes/original/assets/target-03-base.svg" alt="" className={fill} />}>
              <span className="text-[#007cda]">副業・複業</span>や<span className="text-[#007cda]">新規事業</span>に<br />挑戦したい方
              <span aria-hidden="true" className="absolute inset-0 z-10 pointer-events-none">
                <img src="/wp-content/themes/original/assets/target-03-circle.svg" alt="" className="absolute left-[110.67px] top-[98px] size-[70px] max-w-none" />
                <img src="/wp-content/themes/original/assets/target-03-a1.svg" alt="" className="absolute left-[129.75px] top-[115.96px] h-[39.69px] w-[39.92px] max-w-none" />
                <span className="absolute left-[121.67px] top-[107.65px] size-[48px]"><span className="absolute inset-[-1.87%_-1.88%_-1.88%_-1.87%]"><img src="/wp-content/themes/original/assets/target-03-a2.svg" alt="" className="block size-full max-w-none" /></span></span>
                <img src="/wp-content/themes/original/assets/target-03-circle.svg" alt="" className="absolute left-[163.67px] top-[158px] size-[70px] max-w-none" />
                <img src="/wp-content/themes/original/assets/target-03-b1.svg" alt="" className="absolute left-[174.67px] top-[171.65px] h-[39.8px] w-[48px] max-w-none" />
                <span className="absolute left-[174.67px] top-[171.65px] h-[39.8px] w-[48px]"><span className="absolute inset-[-2.26%_-1.88%_-2.26%_-1.87%]"><img src="/wp-content/themes/original/assets/target-03-b2.svg" alt="" className="block size-full max-w-none" /></span></span>
                <img src="/wp-content/themes/original/assets/target-03-circle.svg" alt="" className="absolute left-[16.67px] top-[110px] size-[70px] max-w-none" />
                <img src="/wp-content/themes/original/assets/target-03-c1.svg" alt="" className="absolute left-[27.67px] top-[119.3px] h-[44.35px] w-[48px] max-w-none" />
                <span className="absolute left-[27.67px] top-[115.65px] size-[48px]"><span className="absolute inset-[-1.87%_-1.88%_-1.88%_-1.87%]"><img src="/wp-content/themes/original/assets/target-03-c2.svg" alt="" className="block size-full max-w-none" /></span></span>
                <img src="/wp-content/themes/original/assets/target-03-d1.svg" alt="" className="absolute left-[91.37px] top-[162px] h-[64.217px] w-[34.458px] max-w-none" />
                <span className="absolute left-[86.67px] top-[162px] h-[65px] w-[57.169px]"><span className="absolute inset-[-1.69%_-1.92%]"><img src="/wp-content/themes/original/assets/target-03-d2.svg" alt="" className="block size-full max-w-none" /></span></span>
              </span>
            </TargetCard>
            <TargetCard illustration={<img src="/wp-content/themes/original/assets/target-04-base.svg" alt="" className={fill} />}>
              創業後の事業を<br /><span className="text-[#007cda]">さらに成長</span>させたい方
              <span aria-hidden="true" className="absolute left-[68px] top-[111px] z-10 size-[113px] overflow-hidden pointer-events-none">
                <span className="absolute inset-[1.32%]"><img src="/wp-content/themes/original/assets/target-04-a.svg" alt="" className={fill} /></span>
                <span className="absolute inset-[1.32%]"><span className="absolute inset-[-1%]"><img src="/wp-content/themes/original/assets/target-04-b.svg" alt="" className="block size-full max-w-none" /></span></span>
              </span>
            </TargetCard>
          </ul>
        </div>
      </div>
    </section>
  );
}

function ProgramsNav() {
  return (
    <section id="programs" className="relative bg-white flex flex-col gap-[32px] items-center px-[16px] pt-[80px] lg:pt-[160px]">
      <SlantTop src="/wp-content/themes/original/assets/slant-top-02.svg" />
      <SectionHeading en="PROGRAMS" ja="3つのプログラム" align="center" />
      <p className="relative text-[16px] leading-[1.5] text-[#111922] text-center">どのプログラムからでも参加できます。複数のプログラムに参加することで、アイデアを着実に事業へと育てられます。</p>
      <nav className="relative flex flex-col md:flex-row w-full max-w-[1080px] bg-white border border-[#007cda] rounded-[28px] md:rounded-full overflow-hidden">
        {PROGRAM_TABS.map((tab, i) => (
          <a
            key={tab.no}
            href={tab.href}
            className={`flex flex-1 gap-[10px] items-center justify-center py-[16px] whitespace-nowrap ${i === 0 ? "bg-[#007cda] text-white" : "text-[#007cda] border-t md:border-t-0 md:border-l border-[#007cda]"}`}
          >
            <span className="font-['Lato'] font-black italic text-[18px] leading-[1.2]">{tab.no}</span>
            <span className="font-bold text-[15px] leading-[1.5]">{tab.label}</span>
            <span className="font-bold text-[15px] leading-[1.5]">↓</span>
          </a>
        ))}
      </nav>
    </section>
  );
}

const ADVISOR_PHOTO = {
  cutout: { photoBg: "bg-[#69a555]", photoClass: "absolute h-[131.67%] left-[13.76%] top-[-7.19%] w-[72.48%] max-w-none" },
  cover: { photoBg: "bg-[#d9d9d9]", photoClass: "absolute inset-0 size-full object-cover" },
};

function useAdvisors() {
  const [items, setItems] = useState(ADVISORS);
  useEffect(() => {
    fetchWp("/wp/v2/advisor?_embed&per_page=100&orderby=menu_order&order=asc").then((data) => {
      if (!Array.isArray(data) || !data.length) return;
      setItems(data.map((item) => {
        const meta = item.meta || {};
        const photo = ADVISOR_PHOTO[meta.adv_photo_style] || ADVISOR_PHOTO.cover;
        return {
          company: (meta.adv_company || "").split(/\r?\n/).filter(Boolean),
          name: decodeEntities(item.title?.rendered),
          text: meta.adv_profile || "",
          image: getFeaturedImage(item, "/wp-content/themes/original/assets/person-placeholder.jpg"),
          photoBg: photo.photoBg,
          photoClass: photo.photoClass,
          stretch: true,
        };
      }));
    });
  }, []);
  return items;
}

function Mentoring() {
  const advisors = useAdvisors();
  return (
    <section id="mentoring" className="bg-white flex flex-col gap-[40px] items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[120px]">
      <div className="flex flex-col-reverse lg:flex-row gap-[40px] lg:gap-[64px] items-start w-full max-w-[1080px]">
        <div className="flex flex-col flex-1 min-w-0 gap-[24px] items-start w-full">
          <ProgramHeading no="PROGRAM 01" en="MENTORING" icon="/wp-content/themes/original/assets/icon-comments.svg" title={<>事業アイデア壁打ち・<br />相談会 in 嶺南</>} />
          <p className="text-[16px] leading-[1.9] text-[#111922]">ビジネスアイデアの壁打ち、起業・創業アイデアの相談、資金調達、経営に関する悩みなど、起業・経営に関するあらゆるモヤモヤに、専門家が豊富な経験と知見をもって向き合います。「ちょっと相談したい」「誰かに話を聞いてほしい」という方も、お気軽にご相談ください。</p>
          <SpecTable rows={MENTORING_SPEC} />
        </div>
        <div className="relative w-full aspect-[480/460] lg:aspect-auto lg:w-[480px] lg:h-[460px] shrink-0 rounded-[12px] overflow-hidden bg-[#d9d9d9]">
          <img src="/wp-content/themes/original/assets/mentoring-main.jpg" alt="" className="absolute inset-0 size-full object-cover" />
        </div>
      </div>

      <div className="flex flex-col gap-[20px] items-start w-full max-w-[1080px]">
        <h4 className="font-bold text-[24px] leading-[1.5] text-[#111922]">アドバイザー</h4>
        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:flex gap-[16px] items-start w-full">
          {advisors.map((a) => (
            <li key={a.name} className={`flex flex-col flex-1 min-w-0 gap-[12px] items-start bg-white rounded-[12px] px-[20px] py-[24px] shadow-[0px_4px_24px_0px_rgba(57,79,132,0.07)] ${a.stretch ? "self-stretch" : ""}`}>
              <div className={`relative h-[120px] w-full rounded-[4px] overflow-hidden ${a.photoBg}`}>
                <img src={a.image} alt="" className={a.photoClass} />
              </div>
              <div className="flex flex-col gap-[4px] font-bold leading-[1.7] text-[#111922] w-full">
                <div className="text-[13px]">{a.company.map((c) => <p key={c}>{c}</p>)}</div>
                <p className="text-[20px]">{a.name}</p>
              </div>
              <p className="text-[13px] leading-[1.7] text-[#666]">{a.text}</p>
            </li>
          ))}
        </ul>
      </div>

      <div className="flex flex-col gap-[16px] items-start w-full max-w-[1080px]">
        <h4 className="font-bold text-[24px] leading-[1.5] text-[#111922]">開催日程</h4>
        <div className="w-full h-[613px] border border-[#e8e8e8] rounded-[8px] overflow-hidden bg-white">
          {CALENDAR_EMBED_URL && (
            <iframe title="開催日程カレンダー" src={CALENDAR_EMBED_URL} className="size-full border-0" loading="lazy" />
          )}
        </div>
        <div className="flex flex-col md:flex-row gap-[16px] items-start md:items-center justify-between w-full bg-[#edf4fe] rounded-[8px] px-[24px] py-[24px] lg:px-[32px]">
          <div className="flex flex-col gap-[4px] font-bold leading-[1.5]">
            <p className="text-[13px] text-[#007cda]">《ご相談をご希望の方》</p>
            <p className="text-[16px] text-[#111922]">ご希望の日時の相談枠（約30分）をPeatixからご予約ください。</p>
          </div>
          <Button label="Peatixで相談枠を予約する" href={PEATIX_URL} variant="primary" external />
        </div>
      </div>
    </section>
  );
}

function useThemes() {
  const [items, setItems] = useState(THEMES);
  useEffect(() => {
    fetchWp("/wp/v2/curriculum?_embed&per_page=100&orderby=menu_order&order=asc").then((data) => {
      if (!Array.isArray(data) || !data.length) return;
      setItems(data.map((item, i) => {
        const meta = item.meta || {};
        return {
          no: `THEME ${String(i + 1).padStart(2, "0")}`,
          title: decodeEntities(item.title?.rendered),
          date: meta.cur_date || "",
          image: getFeaturedImage(item, "/wp-content/themes/original/assets/person-placeholder.jpg"),
          company: meta.cur_company || "",
          name: meta.cur_speaker || "",
          text: meta.cur_desc || "",
          open: !!meta.cur_is_open,
          applyUrl: meta.cur_apply_url || "#",
        };
      }));
    });
  }, []);
  return items;
}

function BusinessPlan() {
  const themes = useThemes();
  return (
    <section id="business-plan" className="bg-white flex flex-col gap-[40px] items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[120px]">
      <div className="flex flex-col-reverse lg:flex-row gap-[40px] lg:gap-[64px] items-start w-full max-w-[1080px]">
        <div className="flex flex-col flex-1 min-w-0 gap-[24px] items-start w-full">
          <ProgramHeading no="PROGRAM 02" en="BUSINESS PLAN" icon="/wp-content/themes/original/assets/icon-pen-line.svg" title="事業計画集中プログラム" />
          <p className="text-[16px] leading-[1.9] text-[#111922]">ゲストトークやワークショップを通じて、ビジネスアイデアを具体的な事業へと磨き上げます。</p>
          <SpecTable rows={BUSINESS_PLAN_SPEC} />
        </div>
        <div className="relative w-full aspect-[440/420] lg:aspect-auto lg:w-[440px] lg:h-[420px] shrink-0 rounded-[12px] overflow-hidden bg-[#d9d9d9]">
          <img src="/wp-content/themes/original/assets/program-main.jpg" alt="" className="absolute inset-0 size-full object-cover" />
        </div>
      </div>

      <div className="flex flex-col gap-[20px] items-start w-full max-w-[1080px]">
        <h4 className="font-bold text-[24px] leading-[1.5] text-[#111922]">カリキュラム（想定テーマ）</h4>
        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:flex gap-[16px] items-start w-full">
          {themes.map((t) => (
            <li key={t.no} className="flex flex-col flex-1 min-w-0 gap-[12px] items-start bg-white rounded-[12px] px-[20px] py-[24px] shadow-[0px_4px_24px_0px_rgba(57,79,132,0.07)]">
              <p className="font-['Lato'] font-black italic text-[16px] leading-[1.2] tracking-[1.6px] text-[#007cda]">{t.no}</p>
              <div className="flex flex-col gap-[4px] font-bold w-full">
                <p className="text-[19px] leading-[1.5] text-[#111922]">{t.title}</p>
                <p className="text-[13px] leading-[1.7] text-[#007cda]">{t.date}</p>
              </div>
              <div className="relative h-[120px] w-full rounded-[4px] overflow-hidden bg-[#d9d9d9]">
                <img src={t.image} alt="" className="absolute inset-0 size-full object-cover" />
              </div>
              <div className="flex flex-col gap-[4px] font-bold leading-[1.7] text-[#111922] w-full">
                <p className="text-[13px]">{t.company}</p>
                <p className="text-[20px]">{t.name}</p>
              </div>
              <p className="text-[13px] leading-[1.7] text-[#666]">{t.text}</p>
              <div className="flex flex-col items-center pt-[4px] w-full">
                {t.open
                  ? <Button label="この回に申し込む" href={t.applyUrl || "#"} variant="lime" className="w-full" external={!!t.applyUrl && t.applyUrl !== "#"} />
                  : <Button label="申し込み準備中" variant="disabled" className="w-full" />}
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Contest() {
  return (
    <section id="contest" className="bg-white flex flex-col gap-[40px] items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[120px]">
      <div className="flex flex-col-reverse lg:flex-row gap-[40px] lg:gap-[64px] items-start w-full max-w-[1080px]">
        <div className="flex flex-col flex-1 min-w-0 gap-[24px] items-start w-full">
          <ProgramHeading no="PROGRAM 03" en="CONTEST" icon="/wp-content/themes/original/assets/icon-presentation-screen.svg" title="創業チャレンジコンテスト" />
          <p className="text-[16px] leading-[1.9] text-[#111922]">ビジネスアイデアを発表し、審査員からのフィードバックや支援者との出会いを通じて事業化を目指します。</p>
        </div>
        <div className="relative w-full aspect-[440/320] lg:aspect-auto lg:w-[440px] lg:h-[320px] shrink-0 rounded-[12px] overflow-hidden bg-[#d9d9d9]">
          <img src="/wp-content/themes/original/assets/contest-main.jpg" alt="" className="absolute inset-0 size-full object-cover" />
        </div>
      </div>
      <ul className="flex flex-col md:flex-row gap-[24px] items-stretch w-full max-w-[1080px] text-[#007cda]">
        {CONTEST_STATS.map((s) => (
          <li key={s.label} className="flex flex-col flex-1 gap-[4px] items-center bg-[#edf4fe] rounded-[12px] py-[28px] whitespace-nowrap">
            <p className="font-bold text-[15px] leading-[1.5]">{s.label}</p>
            <p className="flex gap-[6px] items-baseline">
              {s.pre && <span className="font-['Lato'] font-black text-[32px] leading-[1.2]">{s.pre}</span>}
              <span className="font-['Lato'] font-black text-[56px] leading-[1.2]">{s.value}</span>
              <span className="font-bold text-[16px] leading-[1.5]">{s.unit}</span>
            </p>
          </li>
        ))}
      </ul>
      <div className="w-full max-w-[1080px]">
        <SpecTable rows={CONTEST_SPEC} />
      </div>
      <Button label="申し込み準備中" variant="disabled" />
    </section>
  );
}

function FollowUp() {
  return (
    <section className="relative bg-[#f2f4f6] flex flex-col items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[160px]">
      <SlantTop src="/wp-content/themes/original/assets/slant-top-01.svg" />
      <div className="relative flex flex-col gap-[40px] items-start w-full max-w-[1080px]">
        <SectionHeading en="FOLLOW UP" ja="個別伴走・マッチング支援" />
        <p className="text-[16px] leading-[1.7] text-[#111922]">地域企業との連携、資金調達、専門家紹介、販路開拓など、事業フェーズに応じて支援します。</p>
        <ul className="grid grid-cols-2 lg:flex gap-[16px] lg:gap-[24px] items-start w-full">
          {FOLLOW_UP_ITEMS.map((f) => (
            <li key={f.label} className="flex flex-col flex-1 gap-[16px] items-center bg-white rounded-[12px] py-[32px]">
              <span className="flex items-center justify-center size-[72px] rounded-[36px] bg-[#edf4fe]"><img src={f.icon} alt="" /></span>
              <p className="font-bold text-[17px] leading-[1.5] text-[#111922] whitespace-nowrap">{f.label}</p>
            </li>
          ))}
        </ul>
        <div className="flex flex-col items-center w-full">
          <Button label="個別相談について問い合わせる" href="#contact" variant="lime" />
        </div>
      </div>
    </section>
  );
}

function Schedule() {
  return (
    <section id="schedule" className="relative bg-white flex flex-col gap-[56px] items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[160px]">
      <SlantTop src="/wp-content/themes/original/assets/slant-top-02.svg" />
      <div className="relative w-full max-w-[1080px]">
        <SectionHeading en="SCHEDULE" ja="年間スケジュール" />
      </div>
      <div className="relative w-full max-w-[1080px] overflow-x-auto">
        <div className="min-w-[1080px] bg-white border border-[#007cda] rounded-[12px]">
          <div className="flex items-start bg-[#007cda] rounded-t-[12px] font-bold text-[13px] leading-[1.5] text-white whitespace-nowrap">
            <div className="w-[220px] pl-[24px] py-[14px] shrink-0">プログラム</div>
            {SCHEDULE_MONTHS.map((m) => (
              <div key={m} className="flex justify-center w-[143.333px] py-[14px] shrink-0">{m}</div>
            ))}
          </div>
          {SCHEDULE_ROWS.map((row) => (
            <div key={row.label} className="flex items-center border-t border-[#e8e8e8]">
              <div className="flex gap-[8px] items-center w-[220px] pl-[24px] py-[20px] shrink-0 whitespace-nowrap">
                <img src={row.icon} alt="" className="h-[16px] w-auto" />
                <p className="font-bold text-[14px] leading-[1.5] text-[#111922]">{row.label}</p>
              </div>
              <div className="relative h-[64px] w-[860px] shrink-0 overflow-hidden">
                <div className={row.bar} />
                <p className={`absolute top-[23px] ${row.textPos} font-bold text-[12px] leading-[1.5] text-[#111922] whitespace-nowrap`}>{row.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function mapNews(item) {
  return {
    date: formatNewsDate(item.date),
    category: getTermName(item, "news_category"),
    title: decodeEntities(item.title?.rendered),
    href: item.link,
  };
}

function News() {
  const [cat, setCat] = useState("すべて");
  const [terms, setTerms] = useState(null); // [{ id, name }]
  const [liveItems, setLiveItems] = useState(null); // REST から取れたら配列、取れなければ null
  const [live, setLive] = useState(false);

  useEffect(() => {
    fetchWp("/wp/v2/news_category?per_page=100&orderby=id&order=asc").then((data) => {
      if (Array.isArray(data) && data.length) setTerms(data.map((t) => ({ id: t.id, name: decodeEntities(t.name) })));
    });
  }, []);

  useEffect(() => {
    let path = "/wp/v2/news?_embed&per_page=4";
    if (cat !== "すべて") {
      const term = terms && terms.find((t) => t.name === cat);
      if (!term) return; // ターム未取得のときはフォールバックで絞り込む
      path += `&news_category=${term.id}`;
    }
    fetchWp(path).then((data) => {
      if (!Array.isArray(data)) return;
      if (!live && cat === "すべて" && !data.length) return; // 記事が1件も無いうちはフォールバック表示
      setLive(true);
      setLiveItems(data.map(mapNews));
    });
  }, [cat, terms]);

  const categories = terms ? ["すべて", ...terms.map((t) => t.name)] : NEWS_CATEGORIES;
  const items = live && liveItems
    ? liveItems
    : (cat === "すべて" ? NEWS_ITEMS : NEWS_ITEMS.filter((n) => n.category === cat));
  return (
    <section id="news" className="relative bg-[#f2f4f6] flex flex-col items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[160px]">
      <SlantTop src="/wp-content/themes/original/assets/slant-top-01.svg" />
      <div className="relative flex flex-col gap-[24px] items-center w-full max-w-[1080px]">
        <div className="w-full"><SectionHeading en="NEWS" ja="お知らせ・イベント募集" /></div>
        <CategoryTabs active={cat} onChange={setCat} categories={categories} />
        {items.length
          ? <NewsList items={items} />
          : <p className="w-full bg-white border border-[#e8e8e8] rounded-[12px] px-[32px] py-[40px] text-center text-[15px] leading-[1.7]">このカテゴリーのお知らせはまだありません。</p>}
        <Button label="お知らせ一覧を見る" href={HOME + "news/"} variant="primary" />
      </div>
    </section>
  );
}

function Faq() {
  const [faqItems, setFaqItems] = useState(FAQ_ITEMS);
  const [openSet, setOpenSet] = useState(() => new Set(FAQ_ITEMS.map((_, i) => i)));
  useEffect(() => {
    fetchWp("/wp/v2/faq?per_page=100&orderby=menu_order&order=asc").then((data) => {
      if (!Array.isArray(data) || !data.length) return;
      const mapped = data.map((item) => ({ q: decodeEntities(item.title?.rendered), a: decodeEntities(stripTags(item.content?.rendered)) }));
      setFaqItems(mapped);
      setOpenSet(new Set(mapped.map((_, i) => i)));
    });
  }, []);
  const toggle = (i) => setOpenSet((prev) => {
    const next = new Set(prev);
    next.has(i) ? next.delete(i) : next.add(i);
    return next;
  });
  return (
    <section id="faq" className="relative bg-white flex flex-col items-center px-[16px] pt-[80px] pb-[80px] lg:pt-[160px]">
      <SlantTop src="/wp-content/themes/original/assets/slant-top-02.svg" />
      <div className="relative flex flex-col gap-[48px] items-center w-full max-w-[1080px]">
        <div className="w-full"><SectionHeading en="FAQ" ja="よくある質問" /></div>
        <ul className="flex flex-col gap-[12px] w-full text-[#111922]">
          {faqItems.map((item, i) => {
            const open = openSet.has(i);
            return (
              <li key={item.q} className="bg-white rounded-[8px] drop-shadow-[0px_4px_12px_rgba(57,79,132,0.07)]">
                <button type="button" onClick={() => toggle(i)} aria-expanded={open} className="flex gap-[16px] items-center w-full text-left px-[20px] lg:px-[28px] pt-[22px] pb-[16px] cursor-pointer">
                  <span className="font-['Lato'] font-black italic text-[22px] leading-[1.2]">Q</span>
                  <span className="flex-1 min-w-0 font-bold text-[16px] leading-[1.5]">{item.q}</span>
                  <span className="font-bold text-[20px] leading-[1.2]">{open ? "−" : "+"}</span>
                </button>
                {open && (
                  <div className="flex gap-[16px] items-start px-[20px] lg:px-[28px] pb-[24px]">
                    <span className="font-['Lato'] font-black italic text-[22px] leading-[1.2]">A</span>
                    <p className="flex-1 min-w-0 text-[15px] leading-[1.8]">{item.a}</p>
                  </div>
                )}
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

function Entry() {
  const cards = [
    { head: "アイデアや悩みを気軽に相談したい方", no: "PROGRAM 01", icon: "/wp-content/themes/original/assets/icon-comments.svg", name: "壁打ち・アイデア相談会", period: <><span className="text-[12px] whitespace-nowrap">募集期間の目安</span><span className="text-[14px] w-full">随時受付（毎月開催）</span></>, btn: { label: "相談会を予約する", href: PEATIX_URL, variant: "lime", external: true }, stretch: true },
    { head: "アイデアを事業計画に磨き上げたい方", no: "PROGRAM 02", icon: "/wp-content/themes/original/assets/icon-pen-line.svg", name: "事業計画集中プログラム", period: <span className="text-[14px] w-full">各回ごとに募集<br />（各回単独での参加も可能）</span>, btn: { label: "各回の日程・申し込みへ", href: "#business-plan", variant: "primary" } },
    { head: "事業プランを発表し次へ進みたい方", no: "PROGRAM 03", icon: "/wp-content/themes/original/assets/icon-presentation-screen.svg", name: "創業チャレンジコンテスト", period: <span className="text-[14px] w-full">応募期間は後日告知<br />（2027年2〜3月開催予定）</span>, btn: { label: "コンテストにエントリー", href: "#contest", variant: "primary" } },
  ];
  return (
    <section id="entry" className="relative bg-[#007cda] flex flex-col gap-[48px] items-center px-[16px] pt-[80px] pb-[120px] lg:pt-[160px]">
      <SlantTop src="/wp-content/themes/original/assets/slant-top-01.svg" />
      <SectionHeading en="ENTRY" ja="参加申し込み・お問い合わせ" tone="white" />
      <ul className="relative flex flex-col lg:flex-row gap-[24px] items-start w-full max-w-[1080px]">
        {cards.map((c) => (
          <li key={c.no} className={`flex flex-col flex-1 min-w-0 w-full items-center bg-white rounded-[12px] overflow-hidden ${c.stretch ? "self-stretch" : ""}`}>
            <p className="w-full bg-[#cce3ff] px-[24px] py-[16px] font-bold text-[16px] leading-[1.6] text-[#111922] text-center">{c.head}</p>
            <div className="flex flex-col gap-[16px] items-center w-full px-[28px] pt-[28px] pb-[32px]">
              <div className="flex flex-col gap-[4px] items-center whitespace-nowrap">
                <p className="font-['Lato'] font-black italic text-[16px] leading-[1.2] tracking-[1.12px] text-[#007cda]">{c.no}</p>
                <span className="flex items-center h-[54px]"><img src={c.icon} alt="" /></span>
                <p className="font-bold text-[20px] lg:text-[23px] leading-[1.5] text-[#111922]">{c.name}</p>
              </div>
              <div className="flex flex-col gap-[2px] items-center w-full bg-[#edf4fe] rounded-[6px] px-[14px] py-[10px] font-bold leading-[1.5] text-[#111922] text-center">{c.period}</div>
              <div className="h-px w-[10px]" />
              <Button {...c.btn} />
            </div>
          </li>
        ))}
      </ul>
      <div id="contact" className="relative flex flex-col lg:flex-row gap-[24px] lg:gap-[40px] items-start lg:items-center w-full max-w-[1080px] bg-[rgba(17,25,34,0.2)] rounded-[12px] px-[24px] py-[32px] lg:px-[48px] lg:py-[36px]">
        <div className="flex flex-col flex-1 min-w-0 gap-[8px] items-start">
          <p className="font-['Lato'] font-black italic text-[28px] leading-[1.2] tracking-[2.8px] text-[#b7ff0e]">CONTACT</p>
          <p className="font-bold text-[18px] leading-[1.5] text-white">お問い合わせ</p>
          <div className="text-[14px] leading-[1.8] text-white">
            <p>START REINAN 運営事務局（XXXXXXXX）</p>
            <p>TEL：XXXX-XX-XXXX（平日 XX:XX〜XX:XX）／ MAIL：XXXX@XXXX.jp</p>
          </div>
        </div>
        <Button label="お問い合わせフォーム" href="#" variant="lime" />
      </div>
    </section>
  );
}

/* ===== App ===== */

function App() {
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <>
      <Header onMenu={() => setMobileOpen(true)} variant="overlay" />
      <main>
        <Hero />
        <About />
        <Target />
        <ProgramsNav />
        <Mentoring />
        <BusinessPlan />
        <Contest />
        <FollowUp />
        <Schedule />
        <News />
        <Faq />
        <Entry />
      </main>
      <Footer />
      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} />
    </>
  );
}

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