const { Button, IconButton, LanguageSwitch, HandArrow } = window.URBASOFIADesignSystem_7b91cf;
const US_NAV = [['home','Home'],['about','About'],['method','Method'],['portfolio','Portfolio'],['team','Team'],['contact','Contact']];
const usNav = (lang) => US_NAV.map(([id,label]) => [id, window.UST(lang, label, window.USDATA.ro.nav[id])]);

function SiteHeader({ route, go, lang, setLang }) {
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{position:'sticky',top:0,zIndex:40,background:'var(--cream)',borderBottom:'1px solid var(--navy)'}}>
      <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'0 var(--gutter)',height:76,display:'flex',alignItems:'center',justifyContent:'space-between',gap:'var(--space-6)'}}>
        <a href="#home" onClick={(e)=>{e.preventDefault();go('home')}} style={{display:'flex',alignItems:'center',gap:'var(--space-3)',border:'none'}}>
          <span style={{width:34,height:34,background:'var(--navy)',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <img src="assets/logo/compass-white.png" alt="" style={{width:26}} />
          </span>
          <span style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:20,letterSpacing:'-0.02em'}}>URBASOFIA</span>
        </a>
        <nav className="us-desk" style={{display:'flex',alignItems:'center',gap:'var(--space-6)'}}>
          {usNav(lang).map(([id,label])=>(
            <a key={id} href={'#'+id} onClick={(e)=>{e.preventDefault();go(id)}}
              style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',fontWeight:600,letterSpacing:'var(--ls-label)',textTransform:'uppercase',color:'var(--navy)',borderBottom:route===id?'1px solid var(--coral)':'1px solid transparent',paddingBottom:2}}>{label}</a>
          ))}
          <LanguageSwitch value={lang} onChange={setLang} />
        </nav>
        <span className="us-mob" style={{display:'none'}}><IconButton icon={open?'x':'menu'} label="Menu" onClick={()=>setOpen(!open)} /></span>
      </div>
      {open && (
        <nav className="us-mob" style={{display:'none',flexDirection:'column',borderTop:'1px solid var(--navy)',padding:'var(--space-4) var(--gutter)'}}>
          {usNav(lang).map(([id,label])=>(
            <a key={id} href={'#'+id} onClick={(e)=>{e.preventDefault();go(id);setOpen(false)}} style={{fontFamily:'var(--font-label)',fontSize:'var(--text-small)',fontWeight:600,letterSpacing:'var(--ls-label)',textTransform:'uppercase',padding:'12px 0',borderBottom:'1px solid var(--line-hairline)'}}>{label}</a>
          ))}
          <div style={{padding:'14px 0'}}><LanguageSwitch value={lang} onChange={setLang} /></div>
        </nav>
      )}
    </header>
  );
}

