/* global React */ // Tragitto — animated usage demo scenes (pt). Composes the design-system // primitives + the app's visual language into parametric, animatable screens. // Loaded after animations.jsx, icons.jsx and the DS bundle. const { clamp, useTime, useSprite, Easing } = window; const T = () => window.TragittoDesignSystem_b33cbc; const TX = () => window.TG_I18N[window.__TG_LANG || "pt"]; const lerp = (a, b, t) => a + (b - a) * t; function VSparkle({ size = 26 }) { return ( ); } /* ----------------------------------------------------------------- phone */ // Persistent device. Inner content area stacks time-gated screen layers. function PhoneShell({ children }) { return (
9:41
{children}
); } // A full-bleed, opacity-faded screen layer gated to [start,end] of GLOBAL time. function Layer({ start, end = Infinity, fade = 0.5, z = 1, children }) { const t = useTime(); let o = 0; if (t >= start - fade && t <= (end === Infinity ? Infinity : end + fade)) { if (t < start) o = (t - (start - fade)) / fade; else if (end !== Infinity && t > end) o = 1 - (t - end) / fade; else o = 1; } o = clamp(o, 0, 1); if (o <= 0.002) return null; return (
{children}
); } /* --------------------------------------------------------- trips screen */ const TRIP_META = [ { img: "assets/photos/paris.png", name: "Paris", pro: true }, { img: "assets/photos/happyhour.png", name: "Toronto" }, { img: "assets/photos/ubatuba.png", name: "Algarve" }, ]; function TripsScreen({ liftIndex = -1 }) { const { Card, Badge, Avatar } = T(); const tx = TX(); return (

{tx.tripsTitle}

{TRIP_META.map((t, i) => { const info = tx.trips[i]; return (
{t.pro &&
}

{t.name}

{info.place} · {info.dates}

{info.label}
 ); })}
); } /* ------------------------------------------------------- timeline screen */ // Icons/tones are language-neutral; emoji/title/time/meta come from TG_I18N. const DAY_ICONS = [ { icon: "navigation", tone: "sand" }, { icon: "navigation", tone: "sand" }, { icon: "ticket", tone: "brand" }, { icon: "bed-double", tone: "sage" }, { icon: "ticket", tone: "brand" }, ]; const NODE_C = { sand: { bg: "var(--sand-100)", fg: "var(--sand-700)" }, brand: { bg: "var(--terracotta-100)", fg: "var(--terracotta-600)" }, sage: { bg: "var(--sage-100)", fg: "var(--sage-700)" }, }; function TimelineNode({ item, solid }) { const c = NODE_C[item.tone] || NODE_C.brand; return (
); } // pct: ring value · visible: how many items shown · pop: index getting the drop-in pop · group: show avatars function TimelineScreen({ pct = 24, visible = 5, pop = -1, group = false, headerDates = false }) { const { ProgressRing, Badge, Avatar } = T(); const tx = TX(); const items = DAY_ICONS.map((d, i) => ({ ...d, ...tx.items[i] })).slice(0, visible); return (

Paris

{group ? (
{["G", "M", "L"].map((a, i) => (
))}
) : }
{Math.round(pct)}% {tx.readySuffix}
{pct < 50 ? tx.noteLow : tx.noteHigh}
{tx.day}
{items.map((it, i) => { const popping = i === pop; return (
{it.emoji} {it.title} {popping && {tx.novo}}
{it.time} · {it.meta}
); })}
); } /* ----------------------------------------------------------- chat screen */ function AgentHeader() { return (
{TX().agentName}
{TX().online}
); } // stage: 0 user only · 1 typing · 2+ reply with (stage-2) lines revealed function ChatScreen({ stage = 0, linesShown = 0, showReply = false, typing = false }) { const { ChatBubble } = T(); const tx = TX(); return (
{tx.chatUser} {typing && (
{[0, 1, 2].map((i) => )}
)} {showReply && (

{tx.chatLead}

{tx.chatHead}

{tx.planLines.slice(0, linesShown).map(([t, d], i) => ( {t} – {d}{i < linesShown - 1 ?

: null} ))}

)}
{tx.composer}
); } /* ------------------------------------------------- floating overlays ---- */ // Booking-confirmation email that flies in, then forwards into the app. function EmailCard({ flyT = 0 }) { // flyT 0..1: 0 = resting at top, 1 = shrunk + dropped into phone const scale = lerp(1, 0.28, Easing.easeInCubic(flyT)); const ty = lerp(0, 520, Easing.easeInCubic(flyT)); const op = flyT > 0.7 ? lerp(1, 0, (flyT - 0.7) / 0.3) : 1; return (
LATAM Airlines
{TX().email.sub}
{TX().email.when}
{TX().email.cta}
); } // Small in-app toast pill. function Toast({ icon = "check", children }) { return (
{children}
); } // Caption shown above the phone, per beat. Reads its own copy live from the // dictionary (by index) so language changes propagate even when the parent // caption band doesn't re-render. function Caption({ idx }) { const { progress } = useSprite(); const b = TX().beats[idx] || { eyebrow: "", title: "" }; const o = clamp(progress < 0.12 ? progress / 0.12 : progress > 0.9 ? 1 - (progress - 0.9) / 0.1 : 1, 0, 1); const ty = (1 - clamp(progress / 0.12, 0, 1)) * 18; return (
{b.eyebrow}
{b.title}
); } Object.assign(window, { PhoneShell, Layer, TripsScreen, TimelineScreen, ChatScreen, EmailCard, Toast, Caption, DAY_ICONS, TX, });