const { useState, useEffect, useMemo, useRef } = React; // ───────────────────────────────────────────────────────────────── // Round economics — single source of truth (edit here) // ───────────────────────────────────────────────────────────────── const ROUND = { totalSeats: 30, // fryers in this founding batch (1 seat = 1 fryer) ticket: 4500, // € per fryer — full preorder, paid in full upfront maxSeatsPerInvestor: 4, batchUnits: 30, // 1 fryer per seat — one batch from Japan exWorksPerUnit: 1167, // € factory cost per unit deployedValuePerUnit: 4200, listPrice: 5900, // € list price per unit, after the founder programme founderPrice: 4500, // € Founding Partner price per unit rentMonthly: 199, // € / month rental — cash positive from month one closeDate: '31 AUG 2026', }; const POOL_TOTAL = ROUND.totalSeats * ROUND.ticket; // €120,000 const eur = (n) => 'TBA'; // ───────────────────────────────────────────────────────────────── // Shared bits // ───────────────────────────────────────────────────────────────── function Diamond({ size = 9, color = 'var(--amber)' }) { return ( ); } function Eyebrow({ children, light }) { return (
{children}
); } function Logo({ light }) { return ( Dr. Fry FOUNDING BATCH ); } // ───────────────────────────────────────────────────────────────── // Nav // ───────────────────────────────────────────────────────────────── function Nav() { return ( ); } // ───────────────────────────────────────────────────────────────── // Hero // ───────────────────────────────────────────────────────────────── function Hero({ committedSeats }) { const remaining = ROUND.totalSeats - committedSeats; return (
{/* faint dot field */} {Array.from({length: 9}).map((_, r) => { const radius = (r+1) * 26; const count = Math.max(8, (r+1)*7); return Array.from({length: count}).map((_, i) => { const a = (i/count)*Math.PI*2; return ; }); })}
Founding batch · One order · {ROUND.totalSeats} fryers

Thirty founding kitchens.
One batch from Japan.

We are opening a single founding batch of {ROUND.totalSeats} fryers at {eur(ROUND.ticket)} each — a one-time preorder, paid in full upfront. When the batch fills, the pooled preorders secure one production run of {ROUND.batchUnits} ProWave™ units with the manufacturer in Japan, built and installed into your kitchen. Founding customers benefit from reduced oil costs, with savings proportional to their oil usage.

PREORDER A FRYER → How it works {remaining} OF {ROUND.totalSeats} FRYERS REMAINING
); } // ───────────────────────────────────────────────────────────────── // Seats progress bar // ───────────────────────────────────────────────────────────────── function SeatsBar({ committedSeats }) { const pct = Math.min(100, (committedSeats / ROUND.totalSeats) * 100); const remaining = ROUND.totalSeats - committedSeats; return (
BATCH PREORDERS · LIVE
{committedSeats} / {ROUND.totalSeats} fryers preordered
OF {eur(POOL_TOTAL)} TARGET
{eur(committedSeats * ROUND.ticket)}
{/* tick marks every 10% */} {Array.from({length: 9}).map((_, i) => (
))}
{remaining} FRYERS REMAINING BATCH CLOSES {ROUND.closeDate} · OR WHEN FULL
); } // ───────────────────────────────────────────────────────────────── // How the pool works — 4 steps // ───────────────────────────────────────────────────────────────── function HowItWorks() { const steps = [ { n:'01', t:'Preorder your fryer', d:`Preorder 1–${ROUND.maxSeatsPerInvestor} fryers at ${eur(ROUND.ticket)} each, paid in full upfront to secure your place in the batch.` }, { n:'02', t:`The batch closes at ${ROUND.totalSeats}`, d:`Once all ${ROUND.totalSeats} fryers are spoken for (or on ${ROUND.closeDate}), the batch locks and the production run is scheduled with the manufacturer.` }, { n:'03', t:'One batch, built in Japan', d:`The pooled preorders secure a single production run of ${ROUND.batchUnits} ProWave™ units with the manufacturer in Japan.` }, { n:'04', t:'Built, shipped & installed', d:`Each fryer is built, shipped from Japan, and installed in your kitchen — and the oil it saves covers its cost from month one.` }, ]; return (
How the batch works

A preorder, a batch, a fryer.

The structure is deliberately simple. No subscriptions, no hidden fees — {eur(ROUND.ticket)} per fryer, paid in full when you preorder.

{steps.map((s, i) => (
{s.n}
{s.t}

{s.d}

))}
); } // ───────────────────────────────────────────────────────────────── // Allocation economics // ───────────────────────────────────────────────────────────────── function Allocation() { const allocation = [ { label:`Batch — ${ROUND.batchUnits} units ex-works (Japan)`, value: ROUND.batchUnits * ROUND.exWorksPerUnit, accent:true }, { label:'Freight, duties & EU certification', value: 18000 }, { label:'Installation & field deployment', value: 27000 }, { label:'Working capital & reserve', value: POOL_TOTAL - (ROUND.batchUnits * ROUND.exWorksPerUnit) - 18000 - 27000 }, ]; return (
Where preorders go

