// HomePage.jsx
const { useState } = React;

const FAMILIES = [
  { nameZh: '木質調', nameEn: 'Woody', notes: '雪松・檀香・廣藿香', gradient: 'radial-gradient(ellipse at 40% 35%, #5C3A1A 0%, #2A1808 50%, #1A1210 100%)' },
  { nameZh: '東方調', nameEn: 'Oriental', notes: '烏木・龍涎香・香草', gradient: 'radial-gradient(ellipse at 40% 35%, #4A2A10 0%, #241408 50%, #1A1210 100%)' },
  { nameZh: '花香調', nameEn: 'Floral', notes: '茉莉・玫瑰・鈴蘭', gradient: 'radial-gradient(ellipse at 50% 30%, #5A2A28 0%, #2A1412 50%, #1A1210 100%)' },
  { nameZh: '柑橘調', nameEn: 'Citrus', notes: '佛手柑・柚子・萊姆', gradient: 'radial-gradient(ellipse at 50% 30%, #4A3818 0%, #251A08 50%, #1A1210 100%)' },
  { nameZh: '西普調', nameEn: 'Chypre', notes: '橡苔・岩薔薇・廣藿香', gradient: 'radial-gradient(ellipse at 40% 40%, #2A3A28 0%, #141E12 50%, #1A1210 100%)' },
  { nameZh: '馥奇調', nameEn: 'Fougère', notes: '薰衣草・香豆素・橡苔', gradient: 'radial-gradient(ellipse at 45% 35%, #2A2A4A 0%, #141420 50%, #1A1210 100%)' },
];

const CREATORS = [
  { id: 1, nameZh: '林晞', nameEn: 'Hsi Lin', tags: ['木質調', '煙燻'], quote: '在每一款香裡,我試著留下那個下午。', works: 7, gradient: 'radial-gradient(ellipse at 50% 30%, #4A3018 0%, #1E140A 80%)' },
  { id: 2, nameZh: '陳珮如', nameEn: 'Pei-Ju Chen', tags: ['東方調', '花香'], quote: '香氣是我的日記,只是不用文字。', works: 5, gradient: 'radial-gradient(ellipse at 50% 30%, #3A2020 0%, #1A1010 80%)' },
  { id: 3, nameZh: '吳宇哲', nameEn: 'Yu-Che Wu', tags: ['東方調', '辛香'], quote: '東方香料是我的母語。', works: 9, gradient: 'radial-gradient(ellipse at 50% 30%, #2A2A18 0%, #121208 80%)' },
];

function HeroSection({ setPage, tweaks, openReserve }) {
  const isLight = tweaks?.theme === 'system' 
    ? !window.matchMedia('(prefers-color-scheme: dark)').matches
    : tweaks?.theme === 'light';
  return (
    <section style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden', background: 'var(--hero-bg)', transition: 'background 0.4s ease' }}>
      {/* Warm orb */}
      <div style={{ position: 'absolute', width: '45vw', height: '45vw', borderRadius: '50%', background: isLight ? 'radial-gradient(circle, rgba(166,124,74,0.06) 0%, transparent 70%)' : 'radial-gradient(circle, rgba(190,110,30,0.1) 0%, transparent 70%)', top: '18%', left: '50%', transform: 'translateX(-50%)', pointerEvents: 'none', opacity: isLight ? 0.4 : 1 }} />
      <div style={{ position: 'absolute', width: '20vw', height: '20vw', borderRadius: '50%', background: 'radial-gradient(circle, var(--gold3) 0%, transparent 70%)', top: '30%', left: '40%', pointerEvents: 'none' }} />

      <div style={{ textAlign: 'center', zIndex: 1, maxWidth: 680, padding: 'clamp(80px, 10vw, 120px) clamp(20px, 5vw, 80px) clamp(40px, 6vw, 80px)', animation: 'fadeUp 1s ease both' }}>
        <img src={isLight ? "uploads/logo_light.png" : "uploads/logo_dark.png"} alt="Phinn-Phang scent lab" style={{ height: 'clamp(60px, 10vw, 110px)', width: 'auto', marginBottom: 32, filter: isLight ? 'none' : 'drop-shadow(0 0 40px rgba(200,130,60,0.2))', transition: '0.3s' }} />
        <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 14, letterSpacing: '3.5px', color: 'var(--text-main)', marginBottom: 44 }}>
          來自台語的「聞香」<br />同時也有湊湊熱鬧的意思
        </div>

        <div style={{ width: 36, height: 1, background: 'rgba(var(--gold-rgb),0.4)', margin: '0 auto 36px' }} />

        <p style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 14, fontWeight: 300, color: 'var(--text-sub)', lineHeight: 2.1, letterSpacing: '0.06em', maxWidth: 460, margin: '0 auto 52px', height: 0, overflow: 'hidden' }}>
        </p>

        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <CTAButton gold onClick={() => setPage('product')}>探索香氣作品</CTAButton>
          <CTAButton onClick={() => openReserve?.()}>預約體驗課程</CTAButton>
        </div>
      </div>

      {/* Scroll hint */}
      <div style={{ position: 'absolute', bottom: 36, left: 'calc(50% - 20px)', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, opacity: 0.6, animation: 'float 3s ease-in-out infinite' }}>
        <div style={{ fontFamily: 'monospace', fontSize: 9, letterSpacing: '0.25em', color: 'var(--gold)' }}>scroll</div>
        <div style={{ width: 1, height: 44, background: 'linear-gradient(to bottom, var(--gold), transparent)' }} />
      </div>
    </section>
  );
}

