/* global React */
// EXO7 ENERGY — Pages internes (Expertises, Réalisations, Groupe, Contact, Légal)

const P = window.EXO7_COLORS;

/* Galerie justifiée : photos à leur ratio natif, hauteur de rangée constante, sans recadrage */
function JustifiedGallery({ photos, gap = 14, maxH = 440 }) {
  const ref = React.useRef(null);
  const [w, setW] = React.useState(1344);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const update = () => setW(el.clientWidth);
    update();
    const ro = new ResizeObserver(update);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  if (!photos || !photos.length) return null;
  const list = photos.map((p) => (typeof p === 'string' ? { src: p, ar: 1 } : p));
  const sumAr = list.reduce((s, p) => s + p.ar, 0);
  const ideal = (w - gap * (list.length - 1)) / sumAr;
  const h = Math.min(ideal, maxH);
  return (
    <div ref={ref} style={{ display: 'flex', gap, justifyContent: 'center', flexWrap: 'wrap' }}>
      {list.map((p, i) => (
        <div key={i} style={{ width: h * p.ar, height: h, backgroundImage: `url(${p.src})`, backgroundSize: 'cover', backgroundPosition: 'center', flexShrink: 0 }} />
      ))}
    </div>
  );
}

/* ============ EXPERTISES ============ */
function ExpertiseDetail() {
  const { tt } = window.useLang();
  const blocks = tt({
    FR: [
      { n: '01', tag: 'TRAVAUX NEUFS', title: 'Travaux neufs', photo: 'assets/photos/ph-rame.jpg',
        layout: 'topwide',
        photos: [{ src: 'assets/photos/ph-neuf-banc.png', ar: 1.38 }, { src: 'assets/photos/ph-neuf-local.png', ar: 1.32 }, { src: 'assets/photos/ph-neuf-transfo.png', ar: 1.18 }],
        intro: "Du montage en atelier à l'installation sur site, nous réalisons l'intégralité de vos installations HTA / BT neuves.",
        items: ['Installation de rames HTA', 'Montage, assemblage et câblage HT / BT', 'Contrôle-commande', 'Confection des têtes de câbles HT / BT', 'Installation de transformateurs huile et sec', 'Câblage des TGBT', 'Programmation des relais C13-100 / C15-400'] },
      { n: '02', tag: 'RÉNOVATIONS', title: 'Rénovations', photo: 'assets/photos/ph-postevert.jpg',
        photos: [{ src: 'assets/photos/ph-reno-cables.png', ar: 0.63 }, { src: 'assets/photos/ph-reno-schneider.png', ar: 0.70 }, { src: 'assets/photos/ph-reno-cellules.png', ar: 0.71 }],
        intro: "Nous modernisons et adaptons les installations existantes pour prolonger leur durée de vie et augmenter leur capacité.",
        items: ['Remplacement et adaptation des rames HTA', 'Remplacement des transformateurs', 'Remplacement ou ajout de relais C13-100 / C15-400', 'Augmentation de puissance', 'Mutation des arrivées ENEDIS', 'Modifications sur site'] },
      { n: '03', tag: 'MAINTENANCE & SAV', title: 'Maintenance & SAV', photo: 'assets/photos/ph-maint.jpg',
        photos: [{ src: 'assets/photos/ph-maint-mecanisme.png', ar: 1.44 }, { src: 'assets/photos/ph-maint-cellules.png', ar: 1.31 }],
        intro: "Un suivi rigoureux de vos installations pour garantir leur disponibilité et leur sécurité dans la durée.",
        items: ['Maintenance annuelle des installations HTA et BT', "Prélèvement d'huiles et analyse en laboratoire", 'Recherche de pannes, analyses et réparations', "Édition de rapports de contrôle et d'intervention", "Réalisation d'expertises"] },
      { n: '04', tag: 'SOLUTIONS & SERVICES', title: 'Solutions & Services', photo: 'assets/photos/ph-valise.jpg',
        photos: [{ src: 'assets/photos/ph-serv-manoeuvre.png', ar: 0.66 }, { src: 'assets/photos/ph-serv-valise.png', ar: 0.57 }, { src: 'assets/photos/ph-serv-banc.png', ar: 0.53 }],
        intro: "Des prestations spécialisées pour la mise en service, les essais et la formation de vos équipes.",
        items: ['Assistance à la mise en service C13-100 / C15-100', 'Tests de déclenchement et mesures', 'Recherche de décharges partielles', 'Revamping de relais', "Réalisation de valises d'essai et de formations", 'Mise sous tension HT et BT'] },
    ],
    EN: [
      { n: '01', tag: 'NEW WORKS', title: 'New works', photo: 'assets/photos/ph-rame.jpg',
        layout: 'topwide',
        photos: [{ src: 'assets/photos/ph-neuf-banc.png', ar: 1.38 }, { src: 'assets/photos/ph-neuf-local.png', ar: 1.32 }, { src: 'assets/photos/ph-neuf-transfo.png', ar: 1.18 }],
        intro: 'From workshop assembly to on-site installation, we deliver your complete new MV / LV installations.',
        items: ['MV switchgear installation', 'HV / LV assembly and wiring', 'Control systems', 'HV / LV cable terminations', 'Oil and dry transformer installation', 'LV switchboard wiring', 'C13-100 / C15-400 relay programming'] },
      { n: '02', tag: 'RETROFITS', title: 'Retrofits', photo: 'assets/photos/ph-postevert.jpg',
        photos: [{ src: 'assets/photos/ph-reno-cables.png', ar: 0.63 }, { src: 'assets/photos/ph-reno-schneider.png', ar: 0.70 }, { src: 'assets/photos/ph-reno-cellules.png', ar: 0.71 }],
        intro: 'We modernise and adapt existing installations to extend their life and increase their capacity.',
        items: ['Replacement and adaptation of MV switchgear', 'Transformer replacement', 'C13-100 / C15-400 relay replacement or addition', 'Power upgrades', 'ENEDIS feed migration', 'On-site modifications'] },
      { n: '03', tag: 'MAINTENANCE & SERVICE', title: 'Maintenance & service', photo: 'assets/photos/ph-maint.jpg',
        photos: [{ src: 'assets/photos/ph-maint-mecanisme.png', ar: 1.44 }, { src: 'assets/photos/ph-maint-cellules.png', ar: 1.31 }],
        intro: 'Rigorous monitoring of your installations to ensure long-term availability and safety.',
        items: ['Annual maintenance of MV and LV installations', 'Oil sampling and laboratory analysis', 'Fault finding, analysis and repair', 'Inspection and intervention reports', 'Expert assessments'] },
      { n: '04', tag: 'SOLUTIONS & SERVICES', title: 'Solutions & services', photo: 'assets/photos/ph-valise.jpg',
        photos: [{ src: 'assets/photos/ph-serv-manoeuvre.png', ar: 0.66 }, { src: 'assets/photos/ph-serv-valise.png', ar: 0.57 }, { src: 'assets/photos/ph-serv-banc.png', ar: 0.53 }],
        intro: 'Specialised services for commissioning, testing and training your teams.',
        items: ['C13-100 / C15-100 commissioning assistance', 'Tripping tests and measurements', 'Partial-discharge detection', 'Relay revamping', 'Test-case and training development', 'HV and LV energization'] },
    ],
  });
  return (
    <section style={{ background: P.bg, padding: '110px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px', display: 'grid', gap: 110 }}>
        {blocks.map((b, i) => (
          <article key={i}>
            <div style={{ background: P.ink, color: '#fff', padding: '48px 52px', display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 56, alignItems: 'start' }}>
              <div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: '#8fb4e6', letterSpacing: '0.2em', marginBottom: 18 }}>{b.n} / {b.tag}</div>
                <h2 style={{ fontFamily: 'Space Grotesk', fontSize: 46, lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 500, margin: '0 0 20px' }}>{b.title}</h2>
                <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', margin: 0, maxWidth: 480 }}>{b.intro}</p>
              </div>
              <div style={{ borderTop: '1px solid rgba(255,255,255,0.16)' }}>
                {b.items.map((it) => (
                  <div key={it} style={{ display: 'flex', gap: 13, alignItems: 'baseline', padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.16)' }}>
                    <span style={{ width: 6, height: 6, background: '#8fb4e6', flexShrink: 0, transform: 'translateY(-1px)' }} />
                    <span style={{ fontFamily: 'Inter', fontSize: 14.5, color: 'rgba(255,255,255,0.9)', lineHeight: 1.4 }}>{it}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ marginTop: 18 }}>
              <JustifiedGallery photos={b.photos} />
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function ExpertisesPage() {
  const { tt } = window.useLang();
  return (
    <window.PageShell active="expertise">
      <window.PageHero
        kicker={tt({ FR: 'NOS EXPERTISES', EN: 'OUR EXPERTISE' })}
        accent={tt({ FR: 'SOUS-TRAITANT HTA / BT', EN: 'MV / LV SUBCONTRACTOR' })}
        title={tt({ FR: 'Quatre pôles, un seul interlocuteur.', EN: 'Four fields, one partner.' })}
        subtitle={tt({ FR: "Travaux neufs, rénovations, maintenance et services spécialisés : nos équipes habilitées HTA / BT couvrent tout le cycle de vie de vos installations.", EN: 'New works, retrofits, maintenance and specialised services: our MV / LV-qualified teams cover the full lifecycle of your installations.' })}
        photo="assets/photos/ph-cables.jpg" photoPos="center"
      />
      <ExpertiseDetail />
      <window.FinalCTAShared />
    </window.PageShell>
  );
}
window.ExpertisesPage = ExpertisesPage;

/* ============ RÉALISATIONS ============ */
function RealisationsList() {
  const { tt } = window.useLang();
  const projects = tt({
    FR: [
      { tag: 'MÉTHANISATION', title: 'Câblage cellule HTA — gamme CGM COSMOS', photo: 'assets/photos/ph-confection.jpg',
        desc: "Câblage sur mesure en atelier d'un coffret de cellule HTA TT (gamme CGM COSMOS, ORMAZABAL) pour l'installation d'un tableau HTA de méthanisation : intégration d'un relais REU 615, câblage et programmation." },
      { tag: 'R&D / FORMATION', title: 'Valise de simulation relais RPPL ORMAZABAL', photo: 'assets/photos/ph-valise.jpg',
        desc: "Dans le cadre du développement du relais RPPL ORMAZABAL (applicable en C13-100 sur les réseaux français), conception sur mesure d'une valise de simulation : études, schémas, intégration, câblage, essais en situation et assistance à la datasheet de programmation." },
      { tag: 'TERTIAIRE', title: 'Tour KUPKA ENERGY — installation HT / BT', photo: 'assets/photos/ph-tgbt.jpg',
        desc: "Montage du tableau HTA, création de l'ensemble des chemins de câbles, rénovation des transformateurs HT / BT et installation / raccordement des TGBT + TGBT Groupe Électrogène." },
      { tag: 'RÉNOVATION', title: 'Remplacement de tableau HTA existant', photo: 'assets/photos/ph-grue.jpg',
        desc: "Dépose du tableau HTA existant, manutention des cellules, reprise du génie civil, montage du nouveau tableau, mise en service, essais des protections et assistance à la mise en service." },
      { tag: 'TRAVAUX NEUFS', title: 'Nouveau poste — comptage HTA & raccordement', photo: 'assets/photos/ph-rame.jpg',
        desc: "Manutention de l'ensemble du matériel, confection des chemins de câbles et du tableau de comptage HTA, tirage et raccordement de la totalité des câbles, programmation SEPAM puis réalisation de l'ensemble des essais." },
      { tag: 'GROUPE', title: 'ERYX PREFA — partenaire postes béton', photo: 'assets/photos/ph-postevert.jpg',
        desc: "Société sœur du groupe ENERGY INVEST, ERYX PREFA conçoit les postes préfabriqués béton qu'EXO7 ENERGY équipe, câble et met en service — une chaîne complète de la fabrication au terrain." },
    ],
    EN: [
      { tag: 'BIOGAS', title: 'MV cell wiring — CGM COSMOS range', photo: 'assets/photos/ph-confection.jpg',
        desc: 'Custom workshop wiring of an MV TT cell cabinet (CGM COSMOS, ORMAZABAL) for a biogas MV switchboard: REU 615 relay integration, wiring and programming.' },
      { tag: 'R&D / TRAINING', title: 'RPPL ORMAZABAL relay simulation case', photo: 'assets/photos/ph-valise.jpg',
        desc: 'For the development of the RPPL ORMAZABAL relay (C13-100 on French networks), custom design of a simulation case: studies, schematics, integration, wiring, field testing and programming datasheet support.' },
      { tag: 'TERTIARY', title: 'KUPKA ENERGY tower — HV / LV installation', photo: 'assets/photos/ph-tgbt.jpg',
        desc: 'MV switchboard assembly, full cable tray creation, HV / LV transformer refurbishment and LV switchboard + genset board installation and connection.' },
      { tag: 'RETROFIT', title: 'Existing MV switchboard replacement', photo: 'assets/photos/ph-grue.jpg',
        desc: 'Removal of the existing MV switchboard, cell handling, civil works, new switchboard assembly, commissioning, protection testing and commissioning assistance.' },
      { tag: 'NEW WORKS', title: 'New substation — MV metering & connection', photo: 'assets/photos/ph-rame.jpg',
        desc: 'Handling of all equipment, cable tray and MV metering board fabrication, pulling and connection of all cables, SEPAM programming and full testing.' },
      { tag: 'GROUP', title: 'ERYX PREFA — concrete substation partner', photo: 'assets/photos/ph-postevert.jpg',
        desc: 'Sister company in the ENERGY INVEST group, ERYX PREFA designs the prefab concrete substations that EXO7 ENERGY equips, wires and commissions — a complete chain from factory to field.' },
    ],
  });
  return (
    <section style={{ background: P.bg, padding: '110px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {projects.map((pr, i) => (
            <article key={i} style={{ background: '#fff', border: `1px solid ${P.line}`, display: 'flex', flexDirection: 'column' }}>
              <div style={{ aspectRatio: '4/3', backgroundImage: `url(${pr.photo})`, backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
                <div style={{ position: 'absolute', bottom: 14, left: 14, background: P.cobalt, color: '#fff', fontFamily: 'JetBrains Mono', fontSize: 10, padding: '5px 9px', letterSpacing: '0.15em' }}>{pr.tag}</div>
              </div>
              <div style={{ padding: '28px 26px 32px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.01em', fontWeight: 500, margin: '0 0 14px', color: P.ink }}>{pr.title}</h3>
                <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.55, color: P.inkMute, margin: 0 }}>{pr.desc}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function RealisationsPage() {
  const { tt } = window.useLang();
  return (
    <window.PageShell active="works">
      <window.PageHero
        kicker={tt({ FR: 'RÉALISATIONS', EN: 'PROJECTS' })}
        accent={tt({ FR: 'QUELQUES INTERVENTIONS', EN: 'SELECTED WORK' })}
        title={tt({ FR: 'Des chantiers HTA à toutes les échelles.', EN: 'MV projects at every scale.' })}
        subtitle={tt({ FR: "Méthanisation, tertiaire, R&D, rénovation : un aperçu des interventions menées par nos équipes en atelier et sur site.", EN: 'Biogas, tertiary, R&D, retrofits: a glimpse of the work carried out by our teams in the workshop and on site.' })}
        photo="assets/photos/ph-maint.jpg" photoPos="center 35%"
      />
      <RealisationsList />
      <window.FinalCTAShared />
    </window.PageShell>
  );
}
window.RealisationsPage = RealisationsPage;

/* ============ GROUPE ============ */
function GroupePage() {
  const { tt } = window.useLang();
  const timeline = tt({
    FR: [
      { y: '2013', t: 'Création de DEBER ÉLECTRICITÉ', d: 'Sous-traitance spécialisée en HTA et BT.' },
      { y: '2019', t: 'Rachat par EXO7 ENERGY', d: 'DEBER ÉLECTRICITÉ rejoint EXO7 ENERGY — sous-traitance HTA et BT.' },
      { y: '2022', t: 'Création de ERYX PREFA', d: "Sous l'impulsion d'un partenariat avec Ormazabal France." },
      { y: '2024', t: 'Direction générale ERYX PREFA', d: 'Mise en place pour le développement de la vente en direct.' },
    ],
    EN: [
      { y: '2013', t: 'DEBER ÉLECTRICITÉ founded', d: 'Specialist MV and LV subcontracting.' },
      { y: '2019', t: 'Acquired by EXO7 ENERGY', d: 'DEBER ÉLECTRICITÉ joins EXO7 ENERGY — MV and LV subcontracting.' },
      { y: '2022', t: 'ERYX PREFA founded', d: 'Driven by a partnership with Ormazabal France.' },
      { y: '2024', t: 'ERYX PREFA general management', d: 'Established to develop direct sales.' },
    ],
  });
  const pillars = tt({
    FR: [
      { t: 'Environnemental', d: "Réduction de l'empreinte carbone, gestion responsable des ressources, recyclage en atelier et mobilité durable (covoiturage, véhicules hybrides et électriques)." },
      { t: 'Social', d: "Bien-être des employés, environnement de travail ergonomique et sécurisé, formation continue, mentorat, égalité des chances et diversité." },
      { t: 'Éthique', d: "Achats responsables auprès de fournisseurs locaux engagés, gouvernance transparente et implication sociétale (associations, initiatives locales)." },
    ],
    EN: [
      { t: 'Environmental', d: 'Carbon footprint reduction, responsible resource management, workshop recycling and sustainable mobility (carpooling, hybrid and electric vehicles).' },
      { t: 'Social', d: 'Employee wellbeing, ergonomic and safe work environment, continuous training, mentoring, equal opportunity and diversity.' },
      { t: 'Ethical', d: 'Responsible purchasing from committed local suppliers, transparent governance and community involvement (associations, local initiatives).' },
    ],
  });
  return (
    <window.PageShell active="about">
      <window.PageHero
        kicker={tt({ FR: 'LE GROUPE', EN: 'THE GROUP' })}
        accent="ENERGY INVEST GROUP"
        title={tt({ FR: "Plus de 50 ans d'expérience en HTA / BT.", EN: 'Over 50 years of MV / LV experience.' })}
        subtitle={tt({ FR: "EXO7 ENERGY et ERYX PREFA forment le groupe ENERGY INVEST : deux sociétés sœurs et complémentaires au service de la distribution, de la protection et de la maîtrise de l'énergie.", EN: 'EXO7 ENERGY and ERYX PREFA form the ENERGY INVEST group: two complementary sister companies serving the distribution, protection and control of energy.' })}
        photo="assets/photos/ph-eolien.jpg" photoPos="center"
      />

      {/* Entities */}
      <section style={{ background: P.bg, padding: '110px 0' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: P.cobalt, letterSpacing: '0.2em', marginBottom: 16 }}>{tt({ FR: 'DEUX ENTITÉS', EN: 'TWO ENTITIES' })}</div>
          <h2 style={{ fontFamily: 'Space Grotesk', fontSize: 48, lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 500, margin: '0 0 48px', color: P.ink, maxWidth: 760 }}>{tt({ FR: 'Une filière HTA / BT intégrée, de la fabrication au terrain.', EN: 'An integrated MV / LV chain, from factory to field.' })}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div style={{ background: '#fff', border: `1px solid ${P.line}`, padding: '40px 40px', borderTop: `3px solid ${P.cobalt}` }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: P.cobalt, letterSpacing: '0.15em', marginBottom: 14 }}>EXO7 ENERGY</div>
              <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 14px', color: P.ink }}>{tt({ FR: 'Sous-traitant & services HTA / BT', EN: 'MV / LV subcontractor & services' })}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: P.inkMute, margin: 0 }}>{tt({ FR: "Travaux neufs, rénovations, maintenance et mise en service. Des équipes habilitées qui interviennent en atelier et sur chantier.", EN: 'New works, retrofits, maintenance and commissioning. Qualified teams operating in the workshop and on site.' })}</p>
            </div>
            <div style={{ background: '#fff', border: `1px solid ${P.line}`, padding: '40px 40px', borderTop: `3px solid ${P.steel}` }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, color: P.steel, letterSpacing: '0.15em', marginBottom: 14 }}>ERYX PREFA</div>
              <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 14px', color: P.ink }}>{tt({ FR: 'Postes préfabriqués béton', EN: 'Prefab concrete substations' })}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: P.inkMute, margin: '0 0 18px' }}>{tt({ FR: "Intégrateur de postes HTA / BT sous enveloppe béton, conçus, fabriqués et testés en France.", EN: 'Integrator of MV / LV concrete-enclosed substations, designed, built and tested in France.' })}</p>
              <a href="https://www.eryx-prefa.fr" style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 600, color: P.steel, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>eryx-prefa.fr <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h8m0 0L6 2m4 4L6 10" stroke="currentColor" strokeWidth="1.5"/></svg></a>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section style={{ background: P.bgAlt, padding: '110px 0' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: P.cobalt, letterSpacing: '0.2em', marginBottom: 16 }}>{tt({ FR: 'HISTORIQUE', EN: 'HISTORY' })}</div>
          <h2 style={{ fontFamily: 'Space Grotesk', fontSize: 48, lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 500, margin: '0 0 56px', color: P.ink }}>{tt({ FR: 'Un groupe bâti par étapes.', EN: 'A group built step by step.' })}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, position: 'relative' }}>
            <div style={{ position: 'absolute', left: '12%', right: '12%', top: 22, height: 1, background: P.line }} />
            {timeline.map((s, i) => (
              <div key={i} style={{ position: 'relative', padding: '0 28px 0 0' }}>
                <div style={{ width: 44, height: 44, borderRadius: 22, background: P.cobalt, color: '#fff', fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24, position: 'relative', zIndex: 1, letterSpacing: '0.02em' }}>{s.y.slice(2)}</div>
                <div style={{ fontFamily: 'Space Grotesk', fontSize: 22, fontWeight: 600, color: P.cobalt, marginBottom: 6 }}>{s.y}</div>
                <h4 style={{ fontFamily: 'Space Grotesk', fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', margin: '0 0 10px', color: P.ink }}>{s.t}</h4>
                <p style={{ fontFamily: 'Inter', fontSize: 13.5, lineHeight: 1.5, color: P.inkMute, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RSE */}
      <section style={{ background: P.ink, color: '#fff', padding: '110px 0' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: P.rose, letterSpacing: '0.2em', marginBottom: 16 }}>{tt({ FR: 'ENGAGEMENT RSE', EN: 'CSR COMMITMENT' })}</div>
          <h2 style={{ fontFamily: 'Space Grotesk', fontSize: 48, lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 500, margin: '0 0 16px', maxWidth: 820 }}>{tt({ FR: 'Environnemental, social & éthique.', EN: 'Environmental, social & ethical.' })}</h2>
          <p style={{ fontFamily: 'Inter', fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', margin: '0 0 56px', maxWidth: 620 }}>{tt({ FR: "La politique RSE du groupe s'articule autour de trois piliers et d'engagements à fort effet de levier.", EN: "The group's CSR policy is built on three pillars and high-leverage commitments." })}</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {pillars.map((pl, i) => (
              <div key={i} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.14)', padding: '36px 32px' }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: P.rose, letterSpacing: '0.15em', marginBottom: 16 }}>0{i+1}</div>
                <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 24, fontWeight: 500, letterSpacing: '-0.01em', margin: '0 0 14px' }}>{pl.t}</h3>
                <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', margin: 0 }}>{pl.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <window.FinalCTAShared />
    </window.PageShell>
  );
}
window.GroupePage = GroupePage;

/* ============ CONTACT ============ */
function ContactPage() {
  const { tt } = window.useLang();
  const [sent, setSent] = React.useState(false);
  const field = { width: '100%', padding: '13px 14px', boxSizing: 'border-box', border: `1px solid ${P.line}`, borderRadius: 0, fontFamily: 'Inter', fontSize: 14, color: P.ink, background: '#fff', outline: 'none' };
  const lbl = { display: 'block', fontFamily: 'Inter', fontSize: 12, color: '#5b5f6a', marginBottom: 6, fontWeight: 500, letterSpacing: '0.02em' };
  return (
    <window.PageShell active="contact">
      <window.PageHero
        kicker={tt({ FR: 'CONTACT', EN: 'CONTACT' })}
        accent={tt({ FR: 'PARLONS DE VOTRE PROJET', EN: "LET'S TALK" })}
        title={tt({ FR: 'Contactez nos équipes.', EN: 'Get in touch with our teams.' })}
        photo="assets/photos/ph-pv.jpg" photoPos="center 30%"
      />
      <section style={{ background: P.bg, padding: '100px 0' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80 }}>
          <div>
            <h2 style={{ fontFamily: 'Space Grotesk', fontSize: 34, lineHeight: 1.05, letterSpacing: '-0.02em', fontWeight: 500, margin: '0 0 28px', color: P.ink }}>{tt({ FR: 'Décrivez votre besoin', EN: 'Describe your need' })}</h2>
            {sent ? (
              <div style={{ background: '#fff', border: `1px solid ${P.line}`, borderLeft: `3px solid #3ec07a`, padding: '32px 32px' }}>
                <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 24, fontWeight: 500, margin: '0 0 10px', color: P.ink }}>{tt({ FR: 'Message envoyé.', EN: 'Message sent.' })}</h3>
                <p style={{ fontFamily: 'Inter', fontSize: 15, color: P.inkMute, margin: 0, lineHeight: 1.6 }}>{tt({ FR: 'Notre équipe technique vous répond rapidement.', EN: 'Our technical team will reply promptly.' })}</p>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gap: 16, maxWidth: 620 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <label><span style={lbl}>{tt({ FR: 'Nom complet', EN: 'Full name' })} *</span><input required style={field} /></label>
                  <label><span style={lbl}>{tt({ FR: 'Société', EN: 'Company' })}</span><input style={field} /></label>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <label><span style={lbl}>Email *</span><input type="email" required style={field} /></label>
                  <label><span style={lbl}>{tt({ FR: 'Téléphone', EN: 'Phone' })}</span><input type="tel" style={field} /></label>
                </div>
                <label><span style={lbl}>{tt({ FR: "Type d'intervention", EN: 'Type of work' })}</span>
                  <select style={{ ...field, cursor: 'pointer' }}>
                    {tt({ FR: ['Travaux neufs', 'Rénovation', 'Maintenance & SAV', 'Mise en service / essais', 'Autre'], EN: ['New works', 'Retrofit', 'Maintenance & service', 'Commissioning / testing', 'Other'] }).map(o => <option key={o}>{o}</option>)}
                  </select>
                </label>
                <label><span style={lbl}>{tt({ FR: 'Votre message', EN: 'Your message' })} *</span><textarea required rows={5} style={{ ...field, resize: 'vertical' }} /></label>
                <button type="submit" style={{ background: P.cobalt, color: '#fff', border: 0, padding: '18px 28px', fontFamily: 'Inter', fontSize: 14, fontWeight: 600, letterSpacing: '0.04em', cursor: 'pointer', justifySelf: 'start' }}>{tt({ FR: 'Envoyer ma demande', EN: 'Send my request' })}</button>
              </form>
            )}
          </div>
          <div>
            <div style={{ borderTop: `1px solid ${P.line}` }}>
              {[
                { k: 'EMAIL', v: 'contact@exo7-solutions.fr', href: 'mailto:contact@exo7-solutions.fr' },
                { k: 'LINKEDIN', v: 'EXO7 ENERGY', href: 'https://www.linkedin.com/company/exo7-energy/' },
                { k: tt({ FR: 'SOCIÉTÉ SŒUR', EN: 'SISTER COMPANY' }), v: 'ERYX PREFA — eryx-prefa.fr', href: 'https://www.eryx-prefa.fr' },
              ].map((c) => (
                <a key={c.k} href={c.href} style={{ display: 'block', padding: '22px 0', borderBottom: `1px solid ${P.line}`, textDecoration: 'none' }}>
                  <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: P.cobalt, letterSpacing: '0.15em', marginBottom: 8 }}>{c.k}</div>
                  <div style={{ fontFamily: 'Space Grotesk', fontSize: 19, color: P.ink, letterSpacing: '-0.01em' }}>{c.v}</div>
                </a>
              ))}
            </div>
            <p style={{ fontFamily: 'JetBrains Mono', fontSize: 10.5, color: P.inkMute, letterSpacing: '0.05em', marginTop: 24, lineHeight: 1.6 }}>{tt({ FR: 'EXO7 ENERGY — GROUPE ENERGY INVEST · Coordonnées postales à compléter.', EN: 'EXO7 ENERGY — ENERGY INVEST GROUP · Postal details to be completed.' })}</p>
          </div>
        </div>
      </section>
    </window.PageShell>
  );
}
window.ContactPage = ContactPage;

/* ============ LÉGAL ============ */
function LegalPage({ kind }) {
  const { tt } = window.useLang();
  const isPrivacy = kind === 'privacy';
  return (
    <window.PageShell active="">
      <window.PageHero
        kicker={isPrivacy ? tt({ FR: 'CONFIDENTIALITÉ', EN: 'PRIVACY' }) : tt({ FR: 'MENTIONS LÉGALES', EN: 'LEGAL NOTICE' })}
        title={isPrivacy ? tt({ FR: 'Politique de confidentialité', EN: 'Privacy policy' }) : tt({ FR: 'Mentions légales', EN: 'Legal notice' })}
        photo="assets/photos/ph-breaker.jpg" photoPos="center"
      />
      <section style={{ background: P.bg, padding: '90px 0' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', padding: '0 48px', fontFamily: 'Inter', fontSize: 15.5, lineHeight: 1.7, color: P.inkMute }}>
          <p style={{ marginTop: 0 }}>{tt({ FR: "Cette page est un gabarit à compléter avec les informations légales définitives d'EXO7 ENERGY (raison sociale, SIREN, siège social, directeur de la publication, hébergeur).", EN: 'This page is a template to be completed with the final legal information for EXO7 ENERGY (company name, registration number, head office, publication director, host).' })}</p>
          <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 22, fontWeight: 500, color: P.ink, margin: '36px 0 12px' }}>{tt({ FR: 'Éditeur du site', EN: 'Site publisher' })}</h3>
          <p style={{ margin: 0 }}>EXO7 ENERGY — {tt({ FR: 'Groupe ENERGY INVEST', EN: 'ENERGY INVEST group' })}<br/>contact@exo7-solutions.fr</p>
          <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 22, fontWeight: 500, color: P.ink, margin: '36px 0 12px' }}>{isPrivacy ? tt({ FR: 'Données personnelles', EN: 'Personal data' }) : tt({ FR: 'Propriété intellectuelle', EN: 'Intellectual property' })}</h3>
          <p style={{ margin: 0 }}>{isPrivacy ? tt({ FR: "Les informations transmises via les formulaires sont utilisées uniquement pour répondre à votre demande et ne font l'objet d'aucune cession à des tiers.", EN: 'Information submitted via the forms is used solely to respond to your request and is never shared with third parties.' }) : tt({ FR: "L'ensemble des contenus de ce site (textes, photographies, logo) est protégé. Toute reproduction sans accord préalable est interdite.", EN: 'All content on this site (text, photographs, logo) is protected. Any reproduction without prior consent is prohibited.' })}</p>
        </div>
      </section>
    </window.PageShell>
  );
}
window.LegalPage = LegalPage;

/* ============ Shared final CTA (réutilisé sur les pages internes) ============ */
function FinalCTAShared() {
  const { t, tt } = window.useLang();
  return (
    <section style={{ background: P.bgAlt, padding: '100px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ background: P.cobalt, color: '#fff', padding: '72px 64px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: P.rose, letterSpacing: '0.2em', marginBottom: 18 }}>{tt({ FR: 'VOTRE CHANTIER', EN: 'YOUR PROJECT' })}</div>
            <h2 style={{ fontFamily: 'Space Grotesk', fontSize: 48, lineHeight: 0.98, letterSpacing: '-0.03em', fontWeight: 500, margin: 0 }}>{tt({ FR: 'Un projet HTA / BT ?', EN: 'An MV / LV project?' })}</h2>
          </div>
          <a href="contact.html" style={{ background: '#fff', color: P.cobalt, padding: '22px 32px', fontSize: 15, fontWeight: 600, fontFamily: 'Inter', letterSpacing: '0.04em', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, alignSelf: 'center' }}>
            {t.nav.cta}
            <svg width="16" height="16" viewBox="0 0 12 12" fill="none"><path d="M2 6h8m0 0L6 2m4 4L6 10" stroke="currentColor" strokeWidth="2"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}
window.FinalCTAShared = FinalCTAShared;