// Page Nos métiers

/* ============ HERO ============ */
const MetiersHero = () => (
  <section className="metiers-page-hero">
    <div className="metiers-page-hero-bg">
      <img src="images/hero-metiers-opt.jpg" alt="" fetchpriority="high" />
    </div>
    <div className="shell metiers-page-hero-inner">
      <div className="breadcrumb">Immo&amp;Sens <span className="sep">/</span> Nos métiers</div>
      <h1 className="display on-ink metiers-page-hero-title">
        Nos <em>métiers</em>
      </h1>
      <p className="lede metiers-page-hero-lede">
        Quatre savoir-faire structurés pour une maîtrise<br />
        complète de la chaîne de valeur immobilière.
      </p>
    </div>
  </section>
);

/* ============ SECTION 1 — CONSEIL EN VALORISATION FONCIÈRE ============ */
const SectionConseil = ({ go }) => (
  <section id="metier-conseil" className="metier-section paper-bg">
    <div className="shell metier-section-inner">
      <Reveal>
        <div className="metier-text">
          <div className="metier-index">01 / 04</div>
          <h2 className="display metier-title">
            Conseil en <em>valorisation foncière</em>
          </h2>
          <p className="metier-subtitle">
            Révéler le potentiel de votre patrimoine immobilier.
          </p>
          <div className="metier-body">
            <p>
              Immo&amp;Sens accompagne les propriétaires dans l'analyse, l'optimisation et la
              valorisation intelligente de leur patrimoine foncier à travers une approche
              stratégique et sur-mesure.
            </p>
            <p>
              Division parcellaire, évolution réglementaire, création de terrain à bâtir ou
              projet immobilier : nous révélons le potentiel caché de votre foncier tout en
              respectant vos objectifs patrimoniaux et votre vision à long terme.
            </p>
            <p>
              Notre approche privilégie une densification raisonnée et qualitative, conciliant
              création de valeur, respect du cadre de vie et cohérence territoriale.
            </p>
          </div>
          <button className="btn btn-primary" onClick={() => go('contact')} style={{ marginTop: 40 }}>
            Demander une étude personnalisée<Arrow />
          </button>
        </div>
      </Reveal>

      <Reveal delay={1}>
        <div className="metier-visual">
          <div className="metier-visual-frame">
            <img src="images/metier-conseil.jpg" alt="Conseil en valorisation foncière" />
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ SECTION 2 — AMÉNAGEMENT FONCIER ============ */
const SectionAmenagement = ({ go }) => (
  <section id="metier-amenagement" className="metier-section ink-section">
    <div className="shell metier-section-inner reverse">
      <Reveal>
        <div className="metier-visual">
          <div className="metier-ba-frame">
            <BeforeAfter
              beforeSrc="images/amenagement-after-hd.png"
              afterSrc="images/amenagement-before.jpg"
            />
          </div>
        </div>
      </Reveal>

      <Reveal delay={1}>
        <div className="metier-text on-ink">
          <div className="metier-index on-ink">02 / 04</div>
          <h2 className="display on-ink metier-title">
            Aménagement <em>foncier</em>
          </h2>
          <p className="metier-subtitle on-ink">
            Des lieux de vie pensés avec équilibre.
          </p>
          <div className="metier-body on-ink">
            <p>
              Immo&amp;Sens conçoit des projets d'aménagement à taille humaine, pensés pour
              s'intégrer harmonieusement à leur environnement.
            </p>
            <p>
              Notre approche privilégie une densification intelligente conciliant besoins
              de logement, qualité de vie et respect du paysage existant.
            </p>
            <p>
              De l'étude foncière à la structuration du projet, nous mobilisons une
              expertise transversale en urbanisme, ingénierie foncière et développement
              immobilier pour garantir des aménagements durables et maîtrisés.
            </p>
          </div>
          <button className="btn btn-gold" onClick={() => go('contact')} style={{ marginTop: 40 }}>
            Valoriser mon terrain<Arrow />
          </button>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ SECTION 3 — PROGRAMME NEUF ============ */
const SectionProgramme = ({ go }) => (
  <section id="metier-programme" className="metier-section paper-bg">
    <div className="shell metier-section-inner">
      <Reveal>
        <div className="metier-text">
          <div className="metier-index">03 / 04</div>
          <h2 className="display metier-title">
            Programme <em>neuf</em>
          </h2>
          <p className="metier-subtitle">
            Des projets résidentiels pensés pour durer.
          </p>
          <div className="metier-body">
            <p>
              Immo&amp;Sens conçoit de petites opérations résidentielles à forte valeur ajoutée,
              pensées pour s'intégrer avec harmonie dans des cadres de vie privilégiés.
            </p>
            <p>
              Maisons individuelles, habitats intermédiaires ou petits ensembles résidentiels :
              chaque projet est conçu avec une attention particulière portée à la qualité de
              vie, aux usages et à l'équilibre architectural.
            </p>
            <p>
              Nous collaborons avec des artisans locaux et des partenaires reconnus afin de
              garantir un haut niveau de qualité et une réalisation soignée.
            </p>
          </div>
          <button className="btn btn-primary" onClick={() => go('realisations')} style={{ marginTop: 40 }}>
            Découvrir nos réalisations<Arrow />
          </button>
        </div>
      </Reveal>

      <Reveal delay={1}>
        <div className="metier-visual">
          <div className="metier-visual-frame programme">
            <img src="images/metier-programme-hd.png" alt="Programme résidentiel premium" />
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ SECTION 4 — TRANSACTION ============ */
const TRANSACTION_PILLARS = [
  {
    t: 'Cadre de vie recherché',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 22 L8 34 L8 54 L36 54 L36 34 L22 22 Z" />
        <path d="M18 54 V44 H26 V54" />
        <path d="M48 54 V42" />
        <path d="M48 42 C42 42,40 38,40 32 C40 26,44 22,48 22 C52 22,56 26,56 32 C56 38,54 42,48 42 Z" />
      </svg>
    ),
  },
  {
    t: 'Suivi personnalisé',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="32" cy="22" r="10" />
        <path d="M14 56 C14 44,22 38,32 38 C42 38,50 44,50 56" />
      </svg>
    ),
  },
  {
    t: 'Expertise globale',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="32" cy="32" r="22" />
        <path d="M10 32 H54 M32 10 C24 18,24 46,32 54 C40 46,40 18,32 10" />
      </svg>
    ),
  },
];

