// MyPTO Supportcenter — kategorisida (listar artiklar i en kategori)
const { useState: useStateC } = React;
function hexC(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 catGradient = `radial-gradient(ellipse at 90% -5%, rgba(160,200,29,0.08) 0%, transparent 50%), linear-gradient(180deg, #FAF7F0 0%, #F4EFE6 100%)`;

function resolveCat() {
  if (window.__CATEGORY_ID) return window.__CATEGORY_ID;
  const p = new URLSearchParams(window.location.search);
  return p.get('cat') || CATEGORY_ORDER[0];
}

const CatNav = () => (
  <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/artiklar" 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> Alla artiklar
    </a>
  </nav>
);

const ArticleCard = ({ a }) => (
  <a href={'/support/' + a.slug} style={{ display: 'flex', gap: 16, padding: 22, borderRadius: 22, background: 'white', border: `1px solid ${C.line}`, textDecoration: 'none', transition: 'all 0.2s', alignItems: 'flex-start' }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 18px 40px rgba(61,61,61,0.1)'; e.currentTarget.style.borderColor = hexC(C.green, 0.4); }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = C.line; }}>
    <div style={{ width: 46, height: 46, borderRadius: 13, background: C.sage, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={a.icon} size={22} color={C.greenDeep}/></div>
    <div style={{ minWidth: 0 }}>
      <p style={{ fontFamily: F.modern, fontSize: 16.5, fontWeight: 700, color: C.charcoal, margin: '0 0 6px', lineHeight: 1.3 }}>{a.title}</p>
      <p style={{ fontFamily: F.body, fontSize: 13.5, color: C.muted, margin: '0 0 10px', lineHeight: 1.55 }}>{a.lead.length > 96 ? a.lead.slice(0, 96).trim() + '…' : a.lead}</p>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: F.body, fontSize: 12, color: C.mutedLight }}><Icon name="timer" size={13} color={C.mutedLight}/> {a.read} läsning</span>
    </div>
  </a>
);

const OtherCategories = ({ current }) => (
  <section style={{ marginTop: 52 }}>
    <p style={{ fontFamily: F.modern, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.2em', color: C.mutedLight, margin: '0 0 14px' }}>Fler kategorier</p>
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
      {CATEGORY_ORDER.filter(id => id !== current).map(id => {
        const cm = CATEGORY_META[id];
        return (
          <a key={id} href={'/support/' + id} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '10px 16px', borderRadius: 9999, background: 'white', border: `1px solid ${C.line}`, textDecoration: 'none', transition: 'all 0.15s' }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = hexC(C.green, 0.4); e.currentTarget.style.background = hexC(C.green, 0.06); }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = C.line; e.currentTarget.style.background = 'white'; }}>
            <Icon name={cm.icon} size={16} color={C.greenDeep}/>
            <span style={{ fontFamily: F.heading, fontSize: 13.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: C.charcoal }}>{cm.title}</span>
          </a>
        );
      })}
    </div>
  </section>
);

const CatFooter = () => (
  <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>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
        <a href={'mailto:' + CONTACT.email} style={{ fontFamily: F.body, fontSize: 13, color: 'rgba(255,255,255,0.6)', textDecoration: 'none' }}>{CONTACT.email}</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>
    </div>
  </footer>
);

const CategoryApp = () => {
  const id = resolveCat();
  const cm = CATEGORY_META[id];
  const articles = window.articlesByCat(id);
  return (
    <div style={{ minHeight: '100vh', background: catGradient }}>
      <CatNav/>
      <main style={{ maxWidth: 1080, margin: '0 auto', padding: '104px clamp(16px,4vw,40px) 0' }}>
        <nav aria-label="Brödsmulor" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 22 }}>
          <a href="/support" style={{ fontFamily: F.body, fontSize: 13, color: C.muted, textDecoration: 'none', fontWeight: 500 }}>Supportcenter</a>
          <Icon name="chevron-right" size={13} color={C.mutedLight}/>
          <span style={{ fontFamily: F.body, fontSize: 13, color: C.charcoal, fontWeight: 600 }}>{cm.title}</span>
        </nav>
        <header style={{ display: 'flex', gap: 20, alignItems: 'flex-start', paddingBottom: 30, borderBottom: `1px solid ${C.line}`, marginBottom: 30, flexWrap: 'wrap' }}>
          <div style={{ width: 64, height: 64, borderRadius: 18, background: C.sage, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={cm.icon} size={32} color={C.greenDeep}/></div>
          <div style={{ flex: 1, minWidth: 260 }}>
            <h1 style={{ fontFamily: F.heading, fontSize: 'clamp(30px,4.4vw,46px)', fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.01em', lineHeight: 1.04, color: C.charcoal, margin: '0 0 12px' }}>{cm.title}</h1>
            <p style={{ fontFamily: F.body, fontSize: 16.5, lineHeight: 1.65, color: '#54524E', margin: 0, maxWidth: 640 }}>{cm.intro}</p>
            <p style={{ fontFamily: F.modern, fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.16em', color: C.mutedLight, margin: '14px 0 0' }}>{articles.length} artiklar</p>
          </div>
        </header>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 }}>
          {articles.map(a => <ArticleCard key={a.slug} a={a}/>)}
        </div>
        <OtherCategories current={id}/>
      </main>
      <CatFooter/>
    </div>
  );
};

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