/* PlanTable.jsx — じぶん湯 プランテーブル */
'use strict';

const PLANS = [
  {
    id: 'trial',
    code: 'PLAN · 01',
    name: 'お試しセット',
    en: 'Trial',
    price: 2480,
    unit: '1回限り',
    badge: null,
    color: '#8a857b',
    bg: 'transparent',
    border: 'rgba(26,26,26,0.15)',
    features: [
      { text: '4要素 各1種 × ミニサイズ', on: true },
      { text: '診断カード付き', on: true },
      { text: '処方箋レシピ 1回分', on: true },
      { text: '定期割引', on: false },
      { text: '優先配送', on: false },
      { text: 'カスタム処方最適化', on: false },
    ],
    cta: 'まず試してみる',
    note: '送料 660円（税込）',
  },
  {
    id: 'seasonal',
    code: 'PLAN · 02',
    name: '季節のセット',
    en: 'Seasonal',
    price: 4980,
    unit: '月1回・定期',
    badge: 'POPULAR',
    color: '#5c7a4e',
    bg: 'rgba(92,122,78,0.04)',
    border: '#5c7a4e',
    features: [
      { text: '季節に合わせたフルセット', on: true },
      { text: '診断カード付き', on: true },
      { text: '処方箋レシピ 月2レシピ', on: true },
      { text: '定期割引 10%OFF', on: true },
      { text: '5,500円以上 送料無料', on: true },
      { text: 'カスタム処方最適化', on: false },
    ],
    cta: '定期便を始める',
    note: '解約はいつでも可能',
  },
  {
    id: 'custom',
    code: 'PLAN · 03',
    name: '診断カスタム',
    en: 'Prescription',
    price: 7980,
    unit: '月1回・定期',
    badge: 'ADVANCED',
    color: '#34486e',
    bg: 'rgba(52,72,110,0.04)',
    border: '#34486e',
    features: [
      { text: '体調診断に基づく完全カスタム', on: true },
      { text: '詳細診断レポート', on: true },
      { text: '処方箋レシピ 無制限', on: true },
      { text: '定期割引 15%OFF', on: true },
      { text: '優先配送', on: true },
      { text: 'カスタム処方最適化', on: true },
    ],
    cta: '処方を受け取る',
    note: 'スキップ・一時停止も可',
  },
];

function PlanTable() {
  const [hovered, setHovered] = React.useState(null);

  const s = {
    wrap: { maxWidth: 960, margin: '0 auto' },
    grid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 0,
      border: '1px solid rgba(26,26,26,0.12)',
    },
    card: (plan, isHov) => ({
      padding: '40px 28px',
      background: isHov ? (plan.bg || 'rgba(255,255,255,0.3)') : (plan.bg || 'transparent'),
      borderRight: '1px solid rgba(26,26,26,0.12)',
      borderTop: `3px solid ${isHov ? plan.color : 'transparent'}`,
      display: 'flex',
      flexDirection: 'column',
      transition: 'all 0.22s',
      cursor: 'default',
    }),
    cardLast: (plan, isHov) => ({
      padding: '40px 28px',
      background: isHov ? (plan.bg || 'rgba(255,255,255,0.3)') : (plan.bg || 'transparent'),
      borderTop: `3px solid ${isHov ? plan.color : 'transparent'}`,
      display: 'flex',
      flexDirection: 'column',
      transition: 'all 0.22s',
      cursor: 'default',
    }),
    code: (color) => ({
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      letterSpacing: '0.22em',
      color: color,
      marginBottom: 12,
    }),
    badge: (color) => ({
      display: 'inline-block',
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 8,
      letterSpacing: '0.2em',
      color: '#fff',
      background: color,
      padding: '3px 8px',
      marginBottom: 12,
    }),
    planName: {
      fontFamily: '"Shippori Mincho", serif',
      fontSize: 20,
      fontWeight: 500,
      color: '#1a1a1a',
      marginBottom: 6,
      lineHeight: 1.3,
    },
    planEn: {
      fontFamily: '"Cormorant Garamond", "Times New Roman", serif',
      fontStyle: 'italic',
      fontSize: 14,
      color: '#8a857b',
      marginBottom: 28,
    },
    priceRow: {
      display: 'flex',
      alignItems: 'baseline',
      gap: 6,
      marginBottom: 6,
    },
    price: (color) => ({
      fontFamily: '"Cormorant Garamond", "Times New Roman", serif',
      fontSize: 42,
      fontWeight: 400,
      color: color,
      lineHeight: 1,
    }),
    priceUnit: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      color: '#8a857b',
      letterSpacing: '0.1em',
    },
    freqText: {
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 11,
      color: '#8a857b',
      marginBottom: 32,
    },
    divider: {
      height: 1,
      background: 'rgba(26,26,26,0.1)',
      margin: '0 0 24px',
    },
    featureList: {
      listStyle: 'none',
      padding: 0,
      margin: '0 0 32px',
      flex: 1,
    },
    featureItem: (on) => ({
      display: 'flex',
      alignItems: 'flex-start',
      gap: 10,
      padding: '7px 0',
      fontFamily: '"Noto Sans JP", sans-serif',
      fontSize: 12,
      color: on ? '#1a1a1a' : 'rgba(26,26,26,0.3)',
      borderBottom: '1px solid rgba(26,26,26,0.06)',
    }),
    featureMark: (on, color) => ({
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      color: on ? color : 'rgba(26,26,26,0.2)',
      flexShrink: 0,
      marginTop: 2,
    }),
    ctaBtn: (color, bg) => ({
      display: 'block',
      width: '100%',
      padding: '14px 0',
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 10,
      letterSpacing: '0.18em',
      textAlign: 'center',
      color: '#fff',
      background: color,
      border: 'none',
      cursor: 'pointer',
      transition: 'opacity 0.2s',
      marginBottom: 12,
    }),
    noteText: {
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 9,
      color: '#8a857b',
      letterSpacing: '0.1em',
      textAlign: 'center',
    },
  };

  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 720);
  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 720);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return React.createElement('div', { style: s.wrap },
    React.createElement('div', {
      style: { ...s.grid, gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)' }
    },
      PLANS.map((plan, i) =>
        React.createElement('div', {
          key: plan.id,
          style: (i < PLANS.length - 1 && !isMobile) ? s.card(plan, hovered === plan.id) : s.cardLast(plan, hovered === plan.id),
          onMouseEnter: () => setHovered(plan.id),
          onMouseLeave: () => setHovered(null),
        },
          plan.badge && React.createElement('div', { style: s.badge(plan.color) }, plan.badge),
          React.createElement('div', { style: s.code(plan.color) }, plan.code),
          React.createElement('div', { style: s.planName }, plan.name),
          React.createElement('div', { style: s.planEn }, plan.en),
          React.createElement('div', { style: s.priceRow },
            React.createElement('span', { style: s.price(plan.color) },
              `¥${plan.price.toLocaleString()}`
            ),
            React.createElement('span', { style: s.priceUnit }, '税込')
          ),
          React.createElement('div', { style: s.freqText }, plan.unit),
          React.createElement('div', { style: s.divider }),
          React.createElement('ul', { style: s.featureList },
            plan.features.map((f, fi) =>
              React.createElement('li', { key: fi, style: s.featureItem(f.on) },
                React.createElement('span', { style: s.featureMark(f.on, plan.color) }, f.on ? '✓' : '—'),
                f.text
              )
            )
          ),
          React.createElement('button', { style: s.ctaBtn(plan.color) }, plan.cta),
          React.createElement('div', { style: s.noteText }, plan.note)
        )
      )
    )
  );
}

window.PlanTable = PlanTable;