// MyPTO Supportcenter — artikelkatalog (alla artiklar, sökbar)
const { useState: useStateD, useMemo: useMemoD } = React;
function hexD(hex, a) {
  const h = hex.replace('#', '');
  return `rgba(${parseInt(h.substring(0,2),16)},${parseInt(h.substring(2,4),16)},${parseInt(h.substring(4,6),16)},${a})`;
}
const dirGradient = `radial-gradient(ellipse at 90% -5%, rgba(160,200,29,0.08) 0%, transparent 50%), linear-gradient(180deg, #FAF7F0 0%, #F4EFE6 100%)`;

const DirNav = () => (
  <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, background: 'rgba(61,61,61,0.96)', backdropFilter: 'blur(12px)', borderBottom: '1px solid rgba(160,200,29,0.15)', height: 72, display: 'flex', alignItems: 'center', padding: '0 clamp(16px,4vw,40px)', justifyContent: 'space-between' }}>
    <a href="/support" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
      <img src="assets/logo-mark.png" style={{ width: 36, height: 36, objectFit: 'contain' }} alt="Private Training Online"/>
      <span style={{ fontFamily: F.heading, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'white', fontSize: 17, lineHeight: 1 }}>Support<span style={{ color: C.green }}>center</span></span>
    </a>
    <a href="/support" className="nav-back" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: F.heading, fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'rgba(255,255,255,0.82)', textDecoration: 'none' }}>
      <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Icon name="arrow" size={15} color="rgba(255,255,255,0.82)"/></span> Till start
    </a>
  </nav>
);

const Row = ({ a }) => (
  <a href={'/support/' + a.slug} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '13px 14px', borderRadius: 13, textDecoration: 'none', transition: 'all 0.15s', border: '1px solid transparent' }}
    onMouseEnter={e => { e.currentTarget.style.background = 'white'; e.currentTarget.style.borderColor = C.line; }}
    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'transparent'; }}>
    <span style={{ width: 38, height: 38, borderRadius: 11, background: C.sage, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={a.icon} size={18} color={C.greenDeep}/></span>
    <span style={{ flex: 1, minWidth: 0 }}>
      <span style={{ display: 'block', fontFamily: F.modern, fontSize: 15, fontWeight: 600, color: C.charcoal }}>{a.title}</span>
      <span style={{ display: 'block', fontFamily: F.body, fontSize: 12.5, color: C.mutedLight, marginTop: 1 }}>{a.read} läsning</span>
    </span>
    <Icon name="arrow" size={16} color={C.mutedLight}/>
  </a>
);

const DirFooter = () => (
  <footer style={{ background: C.dark, marginTop: 56, padding: '40px clamp(16px,4vw,40px) 26px' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
      <a href="/support" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
        <img src="assets/logo-mark.png" style={{ width: 30, height: 30, objectFit: 'contain' }} alt="PTO"/>
        <span style={{ fontFamily: F.heading, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'white', fontSize: 16 }}>Private Training Online</span>
      </a>
      <span style={{ fontFamily: F.heading, fontSize: 11.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'rgba(160,200,29,0.6)' }}>my.privatetrainingonline.se</span>
    </div>
  </footer>
);

const DirectoryApp = () => {
  const [q, setQ] = useStateD('');
  const all = window.PTO_ARTICLES;
  const ql = q.trim().toLowerCase();
  const match = (a) => !ql || a.title.toLowerCase().includes(ql) || a.desc.toLowerCase().includes(ql) || a.lead.toLowerCase().includes(ql);
  const total = all.length;
  return (
    <div style={{ minHeight: '100vh', background: dirGradient }}>
      <DirNav/>
      <main style={{ maxWidth: 1080, margin: '0 auto', padding: '104px clamp(16px,4vw,40px) 0' }}>
        <header style={{ marginBottom: 28 }}>
          <p style={{ fontFamily: F.modern, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.2em', color: C.mutedLight, margin: '0 0 10px' }}>Kunskapsbas</p>
          <h1 style={{ fontFamily: F.heading, fontSize: 'clamp(32px,4.6vw,50px)', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.01em', lineHeight: 1.02, color: C.charcoal, margin: '0 0 14px' }}>Alla artiklar</h1>
          <p style={{ fontFamily: F.body, fontSize: 17, lineHeight: 1.6, color: '#54524E', margin: '0 0 22px', maxWidth: 600 }}>{total} artiklar om medlemskap, träning, Trainerize, appen, hälsa, livsstil och shop — sök eller bläddra per kategori.</p>
          <div style={{ position: 'relative', maxWidth: 520 }}>
            <span style={{ position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)' }}><Icon name="search" size={19} color={C.mutedLight}/></span>
            <input value={q} onChange={e => setQ(e.target.value)} placeholder="Sök bland alla artiklar…" style={{ width: '100%', padding: '15px 18px 15px 50px', borderRadius: 9999, border: `1.5px solid ${C.line}`, fontFamily: F.body, fontSize: 15.5, color: C.charcoal, outline: 'none', background: 'white' }}
              onFocus={e => e.target.style.borderColor = hexD(C.green, 0.5)}
              onBlur={e => e.target.style.borderColor = C.line}/>
          </div>
        </header>

        {CATEGORY_ORDER.map(id => {
          const cm = CATEGORY_META[id];
          const items = window.articlesByCat(id).filter(match);
          if (!items.length) return null;
          return (
            <section key={id} style={{ marginBottom: 14 }}>
              <a href={'/support/' + id} style={{ display: 'flex', alignItems: 'center', gap: 11, margin: '26px 0 8px', textDecoration: 'none' }}>
                <span style={{ width: 30, height: 30, borderRadius: 9, background: hexD(C.green, 0.14), display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={cm.icon} size={16} color={C.greenDeep}/></span>
                <span style={{ fontFamily: F.heading, fontSize: 18, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.04em', color: C.charcoal }}>{cm.title}</span>
                <span style={{ fontFamily: F.body, fontSize: 13, color: C.mutedLight }}>{items.length}</span>
              </a>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(330px, 1fr))', gap: 2 }}>
                {items.map(a => <Row key={a.slug} a={a}/>)}
              </div>
            </section>
          );
        })}

        {ql && !all.some(match) && (
          <div style={{ padding: '40px 0', textAlign: 'center' }}>
            <p style={{ fontFamily: F.modern, fontSize: 16, fontWeight: 600, color: C.muted }}>Inga artiklar matchar "{q}".</p>
            <a href="/support?ai=1" style={{ fontFamily: F.heading, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: C.greenDeep, textDecoration: 'none' }}>Fråga assistenten →</a>
          </div>
        )}
      </main>
      <DirFooter/>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<DirectoryApp/>);