const { Button, SectionTitle, GhostNumeral, HandArrow, StatFigure, ProjectCard, Tag, PullQuote } = window.URBASOFIADesignSystem_7b91cf;

function HeroCity() {
  const ref = React.useRef(null);
  const small = window.matchMedia('(max-width: 700px)').matches;
  React.useEffect(() => {
    if (!small && window.USCity3D && ref.current) return window.USCity3D.mount(ref.current);
  }, [small]);
  if (small) return (
    <div aria-hidden="true" style={{position:'absolute',inset:0,overflow:'hidden'}}>
      <img src="assets/imagery/city-render-dark.png" alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',opacity:.5}} />
      <HandArrow kind="line" base=".." width="160%" className="us-draw" style={{position:'absolute',left:'-20%',top:'50%'}} />
    </div>
  );
  return <div ref={ref} aria-hidden="true" style={{position:'absolute',inset:0,overflow:'hidden'}} />;
}

function HomeScreen({ go, lang }) {
  const D = window.USDATA;
  const T = window.UST, R = D.ro.home, RP = D.ro.pathways;
  const featured = [D.pathways[0].projects[1], D.pathways[1].projects[0], D.pathways[2].projects[3]];
  return (
    <main>
      <section style={{position:'relative',background:'var(--navy)',overflow:'hidden'}}>
        <HeroCity />
        <div style={{position:'relative',maxWidth:'var(--max-content)',margin:'0 auto',padding:'clamp(80px,14vw,200px) var(--gutter) clamp(64px,10vw,140px)'}}>
          <h1 className="us-rise" style={{fontSize:'var(--text-hero)',fontWeight:900,color:'var(--cream)',lineHeight:.94,maxWidth:'16ch',margin:0}}>When knowledge gives directions</h1>
          <p className="us-rise" style={{animationDelay:'0.14s',fontFamily:'var(--font-label)',fontSize:'var(--text-lead)',lineHeight:1.5,color:'var(--cream)',maxWidth:'46ch',marginTop:'var(--space-6)'}}>
            {T(lang,'URBASOFIA is a Bucharest-based urban and regional planning company working across Europe.',R.lead)}
          </p>
          <div className="us-rise" style={{animationDelay:'0.28s',display:'flex',flexWrap:'wrap',gap:'var(--space-4)',marginTop:'var(--space-7)'}}>
            <Button variant="inverse" trailingArrow onClick={()=>go('portfolio')}>{T(lang,'Explore the portfolio',R.explore)}</Button>
            <Button variant="inverse" onClick={()=>go('method')}>{T(lang,'Our method',R.method)}</Button>
          </div>
        </div>
      </section>

      <section style={{background:'var(--mint)'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)'}}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,200px),1fr))',gap:'var(--space-7)'}}>
            {T(lang,[['35+','European projects delivered'],['18','Specialists in Bucharest'],['3','Transformation pathways'],['4','EU programmes: Horizon Europe, EUI, Interreg, JPI Urban Europe']],R.stats).map(([v,l],i)=>(
              <div key={l} data-reveal={i*90} data-countup style={{borderTop:'1px solid var(--navy)',paddingTop:'var(--space-5)'}}>
                <StatFigure value={v} label={l} />
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:'var(--cream)'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)'}}>
          <SectionTitle eyebrow={T(lang,'What we do',R.whatWeDo)} size="display-2">{T(lang,'Three pathways to urban transformation',R.threePathways)}</SectionTitle>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,280px),1fr))',gap:'var(--space-5)',marginTop:'var(--space-8)'}}>
            {D.pathways.map((p,i)=>(
              <a key={p.id} href={'#portfolio'} onClick={(e)=>{e.preventDefault();go('portfolio')}} data-pathway={p.id} data-reveal={i*110} data-tilt=""
                style={{position:'relative',overflow:'hidden',background:'var(--pathway)',padding:'var(--space-6) var(--space-6) var(--space-8)',border:'none',minHeight:280,display:'flex',flexDirection:'column',justifyContent:'flex-end'}}>
                <GhostNumeral value={p.num} style={{fontSize:'clamp(9rem,28vw,16rem)',left:'-0.07em'}} />
                <div style={{position:'relative'}}>
                  <Tag>{T(lang,'Pathway 0',R.pathwayTag)}{p.num}</Tag>
                  <h3 style={{fontSize:'var(--text-title)',marginTop:'var(--space-4)'}}>{T(lang,p.title,RP[p.id].title)}</h3>
                  <p style={{fontFamily:'var(--font-label)',fontStyle:'italic',fontWeight:600,fontSize:'var(--text-small)',lineHeight:1.4,marginTop:'var(--space-3)',marginBottom:0}}>{T(lang,p.strapline,RP[p.id].strapline)}</p>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:'var(--cream)',borderTop:'1px solid var(--navy)'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)'}}>
          <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',flexWrap:'wrap',gap:'var(--space-4)',marginBottom:'var(--space-7)'}}>
            <SectionTitle eyebrow={T(lang,'Selected work',R.selectedWork)} size="display-2">{T(lang,'Current projects',R.current)}</SectionTitle>
            <Button variant="ghost" trailingArrow onClick={()=>go('portfolio')}>{T(lang,'All 35+ projects',R.allProjects)}</Button>
          </div>
          {featured.map((p,i)=>(
            <ProjectCard key={p.num} number={p.num} title={p.title} strapline={p.strapline} funder={p.funder} data-reveal={i*90}
              pathway={D.pathways[[0,1,2][i]].id} href="#project" onClick={(e)=>{e.preventDefault();go('project',p)}} />
          ))}
        </div>
      </section>

      <section style={{background:'var(--navy)',position:'relative',overflow:'hidden'}}>
        <HandArrow kind="arrow" base=".." width="30%" rotate={-4} data-parallax="0.14" style={{position:'absolute',right:'-5%',bottom:'8%',opacity:.9}} />
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)',position:'relative'}}>
          <PullQuote attribution="URBASOFIA Brochure 2026" data-reveal="" style={{maxWidth:'min(100%, 980px)'}}>We don&rsquo;t act in silos, we bring this knowledge into integrated strategic planning for regions and cities</PullQuote>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { HomeScreen });