// News — シンプルな日付付きリスト。URL付きの項目だけ → アイコン表示。
const NEWS_ITEMS = [
  {
    date: "2026.04.15",
    tag: "イベント",
    title: "日本最大級のAI展示会「NEXTech」に出展しました。",
  },
  {
    date: "2026.01.31",
    tag: "イベント",
    title: "AI活用の最前線を学ぶ！「第二回オフ会＠大阪編」を開催いたしました。",
    url: "https://note.com/tomolabnote/n/n1fa6ccd7c3bf",
  },
  {
    date: "2025.12.19",
    tag: "ニュース",
    title: "代表の武藤が、日本初となる「n8n 公式アンバサダー」に就任しました。",
    url: "https://prtimes.jp/main/html/rd/p/000000003.000175207.html",
  },
  {
    date: "2025.12.18",
    tag: "イベント",
    title: "代表の武藤、COOの中山が、青山学院大学様へ講義いたしました。",
    url: "https://prtimes.jp/main/html/rd/p/000000001.000175207.html",
  },
  {
    date: "2025.10.16",
    tag: "お知らせ",
    title: "コーポレートサイトをリニューアルしました。",
  },
];

function News() {
  return (
    <section id="news" style={{ background: "#ffffff", borderTop: "1px solid var(--sky-200)" }}>
      <div className="wrap" style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div className="news-head">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <span className="en">お知らせ</span>
            <span className="ja">News & Column</span>
          </div>
        </div>

        <ul style={{
          margin: "32px 0 0", padding: 0, listStyle: "none",
          borderTop: "1px solid var(--navy-900)",
        }}>
          {NEWS_ITEMS.map((n, i) => {
            const isLink = !!n.url;
            const Tag = isLink ? "a" : "div";
            const linkProps = isLink ? { href: n.url, target: "_blank", rel: "noopener noreferrer" } : {};
            return (
              <li key={i}>
                <Tag {...linkProps} className="news-row" style={{
                  display: "grid",
                  gridTemplateColumns: "120px 80px 1fr 20px",
                  gap: "clamp(12px, 2vw, 28px)",
                  alignItems: "center",
                  padding: "22px 4px",
                  borderBottom: "1px solid var(--hair)",
                  color: "var(--navy-900)",
                  textDecoration: "none",
                  cursor: isLink ? "pointer" : "default",
                  transition: "background 0.15s, padding 0.15s",
                }}>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-2)", letterSpacing: "0.06em",
                  }}>{n.date}</span>
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em",
                    color: "var(--navy-700)",
                    padding: "3px 8px", border: "1px solid var(--sky-200)", textAlign: "center",
                    background: "#fff",
                  }}>{n.tag}</span>
                  <span style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.6 }}>
                    {n.title}
                  </span>
                  <span style={{ color: isLink ? "var(--ink-3)" : "transparent", display: "flex", justifyContent: "flex-end" }}>
                    {isLink && <Icon.ArrowRight size={14} />}
                  </span>
                </Tag>
              </li>
            );
          })}
        </ul>
      </div>

      <style>{`
        .news-head {
          display: grid;
          gap: 24px;
          align-items: end;
        }
        @media (min-width: 720px) {
          .news-head {
            grid-template-columns: 1fr auto;
          }
        }
        .news-row:hover { background: #fff; padding-left: 14px !important; padding-right: 14px !important; }
        @media (max-width: 720px) {
          .news-row {
            grid-template-columns: 90px 64px 1fr !important;
          }
          .news-row > :nth-child(4) { display: none; }
        }
      `}</style>
    </section>
  );
}

window.News = News;