// NewsSection.jsx — お知らせ・ブログ一覧
const NewsSection = () => {
  const news = [
    { date: '2025.06.01', tag: 'お知らせ', tagColor: '#E5ECF5', tagText: '#122A52', title: '2025年度 ブルーベリー摘み取りシーズン開始のお知らせ（6月28日予定）' },
    { date: '2025.05.15', tag: 'ブログ',   tagColor: '#E4F0E2', tagText: '#3D6535', title: '今年の新品種ご紹介——80品種を超えました！' },
    { date: '2025.04.20', tag: 'カフェ',   tagColor: '#F0E0C8', tagText: '#6B4520', title: '春の期間限定メニュー「桜と甘酒ラテ」始まりました' },
    { date: '2025.03.10', tag: 'お知らせ', tagColor: '#E5ECF5', tagText: '#122A52', title: '2025年度の摘み取り予約受付システムをリニューアルします' },
  ];

  return (
    <section style={{ background: '#F0E8D8', padding: '80px 24px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '64px', alignItems: 'start' }}>
          {/* Left */}
          <div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '14px' }}>News & Blog</div>
            <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '32px', fontWeight: 500, color: '#0F2240', lineHeight: 1.35, marginBottom: '24px' }}>お知らせ・<br />農園ブログ</h2>
            <button style={{
              fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 400,
              background: 'transparent', color: '#6B5D52', border: '1px solid #C9A578', cursor: 'pointer',
              padding: '8px 20px', borderRadius: '6px',
            }}>全て見る →</button>
          </div>
          {/* Right: list */}
          <div>
            {news.map((item, i) => (
              <div key={i} style={{
                display: 'flex', gap: '16px', alignItems: 'flex-start',
                padding: '18px 0',
                borderBottom: i < news.length - 1 ? '1px solid rgba(229,216,196,0.7)' : 'none',
                cursor: 'pointer',
              }}>
                <div style={{ flexShrink: 0, paddingTop: '2px' }}>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '12px', color: '#A89A90', letterSpacing: '1px', whiteSpace: 'nowrap' }}>{item.date}</div>
                </div>
                <div>
                  <span style={{ display: 'inline-block', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '10px', letterSpacing: '1px', background: item.tagColor, color: item.tagText, padding: '2px 8px', borderRadius: '4px', marginBottom: '6px' }}>{item.tag}</span>
                  <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 400, color: '#1C1410', lineHeight: 1.6 }}>{item.title}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { NewsSection });