/* =========== About / Team =========== */
function About(){
  const t = useT();
  useDocumentMeta({
    title: t('Team · Phaedra, Egon, Joshua en Ming','Team · Phaedra, Egon, Joshua and Ming'),
    description: t('Maak kennis met het Wedding Visions team. Een klein, gedreven team van fotografen en videografen dat huwelijken vastlegt met een persoonlijke en oprechte aanpak.','Meet the Wedding Visions team. A small, driven team of photographers and videographers who capture weddings with a personal and sincere approach.'),
    image: '/assets/team-header.jpg',
  });

  // Structured data: team as Person array (canonical NL roles via tphrase-free raw data).
  useJsonLd('team', {
    '@context':'https://schema.org',
    '@graph': (SITE.team || []).map(m => ({
      '@type':'Person',
      name: m.name,
      jobTitle: (typeof m.role === 'string') ? m.role
                : (m.role && (m.role.nl || m.role.en)) || undefined,
      image: (m.img && m.img.startsWith('http')) ? m.img : (SITE_ORIGIN + m.img),
      worksFor: { '@type':'Organization', name:'Wedding Visions', url: SITE_ORIGIN },
    })),
  });

  return (
    <Page label="02 Team">
      <Nav current="/team" solid/>

      <section style={{paddingTop:160, paddingBottom:80}}>
        <div className="wrap">
          <div className="reveal" style={{maxWidth:1100}}>
            <div className="h-number">TEAM</div>
            <h1 className="h-display" style={{fontSize:'clamp(44px,6vw,88px)', marginTop:40, lineHeight:.9}}>
              {t(<>Een <span className="italic-serif">klein</span><br/> gedreven team.</>,
                 <>A <span className="italic-serif">small</span><br/> driven team.</>)}
            </h1>
          </div>
        </div>
      </section>

      <section>
        <div className="wrap-wide">
          <Img src="/assets/team-header.jpg" alt={t('Het team van Wedding Visions, trouwfotografen en -videografen uit Roeselare, België','The Wedding Visions team, wedding photographers and videographers from Roeselare, Belgium')} ar="21/9" className="reveal"/>
        </div>
      </section>

      <section className="about-pad" style={{padding:'140px 0'}}>
        <div className="wrap manifest-grid" style={{display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:80}}>
          <div className="reveal">
            <div className="rule" style={{margin:'0 0 24px', width:80}}/>
            <p className="h-hand" style={{fontSize:32, lineHeight:1.2, color:'var(--ink-80)'}}>
              {t(<>Waarom we<br/>dit doen.</>, <>Why we<br/>do this.</>)}
            </p>
          </div>
          <div className="reveal">
            <p style={{fontSize:24, lineHeight:1.5, fontFamily:'var(--serif)', fontStyle:'italic', marginBottom:40, color:'var(--ink)'}}>
              {t('"Wedding Visions is ontstaan uit de wens om trouwdagen weer persoonlijk en met oprechte aandacht vast te leggen."','"Wedding Visions was born from the wish to capture wedding days personally and with genuine attention once again."')}
            </p>
            <p style={{fontSize:16, lineHeight:1.75, color:'var(--ink-80)', marginBottom:20}}>
              {t('We zijn Wedding Visions gestart vanuit één eenvoudige overtuiging: het kon persoonlijker. Als freelancers merkten we dat beelden niet altijd met dezelfde zorg en nauwkeurigheid werden nabewerkt. Dat wilden we anders aanpakken, met meer aandacht, consistentie en een persoonlijke toets in elk beeld.','We started Wedding Visions from one simple conviction: it could be more personal. As freelancers, we noticed that images weren\'t always edited with the same care and precision. We wanted to approach that differently, with more attention, consistency and a personal touch in every image.')}
            </p>
            <p style={{fontSize:16, lineHeight:1.75, color:'var(--ink-80)', marginBottom:20}}>
              {t('Bij ons staan oprecht contact en persoonlijkheid centraal. De volledige montage gebeurt intern, op basis van duidelijke briefings, zodat we precies weten wat er die dag gebeurde en hoe het écht aanvoelde. Phaedra bewerkt nog steeds alle foto\'s zelf, zodat alles uniform is aan wat jullie op onze site terugvinden. We vertrouwen niet louter op AI-nabewerking, omdat elke foto een uniek verhaal vertelt dat geen algoritme kan vervangen.','For us, sincere contact and personality come first. All editing is done in-house, based on clear briefings, so we know exactly what happened that day and how it truly felt. Phaedra still edits all photos herself, so everything is consistent with what you find on our site. We don\'t rely solely on AI editing, because every photo tells a unique story that no algorithm can replace.')}
            </p>
            <p style={{fontSize:16, lineHeight:1.75, color:'var(--ink-80)'}}>
              {t('Daarom nemen we bewust slechts een beperkt aantal huwelijken per seizoen aan, met ons vast team. Vol is vol. We nemen nooit trouwdagen aan om ze vervolgens uit te besteden aan externen die we niet kennen of aan onervaren collega\'s. Kwaliteit gaat bij ons altijd voor kwantiteit.','That\'s why we deliberately take on only a limited number of weddings per season, with our permanent team. Full is full. We never accept wedding days only to outsource them to external people we don\'t know or to inexperienced colleagues. With us, quality always comes before quantity.')}
            </p>
          </div>
        </div>
      </section>

      <section className="about-pad" style={{background:'var(--paper)', padding:'160px 0'}}>
        <div className="wrap">
          <div className="reveal" style={{marginBottom:100}}>
            <div className="h-number">{t('ONS TEAM','OUR TEAM')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(40px,5.5vw,76px)', marginTop:24, lineHeight:.9}}>
              {t(<>Leer ons<br/> <span className="italic-serif">kennen</span>.</>,
                 <>Get to<br/> <span className="italic-serif">know us</span>.</>)}
            </h2>
          </div>

          <div className="team-stack" style={{display:'flex', flexDirection:'column', gap:140}}>
            {SITE.team.map((m,i)=>{
              const left = i%2===0;
              return (
                <div key={m.name} className="reveal team-row" style={{display:'grid', gridTemplateColumns: left? '1fr 1.2fr':'1.2fr 1fr', gap:80, alignItems:'start'}}>
                  {left ? (<>
                    <Img src={m.img} alt={m.name + ' — ' + tphrase(m.role) + ' ' + t('bij Wedding Visions','at Wedding Visions')} ar="4/5"/>
                    <TeamContent {...m}/>
                  </>) : (<>
                    <TeamContent {...m}/>
                    <Img src={m.img} alt={m.name + ' — ' + tphrase(m.role) + ' ' + t('bij Wedding Visions','at Wedding Visions')} ar="4/5"/>
                  </>)}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="about-pad" style={{padding:'160px 0', textAlign:'center'}}>
        <div className="wrap">
          <div className="reveal">
            <div className="h-number">{t('VERHALEN DIE WE CREËREN','STORIES WE CREATE')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(44px,6vw,88px)', marginTop:40, lineHeight:.9}}>
              {t(<>Wij creëren<br/><span className="italic-serif">verhalen</span>.</>,
                 <>We create<br/><span className="italic-serif">stories</span>.</>)}
            </h2>
            <div style={{marginTop:60, display:'flex', justifyContent:'center', gap:16, flexWrap:'wrap'}}>
              <Link to="/portfolio" className="btn btn-primary" data-cursor="hover">{t('Bekijk alle verhalen','View all stories')} <span className="arrow"></span></Link>
              <Link to="/contact" className="btn btn-ghost" data-cursor="hover">{t('Plan een gesprek','Book a call')} <span className="arrow"></span></Link>
            </div>
          </div>
        </div>
      </section>

      <Footer/>

      <style>{`
        @media (max-width:1024px){
          .about-pad{padding:110px 0 !important}
          .manifest-grid{gap:56px !important}
          .team-row{gap:56px !important}
          .team-stack{gap:110px !important}
        }
        @media (max-width:900px){
          .about-pad{padding:90px 0 !important}
          .manifest-grid{grid-template-columns:1fr !important; gap:40px !important}
          .team-row{grid-template-columns:1fr !important; gap:32px !important}
          .team-stack{gap:90px !important}
        }
        @media (max-width:600px){
          .about-pad{padding:70px 0 !important}
          .manifest-grid{gap:32px !important}
          .team-row{gap:24px !important}
          .team-stack{gap:72px !important}
        }
        @media (orientation:landscape) and (max-height:520px){
          .about-pad{padding:80px 0 !important}
          .team-row{grid-template-columns:1fr !important; gap:28px !important}
        }
      `}</style>
    </Page>
  );
}

function TeamContent({name, role, age, tags, intro, bio}){
  return (
    <div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', borderBottom:'1px solid var(--ink-20)', paddingBottom:16, marginBottom:32}}>
        <div className="h-number">{tphrase(role).toUpperCase()}</div>
      </div>
      <h3 className="h-display" style={{fontSize:'clamp(40px,5vw,72px)', lineHeight:1, marginBottom:24}}>{name}</h3>
      <p className="h-hand" style={{fontSize:22, color:'var(--ink-80)', marginBottom:32, lineHeight:1.4}}>{tphrase(intro)}</p>
      <p style={{fontSize:15, lineHeight:1.75, color:'var(--ink-80)', marginBottom:32}}>{tphrase(bio)}</p>
      <div style={{display:'flex', flexWrap:'wrap', gap:12}}>
        {tags.map((tag,i)=>(
          <span key={i} style={{padding:'8px 16px', border:'1px solid var(--ink)', borderRadius:999, fontSize:11, letterSpacing:'.22em', textTransform:'uppercase'}}>{tphrase(tag)}</span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { About });