/* SeasonRecipes.jsx — じぶん湯 季節レシピ */
'use strict';

const SEASONS = [
  {
    id: 'spring',
    label: 'SPRING · 春',
    jp: '春の処方',
    month: '3–5月',
    theme: '疲労回復・花粉対策',
    color: '#5c7a4e',
    bg: 'rgba(92,122,78,0.06)',
    accent: '#2f4a3a',
    desc: '冬の疲れを解きほぐし、春の体のリセットに。よもぎの力で血行を整え、揺らぎやすい季節の変わり目を乗り越える処方です。',
    blend: [
      { cat: 'SOLID', name: '炭酸タブレット', color: '#b4563a' },
      { cat: 'LIQUID', name: 'ローズマリー液', color: '#34486e' },
      { cat: 'FLOWER', name: '湯の花 中量', color: '#c4aa6c' },
      { cat: 'HERB', name: 'よもぎ（山間採取）', color: '#5c7a4e' },
    ],
    temp: 40,
    min: 20,
    note: '代謝が上がりはじめる春に、やや高めの温度で深部から温める。',
  },
  {
    id: 'summer',
    label: 'SUMMER · 夏',
    jp: '夏の処方',
    month: '6–8月',
    theme: '冷え補正・熱疲労回復',
    color: '#b4563a',
    bg: 'rgba(180,86,58,0.06)',
    accent: '#8b3a22',
    desc: '冷房による冷えと夏の熱疲労を同時に解消。ヒノキの清涼感と炭酸の血行促進で、夏の体をリセットします。',
    blend: [
      { cat: 'SOLID', name: '薬用固形', color: '#b4563a' },
      { cat: 'LIQUID', name: 'ユーカリ液', color: '#34486e' },
      { cat: 'FLOWER', name: '湯の花 少量', color: '#c4aa6c' },
      { cat: 'HERB', name: 'ヒノキ（高知県産）', color: '#5c7a4e' },
    ],
    temp: 38,
    min: 15,
    note: 'ぬるめの設定で長めに浸かることで、深部体温を均一に整える。',
  },
  {
    id: 'autumn',
    label: 'AUTUMN · 秋',
    jp: '秋の処方',
    month: '9–11月',
    theme: '乾燥対策・気持ち落ち着ける',
    color: '#c4aa6c',
    bg: 'rgba(196,170,108,0.06)',
    accent: '#8a7040',
    desc: '乾燥が進む秋に、肌と心を潤す処方。ドクダミとシアバターで保湿を内側から支え、クロモジの香りで気持ちを整えます。',
    blend: [
      { cat: 'SOLID', name: 'シアバター固形', color: '#b4563a' },
      { cat: 'LIQUID', name: '桃の葉液', color: '#34486e' },
      { cat: 'FLOWER', name: '湯の花 中量', color: '#c4aa6c' },
      { cat: 'HERB', name: 'クロモジ（熊野産）', color: '#5c7a4e' },
    ],
    temp: 39,
    min: 18,
    note: '入浴後すぐに保湿ケアを行うことで、湯上がりの水分を逃さない。',
  },
  {
    id: 'winter',
    label: 'WINTER · 冬',
    jp: '冬の処方',
    month: '12–2月',
    theme: '深部保温・冷え性解消',
    color: '#34486e',
    bg: 'rgba(52,72,110,0.06)',
    accent: '#1e2e4a',
    desc: '芯まで冷えた冬の体を、時間をかけて温める処方。よもぎとスギナの組み合わせが、循環を深いところから整えます。',
    blend: [
      { cat: 'SOLID', name: 'ぬくもり固形', color: '#b4563a' },
      { cat: 'LIQUID', name: 'ラベンダー液', color: '#34486e' },
      { cat: 'FLOWER', name: '湯の花 多め', color: '#c4aa6c' },
      { cat: 'HERB', name: 'スギナ（別府近郊）', color: '#5c7a4e' },
    ],
    temp: 41,
    min: 25,
    note: '熱めの湯に短く、ではなく、やや熱めに長めが冬の鉄則。',
  },
];

