/* global React */
// EXO7 ENERGY — Page Accueil

const E = window.EXO7_COLORS;

// ---- Hero ----
function HomeHero() {
  const { t, tt } = window.useLang();
  const { isMobile } = window.useViewport();
  return (
    <section style={{ position: 'relative', minHeight: isMobile ? 'auto' : 720, background: E.ink, overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/photos/ph-grue.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        filter: 'brightness(0.5) contrast(1.05)',
      }} />
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 8, background: E.cobalt }} />
      <div style={{
        position: 'relative', maxWidth: 1440, margin: '0 auto',
        padding: isMobile ? '44px 22px 60px' : '92px 48px 80px', color: '#fff',
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: isMobile ? 11.5 : 16,
          color: '#fff', letterSpacing: isMobile ? '0.16em' : '0.22em',
          marginBottom: isMobile ? 22 : 36, fontWeight: 700,
          display: 'inline-flex', alignItems: 'center', gap: isMobile ? 10 : 14,
          background: E.cobalt, padding: isMobile ? '7px 12px 7px 10px' : '10px 18px 10px 14px',
          textShadow: '0 1px 2px rgba(0,0,0,0.25)', textTransform: 'uppercase',
        }}>
          <span style={{ width: 28, height: 2, background: '#fff' }} />
          {tt({ FR: 'VOTRE EXPERT DE LA HTA', EN: 'YOUR MV EXPERT' })}
        </div>
        <h1 style={{
          fontFamily: 'Space Grotesk, sans-serif',
          fontSize: isMobile ? 'clamp(38px, 11.5vw, 58px)' : 'clamp(56px, 7vw, 104px)',
          lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500, margin: 0, maxWidth: 1140, textWrap: 'pretty',
        }}>
          {tt({
            FR: <>Nous concevons,<br/><span style={{ fontStyle: 'italic', fontWeight: 300 }}>déployons</span> et maintenons<br/>vos installations <span style={{ color: '#57c98a', fontWeight: 700, textShadow: '0 2px 14px rgba(0,0,0,0.55)' }}>HTA</span>.</>,
            EN: <>We design,<br/><span style={{ fontStyle: 'italic', fontWeight: 300 }}>deploy</span> and maintain<br/>your <span style={{ color: '#57c98a', fontWeight: 700, textShadow: '0 2px 14px rgba(0,0,0,0.55)' }}>MV</span> installations.</>,
          })}
        </h1>
        <div style={{
          marginTop: isMobile ? 30 : 56, display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 26 : 80, maxWidth: 940, alignItems: isMobile ? 'stretch' : 'end',
        }}>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(18px, 1.5vw, 23px)', lineHeight: 1.5, fontWeight: 500,
            color: '#fff', margin: 0, maxWidth: 580, textShadow: '0 1px 8px rgba(0,0,0,0.45)',
          }}>
            {tt({
              FR: <>Sous-traitant spécialisé en <strong style={{ fontWeight: 700 }}>haute tension</strong> et raccordement BT : montage, câblage, mise en service et maintenance de tableaux et postes <strong style={{ fontWeight: 700 }}>HTA / BT</strong>.</>,
              EN: <>Specialist subcontractor in <strong style={{ fontWeight: 700 }}>medium voltage</strong> and LV connection: assembly, wiring, commissioning and maintenance of <strong style={{ fontWeight: 700 }}>MV / LV</strong> switchboards and substations.</>,
            })}
          </p>
          <div style={{ display: 'flex', gap: isMobile ? 12 : 16, flexWrap: 'wrap', flexDirection: isMobile ? 'column' : 'row' }}>
            <a href="contact.html" style={{
              background: E.cobalt, color: '#fff', padding: '20px 32px', fontSize: 15, fontWeight: 700,
              fontFamily: 'Inter', letterSpacing: '0.04em', textDecoration: 'none', borderRadius: 2,
              display: 'inline-flex', alignItems: 'center', justifyContent: isMobile ? 'center' : 'flex-start', gap: 10,
              boxShadow: '0 8px 24px rgba(0,71,171,0.45)',
            }}>
              {t.nav.cta}
              <svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M2 6h8m0 0L6 2m4 4L6 10" stroke="currentColor" strokeWidth="1.8"/></svg>
            </a>
            <a href="expertises.html" style={{
              border: '1px solid rgba(255,255,255,0.4)', color: '#fff', padding: '20px 28px', fontSize: 14, fontWeight: 600,
              fontFamily: 'Inter', letterSpacing: '0.04em', textDecoration: 'none', borderRadius: 2, textAlign: 'center',
            }}>
              {tt({ FR: 'Découvrir nos expertises', EN: 'Explore our expertise' })}
            </a>
          </div>
        </div>
      </div>
      <div style={{
        position: isMobile ? 'relative' : 'absolute', bottom: 0, left: 0, right: 0,
        borderTop: '1px solid rgba(255,255,255,0.15)', padding: isMobile ? '14px 22px' : '20px 48px',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'JetBrains Mono, monospace', fontSize: isMobile ? 10 : 11,
        color: 'rgba(255,255,255,0.5)', letterSpacing: '0.15em',
      }}>
        <span>01 / {tt({ FR: 'SOUS-TRAITANT HTA / BT', EN: 'MV / LV SUBCONTRACTOR' })}</span>
        {!isMobile && <span>↓ {tt({ FR: 'DÉFILER POUR EXPLORER', EN: 'SCROLL TO EXPLORE' })}</span>}
      </div>
    </section>
  );
}

