/* Ambassadors — /ambassadors, the record-shop referral programme waitlist. The pitch: The Lead-In tracks what a collection is WORTH, so it doesn't compete with a shop selling records — which makes it a rare partner a shop can point customers at without cannibalising its own sales. Shops drop QR codes in-store and flyers into vinyl bags; in return they earn a share of the subscription revenue from customers they refer. AUDIENCE NOTE: unlike every other page on this site, the reader here is a shop owner who has probably never heard of The Lead-In and is not a user of it. The page therefore explains the product BEFORE it pitches the deal — a "what is this?" section with a mockup of the app sits above the commercial argument, because "50/50 of what, exactly?" is unanswerable otherwise. The subscription tier is not live yet, so this is a WAITLIST, not an active payout programme — the copy is deliberately "founding partner", not "earn today". The 50/50 line is the hook; we do NOT commit to lifetime-vs-window in writing here (that term is still being decided). Writes each shop straight to the `ambassador_waitlist` Supabase table via the anon key (RLS = insert-only), same fire-and-forget posture as NewsletterSignup / FeedbackWidget. Duplicate email = "already on the list", not an error. Emits GA4 events ambassador_view / ambassador_submit. */ (function () { const { useState, useEffect, useRef } = React; const track = (name, params) => { try { if (window.gtag) window.gtag("event", name, params || {}); } catch (e) {} }; const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/; // Revenue model. The planned subscription is £4.99/month and the shop keeps a // 50/50 split, so each referred subscriber is worth £2.495/month to the shop. // The slider drives the DIRECT number — subscribers referred — deliberately: // we don't bury a made-up "X% of customers convert" rate in the maths, so the // figure can't quietly overpromise. The shop plugs in its own expectation. const SUB_PRICE = 4.99; const SHOP_SHARE = 0.5; const PER_SUB = SUB_PRICE * SHOP_SHARE; // 2.495 / month const gbp = (n, dp) => "£" + n.toLocaleString("en-GB", { minimumFractionDigits: dp, maximumFractionDigits: dp }); const VOLUME_BANDS = [ "Under 50 records a week", "50–200 a week", "200–500 a week", "500+ a week", ]; // Sample shelf for the app mockup. Real records with plausible values, so a // shop owner recognises the product at a glance. Deliberately static art — // it illustrates the app, it is not a live valuation. // Real covers from /covers/.jpg — the same artwork the product shows. // Flat colour swatches read as a placeholder; actual sleeves read as an app. const MOCK_SHELF = [ { t: "Rumours", a: "Fleetwood Mac", v: "£42", slug: "rumours" }, { t: "Kind of Blue", a: "Miles Davis", v: "£120", slug: "kind-of-blue" }, { t: "The Queen Is Dead", a: "The Smiths", v: "£38", slug: "the-queen-is-dead" }, { t: "Remain in Light", a: "Talking Heads", v: "£54", slug: "remain-in-light" }, { t: "Blue Lines", a: "Massive Attack", v: "£31", slug: "blue-lines" }, { t: "Unknown Pleasures", a: "Joy Division", v: "£68", slug: "unknown-pleasures" }, ]; // Bottom tab bar for the mockup — the app's real shape, and it stops the // screen bottom reading as empty dead space. const MOCK_TABS = [ { k: "Shelf", d: "M2 3h12v3.4H2zM2 8.3h12v3.4H2z" }, { k: "The 100", d: "M2 3.4h12v1.7H2zM2 7.2h12v1.7H2zM2 11h8v1.7H2z" }, { k: "Today", d: "M8 2a6 6 0 100 12A6 6 0 008 2zm0 4.6a1.4 1.4 0 110 2.8 1.4 1.4 0 010-2.8z" }, { k: "You", d: "M8 2.6a2.7 2.7 0 110 5.4 2.7 2.7 0 010-5.4zM2.8 13.4a5.2 5.2 0 0110.4 0z" }, ]; // Twelve months of shelf value for the phone's sparkline — rising, but with // the dips a real market has. Static art, like the rest of the mockup. const MOCK_TREND = [18, 26, 22, 34, 30, 44, 52, 47, 60, 71, 66, 82]; // Deterministic pseudo-QR module grid for the kit mockup. NOT a scannable // code — the printed kit carries each shop's real one. A fixed hash rather // than Math.random so every paint (and the prerendered shell) is identical. function qrModules(n) { const out = []; const finder = (x, y) => (x < 7 && y < 7) || (x >= n - 7 && y < 7) || (x < 7 && y >= n - 7); const hole = (x, y) => x > n / 2 - 4 && x < n / 2 + 3 && y > n / 2 - 4 && y < n / 2 + 3; for (let y = 0; y < n; y++) { for (let x = 0; x < n; x++) { if (finder(x, y) || hole(x, y)) continue; const h = (x * 73856093) ^ (y * 19349663) ^ ((x + y) * 83492791); if (((h >>> 3) & 7) < 3) out.push(x + "," + y); } } return out; } const QR_N = 25; const QR_CELLS = qrModules(QR_N); // Mock QR art. Three finder squares + the deterministic field + a centre punch // holding the mark, which is how the printed card will actually look. function QrArt() { const s = 100 / QR_N; const finderAt = (fx, fy) => ( ); return ( {QR_CELLS.map((c) => { const [x, y] = c.split(","); return ; })} {[finderAt(0, 0), finderAt(QR_N - 7, 0), finderAt(0, QR_N - 7)]} LI ); } // True once the element has been scrolled into view. Resolves to true // immediately where IntersectionObserver is missing, so anything gated on it // still renders rather than waiting forever. function useInView(ref, threshold) { const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current) return; if (!("IntersectionObserver" in window)) { setSeen(true); return; } const io = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { setSeen(true); io.disconnect(); } }); }, { threshold: threshold || 0.3 }); io.observe(ref.current); return () => io.disconnect(); }, [ref, threshold]); return seen; } // Ease a number up to its target once `active`. Jumps straight to the final // value under reduced motion — the figure is information, not decoration, so // it must never be left mid-count. function useCountUp(target, active, ms) { const [v, setV] = useState(0); useEffect(() => { if (!active) return; const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce) { setV(target); return; } let raf = 0, t0 = null; const dur = ms || 1150; const step = (t) => { if (t0 === null) t0 = t; const p = Math.min(1, (t - t0) / dur); setV(target * (1 - Math.pow(1 - p, 3))); // easeOutCubic if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [target, active, ms]); return v; } // Phone mockup. Deliberately device-accurate — bezel, island, status bar, // side buttons, home indicator — because a shop owner is being asked to point // customers at an app they have never seen, and a flat card doesn't read as // one. Comes alive on scroll: the shelf total counts up and the rows deal in. function PhoneMock() { const ref = useRef(null); const seen = useInView(ref, 0.28); const total = useCountUp(3418, seen, 1250); const spark = MOCK_TREND.map((n, i) => (i / (MOCK_TREND.length - 1) * 100).toFixed(1) + "," + (30 - n / 82 * 26).toFixed(1)).join(" "); return (