"use client"; import { useState, useEffect, useRef, useCallback } from "react"; const SCREENS = [ { label: "🏡 Home", key: "home" }, { label: "💉 Vaccinations", key: "vaccines" }, { label: "📸 Memories", key: "memories" }, ] as const; // ── Screen 0: Home / Quick Log ────────────────────────────────── function HomeScreen() { return (
{/* Status bar */}
9:41
●●● WiFi 🔋
{/* Top nav */}
{[0,1,2].map(i =>
)}
☀️ 🆘
{/* Greeting */}

Good morning 👋

How is Arjun doing today?

{/* Baby card */}
👶

Arjun

4 months

{/* Today summary */}
{[ { icon: "🍼", label: "Feeds", count: 4, last: "2m ago" }, { icon: "🚼", label: "Diapers", count: 3, last: "1h ago" }, { icon: "😴", label: "Sleep", count: 1, last: "3h ago" }, ].map(item => (
{item.icon} {item.count} {item.label} {item.last}
))}
{/* Quick Log */}

Quick Log

{[["🍼","Feed"],["😴","Sleep"],["🚼","Diaper"]].map(([icon, lbl]) => (
{icon} {lbl}
))}
{/* Recent Activity */}

Recent Activity

See all →
{[ { icon: "🍼", label: "Feed", detail: "90 ml", time: "10:42 AM" }, { icon: "😴", label: "Sleep", detail: "2h", time: "8:30 AM" }, { icon: "🚼", label: "Diaper",detail: "", time: "7:00 AM" }, ].map(row => (
{row.icon}

{row.label}

{row.time}

{row.detail && {row.detail}}
))}
{/* Bottom tab bar strip */}
{[["🏡","Home"],["📋","Activity"],["✨","AI"],["☰","Menu"]].map(([icon, lbl]) => (
{icon} {lbl}
))}
); } // ── Screen 1: Vaccinations ────────────────────────────────────── function VaccinationsScreen() { return (
{/* Header */}

Medical

{/* Tab bar */}
{["Vaccines","Medicine","Allergies"].map((t, i) => (
{t}
))}

IAP Schedule

{/* Status tabs */}
{[["Upcoming (3)","rose"],["Completed (4)","gray"],["Overdue (0)","gray"]].map(([lbl, col]) => (
{lbl}
))}
{/* Vaccine rows */}
{[ { name: "OPV-1", due: "15 Jul 2025", done: false }, { name: "Pentavalent-1", due: "15 Jul 2025", done: false }, { name: "PCV-1", due: "10 Jul 2025", done: true }, { name: "Rota-1", due: "15 Jul 2025", done: false }, ].map(v => (

{v.name}

Due: {v.due}

{v.done ? :
Mark Given
}
))}
{/* Telegram chip */}
📲

Telegram reminder in 3 days

{/* Bottom tab strip */}
{[["🏡","Home"],["📋","Activity"],["✨","AI"],["☰","Menu"]].map(([icon, lbl]) => (
{icon} {lbl}
))}
); } // ── Screen 2: Memories ────────────────────────────────────────── function MemoriesScreen() { return (
{/* Header */}

Memories

{/* Folder tabs */}
{[["🌟","All"],["👣","First Steps"],["🛁","Bath Time"],["🍼","Feeding"]].map(([emoji, lbl], i) => (
{emoji}{lbl}
))}
{/* Photo grid */}
{[ { bg: "bg-rose-200", emoji: "😊", caption: "First smile" }, { bg: "bg-amber-200", emoji: "🛁", caption: "Bath time" }, { bg: "bg-violet-200", emoji: "🏆", caption: "4 months!" }, { bg: "bg-green-200", emoji: "👨‍👩‍👧", caption: "With Nani" }, ].map(photo => (
{photo.emoji} {photo.caption}
))}
{/* Upload row */}
📷 Add memory
{/* Bottom tab strip */}
{[["🏡","Home"],["📋","Activity"],["✨","AI"],["☰","Menu"]].map(([icon, lbl]) => (
{icon} {lbl}
))}
); } // ── Main component ────────────────────────────────────────────── export function PhoneMockup() { const [active, setActive] = useState(0); const intervalRef = useRef | null>(null); const start = useCallback(() => { if (intervalRef.current) clearInterval(intervalRef.current); intervalRef.current = setInterval(() => { setActive(prev => (prev + 1) % SCREENS.length); }, 2500); }, []); const stop = useCallback(() => { if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } }, []); useEffect(() => { start(); return stop; }, [start, stop]); const screenComponents = [, , ]; return (
{/* Phone */}
{/* Device shell */}
{/* Screen */}
{screenComponents.map((screen, i) => (
{screen}
))} {/* Dot indicators */}
{SCREENS.map((_, i) => (
{/* Notch */}
); }