/* FindMyFrag — Fragrance detail. Inverted order: BUY ANSWER → RETAILER LEDGER → REFERENCE → HISTORY. Ledger has two modes via Tweaks: "hero" (hero + 2 runners-up + audit log) or "table" (dense fallback). */ /* global React, FMF, DataStat */ const { useState: useStateD, useEffect: useEffectD, useMemo: useMemoD } = React; function Detail({ slug, tweaks }) { // Per refusals §3 + §7: we do not render data we cannot verify as THIS fragrance. // Aventus is the fully-modeled v0.1 exemplar. Other catalog entries render a // signed stub; unknown slugs fall through to NoRecord. const aventusSlug = (FMF.AVENTUS && (FMF.AVENTUS.id || "creed-aventus-2010")); const isAventus = slug === aventusSlug; const catalogFrag = isAventus ? null : (FMF.CATALOG_ALL || FMF.CATALOG || []).find(f => f.slug === slug); if (!isAventus && !catalogFrag) return ; if (!isAventus) return ; const frag = FMF.AVENTUS; // Active section reflects the current hash anchor (e.g. #/fragrance/X#history). const [detailActive, setDetailActive] = useStateD(() => { const raw = (typeof location !== "undefined" ? location.hash : "") || ""; const [, anchor = ""] = raw.slice(1).split("#"); return anchor || "ledger"; }); useEffectD(() => { const onHash = () => { const raw = (location.hash || "").slice(1); const [, anchor = ""] = raw.split("#"); setDetailActive(anchor || "ledger"); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); // Enrich every retailer price with landed + delta-to-winner. // Partition: tier-decant is sampling economics (per-ml), NOT comparable to // full-bottle totals. They get their own section downstream. This keeps the // 337.08 invariant honest — the cheapest "bottle landed" wins, not the // cheapest dollar amount on the page. const priced = useMemoD(() => { const all = frag.prices.map(p => { const r = FMF.retailerById(p.retailer); const c = FMF.computeLanded({ landed: p.sticker, coupon: p.coupon, shippingUsd: r.shippingUsd, taxRatePct: r.taxRatePct, }); const offerType = p.offerType || (r.tier === "tier-decant" ? "decant" : "retail"); return { ...p, retailerObj: r, priced: c, inStock: r.stock === "in", offerType, isDecant: offerType === "decant", isRetailBottle: offerType === "retail" || offerType === "tester", }; }); // Shop-URL filter — a retailer without a verified pdpUrl is treated as // if they don't carry this fragrance, and drops out of every section. // No "Find at X" fallbacks, no "Not listed" chips — just absent. The // user decided (2026-04-21): show only what we can land directly on. const verified = all.filter(x => FMF.hasVerifiedShop(x.retailerObj, frag, x)); // Bottle ledger — retail + tester only. Gift-sets, decants, and vintage are // segregated per offer-type taxonomy; never mix categories in "cheapest // landed" — that would be a category error. const rows = verified.filter(x => x.isRetailBottle); rows.sort((a, b) => { if (a.inStock !== b.inStock) return a.inStock ? -1 : 1; return a.priced.total - b.priced.total; }); const winner = rows.find(r => r.inStock); const decants = verified.filter(x => x.isDecant).sort((a, b) => a.priced.total - b.priced.total); const giftsets = verified.filter(x => x.offerType === "giftset").sort((a, b) => a.priced.total - b.priced.total); // How many retailers were dropped — surfaced in the masthead so the // reader knows the ledger is curated to verified listings, not thin by mistake. const hiddenUnlisted = all.length - verified.length; return { rows, winner, decants, giftsets, hiddenUnlisted, verifiedCount: verified.length, totalCount: all.length }; }, [frag]); const winner = priced.winner; // Graceful fail-safe: if no retailer has a verified PDP for this // fragrance, we render a neutral "no verified listings yet" state // instead of crashing on winner.priced.total. This is the honest // rendering when the ledger filter removes every row. if (!winner) { return (
No verified listings

{frag.brand} {frag.name}

We don't have a verified retailer URL for this fragrance yet. The ledger only renders direct product links — when a retailer feed lands we'll populate it.

Back to Aventus {" · "} Refusals §2

); } const discountDepth = Math.min(100, Math.max(0, ((frag.msrp - winner.priced.total) / frag.msrp) * 100 * 2)); const dealScore = FMF.dealScore({ discountDepth, retailerTrust: winner.retailerObj.trust, stockHealth: 88 }); const signal = FMF.signal(dealScore); const signalTip = FMF.signalFormula({ discountDepth, retailerTrust: winner.retailerObj.trust, stockHealth: 88, dealScore }); const savings = FMF.savings(frag.msrp, winner.priced.total); // Historical context — pulled up from the heatmap to headline position. const histAll = frag.history || []; const histLow = histAll.length ? Math.min(...histAll) : winner.priced.total; const histHigh = histAll.length ? Math.max(...histAll) : winner.priced.total; const histLowIdx = histAll.indexOf(histLow); const daysAgoLow = histAll.length - 1 - histLowIdx; const histPct = histAll.length ? pctRank(histAll, winner.priced.total) : 50; // Decant math — bottle $/ml vs cheapest decant $/ml, and the premium paid // for sampling. Makes the sampling decision literal instead of hand-wavy. const sizeMl = mlFromLabel(frag.size, 100); const perMlBottle = winner.priced.total / sizeMl; const cheapestDecant = priced.decants[0]; const decantMl = cheapestDecant ? mlFromLabel(cheapestDecant.note, 5) : 5; const perMlDecant = cheapestDecant ? cheapestDecant.priced.total / decantMl : 0; const decantPremiumPct = perMlBottle > 0 && perMlDecant > 0 ? ((perMlDecant / perMlBottle) - 1) * 100 : 0; return (
{/* ────── ABOVE THE FOLD: bottle + name + landed answer + signal ────── */}
{/* Bottle hero — real photography, flush */}
{frag.brand}

{frag.name}