const SectionTransaction = ({ go }) => (
  <section id="metier-transaction" className="metier-section ink-section transaction-section">
    <div className="shell">
      <Reveal>
        <div className="transaction-head">
          <div className="metier-index on-ink">04 / 04</div>
          <h2 className="display on-ink metier-title transaction-title">
            <em>Transaction</em>
          </h2>
        </div>
      </Reveal>

      <div className="transaction-pillars">
        {TRANSACTION_PILLARS.map((p, i) => (
          <Reveal key={p.t} delay={i + 1}>
            <div className="pillar">
              <div className="pillar-icon">{p.svg}</div>
              <h3 className="pillar-title">{p.t}</h3>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal>
        <p className="metier-subtitle on-ink transaction-subtitle">
          Sublimer chaque bien immobilier.
        </p>
      </Reveal>

      <Reveal>
        <div className="transaction-editorial">
          <p>
            Notre connaissance de l'ensemble de la chaîne de valeur immobilière nous permet
            de révéler les qualités réelles d'un bien, de le sublimer dans sa
            présentation et de l'inscrire avec cohérence sur le marché.
          </p>
          <p>
            Parce qu'un projet immobilier reste avant tout une aventure humaine, nous
            privilégions un accompagnement de proximité fondé sur l'écoute, la confiance
            et le suivi personnalisé.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="transaction-cta">
          <button className="btn btn-gold" onClick={() => go('contact')}>
            Confier un mandat<Arrow />
          </button>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ PAGE ============ */
const Metiers = ({ go }) => (
  <>
    <MetiersHero />
    <SectionConseil go={go} />
    <SectionAmenagement go={go} />
    <SectionProgramme go={go} />
    <SectionTransaction go={go} />
  </>
);

window.Metiers = Metiers;