// ============================================================ // pages-other.jsx — Products, Research, Mission, Contact // ============================================================ // ------------------------------------------------------------ // ProductsPage — catalogue + spec drawer // ------------------------------------------------------------ const PRODUCTS = [ { id: "fl-mha", code: "FL-MHA / L", title: "Miniaturised modular hairpin assembly line", blurb: "Reconfigurable cell layout. Per-drawing, per-line.", power: "—", lead: "as appropriate", rev: "B", long: "Reconfigurable automated hairpin generation cell. Wire gauge and cassette geometry are selected at commissioning. Delivered as a complete line." }, { id: "fl-clm", code: "FL-CLM / S", title: "Closed-loop req-output mfg sim", blurb: "Bidirectional. Process observed by process.", power: "—", lead: "to be confirmed", rev: "A", long: "Closed-loop requirement-to-output simulator. Provided as a packaged software artefact under separate cover." }, { id: "fl-chp", code: "FL-CHP / R", title: "CHP winding rapid prototype set", blurb: "Continuous-hairpin winding development bench.", power: "—", lead: "upon agreement", rev: "B", long: "Continuous-hairpin winding development bench. Sample rate and head selection are made at order. Acceptance criteria are agreed with the operator up front." }, { id: "fl-amb", code: "FL-AMB / B", title: "Bifilar AMB coils", blurb: "Active magnetic bearing — bifilar topology. Per shaft.", power: "—", lead: "subject to scope", rev: "A", long: "Bifilar active-magnetic-bearing coil set. Wound per drawing, against a specified shaft geometry." }]; function ProductsPage({ onRoute }) { const [selected, setSelected] = React.useState(null); return (
Catalogue 4 PRODUCTS

Our catalogue.

Each product is configured to your specification. Nothing is stocked off the shelf.

{PRODUCTS.map((p) => setSelected(p)} /> )}
{selected && setSelected(null)} />}
); } function ProductCard({ p, onClick }) { const restricted = p.restricted; return (
{!restricted ? : <>
//  · § 4.4
OFF-SPEC
}
{p.code} REV {p.rev}
{p.title || "—"}

{p.blurb}

{p.power} {p.lead}
); } // ------------------------------------------------------------ // SpecDrawer — full-screen sheet with the spec sheet // ------------------------------------------------------------ function SpecDrawer({ p, onClose }) { const restricted = p.restricted; const accent = restricted ? "var(--offspec-500)" : "var(--phosphor-500)"; React.useEffect(() => { const k = (e) => {if (e.key === "Escape") onClose();}; window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k); }, [onClose]); return (
e.stopPropagation()} style={{ maxWidth: 1080, margin: "0 auto", padding: 0, borderColor: restricted ? "var(--offspec-900)" : "var(--phosphor-700)", boxShadow: restricted ? "0 0 40px #ff2bd333" : "0 0 40px #33ff6633" }}> {/* header */}
{p.code} · REV {p.rev}
{p.title || · catalogue entry withheld ·}
{restricted ? SEALED-BID ONLY : AVAILABLE}
{/* body: two-column */}
{/* left rail — metadata */}
{/* right: spec rows */}
Overview

{restricted ? {p.long} : p.long}

Specifications
{restricted ? <> see § 4.4} /> redacted · sealed} /> : <> }
); } function RailItem({ k, v, anom }) { return (
{k}
{v}
); } function SpecRow({ k, v, anom }) { return ( {k} {v} ); } // ------------------------------------------------------------ // ResearchPage — biased toward the off-spec // ------------------------------------------------------------ function ResearchPage() { return (
Research INTERNAL

What our research team works on.

A brief look at the areas our internal research group is currently focused on.

{/* LEFT — research topics */}
{/* RIGHT — anomalous data card */}
// SIMULATION MODELS
// DISCLAIMER

These are summaries only and may change as our research progresses.

); } function ResearchTopic({ n, title, body, anom }) { return (
{n} {anom && RESTRICTED}
{title}

{body}

); } function FacilityRow({ loc, type, anom }) { return (
{loc} {type}
); } // ------------------------------------------------------------ // ContactPage — form // ------------------------------------------------------------ function ContactPage() { const [form, setForm] = React.useState({ name: "", org: "", email: "", phone: "", interest: "", power: "", lead: "", message: "" }); const [submitted, setSubmitted] = React.useState(false); const [errors, setErrors] = React.useState({}); const update = (k, v) => setForm((f) => ({ ...f, [k]: v })); const submit = (e) => { e.preventDefault(); const err = {}; if (!form.name.trim()) err.name = "Required."; if (!form.org.trim()) err.org = "Required."; if (!form.email.includes("@")) err.email = "Required, with @."; if (!form.interest) err.interest = "Select one."; if (!form.message.trim() || form.message.length < 16) err.message = "Minimum 16 characters."; setErrors(err); if (Object.keys(err).length === 0) setSubmitted(true); }; if (submitted) { return (
Thank you

Enquiry received.

Thanks for reaching out — we'll get back to you soon.

{setSubmitted(false);setForm({ name: "", org: "", email: "", phone: "", interest: "", power: "", lead: "", message: "" });}}> Send another enquiry
); } return (
Contact FORM FL-RFQ-04

Get in touch.

Tell us about your project and we'll follow up.

{/* main form */}
update("name", e.target.value)} placeholder="Family name, given name" /> {errors.name && } update("org", e.target.value)} placeholder="Legal entity" /> {errors.org && } update("email", e.target.value)} placeholder="engineer@example.eu" type="email" /> {errors.email && } update("phone", e.target.value)} placeholder="+39 02 …" /> {errors.interest && } update("lead", e.target.value)} placeholder="e.g. Q4 2026" />