// Timeline.jsx — 開園までのスケジュール
const Timeline = () => {
  const steps = [
    { year: '2026年 春', label: '圃場整備・定植', desc: 'ブルーベリー苗の定植。土づくりから丁寧に。', status: 'upcoming' },
    { year: '2026年 夏', label: '試験収穫', desc: '試験的なブルーベリー収穫を実施。品質を確認します。', status: 'upcoming' },
    { year: '2026年 秋冬', label: '設備整備', desc: '園内設備・休憩スペースの整備を進めます。', status: 'upcoming' },
    { year: '2027年 初夏', label: 'プレオープン', desc: 'モニター様を募集してのプレオープン。皆さんの声を農園づくりに活かします。', status: 'highlight' },
    { year: '2028年 夏', label: '本オープン予定', desc: 'いよいよ本オープン。多くの方にお越しいただける農園を目指します。', status: 'open' },
  ];

  return (
    <section style={{ background: '#FAF6F0', padding: '96px 24px' }}>
      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: '64px' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '4px', textTransform: 'uppercase', color: '#C9920A', marginBottom: '14px' }}>
            Road to Opening
          </div>
          <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: 'clamp(26px,4vw,38px)', fontWeight: 500, color: '#0F2240', lineHeight: 1.35 }}>
            開園までの予定
          </h2>
        </div>

        {/* Timeline */}
        <div style={{ position: 'relative' }}>
          {/* Vertical line */}
          <div style={{ position: 'absolute', left: '120px', top: '12px', bottom: '12px', width: '1px', background: 'linear-gradient(to bottom, #C9D5E5, #C4DFC0)' }} />

          {steps.map((step, i) => (
            <div key={i} style={{ display: 'flex', gap: '0', marginBottom: i < steps.length - 1 ? '40px' : '0', alignItems: 'flex-start' }}>
              {/* Year label */}
              <div style={{ width: '120px', flexShrink: 0, paddingTop: '6px', paddingRight: '28px', textAlign: 'right' }}>
                <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '13px', fontWeight: 500, color: step.status === 'highlight' ? '#1A3A6E' : step.status === 'open' ? '#3D6535' : '#A89A90', lineHeight: 1.4 }}>{step.year}</div>
              </div>

              {/* Dot */}
              <div style={{ flexShrink: 0, width: '12px', height: '12px', borderRadius: '50%', marginTop: '6px', zIndex: 1, background: step.status === 'highlight' ? '#1A3A6E' : step.status === 'open' ? '#5E9252' : '#C9D5E5', border: step.status === 'upcoming' ? '2px solid #8DA9C9' : 'none', boxShadow: step.status === 'highlight' ? '0 0 0 4px rgba(26,58,110,0.15)' : 'none' }} />

              {/* Content */}
              <div style={{ flex: 1, paddingLeft: '24px' }}>
                <div style={{
                  display: 'inline-block',
                  background: step.status === 'highlight' ? '#1A3A6E' : step.status === 'open' ? '#5E9252' : 'white',
                  border: step.status === 'upcoming' ? '1px solid #E8E0D8' : 'none',
                  borderRadius: '10px', padding: '14px 18px',
                  boxShadow: step.status === 'upcoming' ? '0 1px 4px rgba(18,42,82,0.06)' : '0 3px 12px rgba(18,42,82,0.12)',
                  width: '100%',
                }}>
                  <div style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '16px', fontWeight: 500, color: step.status === 'highlight' || step.status === 'open' ? 'white' : '#0F2240', marginBottom: '5px' }}>{step.label}</div>
                  <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', fontWeight: 300, color: step.status === 'highlight' || step.status === 'open' ? 'rgba(255,255,255,0.8)' : '#6B5D52', lineHeight: 1.8 }}>{step.desc}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Disclaimer */}
        <div style={{ marginTop: '40px', padding: '12px 16px', background: '#F0F4F9', borderRadius: '8px', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 300, color: '#5B7AAA', lineHeight: 1.7, textAlign: 'center' }}>
          ※ 天候や栽培状況により変更になる場合があります。
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Timeline });