// MyPTO Supportcenter — artikelsida (SEO-vänlig, data-driven renderare) // Läser vilken artikel som ska visas från window.__ARTICLE_SLUG (satt i varje HTML) // eller från ?slug= i URL:en. Allt innehåll kommer från window.PTO_ARTICLES. const { useState: useStateA, useEffect: useEffectA } = React; function hexA(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 ACCENT = C.green, ACCENT_DEEP = C.greenDeep; const gradientBgA = `radial-gradient(ellipse at 90% -5%, rgba(160,200,29,0.08) 0%, transparent 50%), linear-gradient(180deg, #FAF7F0 0%, #F4EFE6 100%)`; // Vilken artikel? function resolveSlug() { if (window.__ARTICLE_SLUG) return window.__ARTICLE_SLUG; const p = new URLSearchParams(window.location.search); return p.get('slug') || (window.PTO_ARTICLES[0] && window.PTO_ARTICLES[0].slug); } // ═══════════════ NAVBAR ═══════════════ const ArticleNav = () => ( ); // ═══════════════ BREADCRUMB ═══════════════ const Breadcrumb = ({ cat, title }) => { const cm = CATEGORY_META[cat]; return ( ); }; // ═══════════════ BYGGSTENAR ═══════════════ const H2 = ({ id, children }) => (

{children}

); const P = ({ children }) => (

{typeof children === 'string' ? undefined : children}

); const Callout = ({ icon = 'sparkles', title, children, tone = 'green' }) => { const tones = { green: { bg: hexA(C.green, 0.09), border: hexA(C.green, 0.35), ic: C.greenDeep, icbg: hexA(C.green, 0.16) }, amber: { bg: 'rgba(245,158,11,0.08)', border: 'rgba(245,158,11,0.32)', ic: '#b45309', icbg: 'rgba(245,158,11,0.16)' }, sky: { bg: 'rgba(14,165,233,0.08)', border: 'rgba(14,165,233,0.30)', ic: '#0369a1', icbg: 'rgba(14,165,233,0.16)' }, }; const t = tones[tone] || tones.green; return (
{title &&

{title}

}

); }; const Steps = ({ items }) => (
    {items.map((it, i) => (
  1. {i + 1}
    {i < items.length - 1 &&
    }

    {it.t}

    2. ))}
); const BulletList = ({ items }) => ( ); // Rendera ett block ur artikelns body-array const Block = ({ b }) => { switch (b[0]) { case 'h2': return

{b[2]}

; case 'p': return

{b[1]}

; case 'steps': return ; case 'callout': return {b[4]}; case 'list': return ; default: return null; } }; // ═══════════════ ARTIKELKROPP ═══════════════ const ArticleBody = ({ a }) => { const cm = CATEGORY_META[a.cat]; return (
{cm.title}

{a.title}

{[['refresh', 'Uppdaterad ' + a.updatedLabel], ['timer', a.read + ' läsning'], ['check-simple', (a.helpful || 96) + ' % tyckte detta hjälpte']].map(([ic, tx]) => ( {tx} ))}

{a.lead}

{a.body.map((b, i) => )} {a.faq && a.faq.length > 0 && ( <>

Vanliga frågor

)}
); }; // ═══════════════ INLINE FAQ ═══════════════ const ArticleFaq = ({ items }) => { const [open, setOpen] = useStateA(-1); return (
{items.map((item, i) => { const isOpen = open === i; return (

{item.a}

); })}
); }; // ═══════════════ TOC (sticky scrollspy) ═══════════════ const TocSidebar = ({ toc }) => { const [active, setActive] = useStateA(toc[0] && toc[0].id); useEffectA(() => { const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); }); }, { rootMargin: '-90px 0px -65% 0px', threshold: 0 }); toc.forEach(t => { const el = document.getElementById(t.id); if (el) obs.observe(el); }); return () => obs.disconnect(); }, [toc]); return ( ); }; // ═══════════════ "VAR DETTA TILL HJÄLP?" ═══════════════ const Feedback = () => { const [vote, setVote] = useStateA(null); return (
{vote ? (

{vote === 'yes' ? 'Vad bra — tack för din feedback!' : 'Tack! Vi använder din feedback för att förbättra artikeln.'}

) : ( <>

Var den här artikeln till hjälp?

{[['yes', 'Ja', 'check-simple'], ['no', 'Nej', 'x']].map(([v, label, ic]) => ( ))}
)}
); }; // ═══════════════ RELATERADE ARTIKLAR ═══════════════ const Related = ({ slugs }) => { const items = (slugs || []).map(s => window.getArticle(s)).filter(Boolean); if (!items.length) return null; return (

Relaterade artiklar

{items.map(r => ( { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 16px 38px rgba(61,61,61,0.1)'; e.currentTarget.style.borderColor = hexA(C.green, 0.4); }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = C.line; }}>

{r.title}

{CATEGORY_META[r.cat].short} · {r.read}

 ))}
); }; // ═══════════════ HJÄLP-CTA (med valfri kontextuell produkt-CTA) ═══════════════ const HelpCta = ({ cta }) => (

{cta ? cta.eyebrow : 'Fick du inte svar?'}

{cta ? cta.title : 'Vi hjälper dig vidare'}

{cta ? cta.text : 'Fråga PTO-assistenten direkt eller skicka ett ärende — vi svarar inom 24 timmar.'}

); // ═══════════════ FOOTER ═══════════════ const ArticleFooter = () => ( ); // ═══════════════ APP ═══════════════ const ArticleApp = () => { const slug = resolveSlug(); const a = window.getArticle(slug); if (!a) { return

Artikeln kunde inte hittas.

Till Supportcenter →
; } const toc = a.body.filter(b => b[0] === 'h2').map(b => ({ id: b[1], label: b[2] })); if (a.faq && a.faq.length) toc.push({ id: 'faq', label: 'Vanliga frågor' }); return (
); }; ReactDOM.createRoot(document.getElementById('root')).render();