// WorkshopsPage.jsx — 課程介紹獨立頁
// 行銷展示用，與 PP.getCourses() 解耦；bookingCourseId 對應 reserve.html?courseId=
// TODO Rachel: replace bookingCourseId placeholders with real course ids
// from PP.getCourses() / Sheet courses; replace empty image strings
// with actual workshop hero shots when available.

// Note: image filename 'workshop-king-*.jpg' is legacy — content is 五行課
const WORKSHOPS = [
  {
    id: 'ws-edt',
    bookingCourseId: 'course-edt',  // TODO Rachel: align with real PP.getCourses() id
    nameZh: '淡香水體驗',
    nameEn: 'Eau de Toilette · Beginner',
    tagline: '初次接觸調香，從 36 種原料中尋找屬於你的氣息',
    intro: '在兩小時的香氛書房裡，你將從前中後三調的香材中，挑選並調配出第一瓶屬於自己的淡香水。每一滴都是一次決定。',
    image: 'uploads/workshop-edt-01.jpg',
    highlights: [
      { title: '挑選原料',    desc: '從 36 種前中後調香精中，憑直覺與引導挑出 5-8 種' },
      { title: '配方組合',    desc: '老師陪你調出層次比例，理解前/中/後調的相遇' },
      { title: '命名與包裝',  desc: 'AI 為你的作品命名，選一個帶它回家' },
    ],
    duration: '2 小時',
    capacity: '1-4 人',
    price:    'NT$ 1,800 / 人',
    accent:   'rgba(232,181,160,0.6)',
    bookable: true,
  },
  {
    id: 'ws-xmas',
    bookingCourseId: 'course-xmas',
    nameZh: '聖誕限定擴香瓶製作',
    nameEn: 'Christmas Limited · Diffuser',
    tagline: '節日的氣味記憶，親手調製專屬節慶的擴香',
    intro: '聖誕季限定。挑選帶有節日溫度的香材，調配一瓶能陪你度過冬日的擴香瓶，作為禮物送給自己或所愛的人。',
    image: 'uploads/workshop-xmas-01.jpg',
    highlights: [
      { title: '節慶香材', desc: '挑選肉桂、丁香、雪松等帶有節日溫度的香料' },
      { title: '擴香配方', desc: '老師陪你調出適合空間擴香的揮發比例' },
      { title: '瓶身裝飾', desc: '客製化標籤與緞帶，完成一份節日的氣味禮物' },
    ],
    duration: '2.5 小時',
    capacity: '1-4 人',
    price:    'NT$ 2,200 / 人',
    accent:   'rgba(180,90,80,0.55)',
    bookable: false,
  },
  {
    id: 'ws-five-elements',
    bookingCourseId: 'course-five-elements',
    nameZh: '五行調香體驗',
    nameEn: 'Five Elements · Wuxing Workshop',
    tagline: '從金木水火土的東方哲學，理解氣味與身體的對應',
    intro: '結合東方五行哲學的進階體驗。透過五行元素對應的香材，學習如何調出與身心狀態共振的個人香氣。適合對東方文化或調香有基礎興趣的學員。',
    image: 'uploads/workshop-king-01.jpg',
    highlights: [
      { title: '五行對應', desc: '理解金木水火土在氣味上的具象表達' },
      { title: '體質訪談', desc: '透過簡短訪談，判斷適合你的五行傾向' },
      { title: '配方調製', desc: '依五行比例調出個人化的能量香氣' },
      { title: '日常使用', desc: '老師指導如何在生活中運用此香氣' },
    ],
    duration: '3 小時',
    capacity: '1-2 人',
    price:    'NT$ 4,800 / 人',
    accent:   'rgba(140,160,150,0.6)',
    bookable: false,
  },
];

