// Pages secteurs spécialisés + géo — V4 SEO
// SecteurPage : Plasturgie, Usinage, Menuiserie
// SecteursHub : vue d'ensemble
// GeoPage : Vendée, Pays de la Loire

const SECTEURS = {
  plasturgie: {
    eyebrow: 'SECTEUR · PLASTURGIE',
    h1: 'Consultant Plasturgie PME — Extrusion, PVC, WPC',
    accroche: "Amélioration continue, aménagement d'atelier, automatisation — avec des références en plasturgie : Amineau, Oceplast, DYX.",
    couleur: '#5e4cff',
    icone: '⬟',
    intro: "L'Atelier Perf connaît la plasturgie de l'intérieur : extrusion PVC, WPC, mélange, granulation, dosage, broyage. On parle votre langue. On travaille vos contraintes machine, vos temps de purge, vos problèmes de process. Pas un consultant généraliste qui découvre le secteur en arrivant.",
    expertises: [
      { title: 'Aménagement ligne extrusion', desc: "Réduction des trajets opérateur, flux matière optimisé, ergonomie poste de contrôle qualité. Le layout qui suit le process." },
      { title: 'Amélioration continue', desc: "5S atelier, chantiers Kaizen sur les changements de série, réduction des purges et des rebuts." },
      { title: 'Indicateurs process', desc: "TRS machine, taux rebut, suivi consommation matière. Tableaux de bord adaptés plasturgie." },
      { title: 'Automatisation & outils', desc: "Paramétrage ERP, traçabilité matière, connecteurs données process. La donnée qui remonte sans ressaisie." },
    ],
    refs: ['Amineau Plastiques', 'Oceplast', 'DYX'],
    stats: [
      { value: '−30%', label: 'Rebuts moyens' },
      { value: '+20%', label: 'TRS atelier' },
      { value: '3 mois', label: 'Premiers résultats' },
    ],
    mots_cles: 'consultant plasturgie PME · amélioration continue extrusion · lean plasturgie · optimisation atelier PVC · Vendée',
  },
  usinage: {
    eyebrow: 'SECTEUR · USINAGE',
    h1: 'Consultant Atelier Usinage — Performance Production',
    accroche: 'Rectification, décolletage, usinage. Amélioration de la cadence, réduction des rebuts, ordonnancement atelier.',
    couleur: '#d9480f',
    icone: '⚙',
    intro: "L'Atelier Perf a travaillé avec SKF, SADEV et d'autres acteurs de l'usinage de précision. On comprend les contraintes : temps de réglage, capabilité machine, gestion des outils coupants, ordonnancement entre plusieurs machines. On mesure avant de recommander.",
    expertises: [
      { title: 'Réduction des réglages (SMED)', desc: "Analyse des changements de série, standardisation des réglages, kits outils pré-préparés. Moins d'arrêts, plus de pièces." },
      { title: 'Ordonnancement atelier', desc: "Planning de production connecté à l'ERP. Visibilité charge machine, alerte sur goulots, simulation de scénarios." },
      { title: 'Qualité & capabilité', desc: "Suivi process (Cp, Cpk), cartes de contrôle, analyse des causes de dérive. La qualité tenue au poste." },
      { title: 'Maintenance (TPM)', desc: "Maintenance autonome opérateur, préventif planifié, suivi des pannes. Le TRS qui monte sans investissement machine." },
    ],
    refs: ['SKF', 'SADEV'],
    stats: [
      { value: '−40%', label: 'Retards livraison' },
      { value: '+18%', label: 'TRS moyen' },
      { value: '2h', label: 'Planning hebdo (vs ½ journée)' },
    ],
    mots_cles: 'consultant usinage atelier · lean usinage · ordonnancement production · amélioration continue rectification · Vendée',
  },
  menuiserie: {
    eyebrow: 'SECTEUR · MENUISERIE INDUSTRIELLE',
    h1: 'Consultant Menuiserie Industrielle — Production Fenêtre PVC',
    accroche: 'Production de fenêtres PVC, profilés thermiques. Aménagement ligne, amélioration continue, réduction des temps de pose.',
    couleur: '#0ca678',
    icone: '▣',
    intro: "L'Atelier Perf a accompagné des acteurs de la menuiserie industrielle (références : Lapeyre). Production de fenêtres PVC, profilés thermiques, pose et installation. On connaît les enjeux : variété des configurations, flux tendu, garanties client, relation poseur.",
    expertises: [
      { title: 'Flux de production', desc: "Analyse de la chaîne de valeur de la commande à la pose. Identification des gaspillages, des attentes, des manutentions inutiles." },
      { title: 'Aménagement ligne', desc: "Layout adapté aux gammes de produits, gestion du stock profilés, organisation du poste de débit." },
      { title: 'Amélioration continue', desc: "5S atelier, standards de production, réduction des non-conformités. La qualité tenue dès la découpe." },
      { title: 'Digitalisation', desc: "Suivi de commandes, bon de fabrication numérique, tableau de bord production. La donnée qui remonte au bureau." },
    ],
    refs: ['Lapeyre'],
    stats: [
      { value: '−25%', label: 'Non-conformités' },
      { value: '+30%', label: 'Surface utile atelier' },
      { value: '4 mois', label: 'Délai moyen projet' },
    ],
    mots_cles: 'consultant menuiserie industrielle · lean fenêtre PVC · amélioration continue menuiserie · production profilé thermique · Vendée',
  },
};

