// VoxLens case showcase — sits directly under the VoxLens project card.
// "同一套引擎产出什么": ① flagship case ② product docs ③ market & competitive insight.
const { useState: useVx, useRef: useRefVx, useEffect: useEffectVx } = React;
const VX_BLUE = "#4d7cfe";
const VX_AMBER = "#e8a13a";
function VxArrow({ hover }) {
return (
);
}
function VxLink({ children, color = "var(--text)", href, onClick }) {
const [h, setH] = useVx(false);
const Tag = href ? "a" : "span";
return (
setH(true)} onMouseLeave={() => setH(false)}
style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 14.5, fontWeight: 600,
color: h ? "#fff" : color, cursor: "pointer", transition: "color .2s", letterSpacing: "-0.01em", textDecoration: "none" }}>
{children});
}
// Remember the portfolio's scroll position before navigating to the full case,
// so returning lands the user back on the flagship card.
function saveReturnScroll() {
try {
var sc = document.querySelector('main');
sessionStorage.setItem('wiloReturnScroll', String(sc ? sc.scrollTop : 0));
} catch (e) {}
}
function VxFileIcon() {
return (
);
}
function VxIdeaIcon() {
return (
);
}
// Stacked "button card" — icon + title + one-line subtitle (direction B)
function VxBtnCard({ icon, title, sub, href, onClick, primary }) {
const [h, setH] = useVx(false);
const skin = primary ?
{ background: "linear-gradient(135deg,#5b86ff,#3b63f0)", color: "#fff", border: "1px solid transparent" } :
{ background: h ? "var(--panel-3)" : "var(--panel-2)", color: "var(--text)", border: "1px solid var(--line-2)" };
return (
setH(true)} onMouseLeave={() => setH(false)}
style={{
display: "flex", alignItems: "center", gap: 13, padding: "13px 15px", borderRadius: 14, textDecoration: "none",
transition: "transform .2s, background .2s, box-shadow .2s", transform: h ? "translateY(-2px)" : "none",
boxShadow: h && primary ? "0 18px 36px -16px rgba(59,99,240,0.85)" : "none", ...skin
}}>
{icon}{title}
{sub && {sub}}
);
}
function VxImg({ id, ph, radius = 12, src, aspect = "16 / 9", fit = "cover" }) {
return (
);
}
function VxBadge({ children, color }) {
return (
{children});
}
function VxChip({ children }) {
return (
{children});
}
function VxSectionHead({ n, title, hint }) {
return (
);
}
// Chapter marker — the connector between the VoxLens card and its reports (direction B)
function VxChapterMarker({ open, onToggle }) {
const [h, setH] = useVx(false);
return (