function EbookSales({ go }) {
  const [faq, setFaq] = React.useState(-1);
  const [active, setActive] = React.useState(0);

  const books = EBOOKS;
  const eb = books[active];

  const inside = [
    'เข้าใจรูปแบบครอบครัว Toxic ที่ทำร้ายคุณโดยไม่ต้องใช้คำพูด',
    'รับมือกับการบงการ การควบคุม และความรู้สึกผิด',
    'หลุดพ้นจากวังวนเดิม ๆ และสร้างขอบเขตเพื่อปกป้องตัวเอง',
    'เยียวยาหัวใจที่บอบช้ำ และใช้ชีวิตในแบบที่คุณสมควรได้รับ',
  ];
  const faqs = [
    { q: 'เหมาะกับคนที่ไม่เคยอ่าน E-book ด้านจิตวิทยาไหม?', a: 'เหมาะมาก เขียนด้วยภาษาเข้าใจง่าย ไม่ต้องมีพื้นฐาน อ่านจบแล้วนำไปใช้ได้ทันที' },
    { q: 'ได้รับไฟล์ในรูปแบบไหน?', a: 'PDF อ่านได้ทุกอุปกรณ์ ดาวน์โหลดได้ทันทีหลังชำระเงิน' },
    { q: 'ถ้าไม่พอใจขอเงินคืนได้ไหม?', a: 'รับประกันคืนเงิน 14 วัน ไม่มีเงื่อนไขซับซ้อน' },
  ];

  return (
    <div className="screen">
      {/* HERO */}
      <section style={{ background: '#0D0D0D', borderBottom: '1px solid #222' }}>
        <div className="wrap r-split" style={{ display: 'grid', gridTemplateColumns: '1fr .7fr', gap: 56, alignItems: 'center', padding: '64px 28px 72px' }}>
          <div>
            <span className="badge badge-yellow" style={{ marginBottom: 18 }}>E-BOOK จิตวิทยา · ขายดีที่สุด</span>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-h1)', lineHeight: 1.1, letterSpacing: '-.025em', margin: '0 0 18px', color: '#fff' }}>
              {eb.title}
            </h1>
            {eb.sub && <p style={{ fontSize: 18, lineHeight: 1.75, color: 'rgba(255,255,255,.65)', margin: '0 0 22px', maxWidth: 440 }}>{eb.sub}</p>}
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 22, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, color: '#fff' }}>฿{eb.price}</span>
              {eb.old && <span style={{ fontSize: 18, color: 'rgba(255,255,255,.4)', textDecoration: 'line-through' }}>฿{eb.old}</span>}
              <span className="badge badge-red">ประหยัด ฿{eb.old ? eb.old - eb.price : ''}</span>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-cta btn-lg">ซื้อเลย ฿{eb.price} <span className="arr">→</span></button>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Stars value={5} size={16} /><span style={{ fontSize: 14, color: 'rgba(255,255,255,.55)' }}>4.9 · 820 รีวิว</span>
              </span>
            </div>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,.4)', marginTop: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
              <Icon name="shield-check" size={15} color="#1A9E62" />รับประกันคืนเงินภายใน 14 วัน · ดาวน์โหลดได้ทันที
            </p>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <img src={eb.cover} alt={eb.title}
              style={{ maxHeight: 380, maxWidth: '100%', objectFit: 'contain', borderRadius: 10, boxShadow: '0 20px 60px rgba(0,0,0,.7)' }} />
          </div>
        </div>
      </section>

      {/* BOOK PICKER */}
      <section style={{ background: '#181818', borderBottom: '1px solid #2A2A2A', overflowX: 'auto' }}>
        <div className="wrap" style={{ display: 'flex', gap: 16, padding: '20px 28px', alignItems: 'center' }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,.4)', whiteSpace: 'nowrap', flexShrink: 0 }}>E-book ทั้งหมด</span>
          {books.map((b, i) => (
            <button key={b.id} onClick={() => setActive(i)}
              style={{ flexShrink: 0, background: active === i ? 'rgba(245,197,24,.12)' : 'transparent',
                border: active === i ? '1.5px solid var(--yellow-500)' : '1.5px solid rgba(255,255,255,.12)',
                borderRadius: 10, padding: '6px 8px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
              <img src={b.cover} alt={b.title} style={{ height: 48, width: 'auto', borderRadius: 4, objectFit: 'contain' }} />
              <span style={{ fontSize: 13, fontWeight: 600, color: active === i ? 'var(--yellow-400)' : 'rgba(255,255,255,.55)',
                maxWidth: 120, textAlign: 'left', lineHeight: 1.3 }}>{b.title}</span>
            </button>
          ))}
        </div>
      </section>

      {/* WHAT'S INSIDE */}
      <section className="section">
        <div className="wrap r-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <span className="eyebrow">ภายในเล่ม</span>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h2)', letterSpacing: '-.02em', margin: '12px 0 24px', color: 'var(--fg1)' }}>คุณจะได้อะไรจากเล่มนี้</h2>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {inside.map(i => (
                <li key={i} style={{ display: 'flex', gap: 14, fontSize: 16, lineHeight: 1.65, color: 'var(--fg1)' }}>
                  <span style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--yellow-500)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', marginTop: 1 }}>
                    <Icon name="check" size={16} color="var(--dark-900)" stroke={3} /></span>{i}
                </li>
              ))}
            </ul>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <img src={eb.cover} alt={eb.title}
              style={{ maxHeight: 340, width: 'auto', objectFit: 'contain', borderRadius: 10, boxShadow: 'var(--shadow-xl)' }} />
          </div>
        </div>
      </section>

      {/* ALL EBOOKS GRID */}
      <section className="section" style={{ background: 'var(--gray-50)', paddingTop: 68, paddingBottom: 76 }}>
        <div className="wrap center" style={{ maxWidth: 600, marginBottom: 44 }}>
          <span className="eyebrow">E-book อื่นๆ จาก Solo Lab</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h2)', letterSpacing: '-.02em', margin: '12px 0 0', color: 'var(--fg1)' }}>สะสมครบทั้ง Series</h2>
        </div>
        <div className="wrap r-ebooks" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 18 }}>
          {books.map((b, i) => (
            <button key={b.id} onClick={() => { setActive(i); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, textAlign: 'left' }}>
              <div className="card card-hover" style={{ overflow: 'hidden' }}>
                <div style={{ background: '#111', padding: '14px 10px', display: 'flex', justifyContent: 'center', height: 180 }}>
                  <img src={b.cover} alt={b.title}
                    style={{ height: '100%', width: 'auto', objectFit: 'contain', boxShadow: '0 6px 20px rgba(0,0,0,.5)' }} />
                </div>
                <div style={{ padding: '12px 14px' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--fg1)', lineHeight: 1.3, marginBottom: 6 }}>{b.title}</div>
                  <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--blue-600)' }}>฿{b.price}</div>
                </div>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* PRICING CTA */}
      <section className="section">
        <div className="wrap-narrow">
          <div className="card" style={{ padding: 0, overflow: 'hidden', border: '2px solid #04101F' }}>
            <div style={{ background: 'var(--dark-900)', color: '#fff', padding: '12px', textAlign: 'center', fontSize: 13, fontWeight: 600 }}>ข้อเสนอพิเศษ · เหลือเวลาจำกัด</div>
            <div style={{ padding: '40px', textAlign: 'center' }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, margin: '0 0 6px', color: 'var(--fg1)' }}>{eb.title}</h3>
              <p style={{ fontSize: 15, color: 'var(--fg2)', margin: '0 0 22px' }}>จ่ายครั้งเดียว เข้าถึงตลอดชีพ ดาวน์โหลดได้ทันที</p>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 12, marginBottom: 24 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, color: 'var(--fg1)' }}>฿{eb.price}</span>
                {eb.old && <span style={{ fontSize: 22, color: 'var(--fg3)', textDecoration: 'line-through' }}>฿{eb.old}</span>}
              </div>
              <button className="btn btn-cta btn-lg" style={{ minWidth: 240 }}>ซื้อเลย <span className="arr">→</span></button>
              <div style={{ display: 'flex', justifyContent: 'center', gap: 20, marginTop: 20, flexWrap: 'wrap', fontSize: 13, color: 'var(--fg3)' }}>
                {[['lock','ชำระปลอดภัย'],['download','ดาวน์โหลดทันที'],['shield-check','คืนเงิน 14 วัน']].map(([ic,t]) => (
                  <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name={ic} size={14} />{t}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section-sm" style={{ paddingBottom: 80 }}>
        <div className="wrap-narrow">
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-h3)', textAlign: 'center', margin: '0 0 26px', color: 'var(--fg1)' }}>คำถามที่พบบ่อย</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {faqs.map((f,i) => (
              <div key={i} className="card">
                <button onClick={() => setFaq(faq === i ? -1 : i)} style={{ width: '100%', background: 'none', border: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14, padding: '15px 18px', textAlign: 'left' }}>
                  <span style={{ fontWeight: 600, fontSize: 15, color: 'var(--fg1)', flex: 1 }}>{f.q}</span>
                  <Icon name={faq === i ? 'minus' : 'plus'} size={19} color="var(--blue-600)" />
                </button>
                {faq === i && <p style={{ margin: 0, padding: '0 18px 16px', fontSize: 15, lineHeight: 1.75, color: 'var(--fg2)' }}>{f.a}</p>}
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
window.EbookSales = EbookSales;