const PRINCIPLES=[
['Quiet by default','No unnecessary pings, badges, or interruptions. Our work tools stay quietly out of your way, and our games only ask for attention when you\'re ready to play.'],
['Effortless reading','We use comfortable text sizes and spacing on every screen. You\'ll never have to squint, whether you\'re using a phone, a laptop, or an ultrawide monitor.'],
['Crystal clear contrast','We don\'t guess when it comes to visibility. Every color pairing is strictly tested so that text always stands out clearly from its background for everyone.'],
['Built for every input','Whether you use a mouse, a touch screen, or a keyboard, you can navigate seamlessly. Every button is easy to reach, simple to highlight, and large enough to tap.'],
['Motion on your terms','Animations are fast and subtle to avoid distractions. If your device is set to reduce motion, our animations disappear entirely.']];

const AREAS=[
['Everyday tools','sage','Tools','Notes, tasks and the small apps you open every day. Simple by design — plain text, nothing to file, nothing to save.'],
['Business systems','sky','Business','E-commerce, inventory, invoicing and the ERPs that hold a company together, without the enterprise weight.'],
['Developer platforms','lavender','Engineering','Internal tools, dashboards and services for the people shipping the product. Keyboard-first, fast, out of the way.'],
['Games','butter','Play','Small, unserious games with minutes of explosive fun. Play with no restraints.']];

function Hero(){
return <section className="wrap" style={{padding:'clamp(56px,9vh,132px) 0 clamp(48px,7vh,104px)'}}>
<div className="eyebrow reveal" style={{marginBottom:20}}>Independent software studio</div>
<h1 className="h-xl reveal" style={{maxWidth:'16ch'}}>Made to be lived with.</h1>
<p className="lead reveal" style={{marginTop:24}}>We're building tailored software for the job at hand—and exciting games for when it's done.</p>
<div className="reveal" style={{display:'flex',gap:14,flexWrap:'wrap',marginTop:36}}>
<LinkButton href="blog.html">Read the blog</LinkButton>
<LinkButton href="contact.html" variant="ghost">Say hello</LinkButton>
</div>
<p className="small reveal" style={{marginTop:28}}>Mac, Windows, Linux, iOS, Android, web and many more! Different shapes, same instincts.</p>
</section>;
}

function PinnedPrinciples(){
return <section id="principles" className="wrap sec split">
<div className="pin">
<h2 className="h-lg">What every product owes you</h2>
<p className="body" style={{marginTop:18,maxWidth:'34ch'}}>While every tool and game we build has its own unique personality, our baseline standards never change. We guarantee these five principles before we write a single line of code.</p>
<a className="linked" href="about.html" style={{marginTop:20,display:'inline-block',fontWeight:700}}>More about the studio →</a>
</div>
<div className="col" style={{gap:'clamp(28px,3.5vw,56px)'}}>
{PRINCIPLES.map(([t,d],i)=><div key={t} className="reveal col" style={{gap:10}}>
<span className="mono">0{i+1}</span>
<h3 className="h-md">{t}</h3>
<p className="body">{d}</p>
</div>)}
</div>
</section>;
}

function PinnedStack(){
return <section id="work" className="wrap sec">
<div className="reveal col" style={{gap:14,marginBottom:'clamp(28px,4vw,56px)'}}>
<h2 className="h-lg">What we work on</h2>
<p className="body">Four kinds of software we build ourselves and take on with partners. If your project looks like one of these, we'd like to hear about it.</p>
</div>
<div className="stack">
{AREAS.map(([t,tone,label,d],i)=><article key={t} className="card" style={{'--i':i,background:`var(--${tone}-100)`}}>
<div style={{marginBottom:20}}><DSBadge tone={TONE[tone]}>{label}</DSBadge></div>
<h3 className="h-lg" style={{fontSize:'clamp(24px,2.6vw,36px)',color:`var(--${tone}-700)`}}>{t}</h3>
<p className="body" style={{marginTop:14,maxWidth:'44ch',color:'var(--ink-700)'}}>{d}</p>
</article>)}
</div>
</section>;
}

function LatestWriting(){
return <section className="wrap sec">
<div className="reveal" style={{display:'flex',flexWrap:'wrap',gap:16,alignItems:'baseline',justifyContent:'space-between',marginBottom:'clamp(20px,3vw,40px)'}}>
<h2 className="h-lg">From the blog</h2>
<a className="linked" href="blog.html" style={{fontWeight:700}}>All posts</a>
</div>
<div className="postlist">
{window.POSTS.slice(0,3).map(p=><PostCard key={p.slug} post={p}/>)}
</div>
</section>;
}

function Closing(){
return <section className="wrap" style={{paddingBottom:'clamp(24px,4vw,56px)'}}>
<div className="soft reveal" style={{background:'var(--brand-100)',borderRadius:'var(--radius-xl)',padding:'clamp(32px,4vw,64px)',boxShadow:'none'}}>
<h2 className="h-lg" style={{color:'var(--brand-700)',maxWidth:'20ch'}}>Want to hear when something ships?</h2>
<p className="body" style={{marginTop:16,maxWidth:'46ch'}}>One email, no schedule, nothing else. Write to us and we'll add you — or just tell us what you're trying to make work. More ways to reach us on the <a className="linked" href="contact.html">contact page</a>.</p>
<div style={{display:'flex',gap:14,flexWrap:'wrap',marginTop:28}}>
<LinkButton href={'mailto:'+window.EMAIL}>{window.EMAIL}</LinkButton>
<LinkButton href={window.GITHUB} variant="ghost">Follow on GitHub</LinkButton>
</div>
</div>
</section>;
}

mountPage(<Page active="Home"><Hero/><PinnedPrinciples/><PinnedStack/><LatestWriting/><Closing/></Page>);