/* TEN GROW — News (お知らせ一覧) */
const DS_News = window.TENGROWDesignSystem_8927da;

function TG_News() {
  const { SectionHeading, Breadcrumb, NewsCard, Tag, Button } = DS_News;
  const { Container, Section, GhostWord } = window;
  const [filter, setFilter] = React.useState("すべて");

  const all = [
    { date: "2026.07.16", category: "サービス", categoryColor: "teal", title: "成果報酬型 広告運用サービスの提供を開始しました" },
    { date: "2026.07.10", category: "プレス", categoryColor: "amber", title: "コーポレートサイトを公開しました" },
    { date: "2026.07.03", category: "お知らせ", categoryColor: "ink", title: "株式会社TEN GROWを設立しました" },
    { date: "2026.07.01", category: "お知らせ", categoryColor: "ink", title: "オフィスを新宿御苑に開設しました" },
  ];
  const filters = ["すべて", "お知らせ", "プレス", "サービス"];
  const shown = filter === "すべて" ? all : all.filter((n) => n.category === filter);

  return (
    <div>
      <section style={{ background: "var(--color-surface)", position: "relative", overflow: "hidden", borderBottom: "1px solid var(--color-border)" }}>
        <GhostWord style={{ top: "1.5rem", right: "-1rem" }}>News</GhostWord>
        <Container size="wide" style={{ position: "relative", zIndex: 1, paddingTop: "var(--space-9)", paddingBottom: "var(--space-9)" }}>
          <Breadcrumb items={[{ label: "HOME", href: "#home" }, { label: "ニュース" }]} />
          <div style={{ marginTop: "var(--space-6)" }}>
            <span style={{ fontFamily: "var(--font-en-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--color-primary)", fontSize: "clamp(2rem,1.4rem + 2.4vw,3rem)" }}>News</span>
            <h1 style={{ fontFamily: "var(--font-jp-heading)", fontWeight: 900, fontSize: "var(--fs-h1)", letterSpacing: ".06em", margin: "0.1em 0 0" }}>お知らせ</h1>
          </div>
        </Container>
      </section>

      <Section tone="cream">
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-2)", marginBottom: "var(--space-7)" }}>
          {filters.map((f) => (
            <Tag key={f} active={filter === f} onClick={() => setFilter(f)}>{f}</Tag>
          ))}
        </div>

        <div style={{ borderTop: "1px solid var(--color-border)" }}>
          {shown.map((n, i) => <NewsCard key={i} {...n} href="#news" />)}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: "var(--space-8)" }}>
          <Button variant="ghost">もっと見る</Button>
        </div>
      </Section>
    </div>
  );
}
window.TG_News = TG_News;