// Sections.jsx — Présentation, Vidéo, Services, Expertise, Process, Témoignages

function Presentation({ witty, onCTA }) {
  return (
    <section className="ntr-section ntr-presentation" data-screen-label="Présentation" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-pres-grid">
        <div className="ntr-pres-portrait">
          <img src={window.ntrAsset('maximePortrait1')} alt="Maxime Tejada" style={{ height: "559.992px", width: "800px", objectFit: "cover", padding: "0px 35px 100px 0px" }} />
          <div className="ntr-pres-card">
            <div className="ntr-pres-card-name" style={{ color: "rgb(1, 26, 8)" }}>Maxime TEJADA</div>
            <div className="ntr-pres-card-role">AGENT IMMOBILIER · DIPLÔMÉ NOTAIRE</div>
            <div className="ntr-pres-card-rule" />
            <div className="ntr-pres-card-meta" style={{ color: "rgb(1, 26, 8)" }}>8 années en office notarial · Titulaire du Diplôme Supérieur du Notariat - Spécialiste en droit immobilier, droit de la famille et gestion de patrimoine. </div>
          </div>
        </div>
        <div className="ntr-pres-text">
          <div className="ntr-eyebrow"><span className="ntr-rule" /> L'agence</div>
          <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
            L'agence qui partage<br />l'<em>A.D.N.</em> du notariat.
          </h2>
          <p className="ntr-lead" style={{ textAlign: "justify" }}>
            {witty ?
            <>Huit ans à corriger les erreurs et à régler les problématiques des dossiers de vente dans une étude.<br />Un jour, on se dit qu'il vaudrait mieux les éviter en amont.<br /><br />NOSTERRA est née de ce raisonnement, qui allie la proximité de terrain à une expertise rigoureuse.</> :
            "Fondée par un notaire assistant titulaire du D.S.N., NOSTERRA a été créée pour apporter à la négociation immobilière la rigueur, la sécurité et la qualité d'accompagnement acquises aux termes de huit années de pratique en étude."}
          </p>
          <p className="ntr-p" style={{ color: "rgb(1, 26, 8)", textAlign: "justify" }}>Parce que nous parlons le même langage que les études, notre collaboration facilite votre vente.
En anticipant les problématiques dès l'ouverture du dossier, vous gagnez du temps et votre transaction est facilitée.


          </p>
          <button className="ntr-btn ntr-btn--primary" onClick={onCTA} style={{ backgroundColor: "rgb(200, 117, 76)" }}>Parlons de votre projet</button>
          <div className="ntr-pres-sig">— Maxime</div>
        </div>
      </div>
    </section>);

}

function VideoSection({ witty }) {
  return (
    <section className="ntr-section ntr-video" data-screen-label="Vidéo">
      <div className="ntr-video-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> L'audit NOSTERRA <span className="ntr-rule" /></div>
        <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
          {witty ?
          "Maxime explique. Sans baratin." :
          "Découvrez NOSTERRA en images"}
        </h2>
        <p className="ntr-sub" style={{ color: "rgb(1, 26, 8)" }}>
          {witty ?
          "Trois minutes pour comprendre pourquoi un audit avant la vente change tout." :
          "Trois minutes pour comprendre pourquoi un audit juridique pré-vente change tout."}
        </p>
      </div>
      <div className="ntr-video-frame">
        <div className="ntr-video-tape">
          <span style={{ backgroundColor: "rgb(200, 117, 76)" }} /><span style={{ color: "rgb(1, 26, 8)", backgroundColor: "rgb(1, 26, 8)" }} /><span style={{ backgroundColor: "rgb(200, 117, 76)", color: "rgb(200, 117, 76)" }} /><span style={{ color: "rgb(1, 26, 8)", backgroundColor: "rgb(1, 26, 8)" }} /><span style={{ color: "rgb(200, 117, 76)", backgroundColor: "rgb(200, 117, 76)" }} />
        </div>
        <div className="ntr-video-screen">
          <div className="ntr-video-poster">
            <img src={window.ntrAsset('maximePortrait2')} alt="" />
            <div className="ntr-video-overlay" />
            <button className="ntr-video-play" aria-label="Lire la vidéo">
              <svg width="28" height="32" viewBox="0 0 28 32" fill="currentColor"><path d="M2 2l24 14L2 30z" /></svg>
            </button>
            <div className="ntr-video-caption">
              <div className="ntr-video-caption-eyebrow" style={{ color: "rgb(200, 117, 76)" }}>Épisode 01</div>
              <div className="ntr-video-caption-title">Pourquoi un audit avant la vente ?</div>
              <div className="ntr-video-caption-meta">3 min 12 · Maxime Tejada, diplômé notaire</div>
            </div>
          </div>
        </div>
        <div className="ntr-video-tape">
          <span style={{ backgroundColor: "rgb(200, 117, 76)" }} /><span style={{ color: "rgb(1, 26, 8)", backgroundColor: "rgb(1, 26, 8)" }} /><span style={{ color: "rgb(200, 117, 76)", backgroundColor: "rgb(200, 117, 76)" }} />
        </div>
      </div>
    </section>);

}

