const { Button, Card, Badge, Icon, Quote } = window.LifeTechDesignSystem_3250e2;
const NAV = [["Sage","sage.html"],["Market intelligence","market-intelligence.html"],["Mission","mission.html"],["Get involved","involved.html"]];
const LOGO = "https://lifewell.tech/wp-content/uploads/2025/02/cropped-Gemini_high-resolution-logo-featuring-a-bright-healthy-green-tree-leaf-representing-life-and-wellness.jpg";
const MAILTO = (subject) => "mailto:John.Huang@LifeWell.tech?subject=" + encodeURIComponent(subject);

function Header({current}){
  const [open,setOpen]=React.useState(false);
  return (
    <header style={{position:"sticky",top:0,zIndex:10,background:"var(--surface-card)",borderBottom:"1px solid var(--border-subtle)"}}>
      <div className="wrap" style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"var(--space-5)",minHeight:78}}>
        <a href="index.html" aria-label="LifeWell.tech home" style={{display:"flex",alignItems:"center",gap:"var(--space-3)",textDecoration:"none"}}>
          <img src={LOGO} alt="" width="44" height="44" style={{width:44,height:44,objectFit:"contain"}}/>
          <span style={{font:"var(--fw-bold) 1.5rem/1 var(--font-display)",letterSpacing:"var(--ls-tight)",color:"var(--text-strong)"}}>LifeWell<span style={{color:"var(--leaf-600)"}}>.tech</span></span>
        </a>
        <nav aria-label="Primary" className="nav-desktop" style={{display:"flex",gap:"var(--space-6)"}}>
          {NAV.map(([l,h])=>{
            const on = h===current;
            if(h==="involved.html") return (
              <a key={l} href={h} aria-current={on?"page":undefined} style={{display:"inline-flex",alignItems:"center",whiteSpace:"nowrap",minHeight:48,padding:"0 var(--space-5)",alignSelf:"center",background:on?"var(--leaf-700)":"var(--leaf-600)",color:"var(--stone-0)",font:"var(--fw-semibold) var(--fs-body)/1 var(--font-sans)",textDecoration:"none",borderRadius:"var(--radius-control)",transition:"var(--transition-control)"}} onMouseEnter={e=>e.currentTarget.style.background="var(--leaf-700)"} onMouseLeave={e=>e.currentTarget.style.background=on?"var(--leaf-700)":"var(--leaf-600)"}>{l}</a>
            );
            return <a key={l} href={h} aria-current={on?"page":undefined} style={{font:"var(--type-ui)",fontSize:"var(--fs-body)",color:on?"var(--text-strong)":"var(--text-body)",fontWeight:on?"var(--fw-semibold)":"var(--fw-medium)",textDecoration:"none",padding:"var(--space-4) 0",borderBottom:"3px solid "+(on?"var(--leaf-500)":"transparent"),transition:"var(--transition-control)"}} onMouseEnter={e=>{if(!on)e.currentTarget.style.borderBottomColor="var(--leaf-200)"}} onMouseLeave={e=>{if(!on)e.currentTarget.style.borderBottomColor="transparent"}}>{l}</a>;
          })}
        </nav>
        <button className="nav-toggle" type="button" aria-expanded={open} onClick={()=>setOpen(!open)} style={{display:"none",alignItems:"center",gap:"var(--space-2)",minHeight:48,padding:"0 var(--space-4)",background:"var(--surface-card)",border:"1.5px solid var(--border-default)",borderRadius:"var(--radius-control)",font:"var(--type-ui)",fontSize:"var(--fs-body)",color:"var(--text-body)",cursor:"pointer"}}>
          <Icon name={open?"x":"menu"} size={20}/>Menu
        </button>
      </div>
      {open&&(<nav aria-label="Primary" style={{borderTop:"1px solid var(--border-subtle)",background:"var(--surface-page)"}}>
        <div className="wrap" style={{display:"flex",flexDirection:"column",padding:"var(--space-2) var(--page-gutter) var(--space-5)"}}>
          {NAV.map(([l,h])=>(<a key={l} href={h} style={{font:"var(--type-body-lg)",color:"var(--text-body)",textDecoration:"none",padding:"var(--space-4) 0",borderBottom:"1px solid var(--border-subtle)"}}>{l}</a>))}
        </div>
      </nav>)}
    </header>
  );
}

function Footer(){
  return (
    <footer className="band band-ink" style={{padding:"var(--space-9) 0"}}>
      <div className="wrap" style={{display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
        <p style={{color:"rgba(255,255,255,.84)"}}>LifeTech Inc. — a California nonprofit public benefit corporation.</p>
        <div className="row" style={{gap:"var(--space-6)"}}>
          <a href="mission.html" style={{color:"var(--leaf-300)"}}>Mission</a>
          <a href="involved.html" style={{color:"var(--leaf-300)"}}>Get involved</a>
          <a href="mailto:info@LifeWell.tech" style={{color:"var(--leaf-300)"}}>info@LifeWell.tech</a>
        </div>
        <hr style={{height:1,border:0,background:"rgba(255,255,255,.14)",width:"100%",margin:0}}/>
        <p style={{font:"var(--type-meta)",color:"rgba(255,255,255,.62)"}}>501(c)(3) nonprofit. Contributions are tax deductible to the extent allowed by law.</p>
      </div>
    </footer>
  );
}

function Band({tone,children,style,...rest}){
  const cls = "band" + (tone==="ivory"?" band-ivory":tone==="ink"?" band-ink":"");
  return <section className={cls} style={style} {...rest}><div className="wrap">{children}</div></section>;
}

function SectionHead({eyebrow,title,lede,aside}){
  return (
    <div className="sectionhead" style={{display:"flex",flexWrap:"wrap",gap:"var(--space-5)",alignItems:"flex-end",justifyContent:"space-between",width:"100%",marginBottom:"var(--space-8)"}}>
      <div className="stack" style={{gap:"var(--space-4)"}}>
        {eyebrow&&<p className="eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
        {lede&&<p className="lede">{lede}</p>}
      </div>
      {aside}
    </div>
  );
}

function Slot({id,placeholder,ratio="16/10",radius=14}){
  return <div className="slotbox" style={{aspectRatio:ratio}}><image-slot id={id} shape="rounded" radius={radius} placeholder={placeholder}></image-slot></div>;
}

function Hero({eyebrow,title,lede,actions,children}){
  return (
    <Band style={{paddingTop:"var(--space-9)",paddingBottom:children?"var(--space-9)":"var(--space-10)"}}>
      <div className="stack" style={{maxWidth:children?"none":undefined}}>
        <p className="eyebrow">{eyebrow}</p>
        <h1>{title}</h1>
        {lede&&<p className="lede">{lede}</p>}
        {actions&&<div className="row" style={{marginTop:"var(--space-2)"}}>{actions}</div>}
      </div>
      {children}
    </Band>
  );
}

function CardStack({children,...rest}){
  return <Card elevated style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",padding:"var(--pad-card)",height:"100%"}} {...rest}>{children}</Card>;
}

function Page({current,children}){
  return (<React.Fragment><Header current={current}/><main id="main">{children}</main><Footer/></React.Fragment>);
}

Object.assign(window,{Header,Footer,Band,SectionHead,Slot,Hero,CardStack,Page,Button,Card,Badge,Icon,Quote,NAV,MAILTO});