// Photo capture — 3 modern concepts. Same palette (teal accent, amber shutter,
// dark surfaces) as the shipping app; the chrome around the camera is what changes.
// Shared: fake camera feed, 393×852, dark.
function CameraFeed({ children, src }) {
if (src) {
return (
);
}
// ── Concept A · Glass HUD ────────────────────────────────────
// Floating glass chrome, teal viewfinder brackets, one-piece bottom bar.
function PhotoConceptA() {
return (
{/* Top glass row */}
Scan items
{/* scans pill with mini progress ring */}
0/2 free
{/* Viewfinder corner brackets */}
{[['top','left'],['top','right'],['bottom','left'],['bottom','right']].map(([v,h]) => (
))}
{/* AI hint chip */}
Point at your items — AI finds them
{/* Bottom one-piece glass bar */}
{/* Shutter: amber ring + core */}
);
}
// ── Concept B · Bottom dock ──────────────────────────────────
// Camera stays clean; all controls live in a dark rounded dock that reads
// like a sheet — grabber, copy, scan-quota progress, big shutter.
function PhotoConceptB() {
return (
{/* Top minimal: back + scans dots */}
Free scans
{/* Bottom dock */}
Take a photo of your items
AI detects each item automatically
);
}
// ── Concept C · Minimal pro ──────────────────────────────────
// Pro-camera feel: dashed detection frame, zoom chips, slim quota bar,
// offset gallery thumbnail. Least chrome, most camera.
function PhotoConceptC({ photoSrc, detections }) {
return (
{/* Top: AI Scan pill center, X right */}
AI Scan
{/* Dashed detection frame */}
{detections ? `${detections.length} ITEMS FOUND` : 'FIT ITEMS IN FRAME'}
{/* AI detection overlays — bounding boxes with labels (x/y/w/h in % of screen) */}
{detections && detections.map((d, i) => (
{d.label}
))}
{/* Zoom chips */}
{['0.5', '1×', '2'].map((z, i) => (
{z}
))}
{/* Slim quota bar */}
0 of 2 free scans
{/* Bottom controls: gear · shutter · gallery thumb */}
{/* shutter: ring + gap + core */}
{/* offset polaroid-ish gallery thumb */}
);
}
// ── Real app: PhotoCaptureSheet ──────────────────────────────
// Faithful to src/components/PhotoCaptureSheet.tsx: full-screen sheet on the
// app's white surface (NOT full-bleed camera chrome) — back chevron + scan
// counter header, black viewfinder in the middle, controls on white below
// ("Take a photo of your items", amber 64px shutter centered, 48px gallery
// button right with accentTint bg + accent border).
function PhotoCaptureRealScreen({ photoSrc, detections = [], processing = false }) {
const ACC = '#0D7377', ACC_TINT = 'rgba(13,115,119,0.10)', AMB = '#F5A623';
return (
{/* Header: back + ScanCounter */}
2 free scans left
{/* Viewfinder: black, photo contained, AI detection boxes */}