// Apple devices animation — responsive, correct notch shapes
const { useState: useStateAD, useEffect: useEffectAD, useCallback: useCallbackAD, useRef: useRefAD } = React;
// Natural pixel width of the device row at scale=1 (iPhone + gaps + MacBook_base + gaps + iPad)
const AD_BASE_WIDTH = 680;
const PHASE = {
REQUIREMENTS: { label: 'Requirements', desc: 'Analyzing specifications…', step: 1 },
PLANNING: { label: 'Planning', desc: 'Defining test strategy…', step: 2 },
DEVELOPMENT: { label: 'Development', desc: 'Building test scripts…', step: 3 },
EXECUTION: { label: 'Execution', desc: 'Running automated suites…', step: 4 },
VERIFICATION: { label: 'Verification', desc: 'Validating fixes…', step: 5 },
CLOSURE: { label: 'Closure', desc: 'Quality gates passed.', step: 6 }
};
function BugIcon() {
return (
);
}
function CheckIcon() {
return (
);
}
function ScreenContent({ isFaulty, isVerified }) {
return (
{/* Header UI */}
{/* Hero Image Area */}
{isFaulty && }
{isVerified && }
{/* Text Lines */}
{/* Primary Button */}
{/* Outer Frame */}
{/* Inner Black Bezel */}
{/* Screen */}
{/* Dynamic Island — pill, not oval */}
{/* Aluminum Frame */}
{/* Inner Bezel */}
{/* Screen */}
{/* Camera */}
{/* Lid */}
{/* Aluminum Border */}
{/* Inner Bezel */}
{/* Screen */}
{/* Menu Bar */}
File Edit View
100% Fri 12:00
{/* MacBook notch — flat top, rounded bottom */}
{/* Base / keyboard deck — wider than the lid for realistic proportions */}
{/* Rubber Feet Shadow */}
{/* Wide ambient glow trailing behind the line */}
{/* Thin 1px line with gradient shadow */}
);
}
function AppleDevicesAnimation() {
const [phase, setPhase] = useStateAD('REQUIREMENTS');
const [fixes, setFixes] = useStateAD({ iphone: false, macbook: false, ipad: false });
const [scale, setScale] = useStateAD(1);
const timer = useRefAD([]);
const containerRef = useRefAD(null);
// Compute scale so the device row always fits the container width
useEffectAD(() => {
const el = containerRef.current;
if (!el) return;
const update = () => {
const s = Math.min(1, (el.offsetWidth * 0.94) / AD_BASE_WIDTH);
setScale(s);
};
update();
const ro = new ResizeObserver(update);
ro.observe(el);
return () => ro.disconnect();
}, []);
const runSimulation = useCallbackAD(() => {
timer.current.forEach(clearTimeout);
timer.current = [];
setFixes({ iphone: false, macbook: false, ipad: false });
const seq = [
{ t: 0, fn: () => setPhase('REQUIREMENTS') },
{ t: 500, fn: () => setPhase('PLANNING') },
{ t: 1000, fn: () => setPhase('DEVELOPMENT') },
{ t: 1800, fn: () => setPhase('EXECUTION') },
{ t: 4800, fn: () => setPhase('VERIFICATION') },
{ t: 5300, fn: () => setFixes((p) => ({ ...p, iphone: true })) },
{ t: 6100, fn: () => setFixes((p) => ({ ...p, macbook: true })) },
{ t: 6900, fn: () => setFixes((p) => ({ ...p, ipad: true })) },
{ t: 9500, fn: () => setPhase('CLOSURE') },
{ t: 12500, fn: runSimulation }];
seq.forEach(({ t, fn }) => timer.current.push(window.setTimeout(fn, t)));
}, []);
useEffectAD(() => {
runSimulation();
return () => timer.current.forEach(clearTimeout);
}, [runSimulation]);
const isExec = phase === 'EXECUTION';
const showDevices = phase !== 'REQUIREMENTS';
const info = PHASE[phase];
return (
{/* Stage: height matches the visual (scaled) height of the device row so the badge never overlaps */}
{/* Device row anchored to the bottom of the stage, scaled from that bottom edge */}
{/* iPhone */}
{/* MacBook */}
{/* iPad */}
{/* Phase Badge — always flows below the stage, never overlaps devices */}
Phase 0{info.step} / 06
{info.label}
{info.desc}