Where the {eur(POOL_TOTAL)} goes.

{/* allocation table */}
ALLOCATIONEUR
{allocation.map((a, i) => { const pct = (a.value / POOL_TOTAL) * 100; return (
{a.label} {eur(a.value)}
); })}
TOTAL POOL {eur(POOL_TOTAL)}
{/* key figures */}
PER FOUNDER · PER FRYER
{[ { k: eur(ROUND.ticket), l: 'Price per fryer' }, { k: 'In full', l: 'Paid upfront on preorder' }, { k: eur(ROUND.listPrice), l: 'List price after programme' }, { k: '1 / ' + ROUND.totalSeats, l: 'Share of the founding batch' }, ].map((f, i) => (
{f.k}
{f.l}
))}

INDICATIVE · Figures illustrate the founding-batch structure and pricing. Final pricing is confirmed on your order form.

); } // ───────────────────────────────────────────────────────────────── // Commitment + contact form // ───────────────────────────────────────────────────────────────── const STORE_KEY = 'drfry_round_commitments_v1'; function readCommittedSeats() { try { const raw = JSON.parse(localStorage.getItem(STORE_KEY) || '[]'); return raw.reduce((sum, c) => sum + (c.seats || 0), 0); } catch { return 0; } } function CommitForm({ onCommit, committedSeats }) { const [seats, setSeats] = useState(1); const [form, setForm] = useState({ name:'', email:'', org:'', role:'Restaurant / QSR', phone:'', message:'' }); const [errors, setErrors] = useState({}); const [done, setDone] = useState(false); const remaining = ROUND.totalSeats - committedSeats; const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); function validate() { const e = {}; if (!form.name.trim()) e.name = 1; if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 1; if (seats < 1 || seats > ROUND.maxSeatsPerInvestor) e.seats = 1; setErrors(e); return Object.keys(e).length === 0; } function submit(ev) { ev.preventDefault(); if (!validate()) return; // Every lead from this page is a preorder — that's the pipeline type shown // in the dashboard. The chosen customer segment (restaurant, hotel, …) is // preserved in the note so it isn't lost. const segment = form.role; const note = segment ? `Customer type: ${segment}${form.message ? ' · ' + form.message : ''}` : form.message; const commitment = { ...form, role: 'Preorder', segment, seats, ticket: ROUND.ticket, amount: seats*ROUND.ticket, ts: Date.now() }; try { const raw = JSON.parse(localStorage.getItem(STORE_KEY) || '[]'); raw.push(commitment); localStorage.setItem(STORE_KEY, JSON.stringify(raw)); } catch {} // Also push the lead to the sequencing backend — fire-and-forget, the // local record above already succeeded. Relative /api works on the // deployed site (vercel.json proxy); otherwise fall back to the live // backend directly (its CORS is open). try { const payload = JSON.stringify({ email: form.email, name: form.name, org: form.org, role: 'Preorder', phone: form.phone, note, source: 'preorder-form', }); const opts = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload }; fetch('/api/capture-lead', opts) .then((r) => { if (!r.ok || !(r.headers.get('content-type') || '').includes('json')) throw new Error('proxy miss'); }) .catch(() => fetch('https://dr-fry-sequencerr.vercel.app/api/capture-lead', opts).catch(() => {})); } catch {} onCommit(); setDone(true); } if (done) { return (

Fryer preordered.

We've recorded your preorder for {seats} fryer{seats>1?'s':''} ({eur(seats*ROUND.ticket)} total). Our team will email {form.email} with your order confirmation and payment details within two business days.

