// site-courses.jsx — Course catalog

const COURSES = [
  {
    cat: 'EXTENSION',
    title: 'シールエクステ講習',
    en: 'Tape-in Extension',
    desc: '自然な馴染ませ方、装着位置、毛量調整、デザイン提案まで学ぶ実践講習。',
    target: '美容師 / アシスタント / エクステ強化',
    skills: ['装着技術', '馴染ませ', 'デザイン構成', 'カウンセリング'],
    duration: '1日 · 6h',
    href: 'course.html?course=seal',
  },
  {
    cat: 'EXTENSION',
    title: '羽エクステ講習',
    en: 'Feather Extension',
    desc: '羽根素材を使った繊細な装着技術。質感とデザインの両面から指導。',
    target: '美容師 / 装飾デザイン志向',
    skills: ['素材選定', '装着技術', '配置設計', '質感調整'],
    duration: '1日 · 5h',
    href: 'course.html?course=feather',
  },
  {
    cat: 'CUT',
    title: 'カット講習',
    en: 'Precision Cut',
    desc: '骨格・毛流を読み解き、サロンワークに直結するカット理論と実践。',
    target: '美容師 / カット技術を磨きたい方',
    skills: ['骨格補正', 'セニング設計', 'メンズ／レディース', '再現性'],
    duration: '2日 · 12h',
    href: 'course.html?course=cut',
  },
  {
    cat: 'COLOR',
    title: 'カラー講習',
    en: 'Color Design',
    desc: 'ベーシックカラーからハイトーンまで。薬剤理論と現場の感覚を統合。',
    target: '美容師 / カラリスト志望',
    skills: ['薬剤選定', 'ハイライト', 'ハイトーン', 'カウンセリング'],
    duration: '2日 · 10h',
    href: 'course.html?course=color',
  },
];

function CourseCard({ course, idx }) {
  const [hov, setHov] = useState(false);
  const num = String(idx + 1).padStart(2, '0');
  return (
    <a
      href={course.href || '#'}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        background: BRAND.white,
        border: `1px solid ${hov ? BRAND.black : BRAND.hair}`,
        transition: 'border-color .4s ease, transform .4s ease',
        display: 'flex', flexDirection: 'column',
        textDecoration: 'none', color: 'inherit',
        transform: hov ? 'translateY(-4px)' : 'none',
      }}>
      {/* Photo */}
      <div style={{ overflow: 'hidden' }}>
        <div style={{
          transform: hov ? 'scale(1.04)' : 'scale(1)',
          transition: 'transform .9s cubic-bezier(.2,.7,.2,1)',
        }}>
          <Photo ratio="16 / 9" label={`${course.en} — workshop photo, hands & technique focus.`} />
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: '36px 38px 38px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <span style={{
            display: 'inline-block', padding: '5px 12px',
            border: `1px solid ${BRAND.gold}`, color: BRAND.gold,
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 11, letterSpacing: '.26em',
          }}>{course.cat}</span>
          <span style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 10,
            letterSpacing: '.22em', color: BRAND.mute,
          }}>COURSE · {num}</span>
        </div>

        <div>
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 14, letterSpacing: '.22em', color: BRAND.mute,
          }}>{course.en}</div>
          <h3 style={{
            margin: '8px 0 0',
            fontFamily: '"Shippori Mincho", serif',
            fontWeight: 500, fontSize: 30, letterSpacing: '.06em',
            color: BRAND.ink, lineHeight: 1.25,
          }}>{course.title}</h3>
        </div>

        <p style={{
          margin: 0, fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 14, lineHeight: 1.95, letterSpacing: '.04em',
          color: BRAND.ink, textWrap: 'pretty',
        }}>{course.desc}</p>

        {/* Spec table */}
        <dl style={{
          margin: 0, padding: '20px 0',
          borderTop: `1px solid ${BRAND.hair}`,
          borderBottom: `1px solid ${BRAND.hair}`,
          display: 'grid', gridTemplateColumns: '110px 1fr',
          rowGap: 14, columnGap: 16,
          fontFamily: '"Noto Sans JP", sans-serif', fontSize: 12,
        }}>
          <dt style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 12, letterSpacing: '.2em', color: BRAND.gold,
          }}>For</dt>
          <dd style={{ margin: 0, color: BRAND.ink, letterSpacing: '.04em' }}>{course.target}</dd>

          <dt style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 12, letterSpacing: '.2em', color: BRAND.gold,
          }}>Skills</dt>
          <dd style={{ margin: 0, color: BRAND.ink, letterSpacing: '.04em', lineHeight: 1.9 }}>
            {course.skills.join(' / ')}
          </dd>

          <dt style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 12, letterSpacing: '.2em', color: BRAND.gold,
          }}>Time</dt>
          <dd style={{ margin: 0, color: BRAND.ink, letterSpacing: '.04em' }}>{course.duration}</dd>
        </dl>

        <span style={{
          alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '14px 0',
          fontFamily: '"Noto Sans JP", sans-serif',
          fontSize: 13, fontWeight: 500, letterSpacing: '.16em',
          color: BRAND.black, textDecoration: 'none',
          borderBottom: `1px solid ${hov ? BRAND.gold : BRAND.black}`,
          transition: 'border-color .3s ease, color .3s ease',
        }}>
          詳細を見る
          <span style={{
            fontFamily: '"Cormorant Garamond", serif', fontSize: 16,
            color: BRAND.gold,
            transform: hov ? 'translateX(4px)' : 'none',
            transition: 'transform .3s ease',
          }}>→</span>
        </span>
      </div>
    </a>
  );
}

function Courses() {
  return (
    <section id="courses" style={{
      background: BRAND.beige, color: BRAND.ink,
      padding: '160px 80px',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 80, gap: 40, flexWrap: 'wrap',
        }}>
          <div>
            <Eyebrow>Courses — 05</Eyebrow>
            <div style={{ marginTop: 28 }}>
              <SectionTitle en="Courses." jp="講習一覧 / 7カテゴリ" />
            </div>
          </div>
          <div style={{
            display: 'flex', gap: 24, alignItems: 'center',
            paddingBottom: 8,
          }}>
            {['All', 'Cut', 'Color', 'Extension', 'Black Hair'].map((t, i) => (
              <a key={t} href="#" style={{
                fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                fontSize: 14, letterSpacing: '.22em',
                color: i === 0 ? BRAND.black : BRAND.mute,
                textDecoration: 'none',
                borderBottom: i === 0 ? `1px solid ${BRAND.gold}` : '1px solid transparent',
                paddingBottom: 4,
              }}>{t}</a>
            ))}
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32,
        }}>
          {COURSES.map((c, i) => <CourseCard key={c.title} course={c} idx={i} />)}
        </div>

        <div style={{
          marginTop: 64, display: 'flex', justifyContent: 'center',
        }}>
          <Btn variant="secondary" onLight={true} href="#">全ての講習を見る</Btn>
        </div>
      </div>
    </section>
  );
}

window.Courses = Courses;
window.COURSES = COURSES;