// Direction C — Dossier Industriel
// Technical brief layout: persistent left rail with section index,
// top HUD with run-time data, grid + monospace readouts. Less editorial,
// more "engineering report you can read at investor pace".

const ACCENT_C = '#d49328';
const RAIL_W = 88;

function WireframeC() {
  const { INK, INK_SOFT, INK_FAINT, PAPER, PAPER_DEEP } = window.WF;

  const mono = { fontFamily: 'ui-monospace, "SF Mono", monospace', fontSize: 11, color: INK_SOFT, letterSpacing: '.04em' };

  const railItems = [
    { id: 'hero', label: '01 · Accueil' },
    { id: 'problem', label: '02 · Problème' },
    { id: 'factory', label: '03 · Usine' },
    { id: 'folding', label: '04 · Pliage' },
    { id: 'impact', label: '05 · Impact' },
    { id: 'simulator', label: '06 · Simulateur' },
    { id: 'crowdfunding', label: '07 · Objectif' },
    { id: 'contact', label: '08 · Contact' },
  ];

  const [activeId, setActiveId] = React.useState('hero');
  const [scrollProgress, setScrollProgress] = React.useState(0);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id);
          }
        });
      },
      { rootMargin: '-30% 0px -60% 0px', threshold: 0 }
    );

    railItems.forEach((item) => {
      const el = document.getElementById(item.id);
      if (el) observer.observe(el);
    });

    return () => observer.disconnect();
  }, []);

  React.useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      const p = max > 0 ? window.scrollY / max : 0;
      setScrollProgress(Math.min(1, Math.max(0, p)));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const scrollToId = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const SectionTitle = ({ n, t, sub }) => (
    <div className="s-section-title" style={{ display: 'flex', alignItems: 'baseline', gap: 18, borderBottom: `1px solid ${INK}`, paddingBottom: 12, marginBottom: 28 }}>
      <span style={{ ...mono, color: ACCENT_C, fontSize: 13 }}>§ {n}</span>
      <span className="s-section-display" style={{ fontFamily: "'Caveat', cursive", fontSize: 38, fontWeight: 700, color: INK, lineHeight: 1 }}>{t}</span>
      {sub && <span className="s-section-title-sub" style={{ marginLeft: 'auto', ...mono, fontSize: 11 }}>{sub}</span>}
    </div>
  );

  const BAR_TRACK = 200;
  const BAR_THUMB = 14;

  return (
    <div style={{ width: '100%', background: PAPER, color: INK, fontFamily: "'Patrick Hand', cursive", position: 'relative' }}>
      {/* Top HUD bar */}
      <div className="s-hud" style={{ position: 'sticky', top: 0, zIndex: 10, background: PAPER, borderBottom: `1px solid ${INK}`, padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 24 }}>
        <span style={{ fontFamily: "'Caveat', cursive", fontSize: 22, fontWeight: 700 }}>UN TOIT</span>
        <span className="s-hud-meta" style={{ ...mono }}>DOSSIER / 2026.Q2 / v1.4</span>
        <span className="s-hud-spacer" style={{ flex: 1 }}></span>
        <span className="s-hud-meta" style={{ ...mono }}>EN · FR</span>
        <span className="s-hud-meta" style={{ ...mono, color: ACCENT_C }}>● live</span>
        <span className="s-hud-cta"><SketchBtn color={INK} style={{ marginLeft: 8 }}>Demander le dossier →</SketchBtn></span>
      </div>

      <div className="s-grid-rail" style={{ display: 'grid', gridTemplateColumns: `${RAIL_W}px 1fr`, minHeight: 600 }}>
        {/* ── Left rail with section index + progress ── */}
        <div className="s-rail" style={{ borderRight: `1px solid ${INK}`, padding: '24px 0', position: 'sticky', top: 44, alignSelf: 'flex-start', height: 'min-content' }}>
          {railItems.map((item) => {
            const isActive = item.id === activeId;
            return (
              <a
                key={item.id}
                href={`#${item.id}`}
                onClick={(e) => { e.preventDefault(); scrollToId(item.id); }}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  padding: '10px 16px',
                  borderLeft: isActive ? `2px solid ${ACCENT_C}` : '2px solid transparent',
                  ...mono,
                  color: isActive ? INK : INK_SOFT,
                  textDecoration: 'none',
                  cursor: 'pointer',
                }}
              >
                <span>{item.label.split(' · ')[0]}</span>
              </a>
            );
          })}
          <div style={{ padding: '16px', marginTop: 12 }}>
            <div style={{ ...mono, fontSize: 9, marginBottom: 4 }}>SCROLL</div>
            <div style={{ width: 4, height: BAR_TRACK, background: INK_FAINT, position: 'relative' }}>
              <div style={{ position: 'absolute', top: scrollProgress * (BAR_TRACK - BAR_THUMB), width: '100%', height: BAR_THUMB, background: ACCENT_C }}></div>
            </div>
          </div>
        </div>

        {/* ── Main content ── */}
        <div className="s-content" style={{ padding: '40px 56px 64px' }}>

          {/* ── 01 HERO ── */}
          <section id="hero" className="s-section" style={{ marginBottom: 90, position: 'relative' }}>
            <div className="s-hero-tags" style={{ display: 'flex', gap: 14, marginBottom: 18 }}>
              <Tag color={ACCENT_C} style={{ color: ACCENT_C, borderColor: ACCENT_C }}>VUE D'ENSEMBLE</Tag>
              <Tag>habitat industriel</Tag>
              <Tag>ossature acier</Tag>
              <Tag>pliable</Tag>
            </div>
            {/* HERO VIDEO — full bleed, headline overlaid */}
            <div style={{ position: 'relative', marginTop: 8 }}>
              <VideoBlock className="s-video-hero" height={680} label="banner.mp4" note="autoplay · loop · muted · 4K" accent={INK} src={(window.__resources && window.__resources.heroVideo) || 'media/banner.mp4'} />
              {/* Dark overlay for legibility */}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(13,12,10,.15) 0%, rgba(13,12,10,.55) 60%, rgba(13,12,10,.75) 100%)', pointerEvents: 'none' }}></div>

              {/* HUD overlays */}
              <div style={{ position: 'absolute', top: 14, left: 14, ...mono, background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${INK}` }}>FILE · banner.mp4 · 4096×2160</div>
              <div style={{ position: 'absolute', top: 14, right: 14, ...mono, background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${ACCENT_C}`, color: ACCENT_C }}>● LIVE</div>

              {/* Headline + subtitle overlaid on the video */}
              <div className="s-video-overlay-left" style={{ position: 'absolute', left: 36, right: 36, bottom: 96, color: '#f5f1e6' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                  <span style={{ width: 30, height: 1.5, background: ACCENT_C }}></span>
                  <span className="s-hero-eyebrow" style={{ color: ACCENT_C, letterSpacing: '.18em', fontSize: 12, fontFamily: 'ui-monospace, "SF Mono", monospace' }}>RÉVOLUTION DE L'HABITAT INDUSTRIEL</span>
                </div>
                <div className="s-hero-headline" style={{ fontFamily: "'Caveat', cursive", fontSize: 116, fontWeight: 700, lineHeight: .94, letterSpacing: '-0.02em', color: '#f5f1e6', maxWidth: 1000 }}>
                  Révolution de<br/>l'habitat industriel.
                </div>
                <div className="s-hero-sub" style={{ marginTop: 22, fontFamily: "'Patrick Hand', cursive", fontSize: 20, color: '#d9d2c2', maxWidth: 720 }}>
                  Maisons pliables à ossature acier, fabriquées dans des usines automatisées et déployées sur site en quelques heures.
                </div>
              </div>

              <div className="s-video-chip-bottom" style={{ position: 'absolute', bottom: 14, left: 14, ...mono, background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${INK}` }}>00:00 / 00:24</div>
              <div className="s-video-chip-bottom" style={{ position: 'absolute', bottom: 14, right: 14, ...mono, background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${INK}` }}>autoplay · loop · muted</div>
            </div>

            {/* KPI row + CTAs below video */}
            <div className="s-hero-kpis" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr auto', gap: 32, marginTop: 32, alignItems: 'flex-end' }}>
              {[
                ['Temps de construction', '−70%', 'vs. chantier'],
                ['Main d\'œuvre', '−45%', 'équipes sur site'],
                ['Déploiement', '<48h', 'camion → habitable'],
              ].map(([l, v, n]) => (
                <div key={l} style={{ borderTop: `1px solid ${INK}`, paddingTop: 10 }}>
                  <div style={{ ...mono, fontSize: 9 }}>{l.toUpperCase()}</div>
                  <div className="s-hero-kpi-value" style={{ fontFamily: "'Caveat', cursive", fontSize: 52, color: ACCENT_C, lineHeight: 1, marginTop: 4 }}>{v}</div>
                  <div style={{ ...mono, fontSize: 10, marginTop: 4 }}>{n}</div>
                </div>
              ))}
              <div className="s-hero-kpis-cta" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <SketchBtn size="lg" fill={ACCENT_C} color="#1d1b18" style={{ background: ACCENT_C, borderColor: ACCENT_C }}>Découvrir la technologie →</SketchBtn>
                <SketchBtn size="lg">Télécharger le dossier (pdf)</SketchBtn>
              </div>
            </div>
            <Annot className="s-hero-annot" color={ACCENT_C} style={{ position: 'absolute', right: 0, top: -6 }}>bannière pleine largeur · overlays HUD<br/>lecture automatique à l'entrée</Annot>
          </section>

          {/* ── 02 PROBLEM — timeline of industries ── */}
          <section id="problem" className="s-section" style={{ marginBottom: 90, position: 'relative' }}>
            <SectionTitle n="02 · Le retard du BTP" t="Courbe de productivité" sub="1947 → 2024" />
            <div className="s-grid-2" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36 }}>
              <div>
                <HW size={42} style={{ marginBottom: 14, maxWidth: 460 }}>Pendant que la productivité industrielle a été multipliée ces dernières décennies, celle du BTP est restée quasi stable.</HW>
                <Scribble lines={3} />
                <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {[
                    ['1947', 'Émergence du Toyota Production System'],
                    ['1972', 'Premiers robots industriels sur lignes d\'assemblage'],
                    ['1995', 'Le lean manufacturing se généralise'],
                    ['2010', 'Ligne Tesla GA4 · 1000 robots'],
                    ['2025', 'BTP · toujours majoritairement manuel'],
                  ].map(([y, t]) => (
                    <div key={y} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 10, padding: '6px 0', borderBottom: `1px dashed ${INK_FAINT}` }}>
                      <span style={{ ...mono, color: ACCENT_C }}>{y}</span>
                      <span style={{ fontSize: 14, color: INK }}>{t}</span>
                    </div>
                  ))}
                </div>
              </div>
              <Box padding={18} label="DONNÉES · INSEE">
                <div style={{ ...mono, display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                  <span>Productivité · indice 100</span>
                  <span style={{ color: ACCENT_C }}>● animé</span>
                </div>
                <svg viewBox="0 0 500 280" style={{ width: '100%', height: 240 }}>
                  {[0,1,2,3].map(i => <line key={i} x1="30" x2="490" y1={30 + i*70} y2={30 + i*70} stroke={INK_FAINT} strokeDasharray="2 4" />)}
                  <path d="M40 250 Q 150 220 250 170 T 480 30" stroke={INK} strokeWidth="2.2" fill="none" />
                  <path d="M40 250 Q 180 245 320 252 T 480 248" stroke={ACCENT_C} strokeWidth="2.6" fill="none" />
                  <text x="380" y="22" fontFamily="'Patrick Hand', cursive" fontSize="11" fill={INK}>industrie ↑</text>
                  <text x="380" y="270" fontFamily="'Patrick Hand', cursive" fontSize="11" fill={ACCENT_C}>BTP →</text>
                </svg>
                <div style={{ ...mono, fontSize: 10, marginTop: 8 }}>Δ = 7,0× en 75 ans</div>
              </Box>
            </div>

            <div className="s-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 30 }}>
              {[
                ['MAIN D\'ŒUVRE', '−4M', 'ouvriers manquants UE+US 2030'],
                ['COÛT', '+38%', 'matériaux en 5 ans'],
                ['DÉLAI', '7–11 mois', 'construction résidentielle moy.'],
                ['DÉCHETS', '30%', 'matériaux inutilisés'],
              ].map(([l, v, n]) => (
                <Box key={l} padding={14}>
                  <div style={{ ...mono, fontSize: 9 }}>{l}</div>
                  <div style={{ fontFamily: "'Caveat', cursive", fontSize: 36, color: ACCENT_C, lineHeight: 1, marginTop: 4 }}>{v}</div>
                  <div style={{ ...mono, fontSize: 10, marginTop: 6 }}>{n}</div>
                </Box>
              ))}
            </div>
          </section>

          {/* ── 03 FACTORY ── */}
          <section id="factory" className="s-section" style={{ marginBottom: 90, position: 'relative' }}>
            <SectionTitle n="03 · Automatisation" t="Usine" sub="images · télémétrie live (mockup)" />
            <div style={{ position: 'relative', marginBottom: 28 }}>
              <VideoBlock className="s-video-mid" height={640} label="automatisation.mp4" note="line view · auto-pan" accent={INK} src={(window.__resources && window.__resources.factoryVideo) || 'media/factory.mp4'} />
              {/* Pinned telemetry strips */}
              <div className="s-telemetry-row" style={{ position: 'absolute', top: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                {['cadence 1.4 u/d', 'tolérance ±0,4mm', 'unités aujourd\'hui · 14', 'sans reprise · 99,2%'].map(t => (
                  <div key={t} style={{ ...mono, background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${INK}` }}>{t}</div>
                ))}
              </div>
              {/* Headline overlaid bottom-left */}
              <div className="s-overlay-tag" style={{ position: 'absolute', left: 24, bottom: 24, maxWidth: 540, background: 'rgba(246,243,236,.92)', padding: 18, border: `1.4px solid ${INK}` }}>
                <Tag color={ACCENT_C} style={{ color: ACCENT_C, borderColor: ACCENT_C, marginBottom: 8 }}>03 · AUTOMATISATION</Tag>
                <HW size={42} style={{ lineHeight: .98 }}>Les usines remplacent<br/>les chantiers.</HW>
              </div>
            </div>
            <div className="s-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
              {[
                ['01', 'Découpe & profilage', 'L\'acier arrive, découpe robotisée selon plans.'],
                ['02', 'Soudure des nœuds', 'Soudure CNC · précision 4 axes.'],
                ['03', 'Contrôle & traçage', 'Chaque ossature scannée, étiquetée, tracée.'],
                ['04', 'Vers le pliage', 'Ossature mise en file pour la phase de pliage.'],
              ].map(([n, t, d]) => (
                <div key={n}>
                  <div style={{ ...mono, color: ACCENT_C }}>{n}</div>
                  <div style={{ fontFamily: "'Caveat', cursive", fontSize: 26, marginTop: 2 }}>{t}</div>
                  <div style={{ fontSize: 13, color: INK_SOFT, marginTop: 4 }}>{d}</div>
                </div>
              ))}
            </div>
          </section>

          {/* ── 04 FOLDING ── */}
          <section id="folding" className="s-section" style={{ marginBottom: 90, position: 'relative' }}>
            <SectionTitle n="04 · Système de pliage" t="Usine → Site" sub="5 phases · ≤48h bout-en-bout" />
            {/* Folding video — full-width hero */}
            <div style={{ position: 'relative', marginBottom: 32 }}>
              <VideoBlock className="s-video-hero" height={700} label="systeme de pliage.mp4" note="cinematic · sound on" accent={INK} src={(window.__resources && window.__resources.foldingVideo) || 'media/folding.mp4'} />
              <div style={{ position: 'absolute', top: 14, left: 14, ...mono, background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${INK}` }}>FILE · systeme-de-pliage.mp4</div>
              <div style={{ position: 'absolute', top: 14, right: 14, ...mono, background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${ACCENT_C}`, color: ACCENT_C }}>● CINÉMATIQUE</div>
              <div className="s-video-chip-bottom" style={{ position: 'absolute', bottom: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', ...mono }}>
                <span style={{ background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${INK}` }}>scrub par chapitre : 01 · 02 · 03 · 04 · 05</span>
                <span style={{ background: 'rgba(246,243,236,.92)', padding: '4px 10px', border: `1.2px solid ${INK}` }}>scroll = scrub</span>
              </div>
            </div>
            {/* 5 phases below — horizontal row */}
            <div className="s-phase-strip" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, border: `1.4px solid ${INK}` }}>
              {[
                ['01', 'Assemblage usine', '4 h'],
                ['02', 'Pliage', '30 min'],
                ['03', 'Transport', 'variable'],
                ['04', 'Déploiement', '<4 h'],
                ['05', 'Habitable', 'même jour'],
              ].map(([n, t, dur], i) => (
                <div key={n} style={{ padding: '18px 16px', borderRight: i < 4 ? `1.4px solid ${INK}` : 'none' }}>
                  <div style={{ ...mono, color: ACCENT_C, fontSize: 10 }}>PHASE {n}</div>
                  <div style={{ fontFamily: "'Caveat', cursive", fontSize: 28, color: INK, lineHeight: 1, marginTop: 4 }}>{t}</div>
                  <div style={{ ...mono, fontSize: 11, marginTop: 8 }}>DURÉE · {dur.toUpperCase()}</div>
                  <div style={{ marginTop: 10, height: 36, border: `1.2px dashed ${INK_FAINT}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: INK_FAINT, fontStyle: 'italic' }}>schéma</div>
                </div>
              ))}
            </div>
          </section>

          {/* ── 05 IMPACT ── */}
          <section id="impact" className="s-section" style={{ marginBottom: 80, position: 'relative' }}>
            <SectionTitle n="05 · Impact" t="Ce que ça change" sub="vs. construction traditionnelle · spécs équivalentes" />
            <div className="s-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
              {[
                ['T01', '−70%', 'temps de construction', 'mois → semaines'],
                ['T02', '−45%', 'main d\'œuvre sur site', 'équipes → opérateurs'],
                ['T03', '×8', 'unités / usine · mois', 'échelle industrielle'],
                ['T04', '48 h', 'camion → emménagement', 'prêt à habiter'],
              ].map(([id, v, l, sub]) => (
                <Box key={id} padding={18}>
                  <div style={{ ...mono, color: ACCENT_C }}>{id}</div>
                  <div className="s-stat-grand" style={{ fontFamily: "'Caveat', cursive", fontSize: 72, lineHeight: 1, marginTop: 6, color: INK }}>{v}</div>
                  <div style={{ ...mono, marginTop: 8, fontSize: 11 }}>{l.toUpperCase()}</div>
                  <div style={{ fontSize: 13, color: INK_SOFT, fontStyle: 'italic', marginTop: 4 }}>{sub}</div>
                </Box>
              ))}
            </div>
          </section>

          {/* ── 06 SIMULATOR ── */}
          {window.Simulator && <window.Simulator />}

          {/* ── 07 CROWDFUNDING ── */}
          {window.Crowdfunding && <window.Crowdfunding />}

          {/* ── 08 CONTACT ── */}
          <section id="contact" className="s-section">
            <SectionTitle n="08 · Contact" t="Investisseurs · partenaires · collectivités" sub="réponse sous 48h" />
            <div className="s-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36 }}>
              <div>
                <HW size={40} style={{ marginBottom: 12 }}>Nous construisons la prochaine génération d'habitat industriel.</HW>
                <Scribble lines={2} />
                <div style={{ marginTop: 18, ...mono, lineHeight: 1.8 }}>
                  hello@stael.industries<br/>
                  +33 (0)1 — — — —<br/>
                  Paris · Lyon · Lille
                </div>
              </div>
              <Box padding={18}>
                <div className="s-form-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  {['Nom', 'Email', 'Organisation', 'Fonction'].map(l => (
                    <div key={l}>
                      <div style={{ ...mono, fontSize: 9 }}>{l.toUpperCase()}</div>
                      <div style={{ height: 22, borderBottom: `1.4px solid ${INK}`, marginTop: 4 }}></div>
                    </div>
                  ))}
                  <div style={{ gridColumn: '1 / -1' }}>
                    <div style={{ ...mono, fontSize: 9 }}>MESSAGE</div>
                    <div style={{ height: 70, borderBottom: `1.4px solid ${INK}`, marginTop: 4 }}></div>
                  </div>
                </div>
                <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ ...mono }}>REF · web/2026/Q2</span>
                  <SketchBtn fill={ACCENT_C} color="#1d1b18" style={{ background: ACCENT_C, borderColor: ACCENT_C }}>Envoyer →</SketchBtn>
                </div>
              </Box>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

window.WireframeC = WireframeC;