function Services({ witty, onCTA }) {
  return (
    <section className="ntr-section ntr-services" data-screen-label="Services" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-section-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> Nos services <span className="ntr-rule" /></div>
        <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
          {witty ?
          <>Vendez. Achetez. Louez.<br /><em>Sans stress.</em></> :
          <>Vendez, achetez, louez<br /><em>sans stress.</em></>}
        </h2>
      </div>
      <div className="ntr-services-grid">
        {window.NOSTERRA_SERVICES.map((s, i) =>
        <article key={s.key} className="ntr-service-card">
            <div className="ntr-service-num">0{i + 1}</div>
            <h3 className="ntr-service-title"><em>{s.t}</em></h3>
            <div className="ntr-service-rule" />
            <p className="ntr-service-sub">{s.sub}</p>
            <ul className="ntr-service-list">
              {s.items.map((it, j) =>
            <li key={j}>
                  <span className="ntr-service-bullet">›</span>
                  <span>{it}</span>
                </li>
            )}
            </ul>
            <button className="ntr-service-cta" onClick={onCTA}>
              En savoir plus
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </button>
          </article>
        )}
      </div>
    </section>);

}

function Expertise({ witty }) {
  return (
    <section className="ntr-section ntr-expertise" data-screen-label="Expertise">
      <div className="ntr-expertise-watermark" aria-hidden="true">N</div>
      <div className="ntr-eyebrow ntr-eyebrow--inverse">
        <span className="ntr-rule ntr-rule--inverse" /> Bénéficiez de notre expertise <span className="ntr-rule ntr-rule--inverse" />
      </div>
      <h2 className="ntr-expertise-h2">
        {witty ?
        <>Une décennie à éplucher<br />les <em style={{ color: "rgb(1, 26, 8)" }}>actes</em>.</> :
        <>Huit ans en étude.<br />Mille dossiers <em>traités.</em></>}
      </h2>
      <div className="ntr-expertise-stats">
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>8<span></span></div>
          <div className="ntr-stat-big-l">années en office<br />notarial</div>
        </div>
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>1 000<span style={{ color: "rgb(249, 244, 238)", fontSize: "30px" }}>+</span></div>
          <div className="ntr-stat-big-l">dossiers<br />traités</div>
        </div>
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>40 +</div>
          <div className="ntr-stat-big-l">points de contrôle<br />avant signature</div>
        </div>
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>0</div>
          <div className="ntr-stat-big-l">surprise au<br />rendez-vous notaire</div>
        </div>
      </div>
    </section>);

}

