// case-study.jsx — Case study: Automated Sales Desk.
// Standalone page. Reuses SoptixLogo / Eyebrow / Button / LangSwitcher from
// components.jsx and the cs.* keys from i18n.jsx. Adding a second case study
// means a new html shell + a new key block; the sections below are generic.
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;
const CAL_URL = "https://cal.com/soptix-khw4jx/30min";
function prefersReduceC() {
return !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
}
// Fires once when an element scrolls into view. Returns [ref, inView].
function useInViewC(opts) {
const ref = useRefC(null);
const [inView, setInView] = useStateC(false);
useEffectC(() => {
const el = ref.current;
if (!el) return;
if (!("IntersectionObserver" in window)) { setInView(true); return; }
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { setInView(true); obs.unobserve(e.target); }
});
}, opts || { threshold: 0.25 });
obs.observe(el);
return () => obs.disconnect();
}, []);
return [ref, inView];
}
// Same scroll-reveal the homepage uses.
function useScrollRevealC() {
useEffectC(() => {
const els = document.querySelectorAll(".reveal");
if (!("IntersectionObserver" in window)) {
els.forEach((el) => el.classList.add("in"));
return;
}
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); }
});
}, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" });
els.forEach((el) => obs.observe(el));
return () => obs.disconnect();
}, []);
}
// ────────────────────────────────────────────────────────────
// Chrome
// ────────────────────────────────────────────────────────────
function CSHeader({ t, lang, setLang }) {
return (
);
}
function CSFooter({ t }) {
return (
);
}
// ────────────────────────────────────────────────────────────
// Building blocks
// ────────────────────────────────────────────────────────────
// Grid whose 1px gap over a slate background draws the dividers, so the rules
// stay correct however many columns survive the responsive collapse.
function RuledGrid({ cols, children }) {
return (
{children}
);
}
function CSSection({ eyebrow, title, sub, bg, children }) {
return (
{(eyebrow || title) && (
{eyebrow &&
{eyebrow}
}
{title && (
{title}
)}
{sub && (
{sub}
)}
)}
{children}
);
}
// Numbered cell used by the situation and architecture grids.
function PointCell({ n, label, h, p }) {
const [hover, setHover] = useStateC(false);
return (
);
}
function MonoLabel({ children, style }) {
return (
{children}
);
}
// ────────────────────────────────────────────────────────────
// Hero
// ────────────────────────────────────────────────────────────
function CSHero({ t }) {
const meta = ["client", "problem", "result", "window"];
return (
{t("cs.eyebrow")}
{t("cs.h1")}
{/* Break between the two sentences, never mid-phrase. */}
{t("cs.subtitle.a")} {t("cs.subtitle.b")}
{t("cs.sub")}
{/* Engagement facts */}
{meta.map((k) => (
{t("cs.meta." + k + ".k")}
{t("cs.meta." + k + ".v")}
))}
{/* Headline numbers */}
{[1, 2, 3, 4].map((i) => (
{t("cs.kpi." + i + ".v")}
{t("cs.kpi." + i + ".k")}
))}
);
}
// ────────────────────────────────────────────────────────────
// Architecture diagram — the four layers, drawn as the copy describes them:
// channels into a normalizing layer, one agent reading a client-owned catalog,
// one write path out to the CRM. Deliberately vendor-free.
// ────────────────────────────────────────────────────────────
const DIAG_CHANNELS = ["cs.diag.wa", "cs.diag.ig", "cs.diag.fb"];
function DiagBox({ lit, accent, className, hKey, subKey, t }) {
return (
{t(hKey)}
{t(subKey)}
);
}
function DiagArrow({ lit }) {
return (
↓
);
}
function ArchitectureDiagram({ t }) {
const [ref, inView] = useInViewC({ threshold: 0.2 });
const reduce = prefersReduceC();
const [step, setStep] = useStateC(reduce ? 4 : 0);
// Build the stack top down once it scrolls into view.
useEffectC(() => {
if (!inView || reduce) return;
let i = 0;
const id = setInterval(() => { i += 1; setStep(i); if (i >= 4) clearInterval(id); }, 460);
return () => clearInterval(id);
}, [inView, reduce]);
const on = (s) => step >= s;
return (
{DIAG_CHANNELS.map((k) => (
{t(k)}
))}
↔
{t("cs.diag.caption")}
);
}
function CSCornerLabels({ label }) {
return (