{/* Left Column: Brand & Control Narrative */} {/* Creative Agency Monogram Header */}

MARIA

Zero Handover Accidents

{content.title || "Locked Guardrails, Zero Accidents"}

Lurio acts as an unbreakable layout shield. Your typography rules, visual grid constraints, and palette relationships are permanently frozen at source. Clients edit content freely—without damaging the design.

{/* Interactive Step Selection Tabs */}

{fragments.map((frag, i) => { const active = activeIdx === i; return (

{ if (typeof setFragmentStep === "function") setFragmentStep(i); }} className="card" style={{ cursor: "pointer", padding: "16px 20px", background: active ? "var(--pitch-bg-surface-hover)" : "var(--pitch-bg-surface)", border: active ? "1px solid var(--pitch-primary)" : "1px solid var(--pitch-border)", boxShadow: active ? "var(--pitch-shadow-elevated)" : "none", display: "flex", alignItems: "center", justifyContent: "space-between", transition: "all 0.25s ease" }} {...primitives.hover.liftShadow()} >

0{i + 1} {frag.label}

{active && ( )}

); })}

{/* Right Column: Live Engine Mockup Viewport */} {/* Editor Header / Tool Bar */}

LURIO PROTECTION ACTIVATED

{/* Main Workspace Layout */}

{/* Layers Panel Sidebar */}

LURIO LAYERS

{[ { name: "Visual Canvas", type: "lock" }, { name: "Brand Accent", type: "lock" }, { name: "Headline Box", type: "edit" }, { name: "Subtext Frame", type: "edit" } ].map((layer, idx) => { const isSelectedEdit = layer.type === "edit" && activeIdx === 2; return (

{layer.name} {layer.type === "lock" ? "🔒" : "✏️"}

); })}

{/* Simulated Live Layout Workspace Canvas */}

{/* --- CASE 0: LAYOUT GRID LOCKING --- */} {activeIdx === 0 && (

{/* Grid Overlay Lines (Simulating constraints) */}

{/* The constrained poster container */}

MARIA 🔒

VISUAL AREA {/* Constraint crop markers */}

{/* Floating Lock Warning Badge */} 🔒 SYSTEM REJECTED DRAG: ASPECT RATIO RESTRICTED {/* Custom Moving Pointer */}

)} {/* --- CASE 1: BRAND PALETTE PROTECTION --- */} {activeIdx === 1 && (

{/* Swatches Visualizer */}

{[ { name: "Royal Ink", hex: "var(--pitch-accent)" }, { name: "Crimson Clash", hex: "var(--pitch-primary)" }, { name: "Dusty Rose", hex: "var(--pitch-secondary)" } ].map((color, i) => (

{color.name}

{color.hex} 🔒

))}

{/* Warning Overlay */}

ACCESS DENIED

Hex overrides are disabled. Canvas background locked to Maria Palette.

)} {/* --- CASE 2: CONTENT CONTROL --- */} {activeIdx === 2 && (

{/* Editing Box */}

✏️ CLIENT EDITABLE AREA

{mockText}

Type scale constraint active. Headline locked at standard Playfair H2 hierarchy.

{/* Floating Success Indicator */} ✓ LIVE SYSTEM SECURE // LAYOUT INTACT

)}

{/* Footer Bar of Editor */}

SANDBOX STAGE: {fragments[activeIdx].label.toUpperCase()} VERSION 1.0 (SECURE)

);

Protect Your Craft Beyond Handover

Protect Your Craft
Beyond Handover