{eur(ROUND.ticket)} PER FRYER · PAID IN FULL ON PREORDER

); } return (
{Array.from({length: ROUND.maxSeatsPerInvestor}).map((_, i) => { const n = i+1; return ( ); })}
{remaining} fryers remaining
DUE NOW · IN FULL {eur(seats*ROUND.ticket)}
{(errors.name || errors.email) && (
◆ PLEASE ENTER A VALID NAME AND EMAIL TO PREORDER YOUR FRYER.
)}

Preordering secures your fryer in the batch. {eur(ROUND.ticket)} per fryer is paid in full upfront to confirm your place.

); } function SeatMap({ committedSeats }) { const total = ROUND.totalSeats; const open = total - committedSeats; const cells = Array.from({ length: total }); return (
Batch map · {total} fryers {committedSeats} preordered · {open} open
{cells.map((_, i) => { const taken = i < committedSeats; return (
); })}
PREORDERED OPEN
); } function CommitSection({ committedSeats, onCommit }) { return (
{window.JapanStrip && }
Preorder & contact

Take one of the {ROUND.totalSeats} seats.

Preorder below and we'll send your order confirmation and payment details. Prefer to talk first? Reach the founding team directly.

{[ { l:'Email', v:'jesse@drfry.nl', href:'mailto:jesse@drfry.nl' }, { l:'Direct', v:'+31 6 17020696', href:'tel:+31617020696' }, { l:'Office', v:'Monster, Netherlands', href:null }, ].map((c, i) => (
{c.l}
{c.href ? {c.v} : {c.v}}
))}
); } // ───────────────────────────────────────────────────────────────── // Certifications strip — regional approvals, under the contact form // ───────────────────────────────────────────────────────────────── function CertMark({ kind }) { const common = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.6 }; if (kind === 'UL') { return ( ); } if (kind === 'RCM') { return ( ); } return ( ); } function CertStrip() { const certs = [ { mark:'UL', region:'United States', std:'UL Listed', spec:'120 V / 60 Hz' }, { mark:'RCM', region:'Australia & NZ', std:'RCM / SAA certified', spec:'230 V / 50 Hz' }, { mark:'PSE', region:'Japan', std:'PSE approved', spec:'100 V / 50–60 Hz' }, ]; return (
Certified hardware
{certs.map((c, i) => (
{c.region}
{c.std}
{c.spec}
))}
CE in progress Building on existing 230 V / 50 Hz (RCM/SAA) approval · part of what this batch funds · EU pilots run as founding-customer trials until the mark issues
); } // ───────────────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────────────── function Footer() { return ( ); } // ───────────────────────────────────────────────────────────────── // Pool Journey — scroll-driven, left→right cinematic explainer of the // subscription counter and where the pooled money goes. // ───────────────────────────────────────────────────────────────── function smooth(t){ return t * t * (3 - 2 * t); } // easeInOutCubic — steeper mid-slope than smoothstep, so the camera visibly // ramps up in speed through the middle of each pan instead of gliding linearly. function ramp(t){ return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2; } function jclamp(v, a, b){ return Math.max(a, Math.min(b, v)); } function jlerp(a, b, t){ return a + (b - a) * t; } function PoolJourney({ committedSeats }) { const sectionRef = useRef(null); const trackRef = useRef(null); const sceneRefs = useRef([]); const railRef = useRef(null); const pctRef = useRef(null); const prevCamRef = useRef(0); const reduceRef = useRef(false); const committedCapital = committedSeats * ROUND.ticket; const seatPct = Math.min(100, (committedSeats / ROUND.totalSeats) * 100); const use = [ { tag:'01', big: eur(ROUND.ticket), label:'Your preorder, held in full', place:'Secured against your fryer', body:`Your preorder reserves one of the ${ROUND.totalSeats} fryers in the founding batch — ${eur(ROUND.ticket)}, paid in full, holds your unit and your place in the run.` }, { tag:'02', big: `${ROUND.totalSeats} / ${ROUND.totalSeats}`, label:'The batch closes', place:'Order locks', body:`Once all ${ROUND.totalSeats} fryers are spoken for — or on ${ROUND.closeDate} — the founding batch closes and the production order locks.` }, { tag:'03', big: '1 batch', label:'Built in Japan', place:'Manufacturer · Japan', body:`A single production run of ${ROUND.batchUnits} ProWave™ units is placed with the manufacturer in Japan and built for the founding kitchens.` }, { tag:'04', big: '< 2h', label:'Installed & running', place:'Your kitchen', body:'Each fryer is mounted inline on your oil feed, calibrated, and brought live — cash positive from the very first month.' }, ]; const scenes = [{ kind:'pool' }, { kind:'anchor' }, ...use.map(u => ({ kind:'use', ...u })), { kind:'return' }]; const N = scenes.length; useEffect(() => { reduceRef.current = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches); let raf = 0; let settle = 0; let forceCrisp = false; const update = () => { raf = 0; const sec = sectionRef.current; if (!sec) return; const rect = sec.getBoundingClientRect(); const total = Math.max(1, sec.offsetHeight - window.innerHeight); const p = jclamp((-rect.top) / total, 0, 1); const camRaw = p * (N - 1); // Dwell mapping: hold each scene centered for the first ~22% of its // segment, then whip to the next with an accelerating (easeInOutCubic) pan. const idx = Math.min(N - 2, Math.floor(camRaw)); const frac = jclamp(camRaw - idx, 0, 1); const move = frac < 0.22 ? 0 : ramp((frac - 0.22) / 0.78); const cam = (camRaw >= N - 1) ? (N - 1) : (idx + move); const w = window.innerWidth; // Camera velocity (scene-units / frame) drives a motion blur that peaks // during the fast part of each pan and resolves to crisp at every rest point. const vel = forceCrisp ? 0 : Math.abs(cam - prevCamRef.current); prevCamRef.current = cam; const blurPx = reduceRef.current ? 0 : Math.min(9, vel * 130); const stretch = reduceRef.current ? 0 : Math.min(0.05, vel * 0.9); if (trackRef.current) { trackRef.current.style.transform = `translate3d(${(-cam * w).toFixed(1)}px,0,0)`; trackRef.current.style.filter = blurPx > 0.2 ? `blur(${blurPx.toFixed(2)}px)` : 'none'; } sceneRefs.current.forEach((el, i) => { if (!el) return; const f = smooth(jclamp(1 - Math.abs(cam - i), 0, 1)); el.style.opacity = f.toFixed(3); const sc = jlerp(0.6, 1, f); // horizontal stretch during motion reinforces the sense of speed el.style.transform = `translateY(${jlerp(34, 0, f).toFixed(1)}px) scale(${(sc*(1+stretch)).toFixed(4)}, ${sc.toFixed(4)})`; el.style.pointerEvents = f > 0.6 ? 'auto' : 'none'; }); if (railRef.current) railRef.current.style.width = (p * 100).toFixed(2) + '%'; if (pctRef.current) pctRef.current.textContent = String(Math.round(p * 100)).padStart(3, '0'); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); // Once scrolling stops, re-render one crisp frame (vel forced to 0) so no // residual blur / stretch lingers at the rest point. clearTimeout(settle); settle = setTimeout(() => { forceCrisp = true; update(); forceCrisp = false; }, 90); }; update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); const t = setTimeout(update, 200); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); clearTimeout(t); clearTimeout(settle); if (raf) cancelAnimationFrame(raf); }; }, [N]); const renderScene = (s) => { if (s.kind === 'pool') { return (
Batch preorders · Live
{ROUND.totalSeats}fryers

