const { Button, SectionTitle, GhostNumeral, HandArrow, ProjectCard, Select, Tag, MetaBox, ThreeColumnBrief } = window.URBASOFIADesignSystem_7b91cf;

function PortfolioScreen({ go, lang }) {
  const D = window.USDATA;
  const T = window.UST, R = D.ro.portfolio, RP = D.ro.pathways;
  const [pathway, setPathway] = React.useState('all');
  const shown = pathway === 'all' ? D.pathways : D.pathways.filter(p => p.id === pathway);
  return (
    <main>
      <section style={{background:'var(--cream)',borderBottom:'1px solid var(--navy)'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter) var(--space-7)'}}>
          <SectionTitle eyebrow={T(lang,'Portfolio',R.eyebrow)} subtitle={T(lang,'More than 35 European projects with public administrations, international consortia and academia.',R.subtitle)}>{T(lang,'Projects',R.title)}</SectionTitle>
          <div style={{display:'flex',flexWrap:'wrap',gap:'var(--space-4)',alignItems:'flex-end',marginTop:'var(--space-7)'}}>
            <Select label={T(lang,'Pathway',R.filterPathway)} value={pathway} onChange={(e)=>setPathway(e.target.value)} style={{minWidth:260}}
              options={[{value:'all',label:T(lang,'All pathways',R.filterAll)},...D.pathways.map(p=>({value:p.id,label:T(lang,p.title,RP[p.id].title)}))]} />
            <Select label={T(lang,'Programme [demo]','Program [demo]')} options={T(lang,['All programmes','Horizon Europe','Interreg','EUI','JPI Urban Europe'],['Toate programele','Horizon Europe','Interreg','EUI','JPI Urban Europe'])} style={{minWidth:220}} />
            <Select label="Status [demo]" options={T(lang,['All','Ongoing','Completed'],['Toate','În derulare','Finalizate'])} style={{minWidth:160}} />
            <span style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--text-muted)',paddingBottom:14}}>
              {T(lang,'Programme and status filters are indicative in this demo.',R.filterNote)}
            </span>
          </div>
          <EnOnlyNote lang={lang} />
        </div>
      </section>

      {shown.map(p=>(
        <section key={p.id} data-pathway={p.id}>
          <div style={{background:'var(--pathway)',position:'relative',overflow:'hidden'}}>
            <GhostNumeral value={p.num} position="right" style={{fontSize:'clamp(10rem,34vw,24rem)',right:'-0.06em'}} />
            <div data-reveal="" style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--space-9) var(--gutter)',position:'relative'}}>
              <SectionTitle eyebrow={T(lang,'Pathway 0',D.ro.home.pathwayTag)+p.num} size="display-2" subtitle={T(lang,p.strapline,RP[p.id].strapline)}>{T(lang,p.title,RP[p.id].title)}</SectionTitle>
              <div style={{marginTop:'var(--space-8)'}}><ThreeColumnBrief columns={p.brief} /></div>
            </div>
          </div>
          <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--space-8) var(--gutter) var(--space-9)'}}>
            {p.projects.map((pr,i)=>(
              <ProjectCard key={pr.num} number={pr.num} title={pr.title} strapline={pr.strapline} funder={pr.funder} pathway={p.id} data-reveal={i*70}
                href="#project" onClick={(e)=>{e.preventDefault();go('project',pr,p.id)}} />
            ))}
          </div>
        </section>
      ))}

      {/* Project archive — implemented projects from the urbasofia.eu archive (pre-brochure era). */}
      <section style={{background:'var(--navy)',color:'var(--cream)'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)'}}>
          <SectionTitle inverse eyebrow={T(lang,'From the archive',R.archiveEyebrow)} size="display-2">{T(lang,'Implemented projects 2012–2019',R.archiveTitle)}</SectionTitle>
          <p style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--text-on-navy-soft)',marginTop:'var(--space-4)'}}>
            {T(lang,'Selection from the urbasofia.eu archive — full archive migration is scoped within the project.',R.archiveNote)}
          </p>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,300px),1fr))',gap:'var(--col-gap)',marginTop:'var(--space-7)'}}>
            <div data-reveal="">
              <h3 style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',fontWeight:700,letterSpacing:'var(--ls-caps)',textTransform:'uppercase',color:'var(--coral)',margin:'0 0 var(--space-5)'}}>{T(lang,'European projects',D.ro.archiveEu)}</h3>
              {D.archive.eu.map(a=>(
                <div key={a.acronym} style={{display:'flex',gap:'var(--space-4)',alignItems:'baseline',padding:'var(--space-3) 0',borderBottom:'1px solid rgba(252,252,252,.18)'}}>
                  <span style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:'var(--text-small)',whiteSpace:'nowrap'}}>{a.acronym}</span>
                  <span style={{fontSize:'var(--text-micro)',lineHeight:1.5,color:'var(--text-on-navy-soft)',flex:1}}>{a.title}</span>
                  <span style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',fontWeight:600,letterSpacing:'var(--ls-label)',textTransform:'uppercase',whiteSpace:'nowrap'}}>{a.funder}</span>
                </div>
              ))}
            </div>
            <div data-reveal={120}>
              <h3 style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',fontWeight:700,letterSpacing:'var(--ls-caps)',textTransform:'uppercase',color:'var(--coral)',margin:'0 0 var(--space-5)'}}>{T(lang,'Strategic planning in Romania & beyond',R.archiveStrategic)}</h3>
              {D.archive.strategic.map(s=>(
                <div key={s.title} style={{padding:'var(--space-3) 0',borderBottom:'1px solid rgba(252,252,252,.18)',fontSize:'var(--text-small)',lineHeight:1.5}}>{s.title}</div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function ProjectScreen({ go, project, pathwayId, lang }) {
  const D = window.USDATA;
  const T = window.UST, RP = D.ro.pathways;
  const p = project || D.pathways[0].projects[1];
  const pid = pathwayId || 'nature';
  const pathway = D.pathways.find(x=>x.id===pid);
  const siblings = pathway.projects.filter(x=>x.num!==p.num).slice(0,3);
  return (
    <main data-pathway={pid}>
      <section style={{background:'var(--pathway)',position:'relative',overflow:'hidden'}}>
        <GhostNumeral value={p.num} position="right" style={{fontSize:'clamp(9rem,32vw,22rem)'}} />
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--space-8) var(--gutter) var(--space-9)',position:'relative'}}>
          <Button variant="ghost" onClick={()=>go('portfolio')} style={{marginBottom:'var(--space-6)'}}>{T(lang,<React.Fragment>&larr; Back to portfolio</React.Fragment>,D.ro.project.back)}</Button>
          <div style={{display:'flex',gap:'var(--space-3)',flexWrap:'wrap',marginBottom:'var(--space-5)'}}>
            <Tag>{p.funder}</Tag><Tag>{T(lang,pathway.title,RP[pid].title)}</Tag>
          </div>
          <h1 style={{fontSize:'var(--text-display-1)',margin:0}}>{p.title}</h1>
          <p style={{fontFamily:'var(--font-label)',fontStyle:'italic',fontWeight:600,fontSize:'var(--text-subtitle)',lineHeight:1.35,maxWidth:'56ch',marginTop:'var(--space-5)'}}>{p.strapline}</p>
        </div>
      </section>

      <section style={{background:'var(--cream)'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,320px),1fr))',gap:'var(--col-gap)',alignItems:'start'}}>
          <div data-reveal="" className="us-fiche-body" style={{minWidth:0}}>
            <EnOnlyNote lang={lang} style={{marginTop:0,marginBottom:'var(--space-5)'}} />
            {p.body.map((t,i)=>(<p key={i} style={{fontSize:'var(--text-small)',lineHeight:1.65,textAlign:'justify',hyphens:'auto',maxWidth:'var(--measure-prose)'}}>{t}</p>))}
          </div>
          <div data-reveal={140} style={{position:'relative'}}>
            <MetaBox items={p.meta} />
            <div style={{marginTop:'var(--space-5)',fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--text-muted)'}}>
              Printed fiches carry a QR code to the project website. [demo — QR omitted]
            </div>
          </div>
        </div>
      </section>

      <section style={{background:'var(--cream)',borderTop:'1px solid var(--navy)'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--space-8) var(--gutter) var(--space-9)'}}>
          <SectionTitle eyebrow={T(lang,'Same pathway','Aceeași direcție')} size="title">{T(lang,'More in ',D.ro.project.more+' ')}{T(lang,pathway.title,RP[pid].title)}</SectionTitle>
          <div style={{marginTop:'var(--space-6)'}}>
            {siblings.map((s,i)=>(<ProjectCard key={s.num} number={s.num} title={s.title} strapline={s.strapline} funder={s.funder} pathway={pid} data-reveal={i*70} href="#project" onClick={(e)=>{e.preventDefault();go('project',s,pid)}} />))}
          </div>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { PortfolioScreen, ProjectScreen });