// OEG Homepage — page sections (everything below the hero)

const SectionHead = ({ index, title, kicker }) => (
  <div className="shell">
    <div className="section-head">
      <div className="index">
        <span className="num">{index}</span>
        <span>{kicker}</span>
      </div>
      <h2>{title}</h2>
    </div>
  </div>
);

// ============================================================
// Customer logo strip — animated infinite scroller, full color
// ============================================================
const FALLBACK_LOGOS = [
  { src: "managed-media/client-logos/Aveva.png",                       alt: "Aveva" },
  { src: "managed-media/client-logos/Phillips66.png",                  alt: "Phillips 66" },
  { src: "managed-media/client-logos/Marathon_Logo.svg",               alt: "Marathon" },
  { src: "managed-media/client-logos/Halliburton_Logo.svg",            alt: "Halliburton" },
  { src: "managed-media/client-logos/Total.png",                       alt: "TotalEnergies" },
  { src: "managed-media/client-logos/Motiva_Logo.png",                 alt: "Motiva" },
  { src: "managed-media/client-logos/WoodsideEnergy_Logo.png",         alt: "Woodside Energy" },
  { src: "managed-media/client-logos/Koch_Logo.jpg",                   alt: "Koch" },
  { src: "managed-media/client-logos/Par Pacific Holdings, Inc.png",   alt: "Par Pacific" },
  { src: "managed-media/client-logos/WCS.png",                         alt: "WCS" },
  { src: "managed-media/client-logos/Ironwood_Logo.png",               alt: "Ironwood" },
  { src: "managed-media/client-logos/TE3CO_Logo.png",                  alt: "TE3CO" },
  { src: "managed-media/client-logos/TEPCO.png",                       alt: "TEPCO" },
  { src: "managed-media/client-logos/RefinedTechnologies.png",         alt: "Refined Technologies" },
  { src: "managed-media/client-logos/NobleCorp.png",                   alt: "Noble Corp" },
  { src: "managed-media/client-logos/FreeportLogo.svg",                alt: "Freeport" },
];