function PrescriptionCard({ item, setPage }) {
  const [hov, setHov] = useState(false);
  const isDynamic = !!item.id && typeof item.id === 'string' && item.id.length > 5;
  const handleClick = () => {
    if (item.isDemo) {
      setPage('product');
    } else if (isDynamic) {
      window.location.href = `work.html?id=${item.id}`;
    } else {
      setPage('product');
    }
  };
  return (
    <div onMouseOver={() => setHov(true)} onMouseOut={() => setHov(false)} onClick={handleClick}
      style={{ minWidth: 260, maxWidth: 290, flexShrink: 0, background: hov ? 'var(--card-hov-bg)' : 'var(--card-bg)', border: `1px solid ${hov ? 'rgba(var(--gold-rgb),0.4)' : 'var(--gold2)'}`, padding: '28px 30px', cursor: 'pointer', transition: 'all 0.35s ease', boxShadow: hov ? '0 8px 40px rgba(0,0,0,0.2), 0 0 40px rgba(var(--gold-rgb),0.18)' : '0 4px 20px rgba(0,0,0,0.1)' }}>
      {/* Rx header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, fontStyle: 'italic', color: 'var(--coral)', letterSpacing: '0.05em' }}>℞</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 9, letterSpacing: '0.25em', color: 'rgba(var(--gold-rgb),0.45)', textTransform: 'uppercase' }}>Phinn-Phang</div>
      </div>

      <div style={{ borderTop: '1px dashed rgba(var(--gold-rgb),0.2)', marginBottom: 18 }} />

      <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 22, fontWeight: 400, color: 'var(--text-main)', letterSpacing: '0.1em', marginBottom: 4 }}>{item.nameZh}</div>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 12, fontStyle: 'italic', color: 'var(--gold)', fontWeight: 500, letterSpacing: '0.1em', marginBottom: 22 }}>{item.nameEn}</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 7, marginBottom: 24 }}>
        {item.notes.map(n => (
          <div key={n} style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 13, color: 'var(--text-sub)', letterSpacing: '0.05em', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'rgba(var(--gold-rgb),0.5)', flexShrink: 0, display: 'inline-block' }} />
            {n}
          </div>
        ))}
      </div>

      <div style={{ borderTop: '1px dashed var(--gold2)', paddingTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 11, color: 'var(--text-mute)', letterSpacing: '0.05em' }}>
          {item.type} · {item.vol}ml
        </div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, color: 'var(--gold)', letterSpacing: '0.05em' }}>
          NT${item.price.toLocaleString()}
        </div>
      </div>
    </div>
  );
}

function PrescriptionsSection({ setPage }) {
  const demo = PP.getDemoWorks();
  const real = PP.getPublishedWorks();
  const items = [...real, ...demo].slice(0, 6).map(w => ({
    id: w.id, nameZh: w.workName, nameEn: w.studentName,
    type: w.productType, family: '學員配方',
    notes: (w.formula || []).slice(0, 3).map(f => `${f.name}${f.nameEn ? ' ' + f.nameEn : ''}`),
    price: w.price || 1280, vol: w.vol || 30,
    isDemo: w.isDemo,
  }));
  return (
    <section style={{ padding: 'clamp(100px, 12vw, 160px) 0', position: 'relative' }}>
      <div style={{ padding: '0 clamp(20px, 5vw, 80px)', marginBottom: 48 }}>
        <SectionTitle zh="本月香氣處方箋" en="Monthly Fragrance Prescriptions" center />
      </div>
      <div style={{ display: 'flex', gap: 24, overflowX: 'clip', overflowY: 'visible', padding: 'clamp(32px, 5vw, 56px) clamp(20px, 5vw, 80px) clamp(48px, 6vw, 64px)', scrollbarWidth: 'none', justifyContent: 'center' }}>
        {items.map(item => <PrescriptionCard key={item.id} item={item} setPage={setPage} />)}
      </div>
    </section>
  );
}

function FamilyCard({ fam }) {
  const [hov, setHov] = useState(false);
  return (
    <div onMouseOver={() => setHov(true)} onMouseOut={() => setHov(false)}
      style={{ aspectRatio: '4/5', background: fam.gradient, position: 'relative', overflow: 'hidden', cursor: 'pointer', border: `1px solid ${hov ? 'rgba(var(--gold-rgb),0.4)' : 'rgba(var(--gold-rgb),0.1)'}`, transition: 'all 0.4s ease', transform: hov ? 'scale(1.02)' : 'scale(1)', boxShadow: hov ? '0 12px 40px rgba(0,0,0,0.6), 0 0 40px rgba(var(--gold-rgb),0.07)' : 'none' }}>
      {/* Warm glow */}
      <div style={{ position: 'absolute', inset: 0, background: hov ? 'radial-gradient(ellipse at 50% 40%, rgba(var(--gold-rgb),0.08) 0%, transparent 65%)' : 'none', transition: 'all 0.4s' }} />
      {/* Label */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '40px 20px 22px', background: 'linear-gradient(to top, rgba(20,12,6,0.9) 0%, transparent 100%)' }}>
        <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 18, fontWeight: 400, letterSpacing: '0.15em', color: 'var(--text-main)', marginBottom: 4 }}>{fam.nameZh}</div>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, fontStyle: 'italic', letterSpacing: '0.2em', color: 'rgba(var(--gold-rgb),0.7)', marginBottom: 8 }}>{fam.nameEn}</div>
        <div style={{ fontFamily: "'Lato', sans-serif", fontSize: 11, color: 'var(--text-mute)', letterSpacing: '0.08em' }}>{fam.notes}</div>
      </div>
      {/* Placeholder label */}
      <div style={{ position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)', fontFamily: 'monospace', fontSize: 9, color: 'rgba(var(--gold-rgb),0.22)', letterSpacing: '0.12em', textAlign: 'center', whiteSpace: 'nowrap' }}>
        // 香材情境照 //
      </div>
    </div>
  );
}

