function goTo(id){const el=document.getElementById(id);if(el)window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-80,behavior:'smooth'});}
function Nav({onContact,active}){
const {Button}=window.HelixCyberDesignSystem_c2a1e7;
const links=[['Services','services.html'],['Models','models.html'],['Compliance','compliance.html'],['Industries','industries.html'],['Notes','blog.html'],['FAQ','faq.html']];
return <nav style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 40px',height:64,borderBottom:'1px solid var(--border-default)',position:'sticky',top:0,background:'var(--bg-0)',zIndex:10}}>
<a href="index.html" style={{display:'flex',alignItems:'center',gap:10,color:'var(--text-body)',textDecoration:'none'}}><img src="assets/logo.svg" width="22" height="22" alt="HelixCyber"/><span style={{fontFamily:'var(--font-mono)',fontSize:14,fontWeight:500,letterSpacing:'-.02em'}}>HELIXCYBER</span></a>
<div style={{display:'flex',alignItems:'center',gap:22,fontSize:13}}>
{links.map(([l,href])=><a key={href} href={href} style={{color:active===href?'var(--text-body)':'var(--text-muted)',textDecoration:'none',fontWeight:active===href?600:400}}>{l}</a>)}
<Button size="sm" onClick={onContact}>Request briefing</Button>
</div></nav>;
}
function Footer({onContact}){
const {Button}=window.HelixCyberDesignSystem_c2a1e7;
return <footer>
<div id="contact" style={{padding:'96px 40px',borderBottom:'1px solid var(--border-subtle)'}}>
<div style={{maxWidth:'var(--container)',margin:'0 auto',display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'center'}}>
<div>
<div style={{fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'.08em',color:'var(--text-faint)',marginBottom:20}}>CONTACT</div>
<div style={{fontSize:'var(--text-xl)',fontWeight:600,marginBottom:16}}>Ready when the audit is not optional.</div>
<div style={{fontSize:13,color:'var(--text-muted)',marginBottom:28,maxWidth:440}}>Tell us what you run and what worries you. Qualified inquiries receive a reply within seven business days, under NDA if you need one.</div>
<Button size="lg" onClick={onContact}>Request briefing</Button>
</div>
<div style={{display:'flex',flexDirection:'column',gap:18,fontSize:13,borderLeft:'1px solid var(--border-default)',paddingLeft:48}}>
<div><div style={{fontSize:11,letterSpacing:'.1em',color:'var(--text-faint)',marginBottom:4}}>BRIEFINGS</div><a href="mailto:contact@helixcyber.ai">contact@helixcyber.ai</a></div>
<div><div style={{fontSize:11,letterSpacing:'.1em',color:'var(--text-faint)',marginBottom:4}}>DISCLOSURE</div><a href="mailto:security@helixcyber.ai">security@helixcyber.ai</a><div style={{fontSize:12,color:'var(--text-faint)',marginTop:4}}>Coordinated disclosure honored. PGP on request.</div></div>
<div style={{fontSize:12,color:'var(--text-faint)'}}><span style={{color:'var(--ok)'}}>✓</span> qualified-reply &lt; 7 business days</div>
</div></div></div>
<div style={{padding:'28px 40px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,flexWrap:'wrap',fontSize:12,color:'var(--text-faint)'}}>
<div style={{display:'flex',alignItems:'center',gap:10}}><img src="assets/logo.svg" width="16" height="16" alt="HelixCyber"/><span>© 2026 HelixCyber</span></div>
<div style={{display:'flex',gap:20,flexWrap:'wrap'}}>
<a href="services.html" style={{color:'var(--text-faint)'}}>Services</a>
<a href="models.html" style={{color:'var(--text-faint)'}}>Models</a>
<a href="compliance.html" style={{color:'var(--text-faint)'}}>Compliance</a>
<a href="blog.html" style={{color:'var(--text-faint)'}}>Notes</a>
<a href="mailto:contact@helixcyber.ai" style={{color:'var(--text-faint)'}}>contact@helixcyber.ai</a>
</div></div></footer>;
}
function mountPage(active, Inner){
function Page(){
const {Button,Input,Select,Dialog,Toast}=window.HelixCyberDesignSystem_c2a1e7;
const [dlg,setDlg]=React.useState(false);
const [toast,setToast]=React.useState(false);
const [eng,setEng]=React.useState('');
const [email,setEmail]=React.useState('');
const [msg,setMsg]=React.useState('');
const open=()=>setDlg(true);
const submit=()=>{
const body=encodeURIComponent('From: '+(email||'(your email)')+'\nEngagement: '+(eng||'Not sure yet')+'\n\n'+msg);
window.location.href='mailto:contact@helixcyber.ai?subject='+encodeURIComponent('Briefing request')+'&body='+body;
setDlg(false);setToast(true);setTimeout(()=>setToast(false),5000);};
return <div>
<Nav onContact={open} active={active}/>
<Inner onContact={open}/>
<Footer onContact={open}/>
<Dialog open={dlg} label="/CONTACT" title="Request a briefing" onClose={()=>setDlg(false)}
footer={<><Button variant="ghost" onClick={()=>setDlg(false)}>Cancel</Button><Button onClick={submit}>Send</Button></>}>
<div style={{display:'flex',flexDirection:'column',gap:14}}>
<Input label="Work email" prefix="$" placeholder="you@company.com" value={email} onChange={e=>setEmail(e.target.value)}/>
<Select label="Engagement" options={['Audit','Red team','Retainer','Not sure yet']} value={eng} onChange={e=>setEng(e.target.value)}/>
<label style={{display:'flex',flexDirection:'column',gap:6}}><span style={{fontSize:11,letterSpacing:'.1em',color:'var(--text-muted)',textTransform:'uppercase'}}>What you run / what worries you</span>
<textarea value={msg} onChange={e=>setMsg(e.target.value)} rows={4} placeholder="Stack, targets, timeline…" style={{background:'var(--bg-0)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-1)',padding:'10px 12px',fontFamily:'var(--font-mono)',fontSize:13,color:'var(--text-body)',resize:'vertical',outline:'none'}}></textarea></label>
<span style={{fontSize:12,color:'var(--text-faint)'}}>Opens your mail client. Qualified inquiries: reply within seven business days. PGP on request.</span>
</div></Dialog>
{toast&&<div style={{position:'fixed',bottom:24,right:24,zIndex:200}}><Toast tone="ok" onDismiss={()=>setToast(false)}>Opening your mail client — contact@helixcyber.ai</Toast></div>}
</div>;
}
window.Page=Page;
}
window.mountPage=mountPage;
window.Nav=Nav;window.Footer=Footer;