/* global React */ // Shared full-screen section helpers (Sl*), used by the About page and available to // future narrative pages. Exported on window.SL. Originally written for the retired // storefront Sailing pages (archived in sailing-performance-web/work/storefront-native-pages). const { Icon, Eyebrow, Btn, Reveal, DeviceShowcase, AccentText } = window; const slInner = (children, style = {}) => (
{children}
); // ---------------- SlSection — natural-height section shell ---------------- // Mirrors product.jsx's cdSection (bg image + local radial scrim under the // text column) but WITHOUT the 100vh floor or the snap class — these pages // scroll normally. className "sl-sec" carries the mobile padding override // (added to index.html's CSS by another work package). function SlSection({ children, id, style = {}, bg = null, bgOpacity = 0.14, scrimX = "30%", deep = false }) { return (
{bg &&
); } // ---------------- SlBack — "Home" link, shared by both heroes ---------------- function SlBack({ go }) { return ( ); } // ---------------- SlPaper — navy figure card (Sailing Performance only) ---------------- // The approved art direction for this product: a navy line-art card // against the otherwise dark suite chrome, rather than the blue glass panels // the rest of the site uses for imagery. function SlPaper({ image, alt, kicker, caption, eager }) { return (
{alt}
{(kicker || caption) && (
{kicker &&
{kicker}
} {caption &&

{caption}

}
)}
); } // ---------------- SlHero — shared hero shell for both pages ---------------- // `figure` (Sailing Performance): two-column, text left / SlPaper right. // `bg` (Sailing Simulator): full-bleed background image behind a single // centered text column, with a left-to-right scrim so the copy stays legible. function SlHero({ go, spec }) { const facts = spec.facts || []; return (
{spec.bg &&
); } // ---------------- SlHead — eyebrow + h2 + body paragraph(s) ---------------- function SlHead({ eyebrow, headline, accentWord, body, align = "left", max = 680 }) { const centered = align === "center"; const body_ = typeof body === "string" ? [body] : (body || []); return ( {eyebrow && {eyebrow}}

{body_.map((para, i) => (

{para}

))} ); } // ---------------- SlCards / SlBullets — local icon-card & bullet renderers ---------------- // Same visual language as product.jsx's CDCards/CDBullets (surface card / // ruled bullet row over the storefront tokens), kept local so this file has // no coupling to product.jsx's internal helpers beyond the shared atoms. function SlCards({ items, cols }) { const n = cols || (items.length % 3 === 0 ? 3 : (items.length === 4 ? 2 : 3)); return (
{items.map(([icon, title, desc], i) => (
{title}
{desc}
 ))}
); } function SlBulletRow({ icon, title, desc, first }) { const [h, setH] = React.useState(false); return (
setH(true)} onMouseLeave={() => setH(false)} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: "15px 12px", margin: "0 -12px", borderRadius: 12, borderTop: first ? "none" : "1px solid var(--hairline)", background: h ? "rgba(80,134,182,.06)" : "transparent", transform: h ? "translateX(5px)" : "none", transition: "background .25s var(--ease), transform .25s var(--ease)" }}>

{title} — {desc}

); } function SlBullets({ items, contained = true }) { return (
{items.map(([icon, title, desc], i) => ( ))}
); } // ---------------- SlChips — pill row (compatibility section) ---------------- function SlChips({ items }) { return (
{items.map((c) => ( {c} ))}
); } // ---------------- SlRoles — five role tabs + a decorative deck-plan ---------------- // The deck plan is a purely decorative bow-to-transom schematic; it is only // mounted at wide viewports (checked at mount + on resize) rather than hidden // with a component-local