const Logos = ({ mc = {} }) => {
  const items  = (mc.clientLogos && mc.clientLogos.length) ? mc.clientLogos : FALLBACK_LOGOS;
  const doubled = [...items, ...items];

  return (
    <div className="logos" id="customers">
      <div className="shell">
        <div className="logos-label">Trusted by operators worldwide</div>
      </div>
      <div className="logos-scroller-outer">
        <div className="logos-scroller-track">
          {doubled.map((item, i) => (
            <div key={i} className="logos-scroller-item">
              <img src={item.src} alt={item.alt} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ============================================================
// Hero video — full-width showreel (section 01)
// ============================================================
const HeroVideo = ({ mc = {} }) => {
  const HLS_SRC = mc.heroVideoHls    || "https://player.vimeo.com/external/864378761.m3u8?s=7a0a067f13b265ee51ef346ba142442205497468&logging=false";
  const MP4_SRC = mc.heroVideoMp4    || "https://player.vimeo.com/progressive_redirect/playback/864378761/rendition/1080p/file.mp4%20%281080p%29.mp4?loc=external&log_user=0&signature=853a757ce518a80368e1ae26ccc1511d944ebcd3daf9a253cc52377965b7aed3";
  const POSTER  = mc.heroVideoPoster || "managed-media/home-hero-poster.jpg";

  const videoRef    = React.useRef(null);
  const sectionRef  = React.useRef(null);

  // Wire up HLS on Safari; other browsers use the MP4 <source>
  React.useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const canPlayHLS = video.canPlayType("application/vnd.apple.mpegurl");
    if (canPlayHLS) {
      video.src = HLS_SRC;
    } else if (window.Hls && window.Hls.isSupported()) {
      const hls = new window.Hls();
      hls.loadSource(HLS_SRC);
      hls.attachMedia(video);
      return () => hls.destroy();
    }
  }, [HLS_SRC]);

  // Autoplay (muted) when section enters the viewport; pause when it leaves
  React.useEffect(() => {
    const video   = videoRef.current;
    const section = sectionRef.current;
    if (!video || !section) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          video.play().catch(() => {});
        } else {
          video.pause();
        }
      },
      { threshold: 0.25 }
    );

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

  return (
    <section ref={sectionRef} className="section hero-video-section" data-screen-label="hero-video">
      <SectionHead
        index="01"
        kicker="What we make"
        title="Industrial 3D training content — built for operators, not classrooms."
      />
      <div className="shell">
        <div className="hero-video-wrap">
          <video
            ref={videoRef}
            className="hero-video"
            controls
            controlsList="nodownload"
            playsInline
            muted
            poster={POSTER}
          >
            <source src={MP4_SRC} type="video/mp4" />
            Your browser does not support HTML5 video.
          </video>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Product tour with sticky-step navigation
// ============================================================
const Tour = () => {
  const [active, setActive] = React.useState(0);
  const steps = [
    {
      nm: "Create & Manage Assets",
      ds: "Upload and manage videos, animations, SOPs, and presentations. Tag by equipment, site, and competency to keep your library organized.",
      panel: <TourPanelAuthor />,
    },
    {
      nm: "Build Learning Resources",
      ds: "Assemble assets into structured micro courses, field guides, and assessments — organized by role, site, or competency.",
      panel: <TourPanelCourses />,
    },
    {
      nm: "Assign to Students",
      ds: "Assign micro courses, assessments, and field guides directly to students within the platform — tracked and reportable from day one.",
      panel: <TourPanelDistribute />,
    },
    {
      nm: "Track & prove",
      ds: "Real-time dashboards on completion, knowledge gaps, and compliance — by learner or site.",
      panel: <TourPanelReports />,
    },
  ];
  return (
    <section className="section" data-screen-label="tour">
      <SectionHead
        index="02"
        kicker="Knowledge Library — the loop"
        title="From your learning assets to a trained, certified workforce."
      />
      <div className="shell">
        <div className="tour">
          <div className="tour-nav">
            {steps.map((s, i) => (
              <div key={s.nm}
                   className={`tour-step ${i === active ? "active" : ""}`}
                   onClick={() => setActive(i)}>
                <span className="num">STEP {String(i+1).padStart(2,"0")}</span>
                <div className="nm">{s.nm}</div>
                <div className="ds">{s.ds}</div>
              </div>
            ))}
          </div>
          <div className="tour-screen">
            <div className="chrome">
              <div className="dots"><i /><i /><i /></div>
              <div className="crumb">knowledgelibrary.oegllc.com / {["assets","resources","assign","reports"][active]}</div>
            </div>
            <div className="body">{steps[active].panel}</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const TourAdminSidebar = ({ active }) => {
  const items = [
    "Overview","Company","Sites","Directories","Content Libraries",
    "Users & Students","Learning Resources","Learning Assets",
    "Questions","External Links","Reports","Support"
  ];
  return (
    <div style={{ width: 132, flex: "none", background: "#131e2d", display: "flex", flexDirection: "column", height: "100%" }}>
      <div style={{ padding: "10px 10px 8px", borderBottom: "1px solid rgba(255,255,255,0.06)", display: "flex", alignItems: "center", gap: 6 }}>
        <img src="assets/oeg-cube-blue.png" style={{ width: 20, height: 20, objectFit: "contain" }} alt="" />
        <div>
          <div style={{ font: "600 7px/1.3 var(--font-body)", color: "#fff" }}>The Operations</div>
          <div style={{ font: "400 7px/1 var(--font-body)", color: "rgba(255,255,255,0.4)" }}>Excellence Group</div>
        </div>
      </div>
      <div style={{ flex: 1, padding: "4px 0", overflow: "hidden" }}>
        {items.map((lbl, i) => {
          const on = lbl === active;
          return (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 5, padding: "3.5px 9px", background: on ? "rgba(59,130,246,0.15)" : "transparent", borderLeft: on ? "2px solid #3b82f6" : "2px solid transparent" }}>
              {on
                ? <svg width="6" height="6" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#3b82f6"/></svg>
                : <svg width="6" height="6" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3.5" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/></svg>
              }
              <span style={{ font: (on ? "600" : "400") + " 9.5px/1 var(--font-body)", color: on ? "#fff" : "rgba(255,255,255,0.4)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 90 }}>{lbl}</span>
            </div>
          );
        })}
      </div>
      <div style={{ padding: "6px 10px", borderTop: "1px solid rgba(255,255,255,0.06)" }}>
        <div style={{ font: "500 8.5px/1.3 var(--font-body)", color: "rgba(255,255,255,0.45)" }}>OEG System Admin</div>
        <div style={{ font: "400 7.5px/1 var(--font-mono)", color: "rgba(255,255,255,0.2)", marginTop: 2 }}>powered by OEG</div>
      </div>
    </div>
  );
};

const TourTopIcons = () => (
  <div style={{ display: "flex", gap: 10, color: "#9ca3af" }}>
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z"/></svg>
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.95"/></svg>
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
  </div>
);

const TourPanelAuthor = () => {
  const rows = [
    { nm: "360 Rig View",                     sub: "Uses 360 VR against a 3D model of a rig. Allow the use...", type: "VR",       dur: "—",   date: "Dec 15, 2020" },
    { nm: "Abnormal Mechanical Conditions",    sub: "Discusses the need for a negative internal heater press...",type: "Standard", dur: "92",  date: "May 3, 2019"  },
    { nm: "About the CSB",                     sub: "About the CSB",                                             type: "Standard", dur: "—",   date: "Aug 16, 2023" },
    { nm: "Absorption Vs. Adsorption",         sub: "Absorption vs. Adsorption",                                 type: "Standard", dur: "118", date: "Aug 6, 2021"  },
    { nm: "After the Rainbow",                 sub: "After the Rainbow",                                         type: "Standard", dur: "—",   date: "Aug 16, 2023" },
    { nm: "Air Cooled Heat Exchangers",        sub: "Discusses how air cooled heat exchangers work and co...",   type: "Standard", dur: "77",  date: "Aug 1, 2019"  },
    { nm: "Airgas Surveillance Footage",       sub: "Airgas Surveillance Footage",                               type: "Standard", dur: "—",   date: "Aug 16, 2023" },
    { nm: "Anacortes Treater Explosion",       sub: "",                                                          type: "Standard", dur: "293", date: "Jul 16, 2018" },
  ];
  const COLS = "1fr 52px 52px 62px 78px 66px";
  return (
    <div style={{ margin: "-24px", height: "calc(100% + 48px)", display: "flex", overflow: "hidden" }}>
      <TourAdminSidebar active="Learning Assets" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#fff", minWidth: 0 }}>
        <div style={{ padding: "8px 14px", borderBottom: "1px solid #e5e7eb", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ font: "600 13px/1 var(--font-display)", color: "#111827" }}>Videos</span>
          <TourTopIcons />
        </div>
        <div style={{ display: "flex", borderBottom: "1px solid #e5e7eb", padding: "0 14px" }}>
          {["Videos","Documents","Images","Interactives","Workshops"].map((t, i) => (
            <div key={t} style={{ padding: "7px 12px", font: "500 10.5px/1 var(--font-body)", color: i === 0 ? "#2563eb" : "#6b7280", borderBottom: i === 0 ? "2px solid #2563eb" : "2px solid transparent", marginBottom: -1 }}>{t}</div>
          ))}
        </div>
        <div style={{ padding: "7px 14px", display: "flex", gap: 5, flexWrap: "wrap", borderBottom: "1px solid #e5e7eb", background: "#f9fafb" }}>
          {["OEG","All Sites","All Directories"].map(f => (
            <div key={f} style={{ height: 24, padding: "0 7px", border: "1px solid #d1d5db", borderRadius: 3, display: "flex", alignItems: "center", gap: 3, background: "#fff", font: "400 9.5px/1 var(--font-body)", color: "#374151" }}>
              {f} <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
            </div>
          ))}
        </div>
        <div style={{ padding: "6px 14px", display: "flex", alignItems: "center", gap: 5, borderBottom: "1px solid #e5e7eb" }}>
          <div style={{ width: 160, height: 24, border: "1px solid #d1d5db", borderRadius: 3, display: "flex", alignItems: "center", padding: "0 7px", gap: 4, background: "#fff" }}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5" strokeLinecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <span style={{ font: "400 9.5px/1 var(--font-body)", color: "#9ca3af" }}>Search videos...</span>
          </div>
          {["A → Z","50 / page"].map(d => (
            <div key={d} style={{ height: 24, padding: "0 7px", border: "1px solid #d1d5db", borderRadius: 3, display: "flex", alignItems: "center", gap: 3, background: "#fff", font: "400 9.5px/1 var(--font-body)", color: "#374151", whiteSpace: "nowrap" }}>
              {d} <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
            </div>
          ))}
          <div style={{ height: 24, padding: "0 10px", background: "#1e3a6e", borderRadius: 3, font: "600 9.5px/1 var(--font-body)", color: "#fff", display: "flex", alignItems: "center", whiteSpace: "nowrap" }}>+ New Video</div>
          <span style={{ font: "400 9px/1 var(--font-body)", color: "#6b7280", marginLeft: "auto", whiteSpace: "nowrap" }}>Showing <strong>1-50</strong> of <strong>488</strong></span>
        </div>
        <div style={{ flex: 1, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: COLS, padding: "5px 14px", background: "#f9fafb", borderBottom: "1px solid #e5e7eb" }}>
            {["NAME","TYPE","DURATION","STATUS","DATE ADDED",""].map((h,i) => (
              <div key={i} style={{ font: "600 7.5px/1 var(--font-mono)", letterSpacing: "0.12em", color: "var(--fg-3)", textTransform: "uppercase" }}>{h}</div>
            ))}
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: COLS, padding: "0 14px", borderBottom: "1px solid #f3f4f6", alignItems: "center" }}>
              <div style={{ padding: "6px 0 6px", minWidth: 0 }}>
                <div style={{ font: "600 10.5px/1.2 var(--font-body)", color: "#111827", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.nm}</div>
                {r.sub && <div style={{ font: "400 9px/1.2 var(--font-body)", color: "#9ca3af", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 2 }}>{r.sub}</div>}
              </div>
              <div style={{ font: "400 9.5px/1 var(--font-body)", color: "#6b7280" }}>{r.type}</div>
              <div style={{ font: "400 9.5px/1 var(--font-mono)", color: "#6b7280", fontVariantNumeric: "tabular-nums" }}>{r.dur}</div>
              <div><span style={{ font: "600 8px/1 var(--font-mono)", color: "#166534", background: "#dcfce7", padding: "2px 5px", borderRadius: 3, letterSpacing: "0.06em" }}>ACTIVE</span></div>
              <div style={{ font: "400 9px/1 var(--font-body)", color: "#6b7280" }}>{r.date}</div>
              <div style={{ display: "flex", gap: 3 }}>
                {["View","Edit"].map(a => (
                  <span key={a} style={{ font: "500 8.5px/1 var(--font-body)", color: "#374151", padding: "3px 6px", border: "1px solid #d1d5db", borderRadius: 3, background: "#fff" }}>{a}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const TourPanelCourses = () => {
  const miniCards = [
    { type: "INTERACTIVE", title: "210 Valve",           img: true,  added: false },
    { type: "VIDEO",       title: "360 Rig View",        img: true,  added: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",     img: false, added: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",     img: false, added: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",     img: false, added: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",     img: false, added: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",     img: false, added: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",     img: false, added: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",     img: false, added: false },
    { type: "VIDEO",       title: "Abnormal Mechanical", img: true,  added: true  },
  ];
  const badgeBg = { INTERACTIVE: "#1e4080", VIDEO: "#1b3a6e", DOCUMENT: "#344054" };
  return (
    <div style={{ margin: "-24px", height: "calc(100% + 48px)", display: "flex", overflow: "hidden" }}>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#fff", minWidth: 0, borderRight: "1px solid #e5e7eb", overflow: "hidden" }}>
        <div style={{ padding: "8px 12px", borderBottom: "1px solid #e5e7eb", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ font: "600 12px/1 var(--font-display)", color: "#111827" }}>Instructor Dashboard</span>
          <TourTopIcons />
        </div>
        <div style={{ padding: "6px 10px", display: "flex", alignItems: "center", gap: 5, borderBottom: "1px solid #e5e7eb", background: "#f9fafb" }}>
          <div style={{ flex: 1, height: 24, border: "1px solid #d1d5db", borderRadius: 3, display: "flex", alignItems: "center", padding: "0 7px", background: "#fff" }}>
            <span style={{ font: "400 9px/1 var(--font-body)", color: "#9ca3af" }}>Search...</span>
          </div>
          <div style={{ height: 24, padding: "0 8px", background: "#2563eb", borderRadius: 3, font: "600 9px/1 var(--font-body)", color: "#fff", display: "flex", alignItems: "center" }}>641 Results</div>
        </div>
        <div style={{ flex: 1, overflow: "hidden", padding: "8px 10px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
            {miniCards.map((c, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: 3, overflow: "hidden", position: "relative" }}>
                <div style={{ aspectRatio: "16/9", background: c.img ? "#1a2c42" : "#25354a", position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {!c.img && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>}
                  <div style={{ position: "absolute", top: 3, left: 3, font: "600 5.5px/1 var(--font-mono)", color: "#fff", background: badgeBg[c.type] || "#344054", padding: "1.5px 3px", borderRadius: 2 }}>{c.type}</div>
                  {c.added
                    ? <div style={{ position: "absolute", top: 3, right: 3, font: "600 6px/1 var(--font-body)", color: "#fff", background: "#16a34a", padding: "2px 5px", borderRadius: 2, display: "flex", alignItems: "center", gap: 2 }}>
                        <svg width="6" height="6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg> Added
                      </div>
                    : <div style={{ position: "absolute", top: 3, right: 3, font: "600 6px/1 var(--font-body)", color: "#fff", background: "#2563eb", padding: "2px 5px", borderRadius: 2 }}>+ Add</div>
                  }
                </div>
                <div style={{ padding: "4px 5px", font: "500 7.5px/1.3 var(--font-body)", color: "#111827", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ width: 222, flex: "none", display: "flex", flexDirection: "column", background: "#fff", overflow: "hidden" }}>
        <div style={{ padding: "9px 12px", background: "#1c2d3f", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ font: "500 7px/1 var(--font-mono)", color: "rgba(255,255,255,0.45)", letterSpacing: "0.14em", textTransform: "uppercase" }}>Micro Course Edit Mode</div>
            <div style={{ font: "700 13px/1.2 var(--font-display)", color: "#fff", marginTop: 4 }}>Abnormal</div>
          </div>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <div style={{ flex: 1, padding: "10px 12px", overflow: "hidden", display: "flex", flexDirection: "column", gap: 8 }}>
          <div style={{ font: "600 11px/1 var(--font-display)", color: "#111827", paddingBottom: 8, borderBottom: "1px solid #e5e7eb" }}>Resource Details</div>
          {[{ lbl: "Name", val: "Abnormal" }, { lbl: "Description", val: "Abnormal" }].map(f => (
            <div key={f.lbl}>
              <div style={{ font: "500 8.5px/1 var(--font-body)", color: "#6b7280", marginBottom: 3 }}>{f.lbl}</div>
              <div style={{ border: "1px solid #d1d5db", borderRadius: 3, padding: "4px 7px", font: "400 9.5px/1 var(--font-body)", color: "#111827" }}>{f.val}</div>
            </div>
          ))}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 5 }}>
            {[{ lbl: "Directory", val: "Analyzers" }, { lbl: "Subdirectory", val: "No subdirectory" }].map(f => (
              <div key={f.lbl}>
                <div style={{ font: "500 8.5px/1 var(--font-body)", color: "#6b7280", marginBottom: 3 }}>{f.lbl}</div>
                <div style={{ border: "1px solid #d1d5db", borderRadius: 3, padding: "4px 6px", font: "400 9px/1 var(--font-body)", color: "#111827", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 55 }}>{f.val}</span>
                  <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "4px 0" }}>
            <span style={{ font: "500 9.5px/1 var(--font-body)", color: "#111827" }}>Publish</span>
            <div style={{ width: 14, height: 14, background: "#2563eb", borderRadius: 2, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </div>
          {[
            { lbl: "Score to Pass", val: "70", copy: false },
            { lbl: "In-Class Learning Link", val: "https://knowledgelibrary.oeg...", copy: true },
          ].map(f => (
            <div key={f.lbl}>
              <div style={{ font: "500 8.5px/1 var(--font-body)", color: "#6b7280", marginBottom: 3 }}>{f.lbl}</div>
              <div style={{ border: "1px solid #d1d5db", borderRadius: 3, padding: "4px 7px", font: "400 9.5px/1 var(--font-body)", color: "#111827", display: "flex", alignItems: "center", gap: 4 }}>
                <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.val}</span>
                {f.copy && <div style={{ width: 16, height: 16, background: "#1e3a6e", borderRadius: 2, display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><rect x="9" y="9" width="13" height="13"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                </div>}
              </div>
            </div>
          ))}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{ font: "500 8.5px/1 var(--font-body)", color: "#6b7280" }}>Create SCORM Package</span>
            <div style={{ padding: "4px 9px", background: "#1e3a6e", borderRadius: 3, font: "600 9px/1 var(--font-body)", color: "#fff" }}>Generate</div>
          </div>
          <div style={{ borderTop: "1px solid #e5e7eb", paddingTop: 8, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{ font: "600 10px/1 var(--font-body)", color: "#111827" }}>Content</span>
            <div style={{ padding: "3px 8px", background: "#1e3a6e", borderRadius: 3, font: "600 8.5px/1 var(--font-body)", color: "#fff" }}>Add Quiz</div>
          </div>
          {[{ nm: "Abnormal Mechanical Conditions", hasThumb: true }, { nm: "Abnormal Quiz", hasThumb: false }].map((item, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, padding: "5px 7px", border: "1px solid #e5e7eb", borderRadius: 3 }}>
              <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
              <div style={{ width: 26, height: 18, background: item.hasThumb ? "#1a2c42" : "#e5e7eb", borderRadius: 2, flex: "none" }} />
              <span style={{ font: "500 9px/1.3 var(--font-body)", color: "#111827", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.nm}</span>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const TourPanelDistribute = () => {
  const microCourses = [
    { nm: "A Pump Course",              sub: "Micro Course" },
    { nm: "Abnormal",                   sub: "Micro Course" },
    { nm: "Airplanes - Test Questions", sub: "Micro Course" },
    { nm: "Andeavor Pump Bearings",     sub: "Micro Course" },
    { nm: "Andeavor Pump Bearings",     sub: "Micro Course" },
    { nm: "Andy",                       sub: "Micro Course" },
  ];
  const assessments = [
    { nm: "Assessment Training Demonstration", sub: "Assessment" },
    { nm: "astest",                            sub: "Assessment" },
    { nm: "Basic Chemistry",                   sub: "Assessment" },
    { nm: "Bearings",                          sub: "Assessment" },
    { nm: "Bearings and more",                 sub: "Assessment" },
  ];
  const fieldGuides = [
    { nm: "Centrifugal Pump Operations", sub: "Field Guide", added: false },
    { nm: "Fired Heater Operations",     sub: "Field Guide", added: true  },
  ];

  const AddBtn = ({ added }) => (
    <div style={{ padding: "4px 10px", background: "#1e3a6e", borderRadius: 4, font: "600 9px/1 var(--font-body)", color: "#fff", whiteSpace: "nowrap", flex: "none" }}>
      {added ? "Added" : "Add"}
    </div>
  );

  const ColList = ({ title, items }) => (
    <div style={{ flex: 1, minWidth: 0, borderRight: "1px solid #e5e7eb", paddingRight: 12, marginRight: 12, lastChild: { borderRight: "none" } }}>
      <div style={{ font: "600 10.5px/1 var(--font-display)", color: "#111827", marginBottom: 8 }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 0, overflowY: "hidden" }}>
        {items.map((item, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "6px 0", borderBottom: "1px solid #f3f4f6" }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ font: "500 10px/1.2 var(--font-body)", color: "#111827", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.nm}</div>
              <div style={{ font: "400 8.5px/1 var(--font-body)", color: "#9ca3af", marginTop: 2 }}>{item.sub}</div>
            </div>
            <AddBtn added={item.added} />
          </div>
        ))}
      </div>
    </div>
  );

  const bgCards = [true, true, false, false, false, true, false, false, false, true];

  return (
    <div style={{ margin: "-24px", height: "calc(100% + 48px)", position: "relative", overflow: "hidden" }}>
      {/* ── Dimmed background: Instructor Dashboard ── */}
      <div style={{ position: "absolute", inset: 0, display: "flex", overflow: "hidden" }}>
        {/* user sidebar */}
        <div style={{ width: 130, flex: "none", background: "#131e2d", display: "flex", flexDirection: "column" }}>
          <div style={{ padding: "10px 10px 8px", borderBottom: "1px solid rgba(255,255,255,0.06)", display: "flex", alignItems: "center", gap: 6 }}>
            <img src="assets/oeg-cube-blue.png" style={{ width: 20, height: 20, objectFit: "contain" }} alt="" />
            <div style={{ font: "600 7px/1.3 var(--font-body)", color: "#fff" }}>The Operations</div>
          </div>
          {["Explore","Project Folder","Syllabus","Micro Courses","Assessment","Refresher","Field Guides","Assignment","Support"].map((lbl, i) => (
            <div key={i} style={{ padding: "4px 10px", borderLeft: i === 0 ? "2px solid #3b82f6" : "2px solid transparent", background: i === 0 ? "rgba(59,130,246,0.15)" : "transparent" }}>
              <span style={{ font: (i === 0 ? "600" : "400") + " 9.5px/1 var(--font-body)", color: i === 0 ? "#fff" : "rgba(255,255,255,0.4)" }}>{lbl}</span>
            </div>
          ))}
        </div>
        {/* card grid */}
        <div style={{ flex: 1, padding: "8px 10px", background: "#fff" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
            {bgCards.map((hasImg, i) => (
              <div key={i} style={{ borderRadius: 3, overflow: "hidden", border: "1px solid #e5e7eb" }}>
                <div style={{ aspectRatio: "16/9", background: hasImg ? "#1a2c42" : "#25354a", position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {!hasImg && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.15)" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>}
                  <div style={{ position: "absolute", top: 3, right: 3, font: "600 6px/1 var(--font-body)", color: "#fff", background: "#2563eb", padding: "2px 5px", borderRadius: 2 }}>+ Add</div>
                </div>
                <div style={{ padding: "4px 5px", height: 22, background: "#fff" }} />
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* ── Dark overlay ── */}
      <div style={{ position: "absolute", inset: 0, background: "rgba(15,23,42,0.55)" }} />
      {/* ── Assignment Setup modal ── */}
      <div style={{
        position: "absolute", top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        width: "88%", maxWidth: 520,
        background: "#fff", borderRadius: 8,
        boxShadow: "0 20px 60px rgba(0,0,0,0.35)",
        overflow: "hidden",
      }}>
        {/* modal header */}
        <div style={{ padding: "14px 16px 10px", borderBottom: "1px solid #e5e7eb" }}>
          <div style={{ font: "700 14px/1 var(--font-display)", color: "#111827", marginBottom: 10 }}>Assignment Setup</div>
          <div style={{ display: "flex", gap: 6 }}>
            {["Resources","Parameters","Students","Review"].map((t, i) => (
              <div key={t} style={{
                padding: "4px 10px", borderRadius: 20,
                font: "600 9.5px/1 var(--font-body)",
                color: i === 0 ? "#fff" : "#374151",
                background: i === 0 ? "#1e3a6e" : "transparent",
                border: i === 0 ? "1px solid #1e3a6e" : "1px solid #d1d5db",
              }}>{t}</div>
            ))}
          </div>
        </div>
        {/* search */}
        <div style={{ padding: "10px 16px 6px" }}>
          <div style={{ font: "600 9.5px/1 var(--font-body)", color: "#374151", marginBottom: 6 }}>Search Resources</div>
          <div style={{ height: 28, border: "1px solid #d1d5db", borderRadius: 4, display: "flex", alignItems: "center", padding: "0 10px", gap: 6 }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5" strokeLinecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <span style={{ font: "400 10px/1 var(--font-body)", color: "#9ca3af" }}>Search published courses, assessments, and field guides</span>
          </div>
        </div>
        {/* three columns */}
        <div style={{ padding: "8px 16px 4px", display: "flex", gap: 0 }}>
          <ColList title="Micro Courses" items={microCourses} />
          <ColList title="Assessments"  items={assessments}  />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: "600 10.5px/1 var(--font-display)", color: "#111827", marginBottom: 8 }}>Field Guides</div>
            {fieldGuides.map((item, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "6px 0", borderBottom: "1px solid #f3f4f6" }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ font: "500 10px/1.2 var(--font-body)", color: "#111827", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{item.nm}</div>
                  <div style={{ font: "400 8.5px/1 var(--font-body)", color: "#9ca3af", marginTop: 2 }}>{item.sub}</div>
                </div>
                <AddBtn added={item.added} />
              </div>
            ))}
          </div>
        </div>
        {/* selected resources */}
        <div style={{ margin: "6px 16px 0", padding: "8px 10px", background: "#f9fafb", borderRadius: 4, border: "1px solid #e5e7eb" }}>
          <div style={{ font: "600 9.5px/1 var(--font-body)", color: "#374151", marginBottom: 6 }}>Selected Resources</div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
            <div>
              <div style={{ font: "500 10px/1.2 var(--font-body)", color: "#111827" }}>Fired Heater Operations</div>
              <div style={{ font: "400 8.5px/1 var(--font-body)", color: "#9ca3af", marginTop: 2 }}>Field Guide</div>
            </div>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </div>
        </div>
        {/* footer */}
        <div style={{ padding: "10px 16px", display: "flex", justifyContent: "flex-end", gap: 8, borderTop: "1px solid #e5e7eb", marginTop: 10 }}>
          <div style={{ padding: "6px 14px", border: "1px solid #d1d5db", borderRadius: 4, font: "500 10px/1 var(--font-body)", color: "#374151", background: "#fff" }}>Cancel</div>
          <div style={{ padding: "6px 14px", background: "#1e3a6e", borderRadius: 4, font: "600 10px/1 var(--font-body)", color: "#fff" }}>Next</div>
        </div>
      </div>
    </div>
  );
};


const TourPanelReports = () => {
  const reports = [
    { nm: "Students Over Time",          ds: "Student registrations by day, week, or month with date range selector",       color: "#2563eb" },
    { nm: "Questions Report",            ds: "Question usage, assessment appearances, and student attempt counts",          color: "#9333ea" },
    { nm: "Course Performance",          ds: "Completion rates and quiz scores ranked by course",                           color: "#0d9488" },
    { nm: "Student Activity",            ds: "Login frequency buckets and list of inactive students",                       color: "#ea580c" },
    { nm: "Library Utilization",         ds: "Content library enrollments and completion rates by category",                color: "#16a34a" },
    { nm: "Assignment Completion Trend", ds: "Assignment items started vs completed over time",                             color: "#dc2626" },
    { nm: "Assignment Reports",          ds: "Per-student progress and completion status on a specific assignment",         color: "#111827" },
  ];
  return (
    <div style={{ margin: "-24px", height: "calc(100% + 48px)", display: "flex", overflow: "hidden" }}>
      <TourAdminSidebar active="Reports" />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#f9fafb", minWidth: 0, overflow: "hidden" }}>
        <div style={{ padding: "8px 14px", borderBottom: "1px solid #e5e7eb", background: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ font: "600 13px/1 var(--font-display)", color: "#111827" }}>Reports</span>
          <TourTopIcons />
        </div>
        <div style={{ padding: "16px 18px", flex: 1, overflow: "hidden" }}>
          <div style={{ font: "700 17px/1.2 var(--font-display)", color: "#111827", letterSpacing: "-0.01em" }}>Reports</div>
          <div style={{ font: "400 11px/1 var(--font-body)", color: "#2563eb", marginTop: 4, marginBottom: 12 }}>Analytics and progress tracking across your organization.</div>
          <div style={{ marginBottom: 12, display: "inline-flex", height: 26, padding: "0 9px", border: "1px solid #d1d5db", borderRadius: 4, alignItems: "center", gap: 6, background: "#fff", font: "400 9.5px/1 var(--font-body)", color: "#374151" }}>
            — Select Company to scope reports —
            <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></svg>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, marginBottom: 8 }}>
            {reports.slice(0,5).map((r, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: 4, overflow: "hidden" }}>
                <div style={{ height: 3, background: r.color }} />
                <div style={{ padding: "10px 10px 8px" }}>
                  <div style={{ font: "600 10px/1.3 var(--font-display)", color: "#111827", marginBottom: 5 }}>{r.nm}</div>
                  <div style={{ font: "400 8.5px/1.4 var(--font-body)", color: "#6b7280", marginBottom: 7 }}>{r.ds}</div>
                  <div style={{ font: "600 8.5px/1 var(--font-body)", color: r.color }}>View Report →</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8 }}>
            {reports.slice(5).map((r, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: 4, overflow: "hidden" }}>
                <div style={{ height: 3, background: r.color }} />
                <div style={{ padding: "10px 10px 8px" }}>
                  <div style={{ font: "600 10px/1.3 var(--font-display)", color: "#111827", marginBottom: 5 }}>{r.nm}</div>
                  <div style={{ font: "400 8.5px/1.4 var(--font-body)", color: "#6b7280", marginBottom: 7 }}>{r.ds}</div>
                  <div style={{ font: "600 8.5px/1 var(--font-body)", color: r.color }}>View Report →</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// Product screen — full-width KL dashboard showcase
// ============================================================
const ProductScreen = () => (
  <section className="section ps-section" data-screen-label="product-screen">
    <div className="shell">
      <div className="ps-head">
        <div className="eyebrow" style={{ justifyContent: "center", marginBottom: 20 }}>
          <span className="dot" /><span>Knowledge Library · Live platform</span>
        </div>
        <h2 style={{ font: "600 clamp(1.8rem,3.5vw,3rem)/1.1 var(--font-display)", letterSpacing: "-0.02em", color: "var(--fg-1)", margin: "0 0 14px", textAlign: "center", textWrap: "balance" }}>
          See the Knowledge Library in action.
        </h2>
        <p style={{ font: "400 17px/1.6 var(--font-body)", color: "var(--fg-2)", maxWidth: "60ch", margin: "0 auto 40px", textAlign: "center", textWrap: "pretty" }}>
          641+ industrial learning resources — searchable, trackable, and delivered to every
          learner across your sites.
        </p>
      </div>

      {/* Browser chrome + full MockDashboard */}
      <div className="hero-screen ps-screen">
        <div className="winchrome">
          <div className="dots"><i /><i /><i /></div>
          <div className="url">knowledgelibrary.oegllc.com / dashboard</div>
        </div>
        <div className="ps-body">
          <MockDashboard />
        </div>
      </div>

      {/* Three callouts below screen */}
      <div className="ps-callouts">
        <div className="ps-callout">
          <span className="k">641+</span>
          <div className="v">Learning resources across all sites</div>
        </div>
        <div className="ps-callout">
          <span className="k">SCORM ready</span>
          <div className="v">Distributes to your LMS, mobile, or offline</div>
        </div>
        <div className="ps-callout">
          <span className="k">Live tracking</span>
          <div className="v">Completion, gaps, and compliance — by learner</div>
        </div>
      </div>

      <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <a className="btn btn-primary btn-large" href="#contact">Request a demo <Arrow /></a>
        <a className="btn btn-secondary btn-large" href="knowledge-library.html">Explore the platform</a>
      </div>
    </div>
  </section>
);


// ============================================================
// 3D content gallery — equal 2×2 grid
// ============================================================
const Gallery = ({ mc = {} }) => {
  const tiles = [
    { topic: "REFINING", id: "FCC-04",  nm: "Fluid Catalytic Cracking Unit", run: "12:04", poster: mc.galleryPoster1 || "managed-media/gallery-1-poster.jpg" },
    { topic: "SUBSEA",   id: "SUB-11",  nm: "Subsea Tree Maintenance",       run: "18:22", poster: mc.galleryPoster2 || "managed-media/gallery-2-poster.jpg" },
    { topic: "MECH",     id: "PMP-03",  nm: "Gear Pump Fundamentals",        run: "09:18", poster: mc.galleryPoster3 || "managed-media/gallery-3-poster.jpg" },
    { topic: "PROCESS",  id: "GAS-07",  nm: "Gas Processing Overview",       run: "14:46", poster: mc.galleryPoster4 || "managed-media/gallery-4-poster.jpg" },
  ];
  return (
    <section className="section" data-screen-label="gallery">
      <SectionHead
        index="03"
        kicker="Content studio · catalog"
        title="3D content that explains the equipment, not just the words."
      />
      <div className="shell">
        <div className="gallery-grid">
          {tiles.map((t, i) => (
            <a key={i} href="studio.html" className="tile-3d tile-equal">
              <div className="tile-poster" style={{
                position: "absolute", inset: 0,
                backgroundImage: `url(${t.poster})`,
                backgroundSize: "cover", backgroundPosition: "center",
                opacity: 0.45,
              }} />
              <div className="iso" />
              <div className="ph-center">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1">
                  <path d="M12 2L4 7v10l8 5 8-5V7l-8-5z" />
                  <path d="M4 7l8 5 8-5M12 12v10" />
                </svg>
              </div>
              <span className="topic-tag">{t.topic}</span>
              <span className="runtime">{t.run}</span>
              <div className="meta">
                <div className="nm">{t.nm}</div>
                <div className="id">/{t.id}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Outcomes dark band
// ============================================================
const Outcomes = () => (
  <section className="outcomes section" data-screen-label="outcomes">
    <SectionHead
      index="04"
      kicker="// Why customers stay"
      title="Outcomes that show up in the operations report, not the training one."
    />
    <div className="shell">
      <div className="outcomes-grid">
        <div className="cell">
          <div className="num">42<span className="u">%</span></div>
          <div className="lbl">Reduction in time-to-competency for new operators</div>
        </div>
        <div className="cell">
          <div className="num">3.4<span className="u">×</span></div>
          <div className="lbl">More learning hours delivered per trainer headcount</div>
        </div>
        <div className="cell">
          <div className="num">98<span className="u">%</span></div>
          <div className="lbl">Audit-ready compliance against refresher schedules</div>
        </div>
        <div className="cell">
          <div className="num">19<span className="u">yrs</span></div>
          <div className="lbl">Of partnership with refining and oil/gas operators</div>
        </div>
      </div>
      <div style={{ marginTop: 32, font: "500 12px/1.6 var(--font-mono)", color: "rgba(255,255,255,0.5)", letterSpacing: "0.05em", maxWidth: "60ch" }}>
        Indicative figures drawn from customer reporting across 60+ sites; specific outcomes vary by program.
      </div>
    </div>
  </section>
);

// ============================================================
// Quote + case study
// ============================================================
const Quote = () => (
  <section className="section" data-screen-label="quote">
    <div className="shell">
      <div className="quote">
        <div>
          <div className="eyebrow" style={{ marginBottom: 32 }}>
            <span className="dot" /> <span><span className="num">05 / </span>Customer story</span>
          </div>
          <blockquote>
            OEG's content and platform let us collapse months of in&#8209;classroom time into focused,
            on&#8209;demand training — without losing the rigor our auditors expect.
          </blockquote>
          <div className="who">
            <div className="av">JM</div>
            <div>
              <div className="nm">Jordan Mercer</div>
              <div className="role">VP, OPERATIONS LEARNING · GULF COAST REFINER</div>
            </div>
          </div>
        </div>
        <div className="case-card">
          <div className="case-tag">Case study · refinery</div>
          <h4>Roll-out across 6 refining sites in 11 months.</h4>
          <p>
            Replaced four legacy LMS environments with a unified Knowledge Library tenant.
            Migrated 1,200+ resources and certified 3,400 operators against the new curriculum.
          </p>
          <div className="case-stats">
            <div>
              <div className="v">11mo</div>
              <div className="l">END-TO-END ROLLOUT</div>
            </div>
            <div>
              <div className="v">3,400</div>
              <div className="l">OPERATORS CERTIFIED</div>
            </div>
            <div>
              <div className="v">1.2k</div>
              <div className="l">RESOURCES MIGRATED</div>
            </div>
            <div>
              <div className="v">98%</div>
              <div className="l">COMPLIANCE AT AUDIT</div>
            </div>
          </div>
          <a href="customers.html" style={{ marginTop: 20, display: "inline-flex", alignItems: "center", gap: 8, font: "600 13px/1 var(--font-body)", color: "var(--fg-1)", paddingTop: 16, borderTop: "var(--hairline)", width: "100%" }}>
            Read the full case study <Arrow />
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ============================================================
// How it works
// ============================================================
const How = () => (
  <section className="section" data-screen-label="how">
    <SectionHead
      index="06"
      kicker="Engagement model"
      title="How a partnership with OEG actually runs."
    />
    <div className="shell">
      <div className="how">
        {[
          { num: "01", nm: "Discover", ds: "We sit with your trainers and SMEs. We watch the operation. We catalog what you already have." },
          { num: "02", nm: "Produce", ds: "Our studio builds the 3D content and structures it inside Knowledge Library, against your competency model." },
          { num: "03", nm: "Deploy",  ds: "Tenant stands up. SSO + SCORM export connected. Field teams go live with the mobile companion." },
          { num: "04", nm: "Sustain", ds: "Quarterly content refresh, compliance dashboards, and a named partner on your side at all times." },
        ].map(s => (
          <div key={s.num} className="how-step">
            <span className="step-num">{s.num} ──</span>
            <div className="nm">{s.nm}</div>
            <div className="ds">{s.ds}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================
// Knowledge Library — homepage feature section (dark/navy)
// ============================================================
const KLSection = ({ mc = {} }) => (
  <section className="section kl-feature-section" id="eLearning" data-screen-label="kl-feature">
    <SectionHead
      index="07"
      kicker="Knowledge Library"
      title="Industrial Learning Platform for Operations Teams"
    />
    <div className="shell">
      <div className="feature-split">
        <div className="feature-media">
          <video
            controls
            controlsList="nodownload"
            poster={mc.knowledgeLibraryVideoPoster || "managed-media/knowledge-library-poster.png"}
            src={mc.knowledgeLibraryVideo || "https://player.vimeo.com/external/353778793.hd.mp4?s=4ae51697227c11aa5e8859d1af0e4c25f5460516&profile_id=175"}
            style={{ width: "100%", borderRadius: 8, display: "block", background: "var(--navy-950)" }}
          />
        </div>
        <div className="feature-body">
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" /><span>The OEG Knowledge Library</span>
          </div>
          <p style={{ font: "400 16px/1.65 var(--font-body)", color: "rgba(255,255,255,0.75)", margin: "0 0 20px", textWrap: "pretty" }}>
            Build real system understanding with visual learning. The Knowledge Library shows operators
            how systems actually work, helping them develop a clear mental model of equipment interactions,
            flow paths, and cause-and-effect relationships.
          </p>
          <div className="feature-list">
            {[
              "High-fidelity 3D visual learning for complex operating systems.",
              "Centralized learning resources, courses, and learner tracking.",
              "Training content that supports faster onboarding, better retention, and field confidence.",
            ].map((pt, i) => (
              <div key={i} className="feature-list-item">
                <span className="feature-list-dash">—</span>
                <span>{pt}</span>
              </div>
            ))}
          </div>
          <div className="feature-actions">
            <a className="btn btn-inverse" href="#contact">Request Demo <Arrow /></a>
            <a className="btn btn-secondary" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.3)" }} href="knowledge-library.html">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ============================================================
// TAP — homepage feature section (light bg)
// ============================================================
const TAPSection = () => (
  <section className="section" id="tap" data-screen-label="tap-feature">
    <SectionHead
      index="08"
      kicker="TAP"
      title="AI Course Builder for Industrial Training"
    />
    <div className="shell">
      <div className="feature-split">
        <div className="feature-media">
          <video
            controls
            controlsList="nodownload"
            src="https://player.vimeo.com/progressive_redirect/playback/1180805077/rendition/1080p/file.mp4%20%281080p%29.mp4?loc=external&log_user=0&signature=2f66ee00088c232c1cbe7ee32d0e42fb6f23d4e7bcf291239050b48cf397f309"
            style={{ width: "100%", borderRadius: 8, display: "block", background: "var(--navy-950)" }}
          />
        </div>
        <div className="feature-body">
          <div className="eyebrow" style={{ marginBottom: 16, color: "var(--accent)" }}>
            <span className="dot" /><span>Upload. AI organizes. Course ready.</span>
          </div>
          <p style={{ font: "400 16px/1.65 var(--font-body)", color: "var(--fg-2)", margin: "0 0 20px", textWrap: "pretty" }}>
            Creating training is slow and manual. TAP helps turn existing procedures, presentations,
            documents, and subject matter expert notes into structured, ready-to-use courses in minutes.
          </p>
          <div className="feature-list feature-list-light">
            {[
              "AI organizes source content into course modules.",
              "Quizzes and knowledge checks are generated faster.",
              "Output is easier to review, refine, and prepare for LMS delivery.",
            ].map((pt, i) => (
              <div key={i} className="feature-list-item">
                <span className="feature-list-dash">—</span>
                <span>{pt}</span>
              </div>
            ))}
          </div>
          <div className="feature-actions">
            <a className="btn btn-primary" href="#contact">Request Demo <Arrow /></a>
            <a className="btn btn-secondary" href="tap.html">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);
// ============================================================
// Reference Library — homepage feature section (dark/navy)
// ============================================================
const RLMockup = () => {
  const modules = [
    { id: "P-04", tag: "PROCESS",   title: "Fired Heaters",            std: "API 560" },
    { id: "P-07", tag: "PROCESS",   title: "Fluid Catalytic Cracking", std: "API 941" },
    { id: "P-10", tag: "PROCESS",   title: "Distillation",             std: "API 521" },
    { id: "E-02", tag: "EQUIPMENT", title: "Pressure Relief Valves",   std: "API 520" },
    { id: "E-05", tag: "EQUIPMENT", title: "Heat Exchangers",          std: "TEMA"    },
    { id: "P-01", tag: "PROCESS",   title: "Crude Distillation Unit",  std: "API 941" },
  ];
  return (
    <div style={{ background: "#1c1a15", borderRadius: 12, overflow: "hidden", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 24px 48px rgba(0,0,0,0.35)" }}>
      <div style={{ background: "#242019", padding: "12px 16px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#d97706" }} />
          <span style={{ font: "600 10px/1 var(--font-mono)", color: "#d4c5a0", letterSpacing: "0.1em" }}>REFINERY REFERENCE SERIES</span>
        </div>
        <span style={{ font: "400 9.5px/1 var(--font-body)", color: "rgba(255,255,255,0.3)" }}>23 modules</span>
      </div>
      <div style={{ padding: "14px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
        {modules.map((m, i) => (
          <div key={i} style={{ background: "#2a2720", borderRadius: 6, border: "1px solid rgba(255,255,255,0.07)", padding: "10px 10px 8px", position: "relative", overflow: "hidden" }}>
            <div style={{ font: "600 7.5px/1 var(--font-mono)", color: m.tag === "PROCESS" ? "#d97706" : "#6499cc", letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 5 }}>{m.tag}</div>
            <div style={{ font: "600 10.5px/1.3 var(--font-body)", color: "#e8dfc8", marginBottom: 5 }}>{m.title}</div>
            <div style={{ font: "500 8.5px/1 var(--font-mono)", color: "rgba(255,255,255,0.3)" }}>{m.std}</div>
            <div style={{ position: "absolute", top: 6, right: 8, font: "500 8px/1 var(--font-mono)", color: "rgba(255,255,255,0.18)" }}>{m.id}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: "10px 14px", background: "#242019", borderTop: "1px solid rgba(255,255,255,0.06)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ font: "400 9px/1 var(--font-body)", color: "rgba(255,255,255,0.3)" }}>API · ASME · NFPA · OSHA · EPA</span>
        <span style={{ font: "600 9.5px/1 var(--font-body)", color: "#d97706" }}>View Sample →</span>
      </div>
    </div>
  );
};

const RLSection = () => (
  <section className="section kl-feature-section" id="reference-library" data-screen-label="rl-feature">
    <SectionHead
      index="09"
      kicker="Reference Library"
      title="Standards-Cited Reference Modules for Refinery Operations"
    />
    <div className="shell">
      <div className="feature-split">
        <div className="feature-media">
          <RLMockup />
        </div>
        <div className="feature-body">
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot" /><span>23 modules · Process units + Equipment</span>
          </div>
          <p style={{ font: "400 16px/1.65 var(--font-body)", color: "rgba(255,255,255,0.75)", margin: "0 0 20px", textWrap: "pretty" }}>
            The Refinery Reference Series gives operators, engineers, and training teams a
            single source of truth — 23 visual reference modules covering refinery process
            units and critical equipment, all standards-cited against API, ASME, NFPA, OSHA,
            and EPA.
          </p>
          <div className="feature-list">
            {[
              "23 interactive modules: 16 process units + 7 critical equipment references.",
              "Standards citations built in — API, ASME, NFPA, OSHA, and EPA.",
              "Ready for pre-job briefings, onboarding packs, and ongoing field reference.",
            ].map((pt, i) => (
              <div key={i} className="feature-list-item">
                <span className="feature-list-dash">—</span>
                <span>{pt}</span>
              </div>
            ))}
          </div>
          <div className="feature-actions">
            <a className="btn btn-inverse" href="#contact">Request Access <Arrow /></a>
            <a className="btn btn-secondary" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.3)" }} href="reference-library.html">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FALLBACK_TRAINING_LIBRARIES = [
  { slug: "basic-process-science", name: "Basic Process Science",    heroParagraph: "Fundamentals of pressure, temperature, fluid flow, and phase change for process operations.",  thumbnailSrc: "assets/img/content_library/Basic Process Science.jpg" },
  { slug: "pumps",                 name: "Centrifugal Pumps",        heroParagraph: "Pump basics, drivers, seals, seal plans, operations, and troubleshooting.",                     thumbnailSrc: "assets/img/content_library/Centrifugal Pumps.jpg" },
  { slug: "compressors",           name: "Compressors",              heroParagraph: "Reciprocating and centrifugal compressor systems, maintenance, and operation.",                  thumbnailSrc: "assets/img/content_library/Compressors.jpg" },
  { slug: "distillation",          name: "Distillation",             heroParagraph: "Distillation columns, tray and packing internals, and process control.",                        thumbnailSrc: "assets/img/content_library/Distillation.jpg" },
  { slug: "fcc",                   name: "Fluid Catalytic Cracking", heroParagraph: "FCC process fundamentals, reactor-regenerator systems, and troubleshooting.",                   thumbnailSrc: "assets/img/content_library/FCC.jpg" },
  { slug: "fired-heaters",         name: "Fired Heaters",            heroParagraph: "Burners, combustion, draft control, heater efficiency, and safety systems.",                    thumbnailSrc: "assets/img/content_library/Fired Heaters.jpg" },
  { slug: "gear-pumps",            name: "Gear Pumps",               heroParagraph: "Positive displacement gear pump principles, operation, and maintenance.",                       thumbnailSrc: "assets/img/content_library/Gear Pumps.jpg" },
  { slug: "heat-exchangers",       name: "Heat Exchangers",          heroParagraph: "Shell-and-tube, air coolers, heat transfer fundamentals, and fouling.",                         thumbnailSrc: "assets/img/content_library/Heat Exchangers.jpg" },
  { slug: "instrumentation",       name: "Instrumentation",          heroParagraph: "Process measurement, control loops, field instruments, and calibration.",                       thumbnailSrc: "assets/img/content_library/Instrumentation.jpg" },
  { slug: "midstream",             name: "Midstream",                heroParagraph: "Pipeline systems, compression stations, and gas processing operations.",                        thumbnailSrc: "assets/img/content_library/Midstream.jpg" },
  { slug: "valves",                name: "Valves",                   heroParagraph: "Gate, globe, ball, check, and control valves — including actuators and positioners.",           thumbnailSrc: "assets/img/content_library/Introduction to Valves.jpg" },
];

const TrainingLibraries = ({ mc = {} }) => {
  const raw = (mc.trainingLibraries && mc.trainingLibraries.length)
    ? mc.trainingLibraries
    : FALLBACK_TRAINING_LIBRARIES;

  const libraries = raw.filter(l => !l.hidden);
  const count = libraries.length;

  return (
    <section className="section" data-screen-label="training-libraries">
      <SectionHead
        index="10"
        kicker="Content libraries"
        title="Pre-built operator training libraries for the full process plant."
      />
      <div className="shell">
        <div className="lib-grid">
          {libraries.map((lib, i) => (
            <a
              key={lib.slug}
              href={`training/libraries-${lib.slug}.html`}
              className="lib-card lib-card-img"
              style={{ backgroundImage: lib.thumbnailSrc ? `url(${lib.thumbnailSrc})` : "none" }}
            >
              <div className="lib-card-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="lib-card-title">{lib.name}</div>
              <div className="lib-card-desc">{lib.heroParagraph || ""}</div>
              <div className="lib-card-foot">
                <span className="lib-card-cta">Explore library <Arrow size={11} /></span>
              </div>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, borderTop: "var(--hairline)" }}>
          <span className="meta-label">{count} content {count === 1 ? "library" : "libraries"} · 340+ individual titles</span>
          <a href="#contact" className="btn btn-secondary">Request library access <Arrow /></a>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// About OEG — Partner & Learn (full width)
// ============================================================
const About = () => (
  <section className="section" id="about" data-screen-label="about">
    <SectionHead
      index="11"
      kicker="About OEG"
      title="Partner & Learn"
    />
    <div className="shell">
      <div className="about-body about-full">
        <p className="about-lead">
          OEG partners with and learns from our customers at all points in our engagement,
          and uses this knowledge in the continued enhancement of our software solutions and content.
        </p>
        <div className="about-points">
          {[
            "Our solutions are designed to ensure rapid customer support response.",
            "Our people are dedicated to providing customer service excellence.",
            "Our company is driven to research and discover better methods to advance adult learning.",
          ].map((pt, i) => (
            <div key={i} className="about-point">
              <span className="about-point-num">{String(i+1).padStart(2,"0")}</span>
              <span>{pt}</span>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 24 }}>
          <span className="meta-label">Founded in Houston, Texas · 2007</span>
        </div>
      </div>
    </div>
  </section>
);

// ============================================================
// Testimonials — auto-scrolling carousel
// ============================================================
const Testimonials = () => {
  const VISIBLE = 3;
  const GAP     = 24;

  const items = [
    {
      logo: "managed-media/client-logos/Par Pacific Holdings, Inc.png",
      alt: "Par Pacific",
      quote: "Par Pacific initially began using the OEG Knowledge Library because of the quality of their 3D training content for our refining operators. However, the ease of building custom courses in the Knowledge Library platform and the simplicity of SCORM integration with our LMS has allowed us to leverage OEG for all of our custom eLearning course creation.",
      name: "LaToya Smith",
      role: "Director, Talent Management · Par Pacific",
    },
    {
      logo: "managed-media/client-logos/TE3CO_Logo.png",
      alt: "TE3CO",
      quote: "TE3CO selected OEG to develop both marketing and training material for the TE3CO Safety RAT. We chose OEG because of their realistic modeling and animation capabilities as well as their knowledge of complex industrial equipment. All of the content they built for us was turned into courses in the OEG Knowledge Library.",
      name: "John Kovac",
      role: "Operations Manager · TE3CO",
    },
    {
      logo: "managed-media/client-logos/Aveva.png",
      alt: "AVEVA",
      quote: "The OEG Knowledge Library will enhance AVEVA Unified Learning with rich, purpose-built content for basic process operator training, as well as reduce learning time and improve knowledge retention to enable our customers to build and sustain workforce competence.",
      name: "Ravi Gopinath",
      role: "Chief Cloud Officer & Chief Product Officer · AVEVA",
    },
  ];

  const [idx, setIdx]     = React.useState(0);
  const [itemW, setItemW] = React.useState(0);
  const outerRef          = React.useRef(null);
  const maxIdx            = Math.max(0, items.length - VISIBLE);
  const canNav            = items.length > VISIBLE;

  // Measure item width on mount + resize
  React.useEffect(() => {
    const measure = () => {
      if (outerRef.current) {
        setItemW((outerRef.current.offsetWidth - GAP * (VISIBLE - 1)) / VISIBLE);
      }
    };
    const raf = requestAnimationFrame(measure);
    window.addEventListener("resize", measure);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", measure); };
  }, []);

  // Auto-advance only when more items than VISIBLE
  React.useEffect(() => {
    if (!canNav) return;
    const t = setInterval(() => setIdx(i => (i >= maxIdx ? 0 : i + 1)), 6000);
    return () => clearInterval(t);
  }, [canNav, maxIdx]);

  const translateX = itemW > 0 ? -(idx * (itemW + GAP)) : 0;

  return (
    <section className="section" id="testimonials" data-screen-label="testimonials">
      <SectionHead
        index="12"
        kicker="Customer references"
        title="What Our Clients Say About Us"
      />
      <div className="shell">
        <div className="t-outer" ref={outerRef}>
          <div
            className="t-track"
            style={{
              transform: `translateX(${translateX}px)`,
              transition: canNav ? "transform 500ms cubic-bezier(0.4,0,0.2,1)" : "none",
              gap: GAP,
            }}
          >
            {items.map((t, i) => (
              <div
                key={i}
                className="t-item"
                style={itemW > 0 ? { flex: `0 0 ${itemW}px` } : { flex: "1 1 0" }}
              >
                <div className="testimonial-card">
                  <div className="testimonial-quote">&ldquo;{t.quote}&rdquo;</div>
                  <div className="testimonial-who">
                    <img src={t.logo} alt={t.alt} className="testimonial-logo" />
                    <div>
                      <div className="testimonial-name">{t.name}</div>
                      <div className="testimonial-role">{t.role}</div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {canNav && (
          <div className="t-nav">
            <button
              className="t-btn"
              onClick={() => setIdx(i => Math.max(0, i - 1))}
              disabled={idx === 0}
              aria-label="Previous"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square"><path d="M19 12H5M11 5l-7 7 7 7"/></svg>
            </button>
            <div className="t-dots">
              {Array.from({ length: maxIdx + 1 }).map((_, i) => (
                <button
                  key={i}
                  className={`t-dot${i === idx ? " active" : ""}`}
                  onClick={() => setIdx(i)}
                  aria-label={`Slide ${i + 1}`}
                />
              ))}
            </div>
            <button
              className="t-btn"
              onClick={() => setIdx(i => Math.min(maxIdx, i + 1))}
              disabled={idx === maxIdx}
              aria-label="Next"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
          </div>
        )}
      </div>
    </section>
  );
};

// ============================================================
// Contact
// ============================================================
const Contact = () => {
  const [status, setStatus] = React.useState("idle");
  const [capA] = React.useState(() => Math.floor(Math.random() * 9) + 1);
  const [capB] = React.useState(() => Math.floor(Math.random() * 9) + 1);

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    if (!form.senderFName.value.trim()) return;
    setStatus("sending");
    const data = new FormData(form);
    // Append UTM / tracking params from URL
    const p = new URLSearchParams(window.location.search);
    ["utm_source","utm_medium","utm_campaign","utm_term","utm_content","gclid","fbclid"].forEach(k => {
      if (p.get(k)) data.set(k, p.get(k));
    });
    data.set("current_page", window.location.href);
    data.set("referrer_url", document.referrer || "");
    data.set("landing_page", sessionStorage.getItem("oeg_landing") || window.location.href);
    fetch("assets/php/send.php", { method: "POST", body: data })
      .then(r => r.text())
      .then(res => setStatus(res.trim() === "1" ? "success" : "error"))
      .catch(() => setStatus("error"));
  };

  return (
    <section className="contact-band" id="contact" data-screen-label="contact">
      <div className="shell">
        <div className="contact-grid">
          <div className="contact-info">
            <div className="eyebrow" style={{ marginBottom: 20 }}>
              <span className="dot" /><span><span className="num">12 / </span>Contact</span>
            </div>
            <h2 style={{ font: "600 clamp(1.8rem,3.2vw,3rem)/1.05 var(--font-display)", letterSpacing: "-0.02em", color: "#fff", margin: "0 0 16px", textWrap: "balance" }}>
              See the platform on your operation.
            </h2>
            <p className="contact-info-sub">
              A 30-minute working session with our team — bring a competency model or a piece of
              equipment you'd like trained, and we'll show how it maps to OEG.
            </p>
            <div className="contact-info-privacy">
              OEG will not call or email you unless requested, and the contact information you
              provide will never be shared.
            </div>
            <dl className="contact-details">
              <div className="contact-detail">
                <dt>Address</dt>
                <dd>10235 West Little York Road, Suite 260<br />Houston, TX 77040 USA</dd>
              </div>
              <div className="contact-detail">
                <dt>Phone</dt>
                <dd>+1 281.794.9107</dd>
              </div>
              <div className="contact-detail">
                <dt>Email</dt>
                <dd>sales@oegllc.com</dd>
              </div>
            </dl>
          </div>

          <div className="contact-form-wrap">
            <div className="contact-form-head">Get in touch</div>
            <div className="contact-form-sub">Complete the form and we will get back to you.</div>
            {status === "success" ? (
              <div className="contact-success">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                Thanks! We'll be in touch shortly.
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                {/* Hidden spam-check fields */}
                <input type="hidden" name="checkHuman_a" value={capA} />
                <input type="hidden" name="checkHuman_b" value={capB} />
                <div className="cform-row">
                  <input type="text"  name="senderFName" className="cform-input" placeholder="First name"    maxLength="100" required />
                  <input type="text"  name="senderLName" className="cform-input" placeholder="Last name"     maxLength="100" required />
                </div>
                <div className="cform-row">
                  <input type="email" name="senderEmail" className="cform-input" placeholder="Email address" maxLength="100" required />
                  <input type="tel"   name="senderPhone" className="cform-input" placeholder="Phone number"  maxLength="100" />
                </div>
                <div className="cform-row cform-full">
                  <textarea name="message" className="cform-textarea" rows="4" placeholder="How can we help?" required></textarea>
                </div>
                <div className="cform-row cform-full">
                  <input
                    type="number"
                    name="senderHuman"
                    className="cform-input"
                    placeholder={`Spam check: what is ${capA} + ${capB}?`}
                    required
                  />
                </div>
                {status === "error" && (
                  <div className="cform-error">There was a problem sending your message. Please try again.</div>
                )}
                <button type="submit" className="cform-submit" disabled={status === "sending"}>
                  {status === "sending" ? "Sending…" : "Send Message"}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// CTA band
// ============================================================
const CTABand = () => (
  <section className="cta-band" data-screen-label="cta">
    <div className="shell">
      <div className="cta-inner">
        <div>
          <h2>See the platform on your operation.</h2>
          <div className="cta-sub">
            A 30&#8209;minute working session with our team — bring a competency model or a piece of
            equipment you'd like trained, and we'll show how it maps to OEG.
          </div>
        </div>
        <div className="cta-actions">
          <a className="btn btn-inverse btn-large" href="contact.html">
            Request a demo <Arrow />
          </a>
          <a className="btn btn-secondary btn-large" href="contact.html" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.3)" }}>
            Email the team
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ============================================================
// Footer
// ============================================================
const Footer = () => {
  const [dark, setDark] = React.useState(() => document.body.dataset.theme === 'dark');

  const toggleTheme = () => {
    const next = dark ? 'light' : 'dark';
    window.dispatchEvent(new CustomEvent('oeg:theme', { detail: next }));
    localStorage.setItem('oeg_theme_pref', next);
    setDark(!dark);
  };

  return (
    <footer className="footer" data-screen-label="footer">
      <div className="shell">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{ marginBottom: 16 }}>
              <img
                className="logo-light footer-wordmark"
                src="managed-media/oeg-logo-dark.png"
                alt="OEG — The Operations Excellence Group"
              />
              <img
                className="logo-dark footer-wordmark"
                src="managed-media/oeg-logo-white.png"
                alt="OEG — The Operations Excellence Group"
              />
            </div>
            <div className="tag">
              Industrial learning platform &amp; 3D training content.<br />
              Houston, Texas · Founded 2007.
            </div>
          </div>
          <div className="footer-col">
            <h5>Products</h5>
            <a href="knowledge-library.html">Knowledge Library</a>
            <a href="tap.html">TAP</a>
            <a href="reference-library.html">Reference Library</a>
          </div>
          <div className="footer-col">
            <h5>Training Libraries</h5>
            <a href="training/libraries-basic-process-science.html">Basic Process Science</a>
            <a href="training/libraries-pumps.html">Centrifugal Pumps</a>
            <a href="training/libraries-compressors.html">Compressors</a>
            <a href="training/libraries-distillation.html">Distillation</a>
            <a href="training/libraries-fcc.html">FCC</a>
            <a href="training/libraries-fired-heaters.html">Fired Heaters</a>
            <a href="training/libraries-gear-pumps.html">Gear Pumps</a>
            <a href="training/libraries-heat-exchangers.html">Heat Exchangers</a>
            <a href="training/libraries-instrumentation.html">Instrumentation</a>
            <a href="training/libraries-midstream.html">Midstream</a>
            <a href="training/libraries-valves.html">Valves</a>
          </div>
          <div className="footer-col">
            <h5>Company</h5>
            <a href="#about">About OEG</a>
            <a href="#customers">Customers</a>
            <a href="#contact">Contact</a>
            <a href="https://www.linkedin.com/company/the-operations-excellence-group" target="_blank" rel="noreferrer" style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
              LinkedIn
            </a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 OEG LLC · Houston, TX</span>
          <div className="legal-links">
            <a href="privacy.html">Privacy</a>
            <a href="terms.html">Terms</a>
            <a href="admin/index.php">Admin</a>
            <button
              className="theme-toggle"
              onClick={toggleTheme}
              aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
            >
              {dark
                ? <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
                : <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
              }
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
};


Object.assign(window, {
  ProductScreen,
  SectionHead, Logos, Tour, Gallery, Outcomes, Quote, How,
  KLSection, TAPSection, RLSection, TrainingLibraries, About, Testimonials, Contact, CTABand, Footer,
});