function getFeaturedImage(item, fallback) {
  return (item && item._embedded && item._embedded["wp:featuredmedia"] && item._embedded["wp:featuredmedia"][0] && item._embedded["wp:featuredmedia"][0].source_url) || fallback;
}
function getTermName(item, taxonomy) {
  const groups = (item && item._embedded && 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) {
  // タグ除去に加え、WordPressが変換した文字参照（’ など）も元の文字に戻す
  return (new DOMParser().parseFromString(html || "", "text/html").body.textContent || "").trim();
}
function splitTitle(title) {
  const idx = title.indexOf("、");
  if (idx === -1) return [title];
  return [title.slice(0, idx + 1), title.slice(idx + 1)];
}

const STORY_ITEMS = [
  {
    image: "/wp-content/themes/original/assets/story-photo-highschool.png",
    category: "高校生  /  INTERVIEW",
    title: ["学校の外で、", "はじめて“企画”をやってみた。"],
    name: "N.Yさん",
  },
  {
    image: "/wp-content/themes/original/assets/story-photo-university.png",
    category: "大学生  /  INTERVIEW",
    title: ["「好き」が、", "最初のきっかけになった。"],
    name: "N.Yさん",
  },
  {
    image: "/wp-content/themes/original/assets/story-photo-worker.png",
    category: "若手社会人  /  INTERVIEW",
    title: ["会社を辞めずに、", "小さく試してみた。"],
    name: "N.Yさん",
  },
];

// Figma上は3種の写真を3回繰り返した仮データ（記事カード｜仮原稿）。各写真固有のズーム/トリミング値。
const STORY_CARD_CROPS = [
  { h: "127.28%", left: "-8.07%", top: "-0.01%", w: "109.37%" },
  { h: "189.09%", left: "-32.51%", top: "-17.27%", w: "162.42%" },
  { h: "150%", left: "-21.26%", top: "-8.18%", w: "128.98%" },
];

// イラスト｜ジャンプする人物（ストーリー一覧ヒーローの装飾。Eventセクションと同一アセットを444x469で表示）
function HeroJumperIllust({ className }) {
  const p = "/wp-content/themes/original/assets/event-illust-227-";
  return (
    <div className={className}>
      <div className="-scale-y-100 flex-none rotate-180">
        <div className="h-[469px] overflow-clip relative w-[444px]">
          <div className="absolute contents inset-[0_0.03%_0.55%_0.01%]">
            <div className="absolute inset-[83.4%_82.8%_0.55%_0.01%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1142.svg`} /></div>
            <div className="absolute inset-[64.79%_0.03%_25.08%_76.08%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1143.svg`} /></div>
            <div className="absolute inset-[0_13.84%_91.12%_76.39%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1144.svg`} /></div>
            <div className="absolute inset-[25.64%_89.05%_66.09%_0.25%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1145.svg`} /></div>
            <div className="absolute inset-[2.11%_20.12%_73.3%_47.03%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1146.svg`} /></div>
            <div className="absolute inset-[3.39%_47.32%_82.16%_37.18%]">
              <div className="absolute inset-[0_0_0_1.38%]"><img alt="" className="block max-w-none size-full" src={`${p}1147.svg`} /></div>
            </div>
            <div className="absolute contents inset-[1.74%_44.34%_80.37%_40.25%]">
              <div className="absolute inset-[9.4%_46.38%_80.37%_45.05%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1149.svg`} /></div>
              <div className="absolute inset-[3.17%_44.34%_85.25%_43.44%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1151.svg`} /></div>
              <div className="absolute inset-[8.94%_42.56%_86.57%_49.51%] mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[6.151px_-21.04px] mask-size-[42.281px_42.248px]" style={{ maskImage: `url("${p}1155-mask.svg")` }}>
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1155.svg`} />
              </div>
              <div className="absolute inset-[7.95%_45.33%_90.73%_53.32%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1158.svg`} /></div>
              <div className="absolute inset-[9%_48.7%_89.67%_49.91%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1159.svg`} /></div>
              <div className="absolute inset-[2.54%_50.12%_87.21%_41.11%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1160.svg`} /></div>
              <div className="absolute inset-[1.74%_48.92%_84.1%_40.25%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1161.svg`} /></div>
            </div>
            <div className="absolute inset-[9.81%_50.58%_86.47%_45.98%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1162.svg`} /></div>
            <div className="absolute inset-[1.89%_44.58%_92.21%_48.7%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1165.svg`} /></div>
            <div className="absolute inset-[5.04%_52.43%_91.16%_45.74%]">
              <div className="absolute inset-[-15.46%_-34%_-15.45%_-33.99%]"><img alt="" className="block max-w-none size-full" src={`${p}1166.svg`} /></div>
            </div>
            <div className="absolute inset-[5.25%_54.55%_93.06%_44.74%]">
              <div className="absolute inset-[-34.83%_-87.21%_-34.83%_-87.2%]"><img alt="" className="block max-w-none size-full" src={`${p}1167.svg`} /></div>
            </div>
            <div className="absolute inset-[2.93%_46.7%_93.32%_49.24%]">
              <div className="absolute inset-[-11.6%_-11.32%_-11.6%_-11.31%]"><img alt="" className="block max-w-none size-full" src={`${p}1168.svg`} /></div>
            </div>
            <div className="absolute inset-[2.73%_48.92%_92.55%_48.19%]">
              <div className="absolute inset-[-9.22%_-15.94%_-9.22%_-15.89%]"><img alt="" className="block max-w-none size-full" src={`${p}1169.svg`} /></div>
            </div>
            <div className="absolute inset-[14.27%_47.45%_85.46%_49.8%]">
              <div className="absolute inset-[-106.34%_-10.81%_-106.32%_-10.81%]"><img alt="" className="block max-w-none size-full" src={`${p}1170.svg`} /></div>
            </div>
            <div className="absolute inset-[15%_40.88%_59.12%_25.12%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1171.svg`} /></div>
            <div className="absolute inset-[15.61%_58.05%_65.97%_8.62%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1172.svg`} /></div>
            <div className="absolute inset-[38%_8.23%_29.58%_23.81%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1173.svg`} /></div>
            <div className="absolute inset-[42.35%_52.76%_10.44%_0.82%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={`${p}1174.svg`} /></div>
            <div className="absolute inset-[53.2%_58.05%_42.23%_28.14%]">
              <div className="absolute inset-[-12.88%_-4.49%]"><img alt="" className="block max-w-none size-full" src={`${p}1175.svg`} /></div>
            </div>
            <div className="absolute inset-[19.63%_65.73%_73.07%_31.69%]">
              <div className="absolute inset-[-5.79%_-17.27%]"><img alt="" className="block max-w-none size-full" src={`${p}1176.svg`} /></div>
            </div>
            <div className="absolute inset-[13.85%_40.38%_77.47%_59.12%]">
              <div className="absolute inset-[-4.86%_-88.51%]"><img alt="" className="block max-w-none size-full" src={`${p}1177.svg`} /></div>
            </div>
            <div className="absolute inset-[30.42%_66.19%_68.92%_30.53%]">
              <div className="absolute inset-[-63.91%_-13.58%]"><img alt="" className="block max-w-none size-full" src={`${p}1178.svg`} /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 02｜ストーリー一覧ヒーロー（Figma 448:580）
function StoryHero() {
  return (
    <section className="bg-[#00c2fd] relative w-full overflow-hidden" data-node-id="448:580" data-name="ストーリー一覧｜ヒーロー">
      {/* PC: 1440px基準の絶対配置を画面幅に応じて比率を保ったまま縮小・拡大表示する */}
      <div className="hidden md:block relative w-full overflow-hidden aspect-[1440/320]" style={{ containerType: "inline-size" }}>
        <div
          className="absolute left-0 top-0 w-[1440px] h-[320px] origin-top-left"
          style={{ transform: "scale(calc(100cqw / 1440px))" }}
        >
          <div className="absolute bottom-[-130.37px] left-[-101px] w-[1641.528px] rotate-[4.62deg]">
            <img alt="" className="block max-w-none" src="/wp-content/themes/original/assets/cta-wave-bg.svg" />
          </div>
          <div className="absolute flex flex-col gap-[16px] items-start leading-[1.55] left-[117px] text-white top-[108px] whitespace-nowrap">
            <p className="capitalize font-['Outfit'] font-medium text-[16px] tracking-[1.28px]">Challenge Stories</p>
            <p className="font-['Zen_Kaku_Gothic_New'] font-bold text-[40px]">長崎で活躍する人たち</p>
          </div>
          <HeroJumperIllust className="absolute h-[469px] left-[837px] top-[58px] w-[444px]" />
        </div>
      </div>

      {/* SP: シンプルな縦積みレイアウト（装飾イラストは省略） */}
      <div className="md:hidden flex flex-col gap-[12px] px-[16px] py-[32px] relative overflow-hidden">
        <div className="absolute bottom-[-34px] left-[-27px] w-[114%] rotate-[4.62deg] opacity-80">
          <img alt="" className="block max-w-none w-full h-auto" src="/wp-content/themes/original/assets/cta-wave-bg.svg" />
        </div>
        <p className="relative capitalize font-['Outfit'] font-medium text-white text-[14px] tracking-[1.28px]">Challenge Stories</p>
        <p className="relative font-['Zen_Kaku_Gothic_New'] font-bold text-white text-[26px]">長崎で活躍する人たち</p>
      </div>
    </section>
  );
}

// 03｜インタビュー記事カード一覧（Figma 448:682）。フォールバックは3種のインタビューを3回繰り返した仮データ
function InterviewCard({ item, crop, link }) {
  return (
    <a href={link} className="bg-white flex flex-col gap-[24px] items-start overflow-hidden relative w-full max-w-[384px] mx-auto">
      <div className="border-3 border-[#322e2e] border-solid flex flex-col h-[220px] items-start justify-center overflow-hidden p-[20px] relative rounded-[16px] shrink-0 w-full">
        <img
          alt=""
          className={`absolute max-w-none h-[${crop.h}] left-[${crop.left}] top-[${crop.top}] w-[${crop.w}]`}
          src={item.image}
        />
      </div>
      <div className="flex flex-col gap-[8px] items-start relative shrink-0 w-full">
        <div className="flex gap-[8px] items-center relative shrink-0">
          <div className="bg-[#00c2fd] rounded-[4px] shrink-0 size-[14px]" />
          <p className="font-['Zen_Kaku_Gothic_New'] font-medium leading-[1.55] text-[#322e2e] text-[13px] tracking-[1.04px] whitespace-pre-wrap">
            {item.category}
          </p>
        </div>
        <div className="font-['Zen_Kaku_Gothic_New'] font-bold leading-[0] text-[#322e2e] text-[24px] tracking-[1.92px]">
          {item.title.map((line, i) => (
            <p key={i} className={i < item.title.length - 1 ? "leading-[1.55] mb-0" : "leading-[1.55]"}>
              {line}
            </p>
          ))}
        </div>
        {item.name && (
          <p className="font-['Zen_Kaku_Gothic_New'] font-medium leading-[1.55] text-[#322e2e] text-[13px] tracking-[1.04px]">
            {item.name}
          </p>
        )}
      </div>
    </a>
  );
}

function InterviewGrid() {
  const fallbackCards = [0, 1, 2].flatMap(() =>
    STORY_ITEMS.map((item, i) => ({ item, crop: STORY_CARD_CROPS[i], link: STORY_PAGE_URL }))
  );
  const [cards, setCards] = useState(fallbackCards);

  useEffect(() => {
    fetch(`${WP_API}/wp/v2/story?_embed&per_page=20&orderby=date&order=desc`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (!data || !data.length) return;
        setCards(
          data.map((post) => ({
            item: {
              image: getFeaturedImage(post, "/wp-content/themes/original/assets/story-photo-worker.png"),
              category: `${getTermName(post, "story_category") || "INTERVIEW"}  /  INTERVIEW`,
              title: splitTitle(stripTags(post.title.rendered)),
              name: (post.story_fields && post.story_fields.interviewee_name) || "",
            },
            crop: { h: "127.28%", left: "-8.07%", top: "-0.01%", w: "109.37%" },
            link: post.link,
          }))
        );
      })
      .catch(() => {});
  }, []);

  return (
    <section className="bg-white px-[16px] pt-[48px] pb-[64px] lg:pt-[80px] lg:pb-[120px]" data-node-id="448:682" data-name="インタビュー一覧">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-[32px] gap-y-[32px] max-w-[1200px] mx-auto">
        {cards.map((c, idx) => (
          <InterviewCard key={idx} item={c.item} crop={c.crop} link={c.link} />
        ))}
      </div>
    </section>
  );
}

function App() {
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <>
      <Header onMenu={() => setMobileOpen(true)} />
      <main>
        <StoryHero />
        <InterviewGrid />
        <Cta />
      </main>
      <Footer />
      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} />
    </>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render(<App />);