const {Button,Badge,Card,Tag}=window.MagnificLabsDesignSystem_68b9a0;
const TONE={sage:'success',sky:'info',lavender:'brand',butter:'warning',clay:'danger'};
function LinkButton({href,children,variant='primary',size='lg'}){
return <Button variant={variant} size={size} onClick={()=>{window.location.href=href;}}>{children}</Button>;
}
function PostCard({post}){
const fmt=d=>new Date(d).toLocaleDateString('en-GB',{day:'numeric',month:'long',year:'numeric'});
return <a className="postlink reveal" href={'post.html?p='+post.slug}><Card>
<div className="postcard-in">
<div className="col" style={{gap:10}}>
<h3 className="h-md">{post.title}</h3>
<p className="body" style={{fontSize:'var(--text-base)',maxWidth:'56ch'}}>{post.summary}</p>
</div>
<div className="col" style={{gap:10,alignItems:'flex-start'}}>
<Badge tone={TONE[post.tone]}>{post.tag}</Badge>
<span className="small">{fmt(post.date)}</span>
</div>
</div></Card></a>;
}
const NAVLINKS=[['Home','index.html'],['About','about.html'],['Blog','blog.html'],['Contact','contact.html']];
const GITHUB='https://github.com/organizations/Magnific-Labs';
const EMAIL='hello@magnificlabs.org';

function Wordmark({className=''}){
return <span className={'mark '+className}>Magnific<span> Labs</span></span>;
}

function SiteHeader({active}){
return <header className="hdr"><div className="wrap hdr-in">
<a className="bookmark" href="index.html" aria-label="Magnific Labs — home"><img src="assets/logo-mark-alpha.png" alt=""/></a>
<Wordmark/>
<nav className="nav" aria-label="Main">
{NAVLINKS.map(([l,h])=><a key={l} href={h} aria-current={l===active?'page':undefined}>{l}</a>)}
</nav>
</div></header>;
}

function SiteFooterML(){
const cols=[['Site',[['Home','index.html'],['About','about.html'],['Blog','blog.html'],['Contact','contact.html']]],
['Legal',[['Privacy policy','privacy.html'],['Terms & conditions','terms.html']]],
['Elsewhere',[['GitHub',GITHUB],[EMAIL,'mailto:'+EMAIL]]]];
return <footer className="ftr"><div className="wrap">
<div className="ftr-grid">
<div className="col" style={{gap:12}}>
<Wordmark/>
<p className="small" style={{color:'var(--paper-300)',maxWidth:'34ch'}}>A small studio building thoughtful, accessible software for work and play.</p>
</div>
{cols.map(([h,items])=><div key={h} className="col" style={{gap:2}}>
<h4>{h}</h4>
{items.map(([l,href])=><a key={l} href={href}>{l}</a>)}
</div>)}
</div>
<div className="wrap rule" style={{width:'100%',padding:'20px 0 0'}}>
<span>© {new Date().getFullYear()} Magnific Labs. All rights reserved.</span>
<span>{EMAIL}</span>
</div>
</div></footer>;
}

function Page({active,children}){
React.useEffect(()=>{
const de=document.documentElement;de.classList.add('js-reveal');
let raf=0;
const all=()=>document.querySelectorAll('.reveal:not(.in)');
const check=()=>{raf=0;const h=window.innerHeight||800;
all().forEach(el=>{const r=el.getBoundingClientRect();if(r.top<h*0.94&&r.bottom>-40)el.classList.add('in');});};
const showAll=()=>all().forEach(el=>el.classList.add('in'));
const onScroll=()=>{if(!raf)raf=requestAnimationFrame(check);};
check();
window.addEventListener('scroll',onScroll,{passive:true,capture:true});
document.addEventListener('scroll',onScroll,{passive:true,capture:true});
window.addEventListener('resize',onScroll);
document.addEventListener('visibilitychange',onScroll);
let io=null;
if('IntersectionObserver' in window){io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('in');}),{threshold:0});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));}
const t1=setTimeout(check,300);
// safety net: if this document can't scroll (embedded in a scrolling host), nothing below the fold would ever reveal
const t2=setTimeout(()=>{const y=window.scrollY;window.scrollTo(0,1);const canScroll=window.scrollY>0;window.scrollTo(0,y);if(!canScroll)showAll();},700);
return()=>{window.removeEventListener('scroll',onScroll,{capture:true});document.removeEventListener('scroll',onScroll,{capture:true});
window.removeEventListener('resize',onScroll);document.removeEventListener('visibilitychange',onScroll);
clearTimeout(t1);clearTimeout(t2);cancelAnimationFrame(raf);if(io)io.disconnect();};
},[children]);
return <React.Fragment><SiteHeader active={active}/><main>{children}</main><SiteFooterML/></React.Fragment>;
}

function PageHead({eyebrow,title,lead}){
return <section className="wrap" style={{padding:'clamp(48px,7vw,96px) 0 clamp(24px,3vw,40px)'}}>
{eyebrow&&<div className="eyebrow" style={{marginBottom:16}}>{eyebrow}</div>}
<h1 className="h-lg" style={{maxWidth:'22ch'}}>{title}</h1>
{lead&&<p className="lead" style={{marginTop:20}}>{lead}</p>}
</section>;
}

function mountPage(el){ReactDOM.createRoot(document.getElementById('root')).render(el);}

Object.assign(window,{Wordmark,SiteHeader,SiteFooterML,Page,PageHead,mountPage,NAVLINKS,GITHUB,EMAIL,LinkButton,PostCard,TONE,DSButton:Button,DSBadge:Badge,DSCard:Card,DSTag:Tag});