{frag.size} · released {frag.year}
{/* The buy answer, bold, in mono */}
{/* ────── CRITIC QUOTE — one signed editorial line. Quiet placement between the masthead aside and the section tabs. §7 firewall: this text is written without sight of any retailer's commission rate. */} {frag.editorial && (
"{frag.editorial.quote}"
— {frag.editorial.by}
{frag.editorial.date}
editorial firewall
)} {/* ────── SECTION TABS — sticky wayfinding. Each tab sets the hash to the corresponding section anchor; the global scroll effect handles the jump. Active state mirrors the current hash fragment. ────── */} {/* ────── PRICE HISTORY CONTEXT — today's price framed against 90d. Two cells only: today (+ percentile) and 90d low (+ days ago). Best-month-to-buy line below from editorial seasonality data. ────── */}
{FMF.fmtUsd(histLow)}} sub={`${daysAgoLow}d ago · not repeated`} />
{frag.seasonality && (
Best month to buy {frag.seasonality.bestWindow} · typically {frag.seasonality.typicalDip} · next: {frag.seasonality.secondBest}
)}
{/* ────── RETAILER LEDGER — the sharpest surface on the site ────── */}
{tweaks.ledger === "hero" ? ( ) : ( )} {/* Price history · 90 days — collapsed by default, nested under the ledger so the detail page doesn't require a scroll to reach profile. Anchor `history` is preserved so the section-tabs link still jumps here; the
element opens automatically when navigated to. */}
Price history · 90 days low {FMF.fmtUsd(histLow)} · today {FMF.fmtUsd(winner.priced.total)} · {histPct}th pctl
{/* ────── DECANTS — sampling economics, kept separate so per-ml prices can't short-circuit the bottle leaderboard. Headline decant-math line and the gift-sets strip were removed per editor request. ────── */} {priced.decants.length > 0 && ( <>
)}
{/* ────── PROFILE — scent story, notes pyramid, when-to-wear, wearer panel. Tight margins and minimal kickers per editorial restraint. ────── */}
{frag.scentStory && } {(() => { const catalogEntry = (FMF.CATALOG || []).find(f => f.slug === (frag.id || "creed-aventus-2010")); const tags = catalogEntry?.tags; return tags ? : null; })()} {frag.wearer && } {frag.flankers && frag.flankers.length > 1 && }
{/* ────── What people say ────── */} {frag.whatPeopleSay && }
{/* ────── Try these next — same family, excludes current ────── */} {/* ────── Reviews from around the web ────── */} {frag.reviews && frag.reviews.length > 0 && }
); } const linkStyle = { color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 3 }; function MethodRow({ k, v }) { return (
{k} {v}
); } /* ══════════════════════════════════════════════════════════════════════ SECTION TABS — sticky wayfinding for the long detail page. ══════════════════════════════════════════════════════════════════════ */ function SectionTabs({ active, frag }) { const tabs = [ { id: "ledger", label: "Ledger" }, { id: "profile", label: "Profile" }, { id: "history", label: "History" }, ]; const slug = frag.id || "creed-aventus-2010"; return ( ); } /* ══════════════════════════════════════════════════════════════════════ TRY THESE NEXT — reduce dead-ends at detail page ══════════════════════════════════════════════════════════════════════ */ function TryTheseNext({ currentSlug, family }) { const famSlug = FMF.slugify(family); const siblings = (FMF.byFamilySlug(famSlug) || []).filter(f => f.slug !== currentSlug); // Fallback: if too few siblings, pad with other catalog entries (skip current) const pool = siblings.length >= 3 ? siblings : [...siblings, ...(FMF.CATALOG_ALL || FMF.CATALOG).filter(f => f.slug !== currentSlug && !siblings.includes(f))]; const picks = pool.slice(0, 3); if (picks.length === 0) return null; return (

Try these next.

All in {family} →
{picks.map(f => ( e.currentTarget.style.background = "var(--paper-deep)"} onMouseLeave={e => e.currentTarget.style.background = "var(--paper)"}>
{f.brand}
{f.name}
{f.year} · {f.family}
{FMF.fmtUsd(f.landed)}
{f.signal}
))}
); } /* ══════════════════════════════════════════════════════════════════════ RETAILER LEDGER — Hero + 2 runners-up + audit log ══════════════════════════════════════════════════════════════════════ */ function LedgerHero({ rows, winner, frag }) { // Default-collapsed to keep the detail page scannable — the hero strip + // 2 runners-up already answer "where do I buy this?" The full audit roster // remains one click away (§3 visibility ethic met by the "Open audit log" // control, not by forcing every reader to scroll past 30 more rows). const [expanded, setExpanded] = useStateD(false); // Sort mode for the hero strip: cheapest (default) or fastest (by ETA). // Fastest is the mode people reach for when the event is Friday. const [mode, setMode] = useStateD("cheapest"); // Market-stats summary — cross-retailer distribution for this moment. // Helps the reader tell whether the winner is an outlier or the norm. const inStock = useMemoD(() => rows.filter(r => r.inStock), [rows]); const totals = inStock.map(r => r.priced.total); const stats = useMemoD(() => { if (totals.length === 0) return null; const sorted = [...totals].sort((a, b) => a - b); const avg = totals.reduce((a, b) => a + b, 0) / totals.length; const med = sorted.length % 2 ? sorted[Math.floor(sorted.length/2)] : (sorted[sorted.length/2 - 1] + sorted[sorted.length/2]) / 2; const variance = totals.reduce((s, v) => s + (v - avg) ** 2, 0) / totals.length; const sigma = Math.sqrt(variance); const lo = sorted[0]; const hi = sorted[sorted.length - 1]; return { avg, med, sigma, lo, hi, n: totals.length }; }, [totals]); const hero = useMemoD(() => { const inStock = rows.filter(r => r.inStock); if (mode === "fastest") { // Fastest: sort by ETA ascending, break ties on landed. return inStock.slice().sort((a, b) => { const d = a.retailerObj.etaDays - b.retailerObj.etaDays; return d !== 0 ? d : a.priced.total - b.priced.total; }); } // Default: already sorted by landed in the parent. return inStock; }, [rows, mode]); const top = hero[0] || winner; const runners = hero.slice(1, 3); const heroSlugs = new Set(hero.slice(0, 3).map(r => r.retailer)); const audit = rows.filter(r => !heroSlugs.has(r.retailer)); // Collapsed preview line stats const prices = audit.map(r => r.priced.total); const outCount = audit.filter(r => !r.inStock).length; const minAudit = prices.length ? Math.min(...prices) : 0; const maxAudit = prices.length ? Math.max(...prices) : 0; // Fastest ETA in the whole in-stock set — used as the label on the toggle. const fastestEta = rows.filter(r => r.inStock).reduce((m, r) => Math.min(m, r.retailerObj.etaDays), 99); return (
{/* Market-stats summary — "is the winner an outlier or the norm?" */} {stats && (
Across {stats.n} in-stock retailers · avg {FMF.fmtUsd(stats.avg)} · median {FMF.fmtUsd(stats.med)} · σ {FMF.fmtUsd(stats.sigma)} · range {FMF.fmtUsd(stats.lo)}–{FMF.fmtUsd(stats.hi)} · winner is {FMF.fmtUsd(stats.avg - stats.lo, { signed: true })} below avg
)}

Retailer ledger · {rows.length} polled

Priority
{/* Hero strip: top pick + 2 runners */}
{runners.map((r, i) => ( ))}
{/* Audit log header (collapsed preview) */} {expanded && (
)}
); } function HeroCell({ row, frag, mode }) { const { retailerObj: r, priced: c, sticker, coupon, note } = row; const isFast = mode === "fastest"; return (
{isFast ? "Fastest in-stock" : "Lowest landed"} Rank 01
{r.name}
{FMF.retailerTierChip(r).label}
{/* Paired stat: price + ETA */}
{FMF.fmtUsd(c.total)}
landed · all-in · ${(c.total / mlFromLabel(frag.size, 100)).toFixed(2)}/ml
{r.etaDays}d
to your door
{/* Breakdown */}
{coupon > 0 && } shipping} v={r.shippingUsd === 0 ? "free" : FMF.fmtUsd(r.shippingUsd)} />
trust {r.trust} · {FMF.tierLabel(r)} · ships in {r.etaDays} days
{note}
{/* Spacer pushes the CTA to bottom edge so all three cells align */}
{(() => { const s = FMF.shopUrl(r, frag, row); return ( {s.label} ); })()}
); } function RunnerCell({ row, winner, idx, frag, mode }) { const { retailerObj: r, priced: c, sticker, coupon, note, inStock } = row; const isFast = mode === "fastest"; const delta = c.total - winner.priced.total; const etaDelta = r.etaDays - winner.retailerObj.etaDays; return (
Rank 0{idx}
{r.name}
{FMF.retailerTierChip(r).label}
{FMF.fmtUsd(c.total)}
0 ? "var(--oxblood-ink)" : "var(--ink-mute)", marginTop: 6 }}> {delta === 0 ? "—" : `${FMF.fmtUsd(delta, { signed: true })}`}
{r.etaDays}d
0 ? "var(--oxblood-ink)" : "var(--ink-mute)", marginTop: 6 }}> {etaDelta === 0 ? "—" : `${etaDelta > 0 ? "+" : ""}${etaDelta}d`}
{/* Breakdown mini-table — same rows as hero so column heights align */}
{coupon > 0 && } shipping} v={r.shippingUsd === 0 ? "free" : FMF.fmtUsd(r.shippingUsd)} />
trust {r.trust} · {FMF.tierLabel(r)} · {inStock ? `ships in ${r.etaDays} days` : "out of stock"}
{/* Spacer — aligns the shop button to the bottom across all 3 cells */}
{inStock ? (() => { const s = FMF.shopUrl(r, frag, row); return ( {s.label} ); })() : (
Out of stock
)}
); } function BreakdownRow({ k, v, accent, bold, strike }) { return (
{k} {v}
); } function AuditTable({ rows, frag }) { // Default sort: cheapest landed ascending (same as the hero row's selection). // Click any header to resort; click again to reverse. Keyboard-accessible via // tabIndex + Enter/Space on each . const [sortKey, setSortKey] = useStateD("total"); const [sortDir, setSortDir] = useStateD("asc"); const onSort = (key) => { if (sortKey === key) setSortDir(sortDir === "asc" ? "desc" : "asc"); else { setSortKey(key); setSortDir(key === "retailer" ? "asc" : (["sticker", "ship", "tax", "total", "eta"].includes(key) ? "asc" : "desc")); } }; const sorted = useMemoD(() => { const copy = rows.slice(); const dir = sortDir === "asc" ? 1 : -1; const get = (row) => { const r = row.retailerObj; switch (sortKey) { case "retailer": return r.name.toLowerCase(); case "trust": return r.trust; case "sticker": return row.sticker; case "coupon": return row.coupon || 0; case "ship": return r.shippingUsd; case "tax": return r.taxRatePct; case "total": return row.priced.total; case "eta": return r.etaDays; case "stock": return row.inStock ? 0 : 1; default: return 0; } }; copy.sort((a, b) => { // Out-of-stock always sinks to the bottom regardless of sort direction. // §8 staleness treatment — excluded offers shouldn't float up into sight. if (a.inStock !== b.inStock) return a.inStock ? -1 : 1; const va = get(a), vb = get(b); if (typeof va === "string") return va.localeCompare(vb) * dir; return (va - vb) * dir; }); return copy; }, [rows, sortKey, sortDir]); const SortableTh = ({ k, children, right }) => { const active = sortKey === k; return ( onSort(k)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSort(k); } }} > {right && active && {sortDir === "asc" ? "↑" : "↓"}} {children} {!right && active && {sortDir === "asc" ? "↑" : "↓"}} ); }; return ( RetailerStickerCouponShipTaxTotalETA {sorted.map((row, i) => { const r = row.retailerObj; return ( ); })}
Shop
{r.name} {FMF.fmtUsd(row.sticker)} {row.coupon ? `− ${FMF.fmtUsd(row.coupon)}` : "—"} {r.shippingUsd === 0 ? "free" : FMF.fmtUsd(r.shippingUsd)} {r.taxRatePct.toFixed(1)}% {FMF.fmtUsd(row.priced.total)} {row.inStock ? `${r.etaDays}d` : "—"} {(() => { const s = FMF.shopUrl(r, frag, row); const label = row.inStock ? (s.tier === "pdp" ? "Shop" : "Find") : "Out of stock"; return ( {label} ); })()}
); } const cell = { padding: "14px 12px", verticalAlign: "middle", lineHeight: 1.3 }; const cellH = { padding: "14px 12px", textAlign: "left", fontWeight: 400, borderBottom: "1px solid var(--rule)", verticalAlign: "middle" }; /* Dense-table fallback (Tweak) */ function LedgerTable({ rows, winner, frag }) { return (
Retailer ledger · {rows.length} polled · dense fallback
retailer name is the link · we do not sell
); } /* ══════════════════════════════════════════════════════════════════════ NOTES — prose first, pyramid as a toggle ══════════════════════════════════════════════════════════════════════ */ /* Scent story — 5-sentence editorial paragraph. Signed. §7 firewall. Placed above the notes pyramid so readers frame the composition with the wearer-experience BEFORE the ingredient list. */ function ScentStory({ story }) { // Prefer the single `text` string; fall back to legacy `sentences` array. const text = story.text || (story.sentences ? story.sentences.join(" ") : ""); return (
Scent story

{text}

Signed {story.by} · {story.date} · editorial firewall
); } function Notes({ notes, persona }) { // Two-column layout: persona archetype (silhouette + title + description) // on the left, notes pyramid on the right. When no persona is defined, // collapse to a single-column notes pyramid so other fragrances aren't // forced to carry the editorial claim "this person wears it" without a // signed write-up. if (!persona) return ; return (
); } /* Persona archetype panel — silhouette illustration + role title + scene-fragment. §11-compliant: silhouette is a hand-authored SVG, not AI-generated. Not a claim about who buys this scent — a claim about the silhouette it projects when worn well. Signed via §7 firewall (inherits the scent-story signature). */ function PersonaPanel({ persona }) { return (
Wears like
“{persona.title}”
{persona.tagline && (
{persona.tagline}
)}

{persona.body}

); } /* Silhouette — minimalist bust, inked strokes only. Authored by hand per §11. */ function SilhouetteMan() { return ( {/* Head */} {/* Collar + jacket V */} {/* Tie (subtle) */} {/* Lapels */} {/* Hairline suggestion */} ); } /* ══════════════════════════════════════════════════════════════════════ NOTES · ILLUSTRATED §11-compliant: typographic note cards by default, swaps to a real commissioned/public-domain photo (with credit line) when an entry exists in FMF.NOTE_IMAGES. Never AI-generated. See refusal §11. ══════════════════════════════════════════════════════════════════════ */ function NotesIllustrated({ notes, compact }) { const tiers = [ { key: "top", label: "Top notes" }, { key: "heart", label: "Middle notes" }, { key: "base", label: "Base notes" }, ]; return (
{tiers.map(tier => (
{tier.label}
{notes[tier.key].map(n => )}
))}
); } function NoteChip({ label }) { const emoji = FMF.noteEmoji && FMF.noteEmoji(label); return ( {label} ); } function Pyramid({ notes }) { const tiers = [ { key: "top", label: "Top", width: 100, items: notes.top }, { key: "heart", label: "Heart", width: 78, items: notes.heart }, { key: "base", label: "Base", width: 58, items: notes.base }, ]; return (
{tiers.map((t) => (
{t.label} {t.items.join(" · ").toLowerCase()}
))}
); } function Accords({ items }) { return (
{items.map((a) => (
{a.name}
{(a.weight * 100).toFixed(0)}
))}
); } /* Perfect for — occasion + season recommendations pulled from catalog tags. Concrete "this is the fragrance for THIS moment" line, no hedging. */ function PerfectFor({ tags }) { const axes = [ { id: "occasion", values: tags.occasion, label: "Perfect for" }, { id: "season", values: tags.season, label: "Best in" }, { id: "vibe", values: tags.vibe, label: "Reads as" }, ].filter(a => a.values && a.values.length); if (axes.length === 0) return null; const labelFor = (axisId, slug) => { const axis = (FMF.BROWSE_AXES || []).find(a => a.id === axisId); return axis?.tags.find(t => t.slug === slug)?.label || slug; }; return (
{axes.map((a, i) => ( {i > 0 && } {a.label} {a.values.map((slug, j) => ( {j > 0 && , } {labelFor(a.id, slug)} ))} ))}
); } /* ═════════════════════════════════════════════════════════════════ WEARER PANEL — pros/cons, "smells like", performance distributions. Editorial, §7 firewall. Data lives on frag.wearer. ═════════════════════════════════════════════════════════════════ */ function WearerPanel({ wearer }) { return (
{/* Pros + Cons */} {(wearer.pros?.length > 0 || wearer.cons?.length > 0) && (
{wearer.pros?.length > 0 && (
Pros
    {wearer.pros.map((p, i) => (
  • {p}
    • ))}
)} {wearer.cons?.length > 0 && (
Cons
    {wearer.cons.map((c, i) => (
  • {c}
    • ))}
)}
)} {/* Performance distributions */} {wearer.performance && (
Performance
{["longevity", "sillage", "value"].map(k => wearer.performance[k] && ( ))}
)} {/* Community signals — the 5 Issue 001.5 metrics: blind-buy safety, arc (opening vs dry-down), compliment rate, skin variance, and reformulation-era flag. Compact editorial strip, one row on desktop. */} {wearer.signals && } {/* Smells like */} {wearer.smellsLike?.length > 0 && ( )}
); } /* FlankerStrip — sibling releases from the same brand line. Helps a reader navigating the Aventus family (Cologne / Absolu / Les Royales) choose the concentration/character they want. Current variant is marked. */ function FlankerStrip({ flankers }) { return ( ); } /* SignalsStrip — four community-sourced signals in a single compact row. Each cell is self-contained with a plain-English caption. Skin variance was removed (too tribal to quantify cleanly); compliment rate is now a qualitative label (low / moderate / high / very high). */ function SignalsStrip({ signals }) { if (!signals) return null; const s = signals; return (
Community signals · Issue 001.5 · seed editorial
{s.blindBuy && } {s.compliments && } {s.arc && } {s.reformulation && }
); } /* Each cell is a self-contained block with consistent tight padding. */ function SignalCell({ children, title }) { return (
{children}
); } function CellHead({ k, sub }) { return ( <>
{k}
{sub &&
{sub}
} ); } /* Cell — Blind-buy safety score. Big number + caption + progress rail. */ function BlindBuyCell({ blindBuy: b }) { const tone = b.label === "safe" ? "var(--sig-buy)" : b.label === "risky" ? "var(--oxblood)" : "var(--sig-hold)"; const pct = Math.max(0, Math.min(100, (b.score / 10) * 100)); const caption = b.label === "safe" ? "Low-risk to buy unsampled." : b.label === "careful" ? "Sample before committing." : "High variance — sample first."; return (
{b.score.toFixed(1)} / 10
); } /* Cell — Compliment rate. Qualitative label (harder to quantify precisely than the raw %, which felt over-confident). The underlying rate still drives the tone + caption; just not shown as a number. */ function ComplimentCell({ c }) { const level = complimentLevel(c.rate); return (
{level.label}
community · n={FMF.fmtInt(c.n)}
); } /* Rate → qualitative bucket. Tuned to fragrance norms — 50%+ is genuinely a lot of compliments per wear, since most fragrances get near-zero. */ function complimentLevel(rate) { if (rate >= 0.70) return { label: "Very high", tone: "var(--sig-buy)", caption: "Very frequently draws unsolicited compliments." }; if (rate >= 0.40) return { label: "High", tone: "var(--sig-buy)", caption: "Often draws unsolicited compliments." }; if (rate >= 0.20) return { label: "Moderate", tone: "var(--sig-hold)", caption: "Occasionally draws compliments." }; return { label: "Low", tone: "var(--ink-mute)", caption: "Rarely draws unsolicited compliments." }; } /* Cell — Arc: opening score vs dry-down score. Twin labelled bars make the concept obvious: "phase A scored X/10, phase B scored Y/10." Plain-English verdict below. */ function ArcCell({ arc }) { const verdict = arc.delta >= 2 ? "Opening polarizes — dry-down earns the praise." : arc.delta >= 1 ? "Small shift from opening to dry-down." : "Smooth arc — opening and dry-down agree."; return (
scored / 10 · n={FMF.fmtInt(arc.n)}
); } function ArcBar({ label, value }) { const pct = Math.max(0, Math.min(100, (value / 10) * 100)); return (
{label} {value.toFixed(1)}/10
); } /* Cell — Skin variance. 10-dot pictogram showing the fraction of wearers whose skin "eats" the fragrance. Plain-English verdict + chemistry skew. */ function SkinCell({ skin: s }) { const eatsN = Math.max(0, Math.min(10, Math.round(s.eatsPct * 10))); const normalN = 10 - eatsN; const skewTxt = s.skew === "turns-sweeter" ? "When it shifts, it tends to read sweeter than intended." : s.skew === "turns-sharper" ? "When it shifts, it tends to read sharper / more aggressive." : s.skew === "soapy" ? "Some skin pushes it toward a clean, soapy quality." : "When it shifts, the character mostly stays true to the accord."; const riskTone = s.riskLabel === "high" ? "var(--oxblood)" : s.riskLabel === "moderate" ? "var(--sig-hold)" : "var(--sig-buy)"; const eatsPct = Math.round(s.eatsPct * 100); return ( {/* 10-dot pictogram: filled = normal performance, outline = "eats". */}
{Array.from({ length: 10 }).map((_, i) => { const isEats = i >= normalN; return ( ); })}
Variance risk {s.riskLabel}
{skewTxt}
); } /* Cell — Formula era. Horizontal timeline of documented reformulations. Each event is a dot on a line, labelled with year. Major events are filled; minor events are open circles. The rightmost event (current era) carries an oxblood halo so the reader knows which version they're about to buy. */ function ReformulationCell({ r }) { const events = Array.isArray(r.events) && r.events.length > 0 ? r.events : [{ year: r.lastMajor, label: "Last documented change", major: true, current: true }]; const years = events.map(e => Number(e.year)); const minY = Math.min(...years); const maxY = Math.max(...years); const span = Math.max(1, maxY - minY); return ( {/* Kicker only — no caption. The timeline + labelled events speak for themselves and we need the vertical space for all 4 events, not just the major/current ones. */}
Formula timeline
{/* Thin horizontal rail with one dot per event. */}
{events.map((e, i) => { const pct = ((Number(e.year) - minY) / span) * 100; const isMajor = !!e.major; const isCurrent = !!e.current; return ( ); })}
{/* Every event listed — user called out that hiding 2017 + 2020 minor events was misleading. Full timeline or none. */}
    {events.map((e, i) => (
  1. {e.year} {e.label} {e.current && · today}
    2. ))}
); } /* ════════════════════════════════════════════════════════════════════ WhatPeopleSay — community-voted pros + cons with vote counts. Editorial discipline: the editor who writes wearer.pros never sees these counts (§7 firewall); community data never influences ranking. Shown below the editorial wearer panel as the "what the crowd says" counterpart to "what the editor says". ════════════════════════════════════════════════════════════════════ */ function WhatPeopleSay({ data }) { if (!data || (!data.pros?.length && !data.cons?.length)) return null; return (
What people say.
{data.seedEditorial && ( seed · editor synthesis )}
Themes seen across n≈{FMF.fmtInt(data.n)} community reviews
{data.source}
Fetched {data.fetchedAt}
); } function WpsColumn({ label, tone, items }) { const total = items.reduce((s, i) => s + i.up + i.down, 0); return (
{label} {FMF.fmtInt(total)} votes
    {items.map((it, i) => (
  • {FMF.fmtInt(it.up)} {FMF.fmtInt(it.down)} {it.text}
    • ))}
); } function ThumbUp() { return ( ); } function ThumbDown() { return ( ); } /* ════════════════════════════════════════════════════════════════════ ReviewsSection — reviews aggregated from external communities. Attribution-first: each card carries source, username, excerpt, and a link to the original. FindMyFrag does not own or host these reviews. On takedown request, an entry is removed. Profile images are typographic initial-avatars (§11: no AI-generated imagery). ════════════════════════════════════════════════════════════════════ */ function ReviewsSection({ reviews }) { if (!reviews || reviews.length === 0) return null; return (
Around the web · editor-compiled · awaiting live feed

What real users are saying.

Voices from Fragrantica, r/fragrance, YouTube, TikTok, Basenotes, Parfumo. Each quote links to the original.
YouTube + TikTok avatars resolve to the creator's live platform PFP via unavatar.io; anonymous Reddit / Fragrantica / Basenotes / Parfumo handles use the platform mark.
{reviews.map((r, i) => )}
); } /* Source palette — subtle, one brand hue per platform. We use color-mix to keep the site's warm paper surface dominant; platform tones are accents only, not dominant colors. */ const SOURCE_META = { fragrantica: { label: "Fragrantica", hue: "oklch(0.55 0.15 25)" }, reddit: { label: "Reddit", hue: "oklch(0.60 0.18 45)" }, youtube: { label: "YouTube", hue: "oklch(0.54 0.22 30)" }, tiktok: { label: "TikTok", hue: "oklch(0.30 0.03 230)" }, basenotes: { label: "Basenotes", hue: "oklch(0.40 0.04 60)" }, parfumo: { label: "Parfumo", hue: "oklch(0.50 0.08 180)" }, }; function ReviewCard({ review }) { const meta = SOURCE_META[review.source] || { label: review.sourceLabel || "Web", hue: "var(--ink-soft)" }; const secondary = review.rating !== undefined ? `${review.rating}/10` : review.upvotes !== undefined ? `${FMF.fmtInt(review.upvotes)} upvotes` : review.views !== undefined ? `${review.views} views` : review.likes !== undefined ? `${review.likes} likes` : null; const date = review.date ? new Date(review.date).toLocaleDateString("en-US", { month: "short", year: "numeric" }) : ""; return ( { e.currentTarget.style.borderColor = "var(--ink)"; e.currentTarget.style.background = "var(--paper-deep)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--rule)"; e.currentTarget.style.background = "var(--paper)"; }}>
{review.user}
{meta.label} {secondary && <>·{secondary}} {date && <>·{date}}
“{review.excerpt}”
); } /* Platform-native avatar — each source (Reddit / YouTube / TikTok / etc.) renders in its platform's visual language rather than a fabricated face. Honest: no specific real person is misrepresented, and the reader can tell at a glance whether a review came from Reddit vs YouTube vs TikTok. Resolution order: 1. `avatarUrl` in the review data → real hotlinked platform avatar (used when a real feed replaces a seed review; e.g. a real YouTube thumbnail URL). 2. Platform-native SVG icon rendered inline (current default for all seed reviews). Deterministic hue variation per username so the row doesn't look monotonous. 3. Typographic initial fallback if image load fails. Never uses stock photos or face generators — those imply personhood this data doesn't actually have. */ function Avatar({ user, hue, avatarUrl, source }) { const clean = (user || "").replace(/^[u@\/]+/g, "").trim() || "user"; const initial = clean.charAt(0).toUpperCase(); const [brokenUrl, setBrokenUrl] = React.useState(false); const ringSize = 38; const ringStyle = { width: ringSize, height: ringSize, borderRadius: "50%", flexShrink: 0, display: "block", objectFit: "cover", }; // Tier 1: real provided avatar URL (for when a feed hydrates a real reviewer). if (avatarUrl && !brokenUrl) { return ( {user setBrokenUrl(true)} style={{ ...ringStyle, border: `1px solid color-mix(in oklab, ${hue} 35%, var(--rule))` }} /> ); } // Tier 2: platform-native SVG. Rendered inline (no network). return ; } /* PlatformAvatar — renders each platform's visual signature: reddit → Snoo-style antenna silhouette on orange youtube → red play-button tile tiktok → black tile with gradient "note" fragrantica→ red tile with "F" basenotes → warm grey tile with "BN" parfumo → teal tile with "P" All inline SVG (no external fetches, no broken images, works offline). Seed-tinted background variation so consecutive Reddit users don't look identical at a glance. */ function PlatformAvatar({ source, initial, seed }) { const hash = FMF.seed(seed); const varHue = Math.floor(hash() * 40) - 20; // ±20° hue wobble const svgSize = 38; const common = { width: svgSize, height: svgSize, style: { borderRadius: "50%", display: "block", flexShrink: 0 }, "aria-hidden": "true", }; if (source === "reddit") { // Snoo-lite: orange circle + antenna. Not Reddit's trademarked snoo — // a clean editorial nod to the platform's visual language. return ( ); } if (source === "youtube") { return ( ); } if (source === "tiktok") { return ( {/* Musical note silhouette in teal/pink accent */} ); } if (source === "fragrantica") { return ( F ); } if (source === "basenotes") { return ( BN ); } if (source === "parfumo") { return ( P ); } // Unknown source → typographic initial with ink border. return ( {initial} ); } function PerformanceBars({ label, data }) { const labels = ["weak", "low", "mod", "strong", "beast"]; const max = Math.max(...data.buckets); return (
{label} · n={FMF.fmtInt(data.n)}
{data.buckets.map((v, i) => (
{labels[i]}
{v}%
))}
); } function StatRow({ label, v, max, n, sigma }) { return (
{label}
); } /* ══════════════════════════════════════════════════════════════════════ PRICE HISTORY — 90-day calendar heatmap, cheapest day in gold+oxblood ══════════════════════════════════════════════════════════════════════ */ function HistoryHeatmap({ history, todayTotal, slug, frag }) { const min = Math.min(...history); const max = Math.max(...history); const minIdx = history.findIndex(v => v === min); const daysAgoMin = history.length - 1 - minIdx; // Layout: 90 cells in a ~15-wide grid (6 rows x 15 cols) const cols = 15; const rows = Math.ceil(history.length / cols); return (
{history.map((v, i) => { const t = (v - min) / (max - min || 1); // 0 = cheapest, 1 = priciest const isMin = i === minIdx; const isToday = i === history.length - 1; // Fill darkness inversely proportional to t (cheaper = more saturated ink) const bg = isMin ? "var(--oxblood)" : `oklch(${(0.96 - 0.14 * (1 - t)).toFixed(3)} 0.008 60)`; return (
); })}
{/* Price alert — slot below the heatmap, uses the empty visual space. Auto-fills contact from the profile record so returning readers don't re-enter every time. §6: localStorage only in v0.1. */} {slug && }

