// Page Nos réalisations

/* ============ HERO ============ */
const RealisationsHero = () => {
  const { IMG } = window.IMMO;
  return (
    <section className="metiers-page-hero">
      <div className="metiers-page-hero-bg">
        <img src={IMG.heroRealisations} alt="" />
      </div>
      <div className="shell metiers-page-hero-inner">
        <div className="breadcrumb">Immo&amp;Sens <span className="sep">/</span> Nos réalisations</div>
        <h1 className="display on-ink metiers-page-hero-title">
          Nos <em>réalisations</em>
        </h1>
        <p className="lede metiers-page-hero-lede">
          Des projets concrets de valorisation, conçus pour<br />
          révéler le potentiel des lieux.
        </p>
      </div>
    </section>
  );
};

/* ============ SECTION 1 — ÉTUDE DE CAS ============ */
const CASE_BENEFITS = [
  {
    t: 'Résidence principale conservée',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 8 L8 28 L8 56 L24 56 L24 40 L40 40 L40 56 L56 56 L56 28 Z" />
        <path d="M24 56 V44 H40 V56" />
      </svg>
    ),
  },
  {
    t: 'Foncier inexploité valorisé',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M8 52 H56" />
        <path d="M14 52 V30 L26 22 L38 30 L50 22" />
        <path d="M14 52 L14 30 M26 52 L26 38 M38 52 L38 38 M50 52 L50 30" />
      </svg>
    ),
  },
  {
    t: 'Capital disponible généré',
    svg: (
      <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="32" cy="32" r="22" />
        <path d="M32 18 V46 M26 24 L38 24 M24 32 L40 32 M22 40 L42 40" />
      </svg>
    ),
  },
];

const SectionCase = ({ go }) => (
  <section className="metier-section paper-bg case-section">
    <div className="shell metier-section-inner">
      <Reveal>
        <div className="metier-text">
          <div className="metier-index"></div>
          <h2 className="display metier-title two-lines">
            <span className="line">Accompagnement et</span>
            <span className="line"><em>division parcellaire</em></span>
          </h2>
          <blockquote className="case-quote">
            « Créer de la valeur sans quitter mon lieu de vie à Arradon. »
          </blockquote>
          <div className="metier-body" style={{ marginTop: 32 }}>
            <p>
              Immo&amp;Sens a accompagné un couple de propriétaires dans la division et la
              valorisation du terrain arrière de leur résidence principale.
            </p>
            <p>
              L'opération, menée de façon intégrée — étude, montage, division et
              commercialisation — a permis de transformer un foncier non exploité en capital
              disponible, tout en conservant leur cadre de vie.
            </p>
            <p>
              Elle leur a donné les moyens de financer leurs projets personnels et
              d'accompagner leurs proches dans leurs propres investissements.
            </p>
          </div>

          <div className="case-benefits">
            {CASE_BENEFITS.map((b) => (
              <div className="case-benefit" key={b.t}>
                <div className="case-benefit-icon">{b.svg}</div>
                <div className="case-benefit-label">{b.t}</div>
              </div>
            ))}
          </div>

          <button className="btn btn-primary" onClick={() => go('contact')} style={{ marginTop: 40 }}>
            Étudier mon projet<Arrow />
          </button>
        </div>
      </Reveal>

      <Reveal delay={1}>
        <div className="metier-visual">
          <div className="metier-visual-frame case-frame">
            <img src="images/realisations-case-hd.png" alt="Propriété résidentielle valorisée" />
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ============ SECTION 2 — GALERIE ============ */
const GALLERY = [
  { area: 'a', img: 'images/gallery-1.png' },
  { area: 'b', img: 'images/gallery-2.png' },
  { area: 'c', img: 'images/gallery-3.png' },
  { area: 'd', img: 'images/gallery-4.png' },
  { area: 'e', img: 'images/gallery-5.jpg' },
  { area: 'f', img: 'images/gallery-6.png' },
  { area: 'g', img: 'images/gallery-7.png' },
  { area: 'h', img: 'images/gallery-8.png' },
  { area: 'i', img: 'images/gallery-9.png' },
];

const SectionGallery = () => (
  <section className="metier-section paper-bg gallery-section">
    <div className="shell">
      <Reveal>
        <div className="gallery-head">
          <div className="metier-index">La sélection</div>
          <h2 className="display metier-title gallery-title">
            Des réalisations au service du <em>cadre de vie</em>
          </h2>
        </div>
      </Reveal>

      <div className="real-grid gallery-grid">
        {GALLERY.map((g, i) => (
          <Reveal key={i} className={`gallery-cell area-${g.area}`}>
            <a className="real-card gallery-card">
              <div className="img-wrap">
                <img src={g.img} alt="" loading="lazy" />
              </div>
            </a>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ============ PAGE ============ */
const Realisations = ({ go }) => (
  <>
    <RealisationsHero />
    <SectionCase go={go} />
    <SectionGallery />
  </>
);

window.Realisations = Realisations;