// WattWatch — section components const { useState, useMemo, useEffect } = React; // ─── SVG bolts ─────────────────────────────────────────────────────── const BoltIcon = ({ size = 24, color = "currentColor", ...p }) => ( ); const PlugIcon = ({ size = 40 }) => ( ); const BellIcon = ({ size = 40 }) => ( ); const BoltCircleIcon = ({ size = 40 }) => ( ); // Big neon Z (logo) const ZapZ = ({ size = 28, color }) => ( ); // ─── Logomarks ─────────────────────────────────────────────────────── // Each renders inside the nav (~28px) and footer (~36px). All accept `size`. const LogoBoltCircle = ({ size = 28 }) => ( ); const LogoMeter = ({ size = 28 }) => ( ); const LogoWaveBolt = ({ size = 28 }) => ( ); const LogoPowerBolt = ({ size = 28 }) => ( ); const LogoBracketW = ({ size = 28 }) => ( ); const LogoSpark = ({ size = 28 }) => ( ); const LOGO_MARKS = { none: null, boltcircle: LogoBoltCircle, meter: LogoMeter, waveBolt: LogoWaveBolt, powerBolt: LogoPowerBolt, bracketW: LogoBracketW, spark: LogoSpark, }; function LogoMark({ mark = "boltcircle", size = 28 }) { const C = LOGO_MARKS[mark]; if (!C) return null; return ; } // ─── Nav ───────────────────────────────────────────────────────────── function Nav({ mark }) { return ( ); } // ─── Hero with live ticker ─────────────────────────────────────────── function Hero({ price, stale, updatedAt, isOverride }) { const hasPrice = typeof price === "number" && Number.isFinite(price); const isNeg = hasPrice && price < 0; const isCheap = hasPrice && price >= 0 && price < 2; const status = !hasPrice ? "Waiting on first reading…" : isNeg ? "⚡ FREE ELECTRONS — PLUG IT ALL IN ⚡" : isCheap ? "Cheap juice. Run the dishwasher." : "Standard rates. Patience, young watt."; const statusColor = isNeg ? "neon-g" : isCheap ? "neon-c" : "neon-y"; // Eyebrow reflects the live/stale/override state so the user can tell at a // glance whether they're looking at real ComEd data or a Tweaks override. const eyebrowText = isOverride ? "DEMO OVERRIDE · TWEAKS PANEL" : stale && !hasPrice ? "UNAVAILABLE · CAN’T REACH COMED" : stale ? "STALE · SHOWING LAST KNOWN PRICE" : !hasPrice ? "LOADING · COMED HOURLY PRICING" : "LIVE FROM THE GRID · COMED HOURLY PRICING"; // "updated …" subtitle. When we have a real timestamp from the last // successful fetch, show it; otherwise fall back to a placeholder so we // never lie about a fixed "1m ago". const updatedText = updatedAt instanceof Date ? `updated ${updatedAt.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}` : isOverride ? "demo value — live updates paused" : "awaiting first reading"; // sparkline heights, animated const bars = Array.from({ length: 9 }, (_, i) => i); return (
{eyebrowText}

CATCH
FREE WATTS.

We watch the ComEd hourly real‑time price 24/7. When per‑kWh prices drop below zero, you get pinged. Run your dryer, charge your car, or just run the watts directly into the ground. All on the utility’s dime.

{/* TICKER */}
Right now in Chicagoland
{hasPrice ? `${price.toFixed(1)}¢` : "—¢"}
per kilowatt‑hour (current-hour avg) · {updatedText}
{status}
See what we watch for How it works
{/* floating bolts */}
); } // ─── Marquee ───────────────────────────────────────────────────────── function Marquee() { const phrases = [ "FREE ELECTRONS INCOMING!", "PLUG IN. POWER UP.", "NEGATIVE PRICES = POSITIVE VIBES", "WATCH THE WATTS", "WHEN IT GOES BELOW ZERO, YOU GO ALL IN", ]; const items = []; for (let i = 0; i < 3; i++) phrases.forEach(p => items.push(p)); return ( ); } // ─── How it works ──────────────────────────────────────────────────── function HowItWorks() { return (