function FamiliesSection() {
  return (
    <section style={{ padding: 'clamp(64px, 8vw, 120px) clamp(20px, 5vw, 80px)', background: 'rgba(0,0,0,0.2)' }}>
      <SectionTitle zh="依香調家族探索" en="Explore by Fragrance Family" />
      <div className="rwd-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {FAMILIES.map(f => <FamilyCard key={f.nameZh} fam={f} />)}
      </div>
    </section>
  );
}

function CreatorCard({ c }) {
  const [hov, setHov] = useState(false);
  return (
    <div onMouseOver={() => setHov(true)} onMouseOut={() => setHov(false)}
      style={{ flex: 1, minWidth: 220, padding: '36px 28px', background: hov ? 'var(--card-bg)' : 'transparent', border: `1px solid ${hov ? 'rgba(var(--gold-rgb),0.3)' : 'rgba(var(--text-rgb),0.08)'}`, transition: 'all 0.35s', textAlign: 'center', cursor: 'pointer' }}>
      {/* Portrait placeholder */}
      <div style={{ width: 88, height: 88, borderRadius: '50%', background: c.gradient, margin: '0 auto 20px', border: '1px solid rgba(var(--gold-rgb),0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ fontFamily: 'monospace', fontSize: 9, color: 'rgba(var(--gold-rgb),0.3)', letterSpacing: '0.1em' }}>肖像</div>
      </div>
      <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 18, fontWeight: 400, letterSpacing: '0.15em', color: 'var(--text-main)', marginBottom: 3 }}>{c.nameZh}</div>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, fontStyle: 'italic', letterSpacing: '0.2em', color: 'var(--gold)', fontWeight: 500, marginBottom: 14 }}>{c.nameEn}</div>
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginBottom: 18, flexWrap: 'wrap' }}>
        {c.tags.map(t => <Tag key={t} variant="gold">{t}</Tag>)}
      </div>
      <p style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 13, fontStyle: 'italic', color: 'var(--text-sub)', lineHeight: 1.9, letterSpacing: '0.05em' }}>「{c.quote}」</p>
      <div style={{ marginTop: 18, fontFamily: 'monospace', fontSize: 10, color: 'rgba(var(--gold-rgb),0.35)', letterSpacing: '0.1em' }}>{c.works} 件作品</div>
    </div>
  );
}