// ── Workshop Card ─────────────────────────────────────────────────────────
function WorkshopCard({ ws, idx }) {
  const [hov, setHov] = React.useState(false);
  const reversed = idx % 2 === 1;

  const handleCTA = () => {
    if (!ws.bookable) return;  // disabled — early return, button shows '目前未開放預約'
    if (ws.isInquiry) {
      window.location.href = 'reserve.html?mode=inquiry';
    } else {
      window.location.href = `reserve.html?courseId=${ws.bookingCourseId}`;
    }
  };

  return (
    <article
      onMouseOver={() => setHov(true)}
      onMouseOut={() => setHov(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: reversed ? '1fr 1.1fr' : '1.1fr 1fr',
        gap: 'clamp(28px, 4vw, 64px)',
        alignItems: 'stretch',
        padding: 'clamp(24px, 3vw, 40px)',
        background: hov ? 'var(--card-hov-bg)' : 'var(--card-bg)',
        border: `1px solid ${hov ? 'rgba(var(--gold-rgb),0.4)' : 'var(--gold2)'}`,
        transition: 'all 0.45s cubic-bezier(0.4, 0, 0.2, 1)',
        boxShadow: hov ? '0 14px 50px rgba(0,0,0,0.18), 0 0 40px var(--gold3)' : 'none',
      }}
      className="workshop-card"
    >
      {/* IMAGE */}
      <div
        className="workshop-img"
        style={{
          order: reversed ? 2 : 1,
          aspectRatio: '4 / 5',
          minHeight: 320,
          background: `linear-gradient(135deg, ${ws.accent.replace('0.6','0.18').replace('0.7','0.2')} 0%, var(--bg2) 100%)`,
          position: 'relative',
          overflow: 'hidden',
          border: '1px solid rgba(var(--gold-rgb),0.1)',
        }}
      >
        {ws.image && (
          <img src={ws.image} alt={ws.nameZh}
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', objectFit: 'cover',
              transform: hov ? 'scale(1.03)' : 'scale(1)',
              transition: 'transform 0.8s ease',
              opacity: 0.92,
            }}
            onError={(e) => { e.target.style.display = 'none'; }}
          />
        )}
        <div style={{
          position: 'absolute', top: 18, left: 18,
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: 11, letterSpacing: '0.3em',
          color: 'rgba(var(--gold-rgb),0.85)',
          textTransform: 'uppercase', fontStyle: 'italic',
          background: 'rgba(20,14,10,0.55)', backdropFilter: 'blur(8px)',
          padding: '4px 10px', border: '1px solid rgba(var(--gold-rgb),0.25)',
        }}>
          № 0{idx + 1}
        </div>
        {!ws.image && (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'monospace', fontSize: 10, letterSpacing: '0.18em',
            color: 'rgba(var(--gold-rgb),0.3)',
          }}>
            // 課程主視覺 //
          </div>
        )}
      </div>

      {/* INFO */}
      <div className="workshop-info" style={{ order: reversed ? 1 : 2, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(8px, 1.5vw, 20px) 0' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.3em', color: 'var(--gold)', textTransform: 'uppercase', fontStyle: 'italic', marginBottom: 12, opacity: 0.85 }}>
          {ws.nameEn}
        </div>

        <h3 style={{
          fontFamily: "'Noto Serif TC', serif",
          fontSize: 'clamp(22px, 2.6vw, 32px)',
          fontWeight: 300,
          letterSpacing: '0.15em',
          color: 'var(--text-main)',
          lineHeight: 1.35,
          marginBottom: 14,
        }}>
          {ws.nameZh}
        </h3>

        <div style={{ width: 32, height: 1, background: 'rgba(var(--gold-rgb),0.45)', marginBottom: 20 }} />

        <p style={{
          fontFamily: "'Noto Serif TC', serif",
          fontSize: 14, fontStyle: 'italic',
          color: 'rgba(var(--gold-rgb),0.85)',
          letterSpacing: '0.08em', lineHeight: 1.9,
          marginBottom: 18,
        }}>
          {ws.tagline}
        </p>

        <p style={{
          fontFamily: "'Noto Serif TC', serif",
          fontSize: 13, color: 'var(--text-sub)',
          lineHeight: 2.05, letterSpacing: '0.05em',
          marginBottom: 28,
        }}>
          {ws.intro}
        </p>

        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 10, letterSpacing: '0.3em', color: 'rgba(var(--gold-rgb),0.55)', textTransform: 'uppercase', marginBottom: 14 }}>
            Workshop Flow
          </div>
          {ws.highlights.map((h, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 12, marginBottom: 10, alignItems: 'baseline' }}>
              <div style={{
                fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
                fontSize: 18, color: 'var(--gold)', letterSpacing: '0.05em', opacity: 0.8,
              }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <div>
                <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 13, color: 'var(--text-main)', letterSpacing: '0.1em', marginBottom: 3 }}>
                  {h.title}
                </div>
                <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 12, color: 'var(--text-mute)', lineHeight: 1.85, letterSpacing: '0.04em' }}>
                  {h.desc}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="workshop-meta" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(var(--gold-rgb),0.18)', border: '1px solid rgba(var(--gold-rgb),0.18)', marginBottom: 24 }}>
          {[
            ['時長', ws.duration],
            ['人數', ws.capacity],
            ['費用', ws.price],
          ].map(([label, val]) => (
            <div key={label} style={{ background: 'var(--bg)', padding: '12px 10px', textAlign: 'center' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 9, letterSpacing: '0.3em', color: 'rgba(var(--gold-rgb),0.55)', textTransform: 'uppercase', marginBottom: 4 }}>
                {label}
              </div>
              <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 12, color: 'var(--text-main)', letterSpacing: '0.05em' }}>
                {val}
              </div>
            </div>
          ))}
        </div>

        <div>
          <button
            onClick={handleCTA}
            disabled={!ws.bookable}
            style={{
              fontFamily: "'Noto Serif TC', serif",
              fontSize: 13, letterSpacing: '0.2em',
              padding: '13px 32px',
              background: !ws.bookable ? 'transparent' : (hov ? 'rgba(var(--gold-rgb),0.15)' : 'transparent'),
              border: !ws.bookable ? '1px dashed rgba(var(--text-rgb),0.2)' : '1px solid var(--gold)',
              color: !ws.bookable ? 'rgba(var(--text-rgb),0.4)' : 'var(--gold)',
              cursor: !ws.bookable ? 'default' : 'pointer',
              transition: 'all 0.3s ease',
            }}
          >
            {!ws.bookable ? '目前未開放預約' : (ws.isInquiry ? '聯繫我們 →' : '立即預約 →')}
          </button>
        </div>
      </div>
    </article>
  );
}