// ---- KPI strip ----
function KPIStrip() {
  const { tt } = window.useLang();
  const { isMobile } = window.useViewport();
  const items = [
    { num: '50', unit: tt({ FR: 'ANS +', EN: 'YRS +' }), label: tt({ FR: "Expérience cumulée en HTA / BT au sein du groupe ENERGY INVEST", EN: 'Combined MV / LV experience within the ENERGY INVEST group' }) },
    { num: '4', unit: tt({ FR: 'PÔLES', EN: 'AREAS' }), label: tt({ FR: 'Travaux neufs, rénovations, maintenance & SAV, solutions & services', EN: 'New works, retrofits, maintenance & service, solutions & services' }) },
    { num: '100', unit: '%', label: tt({ FR: 'Personnel habilité HTA et BT — aucune sous-traitance non qualifiée', EN: 'MV/LV-qualified staff — no unqualified subcontracting' }) },
    { num: '2', unit: tt({ FR: 'NORMES CLÉS', EN: 'KEY STANDARDS' }), label: tt({ FR: 'Programmation relais & mise en service C13-100 / C15-400', EN: 'Relay programming & commissioning C13-100 / C15-400' }) },
  ];
  return (
    <section style={{ background: E.bg, borderBottom: `1px solid ${E.line}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: isMobile ? '0 20px' : '0 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', minHeight: isMobile ? 'auto' : 200 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: isMobile ? '28px 18px' : '56px 32px 56px 0',
              borderRight: isMobile ? (i % 2 === 0 ? `1px solid ${E.line}` : 'none') : (i < items.length - 1 ? `1px solid ${E.line}` : 'none'),
              borderTop: isMobile && i >= 2 ? `1px solid ${E.line}` : 'none',
              paddingLeft: isMobile ? 18 : (i > 0 ? 32 : 0),
            }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: E.cobalt, letterSpacing: '0.2em', marginBottom: 20 }}>0{i+1}</div>
              <div style={{
                fontFamily: 'Space Grotesk, sans-serif', fontSize: 56, lineHeight: 1, letterSpacing: '-0.04em',
                fontWeight: 500, color: E.ink, display: 'flex', alignItems: 'baseline', gap: 8,
              }}>
                {it.num}
                <span style={{ fontSize: 22, fontWeight: 400, color: E.inkMute }}>{it.unit}</span>
              </div>
              <div style={{ marginTop: 18, fontFamily: 'Inter, sans-serif', fontSize: 14, color: E.inkMute, lineHeight: 1.4, maxWidth: 230 }}>
                {it.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Expertises (4 pôles) ----
function Expertises() {
  const { tt } = window.useLang();
  const poles = [
    {
      n: '01', tag: tt({ FR: 'TRAVAUX NEUFS', EN: 'NEW WORKS' }),
      title: tt({ FR: 'Travaux neufs', EN: 'New works' }),
      desc: tt({
        FR: "Installation de rames HTA, montage et câblage HT/BT, contrôle-commande, confection des têtes de câbles, pose de transformateurs huile et sec, câblage TGBT et programmation des relais C13-100 / C15-400.",
        EN: 'MV switchgear installation, HV/LV assembly and wiring, control systems, cable terminations, oil and dry transformer installation, LV switchboard wiring and C13-100 / C15-400 relay programming.',
      }),
      photo: 'assets/photos/ph-cellule.jpg', pos: 'center',
      subs: tt({ FR: ['Rames HTA', 'Têtes de câbles', 'TGBT', 'Relais'], EN: ['MV switchgear', 'Cable terminations', 'LV boards', 'Relays'] }),
    },
    {
      n: '02', tag: tt({ FR: 'RÉNOVATIONS', EN: 'RETROFITS' }),
      title: tt({ FR: 'Rénovations', EN: 'Retrofits' }),
      desc: tt({
        FR: "Remplacement et adaptation de rames HTA, changement de transformateurs, ajout ou remplacement de relais C13-100 / C15-400, augmentation de puissance, mutation des arrivées ENEDIS et modifications sur site.",
        EN: 'Replacement and adaptation of MV switchgear, transformer swaps, addition or replacement of C13-100 / C15-400 relays, power upgrades, ENEDIS feed migration and on-site modifications.',
      }),
      photo: 'assets/photos/ph-postevert.jpg', pos: 'center',
      subs: tt({ FR: ['Augmentation de puissance', 'Mutation ENEDIS'], EN: ['Power upgrades', 'ENEDIS migration'] }),
    },
    {
      n: '03', tag: tt({ FR: 'MAINTENANCE & SAV', EN: 'MAINTENANCE & SERVICE' }),
      title: tt({ FR: 'Maintenance & SAV', EN: 'Maintenance & service' }),
      desc: tt({
        FR: "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, expertises.",
        EN: 'Annual maintenance of MV and LV installations, oil sampling and laboratory analysis, fault finding, analysis and repair, inspection and intervention reports, expert assessments.',
      }),
      photo: 'assets/photos/ph-maint.jpg', pos: 'center',
      subs: tt({ FR: ['Analyse d\u2019huiles', 'Rapports de contrôle'], EN: ['Oil analysis', 'Inspection reports'] }),
    },
    {
      n: '04', tag: tt({ FR: 'SOLUTIONS & SERVICES', EN: 'SOLUTIONS & SERVICES' }),
      title: tt({ FR: 'Solutions & Services', EN: 'Solutions & services' }),
      desc: tt({
        FR: "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: 'C13-100 / C15-100 commissioning assistance, tripping tests and measurements, partial-discharge detection, relay revamping, test-case and training development, HV and LV energization.',
      }),
      photo: 'assets/photos/ph-valise.jpg', pos: 'center',
      subs: tt({ FR: ['Mise sous tension', 'Valises d\u2019essai', 'Formations'], EN: ['Energization', 'Test cases', 'Training'] }),
    },
  ];
  return (
    <section style={{ background: E.bg, padding: '120px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, marginBottom: 80, alignItems: 'end' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: E.cobalt, letterSpacing: '0.2em', marginBottom: 16 }}>02 / {tt({ FR: 'NOS EXPERTISES', EN: 'OUR EXPERTISE' })}</div>
            <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500, margin: 0, color: E.ink }}>
              {tt({ FR: <>Quatre<br/>pôles<br/>d'activités.</>, EN: <>Four<br/>fields of<br/>expertise.</> })}
            </h2>
          </div>
          <p style={{ fontFamily: 'Inter', fontSize: 18, lineHeight: 1.5, color: E.inkMute, margin: 0, maxWidth: 580 }}>
            {tt({
              FR: "D'origine sous-traitant HTA, EXO7 ENERGY accompagne les producteurs d'énergie, EPC et exploitants sur l'ensemble du cycle de vie de leurs installations haute tension — du chantier neuf à la maintenance, en passant par la rénovation et la mise en service.",
              EN: 'Born as an MV subcontractor, EXO7 ENERGY supports energy producers, EPCs and operators across the entire lifecycle of their high-voltage installations — from new builds to maintenance, retrofits and commissioning.',
            })}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {poles.map((m, i) => (
            <article key={i} style={{ background: '#fff', border: `1px solid ${E.line}`, display: 'flex', flexDirection: 'column' }}>
              <div style={{ aspectRatio: '16/10', backgroundImage: `url(${m.photo})`, backgroundSize: 'cover', backgroundPosition: m.pos, position: 'relative' }}>
                <div style={{ position: 'absolute', bottom: 14, left: 14, background: E.cobalt, color: '#fff', fontFamily: 'JetBrains Mono', fontSize: 10, padding: '5px 9px', letterSpacing: '0.15em' }}>{m.tag}</div>
              </div>
              <div style={{ padding: '32px 28px 36px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: E.inkMute, letterSpacing: '0.15em', marginBottom: 14 }}>{m.n}</div>
                <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.02em', fontWeight: 500, margin: '0 0 16px', color: E.ink }}>{m.title}</h3>
                <p style={{ fontFamily: 'Inter', fontSize: 14.5, lineHeight: 1.55, color: E.inkMute, margin: 0, flex: 1 }}>{m.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 18 }}>
                  {m.subs.map((s) => (
                    <span key={s} style={{ fontFamily: 'JetBrains Mono', fontSize: 10.5, color: E.cobalt, letterSpacing: '0.08em', border: `1px solid ${E.cobalt}`, padding: '4px 9px', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{s}</span>
                  ))}
                </div>
                <a href="expertises.html" style={{ marginTop: 26, fontFamily: 'Inter', fontSize: 13, fontWeight: 600, color: E.cobalt, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, letterSpacing: '0.02em' }}>
                  {tt({ FR: 'En savoir plus', EN: 'Learn more' })}
                  <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>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Process ----
function Process() {
  const { tt } = window.useLang();
  const steps = tt({
    FR: [
      { n: '01', t: 'Étude & schémas', d: 'Analyse du besoin, schémas électriques, dimensionnement HTA / BT.' },
      { n: '02', t: 'Câblage atelier', d: 'Montage et câblage des cellules HTA, TGBT et coffrets de comptage.' },
      { n: '03', t: 'Installation site', d: 'Manutention, pose des rames, têtes de câbles, transformateurs.' },
      { n: '04', t: 'Programmation', d: 'Paramétrage des relais C13-100 / C15-400, contrôle-commande.' },
      { n: '05', t: 'Mise en service', d: 'Essais, mise sous tension HT & BT, rapports d\u2019intervention.' },
    ],
    EN: [
      { n: '01', t: 'Study & schematics', d: 'Needs analysis, electrical schematics, MV / LV sizing.' },
      { n: '02', t: 'Workshop wiring', d: 'Assembly and wiring of MV cells, LV boards and metering cabinets.' },
      { n: '03', t: 'Site installation', d: 'Handling, switchgear placement, cable terminations, transformers.' },
      { n: '04', t: 'Programming', d: 'C13-100 / C15-400 relay configuration, control systems.' },
      { n: '05', t: 'Commissioning', d: 'Testing, HV & LV energization, intervention reports.' },
    ],
  });
  return (
    <section style={{ background: E.bgAlt, padding: '120px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ marginBottom: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'end', gap: 80 }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: E.cobalt, letterSpacing: '0.2em', marginBottom: 16 }}>03 / {tt({ FR: 'NOTRE PROCESS', EN: 'OUR PROCESS' })}</div>
            <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500, margin: 0, color: E.ink }}>
              {tt({ FR: <>De l'étude à la<br/>mise sous tension.</>, EN: <>From study to<br/>energization.</> })}
            </h2>
          </div>
          <p style={{ fontFamily: 'Inter', fontSize: 16, lineHeight: 1.55, color: E.inkMute, margin: 0, maxWidth: 480 }}>
            {tt({
              FR: "Cinq étapes maîtrisées en interne par des équipes exclusivement habilitées HTA et BT. Nous intervenons aussi bien en atelier qu'en chantier, en France et à l'international.",
              EN: 'Five stages managed in-house by exclusively MV/LV-qualified teams. We work both in the workshop and on site, in France and abroad.',
            })}
          </p>
        </div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }}>
          <div style={{ position: 'absolute', left: '10%', right: '10%', top: 18, height: 1, background: E.line }} />
          {steps.map((s, i) => (
            <div key={i} style={{ position: 'relative', padding: '0 24px 0 0' }}>
              <div style={{
                width: 36, height: 36, borderRadius: 18, background: E.bg, border: `1px solid ${E.line}`, color: E.cobalt,
                fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24, position: 'relative', zIndex: 1,
              }}>{s.n}</div>
              <h4 style={{ fontFamily: 'Space Grotesk', fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em', margin: '0 0 12px', color: E.ink }}>{s.t}</h4>
              <p style={{ fontFamily: 'Inter', fontSize: 13, lineHeight: 1.5, color: E.inkMute, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Markets ----
function Markets() {
  const { tt } = window.useLang();
  const markets = tt({
    FR: [
      { t: 'Éolien', d: 'Postes de livraison et de transformation HTA pour parcs éoliens onshore.' },
      { t: 'Photovoltaïque', d: 'Raccordement et mise en service de centrales solaires au sol et en toiture.' },
      { t: 'Tertiaire & infrastructure', d: 'Data centers, sites industriels, hôpitaux, ouvrages publics et infrastructures.' },
    ],
    EN: [
      { t: 'Wind', d: 'MV delivery and transformer substations for onshore wind farms.' },
      { t: 'Photovoltaic', d: 'Connection and commissioning of ground-mounted and rooftop solar plants.' },
      { t: 'Tertiary & infrastructure', d: 'Data centers, industrial sites, hospitals, public works and infrastructure.' },
    ],
  });
  return (
    <section style={{ background: E.ink, color: '#fff', padding: '120px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginBottom: 72, alignItems: 'end' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: E.rose, letterSpacing: '0.2em', marginBottom: 16 }}>04 / {tt({ FR: 'NOS MARCHÉS', EN: 'OUR MARKETS' })}</div>
            <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500, margin: 0 }}>
              {tt({ FR: <>L'énergie sous<br/>toutes ses formes.</>, EN: <>Energy in all<br/>its forms.</> })}
            </h2>
          </div>
          <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)', margin: 0, maxWidth: 520 }}>
            {tt({
              FR: "Des fermes éoliennes aux grandes centrales photovoltaïques, en passant par les sites tertiaires et les infrastructures critiques : nos équipes interviennent là où l'énergie doit être livrée en toute sécurité.",
              EN: 'From wind farms to large PV plants, tertiary sites and critical infrastructure: our teams operate wherever energy must be delivered safely.',
            })}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid rgba(255,255,255,0.2)' }}>
          {markets.map((m, i) => (
            <div key={i} style={{ padding: '40px 32px 40px 0', borderRight: i < markets.length - 1 ? '1px solid rgba(255,255,255,0.2)' : 'none', paddingLeft: i > 0 ? 32 : 0 }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: E.rose, letterSpacing: '0.2em', marginBottom: 18 }}>0{i+1}</div>
              <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 14px' }}>{m.t}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.65)', margin: 0 }}>{m.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Group (ENERGY INVEST) ----
function GroupBlock() {
  const { tt } = window.useLang();
  return (
    <section style={{ background: E.bg, padding: '120px 0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: E.cobalt, letterSpacing: '0.2em', marginBottom: 16 }}>05 / {tt({ FR: 'LE GROUPE', EN: 'THE GROUP' })}</div>
            <h2 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 52, lineHeight: 0.98, letterSpacing: '-0.03em', fontWeight: 500, margin: '0 0 28px', color: E.ink }}>
              {tt({ FR: <>Deux entités,<br/>une même filière.</>, EN: <>Two entities,<br/>one industry.</> })}
            </h2>
            <p style={{ fontFamily: 'Inter', fontSize: 16.5, lineHeight: 1.6, color: E.inkMute, margin: '0 0 24px', maxWidth: 520 }}>
              {tt({
                FR: "EXO7 ENERGY appartient au groupe ENERGY INVEST, qui cumule plus de 50 ans d'expérience en HTA / BT à travers deux sociétés sœurs et complémentaires.",
                EN: 'EXO7 ENERGY is part of the ENERGY INVEST group, which brings together over 50 years of MV / LV experience across two complementary sister companies.',
              })}
            </p>
            <a href="groupe.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: E.cobalt, textDecoration: 'none', padding: '14px 24px', border: `1px solid ${E.cobalt}`, borderRadius: 2 }}>
              {tt({ FR: 'Découvrir le groupe', EN: 'Discover the group' })}
              <svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M2 6h8m0 0L6 2m4 4L6 10" stroke="currentColor" strokeWidth="1.8"/></svg>
            </a>
          </div>
          <div style={{ display: 'grid', gap: 16 }}>
            <div style={{ background: '#fff', border: `1px solid ${E.line}`, padding: '32px 32px', borderLeft: `3px solid ${E.cobalt}` }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: E.cobalt, letterSpacing: '0.15em', marginBottom: 12 }}>EXO7 ENERGY</div>
              <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 24, fontWeight: 500, letterSpacing: '-0.01em', margin: '0 0 10px', color: E.ink }}>{tt({ FR: 'Sous-traitant & services HTA / BT', EN: 'MV / LV subcontractor & services' })}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.55, color: E.inkMute, margin: 0 }}>{tt({ FR: 'Montage, câblage, rénovation, maintenance et mise en service sur le terrain.', EN: 'Assembly, wiring, retrofits, maintenance and on-site commissioning.' })}</p>
            </div>
            <div style={{ background: '#fff', border: `1px solid ${E.line}`, padding: '32px 32px', borderLeft: `3px solid ${E.steel}` }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: E.steel, letterSpacing: '0.15em', marginBottom: 12 }}>ERYX PREFA</div>
              <h3 style={{ fontFamily: 'Space Grotesk', fontSize: 24, fontWeight: 500, letterSpacing: '-0.01em', margin: '0 0 10px', color: E.ink }}>{tt({ FR: 'Postes préfabriqués béton', EN: 'Prefab concrete substations' })}</h3>
              <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.55, color: E.inkMute, margin: 0 }}>{tt({ FR: 'Intégrateur de postes HTA / BT sous enveloppe béton, conçus et testés en France.', EN: 'Integrator of MV / LV concrete-enclosed substations, designed and tested in France.' })}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Final CTA ----
function FinalCTA() {
  const { t, tt } = window.useLang();
  return (
    <section style={{ background: E.bg, padding: '120px 0', borderTop: `1px solid ${E.line}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ background: E.cobalt, color: '#fff', padding: '80px 64px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: E.rose, letterSpacing: '0.2em', marginBottom: 20 }}>{tt({ FR: 'VOTRE CHANTIER — DEVIS DÉTAILLÉ', EN: 'YOUR PROJECT — DETAILED QUOTE' })}</div>
            <h2 style={{ fontFamily: 'Space Grotesk', fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 500, margin: '0 0 24px' }}>
              {tt({ FR: 'Parlons de votre installation.', EN: "Let's talk about your installation." })}
            </h2>
            <p style={{ fontFamily: 'Inter', fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', margin: 0, maxWidth: 560 }}>
              {tt({
                FR: "Décrivez votre projet en quelques lignes : type d'intervention, puissance, contraintes de site et délais. Notre équipe technique vous répond rapidement.",
                EN: 'Describe your project in a few lines: type of work, power, site constraints and timeline. Our technical team replies promptly.',
              })}
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <a href="contact.html" style={{ background: '#fff', color: E.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 }}>
              {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>
            <a href="mailto:contact@exo7-solutions.fr" style={{ border: '1px solid rgba(255,255,255,0.4)', color: '#fff', padding: '22px 32px', fontSize: 14, fontWeight: 500, fontFamily: 'Inter', textDecoration: 'none', display: 'flex', flexDirection: 'column', gap: 4 }}>
              <span style={{ fontSize: 11, letterSpacing: '0.15em', color: 'rgba(255,255,255,0.7)', fontFamily: 'JetBrains Mono' }}>{tt({ FR: 'CONTACT DIRECT', EN: 'DIRECT CONTACT' })}</span>
              <span>contact@exo7-solutions.fr</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <window.PageShell active="home">
      <HomeHero />
      <KPIStrip />
      <Expertises />
      <Process />
      <Markets />
      <GroupBlock />
      <FinalCTA />
    </window.PageShell>
  );
}
window.HomePage = HomePage;