// Page À propos — équipe Think Architecture
function AboutPage({ navigate }) {
  // Équipe permanente de l'agence
  const team = [
  {
    name: 'Mariline Bresle',
    role: 'Architecte DPLG · Gérante',
    photo: 'assets/team/mariline-new.jpg',
    strengths: ['Écoute', 'Sensibilité', 'Créativité', 'Respect', 'Empathie', 'Réactivité', 'Engagement'],
    quote:
    "Après 18 ans d'expérience dans une agence d'architecture qui m'a énormément appris, l'envie de m'accomplir a été une évidence. L'agence Think Architecture est née en 2019. Un projet, c'est avant tout une rencontre, une histoire à écrire, à vivre. C'est le travail d'une équipe, maître d'ouvrage, bureaux d'étude et artisans en synergie : les uns avec les autres pour trouver les solutions."
  },
  {
    name: 'Catherine Garroux',
    role: 'Secrétaire indépendante',
    photo: 'assets/team/catherine.jpg',
    strengths: ['Rigueur', 'Autonomie', 'Esprit critique', 'Diplomatie'],
    quote:
    "Une (très !!!) longue expérience, des compétences, une écoute attentive et une bonne dose de bienveillance, me permettent de vous garantir réactivité et efficacité !"
  },
  {
    name: 'Sarah Duchier',
    role: 'Assistante indépendante',
    photo: 'assets/team/sarah.jpg',
    strengths: ['Énergique', 'Motivée', 'Sérieuse', 'Rigoureuse', 'Indépendante'],
    quote:
    "Mes nombreuses années à travailler en banque m'ont appris à être à l'écoute des gens pour réaliser avec eux leur projet… je suis toujours partante !"
  },
  {
    name: 'Noémie Delay-Chomette',
    role: 'Architecte DE · Collaboratrice',
    photo: 'assets/team/noemie.jpg',
    strengths: ['Volontaire', 'Discrète', 'Efficace', 'Sérieuse', 'À l\'écoute'],
    quote:
    "Après avoir travaillé en agence d'architecture, je me suis lancée dans la création de bijoux et pris le temps d'être une jeune maman… artiste dans l'âme, je suis revenue dans l'architecture avec l'envie de continuer ma formation sur le terrain et de m'accomplir dans ce métier passionnant…"
  }];


  // Personnes qui sont passées par l'agence
  const alumni = [
  {
    name: 'Mattéo Violante',
    role: 'Est venu chez nous',
    photo: 'assets/team/matheo.jpg'
  },
  {
    name: 'Laura Basco',
    role: 'Est venue chez nous',
    photo: 'assets/team/laura.jpg'
  },
  {
    name: 'Laurence Mariotti',
    role: 'Est venue chez nous',
    photo: 'assets/team/laurence.jpg',
    objPos: 'center center'
  },
  {
    name: 'Yolann Tersèche',
    role: 'Est venu chez nous',
    photo: 'assets/team/yolann.jpg',
    objPos: 'center 5%'
  },
  {
    name: 'Liam Jourdan',
    role: 'Est venu chez nous',
    photo: 'assets/team/liam.jpg',
    objPos: 'center 20%',
    bw: true
  },
  {
    name: 'Emma Boutinaud',
    role: 'Est venue chez nous',
    photo: 'assets/team/emma.jpg',
    objPos: 'center 30%',
    bw: true
  },
  {
    name: 'Sarah Seclet-Bougoufa',
    role: 'Est venue chez nous',
    photo: 'assets/team/sarah-seclet.jpg',
    objPos: 'center center',
    bw: true
  }];


  const principles = [
  { num: '01', title: 'Un projet, une rencontre', italic: 'rencontre', desc: "Chaque projet commence par une histoire à écrire ensemble. des choix, des idées des envies....Nous écoutons d'abord, dessinons ensuite." },
  { num: '02', title: 'Un lieu, un vécu', italic: 'vécu', desc: "Le sol, le climat, le voisinage. L'histoire du lieu, de ses occupants tout est important pour faire naître un projet." },
  { num: '03', title: 'Une équipe en synergie', italic: 'synergie', desc: "Les uns avec les autres pour trouver les solutions. Le client, l'architecte, les bureaux d'études, les entreprises, les artisans — tout le monde à la même table." },
  { num: '04', title: 'Rigueur et bienveillance', italic: 'bienveillance', desc: "Précision dans les détails, dans le respect du budget et douceur dans la relation. C'est ce qui fait avancer un projet jusqu'à la livraison." },
  { num: '05', title: 'Présence sur le chantier', italic: 'chantier', desc: "Nous restons engagés du permis jusqu'à la réception. L'équipe de maîtrise d'œuvre c'est une garantie pour un projet cadré avec un suivi de chantier rigoureux." },
  { num: '06', title: 'Des bâtiments qui durent', italic: 'durent', desc: "Performances énergétiques, thermiques, parasismiques suivant la réglementation en vigueur. Une architecture respectueuse de l'environnement. Nous concevons pour le long terme, pas pour la photo de livraison." }];


  return (
    <main className="page-enter">
      <section className="page-head">
        <div className="page-head__row">
          <h1 className="page-head__title">
            À propos<br />
            de <span className="italic">l'Agence.</span>
          </h1>
          <div className="page-head__logo">
            <div className="page-head__count">
              Dirigé par <em>Mariline Bresle</em><br />
              Architecte DPLG · Gérante
            </div>
            <blockquote style={{
              marginTop: 24,
              maxWidth: 340,
              fontFamily: 'var(--serif)',
              fontStyle: 'italic',
              fontSize: 16,
              lineHeight: 1.45,
              color: 'var(--ink-soft)',
              fontWeight: 500,
              textAlign: 'right',
              borderTop: '1px solid var(--line)',
              paddingTop: 16
            }}>
              <span style={{ color: 'var(--accent)', fontSize: 28, lineHeight: 0, verticalAlign: '-0.18em', marginRight: 4 }}>“</span>
              Après 18 ans d'expérience dans une agence d'architecture qui m'a énormément appris, l'envie de m'accomplir a été une évidence. L'agence Think Architecture est née en 2019 à Vienne dans l'Isère, une ville dynamique chargée d'histoire que j'affectionne particulièrement. Un projet, c'est avant tout une rencontre, une histoire à écrire, à vivre. C'est le travail d'une équipe en synergie : les uns avec les autres pour trouver les solutions.
            </blockquote>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="about-grid">
            <Reveal className="about-grid__img">
              <img
                src="assets/about-vienne.jpg"
                alt="Temple d'Auguste et de Livie — Vienne"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }} />
              
            </Reveal>
            <Reveal className="about-grid__copy" delay={120}>
              <span className="label">— l'agence</span>
              <p>
                Think Architecture est une agence d'architecture située à Vienne (38) dirigée par <span className="italic">Mariline Bresle</span>, architecte DPLG depuis 2001 de l'ENSAG. Nous intervenons sur des projets <span className="italic">publics, privés, d'habitation, médicaux, petite enfance et tertiaires..</span>.
              </p>
              <p>L'agence s'appuie sur une équipe unie et des partenaires de confiance — bureaux d'études, économistes, artisans — pour mener à bien chaque projet de la première esquisse jusqu'à la réception.

              </p>
              <p>
                Notre approche est simple : <span className="italic">écouter</span>, comprendre, faire de vos idées une réalité. Un projet est avant tout une rencontre, et une histoire à écrire.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section section--alt" style={{ position: 'relative', overflow: 'hidden' }}>
        <FloorPlanBg opacity={0.07} />
        <div className="container" style={{ position: 'relative' }}>
          <div className="sec-head">
            <Reveal>
              <span className="section-tag" style={{ marginBottom: 20, display: 'inline-flex' }}>L'équipe</span>
              <h2 className="sec-head__title">
                le savoir et la sensibilité de chaque personne compte,<br />
                pour <span className="italic">mener à bien un projet !</span>
              </h2>
            </Reveal>
            <Reveal className="sec-head__right" delay={120}>
              <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 18, color: 'var(--ink-muted)', maxWidth: 320, textAlign: 'right', display: 'block' }}>L'agence s'appuie sur des partenaires de confiance — bureaux d'études, économistes, entreprises — pour chaque projet.

              </span>
            </Reveal>
          </div>

          <div className="team-detail-grid">
            {team.map((m, i) =>
            <Reveal key={m.name} className="team-detail" delay={i * 100}>
                <div className="team-detail__img">
                  <img
                  src={m.photo}
                  alt={m.name}
                  loading="lazy"
                  style={m.name === 'Mariline Bresle' ?
                  { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block', transform: 'scale(1.18)', transformOrigin: 'center top', filter: 'grayscale(1) contrast(0.82) brightness(1.06)' } :
                  m.name === 'Sarah Duchier' ?
                  { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block', filter: 'grayscale(1) contrast(0.92)' } :
                  m.name === 'Noémie Delay-Chomette' ?
                  { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%', display: 'block', filter: 'grayscale(1) contrast(0.92)' } :
                  { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
                
                </div>
                <div className="team-detail__body">
                  <h3 className="team-detail__name">{m.name}</h3>
                  <div className="team-detail__role">{m.role}</div>

                  <div className="team-detail__strengths">
                    <span className="team-detail__strengths-label">Points forts</span>
                    <div className="strength-row">
                      {m.strengths.map((s) =>
                    <span key={s} className="strength-chip">{s}</span>
                    )}
                    </div>
                  </div>

                  {m.quote &&
                <blockquote className="team-detail__quote">
                    <span className="quote-mark" aria-hidden="true">“</span>
                    {m.quote}
                  </blockquote>}
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sec-head">
            <Reveal>
              <span className="section-tag" style={{ marginBottom: 20, display: 'inline-flex' }}>Sont venus chez nous</span>
              <h2 className="sec-head__title">
                Celles et ceux qui ont<br />
                <span className="italic">contribué</span> à l'agence.
              </h2>
            </Reveal>
          </div>
          <div className="alumni-grid">
            {alumni.map((p, i) =>
            <Reveal key={p.name} className="alumni-card" delay={i * 80}>
                <div className="alumni-card__img">
                  <img
                  src={p.photo}
                  alt={p.name}
                  loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: p.objPos || 'center top', display: 'block', filter: p.bw ? 'grayscale(1)' : 'none' }} />
                
                </div>
                <h3 className="alumni-card__name">{p.name}</h3>
                <div className="alumni-card__role">{p.role}</div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      <section className="section section--alt" style={{ position: 'relative', overflow: 'hidden' }}>
        <FloorPlanBg opacity={0.07} />
        <div className="container" style={{ position: 'relative' }}>
          <div className="sec-head">
            <Reveal>
              <span className="section-tag" style={{ marginBottom: 20, display: 'inline-flex' }}>Principes</span>
              <h2 className="sec-head__title">
                Six choses sur lesquelles<br />
                nous <span className="italic">revenons toujours.</span>
              </h2>
            </Reveal>
          </div>
          <div className="principles">
            {principles.map((p, i) =>
            <Reveal key={p.num} className="principle" delay={i * 60}>
                <div className="principle__num">— {p.num}</div>
                <h3 className="principle__title">
                  {p.title.replace(p.italic, '')}
                  <span className="italic">{p.italic}</span>
                </h3>
                <p className="principle__desc">{p.desc}</p>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      <ClosingCTA navigate={navigate} />
    </main>);

}

window.AboutPage = AboutPage;