// ZNR sections — nav, ticker, pillars, sample report, tarot products, signup, music, affiliate, faq, footer

// Payment config is loaded from payment-config.js (ZNR_PAYMENTS global)
const PAY = typeof ZNR_PAYMENTS !== 'undefined' ? ZNR_PAYMENTS : {};
const PUB_ID = (PAY.pubId) || '639163dc-3a7d-4c17-9798-f583b5b982b9';
const BEEHIIV_SUBSCRIBE_URL = (PAY.beehiivSubscribeUrl) || 'https://newsletter.zeronoisereport.com';

// ---------- Reveal hook ----------
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ---------- Logomark ----------
function ZNRMark({ size = 32, label = "ZNR" }) {
  return (
    <span className="znr-mark" style={{ width: size, height: size }}>
      <span className="ring" />
      <span className="core">{label}</span>
    </span>
  );
}

// ---------- Nav ----------
function Nav() {
  return (
    <nav className="nav" data-screen-label="Nav" role="navigation" aria-label="Main navigation">
      <div className="nav-inner">
        <a href="#top" className="nav-logo" aria-label="Zero Noise Report — Home">
          <ZNRMark />
          <span>Zero Noise Report</span>
        </a>
        <div className="nav-links" role="menubar">
          <a className="nav-link" href="#signal" role="menuitem">Signal</a>
          <a className="nav-link" href="#report" role="menuitem">Sample</a>
          <a className="nav-link" href="#academy" role="menuitem">Academy</a>
          <a className="nav-link" href="#music" role="menuitem">Frequency</a>
          <a className="nav-link" href="#affiliate" role="menuitem">Affiliate</a>
        </div>
        <a className="btn btn-primary btn-sm" href="#subscribe" aria-label="Subscribe to Zero Noise Report">
          Subscribe
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero() {
  return (
    <header className="hero" id="top" data-screen-label="01 Hero" role="banner" itemScope itemType="https://schema.org/WPHeader">
      <div className="hero-blackhole">
        <BlackHole size={Math.min(820, typeof window !== 'undefined' ? window.innerWidth * 0.85 : 820)} />
      </div>
      <div className="container hero-inner">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <span className="dot" />
              <span className="eyebrow">3x/Week Intelligence · Markets · Macro</span>
              <span className="dot" />
            </div>
            <h1>
              All Signal.<br />
              Zero <span className="accent">Noise.</span>
            </h1>
            <p className="hero-sub">
              Institutional-grade market intelligence across 10 high-conviction sectors — AI, data centers, energy, oil, commodities, quantum, healthcare, drones, defense AI, and emerging space — distilled for capital allocators who don't have time for the chatter.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary btn-lg" href="#subscribe">
                Subscribe — Free to Start
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a className="btn btn-ghost btn-lg" href="#report">Read a sample</a>
            </div>
            <div className="hero-stats">
              <div className="hero-stat"><span className="num">06:30</span><span className="lbl">ET · Mon/Wed/Fri</span></div>
              <div className="hero-stat"><span className="num">10</span><span className="lbl">Sectors covered</span></div>
              <div className="hero-stat"><span className="num">~7 min</span><span className="lbl">Read time</span></div>
              <div className="hero-stat"><span className="num">10×</span><span className="lbl">The Fool</span></div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

// ---------- Ticker (Live Market Data via Polygon.io) ----------
// One representative ticker per ZNR sector + market benchmarks
const TICKER_SYMBOLS = [
  { sym: "SPY",  label: "S&P 500" },   // Market benchmark
  { sym: "QQQ",  label: "NASDAQ" },     // Tech benchmark
  { sym: "NVDA", label: "NVDA" },       // AI & Semiconductors
  { sym: "TSM",  label: "TSM" },        // AI supply chain
  { sym: "EQIX", label: "EQIX" },       // Data Centers
  { sym: "VST",  label: "VST" },        // Energy Bottlenecks
  { sym: "CEG",  label: "CEG" },        // Nuclear / Energy
  { sym: "OXY",  label: "OXY" },        // Oil & Gas
  { sym: "FCX",  label: "FCX" },        // Commodities
  { sym: "IONQ", label: "IONQ" },       // Quantum Computing
  { sym: "HIMS", label: "HIMS" },       // Emerging Healthcare
  { sym: "PLTR", label: "PLTR" },       // Defense & AI
  { sym: "RKLB", label: "RKLB" },       // Emerging Space
  { sym: "GLD",  label: "GOLD" },       // Safe haven
];

// Fallback prices (updated May 23, 2026) — shown while API loads or if no key set
const TICKER_FALLBACK = [
  { sym: "S&P 500", price: "$584.59", change: "+0.42%", dir: "up" },
  { sym: "NASDAQ", price: "$523.41", change: "+0.71%", dir: "up" },
  { sym: "NVDA", price: "$215.33", change: "-2.50%", dir: "down" },
  { sym: "TSM", price: "$404.52", change: "-1.20%", dir: "down" },
  { sym: "EQIX", price: "$1,079.79", change: "+0.10%", dir: "up" },
  { sym: "VST", price: "$156.27", change: "+3.50%", dir: "up" },
  { sym: "CEG", price: "$294.07", change: "+2.30%", dir: "up" },
  { sym: "OXY", price: "$58.81", change: "+0.20%", dir: "up" },
  { sym: "FCX", price: "$61.99", change: "-1.10%", dir: "down" },
  { sym: "IONQ", price: "$63.64", change: "+9.70%", dir: "up" },
  { sym: "HIMS", price: "$23.75", change: "-1.40%", dir: "down" },
  { sym: "PLTR", price: "$136.88", change: "-0.40%", dir: "down" },
  { sym: "RKLB", price: "$135.76", change: "+3.30%", dir: "up" },
  { sym: "GOLD", price: "$245.18", change: "+0.32%", dir: "up" },
];

const TICKER_CACHE_KEY = 'znr_ticker_v1';
const TICKER_CACHE_TTL = 4 * 60 * 60 * 1000; // 4 hours (prev-day data only changes once/day)

function getTickerCache() {
  try {
    const raw = localStorage.getItem(TICKER_CACHE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (Date.now() - parsed.ts < TICKER_CACHE_TTL) return parsed.data;
  } catch (e) { /* ignore */ }
  return null;
}

function setTickerCache(data) {
  try {
    localStorage.setItem(TICKER_CACHE_KEY, JSON.stringify({ data, ts: Date.now() }));
  } catch (e) { /* ignore */ }
}

function formatTickerPrice(num) {
  return '$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

async function fetchSingleTicker(symbol, apiKey) {
  const url = 'https://api.polygon.io/v2/aggs/ticker/' + symbol + '/prev?adjusted=true&apiKey=' + apiKey;
  const res = await fetch(url);
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const json = await res.json();
  if (json.results && json.results.length > 0) {
    const r = json.results[0];
    const pct = ((r.c - r.o) / r.o) * 100;
    return {
      price: formatTickerPrice(r.c),
      change: (pct >= 0 ? '+' : '') + pct.toFixed(2) + '%',
      dir: pct >= 0 ? 'up' : 'down',
    };
  }
  throw new Error('No results');
}

function Ticker() {
  const [data, setData] = React.useState(() => getTickerCache() || TICKER_FALLBACK);

  React.useEffect(() => {
    if (getTickerCache()) return; // cache is fresh, skip all fetching

    let cancelled = false;

    async function loadTickerData() {
      // PRIORITY 1: Try static ticker-data.json (written by GitHub Action daily)
      try {
        const jsonRes = await fetch('./ticker-data.json?v=' + Date.now());
        if (jsonRes.ok) {
          const json = await jsonRes.json();
          if (json.tickers && json.tickers.length > 0) {
            if (!cancelled) {
              setData(json.tickers);
              setTickerCache(json.tickers);
            }
            return; // done — no API calls needed
          }
        }
      } catch (e) { /* ticker-data.json not found, continue to API */ }

      // PRIORITY 2: Fetch from Polygon.io API (client-side fallback)
      const apiKey = window.ZNR_PAYMENTS && window.ZNR_PAYMENTS.polygonApiKey;
      if (!apiKey || apiKey === 'YOUR_FREE_KEY_FROM_POLYGON_IO') return;

      const results = [];
      // Polygon free tier: 5 calls/min. Fetch in batches of 5 with 62s pause.
      for (let batch = 0; batch < Math.ceil(TICKER_SYMBOLS.length / 5); batch++) {
        if (cancelled) return;
        if (batch > 0) await new Promise(r => setTimeout(r, 62000));

        const slice = TICKER_SYMBOLS.slice(batch * 5, batch * 5 + 5);
        for (let j = 0; j < slice.length; j++) {
          if (cancelled) return;
          const idx = batch * 5 + j;
          try {
            const live = await fetchSingleTicker(slice[j].sym, apiKey);
            results[idx] = { sym: slice[j].label, ...live };
          } catch (e) {
            results[idx] = TICKER_FALLBACK[idx];
          }
        }

        if (!cancelled) {
          const merged = results.concat(TICKER_FALLBACK.slice(results.length));
          setData(merged);
        }
      }

      if (!cancelled && results.length === TICKER_SYMBOLS.length) {
        setTickerCache(results);
      }
    }

    loadTickerData();
    return () => { cancelled = true; };
  }, []);

  const items = [...data, ...data]; // duplicate for infinite scroll
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {items.map((t, i) => (
          <span key={i} className="ticker-item">
            <span className="ticker-symbol">{t.sym}</span>
            <span className="ticker-price">{t.price}</span>
            <span className={`ticker-change ${t.dir}`}>{t.dir === 'up' ? '▲' : '▼'} {t.change}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ---------- Pillars ----------
const PILLARS = [
  {
    title: "Artificial Intelligence",
    desc: "Compute supply chains, model releases, capex cycles, and the names actually monetizing inference.",
    tags: ["NVDA", "AMD", "TSM", "ASML", "Hyperscalers"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <circle cx="28" cy="28" r="6" stroke="currentColor" strokeWidth="1.2"/>
        <circle cx="28" cy="28" r="18" stroke="currentColor" strokeWidth="1" strokeDasharray="2 4"/>
        <circle cx="28" cy="10" r="2" fill="currentColor"/>
        <circle cx="46" cy="28" r="2" fill="currentColor"/>
        <circle cx="28" cy="46" r="2" fill="currentColor"/>
        <circle cx="10" cy="28" r="2" fill="currentColor"/>
      </svg>
    ),
  },
  {
    title: "Data Centers",
    desc: "Power-constrained capacity, REITs, cooling, transmission. Where the AI buildout actually plugs in.",
    tags: ["DLR", "EQIX", "VRT", "PWR"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <rect x="10" y="14" width="36" height="8" stroke="currentColor" strokeWidth="1.2"/>
        <rect x="10" y="24" width="36" height="8" stroke="currentColor" strokeWidth="1.2"/>
        <rect x="10" y="34" width="36" height="8" stroke="currentColor" strokeWidth="1.2"/>
        <circle cx="40" cy="18" r="1.2" fill="currentColor"/>
        <circle cx="40" cy="28" r="1.2" fill="currentColor"/>
        <circle cx="40" cy="38" r="1.2" fill="currentColor"/>
      </svg>
    ),
  },
  {
    title: "Energy Bottlenecks",
    desc: "Grid, nuclear renaissance, gas, transmission queues — the hard physical layer behind every digital narrative.",
    tags: ["VST", "CEG", "URA", "GE Vernova"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M30 8 L18 30 H28 L24 48 L38 24 H28 L30 8 Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
      </svg>
    ),
  },
  {
    title: "Oil & Gas",
    desc: "Supply-demand tape, OPEC posture, US shale capex discipline, and the strategic petroleum cycle.",
    tags: ["WTI", "Brent", "XLE", "OXY"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M28 8 C 28 8, 14 24, 14 36 C 14 44, 20 48, 28 48 C 36 48, 42 44, 42 36 C 42 24, 28 8, 28 8 Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
        <circle cx="32" cy="34" r="3" fill="currentColor" opacity="0.5"/>
      </svg>
    ),
  },
  {
    title: "Commodities & Rare Earth",
    desc: "Copper, uranium, lithium, gold. The metals re-rating with electrification, AI compute, and dedollarization.",
    tags: ["FCX", "NEM", "MP", "GOLD"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <rect x="14" y="22" width="14" height="22" stroke="currentColor" strokeWidth="1.3"/>
        <rect x="28" y="14" width="14" height="30" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M14 22 L21 16 L35 16" stroke="currentColor" strokeWidth="1.3" fill="none"/>
        <path d="M28 14 L35 8 L49 8 L42 14" stroke="currentColor" strokeWidth="1.3" fill="none"/>
      </svg>
    ),
  },
  {
    title: "Quantum Computing",
    desc: "Gate-based, trapped-ion, photonic. The companies racing to crack useful quantum advantage — and the infrastructure plays behind them.",
    tags: ["IONQ", "QBTS", "RGTI", "IBM"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <circle cx="28" cy="28" r="10" stroke="currentColor" strokeWidth="1.2"/>
        <ellipse cx="28" cy="28" rx="22" ry="8" stroke="currentColor" strokeWidth="1" strokeDasharray="3 3" transform="rotate(45 28 28)"/>
        <ellipse cx="28" cy="28" rx="22" ry="8" stroke="currentColor" strokeWidth="1" strokeDasharray="3 3" transform="rotate(-45 28 28)"/>
        <circle cx="28" cy="28" r="3" fill="currentColor" opacity="0.6"/>
      </svg>
    ),
  },
  {
    title: "Emerging Healthcare",
    desc: "Digital health, telehealth, AI-driven drug discovery. Where technology meets the largest addressable market on Earth.",
    tags: ["HIMS", "DOCS", "RXRX", "TDOC"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M28 12 V44 M20 28 H36" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        <circle cx="28" cy="28" r="18" stroke="currentColor" strokeWidth="1.2"/>
        <path d="M14 20 Q28 8 42 20" stroke="currentColor" strokeWidth="1" fill="none" strokeDasharray="2 3"/>
      </svg>
    ),
  },
  {
    title: "Drones & Autonomous",
    desc: "eVTOL, autonomous logistics, unmanned systems. The companies building machines that move without humans at scale.",
    tags: ["AVAV", "JOBY", "ACHR", "LUNR"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M28 18 L38 28 L28 38 L18 28 Z" stroke="currentColor" strokeWidth="1.3"/>
        <circle cx="18" cy="18" r="4" stroke="currentColor" strokeWidth="1"/>
        <circle cx="38" cy="18" r="4" stroke="currentColor" strokeWidth="1"/>
        <circle cx="18" cy="38" r="4" stroke="currentColor" strokeWidth="1"/>
        <circle cx="38" cy="38" r="4" stroke="currentColor" strokeWidth="1"/>
        <line x1="21" y1="21" x2="25" y2="25" stroke="currentColor" strokeWidth="1"/>
        <line x1="35" y1="21" x2="31" y2="25" stroke="currentColor" strokeWidth="1"/>
        <line x1="21" y1="35" x2="25" y2="31" stroke="currentColor" strokeWidth="1"/>
        <line x1="35" y1="35" x2="31" y2="31" stroke="currentColor" strokeWidth="1"/>
      </svg>
    ),
  },
  {
    title: "Defense & AI",
    desc: "Military AI, autonomous warfare, predictive intelligence, defense software. The companies weaponizing data dominance for national security.",
    tags: ["PLTR", "LMT", "NOC", "RTX"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M28 8 L28 48" stroke="currentColor" strokeWidth="1.3"/>
        <path d="M20 16 L28 8 L36 16" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinejoin="round"/>
        <circle cx="28" cy="28" r="12" stroke="currentColor" strokeWidth="1.2" strokeDasharray="3 3"/>
        <circle cx="28" cy="28" r="4" fill="currentColor" opacity="0.5"/>
        <path d="M16 28 H12 M40 28 H44" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
        <path d="M28 16 V12 M28 40 V44" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
      </svg>
    ),
  },
  {
    title: "Emerging Space",
    desc: "Launch economics, satellite constellations, in-orbit services, space infrastructure. The final frontier is now a capex cycle.",
    tags: ["RKLB", "ASTS", "MNTS", "SPCE"],
    icon: (
      <svg viewBox="0 0 56 56" fill="none">
        <path d="M28 10 C28 10 22 20 22 32 C22 40 24 46 28 48 C32 46 34 40 34 32 C34 20 28 10 28 10Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
        <path d="M22 36 C18 38 14 42 14 44 L22 40" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round"/>
        <path d="M34 36 C38 38 42 42 42 44 L34 40" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round"/>
        <circle cx="28" cy="26" r="3" fill="currentColor" opacity="0.5"/>
      </svg>
    ),
  },
];

function Pillars() {
  const ref = useReveal();
  return (
    <section className="section-pad" id="signal" data-screen-label="02 Pillars" aria-label="10 market sectors covered by Zero Noise Report">
      <div className="container reveal" ref={ref}>
        <div className="section-header">
          <span className="eyebrow">Ten high-conviction sectors</span>
          <h2>We follow the capital, not the headlines.</h2>
          <p>The Zero Noise Report is built around ten interlocking sectors. Three times a week, we map the flow against this lattice — and surface only what compounds.</p>
        </div>
        <div className="pillars-grid" role="list" aria-label="Sector coverage">
          {PILLARS.map((p, i) => (
            <article className="pillar" key={i} style={{ color: 'var(--bone)' }} role="listitem" data-sector={p.title} data-tickers={p.tags.join(',')} itemScope itemType="https://schema.org/FinancialProduct">
              <div className="pillar-icon" style={{ color: 'var(--glow-2)' }} aria-hidden="true">{p.icon}</div>
              <h3 itemProp="name">{p.title}</h3>
              <p itemProp="description">{p.desc}</p>
              <div className="pillar-tags" aria-label={`Key tickers for ${p.title}`}>
                {p.tags.map(t => <span key={t} className="pillar-tag" data-ticker={t}>{t}</span>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Sample Report ----------
function SampleReport() {
  const ref = useReveal();
  return (
    <section className="section-pad sample-section" id="report" data-screen-label="03 Sample Report">
      <div className="container reveal" ref={ref}>
        <div className="section-header">
          <span className="eyebrow">A typical morning</span>
          <h2>Less to read. More to act on.</h2>
          <p>Each issue opens with three positions to watch and the one macro thesis behind them — then a tight argument. No filler. No clickbait. No noise.</p>
        </div>
        <article className="sample-card">
          <header className="sample-header">
            <span className="sample-issue">Issue №147 · Pre-market</span>
            <span className="sample-date">TUE · 20 MAY 2026 · 06:30 ET</span>
          </header>
          <h3 className="sample-title">The grid is the bottleneck. Power names re-rate again.</h3>
          <p className="sample-deck">
            Three months of transmission-queue data now corroborate what we've been writing since February: hyperscaler capex has outrun the grid by roughly a decade. Nuclear restarts and behind-the-meter gas are the only credible bridges.
          </p>
          <div className="sample-pulls">
            <div className="sample-pull">
              <div className="label">Position 01 · Power</div>
              <div className="ticker-row"><span className="sym">VST</span><span className="move up">+3.44%</span></div>
              <p className="note">Reaffirming our overweight. Texas demand curve continues to bend up; PJM auction sets next floor.</p>
            </div>
            <div className="sample-pull">
              <div className="label">Position 02 · Nuclear</div>
              <div className="ticker-row"><span className="sym">CEG</span><span className="move down">−0.55%</span></div>
              <p className="note">Sell-off is noise. Three Mile Island restart timeline tightening; we add on weakness.</p>
            </div>
            <div className="sample-pull">
              <div className="label">Position 03 · Compute</div>
              <div className="ticker-row"><span className="sym">NVDA</span><span className="move up">+2.18%</span></div>
              <p className="note">Trim into strength. Memory-bandwidth bottleneck is now the marginal constraint, not GPU supply.</p>
            </div>
          </div>
          <div className="sample-body">
            <p>
              <strong>The thesis.</strong> The market has spent six months pricing AI as a software story. It is, in fact, a power story with a software wrapper. ERCOT data from last week shows commercial demand growth running at a 4-year CAGR no transmission planner modeled — and the queue won't clear before 2031.
            </p>
            <p className="quote">
              "When everyone is reading the same headlines, the alpha is in the second-order infrastructure they need to build to make those headlines real."
            </p>
            <p>
              <strong>What to watch today.</strong> PJM auction results post 09:00 ET. Watch the clearing price; anything above last year's print is the tape we're trading. Energy XLE relative strength vs. SPX confirms the rotation we flagged on May 12.
            </p>
          </div>
        </article>
      </div>
    </section>
  );
}

// ---------- Tarot products ----------
// Academy product URLs: reads from payment-config.js, falls back to Gumroad
const _ac = (PAY.academy) || {};
const PRODUCTS = [
  {
    roman: "I",
    tier: "Tier 01 · Foundation",
    name: "Beginner Pack",
    sub: "Fearless Launchpad",
    cover: "assets/tier1-beginner.jpg",
    price: (_ac.beginner && _ac.beginner.price) || "$197",
    url: (_ac.beginner && _ac.beginner.url) || "https://zeronoisereport.gumroad.com/l/YourFearlessTradingLaunchpad",
    bullets: [
      "Douglas — Trading in the Zone",
      "Candlestick Charting Explained",
      "Options Basics primer",
      "Two surprise gifts",
    ],
  },
  {
    roman: "II",
    tier: "Tier 02 · Intraday",
    name: "Day Trading System",
    sub: "Intraday Edge",
    cover: "assets/tier2-day-trading.jpg",
    price: (_ac.dayTrading && _ac.dayTrading.price) || "$497",
    url: (_ac.dayTrading && _ac.dayTrading.url) || "https://zeronoisereport.gumroad.com/l/ZNRDayTradingSystem",
    bullets: [
      "25 Rules of Day Trading (2003)",
      "Intraday candlestick playbook",
      "Volume & VWAP edges",
      "Daily trade plan template",
    ],
  },
  {
    roman: "III",
    tier: "Tier 03 · Position",
    name: "Swing & Long-Term",
    sub: "Position Trader Vault",
    cover: "assets/tier3-swing-long.jpg",
    price: (_ac.swingLong && _ac.swingLong.price) || "$697",
    url: (_ac.swingLong && _ac.swingLong.url) || "https://zeronoisereport.gumroad.com/l/ZNRSwingLongBundle",
    bullets: [
      "Trend-following frameworks",
      "Value Legends curriculum",
      "Regime detection mastery",
      "Multi-month sizing models",
    ],
  },
  {
    roman: "IV",
    tier: "Tier 04 · Greeks",
    name: "Options Mastery",
    sub: "Professional Options",
    cover: "assets/tier4-options.webp",
    price: (_ac.optionsMastery && _ac.optionsMastery.price) || "$997",
    url: (_ac.optionsMastery && _ac.optionsMastery.url) || "https://zeronoisereport.gumroad.com/l/ZNROptionsMastery",
    bullets: [
      "11-module masterclass",
      "VIX Alpha methodology",
      "Monthly income spreads",
      "Greeks-first execution",
    ],
  },
  {
    roman: "V",
    tier: "Tier 05 · Capstone",
    name: "Elite Vault",
    sub: "Lifetime · 100 Spots",
    cover: "assets/tier5-elite-vault.jpg",
    price: (_ac.eliteVault && _ac.eliteVault.price) || "$4,997",
    url: (_ac.eliteVault && _ac.eliteVault.url) || "https://zeronoisereport.gumroad.com/l/ZNREliteVault",
    bullets: [
      "1,000+ curated assets",
      "Every future ZNR drop",
      "Founder-tier access",
      "Capped at 100 lifetime seats",
    ],
  },
];

function TarotCard({ p }) {
  return (
    <a className="tarot" href={p.url} target="_blank" rel="noopener noreferrer" aria-label={`${p.name} — ${p.price}`}>
      <div className="tarot-inner">
        <div className="tarot-cover" style={{ backgroundImage: `url('${p.cover}')` }} />
        <div className="tarot-glow" />
        <div className="tarot-band">
          <span className="tarot-roman">{p.roman}</span>
          <span className="tarot-tier">{p.tier.split('·')[1].trim()}</span>
        </div>
        <div className="tarot-foot">
          <div className="tarot-name">{p.name}</div>
          <div className="tarot-sub">{p.sub}</div>
          <div className="tarot-meta">
            <span className="tarot-price">{p.price}</span>
            <span className="tarot-cta">Acquire ↗</span>
          </div>
        </div>
        <div className="tarot-reveal">
          <ul className="tarot-reveal-list">
            {p.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
          <div className="tarot-meta">
            <span className="tarot-price">{p.price}</span>
            <span className="tarot-cta">Acquire ↗</span>
          </div>
        </div>
      </div>
    </a>
  );
}

function Products() {
  const ref = useReveal();
  return (
    <section className="section-pad products-section" id="academy" data-screen-label="04 Academy">
      <div className="container reveal" ref={ref}>
        <div className="section-header">
          <span className="eyebrow">The Academy · Five Arcana</span>
          <h2>From first candle to capstone vault.</h2>
          <p>Five tiers, each a complete system. Buy one as a primer or stack the path. Hover any card to see what's inside.</p>
        </div>
        <div className="tarot-row">
          {PRODUCTS.map((p, i) => <TarotCard key={i} p={p} />)}
        </div>
      </div>
    </section>
  );
}

// ---------- Newsletter Subscribe ----------
function Signup() {
  const ref = useReveal();
  const [email, setEmail] = React.useState('');

  const handleSubscribe = (e) => {
    e.preventDefault();
    const base = BEEHIIV_SUBSCRIBE_URL;
    const url = email ? `${base}?email=${encodeURIComponent(email)}` : base;
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <section className="signup-section section-pad" id="subscribe" data-screen-label="05 Subscribe" aria-label="Subscribe to Zero Noise Report" itemScope itemType="https://schema.org/SubscribeAction">
      <div className="container reveal" ref={ref}>
        <div className="signup-card">
          <span className="eyebrow">3x/week — Mon · Wed · Fri — free to start</span>
          <h2>Tomorrow's tape, <span className="serif-italic">read tonight.</span></h2>
          <p className="lede" itemProp="description">Join capital allocators reading the Zero Noise Report before the open. Free tier always free. Pro unlocks 10-sector intelligence, model portfolio, and live alerts. Cancel in one click.</p>

          <form className="signup-form" onSubmit={handleSubscribe} aria-label="Newsletter signup" role="form">
            <label htmlFor="znr-email" className="sr-only">Email address</label>
            <input
              id="znr-email"
              type="email"
              className="signup-input"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
              aria-label="Enter your email to subscribe"
            />
            <button type="submit" className="btn btn-primary btn-lg signup-btn" aria-label="Subscribe to Zero Noise Report for free">
              Subscribe — Free
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </form>

          <div className="signup-pro-nudge">
            <a className="btn btn-ghost btn-sm" href="https://newsletter.zeronoisereport.com" target="_blank" rel="noopener noreferrer">
              Upgrade to Pro — {(PAY.newsletter && PAY.newsletter.pro && PAY.newsletter.pro.priceMonthly) || '$99'}/mo
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>

          <div className="signup-meta">No spam · unsubscribe in one click · GDPR compliant</div>
        </div>
      </div>
    </section>
  );
}

// ---------- Music ----------
function Music() {
  const ref = useReveal();
  return (
    <section className="section-pad music-section" id="music" data-screen-label="06 Music">
      <div className="container reveal" ref={ref}>
        <div className="music-card">
          <div className="music-text">
            <span className="eyebrow" style={{ color: 'var(--glow-5)' }}>The frequency · ad-free</span>
            <h2>Music for traders <span className="serif-italic" style={{ color: 'var(--glow-5)' }}>who think in candles.</span></h2>
            <p>A 24/7 ad-free station tuned for screen-time: deep ambient, glitch jazz, cinematic synth. Built for the open, the lunch lull, and the close. Curated by the desk.</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="https://www.youtube.com/@Zeronoisereport" target="_blank" rel="noopener noreferrer">
                Tune in on YouTube
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a className="btn btn-ghost" href="https://x.com/ZeroNoiseReport" target="_blank" rel="noopener noreferrer">
                Follow on X
              </a>
            </div>
          </div>
          <div className="music-visual">
            <div className="eq">
              {Array.from({ length: 12 }).map((_, i) => <div key={i} className="eq-bar" />)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Affiliate ----------
function Affiliate() {
  const ref = useReveal();
  return (
    <section className="section-pad" id="affiliate" data-screen-label="07 Affiliate">
      <div className="container reveal" ref={ref}>
        <div className="affiliate-card">
          <span className="big-num">40%</span>
          <div className="affiliate-text">
            <span className="eyebrow">Affiliate program</span>
            <h2>Forty percent. <span className="serif-italic">Forever.</span></h2>
            <p>Refer the report and the academy. Earn 40% on every product, every renewal, every tier. No caps, no claw-backs.</p>
          </div>
          <div className="affiliate-cta">
            <a className="btn btn-primary btn-lg" href={(PAY.affiliate && PAY.affiliate.url) || "https://zeronoisereport.gumroad.com/affiliates"} target="_blank" rel="noopener noreferrer">
              Join as affiliate
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
const FAQ_ITEMS = [
  { q: "How is this different from Motley Fool?", a: "The Fool optimizes for engagement: long articles, broad coverage, ad-supported. We optimize for signal: three focused briefings per week across ten high-conviction sectors, no SEO churn, no banner ads. Most issues are under seven minutes to read." },
  { q: "What does the free tier include?", a: "The 3x/week 06:30 ET briefing, the ticker watchlist, and quarterly thesis updates. Pro adds live alerts, model portfolio with position sizing, 10-sector deep dives, Telegram channel access, and the bonus stack — Starter Kit, Thesis Vault, Earnings Playbook, and monthly portfolio audits." },
  { q: "What are the ten sectors?", a: "AI & semiconductors, data centers & cloud, energy infrastructure, oil & gas, commodities & rare earth minerals, quantum computing, emerging healthcare, drones & autonomous systems, defense & AI, and emerging space. Each sector is tracked with 10+ key tickers and a dedicated thesis." },
  { q: "Who writes it?", a: "Working capital allocators with skin in the game. No AI fluff dressed as analysis — we use AI to compress research, never to author conclusions." },
  { q: "Is this investment advice?", a: "No. The Zero Noise Report is published as research and education. Nothing here is a personalized recommendation. Do your own work; consult a fiduciary if you need one." },
  { q: "Can I cancel?", a: "Yes. One click in any issue or the dashboard. No emails to write, no retention calls. We hate that as much as you do. New Pro subscribers get a 30-day money-back guarantee — risk-free, keep all the bonuses." },
];

function FAQ() {
  const ref = useReveal();
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad" id="faq" data-screen-label="08 FAQ" aria-label="Frequently asked questions" itemScope itemType="https://schema.org/FAQPage">
      <div className="container-narrow reveal" ref={ref}>
        <div className="section-header">
          <span className="eyebrow">Frequently asked</span>
          <h2>The reasonable questions.</h2>
        </div>
        <div className="faq-list" role="list">
          {FAQ_ITEMS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)} role="listitem" itemScope itemProp="mainEntity" itemType="https://schema.org/Question" tabIndex="0" onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(open === i ? -1 : i); } }} aria-expanded={open === i}>
              <div className="faq-q" itemProp="name">{f.q}<span className="plus" aria-hidden="true">+</span></div>
              <div className="faq-a" itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer"><div itemProp="text">{f.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer" data-screen-label="09 Footer" role="contentinfo" itemScope itemType="https://schema.org/WPFooter">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-logo-block">
            <a href="#top" className="nav-logo">
              <ZNRMark size={36} />
              <span>Zero Noise Report</span>
            </a>
            <p className="footer-tagline">
              Premium market intelligence for capital allocators who measure twice and cut once. Published from the desk, Mon/Wed/Fri at 06:30 ET.
            </p>
          </div>
          <div className="footer-col">
            <h4>Report</h4>
            <a href="#subscribe">Subscribe</a>
            <a href="#report">Sample issue</a>
            <a href="#signal">The ten sectors</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="footer-col">
            <h4>Academy</h4>
            {PRODUCTS.map((p) => (
              <a key={p.name} href={p.url} target="_blank" rel="noopener noreferrer">{p.name}</a>
            ))}
          </div>
          <div className="footer-col">
            <h4>Channels</h4>
            <a href="https://x.com/ZeroNoiseReport" target="_blank" rel="noopener noreferrer">X / Twitter</a>
            <a href="https://www.youtube.com/@Zeronoisereport" target="_blank" rel="noopener noreferrer">YouTube — Frequency</a>
            <a href={(PAY.affiliate && PAY.affiliate.url) || "#affiliate"} target="_blank" rel="noopener noreferrer">Affiliate · {(PAY.affiliate && PAY.affiliate.commission) || "40%"}</a>
            <a href="mailto:zeronoisereport@gmail.com">zeronoisereport@gmail.com</a>
          </div>
          <div className="footer-col">
            <h4>Legal</h4>
            <a href="legal.html#privacy">Privacy Policy</a>
            <a href="legal.html#terms">Terms of Service</a>
            <a href="legal.html#disclaimer">Investment Disclaimer</a>
            <a href="legal.html#data-deletion">Data Deletion</a>
            <a href="legal.html#copyright">Copyright</a>
            <a href="legal.html#dmca">DMCA Policy</a>
            <a href="legal.html#affiliate-disclosure">Affiliate Disclosure</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Zero Noise Report · Research, not advice · <a href="legal.html#disclaimer" style={{ color: 'inherit', textDecoration: 'underline', textUnderlineOffset: '2px' }}>Disclaimer</a></span>
          <div className="footer-socials">
            <a href="https://x.com/ZeroNoiseReport" target="_blank" rel="noopener noreferrer" aria-label="X">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2 L12 12 M12 2 L2 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
            </a>
            <a href="https://www.youtube.com/@Zeronoisereport" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="8" rx="2" stroke="currentColor" strokeWidth="1.3"/><path d="M7 6.5 L10 8 L7 9.5 Z" fill="currentColor"/></svg>
            </a>
            <a href="https://newsletter.zeronoisereport.com" target="_blank" rel="noopener noreferrer" aria-label="Newsletter">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.4"/><path d="M9 5.5 C 9 4.4 8.1 3.5 7 3.5 C 5.9 3.5 5 4.4 5 5.5 C 5 6.6 5.9 7.5 7 7.5 L 9 7.5" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, Ticker, Pillars, SampleReport, Products, Signup, Music, Affiliate, FAQ, Footer
});