function CreatorsSection() {
  return (
    <section style={{ padding: 'clamp(64px, 8vw, 120px) clamp(20px, 5vw, 80px)' }}>
      <SectionTitle zh="遇見創作者" en="Meet the Creators" center />
      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        {CREATORS.map(c => <CreatorCard key={c.id} c={c} />)}
      </div>
    </section>
  );
}

// ── Intro CTA Section (lightweight bridge to WorkshopsPage) ──────────────
function IntroCTASection({ setPage }) {
  const isLight = useIsLight();
  const overlayTop    = isLight ? 'rgba(252,249,245,0.55)' : 'rgba(20,14,10,0.55)';
  const overlayBottom = isLight ? 'rgba(252,249,245,0.45)' : 'rgba(20,14,10,0.65)';
  const bgImg = isLight ? 'uploads/hero-workshop.jpg' : 'uploads/hero-workshop-dark.jpg';
  return (
    <section style={{
      padding: 'clamp(100px, 12vw, 160px) clamp(20px, 5vw, 80px)',
      textAlign: 'center',
      borderTop: '1px solid var(--gold2)',
      borderBottom: '1px solid var(--gold2)',
      backgroundImage: `linear-gradient(${overlayTop}, ${overlayBottom}), url(${bgImg})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      position: 'relative',
      overflow: 'hidden',
      transition: 'background-image 0.4s ease',
    }}>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.35em', color: 'var(--gold)', opacity: 0.85, textTransform: 'uppercase', fontStyle: 'italic', marginBottom: 14 }}>
          Sensory Workshop
        </div>
        <h2 style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 'clamp(22px, 3vw, 32px)', fontWeight: 300, color: 'var(--text-main)', letterSpacing: '0.18em', lineHeight: 1.5, marginBottom: 24 }}>
          三種體驗，一場屬於你的香氣旅程
        </h2>
        <CTAButton gold onClick={() => setPage('workshops')}>了解課程 →</CTAButton>
      </div>
    </section>
  );
}

function FooterCTA({ tweaks, openReserve }) {
  const isLight = tweaks?.theme === 'system' 
    ? !window.matchMedia('(prefers-color-scheme: dark)').matches
    : tweaks?.theme === 'light';
  return (
    <section style={{ padding: 'clamp(100px, 12vw, 160px) clamp(20px, 5vw, 80px)', textAlign: 'center', position: 'relative', borderTop: '1px solid var(--gold2)', background: isLight ? 'radial-gradient(ellipse at 50% 80%, rgba(232,181,160,0.15) 0%, transparent 70%)' : 'radial-gradient(ellipse at 50% 80%, rgba(61,46,32,0.4) 0%, transparent 70%)', transition: 'background 0.4s ease' }}>
      <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 11, letterSpacing: '0.35em', color: 'var(--gold)', opacity: 0.85, textTransform: 'uppercase', fontStyle: 'italic', marginBottom: 16 }}>Experience the Craft</div>
      <h2 style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 'clamp(28px, 4vw, 52px)', 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: 44, maxWidth: 400, margin: '0 auto 44px' }}>
        每月限額開班。在 Phinn-Phang 的香氣書房裡,<br />
        你將親手調製屬於自己的第一瓶香水。
      </p>
      <CTAButton gold onClick={() => openReserve?.()}>了解課程內容</CTAButton>

      <div style={{ marginTop: 80, paddingTop: 40, borderTop: '1px solid rgba(var(--text-rgb),0.06)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ fontFamily: "'Noto Serif TC', serif", fontSize: 14, letterSpacing: '0.2em', color: 'var(--text-mute)', marginBottom: 4 }}>聞香</div>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 10, letterSpacing: '0.3em', fontStyle: 'italic', color: 'var(--gold)', opacity: 0.8 }}>Phinn-Phang · 調香體驗教室</div>
        </div>
        <div style={{ fontFamily: 'monospace', fontSize: 10, color: 'rgba(var(--text-rgb),0.2)', letterSpacing: '0.1em' }}>
          © 2026 Phinn-Phang. All rights reserved.
        </div>
      </div>
    </section>
  );
}

function HomePage({ setPage, tweaks, openReserve }) {
  return (
    <div>
      <HeroSection setPage={setPage} tweaks={tweaks} openReserve={openReserve} />
      <IntroCTASection setPage={setPage} />
      {PP.FEATURES.prescriptionsEnabled && <PrescriptionsSection setPage={setPage} />}
      {/* <FamiliesSection /> */}
      {/* <CreatorsSection /> */}
      <FooterCTA tweaks={tweaks} openReserve={openReserve} />
    </div>
  );
}

Object.assign(window, { HomePage });