const STORY=[
['Why we exist',"Bad software costs you more than time. A cluttered screen at the end of a long day, a form that loses your work, an app that pulls at your attention all evening — it wears you down in ways you stop noticing. We think the software you use daily should leave you better off than it found you. So we build tools that are clear, dependable and genuinely useful, for as many people as we can reach."],
["What we're making","A notes app, a task monster, the systems small businesses run on, and a few games. Different products, built to the same standard."]];

const FACTS=[['Founded','2026'],['Team','Small on purpose'],['Built for','Desktop, mobile, web'],['Status','In development']];

function Story(){
return <section className="wrap sec split" style={{paddingTop:0}}>
<div className="pin">
<h2 className="h-lg">A studio, not a startup</h2>
<p className="body" style={{marginTop:16,maxWidth:'32ch'}}>No growth targets, no launch theatre. Just software we want to keep using.</p>
<div className="col" style={{gap:2,marginTop:28}}>
{FACTS.map(([k,v])=><div key={k} style={{display:'flex',justifyContent:'space-between',gap:24,padding:'12px 0',maxWidth:'30ch'}}>
<span className="small">{k}</span><span style={{fontFamily:'var(--font-display)',fontWeight:700}}>{v}</span></div>)}
</div>
</div>
<div className="col" style={{gap:'clamp(28px,3.5vw,52px)'}}>
{STORY.map(([t,d])=><div key={t} className="reveal col" style={{gap:12}}>
<h3 className="h-md">{t}</h3><p className="body">{d}</p></div>)}
</div>
</section>;
}

function Values(){
const v=[['Undistracting','sage',"Nothing moves unless you moved it. No streaks to keep, no nudges, no red dots for things that can wait."],
['Legible','sky',"Text you can read without leaning in — comfortable sizes, generous spacing, lines that never run too long."],
['Durable','butter',"Your work stays yours. Open file formats, exports that actually work, and nothing held hostage to keep you subscribed."],
['Honest','clay',"Plain language, plain pricing, and no invented urgency. If something isn't ready, we'll say so."]];
return <section className="wrap sec" style={{paddingTop:0}}>
<div className="reveal col" style={{gap:14,marginBottom:'clamp(24px,3vw,44px)'}}>
<h2 className="h-lg">Four words we check ourselves against</h2>
<p className="body">Every decision gets held up to these. If it fails one of them, it doesn't ship.</p>
</div>
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:'clamp(12px,1.5vw,20px)'}}>
{v.map(([t,tone,d])=><div key={t} className="reveal" style={{background:`var(--${tone}-100)`,borderRadius:'var(--radius-lg)',padding:'clamp(22px,2.2vw,32px)'}}>
<h3 className="h-md" style={{color:`var(--${tone}-700)`}}>{t}</h3>
<p className="body" style={{marginTop:10,fontSize:'var(--text-base)'}}>{d}</p></div>)}
</div>
</section>;
}

function Contactish(){
return <section className="wrap" style={{paddingBottom:'clamp(24px,4vw,56px)'}}>
<div className="reveal" style={{background:'var(--paper-0)',borderRadius:'var(--radius-xl)',padding:'clamp(28px,3.5vw,56px)',boxShadow:'var(--shadow-sm)'}}>
<h2 className="h-md">Work with us, or just say hello</h2>
<p className="body" style={{marginTop:12}}>Our open source projects are available on <a className="linked" href={window.GITHUB}>GitHub</a>, and we write about whatever we're thinking through on the <a className="linked" href="blog.html">blog</a>. Got something you want built, or an idea worth collaborating on? Get in touch.</p>
<div style={{marginTop:24}}><LinkButton href={'mailto:'+window.EMAIL}>{window.EMAIL}</LinkButton></div>
</div>
</section>;
}

mountPage(<Page active="About">
<PageHead eyebrow="About" title="We build software worth keeping." lead="Magnific Labs is a small independent studio making tools for the job at hand — and games for when it's done. Different products, the same craft in every one of them."/>
<Story/><Values/><Contactish/>
</Page>);