const { Button, SectionTitle, HandArrow, Accordion, TeamMember, Input, Select, Checkbox, MetaBox, StatFigure, GhostNumeral } = window.URBASOFIADesignSystem_7b91cf;

function AboutScreen({ lang }) {
  const D = window.USDATA;
  const T = window.UST, R = D.ro.about;
  return (
    <main>
      <section style={{background:'var(--mint)',position:'relative',overflow:'hidden'}}>
        <HandArrow kind="arrow" base=".." width="40%" rotate={6} data-parallax="0.12" style={{position:'absolute',right:'-6%',bottom:'-6%'}} />
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)',position:'relative'}}>
          <SectionTitle>{T(lang,'About',R.title)}</SectionTitle>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,300px),1fr))',gap:'var(--col-gap)',marginTop:'var(--space-7)'}}>
            <p data-reveal={0} style={{fontSize:'var(--text-small)',lineHeight:1.65,textAlign:'justify',hyphens:'auto'}}>{T(lang,'URBASOFIA is a Bucharest-based urban and regional planning company working across Europe. We support cities, regions and institutions in designing and implementing integrated urban and territorial transformation processes. Our work addresses complex spatial, social and environmental challenges through structured, evidence-based and context-sensitive approaches.',R.p1)}</p>
            <p data-reveal={100} style={{fontSize:'var(--text-small)',lineHeight:1.65,textAlign:'justify',hyphens:'auto'}}>{T(lang,'Our expertise combines strategic planning, applied research and governance innovation. We operate at the intersection of policy design, spatial development and community engagement, contributing to European programmes such as Horizon Europe, European Urban Initiative, Interreg and JPI Urban Europe, and translating this knowledge to practical application to regions and cities.',R.p2)}</p>
            <p data-reveal={200} style={{fontSize:'var(--text-small)',lineHeight:1.65,textAlign:'justify',hyphens:'auto'}}>{T(lang,'URBASOFIA acts as a bridge between research, policy and implementation, supporting cities in moving from strategy design to operational sustainable transformation. With a portfolio of more than 35 European projects and long-standing collaboration with public administrations, academia and other institutions, we combine analytical depth with operational delivery.',R.p3)}</p>
          </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,'Core activity',R.coreEyebrow)} size="display-2">{T(lang,'What we deliver',R.coreTitle)}</SectionTitle>
          <EnOnlyNote lang={lang} />
          <div data-reveal="" style={{marginTop:'var(--space-7)'}}>
            <Accordion items={D.coreActivity.map(a=>({title:a.title,body:a.body}))} />
          </div>
        </div>
      </section>

      <section style={{background:'var(--navy)',position:'relative',overflow:'hidden'}}>
        <HandArrow kind="line" base=".." width="70%" data-parallax="0.1" style={{position:'absolute',left:'-10%',bottom:'10%'}} />
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)',position:'relative'}}>
          <SectionTitle inverse eyebrow={T(lang,'Mission',R.missionEyebrow)} size="display-2">{T(lang,'When knowledge gives direction',R.missionTitle)}</SectionTitle>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,300px),1fr))',gap:'var(--col-gap)',marginTop:'var(--space-7)',color:'var(--cream)'}}>
            <p data-reveal={0} style={{fontSize:'var(--text-small)',lineHeight:1.7,textAlign:'justify',hyphens:'auto'}}>{T(lang,'URBASOFIA’s mission is to guide cities and regions through climate and digital transitions by transforming knowledge into coherent urban action. We work to ensure that sustainability, circularity, cultural heritage and regeneration are not treated as isolated themes, but integrated into long-term territorial development processes.',R.m1)}</p>
            <p data-reveal={100} style={{fontSize:'var(--text-small)',lineHeight:1.7,textAlign:'justify',hyphens:'auto'}}>{T(lang,'We place community well-being at the core of our approach. From applied research and pilot experimentation to capacity-building for public administrations and the design of strategies and masterplans, our work is grounded in participatory, context-based methodologies that generate social value, environmental responsibility and inclusive outcomes.',R.m2)}</p>
          </div>
        </div>
      </section>
    </main>
  );
}

function MethodScreen({ lang }) {
  const D = window.USDATA;
  const T = window.UST, R = D.ro.method;
  return (
    <main>
      <section style={{background:'var(--mint)',position:'relative',overflow:'hidden'}}>
        <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)',position:'relative'}}>
          <SectionTitle eyebrow={T(lang,'The URBASOFIA Method',R.eyebrow)}>{T(lang,<React.Fragment>Co-Creating, Planning, Innovating &mdash; TOGETHER</React.Fragment>,R.title)}</SectionTitle>
          <p style={{fontSize:'var(--text-small)',lineHeight:1.65,textAlign:'justify',hyphens:'auto',maxWidth:'var(--measure-prose)',marginTop:'var(--space-6)'}}>{T(lang,'At URBASOFIA, our practice is built on a methodological foundation that we apply consistently across research, pilot actions, strategic consultancy and territorial development processes. What unites them is a shared belief that meaningful change requires both structure and adaptability, creativity and evidence, an integrated approach, and most of all, people.',R.intro)}</p>
          <HandArrow kind="arrow" base=".." width="34%" rotate={-8} data-parallax="0.12" style={{position:'absolute',right:'-4%',bottom:'-4%'}} />
        </div>
      </section>
      <section style={{background:'var(--cream)'}}>
        <div data-reveal="" style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)'}}>
          <EnOnlyNote lang={lang} style={{marginTop:0,marginBottom:'var(--space-5)'}} />
          <Accordion items={D.pillars} />
        </div>
      </section>
    </main>
  );
}

