// Shared sample data + card components (v2 real brand colors)

const EBOOKS = [
  { id: 1, title: 'แค่หายใจก็ผิดแล้ว', sub: 'คู่มือเอาชีวิตรอดของลูกที่ต้องอยู่ในบ้าน Toxic', cat: 'จิตวิทยา', price: 390, old: 690, tag: 'ขายดี', cover: 'assets/ebooks/ebook-haiyai.png' },
  { id: 2, title: 'ทำไมถึงรักคนที่ไม่ดีกับเรา', sub: 'เข้าใจความสัมพันธ์ที่ทำร้ายหัวใจ และเยียวยาตัวเอง', cat: 'จิตวิทยา', price: 350, old: 590, tag: null, cover: 'assets/ebooks/ebook-tamai-rak.png' },
  { id: 3, title: 'เลิกใช้คำว่าที่รักกับคน Toxic', sub: null, cat: 'จิตวิทยา', price: 290, old: 490, tag: null, cover: 'assets/ebooks/ebook-lerk-rak.png' },
  { id: 4, title: 'รับมือคน(ชอบ)ประสาทแดก', sub: 'คู่มือเอาตัวรอดจากคน Toxic ไม่ให้ทำลายใจคุณ', cat: 'จิตวิทยา', price: 390, old: null, tag: 'ใหม่', cover: 'assets/ebooks/ebook-prasat.png' },
  { id: 5, title: 'รู้ทันนาซิซัส', sub: 'ไม่ตกเป็นเหยื่อ ไม่เสียเซลฟ์ ไม่เจ็บซ้ำซาก', cat: 'จิตวิทยา', price: 390, old: 650, tag: null, cover: 'assets/ebooks/ebook-narcissus.png' },
];

const COURSES = [
  { id: 1, title: 'Digital Product Mastery สำหรับ Solo Creator', cat: 'คอร์สออนไลน์', modules: 12, hours: '5 ชม.', price: 1890, old: 2890, tag: 'ขายดี', rating: 5, students: 1240 },
  { id: 2, title: 'AI Marketing for Solo Creator', cat: 'คอร์สออนไลน์', modules: 10, hours: '4 ชม.', price: 1490, old: null, tag: 'ใหม่', rating: 5, students: 680 },
  { id: 3, title: 'จิตวิทยาความสัมพันธ์ ฉบับ Deep Work', cat: 'คอร์สออนไลน์', modules: 8, hours: '3 ชม.', price: 1290, old: 1890, tag: null, rating: 4, students: 2100 },
];

const ARTICLES = [
  { id: 1, title: 'เริ่มขายสินค้าดิจิทัลชิ้นแรกใน 30 วัน ทำได้จริงไหม?', cat: 'Digital Product', read: '6 นาที', date: '2 มิ.ย. 2026' },
  { id: 2, title: '5 เครื่องมือ AI ที่ Solo Creator ควรรู้ในปี 2026', cat: 'Marketing + AI', read: '4 นาที', date: '28 พ.ค. 2026' },
  { id: 3, title: 'ทำไมคุณถึงยังไม่หาย ทั้งที่รู้ว่าต้องปล่อยวาง', cat: 'จิตวิทยา', read: '7 นาที', date: '21 พ.ค. 2026' },
];

function Price({ price, old, size = 22 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 8 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size, color: 'var(--fg1)' }}>฿{price.toLocaleString()}</span>
      {old && <span style={{ fontSize: size * 0.62, color: 'var(--fg3)', textDecoration: 'line-through' }}>฿{old.toLocaleString()}</span>}
    </span>
  );
}

const CAT_COLOR = {
  'Digital Product': 'var(--blue-600)',
  'Marketing + AI': '#D97706',
  'จิตวิทยา': '#6C3FC5',
  'คอร์สออนไลน์': 'var(--blue-600)',
};
const CAT_BG = {
  'Digital Product': 'var(--blue-50)',
  'Marketing + AI': '#FEF3C7',
  'จิตวิทยา': '#F0EAFF',
  'คอร์สออนไลน์': 'var(--blue-50)',
};