// ── Workshops Page ────────────────────────────────────────────────────────
function WorkshopsPage({ setPage, openReserve }) {
  return (
    <div style={{ minHeight: '100vh' }}>
      {/* Section header */}
      <div style={{ padding: 'clamp(40px, 5vw, 80px) clamp(20px, 5vw, 80px) clamp(24px, 3vw, 40px)' }}>
        <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.4em', color: 'var(--gold)', textTransform: 'uppercase', fontStyle: 'italic', marginBottom: 16, opacity: 0.85 }}>
            Sensory Workshop
          </div>
          <h2 style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 'clamp(28px, 4vw, 48px)', fontWeight: 300, color: 'var(--text-main)', letterSpacing: '0.18em', lineHeight: 1.3, marginBottom: 22 }}>
            調香體驗
          </h2>
          <div style={{ width: 36, height: 1, background: 'rgba(var(--gold-rgb),0.45)', margin: '0 auto 22px' }} />
          <p style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 14, color: 'var(--text-sub)', lineHeight: 2.1, letterSpacing: '0.08em' }}>
            香氣是最私密的語言。<br />
            在 Phinn-Phang 的香氛書房裡，我們陪你從聞、選、調、命名，<br className="workshop-br-desktop" />
            走完一瓶香水的誕生。
          </p>
        </div>
      </div>

      {/* Cards */}
      <div style={{ padding: '0 clamp(20px, 5vw, 80px)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(24px, 3vw, 40px)', maxWidth: 1180, margin: '0 auto' }}>
          {WORKSHOPS.map((ws, i) => <WorkshopCard key={ws.id} ws={ws} idx={i} />)}
        </div>
      </div>

      {/* Footer CTA */}
      <section style={{
        padding: 'clamp(80px, 10vw, 140px) clamp(20px, 5vw, 80px)',
        textAlign: 'center',
        borderTop: '1px solid var(--gold2)',
        marginTop: 'clamp(60px, 8vw, 120px)',
        background: 'rgba(0,0,0,0.06)',
      }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.35em', color: 'var(--gold)', opacity: 0.85, textTransform: 'uppercase', fontStyle: 'italic', marginBottom: 16 }}>
          Reserve Your Experience
        </div>
        <h2 style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 'clamp(24px, 3vw, 40px)', fontWeight: 300, color: 'var(--text-main)', letterSpacing: '0.15em', lineHeight: 1.4, marginBottom: 20 }}>
          找到適合你的課程了嗎？
        </h2>
        <p style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 14, color: 'var(--text-sub)', letterSpacing: '0.08em', lineHeight: 2, marginBottom: 36, maxWidth: 420, margin: '0 auto 36px' }}>
          每月限額開班，歡迎預約一場屬於你的香氣旅程。
        </p>
        <CTAButton gold onClick={() => openReserve?.()}>立即預約 →</CTAButton>
      </section>
    </div>
  );
}

window.WorkshopsPage = WorkshopsPage;