function SiteFooter({ go, lang }) {
  const c = window.USDATA.contact;
  return (
    <footer style={{background:'var(--navy)',color:'var(--cream)',position:'relative',overflow:'hidden',borderTop:'1px solid rgba(252,252,252,.18)'}}>
      <HandArrow kind="line" base=".." width="60%" opacity={0.9} data-parallax="0.1" style={{position:'absolute',right:'-6%',top:'8%'}} />
      <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--space-9) var(--gutter) var(--space-6)',position:'relative'}}>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,220px),1fr))',gap:'var(--space-7)'}}>
          <div>
            <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:26,letterSpacing:'-0.02em'}}>URBASOFIA</div>
            <div style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',fontWeight:600,letterSpacing:'var(--ls-caps)',color:'var(--coral)',marginTop:'var(--space-3)'}}>WHEN KNOWLEDGE GIVES DIRECTIONS</div>
          </div>
          <div style={{fontSize:'var(--text-small)',lineHeight:1.7,color:'var(--text-on-navy-soft)'}}>
            <div>{c.address}</div><div>VAT {c.vat}</div>
          </div>
          <div style={{fontSize:'var(--text-small)',lineHeight:1.7}}>
            <div><a href={'tel:'+c.phone.replace(/\s/g,'')} style={{color:'var(--cream)'}}>{c.phone}</a></div>
            <div><a href={'mailto:'+c.email} style={{color:'var(--cream)'}}>{c.email}</a></div>
          </div>
          <nav style={{display:'flex',flexDirection:'column',gap:'var(--space-2)'}}>
            {usNav(lang).map(([id,label])=>(<a key={id} href={'#'+id} onClick={(e)=>{e.preventDefault();go(id)}} style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',fontWeight:600,letterSpacing:'var(--ls-label)',textTransform:'uppercase',color:'var(--cream)',border:'none'}}>{label}</a>))}
          </nav>
        </div>
        <div style={{marginTop:'var(--space-8)',paddingTop:'var(--space-5)',borderTop:'1px solid rgba(252,252,252,.2)',display:'flex',flexWrap:'wrap',gap:'var(--space-4)',justifyContent:'space-between',fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--text-on-navy-soft)'}}>
          <span>© 2026 URBASOFIA SRL. Brochure artwork © URBASOFIA / Artivistory Collective.</span>
          <span>demo realizat de <a href="https://voostvision.ro" target="_blank" rel="noopener" style={{color:'var(--text-on-navy-soft)'}}>Voost Vision</a></span>
        </div>
      </div>
    </footer>
  );
}

/* Shown above sections whose detailed content stays in English while RO is selected. */
function EnOnlyNote({ lang, style }) {
  if (lang !== 'RO') return null;
  return <p style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--text-muted)',marginTop:'var(--space-4)',...style}}>{window.USDATA.ro.noticeEnOnly}</p>;
}

/* ── DEMO NOTICE — remove this component and its mount in index.html at handover ── */
const US_DEMO_KEY = 'urbasofia-demo-notice-dismissed';
const US_DEMO_VALID_UNTIL = '31 August 2026';
function DemoNotice({ lang }) {
  const [show, setShow] = React.useState(() => {
    try { return localStorage.getItem(US_DEMO_KEY) !== '1'; } catch (e) { return true; }
  });
  if (!show) return null;
  const dismiss = () => { try { localStorage.setItem(US_DEMO_KEY,'1'); } catch(e){} setShow(false); };
  const T = window.UST, R = window.USDATA.ro.notice;
  return (
    <div role="dialog" aria-modal="true" style={{position:'fixed',inset:0,zIndex:100,background:'rgba(24,36,48,.72)',display:'flex',alignItems:'center',justifyContent:'center',padding:'var(--space-5)'}}>
      <div style={{background:'var(--cream)',maxWidth:560,padding:'var(--space-7)',boxShadow:'var(--shadow-overlay)',position:'relative'}}>
        <div style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',fontWeight:700,letterSpacing:'var(--ls-caps)',textTransform:'uppercase',color:'var(--coral)'}}>{T(lang,'DEMONSTRATION ONLY',R.label)}</div>
        <h2 style={{fontSize:'var(--text-title)',margin:'var(--space-4) 0'}}>{T(lang,'This is a static demo',R.title)}</h2>
        <p style={{fontSize:'var(--text-small)',lineHeight:1.65}}>{T(lang,<React.Fragment>Prepared by Voost Vision for URBASOFIA to accompany a website proposal. Content is taken from the URBASOFIA Brochure 2026; artwork and photographs belong to URBASOFIA / Artivistory Collective. Filtering, search and content administration are indicated by structure but not implemented. Any content not present in the client's materials is marked <em>[demo]</em> or <em>[placeholder]</em>.</React.Fragment>,R.p1)}</p>
        <p style={{fontSize:'var(--text-small)',lineHeight:1.65}}>{T(lang,'Valid until',R.valid)} <strong>{US_DEMO_VALID_UNTIL}</strong>. {T(lang,'Not for publication.',R.notPub)}</p>
        <Button variant="primary" onClick={dismiss} trailingArrow>{T(lang,'Continue to the demo',R.cta)}</Button>
      </div>
    </div>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, DemoNotice, EnOnlyNote, US_NAV });