Cheapest day in the last 90: {FMF.fmtUsd(min)}, {daysAgoMin} days ago. You're {FMF.fmtUsd(todayTotal - min)} above that today.

Regret meter
Had you bought on the cheapest day, you'd be{" "} {FMF.fmtUsd(todayTotal - min)} richer.{" "} The formula is public. We do not predict next week.
); } function Row({ k, v }) { return (
{k}{v}
); } /* ══════════════════════════════════════════════════════════════════════ PRICE ALERT — "notify me when landed ≤ target". Auto-fills email/phone from FMF.profile so returning readers never re-enter. §6-compliant: contact string stays in localStorage until the backend launches; at that point we surface the pending-sync state rather than silently flushing it behind the reader's back. ══════════════════════════════════════════════════════════════════════ */ function PriceAlert({ slug, frag, todayTotal, histLow }) { const [profile, setProfile] = useStateD(() => FMF.profile?.get?.() || { contact: "", kind: "email" }); const [alerts, setAlerts] = useStateD(() => FMF.alerts?.forSlug?.(slug) || []); const [contact, setContact] = useStateD(profile.contact || ""); const [target, setTarget] = useStateD(() => { // Default target = the 90d low (the clearly-achievable recent price). // If the reader has already set alerts for this slug, show the most aggressive. const existing = FMF.alerts?.forSlug?.(slug) || []; if (existing.length > 0) return Math.min(...existing.map(a => a.target)).toFixed(0); return Math.round(histLow).toString(); }); const [err, setErr] = useStateD(""); const [ok, setOk] = useStateD(false); // Keep the contact field in sync if profile changes elsewhere (another tab, // another detail page). Never overwrite an in-progress edit, though. useEffectD(() => { function onProfile() { const p = FMF.profile.get(); setProfile(p); if (!contact) setContact(p.contact || ""); } function onAlerts() { setAlerts(FMF.alerts.forSlug(slug)); } window.addEventListener("fmf:profile-changed", onProfile); window.addEventListener("fmf:alerts-changed", onAlerts); return () => { window.removeEventListener("fmf:profile-changed", onProfile); window.removeEventListener("fmf:alerts-changed", onAlerts); }; }, [slug, contact]); const hasProfile = (profile.contact || "").length > 0; function submit(e) { e.preventDefault(); setErr(""); setOk(false); const trimmed = contact.trim(); const num = parseFloat(target); if (!trimmed) { setErr("Enter email or phone to get notified."); return; } const kind = FMF.profile.detectKind(trimmed); if (kind === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) { setErr("That doesn't look like a valid email."); return; } if (kind === "phone" && trimmed.replace(/\D/g, "").length < 7) { setErr("That phone number looks too short."); return; } if (isNaN(num) || num <= 0) { setErr("Enter a target price above zero."); return; } if (num >= todayTotal) { setErr(`Target ${FMF.fmtUsd(num)} is already at or above today's ${FMF.fmtUsd(todayTotal)}.`); return; } FMF.profile.set({ contact: trimmed, kind }); FMF.alerts.add({ slug, target: num, contact: trimmed, kind }); setOk(true); setTimeout(() => setOk(false), 3600); } function removeAlert(t) { FMF.alerts.remove(slug, t); } const savings = todayTotal - parseFloat(target || "0"); const savingsValid = !isNaN(savings) && savings > 0; return (
Notify me when price drops
Catch the next dip.
{hasProfile && (
using saved {profile.kind} ·
)}
{err && {err}} {!err && savingsValid && ( That's {FMF.fmtUsd(savings)} below today.{" "} Cheapest day in 90: {FMF.fmtUsd(histLow)}. )} {!err && !savingsValid && ( We'll ping you once — then the alert clears. )}
{alerts.length > 0 && (
Active alerts on this fragrance
    {alerts.map(a => (
  • ≤ {FMF.fmtUsd(a.target)} to {a.contact}
    • ))}
)}
); } /* ═════════════════════════════════════════════════════════════════ DECANTS — sampling economics. Per-ml pricing, never ranked against bottles. Shown as a compact strip after the bottle ledger. ═════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════ GIFT SETS — bundled offers kept separate so the ledger's bottle leaderboard isn't polluted by packaging arithmetic. ═════════════════════════════════════════════════════════════════ */ function GiftSetsStrip({ rows, sizeMl }) { if (!rows || rows.length === 0) return null; return (
Also available as gift sets · bundled
not ranked against bottles · per-ml math surfaced
Gift sets pair the bottle with travel sprays or body spray — a lower sticker can hide a higher effective price per ml. We compute both.
{rows.map(row => (
{row.retailerObj.name}
{FMF.offerMeta("giftset").label}
{FMF.fmtUsd(row.priced.total)}
≈ ${(row.priced.total / sizeMl).toFixed(2)}/ml on the headline bottle
{row.note}
))}
); } function DecantsStrip({ rows }) { const frag = window.FMF?.AVENTUS; // No verified decant URLs → don't render the strip. A header over an // empty grid looks like a bug; a silent skip is honest ("we'll surface // decants when we have direct links"). if (!rows || rows.length === 0) return null; return (
Also available as decants · sampling
per-ml pricing · not ranked against bottles
); } function avg(xs) { return xs.reduce((a,b)=>a+b,0) / xs.length; } function median(xs) { const s = [...xs].sort((a,b)=>a-b); const m = Math.floor(s.length/2); return s.length % 2 ? s[m] : (s[m-1]+s[m])/2; } function stdev(xs) { const m = avg(xs); return Math.sqrt(avg(xs.map(x => (x-m)**2))); } function pctRank(xs, x) { const below = xs.filter(v => v < x).length; return Math.round((below / xs.length) * 100); } // Parse a millilitre quantity from a label like "100ml EDP" or "5ml decant (≈$7.60/ml)" function mlFromLabel(label, fallback) { const m = /(\d+(?:\.\d+)?)\s*ml/i.exec(String(label || "")); return m ? parseFloat(m[1]) : fallback; } /* ══════════════════════════════════════════════════════════════════════ CATALOG STUB — for catalog entries that exist but aren't fully modeled. We do not fake data. We do not render Aventus's ledger under another fragrance's name. We publish what's verified and acknowledge what isn't. ══════════════════════════════════════════════════════════════════════ */ function CatalogStub({ frag }) { // Subscribe to both metadata AND offer cache. Previously only metadata // was subscribed — the offer bundle (prices, aggregateRating) was // fetched but never displayed, leaving pages feeling unfinished. const [meta, setMeta] = useStateD(() => window.FMF?.METADATA_CACHE?.[frag.slug] || null); const [offers, setOffers] = useStateD(() => window.FMF?.OFFER_CACHE?.[frag.slug] || null); useEffectD(() => { let cancelled = false; const applyMeta = (b) => { if (!cancelled && b) setMeta(b); }; const applyOffers = (b) => { if (!cancelled && b) setOffers(b); }; const onMeta = (e) => { if (e.detail?.slug === frag.slug) applyMeta(e.detail.bundle); }; const onOffers = (e) => { if (e.detail?.slug === frag.slug) applyOffers(e.detail.bundle); }; window.addEventListener("fmf:metadataLoaded", onMeta); window.addEventListener("fmf:offersLoaded", onOffers); // Re-check cache + kick loaders (idempotent). applyMeta(window.FMF?.METADATA_CACHE?.[frag.slug]); applyOffers(window.FMF?.OFFER_CACHE?.[frag.slug]); window.FMF?.loadMetadata?.(frag.slug)?.then(applyMeta); window.FMF?.loadOffers?.(frag.slug)?.then(applyOffers); return () => { cancelled = true; window.removeEventListener("fmf:metadataLoaded", onMeta); window.removeEventListener("fmf:offersLoaded", onOffers); }; }, [frag.slug]); const m = meta?.metadata || {}; const hasLiveMeta = !!(m.notes || m.accords || m.perfumer || m.description); const offerRows = Array.isArray(offers?.offers) ? offers.offers : []; const inStockOffers = offerRows.filter((o) => o.price != null); const winner = inStockOffers.slice().sort((a, b) => (a.price ?? 9e9) - (b.price ?? 9e9))[0] || null; const agg = offers?.aggregateRating; const perfumerDisplay = m.perfumer?.value ? (Array.isArray(m.perfumer.value) ? m.perfumer.value.join(" & ") : m.perfumer.value) : (frag.perfumer || frag.perfumers?.join(" & ") || null); // First offer that carries a bottle image → hero photo. Retailers reliably // emit Product.image in JSON-LD so this fills automatically for any page. const bottleImage = offerRows.find((o) => o.image)?.image || null; return (
{/* Breadcrumb */}
FindMyFrag / Catalog / {frag.brand} · {frag.name}
{frag.family || "Reference"}{m.concentration?.value ? ` · ${m.concentration.value}` : ""}
{offers ? `${inStockOffers.length} live offer${inStockOffers.length === 1 ? "" : "s"} · ${offerRows.length} retailer${offerRows.length === 1 ? "" : "s"} checked` : "Loading live prices…"}
{/* Masthead — brand, name, year/family/perfumer */}
{frag.brand}

