/* global React */
/* Designed placeholder mockups for case studies — each is a stylized
   browser shot in the brand palette of the real client. */

const MockChrome = ({ children, dark = true, label = "" }) => (
  <div style={{
    position: "absolute", inset: 0,
    background: dark
      ? "linear-gradient(180deg,#0c0c0c 0%, #0a0a0a 100%)"
      : "linear-gradient(180deg,#fafafa 0%, #f0f0f0 100%)",
  }}>
    <div style={{
      height: 32, display: "flex", alignItems: "center", padding: "0 12px",
      borderBottom: dark ? "1px solid #1a1a1a" : "1px solid #e2e2e2",
      background: dark ? "rgba(15,15,15,0.7)" : "rgba(255,255,255,0.7)",
    }}>
      <div style={{ display: "flex", gap: 5 }}>
        {[0,1,2].map(i => (
          <span key={i} style={{
            width: 8, height: 8, borderRadius: "50%",
            background: dark ? "#222" : "#d4d4d4"
          }} />
        ))}
      </div>
      <div style={{
        margin: "0 auto",
        fontSize: 10.5, color: dark ? "#6B7280" : "#888",
        fontFamily: "var(--font-body)",
        background: dark ? "#0e0e0e" : "rgba(255,255,255,0.85)",
        padding: "4px 12px", borderRadius: 999,
        border: dark ? "1px solid #1a1a1a" : "1px solid #e2e2e2",
      }}>{label}</div>
      <div style={{ width: 50 }} />
    </div>
    <div style={{ position: "absolute", left: 0, right: 0, top: 32, bottom: 0 }}>
      {children}
    </div>
  </div>
);

/* 1 — Verimatrix : video security, deep blue */
const MockVerimatrix = () => (
  <MockChrome label="verimatrix.com">
    <div style={{ height: "100%", background: "linear-gradient(135deg, #001A33 0%, #003366 70%, #0055AA 100%)", padding: "36px 44px", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#9DB5D9" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "0.02em", color: "#fff" }}>verimatrix</span>
        <span style={{ display: "flex", gap: 16 }}><span>Solutions</span><span>Industries</span><span>Resources</span><span style={{ color: "#fff" }}>Contact</span></span>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, top: "44%", transform: "translateY(-50%)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 11, color: "#5EC6FF", letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 14 }}>Cybersecurity for video</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 50, fontWeight: 600, lineHeight: 0.96, letterSpacing: "-0.03em", color: "#fff", maxWidth: "14ch" }}>Protect <em style={{ color: "#5EC6FF", fontStyle: "italic" }}>every</em> stream.</div>
      </div>
      <div style={{ position: "absolute", right: -40, bottom: -40, width: 280, height: 280, border: "1px solid rgba(94,198,255,0.18)", borderRadius: "50%" }} />
      <div style={{ position: "absolute", right: 20, bottom: 20, width: 200, height: 200, border: "1px solid rgba(94,198,255,0.28)", borderRadius: "50%" }} />
    </div>
  </MockChrome>
);

/* 2 — Pro Triathletes Organisation : athletic, red/black */
const MockPTO = () => (
  <MockChrome label="protriathletes.org">
    <div style={{ height: "100%", background: "linear-gradient(180deg, #0F0F12 0%, #18181D 100%)", padding: "32px 44px", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#A0A0A8" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, letterSpacing: "0.16em", color: "#fff" }}>PTO <span style={{ color: "#E63946" }}>·</span> TRIATHLON</span>
        <span style={{ display: "flex", gap: 16 }}><span>Athletes</span><span>Races</span><span>Rankings</span><span style={{ color: "#fff" }}>Watch</span></span>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, top: "46%", transform: "translateY(-50%)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 11, color: "#E63946", letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 600 }}>Live · T100 World Tour</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 56, fontWeight: 700, lineHeight: 0.94, letterSpacing: "-0.04em", color: "#fff", maxWidth: "12ch", marginTop: 12, textTransform: "uppercase" }}>The world's <span style={{ color: "#E63946" }}>fastest</span> triathletes.</div>
      </div>
      <div style={{ position: "absolute", right: 44, bottom: 24, display: "flex", gap: 16, fontSize: 10, color: "#A0A0A8" }}>
        <div><div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "#fff", fontWeight: 600 }}>100</div>ATHLETES</div>
        <div><div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "#fff", fontWeight: 600 }}>8</div>RACES</div>
        <div><div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "#E63946", fontWeight: 600 }}>$2M</div>PRIZE</div>
      </div>
    </div>
  </MockChrome>
);