const SECTEURS_ORDER = ['plasturgie', 'usinage', 'menuiserie'];

const GEO_PAGES = {
  vendee: {
    titre: 'Consultant Performance & Automatisation — Vendée (85)',
    sous_titre: 'Vendée',
    description: "L'Atelier Perf est basé en Vendée. On se déplace chez vous, on pose les bottes dans votre atelier, et on revient aussi souvent que nécessaire. PME industrielles, artisans, agriculteurs, commerçants — partout en Vendée.",
    communes: ['La Roche-sur-Yon', 'Les Herbiers', 'Fontenay-le-Comte', 'Challans', 'Saint-Gilles-Croix-de-Vie', 'Montaigu'],
    secteurs: 'Industrie · Artisanat · Agriculture · Services terrain',
    mots_cles: 'consultant lean Vendée · consultant performance Vendée · amélioration continue Vendée 85 · consultant PME Vendée',
  },
  'pays-de-la-loire': {
    titre: 'Consultant Performance Industrielle — Pays de la Loire',
    sous_titre: 'Pays de la Loire',
    description: "L'Atelier Perf intervient dans toute la région Pays de la Loire : Vendée, Loire-Atlantique, Maine-et-Loire, Sarthe, Mayenne. On se déplace là où c'est nécessaire.",
    communes: ['Nantes', 'Saint-Nazaire', 'Angers', 'Le Mans', 'Laval', 'La Roche-sur-Yon'],
    secteurs: 'Industrie · Artisanat · PME · Services',
    mots_cles: 'consultant lean Pays de la Loire · consultant performance industrielle Pays de la Loire · lean PME Nantes Angers',
  },
};

