/* FindMyFrag — Home. Wine-Searcher structural model: the search bar IS the product. The home page is a tool, not a magazine cover. One input, dead center, with live autocomplete and a ranked results list that matches the logic of the detail page (landed price, signal, delta). No onboarding copy — the input's presence is the instruction. Everything below the fold is secondary: today's biggest price drops (the one editorial gesture that's operational, not decorative) and the three entry points into the reference graph (family · note · perfumer). */ /* global React, FMF, DataStat, Bottle */ const { useMemo: useMemoH, useState: useStateH, useRef: useRefH, useEffect: useEffectH } = React; function Home() { const watch = useMemoH(() => FMF.WATCHLIST.map(FMF.enrichWatch), []); const [q, setQ] = useStateH(""); const [active, setActive] = useStateH(0); const inputRef = useRefH(null); // Autofocus the search on mount — the page exists to be searched. useEffectH(() => { inputRef.current?.focus(); }, []); const all = window.FMF?.CATALOG || []; const results = useMemoH(() => { const needle = q.trim().toLowerCase(); if (!needle) return []; return all .map(f => ({ f, score: scoreMatch(f, needle) })) .filter(x => x.score > 0) .sort((a, b) => b.score - a.score) .slice(0, 8) .map(x => x.f); }, [q, all]); function onKey(e) { // Command bar takes precedence when input is a known command. if (e.key === "Enter") { const cmd = FMF.parseCommand?.(q); if (cmd) { e.preventDefault(); location.hash = cmd.route.startsWith("#") ? cmd.route.slice(1) : cmd.route; setQ(""); return; } } if (results.length === 0) return; if (e.key === "ArrowDown") { e.preventDefault(); setActive((active + 1) % results.length); } else if (e.key === "ArrowUp") { e.preventDefault(); setActive((active - 1 + results.length) % results.length); } else if (e.key === "Enter") { e.preventDefault(); const pick = results[active]; if (pick) location.hash = `#/fragrance/${pick.slug}`; } } // Live command hint — renders when user has typed something we recognize. const cmdHint = useMemoH(() => (q.trim() ? FMF.parseCommand?.(q) : null), [q]); // Top price drops — sorted by most-negative delta7 const topDrops = useMemoH(() => [...watch].sort((a, b) => a.delta7 - b.delta7).slice(0, 5), [watch]); return (
{/* ────── Hero — fills the fold, layered ambient background ────── */}
{/* Ambient layers: warm gradient wash + typographic watermark + bottle constellation. All §11-compliant: hand-authored SVG + CSS gradients, no AI or stock imagery. Kept behind `aria-hidden` so assistive tech doesn't narrate decoration. */}
{!q && } {!q && } {!q && } {!q && } {!q && topDrops.length > 0 && } {!q && } {!q && }
); } /* ══════════════════════════════════════════════════════════════════════ ABOUT STRIP — "what is this site?" Three-column explainer + headline. Editorial-magazine feel, typographic imagery only (no stock photos, §11). ══════════════════════════════════════════════════════════════════════ */ function AboutStrip() { const cols = [ { num: "01", k: "Ledger", h: "Landed, not sticker.", body: "For every fragrance we track, every retailer, every day: sticker − coupon + shipping + tax. The one number your card actually gets charged. Timestamped, computed, auditable.", }, { num: "02", k: "Method", h: "The formula is public.", body: "No black-box \"deal score\" we can quietly tune. Buy / Hold / Wait is deterministic — discount depth, retailer trust, stock health — and every detail page shows the math on the row it's scoring.", }, { num: "03", k: "Refusals", h: "Twelve things we won't do.", body: "No affiliate ranking. No simulated community. No inflated MSRPs. No AI imagery. The list is signed, dated, version-controlled — and it's why this site exists instead of another review aggregator.", }, ]; return (
A fragrance reference with honest prices

We compute what you'll actually pay.

FindMyFrag is a reference site for people who are tired of fragrance retail. The MSRPs are inflated. The "deals" aren't deals. The reviews are written by affiliates. We publish the one number that matters — the landed price — and the twelve things we refuse to do to your attention.

{cols.map(c => (
{c.num}
{c.k}

{c.h}

{c.body}

))}
); } /* ══════════════════════════════════════════════════════════════════════ SAVINGS LEDGER — live chart showing $ below MSRP across the tracked catalog. Gives the reader a concrete, at-a-glance answer to "is this site actually saving people money?" using real numbers, not marketing. Data is computed from the CATALOG at render time; no static claims. ══════════════════════════════════════════════════════════════════════ */ function SavingsLedger() { const cat = (FMF.CATALOG || []).filter(f => f.landed && f.msrp && f.msrp > f.landed); if (cat.length === 0) return null; const entries = cat .map(f => ({ ...f, savings: f.msrp - f.landed, pctOff: ((f.msrp - f.landed) / f.msrp) * 100, })) .sort((a, b) => b.savings - a.savings); const totalSavings = entries.reduce((s, e) => s + e.savings, 0); const avgPctOff = entries.reduce((s, e) => s + e.pctOff, 0) / entries.length; const medianPctOff = (() => { const sorted = [...entries].map(e => e.pctOff).sort((a, b) => a - b); const m = Math.floor(sorted.length / 2); return sorted.length % 2 ? sorted[m] : (sorted[m - 1] + sorted[m]) / 2; })(); const topSaver = entries[0]; const maxSavings = entries[0].savings; return (
Live savings ledger · computed now

The reader saves {FMF.fmtUsdNoCents(totalSavings)} across today's catalog.

Summed delta between MSRP and landed price for every tracked fragrance, across {FMF.RETAILERS?.length || 32} retailers, at this moment. No curation, no cherry-picked examples — just the computed total.

{/* Stat cards */}
{/* Horizontal bar chart */}
Fragrance · landed vs MSRP $ saved
{entries.slice(0, 8).map(e => { const pct = (e.savings / maxSavings) * 100; return (
{e.brand} {e.name}
msrp {FMF.fmtUsdNoCents(e.msrp)} landed {FMF.fmtUsdNoCents(e.landed)}
{FMF.fmtUsdNoCents(e.savings)} −{e.pctOff.toFixed(0)}%
); })}
MSRPs sourced from brand-direct retailers · landed prices recomputed every 4 hours · every number is timestamped on the detail page.
); } function StatCard({ k, v, sub, accent, href }) { const Tag = href ? "a" : "div"; return (
{k}
{v}
{sub}
 ); } /* Signal board — today's Buy / Hold / Wait picks across the watchlist. Gives the reader an at-a-glance "what's the action today" without needing to scroll through the full catalog. Each cell clicks into the detail page. */ function SignalBoard({ watch }) { if (!watch || watch.length === 0) return null; const buys = watch.filter(w => w.signal === "buy").slice(0, 2); const holds = watch.filter(w => w.signal === "hold").slice(0, 2); const waits = watch.filter(w => w.signal === "wait").slice(0, 2); const cols = [ { label: "Buy", blurb: "Below 90d median · trusted retailer", items: buys, klass: "signal-buy" }, { label: "Hold", blurb: "Near median · wait for a dip", items: holds, klass: "signal-hold" }, { label: "Wait", blurb: "Elevated vs 90d · room to drop", items: waits, klass: "signal-wait" }, ]; return (
Today's signal board
Poll interval 4h · deterministic scoring · method
{cols.map(c => (
{c.label} {c.blurb}
))}
); } /* Recommender CTA — bold editorial block pointing to the quiz. Addresses the "I don't know what I want" reader the search can't help. */ function RecommenderCTA() { return (
Recommender · 6 questions

Don't know what you want?

Answer six questions — occasion, season, how you want to be read, scent family, shelf, budget — and we'll rank the catalog against your answers. Scored fit. Honest reasoning. No paid placement.

Take the quiz
); } function TopDropsBlock({ topDrops }) { return ( <>
Today · ledger

One fragrance fell hardest this week.

Snapshot 09:14 ET · {FMF.RETAILERS.length} retailers polled · {FMF.CATALOG.length} fragrances tracked
{topDrops.length > 1 && (
{topDrops.length - 1} more drops · see the catalog →
)} ); } /* Refusals strip — all 12 numbered refusals in a dense editorial grid. The brand moat rendered as a billboard, not a footnote. */ function RefusalsStrip() { const refusals = (FMF.REFUSALS || []).slice(0, 12); return (
The list · signed

Twelve things we refuse to do.

Read the full refusals →
    {refusals.map((r, i) => (
  1. §{String(i + 1).padStart(2, "0")} {r.title} {r.oneLine && {r.oneLine}}
    2. ))}
); } function MethodStrip() { return ( <>
Method

Landed = sticker − coupons + shipping + tax. Computed per-retailer, timestamped, auditable. Signal is deterministic; the formula is public. We don't predict next week.

The {FMF.REFUSALS.length} things we refuse to do →
); } /* ────── Search scoring — startsWith > wordStart > contains ────── */ function scoreMatch(f, needle) { const hay = (f.brand + " " + f.name).toLowerCase(); if (hay === needle) return 100; if (hay.startsWith(needle)) return 80; // word start const words = hay.split(/\s+/); if (words.some(w => w.startsWith(needle))) return 60; if (hay.includes(needle)) return 40; return 0; } /* ────── A result row in the inline autocomplete — matches detail-page logic ────── */ function ResultRow({ f, active, onHover }) { // Only enriched watchlist items have priced data. For others, show a graceful // placeholder that still communicates "reference page exists." const watch = window.FMF?.WATCHLIST?.find(w => w.slug === f.slug); const enriched = watch ? FMF.enrichWatch(watch) : null; return (
{f.brand} · {f.name}
{f.year} · {f.family || "—"} {f.perfumer ? `· ${f.perfumer}` : ""}
{enriched ? ( <>
{FMF.fmtUsd(enriched.priced.total)}
landed · {enriched.retailerObj.name.toLowerCase()}
) : (
price pending
)}
{enriched ? (
0 ? "var(--oxblood-ink)" : "var(--ink-mute)" }}> {enriched.delta7 === 0 ? "—" : FMF.fmtUsd(enriched.delta7, { signed: true })}
) : "—"}
Δ 7d
{enriched ? ( {enriched.signal} ) : null}
); } /* ────── Biggest-drops row ────── */ function DropRow({ it, i }) { return (
0{i + 1}
{it.brand} · {it.name}
{it.size} · {it.year} · community
{FMF.fmtUsdNoCents(it.msrp)}
msrp
{FMF.fmtUsd(it.priced.total)}
landed · {it.retailerObj.name.toLowerCase()}
0 ? "var(--oxblood-ink)" : "var(--ink-mute)", fontSize: 15 }}> {it.delta7 === 0 ? "—" : FMF.fmtUsd(it.delta7, { signed: true })}
Δ 7d
{it.signal}
); } Object.assign(window, { Home });