HOW IT WORKS

Three plugs. Zero math.

01

We watch the price.

We check ComEd’s hourly pricing every minute. Live read, nothing stored.

02

Our rules trigger.

A handful of curated thresholds run against every reading. The instant one trips, an alert fires — no debouncing, no waiting.

03

You get pinged.

Subscribers receive a push the moment a rule fires. Then it’s your call: laundry, EV, AC, big batch of cookies.

); } // ─── Alert rules (presentational only) ───────────────────────────── const ALERT_RULES = [ { accent: "neg", name: "Free Electrons", op: "<", threshold: "0.0¢", why: "Wholesale prices flipped negative. The grid is paying users to plug things in.", tags: ["DO LAUNDRY", "CHARGE EV", "BAKE BREAD"], rarity: "RARE", }, { accent: "cyan", name: "Cheap Juice", op: "<", threshold: "1.5¢", why: "Off‑peak window. Run heavy appliances now and you'll feel it on the bill.", tags: ["DISHWASHER", "DRYER", "POOL PUMP"], rarity: "COMMON", }, { accent: "yellow", name: "Mega Spendy", op: ">", threshold: "8.0¢", why: "Demand spike. Hold off on the optional stuff for an hour or two.", tags: ["HOLD AC", "DELAY EV", "SKIP DRYER"], rarity: "OCCASIONAL", }, ]; const accentMap = { neg: { color: "var(--neg)", label: "neon-g" }, cyan: { color: "var(--cyan)", label: "neon-c" }, magenta: { color: "var(--magenta)", label: "neon-m" }, yellow: { color: "var(--yellow)", label: "neon-y" }, }; function RuleCard({ rule }) { const a = accentMap[rule.accent]; return (
{rule.rarity}

{rule.name}

price {rule.op} {rule.threshold}

{rule.why}

{rule.tags.map(t => {t})}
); } function AlertRules() { return (

WHAT WE WATCH FOR

Three rules.
That’s the whole list.

WattWatch runs a small, opinionated set of alert rules against every price reading. You don’t configure them — we keep them tuned. Subscribe to any one and we’ll ping you the instant it trips.

{ALERT_RULES.map(r => )}
); } // ─── FAQ ───────────────────────────────────────────────────────────── const FAQ_ITEMS = [ { q: "Wait, electricity can really be free?", a: "Sometimes it’s better than free. When renewable supply outstrips demand — windy nights, sunny weekends — wholesale prices on ComEd’s real‑time hourly plan can dip below zero. If you’re on the hourly rate, you get paid (in credits) to use power. WATTWATCH tells you when.", }, { q: "Why are there only three alert rules?", a: "Because every rule we add is one more thing to tune and one more reason to wake you up. Three is enough to capture ‘absurdly cheap’, ‘meaningfully cheap’, and ‘hold off’. More than that and the signal turns into noise.", }, { q: "Why no chart of past prices?", a: "Because keeping history means keeping storage — and storage means a bill, a database, and a thing to keep secure. WattWatch only ever shows you what’s happening right now. The past doesn’t help you save money tonight.", }, { q: "How fast are the alerts?", a: "We check ComEd’s public hourly pricing every 60 seconds. When a rule trips, your alert lands within a few seconds. If a check fails, we try again.", }, { q: "Is this affiliated with ComEd?", a: "Nope. WattWatch is an independent project that reads ComEd’s public hourly pricing feed. Fans, not employees.", }, ]; function FAQ() { const [open, setOpen] = useState(0); return (

QUESTIONS

Things people ask.

{FAQ_ITEMS.map((item, i) => (
{item.a}
))}
); } // ─── Footer ────────────────────────────────────────────────────────── function Footer({ mark }) { return ( ); } Object.assign(window, { BoltIcon, ZapZ, LogoMark, Nav, Hero, Marquee, HowItWorks, AlertRules, FAQ, Footer, });