import React, { useState, useEffect } from 'react';
import {
MessageSquare,
Cpu,
Database,
Map,
Plane,
Zap,
ShieldCheck,
ChevronRight,
Terminal,
Activity,
Globe,
Settings
} from 'lucide-react';
const App = () => {
const [activeStage, setActiveStage] = useState('ingestion');
const [scenario, setScenario] = useState('standard');
const [isSimulating, setIsSimulating] = useState(false);
const [simOutput, setSimOutput] = useState(null);
const scenarios = {
standard: {
input: "Can you get my bags to the Ritz-Carlton SFO if my flight lands at 4 PM?",
logic: [
{ step: "Check DL882 Status", status: "On Time", icon: Plane },
{ step: "SFO Grid Capacity", status: "82% Available", icon: Database },
{ step: "Traffic (SFO -> Market St)", status: "Light (22 mins)", icon: Map },
],
output: "Yes, Jerome. If you book now, we guarantee delivery by 5:45 PM. Head straight to Benu."
},
delay: {
input: "My flight is delayed by 2 hours. What happens to my bags?",
logic: [
{ step: "Reschedule Pickup", status: "Buffer Applied", icon: Settings },
{ step: "Vault Allocation", status: "Hold at Terminal B", icon: ShieldCheck },
{ step: "New ETA Calculation", status: "8:00 PM Delivery", icon: Activity },
],
output: "No stress. We've detected the delay. Your bags will stay in our secure 'Project Zero' vault until your new landing time."
}
};
const runSimulation = () => {
setIsSimulating(true);
setSimOutput(null);
setTimeout(() => {
setIsSimulating(false);
setSimOutput(scenarios[scenario]);
}, 1500);
};
return (
{/* Header */}
{/* Left Column: The Architecture */}
The AI Orchestration Loop
{[
{
id: 'ingestion',
title: '1. Ingestion',
desc: 'Captures voice/text + Flight metadata from Google sync.',
icon: MessageSquare
},
{
id: 'reasoning',
title: '2. Predictive Reasoning',
desc: 'Grounding in BAGGED™ Logistics Data + Real-time traffic.',
icon: Zap
},
{
id: 'output',
title: '3. Strategic Output',
desc: 'Delivers high-confidence logistics solutions & stress reduction.',
icon: ShieldCheck
}
].map((stage) => (
setActiveStage(stage.id)}
>
{stage.title}
{stage.desc}
))}
GCP Data Moat Integration
Public Feeds
Google Maps / FlightAware
Proprietary
BAGGED™ Capacity Grid
Infrastructure
Project Zero Telemetry
AI Layer
Vertex AI Custom Prompting
{/* Right Column: Simulation Sandbox */}
"{scenarios[scenario].input}"
{isSimulating && (
)}
{simOutput && (
Reasoning Process
{simOutput.logic.map((l, idx) => (
))}
AI Response
{simOutput.output}
)}
Scale 3 Deployment Ready
This model leverages Gemini's multi-modal capabilities to eventually ingest photos of luggage tags and voice commands via wearables.
);
};
export default App;