// OEG Homepage — Hero variants
// Three hero layouts, cycled via Tweaks

const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="square">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
);

// ============================================================
// Hero variant 1 — Bold statement + product screenshot
// ============================================================
const HeroBold = () => {
  return (
    <section className="hero" data-screen-label="hero/bold">
      <div className="hero-iso" />
      <div className="shell" style={{ position: "relative" }}>

        <div className="hero-grid">
          <div>
            <h1 className="hero-title">
              <span className="br">Industrial training,</span>
              <span className="br"><span className="underline-mark">engineered</span> for the</span>
              <span className="br"><span className="lof">people who run</span></span>
              <span className="br">the plant.</span>
            </h1>
            <p className="hero-lead">
              OEG builds the 3D content and learning platform that refineries, processors, and operators
              use to train, certify, and re&#8209;qualify their workforce — from the control room to the catwalks.
            </p>
            <div className="hero-bullets">
              <div className="item">
                <span className="k">Since 2007</span>
                <div className="v">Building industrial learning content</div>
              </div>
              <div className="item">
                <span className="k">19 years</span>
                <div className="v">Of partnership with refining & oil/gas operators</div>
              </div>
              <div className="item">
                <span className="k">SCORM ready</span>
                <div className="v">Distributes to your LMS, mobile, or offline kits</div>
              </div>
            </div>
          </div>

          <div className="hero-screen-wrap" style={{ position: "relative" }}>
            <div className="hero-annot a1">
              <span className="num">01</span>
              <span>3D content authored in&#8209;house</span>
            </div>
            <div className="hero-annot a2">
              <span className="num">02</span>
              <span>Tracked to the learner, by site</span>
            </div>
            <div className="hero-screen">
              <div className="winchrome">
                <div className="dots"><i /><i /><i /></div>
                <div className="url">knowledgelibrary.oegllc.com / dashboard</div>
              </div>
              <div className="hero-screen-body">
                <MockDashboard />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Hero variant 2 — Split studio | library
// ============================================================
const HeroSplit = () => {
  return (
    <section data-screen-label="hero/split">
      <div className="shell" style={{ paddingTop: 32, paddingBottom: 24 }}>
        <div className="hero-meta-row">
          <span className="pulse">Two halves, one company</span>
          <span className="sep">/</span>
          <span>Studio + Knowledge Library</span>
        </div>
        <h1 className="hero-title" style={{ marginBottom: 0 }}>
          We make the content,<br /> and the system it lives in.
        </h1>
      </div>
      <div className="hero-split">
        <div className="side-studio">
          <div className="iso-grid" />
          <div style={{ position: "relative" }}>
            <div className="side-eyebrow">
              <span className="code">01</span>
              <span>Industrial Content Studio</span>
            </div>
            <h2 className="side-headline">3D content<br />that earns trust on the floor.</h2>
            <p className="side-lead">
              FCC units, subsea trees, fired heaters, gear pumps. We model the equipment,
              animate the process, and produce the video your trainers actually want to use.
            </p>
            <div className="render-placeholder">
              <span className="corner tl" /><span className="corner tr" />
              <span className="corner bl" /><span className="corner br" />
              <span className="ph-label">3D render placeholder · FCC-04</span>
            </div>
          </div>
          <a href="studio.html" className="side-link">
            Explore the studio <Arrow />
          </a>
        </div>

        <div className="side-library">
          <div style={{ position: "relative" }}>
            <div className="side-eyebrow">
              <span className="code">02</span>
              <span>Knowledge Library</span>
            </div>
            <h2 className="side-headline">The platform that<br />finds the right resource.</h2>
            <p className="side-lead">
              Your animations, videos, procedures, and SOPs — searchable, trackable,
              and ready at the point of work. In&nbsp;class, on the web, or in&nbsp;hand.
            </p>
            <div className="ui-preview">
              <div className="tile">
                <div className="l">Active learners</div>
                <div className="v">1,284<span className="d">+12.4%</span></div>
              </div>
              <div className="tile">
                <div className="l">Completion</div>
                <div className="v">94.7%<span className="d">+2.1pt</span></div>
              </div>
              <div className="tile">
                <div className="l">Sessions / wk</div>
                <div className="v">3,402<span className="d">+18.6%</span></div>
              </div>
              <div className="tile">
                <div className="l">Sites</div>
                <div className="v">12<span className="d">+2</span></div>
              </div>
            </div>
          </div>
          <a href="platform.html" className="side-link">
            Tour the platform <Arrow />
          </a>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Hero variant 3 — Isometric cube centerpiece
// ============================================================
const HeroCube = () => {
  return (
    <section className="hero-cube" data-screen-label="hero/cube">
      <div className="grid-bg" />
      <div className="shell">
        <div className="cube-wrap">
          <div className="cube-ring" />
          <img className="logo-light" src={(window.__resources && window.__resources.cubeBlue) || "assets/oeg-cube-blue.png"} alt="OEG cube" />
          <img className="logo-dark" src={(window.__resources && window.__resources.cubeBlack) || "assets/oeg-cube-black.png"} alt="OEG cube" style={{ filter: "invert(1) brightness(2)" }} />
        </div>

        <h1>
          Build, distribute, and <span style={{ color: "var(--accent)" }}>prove</span> industrial training.
        </h1>
        <p>
          OEG produces the 3D content and operates the learning platform that the world's
          most demanding refineries and process operators run their workforce on.
        </p>
        <div className="ticker">
          <div className="cell">
            <div className="lbl">In Production</div>
            <div className="val">2007<span className="u">→ today</span></div>
          </div>
          <div className="cell">
            <div className="lbl">3D content titles</div>
            <div className="val">340<span className="u">+</span></div>
          </div>
          <div className="cell">
            <div className="lbl">Customer sites</div>
            <div className="val">60<span className="u">+</span></div>
          </div>
          <div className="cell">
            <div className="lbl">Learners served</div>
            <div className="val">120k<span className="u">+</span></div>
          </div>
        </div>
      </div>
    </section>
  );
};


const MockDashboard = () => {
  const navItems = [
    { label: "Explore",        icon: "explore",  active: true  },
    { label: "Project Folder", icon: "folder"                  },
    { label: "Syllabus",       icon: "doc"                     },
    { label: "Micro Courses",  icon: "play"                    },
    { label: "Assessment",     icon: "check"                   },
    { label: "Refresher",      icon: "refresh"                 },
    { label: "Field Guides",   icon: "doc"                     },
    { label: "Assignment",     icon: "doc"                     },
    { label: "Support",        icon: "chat"                    },
  ];

  const cards = [
    { type: "INTERACTIVE", title: "210 Valve",                           cat: "Valves",               oeg: true,  img: true  },
    { type: "VIDEO",       title: "360 Rig View",                        cat: "All",                  oeg: false, img: true  },
    { type: "DOCUMENT",    title: "9.0 Respiratory",                     cat: "All",                  oeg: false, img: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",                     cat: "All",                  oeg: false, img: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",                     cat: "All",                  oeg: false, img: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",                     cat: "All",                  oeg: false, img: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",                     cat: "All",                  oeg: false, img: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",                     cat: "All",                  oeg: false, img: false },
    { type: "DOCUMENT",    title: "9.0 Respiratory",                     cat: "All",                  oeg: false, img: false },
    { type: "VIDEO",       title: "Abnormal Mechanical Conditions",       cat: "Fired Heaters",        oeg: true,  img: true  },
    { type: "VIDEO",       title: "About the CSB",                       cat: "Chemical Safety Board", oeg: true,  img: true  },
    { type: "VIDEO",       title: "Absorption Vs. Adsorption",           cat: "Basic Refining",       oeg: true,  img: true  },
    { type: "VIDEO",       title: "After the Rainbow",                   cat: "Chemical Safety Board", oeg: true,  img: true  },
    { type: "DOCUMENT",    title: "AI and Web Search Visibility Overview", cat: "All",                oeg: false, img: false },
    { type: "DOCUMENT",    title: "AI and Web Search Visibility Overview", cat: "All",                oeg: false, img: false },
  ];

  const badgeBg = { INTERACTIVE: "#1e4080", VIDEO: "#1b3a6e", DOCUMENT: "#344054" };

  const SideIcon = ({ type, active }) => {
    const s = { width: 10, height: 10, flex: "none" };
    const stroke = active ? "rgba(255,255,255,0.8)" : "rgba(255,255,255,0.4)";
    if (type === "folder")  return <svg {...s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>;
    if (type === "play")    return <svg {...s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8"><polygon points="5 3 19 12 5 21 5 3"/></svg>;
    if (type === "check")   return <svg {...s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 15 10"/></svg>;
    if (type === "refresh") return <svg {...s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.95"/></svg>;
    if (type === "chat")    return <svg {...s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    return <svg {...s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.8"><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>;
  };

  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "var(--font-body)", fontSize: 11 }}>

      {/* ── Sidebar ── */}
      <div style={{ width: 148, flex: "none", background: "#131e2d", display: "flex", flexDirection: "column" }}>
        {/* Logo */}
        <div style={{ padding: "11px 12px 9px", borderBottom: "1px solid rgba(255,255,255,0.06)", display: "flex", alignItems: "center", gap: 7 }}>
          <img src="assets/oeg-cube-blue.png" style={{ width: 22, height: 22, objectFit: "contain", flex: "none" }} alt="" />
          <div>
            <div style={{ font: "600 8px/1.3 var(--font-body)", color: "#fff" }}>The Operations</div>
            <div style={{ font: "400 8px/1 var(--font-body)", color: "rgba(255,255,255,0.4)" }}>Excellence Group</div>
          </div>
        </div>
        {/* Nav */}
        <div style={{ flex: 1, padding: "5px 0" }}>
          {navItems.map((item, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 7, padding: "5px 10px",
              background: item.active ? "rgba(59,130,246,0.15)" : "transparent",
              borderLeft: item.active ? "2px solid #3b82f6" : "2px solid transparent",
            }}>
              {item.active
                ? <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#3b82f6"/></svg>
                : <svg width="8" height="8" 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>
              }
              <SideIcon type={item.icon} active={item.active} />
              <span style={{ font: `${item.active ? "600" : "400"} 10.5px/1 var(--font-body)`, color: item.active ? "#fff" : "rgba(255,255,255,0.45)" }}>{item.label}</span>
            </div>
          ))}
        </div>
        {/* Footer */}
        <div style={{ padding: "7px 12px", borderTop: "1px solid rgba(255,255,255,0.06)" }}>
          <div style={{ font: "500 9px/1.3 var(--font-body)", color: "rgba(255,255,255,0.45)" }}>OEG System Admin</div>
          <div style={{ font: "400 8px/1 var(--font-mono)", color: "rgba(255,255,255,0.2)", marginTop: 2 }}>powered by OEG</div>
        </div>
      </div>

      {/* ── Main ── */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#fff", minWidth: 0 }}>
        {/* Header */}
        <div style={{ padding: "8px 14px", borderBottom: "1px solid #e5e7eb", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ font: "600 12px/1 var(--font-display)", color: "#111827", letterSpacing: "-0.01em" }}>Instructor Dashboard</span>
          <div style={{ display: "flex", gap: 10 }}>
            {[
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" 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="#9ca3af" 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="#9ca3af" 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="#9ca3af" 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="#9ca3af" 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>,
            ].map((ic, i) => <span key={i}>{ic}</span>)}
          </div>
        </div>

        {/* Search + filters */}
        <div style={{ padding: "7px 14px", display: "flex", alignItems: "center", gap: 5, borderBottom: "1px solid #e5e7eb", background: "#f9fafb" }}>
          <div style={{ flex: 1, height: 26, border: "1px solid #d1d5db", borderRadius: 4, display: "flex", alignItems: "center", padding: "0 8px", gap: 5, background: "#fff" }}>
            <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...</span>
          </div>
          {["Directory", "Language", "Type"].map(f => (
            <div key={f} style={{ height: 26, padding: "0 7px", border: "1px solid #d1d5db", borderRadius: 4, display: "flex", alignItems: "center", gap: 3, background: "#fff", font: "400 9.5px/1 var(--font-body)", color: "#374151", whiteSpace: "nowrap" }}>
              {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 style={{ height: 26, padding: "0 9px", background: "#2563eb", borderRadius: 4, display: "flex", alignItems: "center", font: "600 9.5px/1 var(--font-body)", color: "#fff", whiteSpace: "nowrap" }}>641 Results</div>
          <div style={{ display: "flex", gap: 3 }}>
            <div style={{ width: 24, height: 24, border: "1px solid #d1d5db", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#6b7280" 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>
            <div style={{ width: 24, height: 24, border: "1px solid #2563eb", borderRadius: 3, background: "#eff6ff", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#2563eb" strokeWidth="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            </div>
          </div>
        </div>

        {/* Card grid */}
        <div style={{ flex: 1, overflow: "hidden", padding: "9px 12px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 7 }}>
            {cards.map((card, i) => (
              <div key={i} style={{ background: "#fff", border: "1px solid #e5e7eb", borderRadius: 3, overflow: "hidden" }}>
                <div style={{ aspectRatio: "16/9", background: card.img ? "#1a2c42" : "#25354a", position: "relative", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {card.img && (
                    <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(135deg, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(225deg, rgba(255,255,255,0.03) 1px, transparent 1px)", backgroundSize: "14px 14px" }} />
                  )}
                  {!card.img && (
                    <svg width="16" height="16" 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, left: 3, font: "600 6px/1 var(--font-mono)", letterSpacing: "0.08em", color: "#fff", background: badgeBg[card.type] || "#344054", padding: "2px 4px", borderRadius: 2 }}>{card.type}</div>
                </div>
                <div style={{ padding: "5px 6px" }}>
                  <div style={{ font: "500 8.5px/1.35 var(--font-body)", color: "#111827", overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>{card.title}</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 3, marginTop: 2 }}>
                    <span style={{ font: "400 8px/1 var(--font-body)", color: "#2563eb" }}>{card.cat}</span>
                    {card.oeg && <span style={{ font: "700 6px/1 var(--font-mono)", color: "#fff", background: "#2563eb", padding: "1px 3px", borderRadius: 2 }}>OEG</span>}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};


Object.assign(window, { HeroBold, HeroSplit, HeroCube, MockDashboard, Arrow });