function SeasonRecipes() {
  const [active, setActive] = React.useState('spring');
  const season = SEASONS.find(s => s.id === active);

  const s = {
    wrap: { maxWidth: 900, margin: '0 auto' },
    tabs: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 0,
      marginBottom: 40,
      border: '1px solid rgba(26,26,26,0.12)',
    },
    tab: (isActive, color) => ({
      padding: '16px 8px',
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      letterSpacing: '0.18em',
      textAlign: 'center',
      cursor: 'pointer',
      background: isActive ? color : 'transparent',
      color: isActive ? '#fff' : '#8a857b',
      border: 'none',
      borderRight: '1px solid rgba(26,26,26,0.12)',
      transition: 'all 0.2s',
      lineHeight: 1.6,
    }),
    card: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 0,
      border: '1px solid rgba(26,26,26,0.12)',
      background: season.bg,
    },
    cardLeft: {
      padding: '40px 36px',
      borderRight: '1px solid rgba(26,26,26,0.12)',
    },
    cardRight: {
      padding: '40px 36px',
    },
    seasonLabel: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: season.color,
      marginBottom: 8,
    },
    seasonJp: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 'clamp(20px, 3vw, 28px)',
      fontWeight: 500,
      color: '#1a1a1a',
      marginBottom: 8,
    },
    seasonTheme: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      letterSpacing: '0.18em',
      color: '#8a857b',
      marginBottom: 24,
    },
    seasonDesc: {
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 13,
      color: '#5c584d',
      lineHeight: 1.9,
      marginBottom: 0,
    },
    blendLabel: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.22em',
      color: '#8a857b',
      marginBottom: 20,
    },
    blendList: {
      display: 'flex',
      flexDirection: 'column',
      gap: 10,
      marginBottom: 28,
    },
    blendItem: (color) => ({
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      padding: '10px 14px',
      borderLeft: `3px solid ${color}`,
      background: 'rgba(255,255,255,0.5)',
    }),
    blendDot: (color) => ({
      width: 7,
      height: 7,
      borderRadius: '50%',
      background: color,
      flexShrink: 0,
    }),
    blendCat: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 8,
      letterSpacing: '0.12em',
      color: '#8a857b',
      minWidth: 52,
    },
    blendName: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 13,
      color: '#1a1a1a',
    },
    params: {
      display: 'flex',
      gap: 24,
      padding: '16px 0',
      borderTop: '1px solid rgba(26,26,26,0.1)',
    },
    paramItem: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      color: '#5c584d',
      letterSpacing: '0.1em',
    },
    noteText: {
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 10,
      color: '#8a857b',
      lineHeight: 1.7,
      marginTop: 12,
    },
  };

  // Responsive: stack on small screens via media-like logic
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 680);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 680);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return React.createElement('div', { style: s.wrap },
    // Season tabs
    React.createElement('div', { style: s.tabs },
      SEASONS.map(ss =>
        React.createElement('button', {
          key: ss.id,
          style: {
            ...s.tab(active === ss.id, ss.color),
            borderRight: ss.id === 'winter' ? 'none' : '1px solid rgba(26,26,26,0.12)',
          },
          onClick: () => setActive(ss.id),
        }, ss.label)
      )
    ),

    // Card
    React.createElement('div', { style: { ...s.card, gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr' } },
      React.createElement('div', { style: s.cardLeft },
        React.createElement('div', { style: s.seasonLabel }, `${season.month} · ${season.theme}`),
        React.createElement('div', { style: s.seasonJp }, season.jp),
        React.createElement('div', { style: s.seasonTheme }, season.label),
        React.createElement('p', { style: s.seasonDesc }, season.desc)
      ),
      React.createElement('div', { style: s.cardRight },
        React.createElement('div', { style: s.blendLabel }, '— BLEND · 素材'),
        React.createElement('div', { style: s.blendList },
          season.blend.map(b =>
            React.createElement('div', { key: b.cat, style: s.blendItem(b.color) },
              React.createElement('div', { style: s.blendDot(b.color) }),
              React.createElement('span', { style: s.blendCat }, b.cat),
              React.createElement('span', { style: s.blendName }, b.name)
            )
          )
        ),
        React.createElement('div', { style: s.params },
          React.createElement('span', { style: s.paramItem }, `TEMP · ${season.temp}°C`),
          React.createElement('span', { style: s.paramItem }, `DURATION · ${season.min} MIN`)
        ),
        React.createElement('div', { style: s.noteText }, season.note)
      )
    )
  );
}

window.SeasonRecipes = SeasonRecipes;