// The Fone Shop — Camera Quote (Pillar 1 — the moat)
// Full-viewport sheet on mobile, centered card on desktop. One flow, four states.
const { useState, useEffect, useRef } = React;
const Eyebrow = ({ children, style }) => (
{children}
);
// ------ photo slot (faux damaged-phone illustration) ------
const PhotoSlot = ({ filled, onClick, idx, tone = 'front' }) => {
const crack = {
front: ,
back: ,
close: ,
}[tone];
return (
);
};
// ------ intro / capture ------
const Intro = ({ onStart }) => {
const [photos, setPhotos] = useState([]); // ['front','back','close']
const slots = ['front','back','close'];
const add = (i) => setPhotos(p => p.includes(slots[i]) ? p : [...p, slots[i]]);
return (
<>
SNAP A QUOTE
Show us what
we're dealing with.
Snap or upload a photo — front, back, or the damage close-up. Three is best, one is fine.
{[0,1,2].map(i => (
add(i)} />
))}
Final price confirmed after a free in-store diagnostic.
);
};
// ------ processing — cinematic scan animation ------
const Processing = ({ onDone }) => {
const [phase, setPhase] = useState(0);
// 0: scanning, 1: classifying, 2: fetching price — ~1.8s total
useEffect(() => {
const t1 = setTimeout(() => setPhase(1), 650);
const t2 = setTimeout(() => setPhase(2), 1300);
const t3 = setTimeout(() => onDone(), 1900);
return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
}, []);
const LABELS = ['Scanning photos…', 'Identifying device…', 'Fetching starting price…'];
return (
Taking a look…
{LABELS.map((l, i) => (
{l}
))}
);
};
// ------ result — morph-in device name ------
const Result = ({ onBook, onBack }) => {
const target = 'iPhone 13';
const [device, setDevice] = useState('');
useEffect(() => {
let i = 0;
const id = setInterval(() => {
i++;
setDevice(target.slice(0, i));
if (i >= target.length) clearInterval(id);
}, 55);
return () => clearInterval(id);
}, []);
return (
<>
CONFIDENCE 94%
IDENTIFIED
Looks like an
{device}▌
with a cracked screen.
TURNAROUND
Same day
Usually under an hour
{['Genuine-quality OLED replacement', 'True Tone calibrated', '12-month warranty on parts & labour'].map(x => (
-
{x}
))}
Final price confirmed after a free in-store diagnostic.
);
};
// ------ confirm ------
const Confirm = ({ onReset }) => (
Got it.
We'll be in touch within the hour during shop hours. Your reference:
FS-20260419-R7M4
);
// ------ sheet wrapper ------
const CameraQuote = () => {
const [step, setStep] = useState('intro'); // intro | processing | result | confirm
const reset = () => setStep('intro');
const closeOrBack = () => {
// If we're mid-flow, reset to intro. If we're on intro already, navigate
// back to the marketing site — that's what "close" means in standalone mode.
if (step === 'intro') { window.location.href = '../marketing/'; }
else { reset(); }
};
return (
{/* handle */}
{/* header bar */}
The Fone Shop
{['intro','processing','result','confirm'].map(s => (
= ['intro','processing','result','confirm'].indexOf(s) ? '#FF6B1A' : '#2c2c2e',
transition: 'all 400ms cubic-bezier(0.25,0.1,0.25,1)',
}}/>
))}
{/* body */}
{step === 'intro' &&
setStep('processing')} />}
{step === 'processing' && setStep('result')} />}
{step === 'result' && setStep('confirm')} onBack={reset} />}
{step === 'confirm' && }
Camera Quote · live demo
);
Object.assign(window, { CameraQuote, DemoBar });