/* 3 — Renoir Group : consulting, navy + tan */
const MockRenoir = () => (
  <MockChrome label="renoirgroup.com" dark={false}>
    <div style={{ height: "100%", background: "linear-gradient(180deg, #F5F1EA 0%, #E8E1D2 100%)", padding: "36px 44px", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#5C5142" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "0.02em", color: "#1F2A44", fontSize: 14 }}>Renoir<span style={{ color: "#B89B5E" }}>.</span></span>
        <span style={{ display: "flex", gap: 16 }}><span>Approach</span><span>Industries</span><span>Insights</span><span style={{ color: "#1F2A44" }}>Contact</span></span>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, top: "44%", transform: "translateY(-50%)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 10.5, color: "#B89B5E", letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 14, fontWeight: 600 }}>Operational consulting</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 46, fontWeight: 600, lineHeight: 0.98, letterSpacing: "-0.03em", color: "#1F2A44", maxWidth: "13ch" }}>Change that <em style={{ color: "#B89B5E", fontStyle: "italic" }}>actually</em> sticks.</div>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, bottom: 24, display: "flex", gap: 22, fontSize: 9.5, color: "#5C5142", fontFamily: "var(--font-body)" }}>
        <span style={{ borderTop: "1px solid #C5BAA4", paddingTop: 6, flex: 1 }}>40+ YRS</span>
        <span style={{ borderTop: "1px solid #C5BAA4", paddingTop: 6, flex: 1 }}>120 OFFICES</span>
        <span style={{ borderTop: "1px solid #C5BAA4", paddingTop: 6, flex: 1 }}>1,800 CONSULTANTS</span>
      </div>
    </div>
  </MockChrome>
);

/* 4 — Within3 : life sciences, blue/teal */
const MockWithin3 = () => (
  <MockChrome label="within3.com" dark={false}>
    <div style={{ height: "100%", background: "linear-gradient(135deg, #F4F8FB 0%, #E1ECF5 100%)", padding: "36px 44px", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#5A6B7D" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, color: "#0B2A4A", fontSize: 14 }}>within<span style={{ color: "#1FA89E" }}>3</span></span>
        <span style={{ display: "flex", gap: 14 }}><span>Platform</span><span>Solutions</span><span>Insights</span><span style={{ color: "#0B2A4A" }}>Demo</span></span>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, top: "44%", transform: "translateY(-50%)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 10.5, color: "#1FA89E", letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 14, fontWeight: 600 }}>Life sciences intelligence</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 600, lineHeight: 0.98, letterSpacing: "-0.03em", color: "#0B2A4A", maxWidth: "14ch" }}>Better <em style={{ color: "#1FA89E", fontStyle: "italic" }}>insights</em>, faster decisions.</div>
      </div>
      <div style={{ position: "absolute", right: -30, top: 60, width: 220, height: 220, border: "1.5px solid rgba(31,168,158,0.22)", borderRadius: "50%" }} />
      <div style={{ position: "absolute", right: 20, top: 110, width: 120, height: 120, border: "1.5px solid rgba(31,168,158,0.4)", borderRadius: "50%" }} />
      <div style={{ position: "absolute", right: 60, top: 140, width: 60, height: 60, background: "#1FA89E", borderRadius: "50%", opacity: 0.85 }} />
    </div>
  </MockChrome>
);

/* 5 — Nexus International School : education, deep teal */
const MockNexus = () => (
  <MockChrome label="nexus.edu.my" dark={false}>
    <div style={{ height: "100%", background: "#F2EFE8", padding: "32px 44px", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#5A6058" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "#1B4332", fontSize: 13, letterSpacing: "0.04em" }}>NEXUS <span style={{ color: "#C9A227" }}>·</span> INTERNATIONAL</span>
        <span style={{ display: "flex", gap: 14 }}><span>Curriculum</span><span>Admissions</span><span>Campus</span><span style={{ color: "#1B4332" }}>Visit</span></span>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, top: "44%", transform: "translateY(-50%)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 10.5, color: "#C9A227", letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 14, fontWeight: 600 }}>Putrajaya · Singapore</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 46, fontWeight: 600, lineHeight: 0.98, letterSpacing: "-0.03em", color: "#1B4332", maxWidth: "13ch" }}>Where <em style={{ color: "#C9A227", fontStyle: "italic" }}>curiosity</em> finds its course.</div>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, bottom: 22, display: "flex", gap: 18, fontSize: 9.5, color: "#5A6058" }}>
        <span style={{ borderTop: "1px solid #C9C2B0", paddingTop: 6, flex: 1, fontFamily: "var(--font-body)" }}>EYFS · IB</span>
        <span style={{ borderTop: "1px solid #C9C2B0", paddingTop: 6, flex: 1, fontFamily: "var(--font-body)" }}>50+ NATIONALITIES</span>
        <span style={{ borderTop: "1px solid #C9C2B0", paddingTop: 6, flex: 1, fontFamily: "var(--font-body)" }}>EST. 2008</span>
      </div>
    </div>
  </MockChrome>
);

/* 6 — Bima Visuals : photo/video studio, cinematic dark */
const MockBima = () => (
  <MockChrome label="bimavisuals.com">
    <div style={{ height: "100%", background: "#0A0A0A", padding: "30px 44px", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#888" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, color: "#F5F5F5", letterSpacing: "0.06em" }}>BIMA<span style={{ color: "#D4A24C" }}>·</span>VISUALS</span>
        <span style={{ display: "flex", gap: 16 }}><span>Films</span><span>Stills</span><span>Studio</span><span style={{ color: "#fff" }}>Hire</span></span>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, top: "42%", transform: "translateY(-50%)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 10.5, color: "#D4A24C", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 14, fontWeight: 500 }}>Production · Kuala Lumpur</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 54, fontWeight: 600, lineHeight: 0.94, letterSpacing: "-0.04em", color: "#F5F5F5", maxWidth: "12ch" }}>Stories with <em style={{ color: "#D4A24C", fontStyle: "italic", fontWeight: 500 }}>cinematic</em> weight.</div>
      </div>
      <div style={{ position: "absolute", left: 44, right: 44, bottom: 22, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, fontSize: 9, color: "#888" }}>
        {[["01","Maxis"],["02","Petronas"],["03","Astro"],["04","KLCC"]].map(([n, name]) => (
          <div key={n} style={{ borderTop: "1px solid #2A2A2A", paddingTop: 6, display: "flex", justifyContent: "space-between" }}>
            <span style={{ color: "#D4A24C" }}>{n}</span>
            <span style={{ color: "#F5F5F5" }}>{name}</span>
          </div>
        ))}
      </div>
    </div>
  </MockChrome>
);

Object.assign(window, {
  MockVerimatrix, MockPTO, MockRenoir, MockWithin3, MockNexus, MockBima,
  // backwards-compat aliases for any cached imports
  MockMaren: MockVerimatrix, MockNorthbeam: MockPTO, MockHalden: MockRenoir,
});