One founding batch — {ROUND.totalSeats} fryers at {eur(ROUND.ticket)} each, paid in full on preorder. Reserve yours before the batch closes.

{Array.from({ length:9 }).map((_, k) => (
))}
{committedSeats} / {ROUND.totalSeats} FRYERS PREORDERED CLOSES {ROUND.closeDate}
); } if (s.kind === 'anchor') { return (
What the hardware is worth
{eur(ROUND.listPrice)} LIST · AFTER FOUNDER PROGRAMME
{eur(ROUND.founderPrice)} FOUNDING CUSTOMER / FRYER

One seat is one fryer. Founding customers take it at {eur(ROUND.founderPrice)} — below the {eur(ROUND.listPrice)} list it returns to once the programme closes — paid in full at {eur(ROUND.ticket)} upfront.

ANCHOR · {eur(ROUND.listPrice)} is the published list price. The founding programme holds it at {eur(ROUND.founderPrice)} — and the oil saved covers it from the first month.
); } if (s.kind === 'use') { const stepPct = Math.round(Number(s.tag) / use.length * 100); return (
YOUR PREORDER · STEP {s.tag} OF {String(use.length).padStart(2,'0')}
{s.big}
{s.label}
{s.place.toUpperCase()}

{s.body}

JOURNEYSTEP {s.tag} / {String(use.length).padStart(2,'0')}
); } // return return (
The economics on site
Month 1
CASH POSITIVE · EVERY SITE

A fryer costs a kitchen {eur(ROUND.founderPrice)} to own — paid in full upfront — and the oil it saves is worth more than that from the very first month. Every deployment runs cash positive from month one. Founding customers benefit from reduced oil costs, with savings proportional to their oil usage.

HOW · ProWave arrests oil oxidation at the source. Kitchens buy less oil and bin less waste — and that recurring saving is what keeps every site cash positive.
PREORDER A FRYER →
INDICATIVE · Figures illustrate the founding-batch structure and pricing. Final pricing is confirmed on your order form.
); }; return (
{/* persistent header */}
THE FOUNDING BATCH
SCROLL · 000%
{/* horizontal track of scenes */}
{scenes.map((s, i) => (
sceneRefs.current[i] = el} style={{ width:'100%', maxWidth:1040, willChange:'transform, opacity' }}> {renderScene(s)}
))}
{/* bottom progress rail */}
{scenes.map((_, i) => (
))}
); } // ───────────────────────────────────────────────────────────────── // App // ───────────────────────────────────────────────────────────────── function App() { const [userSeats, setUserSeats] = useState(() => readCommittedSeats()); const committedSeats = Math.min(ROUND.totalSeats, userSeats); const refresh = () => setUserSeats(readCommittedSeats()); return ( <>