/* global React */ const { useState, useEffect, useRef } = React; // ── Phone frame ─────────────────────────────────────────────────────────────── function PhoneFrame({ children }) { return (
{/* notch */}
{/* status bar */}
9:41 ●●● ▲
{children}
{/* home bar */}
); } // ── Browser frame ───────────────────────────────────────────────────────────── function BrowserFrame({ children, url = "app.gropp.tech" }) { return (
{/* chrome */}
{["oklch(0.70 0.15 25)","oklch(0.75 0.15 80)","oklch(0.65 0.18 145)"].map((c,i) => (
))}
{url}
{children}
); } // ── Screen mocks ────────────────────────────────────────────────────────────── function AppScreen({ isEs }) { const [step, setStep] = useState(0); useEffect(() => { const id = setInterval(() => setStep(s => (s + 1) % 4), 2200); return () => clearInterval(id); }, []); const tasks = [ { label: isEs ? "Retirar paquetes en bodega" : "Pick up packages at depot", done: true }, { label: isEs ? "Entregar — Av. Italia 3421" : "Deliver — Av. Italia 3421", done: step > 0 }, { label: isEs ? "Entregar — Br. Artigas 880" : "Deliver — Br. Artigas 880", done: step > 1 }, { label: isEs ? "Entregar — Malvín Norte" : "Deliver — Malvín Norte", done: step > 2 }, ]; return (
{/* map area */}
{/* road grid */} {[30,60,90,110].map((y,i) => )} {[40,80,120,160,200].map((x,i) => )} {/* route */} {/* stops */} {[[40,110],[120,60],[200,30]].map(([x,y],i) => ( {i+1} ))} {/* current marker */} ETA 14:32 · 3.2 km
{/* tasks */}
{isEs ? "PARADAS HOY" : "TODAY'S STOPS"} · {tasks.filter(t=>t.done).length}/{tasks.length}
{tasks.map((t, i) => (
{t.done &&
}
{t.label}
))} {/* voice bar */}
{[4,8,12,8,5,10,7].map((h,i) => (
))}
{isEs ? "Hablar con AI…" : "Talk to AI…"}
); } function WebScreen({ isEs }) { const [tick, setTick] = useState(0); useEffect(() => { const id = setInterval(() => setTick(t => t+1), 1800); return () => clearInterval(id); }, []); const drivers = [ { name:"J. Pérez", stops:12, done:8, status:"on-route", eta:"14:32" }, { name:"M. Alves", stops:9, done:9, status:"done", eta:"—" }, { name:"C. Soria", stops:14, done:5, status:"delayed", eta:"15:10" }, { name:"R. Torres", stops:11, done:7, status:"on-route", eta:"14:48" }, ]; const statusColor = { "on-route": "oklch(0.62 0.18 145)", "done": "oklch(0.55 0.04 240)", "delayed": "oklch(0.65 0.18 35)" }; return (
{/* sidebar */}
{[ { label: isEs ? "Mapa en vivo" : "Live map", active: true }, { label: isEs ? "Conductores" : "Drivers", active: false }, { label: isEs ? "Rutas" : "Routes", active: false }, { label: isEs ? "Alertas" : "Alerts", active: false }, { label: "Analytics", active: false }, ].map((item, i) => (
{item.label}
))}
{/* main */}
{/* map */}
{[20,45,70,95].map(y => )} {[40,80,120,160,200,240].map(x => )} {/* routes */} {/* vehicles */} {[[40+(tick%8)*14, 95-(tick%8)*3.5],[80+(tick%6)*10,95-(tick%6)*4.2],[40+(tick%9)*22,45+(tick%9)*0]].map(([x,y],i) => ( ))}
{/* drivers table */}
{isEs ? "CONDUCTOR" : "DRIVER"}{isEs ? "PARADAS" : "STOPS"}STATUSETA
{drivers.map((d, i) => (
{d.name} {d.done}/{d.stops} {d.status} {d.eta}
))}
); } function SupervisorScreen({ isEs }) { const [selected, setSelected] = useState(0); const drivers = [ { name:"J. Pérez", score:91, trend:"+3", incidents:0 }, { name:"C. Soria", score:74, trend:"−5", incidents:2 }, { name:"R. Torres", score:83, trend:"+1", incidents:1 }, { name:"M. Alves", score:96, trend:"+2", incidents:0 }, ]; const scoreColor = s => s >= 85 ? "oklch(0.62 0.18 145)" : s >= 70 ? "oklch(0.72 0.16 75)" : "oklch(0.65 0.18 35)"; const d = drivers[selected]; return (
{/* driver list */}
{isEs ? "CONDUCTORES" : "DRIVERS"} · {drivers.length}
{drivers.map((dr, i) => (
setSelected(i)} style={{ padding:"8px 10px", cursor:"pointer", background: i === selected ? "oklch(0.93 0.01 240)" : "transparent", borderBottom:"1px solid oklch(0.92 0.005 240)" }}>
{dr.name}
{dr.score} {dr.trend}
))}
{/* detail */}
{d.name[0]}
{d.name}
{isEs ? "SCORE SEMANA" : "WEEKLY SCORE"}
{d.score}
{/* mini score bar */}
{/* incidents */}
{isEs ? "INCIDENTES" : "INCIDENTS"} · {d.incidents > 0 ? d.incidents : (isEs ? "ninguno" : "none")}
{d.incidents > 0 && (
⚠ {isEs ? "Frenado brusco 14:02 · video disponible" : "Hard braking 14:02 · video available"}
)} {/* coaching prompt */}
AI · {isEs ? "Mejorar freno en curvas. Recomendamos sesión de coaching esta semana." : "Improve braking in curves. We recommend a coaching session this week."}
); } // ── Main PlatformSection ────────────────────────────────────────────────────── function PlatformSection({ copy, lang }) { const [active, setActive] = useState(0); const isEs = lang === "es"; const tabs = copy.tabs; const tab = tabs[active]; const deviceType = ["phone", "browser", "browser"][active]; return (

{copy.title_a}{copy.title_b}{copy.title_c}

{copy.sub}

{/* Tab switcher */}
{tabs.map((t, i) => ( ))}
{/* Body */}
{/* Features */}
{tab.tag}

{tab.title_a}{tab.title_b}{tab.title_c}

{tab.sub}

{tab.features.map((f, i) => (
{f.title}
{f.body}
))}
{/* Device */}
{deviceType === "phone" ? : active === 1 ? : }
); } window.PlatformSection = PlatformSection;