function TeamScreen({ lang }) {
  const D = window.USDATA;
  const T = window.UST, R = D.ro.team;
  return (
    <main style={{background:'var(--mint)'}}>
      <div style={{maxWidth:'var(--max-content)',margin:'0 auto',padding:'var(--section-y) var(--gutter)'}}>
        <SectionTitle subtitle={T(lang,'Eighteen planners, geographers, economists and policy specialists based in Bucharest.',R.subtitle)}>{T(lang,'Team','Echipa')}</SectionTitle>
        <p style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--coral)',marginTop:'var(--space-5)'}}>
          {T(lang,'Portraits from the URBASOFIA Brochure 2026.',R.note)}
        </p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))',gap:'var(--space-7) var(--space-5)',marginTop:'var(--space-8)'}}>
          {D.team.map((m,i)=>(
            <div key={m.name} data-reveal={(i%4)*80}>
              <TeamMember name={m.name} role={m.role} photo={'assets/team/photo-'+String(i+1).padStart(2,'0')+'.png'} size={132} />
              {m.email && (
                <div style={{textAlign:'center',marginTop:'var(--space-2)'}}>
                  <a href={'mailto:'+m.email} style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--navy)',borderBottom:'1px solid var(--coral)',wordBreak:'break-all'}}>{m.email}</a>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}

function ContactScreen({ lang }) {
  const c = window.USDATA.contact;
  const T = window.UST, R = window.USDATA.ro.contact;
  const [sent, setSent] = React.useState(false);
  const [ok, setOk] = React.useState(false);
  return (
    <main>
      <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="">
            <SectionTitle eyebrow={T(lang,'Contact',R.eyebrow)}>{T(lang,<React.Fragment>Let&rsquo;s talk about your territory</React.Fragment>,R.title)}</SectionTitle>
            <div style={{marginTop:'var(--space-7)',maxWidth:460}}>
              <MetaBox columns={1} items={[{label:T(lang,'Phone',R.phone),value:c.phone},{label:'Email',value:c.email,href:'mailto:'+c.email},{label:T(lang,'Address',R.address),value:c.address},{label:T(lang,'VAT Code',R.vat),value:c.vat}]} />
            </div>
            <div style={{marginTop:'var(--space-6)',display:'flex',gap:'var(--space-7)'}}>
              <StatFigure value="35+" label={T(lang,'European projects',R.statProjects)} />
              <StatFigure value="18" label={T(lang,'Specialists',R.statSpecialists)} />
            </div>
          </div>
          <form data-reveal={140} onSubmit={(e)=>{e.preventDefault();setSent(true)}} style={{display:'flex',flexDirection:'column',gap:'var(--space-5)',borderTop:'4px solid var(--navy)',paddingTop:'var(--space-6)'}}>
            <Input label={T(lang,'Name',R.name)} required placeholder={T(lang,'Your name',R.namePh)} />
            <Input label={T(lang,'Institution',R.institution)} placeholder={T(lang,'City, region, university or consortium',R.institutionPh)} />
            <Input label="Email" type="email" required placeholder={T(lang,'name@example.eu',R.emailPh)} />
            <Select label={T(lang,'Enquiry about',R.enquiry)} options={T(lang,['Strategic planning & urban management','Research & innovation partnership','Participatory governance & policy design','Other'],R.enquiryOptions)} />
            <Input label={T(lang,'Message',R.message)} multiline rows={5} placeholder={T(lang,'A few lines about the territory and the stage you are at.',R.messagePh)} />
            <Checkbox label={T(lang,'I agree to be contacted about this enquiry.',R.agree)} checked={ok} onChange={()=>setOk(!ok)} />
            <div><Button variant="primary" trailingArrow>{sent ? T(lang,'Thank you — [demo, not sent]',R.sent) : T(lang,'Send enquiry',R.send)}</Button></div>
            <span style={{fontFamily:'var(--font-label)',fontSize:'var(--text-micro)',color:'var(--text-muted)'}}>{T(lang,'[demo] This form does not submit anywhere.',R.formNote)}</span>
          </form>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { AboutScreen, MethodScreen, TeamScreen, ContactScreen });