function Process({ witty, onCTA }) {
  return (
    <section className="ntr-section ntr-process" data-screen-label="Process">
      <div className="ntr-section-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> Notre méthode <span className="ntr-rule" /></div>
        <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
          {witty ?
          <>Pourquoi ne pas <em>nous rencontrer</em> ?</> :
          <>Quatre étapes vers <em>la sérénité.</em></>}
        </h2>
      </div>
      <div className="ntr-process-steps">
        {window.NOSTERRA_PROCESS.map((p, i) =>
        <div key={p.n} className="ntr-process-step">
            <div className="ntr-process-num">{p.n}</div>
            <div className="ntr-process-body">
              <h3 className="ntr-process-title"><em>{p.t}</em></h3>
              <p className="ntr-process-text" style={{ color: "rgb(1, 26, 8)", textAlign: "justify" }}>{p.body}</p>
              {i === 3 &&
            <button className="ntr-btn ntr-btn--primary" onClick={onCTA} style={{ backgroundColor: "rgb(200, 117, 76)" }}>Prendre rendez-vous</button>
            }
            </div>
            <div className="ntr-process-line" aria-hidden="true" />
          </div>
        )}
      </div>
    </section>);

}

function Testimonials() {
  return (
    <section className="ntr-section ntr-testimonials" data-screen-label="Témoignages" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-section-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> Ils en parlent <span className="ntr-rule" /></div>
        <h2 className="ntr-h2">Nos clients <em>satisfaits.</em></h2>
      </div>
      <div className="ntr-testimonials-grid">
        {window.NOSTERRA_TESTIMONIALS.map((t, i) =>
        <article key={i} className="ntr-testimonial">
            <image-slot
            id={`testimonial-avatar-${i}`}
            class="ntr-testimonial-avatar"
            shape="circle"
            placeholder={`Photo ${t.name}`} style={{ borderRadius: "50px", margin: "-109px 44px 20px", width: "170px" }} />
            <div className="ntr-testimonial-quote">“</div>
            <p className="ntr-testimonial-text">{t.quote}</p>
            <div className="ntr-testimonial-rule" />
            <div className="ntr-testimonial-name">{t.name}</div>
            <div className="ntr-testimonial-meta">{t.loc}</div>
          </article>
        )}
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// Variantes indépendantes pour la page « L'agence ».
// Ces composants sont des copies autonomes : éditer la page
// L'agence ici n'affecte PAS la page Accueil (et inversement).
// ─────────────────────────────────────────────────────────────

function PresentationAgence({ witty, onCTA }) {
  return (
    <section className="ntr-section ntr-presentation" data-screen-label="Présentation (Agence)" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-pres-grid ntr-pres-grid--solo">
                <div className="ntr-pres-text">
          <div className="ntr-eyebrow"><span className="ntr-rule" /> L'agence</div>
          <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
            Quand la rigueur<br /><em>notariale</em> rencontre l'immobilier.
          </h2>
          <p className="ntr-lead" style={{ textAlign: "center" }}>
            {witty ? <>Bienvenue dans votre nouvelle agence immobilière, dédiée à vous offrir la tranquillité d'esprit dans vos projets.<br /><br />L'agence a pour but de mettre tout en œuvre pour garantir la paisibilité de vos projets immobiliers en anticipant les problématiques et en optimisant les délais.<br /><br />Notre expérience différenciante nous permet de vous prodiguer des conseils avisés et de vous protéger contre les risques avec le plus grand soin : rédaction de l'avant-contrat, analyse des documents légaux, gestion des formalités administratives.<br /><br />Parce que nous parlons le même langage que votre notaire, nous sommes proactifs dans le traitement du dossier et travaillons de pair avec lui pour optimiser les délais de signature.<br /><br />L'analyse du dossier en amont par nos soins et la réunion des différentes pièces nécessaires permettent en outre d'éviter les mauvaises surprises lors de l'ouverture du dossier à l'étude.<br /><br />La déontologie est notre essence. En choisissant notre agence, vous bénéficiez d'un accompagnement personnalisé et d'une transparence totale tout au long du processus.</> : "Fondée par un notaire assistant titulaire du D.S.N., NOSTERRA a été créée pour apporter à la négociation immobilière la rigueur, la sécurité et la qualité d'accompagnement acquises aux termes de huit années de pratique en étude."}
          </p>
          <p className="ntr-p" style={{ color: "rgb(1, 26, 8)" }}>



          </p>
          <button className="ntr-btn ntr-btn--primary" onClick={onCTA} style={{ backgroundColor: "rgb(200, 117, 76)", textAlign: "center" }}>Parlons de votre projet</button>
          <div className="ntr-pres-sig" style={{ fontSize: "44px" }}>Curieux ?
Prenez le temps de découvrir nos valeurs ci-dessous</div>
        </div>
      </div>
    </section>);
}

function MaximeAgence({ onCTA }) {
  return (
    <section className="ntr-section ntr-presentation ntr-maxime" data-screen-label="Maxime (Agence)" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-pres-grid">
        <div className="ntr-pres-portrait">
          <img src={window.ntrAsset('maximeSitting')} alt="Maxime Tejada" />
          <div className="ntr-pres-card">
            <div className="ntr-pres-card-name" style={{ color: "rgb(1, 26, 8)" }}>Maxime TEJADA</div>
            <div className="ntr-pres-card-role">AGENT IMMOBILIER · DIPLÔMÉ NOTAIRE</div>
            <div className="ntr-pres-card-rule" />
            <div className="ntr-pres-card-meta" style={{ color: "rgb(1, 26, 8)", fontSize: "16px", fontStyle: "italic" }}>« Honnêteté, transparence, convivialité…<br />De la plume à la clef. »</div>
          </div>
        </div>
        <div className="ntr-pres-text">
          <div className="ntr-eyebrow"><span className="ntr-rule" /> Le fondateur</div>
          <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
            Un <em>parcours</em><br />à votre service.
          </h2>
          <p className="ntr-p" style={{ color: "rgb(1, 26, 8)", textAlign: "justify" }}>
            Ayant fait ses armes dans une étude notariale généraliste en Ardèche, Maxime se spécialise dans le service droit de la famille.
          </p>
          <p className="ntr-p" style={{ color: "rgb(1, 26, 8)", textAlign: "justify" }}>Il développe ensuite ses compétences en service gestion de patrimoine au sein d'une étude de Haute-Savoie, où il exerce les fonctions de Notaire assistant dès l'obtention de son diplôme de notaire en 2022.

À 31 ans, désireux de se réaliser davantage au contact de ses clients, Maxime fonde l'agence NOSTERRA pour mettre à profit son expérience dans une approche novatrice du métier d'agent immobilier.</p>
          <p className="ntr-p" style={{ color: "rgb(1, 26, 8)", textAlign: "justify" }}>

          </p>
          <p className="ntr-p" style={{ color: "rgb(1, 26, 8)", textAlign: "justify" }}>
            Un retour aux sources pour cet enfant du pays ayant grandi en Drôme et vivant désormais en Ardèche.
          </p>
          <button className="ntr-btn ntr-btn--primary" onClick={onCTA} style={{ backgroundColor: "rgb(200, 117, 76)", marginTop: "24px" }}>Rencontrer Maxime</button>
          <div className="ntr-pres-sig"></div>
        </div>
      </div>
    </section>);
}

function ExpertiseAgence({ witty }) {
  return (
    <section className="ntr-section ntr-expertise" data-screen-label="Expertise (Agence)">
      <div className="ntr-expertise-watermark" aria-hidden="true">N</div>
      <div className="ntr-eyebrow ntr-eyebrow--inverse">
        <span className="ntr-rule ntr-rule--inverse" /> Bénéficiez de notre expertise <span className="ntr-rule ntr-rule--inverse" />
      </div>
      <h2 className="ntr-expertise-h2">
        {witty ?
        <>Une carrière à éplucher<br />les <em style={{ color: "rgb(1, 26, 8)" }}>actes</em>.</> :
        <>Huit ans en étude.<br />Mille dossiers <em>traités.</em></>}
      </h2>
      <div className="ntr-expertise-stats">
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>8<span></span></div>
          <div className="ntr-stat-big-l">années en office<br />notarial</div>
        </div>
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>1 000<span style={{ color: "rgb(249, 244, 238)", fontSize: "30px" }}>+</span></div>
          <div className="ntr-stat-big-l">dossiers<br />traités</div>
        </div>
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>40 +</div>
          <div className="ntr-stat-big-l">points de contrôle<br />avant signature</div>
        </div>
        <div className="ntr-stat-big">
          <div className="ntr-stat-big-n" style={{ color: "rgb(249, 244, 238)" }}>0</div>
          <div className="ntr-stat-big-l">surprise au<br />rendez-vous notaire</div>
        </div>
      </div>
    </section>);

}

function TestimonialsAgence() {
  return (
    <section className="ntr-section ntr-testimonials" data-screen-label="Témoignages (Agence)" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-section-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> Ils en parlent <span className="ntr-rule" /></div>
        <h2 className="ntr-h2">Nos clients <em>satisfaits.</em></h2>
      </div>
      <div className="ntr-testimonials-grid">
        {window.NOSTERRA_TESTIMONIALS.map((t, i) =>
        <article key={i} className="ntr-testimonial">
            <div className="ntr-testimonial-quote">“</div>
            <p className="ntr-testimonial-text">{t.quote}</p>
            <div className="ntr-testimonial-rule" />
            <div className="ntr-testimonial-name">{t.name}</div>
            <div className="ntr-testimonial-meta">{t.loc}</div>
          </article>
        )}
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────
// Variante indépendante pour la page « Services ».
// Lit NOSTERRA_SERVICES_PAGE — éditer la page Services ici
// n'affecte PAS la page Accueil (et inversement).
// ─────────────────────────────────────────────────────────────
function ServicesPage({ witty, onCTA }) {
  return (
    <section className="ntr-section ntr-services" data-screen-label="Services (Page)" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-section-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> Nos services <span className="ntr-rule" /></div>
        <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
          {witty ?
          <>Vendez. Achetez. Louez.<br /><em>Sans stress.</em></> :
          <>Vendez, achetez, louez<br /><em>sans stress.</em></>}
        </h2>
      </div>
      <div className="ntr-services-grid">
        {window.NOSTERRA_SERVICES_PAGE.map((s, i) =>
        <article key={s.key} className="ntr-service-card">
            <div className="ntr-service-num">0{i + 1}</div>
            <h3 className="ntr-service-title"><em>{s.t}</em></h3>
            <div className="ntr-service-rule" />
            <p className="ntr-service-sub">{s.sub}</p>
            <ul className="ntr-service-list">
              {s.items.map((it, j) =>
            <li key={j}>
                  <span className="ntr-service-bullet">›</span>
                  <span>{it}</span>
                </li>
            )}
            </ul>
            <button className="ntr-service-cta ntr-service-cta--tight" onClick={onCTA}>
              En savoir plus
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </button>
          </article>
        )}
      </div>
    </section>);

}

function ValeursAgence() {
  const piliers = [
  {
    n: "I",
    key: "valorisation",
    title: "La mise en valeur de votre bien",
    img: window.ntrAsset('visuelMiseEnValeur'),
    alt: "Mise en valeur — avant / avec NOSTERRA",
    body: [
    "Dans le cadre de notre engagement à maximiser la valeur de votre bien, notre agence immobilière propose les dernières solutions telles que la visite virtuelle 360°. Cette technologie immersive permet aux potentiels acquéreurs de visiter votre bien depuis le confort de leur domicile, leur offrant une expérience interactive et engageante.",
    "En complément, nous réalisons des prises de vues aériennes pour mettre en avant votre propriété sous un nouvel angle.",
    "Pour rendre votre bien encore plus attractif, nous créons lorsque cela est pertinent des projections 3D qui permettent de visualiser les aménagements possibles.",
    "Nous vous fournirons des préconisations concernant les travaux à réaliser (petites rénovations ou améliorations esthétiques) pour valoriser votre bien et faire ressortir le meilleur de votre propriété afin d'attirer davantage d'acquéreurs.",
    "Enfin, nous mettons en œuvre une stratégie de promotion et d'animation de votre annonce à travers divers canaux, incluant la mise en œuvre de vidéos de présentation et une présence active sur les réseaux sociaux. Cette approche dynamique garantit une visibilité accrue de votre bien, maximisant ainsi vos chances de vente dans les meilleurs délais."]

  },
  {
    n: "II",
    key: "securite",
    title: "Votre transaction sécurisée",
    img: window.ntrAsset('visuelTransaction'),
    alt: "Audit juridique et technique — sécurité de la transaction",
    body: [
    "En exclusivité sur le marché, nous réalisons un audit juridique et technique complet permettant d'identifier et de résoudre les éventuels problèmes avant la signature de l'avant-contrat, minimisant ainsi les risques de litiges ou les problèmes administratifs lors du traitement du dossier par le notaire.",
    "La rédaction du compromis est garantie par l'expertise notariale de votre agent immobilier. Cette particularité propre à NOSTERRA vous apporte un réel gage de sécurité et une personnalisation sur mesure par rapport à une agence immobilière classique. Bien qu'une signature du compromis chez votre notaire demeure possible, nous proposons ce service afin d'accélérer les délais de signature sans sacrifier la qualité de votre contrat.",
    "Anticiper et lever les obstacles à la signature définitive chez le notaire est crucial. Une bonne préparation facilite la conclusion de l'acte authentique et permet d'éviter des retards inutiles qui pourraient compromettre la vente."]

  },
  {
    n: "III",
    key: "accompagnement",
    title: "La qualité de notre accompagnement",
    img: window.ntrAsset('visuelAccompagnement'),
    alt: "L'expertise personnalisée NOSTERRA",
    body: [
    "Chez NOSTERRA, nous avons à cœur d'établir une relation de confiance avec nos clients, fondée sur l'honnêteté et la transparence. Nous croyons fermement qu'un partenariat vendeur-agent solide est essentiel pour mener à bien chaque projet immobilier.",
    "Nous nous efforçons de maintenir une information constante tout au long de notre collaboration. Vous recevrez des comptes-rendus détaillés après chaque visite ainsi qu'un rapport récurrent de nos actions de commercialisation, afin que vous soyez toujours informé de l'évolution de votre dossier et des opportunités qui se présentent.",
    "La convivialité est également au cœur de nos échanges. Nous mettons un point d'honneur à créer une atmosphère chaleureuse et accueillante, où chaque client se sent écouté et respecté dans ses besoins et ses attentes."]

  }];

  return (
    <section className="ntr-section ntr-valeurs" data-screen-label="Valeurs (Agence)" style={{ backgroundColor: "rgb(249, 244, 238)" }}>
      <div className="ntr-section-head">
        <div className="ntr-eyebrow"><span className="ntr-rule" /> Nos valeurs <span className="ntr-rule" /></div>
        <h2 className="ntr-h2" style={{ color: "rgb(1, 26, 8)" }}>
          Les trois piliers<br />de <em>votre sérénité.</em>
        </h2>
      </div>
      <div className="ntr-valeurs-hero">
        <img src={window.ntrAsset('visuelPiliers')} alt="Les trois piliers de votre sérénité — Valorisation, Sécurité, Accompagnement" />
      </div>
      <div className="ntr-valeurs-list">
        {piliers.map((p, i) =>
        <article key={p.key} className={`ntr-valeur ${i % 2 ? 'ntr-valeur--reverse' : ''}`}>
            <div className="ntr-valeur-media">
              <img src={p.img} alt={p.alt} />
            </div>
            <div className="ntr-valeur-text">
              <div className="ntr-valeur-num"><em>{p.n}</em></div>
              <h3 className="ntr-valeur-title">{p.title}</h3>
              <div className="ntr-valeur-rule" />
              {p.body.map((para, j) =>
            <p key={j} className="ntr-valeur-p" style={{ textAlign: "justify" }}>{para}</p>
            )}
            </div>
          </article>
        )}
      </div>
    </section>);

}

window.Presentation = Presentation;
window.VideoSection = VideoSection;
window.Services = Services;
window.ServicesPage = ServicesPage;
window.Expertise = Expertise;
window.Process = Process;
window.Testimonials = Testimonials;
window.PresentationAgence = PresentationAgence;
window.MaximeAgence = MaximeAgence;
window.ValeursAgence = ValeursAgence;
window.ExpertiseAgence = ExpertiseAgence;
window.TestimonialsAgence = TestimonialsAgence;