{frag.name}

{frag.year || "—"} {frag.family ? ` · ${frag.family}` : ""} {perfumerDisplay ? ` · ${perfumerDisplay}` : ""}
{/* Aggregate rating (when retailers emit it) */} {agg && (
{agg.score.toFixed(1)}/5 {" · "}{FMF.fmtInt ? FMF.fmtInt(agg.count) : agg.count} community reviews across {agg.perRetailer} retailer{agg.perRetailer === 1 ? "" : "s"}
)}
{/* HERO — bottle image extracted from retailer JSON-LD, when any */} {bottleImage && } {/* BUY ANSWER — cheapest live offer */} {/* PRICE HISTORY — sparkline from KV-accumulated daily snapshots */} {/* RETAILER LEDGER — every live offer, sorted cheapest */} {offerRows.length > 0 && } {/* SCENT STORY — narrative paragraph (LLM or editor seeded) */} {m.scentStory?.value && } {/* Live metadata section — notes, accords, perfumer with provenance */} {hasLiveMeta && } {/* WEARER + SEASONALITY + PROJECTION + LONGEVITY — 4-quadrant grid */} {(m.wearer?.value || m.seasonality?.value || m.projection?.value || m.longevity?.value) && ( )} {/* Smells similar — cosine-similarity recommendations */} {/* Also in catalog — same family, if any */} {/* Refusal footer — honest citation of method */}
Method

