// Shared chrome: top nav, footer, and small reusable pieces.

function Logo({ onClick, light }) {
  return (
    <a href="#" onClick={(e) => { e.preventDefault(); onClick && onClick(); }}
       style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
      <img
        src="assets/logo.png"
        alt="Solo Lab"
        style={{
          height: 44,
          width: 'auto',
          filter: light ? 'brightness(0) invert(1)' : 'none',
        }}
      />
    </a>
  );
}

const NAV = [
  { id: 'home',    label: 'หน้าแรก' },
  { id: 'course',  label: 'คอร์สเรียน' },
  { id: 'ebook',   label: 'E-book' },
  { id: 'article', label: 'บทความ' },
];

function Nav({ screen, go }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const navTo = (id) => { setMenuOpen(false); go(id); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: (scrolled || menuOpen) ? 'rgba(255,255,255,.95)' : '#fff',
      backdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      borderBottom: '1px solid ' + ((scrolled || menuOpen) ? 'var(--border)' : 'transparent'),
      transition: 'all var(--dur-base) var(--ease-out)',
    }}>
      <div className="wrap" style={{ height: 72, display: 'flex', alignItems: 'center', gap: 6 }}>
        <Logo onClick={() => navTo('home')} />
        <nav className="nav-links" style={{ display: 'flex', gap: 2, marginLeft: 12 }}>
          {NAV.map(n => (
            <a key={n.id} href="#" onClick={e => { e.preventDefault(); navTo(n.id); }}
              style={{
                fontSize: 15, fontWeight: 500, padding: '8px 14px', borderRadius: 8,
                color: screen === n.id ? 'var(--blue-600)' : 'var(--fg2)',
                background: screen === n.id ? 'var(--blue-50)' : 'transparent',
              }}>{n.label}</a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="#" onClick={e => e.preventDefault()} className="login-link"
             style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg2)', padding: '0 4px' }}>
            เข้าสู่ระบบ
          </a>
          <button className="btn btn-cta btn-sm desktop-cta" onClick={() => navTo('course')}>
            เริ่มเลย <span className="arr">→</span>
          </button>
          <button className="nav-toggle" aria-label="เมนู" onClick={() => setMenuOpen(o => !o)}>
            <Icon name={menuOpen ? 'x' : 'menu'} size={26} />
          </button>
        </div>
      </div>

      {/* mobile dropdown menu */}
      <div className="mobile-menu" data-open={menuOpen ? '1' : '0'}>
        {NAV.map(n => (
          <a key={n.id} href="#" className={screen === n.id ? 'active' : ''}
            onClick={e => { e.preventDefault(); navTo(n.id); }}>{n.label}</a>
        ))}
        <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
          <button className="btn btn-secondary btn-block btn-sm" onClick={() => setMenuOpen(false)}>เข้าสู่ระบบ</button>
          <button className="btn btn-cta btn-block btn-sm" onClick={() => navTo('course')}>เริ่มเลย <span className="arr">→</span></button>
        </div>
      </div>
    </header>
  );
}

function Footer({ go }) {
  const cols = [
    { h: 'เรียนรู้', items: ['คอร์สทั้งหมด', 'E-book', 'บทความ', 'แบบทดสอบ'] },
    { h: 'Solo Lab', items: ['เกี่ยวกับ', 'รีวิวจากผู้เรียน', 'ร่วมงานกับเรา', 'ติดต่อ / LINE OA'] },
    { h: 'ช่วยเหลือ', items: ['คำถามที่พบบ่อย', 'เงื่อนไขการใช้งาน', 'นโยบายความเป็นส่วนตัว'] },
  ];
  return (
    <footer style={{ background: 'var(--dark-900)', color: '#fff', paddingTop: 64 }}>
      <div className="wrap r-footer" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, paddingBottom: 48 }}>
        <div>
          <Logo onClick={() => go('home')} light />
          <p style={{ color: 'rgba(255,255,255,.55)', fontSize: 14, lineHeight: 1.75, marginTop: 18, maxWidth: 280 }}>
            แพลตฟอร์มสอน Digital Product ด้วยจิตวิทยา + Marketing + AI สำหรับ Content Creator และฟรีแลนซ์
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            {['youtube', 'facebook', 'tiktok'].map(s => (
              <span key={s} style={{ width: 38, height: 38, borderRadius: 10,
                background: 'rgba(255,255,255,.1)', display: 'flex', alignItems: 'center',
                justifyContent: 'center', color: 'rgba(255,255,255,.7)', fontSize: 16 }}>
                <Icon name={s === 'tiktok' ? 'music' : s === 'facebook' ? 'users' : 'play-circle'} size={18} />
              </span>
            ))}
          </div>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <div style={{ fontWeight: 700, fontFamily: 'var(--font-display)', marginBottom: 14, fontSize: 15 }}>{c.h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map(i => (
                <li key={i}><a href="#" onClick={e => e.preventDefault()}
                  style={{ color: 'rgba(255,255,255,.55)', fontSize: 14 }}>{i}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,.08)' }}>
        <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '20px 28px', fontSize: 13, color: 'rgba(255,255,255,.35)' }}>
          <span>© 2026 Solo Lab by ภาณุพันธ์ เพียสุระ · สงวนลิขสิทธิ์</span>
          <span>สร้างที่กรุงเทพฯ 🇹🇭</span>
        </div>
      </div>
    </footer>
  );
}

function Stars({ value = 5, size = 15 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1 }}>
      {[1,2,3,4,5].map(i => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24"
          fill={i <= value ? 'var(--yellow-500)' : 'none'}
          stroke="var(--yellow-600)" strokeWidth="1.5">
          <polygon points="12 2 15 9 22 9.5 17 14.5 18.5 21.5 12 17.8 5.5 21.5 7 14.5 2 9.5 9 9" />
        </svg>
      ))}
    </span>
  );
}

function ProfileAvatar({ size = 56 }) {
  return (
    <img src="assets/profile-photo.png" alt="ภาณุพันธ์ เพียสุระ"
      style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover',
        objectPosition: 'center top', flexShrink: 0 }} />
  );
}

function BookCover({ title, subtitle, w = 200, h = 280 }) {
  return (
    <div className="book" style={{ width: w, height: h, padding: '22px 18px 18px 26px' }}>
      <span className="spineline" />
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.16em', color: 'var(--blue-300)' }}>E-BOOK</div>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: Math.round(w*0.12), lineHeight: 1.2, color: '#fff' }}>{title}</div>
        {subtitle && <div style={{ fontSize: 13, color: 'rgba(255,255,255,.6)', marginTop: 8, lineHeight: 1.5 }}>{subtitle}</div>}
        <div style={{ width: 40, height: 4, background: 'var(--yellow-500)', borderRadius: 2, marginTop: 14 }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'rgba(255,255,255,.5)' }}>
        <img src="assets/logo.png" style={{ height: 18, width: 'auto', filter: 'brightness(0) invert(1)', opacity: .7 }} alt="" />
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Nav, Footer, Stars, ProfileAvatar, BookCover, NAV });