function CatBadge({ cat }) {
  return (
    <span style={{ fontSize: 11, fontWeight: 700, padding: '4px 10px', borderRadius: 999,
      background: CAT_BG[cat] || 'var(--gray-100)', color: CAT_COLOR[cat] || 'var(--fg2)',
      display: 'inline-flex', alignItems: 'center', lineHeight: 1 }}>{cat}</span>
  );
}

function CourseCard({ c, go }) {
  return (
    <a href="#" onClick={e => { e.preventDefault(); go && go('course'); }}
       className="card card-hover" style={{ overflow: 'hidden', display: 'block' }}>
      <div style={{ height: 130, background: 'linear-gradient(135deg,var(--dark-800),var(--dark-900))',
        position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {c.tag && <span className={'badge ' + (c.tag === 'ขายดี' ? 'badge-yellow' : 'badge-blue')}
          style={{ position: 'absolute', top: 12, left: 12 }}>{c.tag}</span>}
        <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'rgba(2,76,218,.25)',
          border: '2px solid rgba(2,76,218,.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="graduation-cap" size={24} color="var(--blue-300)" /></div>
      </div>
      <div style={{ padding: '16px 18px 18px' }}>
        <CatBadge cat={c.cat} />
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, margin: '8px 0 7px', lineHeight: 1.3, color: 'var(--fg1)' }}>{c.title}</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--fg3)', fontSize: 13 }}>
          <Stars value={c.rating} size={13} /><span>({c.students.toLocaleString()})</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="clock" size={14} />{c.hours}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
          <Price price={c.price} old={c.old} size={19} />
          <button className="btn btn-cta btn-sm" style={{ fontSize: 13 }}>ดูคอร์ส <span className="arr">→</span></button>
        </div>
      </div>
    </a>
  );
}

function ArticleCard({ a, go }) {
  return (
    <a href="#" onClick={e => { e.preventDefault(); go && go('article'); }}
       className="card card-hover" style={{ overflow: 'hidden', display: 'block' }}>
      <div className="photo blue" style={{ height: 140, borderRadius: 0 }}><Icon name="image" size={28} /></div>
      <div style={{ padding: '16px 18px 18px' }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
          <CatBadge cat={a.cat} />
          <span style={{ fontSize: 12, color: 'var(--fg3)' }}>{a.read}</span>
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, margin: 0, lineHeight: 1.4, color: 'var(--fg1)' }}>{a.title}</h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 12, color: 'var(--blue-600)', fontWeight: 600, fontSize: 14 }}>
          อ่านต่อ <span style={{ fontSize: 16 }}>→</span>
        </div>
      </div>
    </a>
  );
}

function EbookCard({ e, go }) {
  return (
    <a href="#" onClick={ev => { ev.preventDefault(); go && go('ebook'); }}
       className="card card-hover" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0', height: 200, position: 'relative' }}>
        {e.tag && <span className={'badge ' + (e.tag === 'ขายดี' ? 'badge-yellow' : 'badge-blue')}
          style={{ position: 'absolute', top: 12, left: 12, zIndex: 1 }}>{e.tag}</span>}
        <img src={e.cover} alt={e.title}
          style={{ height: 172, width: 'auto', maxWidth: '90%', objectFit: 'contain', boxShadow: '0 8px 24px rgba(0,0,0,.5)' }} />
      </div>
      <div style={{ padding: '14px 16px 18px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <CatBadge cat={e.cat} />
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, margin: '8px 0 4px', lineHeight: 1.35, color: 'var(--fg1)', flex: 1 }}>{e.title}</h3>
        {e.sub && <p style={{ fontSize: 13, color: 'var(--fg3)', margin: '0 0 10px', lineHeight: 1.5 }}>{e.sub}</p>}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--fg1)' }}>฿{e.price}</span>
          {e.old && <span style={{ fontSize: 12, color: 'var(--fg3)', textDecoration: 'line-through' }}>฿{e.old}</span>}
          <button className="btn btn-cta btn-sm" style={{ fontSize: 13 }}>ซื้อเลย <span className="arr">→</span></button>
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { EBOOKS, COURSES, ARTICLES, Price, CatBadge, CourseCard, ArticleCard, EbookCard, CAT_COLOR, CAT_BG });