Prices above are live-pulled from each retailer's schema.org/Product markup and cached at the edge for four hours. Fragrance metadata (notes, accords, perfumer) is provenance-tagged per field: editor-verified when seeded, consensus when multiple sources agree, AI-enriched otherwise. Every field carries a badge so you can audit the source. {" "}Read the refusals →

); } /* Hero bottle photo — pulled live from retailer schema.org/Product.image. */ function FragranceHero({ imageUrl, alt }) { const [failed, setFailed] = useStateD(false); if (failed) return null; return (
{alt} setFailed(true)} loading="eager" width={220} height={220} style={{ display: "block", maxWidth: 220, maxHeight: 220, width: "100%", height: "auto", objectFit: "contain", background: "var(--paper-deep)", padding: 16, border: "1px solid var(--rule)" }} />
Bottle via retailer schema · live-fetched
); } /* Price history — 90-day sparkline of cheapest-landed-daily. Starts empty, fills in one point per day as /offers runs for this fragrance. Data source of truth: KV `history::` keys, accumulated over 180d. */ function PriceHistorySection({ slug }) { const [history, setHistory] = useStateD(null); useEffectD(() => { let cancelled = false; fetch(`${FMF.WORKER_URL}/history?frag=${encodeURIComponent(slug)}&days=90`) .then((r) => r.ok ? r.json() : null) .then((b) => { if (!cancelled) setHistory(b); }) .catch(() => {}); return () => { cancelled = true; }; }, [slug]); const points = history?.points || []; if (points.length === 0) { return ( <>
Price history

Tracking begins today. We snapshot the cheapest landed price across all retailers on every run of the live resolver. Check back in a week for the first trend line.

); } const prices = points.map((p) => p.min).filter(Number.isFinite); const min = Math.min(...prices); const max = Math.max(...prices); const range = max - min || 1; const w = 600, h = 64, pad = 4; const step = points.length > 1 ? (w - pad * 2) / (points.length - 1) : 0; const path = points.map((p, i) => { const x = pad + i * step; const y = h - pad - ((p.min - min) / range) * (h - pad * 2); return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`; }).join(" "); const latest = points[points.length - 1]; return ( <>
Price history · last {points.length} day{points.length === 1 ? "" : "s"}
low ${min.toFixed(0)} {" · "}today ${latest.min.toFixed(0)}
); } /* Scent story — narrative prose, LLM-generated or editor-seeded. */ function ScentStorySection({ story }) { return ( <>
Scent story

{story.value}

); } /* Wearer profile — 4-quadrant grid for wearer / seasonality / projection / longevity. */ function WearerProfileSection({ slug, metadata }) { const { wearer, seasonality, projection, longevity } = metadata; const seasons = seasonality?.value; const seasonRow = (name, key) => { const val = seasons?.[key]; const bar = { low: "▁▁", med: "▅▅", high: "██" }[String(val ?? "").toLowerCase()] || "··"; return (
{name} {bar} {val ?? "—"}
); }; return ( <>
Wearer & performance
{wearer?.value && (
Who wears this

{wearer.value}

)}
{seasons && (
Seasonality
{seasonRow("Spring", "spring")} {seasonRow("Summer", "summer")} {seasonRow("Fall", "fall")} {seasonRow("Winter", "winter")}
)}
{projection?.value && ( {projection.value} } /> )} {longevity?.value && ( {longevity.value} } /> )}
); } /* Buy answer — the cheapest landed offer with a CTA to the retailer. */ function FragranceBuyAnswer({ winner, slug }) { if (!winner) { return (
Live prices

No retailer in our roster currently returns a price for this fragrance. This can mean (a) the release is too new to be indexed, (b) it's discontinued / niche-only, or (c) retailers returned non-matching variants that were filtered by the GTIN+flanker guard.

); } const retailerName = winner.retailer; const price = typeof winner.price === "number" ? `$${winner.price.toFixed(2)}` : "—"; return (
Cheapest landed today
{price}
at {retailerName} {winner.inStock === false ? " · out of stock" : ""} {" · "} source {winner.source || "jsonld"} · confidence {Math.round((winner.confidence ?? 0.8) * 100)}%
Shop at {retailerName} →
); } /* Retailer ledger — every live offer sorted cheapest first. */ function FragranceOfferLedger({ offers }) { const sorted = offers.slice().sort((a, b) => { if ((a.inStock ?? true) !== (b.inStock ?? true)) return a.inStock === false ? 1 : -1; return (a.price ?? 9e9) - (b.price ?? 9e9); }); return ( <>
Retailer ledger · live
Retailer Price Stock Source Shop
{sorted.map((o) => (
{o.retailer} {typeof o.price === "number" ? `$${o.price.toFixed(2)}` : "—"} {o.inStock === false ? "out" : o.inStock ? "in" : "—"} {o.source || "—"} Shop →
))}
); } /* "Smells similar" — note-vector cosine recommendations from Worker. */ function SmellsLikeSection({ slug }) { const [similar, setSimilar] = useStateD(null); useEffectD(() => { let cancelled = false; fetch(`${FMF.WORKER_URL}/similar?frag=${encodeURIComponent(slug)}`) .then((r) => r.ok ? r.json() : null) .then((b) => { if (!cancelled) setSimilar(b); }) .catch(() => { /* silent — non-critical */ }); return () => { cancelled = true; }; }, [slug]); if (!similar || !Array.isArray(similar.similar) || similar.similar.length === 0) return null; return ( <>
Smells similar
Note-vector cosine
{similar.similar.map((s) => { const f = (window.FMF?.CATALOG_ALL || window.FMF?.CATALOG || []).find((x) => x.slug === s.slug); return (
{f?.brand ?? s.slug.split("-")[0]}
{f?.name ?? s.slug}
{Math.round(s.score * 100)}% match
{s.sharedNotes?.length > 0 && (
{s.sharedNotes.slice(0, 4).join(" · ")}
)} ); })}
); } /* Render provenance-tagged metadata fields. Each field shows its source (editor / consensus / llm / wikidata) as a subtle badge so readers can assess data integrity at a glance. */ function FragranceMetadataSection({ slug, metadata }) { const { notes, accords, perfumer, family, concentration, description } = metadata; return ( <>
Scent profile
{description?.value && (

{description.value}{" "}

)}
{/* Notes pyramid */} {notes?.value && (

Notes

)} {/* Side panel — accords, perfumer, family, concentration */}
{accords?.value?.length > 0 && (
Accords
{accords.value.map((a) => ( {a} ))}
)}
{perfumer?.value && ( {Array.isArray(perfumer.value) ? perfumer.value.join(" & ") : perfumer.value} } /> )} {family?.value && {family.value} } />} {concentration?.value && {concentration.value} } />}
); } function NotePyramid({ notes }) { const row = (label, arr) => (arr && arr.length > 0) ? (
{label}
{arr.map((n) => ( {n} ))}
) : null; return (
{row("Top", notes.top)} {row("Heart", notes.heart)} {row("Base", notes.base)}
); } /* Provenance badge — tiny subtle tag next to every field so readers can audit data sources. Editor = authoritative. Consensus = multiple sources agree. LLM = AI-enriched. Wikidata = structured canonical source. */ function ProvenanceBadge({ field }) { if (!field?.source) return null; const meta = { editor: { label: "Editor", color: "var(--oxblood-ink)", title: "Editor-verified · highest authority" }, consensus: { label: "Verified", color: "#2e7d32", title: "Multiple sources agree" }, wikidata: { label: "Wikidata", color: "#1565c0", title: "Wikidata structured data" }, llm: { label: "AI", color: "var(--ink-mute)", title: `AI-enriched · confidence ${Math.round((field.confidence || 0) * 100)}%` }, community: { label: "Community", color: "#ef6c00", title: "Community-submitted" }, extracted: { label: "Retailer", color: "var(--ink-mute)", title: "Extracted from retailer schema.org markup" }, }[field.source] || { label: field.source, color: "var(--ink-mute)", title: field.source }; return ( {meta.label} ); } /* "Suggest edit" button — opens in-page modal to collect reader correction, posts to Worker /report. Replaces native prompt() with a proper form: focus-trapped, ESC to close, keyboard-accessible, ARIA-labeled. */ function SuggestEditButton({ slug, field, currentValue }) { const [open, setOpen] = useStateD(false); return ( <> {open && ( setOpen(false)} /> )} ); } function SuggestEditModal({ slug, field, currentValue, onClose }) { const shown = typeof currentValue === "string" ? currentValue : JSON.stringify(currentValue, null, 2); const [proposed, setProposed] = useStateD(shown); const [reason, setReason] = useStateD(""); const [contact, setContact] = useStateD(""); const [status, setStatus] = useStateD("idle"); // idle | submitting | ok | error const [error, setError] = useStateD(""); const firstFieldRef = React.useRef(null); // Close on ESC; focus first field on open; focus-trap via tab-cycle on // the modal-dialog element. Per WCAG 2.1.2 + 2.4.3. useEffectD(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); firstFieldRef.current?.focus(); const prevOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prevOverflow; }; }, []); const submit = async (e) => { e.preventDefault(); if (!proposed.trim() || proposed === shown) { setError("Please enter a different value to submit a correction."); return; } setStatus("submitting"); setError(""); try { const res = await fetch(`${FMF.WORKER_URL}/report`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ slug, field, currentValue, proposedValue: proposed, reason, contact }), }); const body = await res.json(); if (res.ok) { setStatus("ok"); setTimeout(onClose, 1500); } else { setStatus("error"); setError(body.error || `HTTP ${res.status}`); } } catch (e) { setStatus("error"); setError(e.message); } }; return (
{ if (e.target === e.currentTarget) onClose(); }} style={{ position: "fixed", inset: 0, background: "rgba(20,18,15,0.55)", zIndex: 9000, display: "flex", alignItems: "center", justifyContent: "center", padding: 20, }} >
Suggest a correction · {field}
{shown}