// ============================================
// HUB SECTEURS
// ============================================
function SecteursHub({ navigate }) {
  return (
    <main className="page-enter">
      <section style={{ position: 'relative', paddingTop: 120, paddingBottom: 64, overflow: 'hidden' }}>
        <div className="bg-stars"></div>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left: '60%', top: '-10%', background: 'radial-gradient(closest-side, rgba(0,150,100,0.2), transparent 70%)' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal><Eyebrow>NOS SECTEURS</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin: '24px 0 24px', maxWidth: 900 }}>
              Des références <span className="italic-accent">secteur par secteur</span>
            </h1>
          </Reveal>
          <Reveal>
            <p style={{ maxWidth: 660, fontSize: 18, color: 'var(--muted)', lineHeight: 1.75, marginBottom: 40 }}>
              Plasturgie, usinage, menuiserie — on parle votre langue parce qu'on a travaillé dans vos types d'atelier.
            </p>
          </Reveal>
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }} className="secteurs-hub-grid">
              {SECTEURS_ORDER.map(id => {
                const s = SECTEURS[id];
                return (
                  <button key={id} onClick={() => navigate(id)} style={{ background: '#fff', border: `1px solid ${s.couleur}33`, borderRadius: 20, padding: '28px 24px', cursor: 'pointer', textAlign: 'left', transition: 'background 180ms, border-color 180ms, box-shadow 180ms' }}
                  onMouseEnter={e => { e.currentTarget.style.background = `${s.couleur}0d`; e.currentTarget.style.borderColor = s.couleur; e.currentTarget.style.boxShadow = `0 4px 16px ${s.couleur}22`; }}
                  onMouseLeave={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = `${s.couleur}33`; e.currentTarget.style.boxShadow = 'none'; }}>
                    <div style={{ fontSize: 32, marginBottom: 12 }}>{s.icone}</div>
                    <div style={{ fontFamily: 'var(--f-display)', fontWeight: 700, fontSize: 20, color: 'var(--text)', marginBottom: 8 }}>{s.eyebrow.split(' · ')[1]}</div>
                    <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.6, margin: '0 0 16px' }}>{s.accroche}</p>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {s.refs.map(r => (
                        <span key={r} style={{ fontFamily: 'var(--f-mono)', fontSize: 9, color: s.couleur, padding: '3px 8px', border: `1px solid ${s.couleur}44`, borderRadius: 999 }}>{r}</span>
                      ))}
                    </div>
                    <div style={{ marginTop: 16, fontFamily: 'var(--f-mono)', fontSize: 10, color: s.couleur, letterSpacing: '0.1em' }}>En savoir plus →</div>
                  </button>
                );
              })}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ borderTop: '1px solid var(--line)', paddingTop: 32, marginTop: 40 }}>
              <h2 className="display" style={{ marginBottom: 12 }}>Les secteurs, c&rsquo;est notre vocabulaire</h2>
              <p style={{ color: 'var(--muted)', fontSize: 17, maxWidth: 700, lineHeight: 1.7, marginBottom: 0 }}>
                Un consultant qui ne connaît pas le secteur passe ses premières semaines à apprendre le métier. Chez L&rsquo;Atelier Perf, on arrive en connaissant les contraintes de votre process, le vocabulaire de vos équipes, et les irritants classiques de votre secteur.
              </p>
            </div>
          </Reveal>
        </div>
        <ScrollHint />
        <style>{`@media (max-width: 768px) { .secteurs-hub-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </main>
  );
}

// ============================================
// PAGE SECTEUR INDIVIDUELLE
// ============================================
function SecteurPage({ id, navigate }) {
  const s = SECTEURS[id];
  if (!s) return <div style={{ padding: 120, textAlign: 'center' }}>Page non trouvée</div>;

  return (
    <main className="page-enter">
      {/* S0 — Hero */}
      <section style={{ position: 'relative', paddingTop: 120, paddingBottom: 40, overflow: 'hidden' }}>
        <div className="bg-stars"></div>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left: '60%', top: '-10%', background: `radial-gradient(closest-side, ${s.couleur}30, transparent 70%)` }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 16 }}>
              <button onClick={() => navigate('secteurs')} style={{ background: 'none', border: 'none', color: 'var(--muted)', fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', cursor: 'pointer', padding: 0 }}>
                ← Nos secteurs
              </button>
              <span style={{ color: 'var(--line-2)' }}>·</span>
              <span className="eyebrow" style={{ color: s.couleur, fontSize: 9, margin: 0 }}>{s.eyebrow}</span>
            </div>
          </Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin: '0 0 24px', maxWidth: 900 }}>{s.h1}</h1>
          </Reveal>
          <Reveal>
            <p style={{ maxWidth: 640, fontSize: 19, color: 'var(--muted)', lineHeight: 1.75, marginBottom: 32 }}>{s.accroche}</p>
          </Reveal>
          <Reveal>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 40 }}>
              <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginRight: 4 }}>Références :</span>
              {s.refs.map(r => (
                <span key={r} style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: s.couleur, padding: '4px 12px', border: `1px solid ${s.couleur}55`, borderRadius: 999, background: `${s.couleur}11` }}>{r}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <a className="btn" href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }} style={{ background: s.couleur, color: '#fff', display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 24px', borderRadius: 999, fontFamily: 'var(--f-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>
              Nous contacter
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      {/* S1 — Intro + Expertises secteur */}
      <section style={{ background: 'var(--ink-2)', borderTop: '1px solid var(--line)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 80, paddingBottom: 40 }}>
        <div className="container">
          <Reveal>
            <p style={{ fontSize: 18, lineHeight: 1.8, maxWidth: 800, color: 'var(--text)', marginBottom: 36 }}>{s.intro}</p>
          </Reveal>
          <Reveal><Eyebrow>CE QU&rsquo;ON APPORTE DANS CE SECTEUR</Eyebrow></Reveal>
          <Reveal stagger>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14, marginTop: 16 }} className="sect-pillars">
              {s.expertises.map((e, i) => (
                <div key={i} style={{ padding: '18px 22px', border: '1px solid var(--line-2)', borderRadius: 14, background: '#fff' }}>
                  <div className="display" style={{ fontWeight: 700, fontSize: 15, marginBottom: 8 }}>{e.title}</div>
                  <p style={{ color: 'var(--muted)', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{e.desc}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 768px) { .sect-pillars { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* S2 — Stats + CTA */}
      <section style={{ background: '#fff', borderTop: '1px solid var(--line)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 80, paddingBottom: 40 }}>
        <div className="container">
          <Reveal>
            <div style={{ display: 'flex', gap: 48, flexWrap: 'wrap', marginBottom: 48 }}>
              {s.stats.map(r => (
                <div key={r.label}>
                  <div className="display" style={{ fontSize: 'clamp(36px,5vw,64px)', fontWeight: 700, color: s.couleur, lineHeight: 1 }}>{r.value}</div>
                  <div style={{ fontFamily: 'var(--f-mono)', fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 8 }}>{r.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }}>
                Demander un diagnostic flash
                <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
              <button onClick={() => navigate('domaines')} className="btn btn-ghost">
                Voir nos 7 expertises
              </button>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// ============================================
// PAGE GÉO
// ============================================
function GeoPage({ id, navigate }) {
  const g = GEO_PAGES[id];
  if (!g) return <div style={{ padding: 120, textAlign: 'center' }}>Page non trouvée</div>;

  return (
    <main className="page-enter">
      <section style={{ position: 'relative', paddingTop: 120, paddingBottom: 72, overflow: 'hidden' }}>
        <div className="bg-stars"></div>
        <div className="bg-grid"></div>
        <div className="bg-glow" style={{ left: '60%', top: '-10%', background: 'radial-gradient(closest-side, rgba(94,76,255,0.22), transparent 70%)' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal><Eyebrow>ZONE D'INTERVENTION</Eyebrow></Reveal>
          <Reveal>
            <h1 className="display display-xl" style={{ margin: '24px 0 24px', maxWidth: 900 }}>{g.titre}</h1>
          </Reveal>
          <Reveal>
            <p style={{ maxWidth: 640, fontSize: 19, color: 'var(--muted)', lineHeight: 1.75, marginBottom: 32 }}>{g.description}</p>
          </Reveal>
          <Reveal>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 40 }}>
              {g.communes.map(c => (
                <span key={c} style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', padding: '5px 13px', border: '1px solid rgba(16,30,142,0.18)', borderRadius: 999, background: 'rgba(16,30,142,0.06)' }}>{c}</span>
              ))}
            </div>
          </Reveal>
          <Reveal>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-electric" href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }}>
                Demander un diagnostic
                <svg className="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </a>
              <button onClick={() => navigate('domaines')} className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>
                Nos expertises
              </button>
            </div>
          </Reveal>
        </div>
        <ScrollHint />
      </section>

      <section style={{ background: 'var(--ink-2)', padding: 'clamp(64px,8vw,100px) 0' }}>
        <div className="container">
          <Reveal>
            <h2 className="display" style={{ marginBottom: 24 }}>On se déplace — c'est la base</h2>
            <p style={{ color: 'var(--muted)', fontSize: 17, maxWidth: 700, lineHeight: 1.75 }}>
              Un consultant terrain qui ne vient pas sur site, c'est un PowerPoint consultant. L'Atelier Perf intervient physiquement dans votre atelier, votre boutique, ou votre exploitation. On observe avant de recommander.
            </p>
          </Reveal>
          <Reveal>
            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="geo-3col">
              {[
                { t: 'Diagnostic flash', d: "2h sur site, gratuit et sans engagement. On vous dit honnêtement ce qu'on voit et si on peut vous aider." },
                { t: 'Missions terrain', d: "On revient autant de fois que nécessaire jusqu'à ce que vos équipes tournent en autonomie." },
                { t: 'Résultats chiffrés', d: 'On mesure avant et après. Les gains sont chiffrés, pas estimés.' },
              ].map(b => (
                <div key={b.t} style={{ padding: '28px 24px', background: '#fff', border: '1px solid var(--line-2)', borderRadius: 20 }}>
                  <div className="display" style={{ fontWeight: 700, fontSize: 18, marginBottom: 10 }}>{b.t}</div>
                  <p style={{ color: 'var(--muted)', fontSize: 15, lineHeight: 1.65, margin: 0 }}>{b.d}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <style>{`@media (max-width: 768px) { .geo-3col { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </main>
  );
}

Object.assign(window, { SecteursHub, SecteurPage, GeoPage });