);
}
// ──────────────────────────────────────────────────────────────────
// Signal-strength dot bar — 3-step (LOW / MED / HIGH).
// Used for Draw and Sustained Relevance.
// ──────────────────────────────────────────────────────────────────
function Signal({ value, label }) {
const level = value === 'HIGH' ? 3 : value === 'MED' ? 2 : value === 'LOW' ? 1 : 0;
return (
{label}
{[1, 2, 3].map(i => (
))}
{value}
);
}
// Mini sentiment bar (no labels) — for card footers.
function MiniSentiment({ s }) {
return (
);
}
// ──────────────────────────────────────────────────────────────────
// Header / Nav
// ──────────────────────────────────────────────────────────────────
function AnnouncementBar() {
return (
ASON × 20FT BEAR — Got Milk? × World Cup 2026 California Slate
);
}
function Nav() {
return (
);
}
// ──────────────────────────────────────────────────────────────────
// Hero
// ──────────────────────────────────────────────────────────────────
function Hero() {
const total = window.TALENT_SLATE.filter(t => t.tier !== 'PARTNERSHIP').length;
return (
Talent Strategy · Prepared by ASON Solutions
Got Milk?
× 2026 World Cup California Viewing Party Series
A 5-city Latin-audience talent slate built from cultural intelligence first, with the
September 2025 “Real Is Back” campaign as the lens.
{' '}{total} candidates across LA, SF/Bay, Sacramento, Fresno, and San Diego.
Before the talent slate. Got Milk?'s current position with Latin audiences,
women's-sport DNA, brand-voice pivot, and budget realism shape every recommendation that follows.
{window.FINDINGS[0].num}
{window.FINDINGS[0].headline}
{window.FINDINGS[0].detail}
→ {window.FINDINGS[0].implication}
{window.FINDINGS.slice(1).map(f => (
{f.num}
{f.headline}
{f.detail}
→ {f.implication}
))}
);
}
// ──────────────────────────────────────────────────────────────────
// City switcher + tactical lineup
// ──────────────────────────────────────────────────────────────────
function CityTabs({ active, onJump }) {
return (
Got Milk?'s compound value lies in treating this series as the opening door to an
authentic year-round dialogue with Latin California. Each booking should open the next, not close one.
Phase 01 · Hyperlocal launch
Civic anchors first.
Inject bespoke community assets — Sew Loka, Ale Gonzalez,
Andre's Delights — into the high-visibility viewing parties.
Watch-party catering and merch double as instant PR assets.
Phase 02 · Sierreño heritage
The Central Valley moat.
Activate Eslabón Armado and Central Valley farmworker voices
representing the deep agricultural engine of the state — the literal dairy belt is the talent.
Phase 03 · Multi-gen trust
Sustained platforms.
Partner with Chulita Vinyl Club, Don Cheto, and
regional radio anchors for continuous monthly cultural interaction.
These are the year-round amplifiers.
“A single tier-1 headliner fee buys awareness but doesn’t compound.
Each booking should open a door, not close a transaction.”
);
}
// ──────────────────────────────────────────────────────────────────
// Toast
// ──────────────────────────────────────────────────────────────────
function Toast({ message, onClose }) {
useEffect(() => {
if (!message) return;
const t = setTimeout(onClose, 3500);
return () => clearTimeout(t);
}, [message, onClose]);
if (!message) return null;
return
{message}
;
}
// ──────────────────────────────────────────────────────────────────
// Root
// ──────────────────────────────────────────────────────────────────
function App() {
const [inspecting, setInspecting] = useState(null);
const [approved, setApproved] = useState([]);
const [toast, setToast] = useState('');
const [activeCity, setActiveCity] = useState('la');
const approvedSet = useMemo(() => new Set(approved.map(t => t.id)), [approved]);
// Group talent by city, sorted: regular ranks first, partnerships last.
const cityRoster = useMemo(() => {
const m = {};
window.CITIES.forEach(c => { m[c.id] = []; });
window.TALENT_SLATE.forEach(t => { (m[t.city] || (m[t.city] = [])).push(t); });
Object.keys(m).forEach(cid => {
m[cid].sort((a, b) => {
const ax = a.rank === 'PP' ? 999 : parseInt(a.rank, 10);
const bx = b.rank === 'PP' ? 999 : parseInt(b.rank, 10);
return ax - bx;
});
});
return m;
}, []);
// Smooth-scroll to a city block; the IntersectionObserver below
// updates `activeCity` as the user scrolls.
const jumpToCity = (id) => {
const el = document.getElementById(`city-${id}`);
if (!el) return;
const offset = 80;
const top = el.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({ top, behavior: 'smooth' });
};
useEffect(() => {
if (typeof IntersectionObserver === 'undefined') return;
const obs = new IntersectionObserver((entries) => {
// Pick the entry closest to the top of the viewport.
const visible = entries
.filter(e => e.isIntersecting)
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
if (visible.length) {
const id = visible[0].target.id.replace(/^city-/, '');
setActiveCity(id);
}
}, { rootMargin: '-30% 0px -55% 0px', threshold: 0 });
window.CITIES.forEach(c => {
const el = document.getElementById(`city-${c.id}`);
if (el) obs.observe(el);
});
return () => obs.disconnect();
}, []);
const toggleApprove = (t) => {
setApproved(prev => {
const exists = prev.some(x => x.id === t.id);
if (exists) {
setToast(`Removed ${t.name} from docket.`);
return prev.filter(x => x.id !== t.id);
}
setToast(`Added ${t.name} to docket.`);
return [...prev, t];
});
};
const exportDocket = () => {
if (!approved.length) {
setToast('Docket is empty — approve some candidates first.');
return;
}
const txt = approved.map(t => {
const c = window.CITIES.find(x => x.id === t.city);
return `${t.name} (${t.handle}) — ${c.label} · ${t.tier} · ${t.reach}`;
}).join('\n');
navigator.clipboard.writeText(txt).then(() => {
setToast(`Docket copied — ${approved.length} candidates.`);
}).catch(() => {
setToast('Copy failed — see console for docket text.');
// eslint-disable-next-line no-console
console.log(txt);
});
};
return (
The Cities
Five matchdays. Five rooms.
Each city has its own scene, venue anchor, and strategic shape. Lineups
are tactical — not the most-famous list, the most-credible one. Click any
card to inspect a talent's full cultural audit, sentiment score, and
dairy-safety profile.