/* global React */
const { useState: useState4, useMemo: useMemo4 } = React;

// ---- Realistic stock chart background ----
function ChartBackground({opacity=0.5, candles=120, volatility=1, seed=42, showGrid=true, showAxis=true, showMA=true, showVolume=true}) {
  const W = 1400, H = 220;
  const padTop = 16, padBottom = showVolume ? 50 : 20, padLeft = 0, padRight = showAxis ? 48 : 0;
  const chartH = H - padTop - padBottom;
  const chartW = W - padLeft - padRight;

  // Deterministic pseudo-random walk
  const data = React.useMemo(() => {
    let s = seed;
    const rand = () => { s = (s*9301 + 49297) % 233280; return s/233280; };
    let price = 100;
    let trend = 0.05;
    const out = [];
    for (let i = 0; i < candles; i++) {
      // occasionally shift trend
      if (i > 0 && i % 20 === 0) trend = (rand() - 0.4) * 0.4;
      const drift = trend;
      const vol = (rand() - 0.5) * 2.5 * volatility;
      const open = price;
      const close = Math.max(20, open + drift + vol);
      const wickRange = Math.abs(close - open) * (1 + rand()*1.5) + rand() * 1.5 * volatility;
      const high = Math.max(open, close) + rand() * wickRange;
      const low  = Math.min(open, close) - rand() * wickRange;
      const volume = (Math.abs(close - open) * 8 + rand() * 4) * (0.5 + Math.abs(vol)*0.3);
      out.push({ open, close, high, low, volume });
      price = close;
    }
    return out;
  }, [candles, volatility, seed]);

  // Compute price range
  const allPrices = data.flatMap(d => [d.high, d.low]);
  const pMin = Math.min(...allPrices);
  const pMax = Math.max(...allPrices);
  const pRange = (pMax - pMin) || 1;
  const yScale = (p) => padTop + chartH * (1 - (p - pMin) / pRange);

  const candleW = chartW / candles;
  const bodyW = Math.max(1, candleW * 0.65);

  // 20-candle moving average
  const ma = data.map((_, i) => {
    const window = data.slice(Math.max(0, i-19), i+1);
    return window.reduce((a,b) => a + b.close, 0) / window.length;
  });
  const maPath = ma.map((v, i) => `${i===0?"M":"L"}${(padLeft + i*candleW + candleW/2).toFixed(1)},${yScale(v).toFixed(1)}`).join(" ");

  // Volume
  const maxVol = Math.max(...data.map(d => d.volume));
  const volH = 30;
  const volTop = H - padBottom + 14;

  // Y-axis ticks
  const ticks = [pMin, pMin + pRange*0.25, pMin + pRange*0.5, pMin + pRange*0.75, pMax];

  // Light, monochromatic palette so it stays "background"
  const upColor = "#e8f0f7";
  const downColor = "#7fa3c4";
  const wickColor = "#a8c4dc";
  const gridColor = "rgba(255,255,255,0.18)";
  const axisColor = "rgba(255,255,255,0.55)";
  const maColor = "rgba(255,255,255,0.6)";

  return (
    <svg width="100%" height="100%" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" style={{position:"absolute", inset:0, opacity}}>
      {/* horizontal gridlines */}
      {showGrid && ticks.map((t,i) => (
        <line key={"g"+i} x1={padLeft} x2={W - padRight} y1={yScale(t)} y2={yScale(t)} stroke={gridColor} strokeWidth="1" strokeDasharray="2 4"/>
      ))}

      {/* candles */}
      {data.map((d, i) => {
        const cx = padLeft + i*candleW + candleW/2;
        const isUp = d.close >= d.open;
        const bodyTop = yScale(Math.max(d.open, d.close));
        const bodyBot = yScale(Math.min(d.open, d.close));
        const bodyH = Math.max(0.5, bodyBot - bodyTop);
        return (
          <g key={i}>
            <line x1={cx} y1={yScale(d.high)} x2={cx} y2={yScale(d.low)} stroke={wickColor} strokeWidth="0.6"/>
            <rect x={cx - bodyW/2} y={bodyTop} width={bodyW} height={bodyH} fill={isUp ? upColor : downColor} stroke={isUp ? wickColor : downColor} strokeWidth="0.4"/>
          </g>
        );
      })}

      {/* moving average */}
      {showMA && <path d={maPath} fill="none" stroke={maColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>}

      {/* volume bars */}
      {showVolume && data.map((d, i) => {
        const cx = padLeft + i*candleW + candleW/2;
        const h = (d.volume / maxVol) * volH;
        const isUp = d.close >= d.open;
        return <rect key={"v"+i} x={cx - bodyW/2} y={volTop + (volH - h)} width={bodyW} height={h} fill={isUp ? upColor : downColor} opacity="0.5"/>;
      })}

      {/* y-axis labels */}
      {showAxis && ticks.map((t, i) => (
        <text key={"l"+i} x={W - padRight + 6} y={yScale(t) + 3} fill={axisColor} fontSize="10" fontFamily="'JetBrains Mono', monospace">{t.toFixed(0)}</text>
      ))}
    </svg>
  );
}

// ---- Sparkline components ----
function SparkLine({values, w=80, h=22, color="#3a6d92", fill=true}) {
  if (!values) return null;
  const r = window.SPARK_UTIL.line(values, w, h, color, fill);
  if (!r) return null;
  return (
    <svg width={w} height={h} style={{display:"block"}}>
      {fill && <path d={r.fillPath} fill={color} fillOpacity={0.12} />}
      <path d={r.path} stroke={color} strokeWidth={1.5} fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={r.pts[r.pts.length-1][0]} cy={r.pts[r.pts.length-1][1]} r={2.2} fill={color} />
    </svg>
  );
}
function SparkBars({values, w=80, h=22, posColor="#0a875a", negColor="#cd3d64"}) {
  if (!values) return null;
  const bars = window.SPARK_UTIL.bars(values, w, h, posColor, negColor);
  return (
    <svg width={w} height={h} style={{display:"block"}}>
      {bars.map((b,i) => <rect key={i} x={b.x} y={b.y} width={b.w} height={b.h} fill={b.color} rx={1} />)}
    </svg>
  );
}
function LabeledSpark({title, values, kind="line", color="#3a6d92", w=180, h=44, suffix=""}) {
  if (!values) return null;
  const last = values[values.length-1];
  const first = values[0];
  const change = first === 0 ? 0 : ((last - first) / Math.abs(first)) * 100;
  return (
    <div style={{display:"flex", flexDirection:"column", gap:6}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}>
        <div style={{fontSize:11, color:"#697386", fontWeight:600, letterSpacing:"0.02em"}}>{title}</div>
        <div style={{fontSize:11, fontFamily:"'JetBrains Mono', monospace", color: change > 0 ? "#0a875a" : change < 0 ? "#cd3d64" : "#697386", fontWeight:600}}>
          {change > 0 ? "+" : ""}{Math.abs(change) > 999 ? ">999" : change.toFixed(0)}%
        </div>
      </div>
      {kind === "line" ? <SparkLine values={values} w={w} h={h} color={color} /> : <SparkBars values={values} w={w} h={h} />}
      <div style={{display:"flex", justifyContent:"space-between", fontSize:10, color:"#8898aa", fontFamily:"'JetBrains Mono', monospace"}}>
        <span>{window.SPARK_UTIL.fmt(first)}{suffix}</span>
        <span style={{color:"#0a2540", fontWeight:600}}>{window.SPARK_UTIL.fmt(last)}{suffix}</span>
      </div>
    </div>
  );
}


// ============ V4: STRIPE-STYLE — crisp white, saturated accents, bold black numbers ============
const V4_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headerColor1": "#6b9bc4",
  "headerColor2": "#5b8db8",
  "headerColor3": "#4a7ba8",
  "chartOpacity": 0.55,
  "candleCount": 120,
  "chartVolatility": 1.2,
  "chartSeed": 42,
  "showGrid": true,
  "showAxis": true,
  "showMA": true,
  "showVolume": true,
  "taglineText": "Don't try to predict, just follow.",
  "channelName": "The Trend-Aware Investor"
}/*EDITMODE-END*/;

function StripeView() {
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(V4_TWEAK_DEFAULTS) : [V4_TWEAK_DEFAULTS, () => {}];
  const [filter, setFilter] = useState4("all");
  const [sortKey, setSortKey] = useState4("score");
  const [selected, setSelected] = useState4(null);
  const [showFramework, setShowFramework] = useState4(false);

  const stocks = useMemo4(() => window.STOCKS.map(s => ({
    ...s,
    _score: window.UTILS.totalScore(s),
    _tier: window.UTILS.tier(window.UTILS.totalScore(s)),
    _delta: window.UTILS.totalScore(s) - s.prevScore
  })), []);

  const counts = {
    all: stocks.length,
    high: stocks.filter(s => s._tier==="high").length,
    watch: stocks.filter(s => s._tier==="watch").length,
    monitor: stocks.filter(s => s._tier==="monitor").length,
    pass: stocks.filter(s => s._tier==="pass").length,
  };
  const avg = Math.round(stocks.reduce((a,s)=>a+s._score,0)/stocks.length);

  const filtered = useMemo4(() => {
    let r = filter === "all" ? stocks : stocks.filter(s => s._tier === filter);
    if (sortKey === "score") r = [...r].sort((a,b) => b._score - a._score);
    if (sortKey === "delta") r = [...r].sort((a,b) => b._delta - a._delta);
    if (sortKey === "ticker") r = [...r].sort((a,b) => a.ticker.localeCompare(b.ticker));
    return r;
  }, [stocks, filter, sortKey]);

  const top = [...stocks].sort((a,b) => b._score - a._score).slice(0, 3);

  return (
    <div style={stripeStyles.root}>
      {/* Channel header */}
      <div style={{...stripeStyles.channelHero, background: `linear-gradient(180deg, ${tweaks.headerColor1} 0%, ${tweaks.headerColor2} 50%, ${tweaks.headerColor3} 100%)`}}>
        <div style={stripeStyles.channelHeroBg}>
          <ChartBackground
            opacity={tweaks.chartOpacity}
            candles={tweaks.candleCount}
            volatility={tweaks.chartVolatility}
            seed={tweaks.chartSeed}
            showGrid={tweaks.showGrid}
            showAxis={tweaks.showAxis}
            showMA={tweaks.showMA}
            showVolume={tweaks.showVolume}
          />
        </div>
        <div style={stripeStyles.channelHeroInner}>
          <div style={stripeStyles.channelLeft}>
            <div style={stripeStyles.channelAvatar}>
              <img src="pierre.jpeg" alt="Pierre" style={{width:"100%", height:"100%", objectFit:"cover", display:"block"}}/>
            </div>
            <div>
              <div style={stripeStyles.channelKicker}>{tweaks.channelName} · Quarterly Research</div>
              <h1 style={stripeStyles.channelTitle}>
                <span style={{color:"#0a2540"}}>The </span>
                <span style={stripeStyles.channelTitleAccent}>Trend-Aware</span>
                <span style={{color:"#0a2540"}}> Index</span>
              </h1>
              <div style={stripeStyles.channelTagline}>{tweaks.taglineText}</div>
            </div>
          </div>
          <div style={stripeStyles.channelRight}>
            <span style={stripeStyles.navBadge}>Q1 2026 · v2</span>
            <span style={stripeStyles.navMeta}>@TheDailyTraderPierre · Updated Apr 29</span>
          </div>
        </div>
        <div style={stripeStyles.channelTabs}>
          {[
            ["Home", "https://www.youtube.com/@TheDailyTraderPierre"],
            ["Index", null],
            ["Videos", "https://www.youtube.com/@TheDailyTraderPierre/videos"],
            ["Playlists", "https://www.youtube.com/@TheDailyTraderPierre/playlists"],
            ["Membership", "https://www.youtube.com/@TheDailyTraderPierre/join"],
            ["Store", "https://www.youtube.com/@TheDailyTraderPierre/store"]
          ].map(([t, url], i) => {
            const isActive = i === 1;
            const tabStyle = {...stripeStyles.channelTab, ...(isActive ? stripeStyles.channelTabActive : {})};
            return url
              ? <a key={t} href={url} target="_blank" rel="noopener noreferrer" style={{...tabStyle, textDecoration:"none", cursor:"pointer"}}>{t}</a>
              : <span key={t} style={tabStyle}>{t}</span>;
          })}
        </div>
      </div>

      {/* Hero */}
      <div style={stripeStyles.hero}>
        <div style={stripeStyles.heroLeft}>
          <div style={stripeStyles.kicker}>Quarterly framework · Episode 12</div>
          <h1 style={stripeStyles.h1}>
            {stocks.length} stocks.<br/>
            <span style={stripeStyles.h1Accent}>13 criteria.</span><br/>
            Follow the trend.
          </h1>
          <p style={stripeStyles.lede}>
            A growth-skewed scoring system applied to the megatrends defining 2026 capital flows — AI silicon, nuclear, quantum, defense autonomy. Weighted toward operating quality and confirmed price action, not narrative.
          </p>
          <div style={stripeStyles.heroCtas}>
            <a style={stripeStyles.btnPrimary} onClick={() => setShowFramework(true)}>View framework →</a>
            <a style={stripeStyles.btnSecondary} href="https://www.youtube.com/@TheDailyTraderPierre" target="_blank" rel="noopener noreferrer">YouTube channel →</a>
          </div>
        </div>
        <div style={stripeStyles.heroRight}>
          <div style={stripeStyles.heroStatRow}>
            <HStat label="High conviction" value={counts.high} accent="#0a875a" />
            <HStat label="Watchlist" value={counts.watch} accent="#0570de" />
          </div>
          <div style={stripeStyles.heroStatRow}>
            <HStat label="Monitor" value={counts.monitor} accent="#df6b1f" />
            <HStat label="Pass" value={counts.pass} accent="#697386" />
          </div>
          <div style={stripeStyles.heroAvg}>
            <div style={stripeStyles.heroAvgLabel}>Average score across {stocks.length}</div>
            <div style={stripeStyles.heroAvgValue}>
              {avg}
              <span style={stripeStyles.heroAvgOf}>/100</span>
            </div>
            <div style={stripeStyles.heroAvgBar}>
              <div style={{...stripeStyles.heroAvgFill, width: `${avg}%`}} />
            </div>
          </div>
        </div>
      </div>

      {/* Top picks */}
      <div style={stripeStyles.section}>
        <div style={stripeStyles.sectionHead}>
          <h2 style={stripeStyles.h2}>Top of the index</h2>
          <span style={stripeStyles.sectionMeta}>Highest scoring · all themes</span>
        </div>
        <div style={stripeStyles.topGrid}>
          {top.map((s, i) => (
            <TopCard key={s.ticker} stock={s} rank={i+1} onClick={() => setSelected(s)} />
          ))}
        </div>
      </div>

      {/* Holdings */}
      <div style={stripeStyles.section}>
        <div style={stripeStyles.sectionHead}>
          <h2 style={stripeStyles.h2}>All holdings</h2>
          <span style={stripeStyles.sectionMeta}>{filtered.length} of {counts.all}</span>
        </div>

        <div style={stripeStyles.controls}>
          <div style={stripeStyles.tabRow}>
            {[
              ["all","All",counts.all],
              ["high","High conviction",counts.high],
              ["watch","Watchlist",counts.watch],
              ["monitor","Monitor",counts.monitor],
              ["pass","Pass",counts.pass]
            ].map(([k,l,c]) => (
              <button
                key={k}
                onClick={() => setFilter(k)}
                style={{
                  ...stripeStyles.tab,
                  ...(filter===k ? stripeStyles.tabActive : {})
                }}
              >
                {l}
                <span style={{...stripeStyles.tabCount, ...(filter===k ? {background:"#000", color:"#fff"} : {})}}>{c}</span>
              </button>
            ))}
          </div>
          <div style={stripeStyles.sortGroup}>
            <span style={stripeStyles.sortLabel}>Sort</span>
            {[["score","Score"],["delta","Δ vs v1"],["ticker","Ticker"]].map(([k,l]) => (
              <button
                key={k}
                onClick={() => setSortKey(k)}
                style={{...stripeStyles.sortBtn, ...(sortKey===k ? stripeStyles.sortBtnActive : {})}}
              >{l}</button>
            ))}
          </div>
        </div>

        <div style={stripeStyles.tableHead}>
          <div style={{...stripeStyles.thStripe, width: 36}}>#</div>
          <div style={{...stripeStyles.thStripe, width: 100}}>Symbol</div>
          <div style={{...stripeStyles.thStripe, flex: 1, minWidth: 220}}>Company / Thesis</div>
          <div style={{...stripeStyles.thStripe, width: 110}}>Theme</div>
          <div style={{...stripeStyles.thStripe, width: 90, textAlign:"right"}}>Mkt cap</div>
          <div style={{...stripeStyles.thStripe, width: 80, textAlign:"right"}}>Score</div>
          <div style={{...stripeStyles.thStripe, width: 60}}>Rev 8Q</div>
          <div style={{...stripeStyles.thStripe, width: 60}}>Profit</div>
          <div style={{...stripeStyles.thStripe, width: 60}}>FCF</div>
          <div style={{...stripeStyles.thStripe, width: 60, textAlign:"right"}}>Δ</div>
          <div style={{...stripeStyles.thStripe, width: 130}}>Sizing</div>
          <div style={{...stripeStyles.thStripe, width: 130}}>Tier</div>
        </div>

        {filtered.map((s, i) => (
          <StripeRow key={s.ticker} stock={s} idx={i} onClick={() => setSelected(s)} />
        ))}
      </div>

      <TimingSection />

      <SubscribeSection />

      {selected && <StripeDrawer stock={selected} onClose={() => setSelected(null)} />}
      {showFramework && <FrameworkModal onClose={() => setShowFramework(false)} />}

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Channel branding">
            <window.TweakText label="Channel name" value={tweaks.channelName} onChange={v => setTweak("channelName", v)} />
            <window.TweakText label="Tagline" value={tweaks.taglineText} onChange={v => setTweak("taglineText", v)} />
          </window.TweakSection>
          <window.TweakSection title="Header colors">
            <window.TweakColor label="Top" value={tweaks.headerColor1} onChange={v => setTweak("headerColor1", v)} />
            <window.TweakColor label="Mid" value={tweaks.headerColor2} onChange={v => setTweak("headerColor2", v)} />
            <window.TweakColor label="Bottom" value={tweaks.headerColor3} onChange={v => setTweak("headerColor3", v)} />
          </window.TweakSection>
          <window.TweakSection title="Stock chart background">
            <window.TweakSlider label="Candle count" value={tweaks.candleCount} onChange={v => setTweak("candleCount", v)} min={20} max={300} step={5} />
            <window.TweakSlider label="Volatility" value={tweaks.chartVolatility} onChange={v => setTweak("chartVolatility", v)} min={0.2} max={3} step={0.1} />
            <window.TweakSlider label="Opacity" value={tweaks.chartOpacity} onChange={v => setTweak("chartOpacity", v)} min={0.1} max={1} step={0.05} />
            <window.TweakNumber label="Random seed" value={tweaks.chartSeed} onChange={v => setTweak("chartSeed", v)} min={1} max={9999} step={1} />
            <window.TweakToggle label="Show gridlines" value={tweaks.showGrid} onChange={v => setTweak("showGrid", v)} />
            <window.TweakToggle label="Show price axis" value={tweaks.showAxis} onChange={v => setTweak("showAxis", v)} />
            <window.TweakToggle label="Show moving average" value={tweaks.showMA} onChange={v => setTweak("showMA", v)} />
            <window.TweakToggle label="Show volume bars" value={tweaks.showVolume} onChange={v => setTweak("showVolume", v)} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}

      <div style={stripeStyles.footer}>
        <div style={stripeStyles.footerInner}>
          <div>
            <div style={stripeStyles.footerKicker}>About this dashboard</div>
            <div style={stripeStyles.footerText}>
              A fundamental filter, not a buy signal. A high score narrows the universe; technical analysis times the entry. Sizing is a starting point, not a recommendation.
            </div>
          </div>
          <div style={stripeStyles.footerCmd}>
            <code style={stripeStyles.code}>$ claude refresh fundamentals --quarter Q2-2026</code>
          </div>
        </div>
        <div style={{
          marginTop: 32, paddingTop: 24,
          borderTop: "1px solid #e3e8ee",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 12,
          fontSize: 12, color: "#697386"
        }}>
          <span><strong style={{color:"#0a2540"}}>Educational content — not financial advice.</strong> Always do your own research.</span>
          <span style={{display: "flex", gap: 16}}>
            <a href="https://trendawareinvestor.com" style={{color:"#3a6d92", textDecoration:"none"}}>trendawareinvestor.com</a>
            <a href="https://trendawareinvestor.com/privacy" style={{color:"#697386", textDecoration:"none"}}>Privacy</a>
            <a href="https://trendawareinvestor.com/terms" style={{color:"#697386", textDecoration:"none"}}>Terms</a>
          </span>
        </div>
      </div>
    </div>
  );
}

function HStat({label, value, accent}) {
  return (
    <div style={stripeStyles.hstat}>
      <div style={stripeStyles.hstatLabel}>{label}</div>
      <div style={{...stripeStyles.hstatValue, color: accent}}>{value}</div>
    </div>
  );
}

function TopCard({stock, rank, onClick}) {
  const tierAccent = {
    high: { bg:"#ecfdf5", text:"#0a875a", chip:"#0a875a" },
    watch: { bg:"#eff6ff", text:"#0570de", chip:"#0570de" },
    monitor: { bg:"#fff7ed", text:"#df6b1f", chip:"#df6b1f" },
    pass: { bg:"#f6f8fa", text:"#697386", chip:"#697386" }
  }[stock._tier];

  return (
    <div style={stripeStyles.topCard} onClick={onClick}>
      <div style={stripeStyles.topCardHead}>
        <div style={stripeStyles.topCardRank}>№ {String(rank).padStart(2,"0")}</div>
        <div style={{...stripeStyles.topCardChip, background: tierAccent.bg, color: tierAccent.chip}}>
          {window.UTILS.tierLabel(stock._tier)}
        </div>
      </div>
      <div style={stripeStyles.topCardBody}>
        <div style={stripeStyles.topCardTicker}>{stock.ticker}</div>
        <div style={stripeStyles.topCardName}>{stock.name}</div>
        <div style={stripeStyles.topCardThesis}>{stock.thesis}</div>
      </div>
      <div style={stripeStyles.topCardScore}>
        <div style={stripeStyles.topCardScoreNum}>{stock._score}</div>
        <div style={stripeStyles.topCardScoreMeta}>
          <div style={stripeStyles.topCardScoreOf}>out of 100</div>
          <div style={{
            ...stripeStyles.topCardDelta,
            color: stock._delta > 0 ? "#0a875a" : stock._delta < 0 ? "#cd3d64" : "#697386"
          }}>
            {stock._delta > 0 ? "↑" : stock._delta < 0 ? "↓" : "—"} {stock._delta > 0 ? "+" : ""}{stock._delta} vs v1
          </div>
        </div>
      </div>
      {window.SPARKS[stock.ticker] && (
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:12, padding:"16px 0", borderTop:"1px solid #f4f6f8", borderBottom:"1px solid #f4f6f8", marginBottom:14}}>
          <LabeledSpark title="Revenue" values={window.SPARKS[stock.ticker].revenue} color="#3a6d92" w={90} h={28} />
          <LabeledSpark title="Profit" values={window.SPARKS[stock.ticker].profit} kind="bars" w={90} h={28} />
          <LabeledSpark title="FCF" values={window.SPARKS[stock.ticker].fcf} kind="bars" w={90} h={28} />
        </div>
      )}
      <div style={stripeStyles.topCardFooter}>
        <span style={stripeStyles.topCardTheme}>{window.UTILS.themeName(stock.theme)}</span>
        <span style={stripeStyles.topCardArrow}>View details →</span>
      </div>
    </div>
  );
}

function StripeRow({stock, idx, onClick}) {
  const tierColor = { high:"#0a875a", watch:"#0570de", monitor:"#df6b1f", pass:"#697386" }[stock._tier];
  const tierBg = { high:"#ecfdf5", watch:"#eff6ff", monitor:"#fff7ed", pass:"#f6f8fa" }[stock._tier];
  const sizingColor = { full:"#0a875a", build:"#0570de", nibble:"#df6b1f", lottery:"#7c3aed", dont:"#697386" }[stock.sizing.kind];

  return (
    <div
      style={stripeStyles.row}
      onClick={onClick}
      onMouseOver={e => e.currentTarget.style.background = "#f6f8fa"}
      onMouseOut={e => e.currentTarget.style.background = "#ffffff"}
    >
      <div style={{...stripeStyles.rowTd, width: 36, color:"#8898aa", fontFamily:"'JetBrains Mono', monospace", fontSize: 12}}>{String(idx+1).padStart(2,"0")}</div>
      <div style={{...stripeStyles.rowTd, width: 100}}>
        <span style={stripeStyles.rowTicker}>{stock.ticker}</span>
      </div>
      <div style={{...stripeStyles.rowTd, flex: 1, minWidth: 220, paddingRight: 8}}>
        <div style={stripeStyles.rowName}>{stock.name}</div>
        <div style={stripeStyles.rowThesis}>{stock.thesis}</div>
      </div>
      <div style={{...stripeStyles.rowTd, width: 110, fontSize: 12, color:"#425466"}}>{window.UTILS.themeName(stock.theme)}</div>
      <div style={{...stripeStyles.rowTd, width: 90, textAlign:"right", fontFamily:"'JetBrains Mono', monospace", fontSize: 12, color:"#425466"}}>{stock.mktCap.replace(/~/g,"")}</div>
      <div style={{...stripeStyles.rowTd, width: 80, textAlign:"right"}}>
        <span style={stripeStyles.rowScore}>{stock._score}</span>
      </div>
      <div style={{...stripeStyles.rowTd, width: 60}}>
        {window.SPARKS[stock.ticker] && <SparkLine values={window.SPARKS[stock.ticker].revenue} w={54} h={20} color="#3a6d92" />}
      </div>
      <div style={{...stripeStyles.rowTd, width: 60}}>
        {window.SPARKS[stock.ticker] && <SparkBars values={window.SPARKS[stock.ticker].profit} w={54} h={20} />}
      </div>
      <div style={{...stripeStyles.rowTd, width: 60}}>
        {window.SPARKS[stock.ticker] && <SparkBars values={window.SPARKS[stock.ticker].fcf} w={54} h={20} />}
      </div>
      <div style={{
        ...stripeStyles.rowTd, width: 60, textAlign:"right",
        fontFamily:"'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600,
        color: stock._delta > 0 ? "#0a875a" : stock._delta < 0 ? "#cd3d64" : "#8898aa"
      }}>
        {stock._delta > 0 ? "+" : ""}{stock._delta}
      </div>
      <div style={{...stripeStyles.rowTd, width: 130}}>
        <div style={{fontSize: 12, fontWeight: 600, color: sizingColor}}>{window.UTILS.sizingLabel(stock.sizing.kind)}</div>
        <div style={{fontSize: 11, color:"#8898aa", fontFamily:"'JetBrains Mono', monospace"}}>{stock.sizing.target}</div>
      </div>
      <div style={{...stripeStyles.rowTd, width: 130}}>
        <span style={{...stripeStyles.tierChip, background: tierBg, color: tierColor}}>
          {window.UTILS.tierLabel(stock._tier)}
        </span>
      </div>
    </div>
  );
}

function StripeDrawer({stock, onClose}) {
  const tierColor = { high:"#0a875a", watch:"#0570de", monitor:"#df6b1f", pass:"#697386" }[stock._tier];
  const tierBg = { high:"#ecfdf5", watch:"#eff6ff", monitor:"#fff7ed", pass:"#f6f8fa" }[stock._tier];

  return (
    <div style={stripeStyles.drawerBack} onClick={onClose}>
      <div style={stripeStyles.drawer} onClick={e => e.stopPropagation()}>
        <button onClick={onClose} style={stripeStyles.drawerClose}>×</button>
        <div style={stripeStyles.drawerHero}>
          <div style={{...stripeStyles.drawerKickerChip, background: tierBg, color: tierColor}}>
            {window.UTILS.tierLabel(stock._tier)} · {window.UTILS.themeName(stock.theme)}
          </div>
          <div style={stripeStyles.drawerTicker}>{stock.ticker}</div>
          <div style={stripeStyles.drawerName}>{stock.name}</div>
          <div style={stripeStyles.drawerThesis}>{stock.thesis}</div>
        </div>

        <div style={stripeStyles.drawerScoreCard}>
          <div>
            <div style={stripeStyles.drawerScoreLabel}>Total score</div>
            <div style={{...stripeStyles.drawerScoreNum, color: tierColor}}>{stock._score}<span style={stripeStyles.drawerScoreOf}>/100</span></div>
            <div style={{
              fontSize: 13, fontWeight: 600,
              color: stock._delta > 0 ? "#0a875a" : stock._delta < 0 ? "#cd3d64" : "#697386"
            }}>
              {stock._delta >= 0 ? "↑" : "↓"} {Math.abs(stock._delta)} vs Q1 v1 · was {stock.prevScore}
            </div>
          </div>
          <div style={stripeStyles.drawerSizing}>
            <div style={stripeStyles.drawerScoreLabel}>Sizing</div>
            <div style={stripeStyles.drawerSizingKind}>{window.UTILS.sizingLabel(stock.sizing.kind)}</div>
            <div style={stripeStyles.drawerSizingTarget}>{stock.sizing.target} of portfolio</div>
            <div style={stripeStyles.drawerSizingRationale}>{stock.sizing.rationale}</div>
          </div>
        </div>

        <div style={stripeStyles.drawerGrid}>
          <DF label="Revenue growth" v={stock.revGrowth} />
          <DF label="Profitability" v={stock.profitability} />
          <DF label="Catalyst" v={stock.catalyst} />
          <DF label="Technical" v={stock.technical} />
          <DF label="CEO" v={`${stock.ceo} — ${stock.ceoTenure}`} />
          <DF label="Earnings" v={stock.earnings} />
          <DF label="Market cap" v={stock.mktCap} />
        </div>

        {window.SPARKS[stock.ticker] && (
          <div style={stripeStyles.drawerSection}>
            <div style={stripeStyles.drawerH3}>8-quarter trends</div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"24px 32px"}}>
              <LabeledSpark title="Revenue ($M)" values={window.SPARKS[stock.ticker].revenue} color="#3a6d92" w={240} h={48} />
              <LabeledSpark title="Operating profit ($M)" values={window.SPARKS[stock.ticker].profit} kind="bars" w={240} h={48} />
              <LabeledSpark title="Free cash flow ($M)" values={window.SPARKS[stock.ticker].fcf} kind="bars" w={240} h={48} />
              <LabeledSpark title="Gross margin (%)" values={window.SPARKS[stock.ticker].gm} color="#0a875a" w={240} h={48} suffix="%" />
            </div>
            <div style={{display:"flex", justifyContent:"space-between", marginTop:10, fontSize:10, color:"#8898aa", fontFamily:"'JetBrains Mono', monospace", letterSpacing:"0.04em"}}>
              {window.QUARTERS.map(q => <span key={q}>{q}</span>)}
            </div>
          </div>
        )}

        <div style={stripeStyles.drawerSection}>
          <div style={stripeStyles.drawerH3}>Score breakdown · 13 criteria</div>
          {window.CRITERIA.map(([k, label, max]) => {
            const v = stock.scores[k] || 0;
            const pct = (v / max) * 100;
            return (
              <div key={k} style={stripeStyles.critRowS}>
                <div style={stripeStyles.critLabelS}>{label}</div>
                <div style={stripeStyles.critBarS}>
                  <div style={{...stripeStyles.critBarFillS, width: `${pct}%`, background: v === 0 ? "#e3e8ee" : tierColor}} />
                </div>
                <div style={stripeStyles.critValS}>
                  <span style={{color: v === 0 ? "#8898aa" : "#0a2540", fontWeight: 600}}>{v}</span>
                  <span style={{color:"#8898aa"}}>/{max}</span>
                </div>
              </div>
            );
          })}
        </div>

        {stock.note && (
          <div style={stripeStyles.drawerNote}>
            <div style={stripeStyles.drawerNoteLabel}>Analyst note</div>
            <div style={stripeStyles.drawerNoteText}>{stock.note}</div>
          </div>
        )}
      </div>
    </div>
  );
}

function DF({label, v}) {
  return (
    <div>
      <div style={stripeStyles.dfLabel}>{label}</div>
      <div style={stripeStyles.dfVal}>{v}</div>
    </div>
  );
}

// ============ Framework Modal ============
function FrameworkModal({onClose}) {
  const categories = [
    { name: "Megatrend", weight: 10, color: "#3a6d92", criteria: [
      { label: "Secular tailwind", max: 10, desc: "Does this company ride a megatrend with 5+ years of runway? AI silicon, nuclear, quantum, defense autonomy, GLP-1. Pure-play beneficiaries score 10." }
    ]},
    { name: "Growth Engine", weight: 50, color: "#0a875a", criteria: [
      { label: "Market cap < $10B", max: 10, desc: "Binary. The math of 10x gets brutal above $10B. Borderline names ($10–15B with strong setup) score 5." },
      { label: "Revenue growth accelerating", max: 10, desc: "Last 4 quarters of YoY growth — is the rate going up? 25% → 35% → 45% scores 10. Steady 20%+ scores 5." },
      { label: "Gross margin trend", max: 10, desc: "Compare current to 4 quarters ago. Compressing = 0 (red flag). Stable = 5. Expanding = 10 (pricing power signal)." },
      { label: "Operating leverage / FCF", max: 10, desc: "Does revenue scale faster than operating costs? Clear inflection (Symbotic $18M → $67M EBITDA, Credo net income +764%) = 10." },
      { label: "Path to profitability", max: 5, desc: "The valuation re-rate triggers when losses flip to profits. SoFi didn't rip until that line crossed." },
      { label: "Dilution discipline (SBC)", max: 5, desc: "Stock-based comp as % of revenue declining or stable. Real growth shouldn't be eaten by dilution." }
    ]},
    { name: "Leadership", weight: 10, color: "#0570de", criteria: [
      { label: "Founder / long-tenure CEO", max: 5, desc: "Karp, Lisa Su, Dudum, Noto, DeMarco — long-tenured operators with skin in the game." },
      { label: "No major insider selling", max: 5, desc: "Routine 10b5-1 selling is fine. Large discretionary selling at lows is a red flag (Oklo insiders sold $174M)." }
    ]},
    { name: "Setup & Catalyst", weight: 25, color: "#df6b1f", criteria: [
      { label: "Hated / contrarian setup", max: 10, desc: "Consensus darling = 0. High short interest, bearish coverage, 50%+ drawdown = 10. Contrarian setups create the multiple expansion." },
      { label: "6+ month base", max: 5, desc: "Long sideways consolidation = supply being absorbed. The longer the base, the bigger the breakout." },
      { label: "Near-term catalyst", max: 10, desc: "Specific dated event likely to re-rate the stock — regulatory approval, contract award, earnings inflection, product launch." }
    ]},
    { name: "Technical", weight: 5, color: "#cd3d64", criteria: [
      { label: "Stage-2 / strong RS", max: 5, desc: "Building base + strong RS, breaking out, or flagging on accumulation. Light weight — your TA edge is the real timing layer." }
    ]}
  ];

  const tiers = [
    { name: "HIGH CONVICTION", range: "85–100", action: "Build to full position 4–6%", color: "#0a875a", bg: "#ecfdf5" },
    { name: "WATCHLIST", range: "70–84", action: "Build to 2–4% over 3 tranches", color: "#0570de", bg: "#eff6ff" },
    { name: "MONITOR", range: "55–69", action: "Nibble 0–2% only on technical confirmation", color: "#df6b1f", bg: "#fff7ed" },
    { name: "PASS", range: "<55", action: "0% — or 0–1% lottery sleeve only", color: "#697386", bg: "#f6f8fa" }
  ];

  return (
    <div style={fwStyles.back} onClick={onClose}>
      <div style={fwStyles.modal} onClick={e => e.stopPropagation()}>
        <button onClick={onClose} style={fwStyles.close}>×</button>

        <div style={fwStyles.hero}>
          <div style={fwStyles.heroKicker}>The framework</div>
          <h2 style={fwStyles.heroTitle}>How we score the stocks</h2>
          <p style={fwStyles.heroLede}>
            13 criteria, 100 points, growth-skewed. Inspired by Tom Nash's lens on operating quality. The framework rewards companies <em>actually executing</em>, not just well-positioned narrative trades.
          </p>
        </div>

        <div style={fwStyles.weightRow}>
          {categories.map(c => (
            <div key={c.name} style={{...fwStyles.weightCell, borderColor: c.color}}>
              <div style={{...fwStyles.weightNum, color: c.color}}>{c.weight}</div>
              <div style={fwStyles.weightLabel}>{c.name}</div>
            </div>
          ))}
        </div>

        {categories.map(cat => (
          <div key={cat.name} style={fwStyles.section}>
            <div style={fwStyles.sectionHead}>
              <div style={{...fwStyles.sectionPill, background: cat.color + "15", color: cat.color}}>
                {cat.name} · {cat.weight} pts
              </div>
            </div>
            {cat.criteria.map((c, i) => (
              <div key={i} style={fwStyles.crit}>
                <div style={fwStyles.critTop}>
                  <div style={fwStyles.critLabel}>{c.label}</div>
                  <div style={{...fwStyles.critMax, color: cat.color}}>up to {c.max}</div>
                </div>
                <div style={fwStyles.critDesc}>{c.desc}</div>
              </div>
            ))}
          </div>
        ))}

        <div style={fwStyles.section}>
          <div style={fwStyles.sectionHead}>
            <div style={{...fwStyles.sectionPill, background: "#0a254015", color: "#0a2540"}}>Tier bands &amp; sizing</div>
          </div>
          {tiers.map(t => (
            <div key={t.name} style={{...fwStyles.tierRow, background: t.bg}}>
              <div style={{...fwStyles.tierName, color: t.color}}>{t.name}</div>
              <div style={fwStyles.tierRange}>{t.range}</div>
              <div style={fwStyles.tierAction}>{t.action}</div>
            </div>
          ))}
        </div>

        <div style={fwStyles.section}>
          <div style={fwStyles.sectionHead}>
            <div style={{...fwStyles.sectionPill, background: "#0a254015", color: "#0a2540"}}>Sizing modifiers &amp; hard caps</div>
          </div>
          <ul style={fwStyles.modList}>
            <li><strong>Pre-revenue / binary catalyst</strong> → halve the base size (OKLO, SMR, NNE)</li>
            <li><strong>Already extended</strong> (&gt;40% above 200d MA) → halve the base size, wait for pullback</li>
            <li><strong>Customer concentration / accounting risk</strong> → cap at 75% of base (CRDO, SMCI)</li>
            <li><strong>Hard cap</strong> — no single position &gt; 6% of total portfolio</li>
            <li><strong>Hard cap</strong> — no theme &gt; 25% of growth allocation</li>
            <li><strong>Hard cap</strong> — total growth allocation ≤ ~50% of total portfolio</li>
          </ul>
        </div>

        <div style={fwStyles.section}>
          <div style={fwStyles.sectionHead}>
            <div style={{...fwStyles.sectionPill, background: "#0a254015", color: "#0a2540"}}>Scaling in &amp; exits</div>
          </div>
          <ul style={fwStyles.modList}>
            <li><strong>Build new positions in 3 tranches</strong> — 1/3 on technical breakout, 1/3 on first earnings confirmation, 1/3 on second earnings or 50% retracement to support</li>
            <li><strong>Score drops 15+ points</strong> → trim 25–50%</li>
            <li><strong>Score drops below 55</strong> → exit fully</li>
            <li><strong>Loses 50-day MA on big volume</strong> → trim 50%</li>
            <li><strong>+100% gain</strong> → take partial profits, free shares</li>
          </ul>
        </div>

        <div style={fwStyles.philosophy}>
          <div style={fwStyles.philosophyKicker}>Philosophy</div>
          <p style={fwStyles.philosophyText}>
            This is a <strong>fundamental filter, not a buy signal</strong>. A high score narrows the universe — technical analysis times the entry. Position sizing and exit discipline determine the realized return.
          </p>
          <p style={fwStyles.philosophyText}>
            The framework will produce false positives — stocks that score well and still go nowhere. The point is to <em>narrow the field</em>, not pick winners with certainty. It needs recalibration every 12–18 months as megatrends shift.
          </p>
        </div>
      </div>
    </div>
  );
}

// ============ Timing Section (selection vs technical analysis) ============
function TimingSection() {
  return (
    <div style={timingStyles.section}>
      <div style={timingStyles.inner}>
        <div style={timingStyles.left}>
          <div style={timingStyles.kicker}>Selection vs timing</div>
          <h2 style={timingStyles.title}>
            Selection is <span style={timingStyles.titleAccent}>half</span> the game.
          </h2>
          <p style={timingStyles.lede}>
            A high score tells you what to watch. Technical analysis tells you when to act.
          </p>
          <p style={timingStyles.body}>
            This index is a fundamental filter. It narrows thousands of listed stocks down to a tight watchlist where the operating quality, the megatrend alignment, and the contrarian setup all point the same direction. That's the <em>what</em>.
          </p>
          <p style={timingStyles.body}>
            What it can't do is tell you <em>when</em>. A stock can score 90 and still drop 30% before it breaks out — because the chart is extended, or the base hasn't completed, or the relative strength is lying. The timing layer is its own discipline.
          </p>
          <p style={timingStyles.body}>
            That's what the channel covers each week — where each name sits in its cycle, which patterns are forming, where the entry triggers are, and when to take risk off. Selection narrows the universe. Technical analysis finds the trade.
          </p>
          <a
            href="https://www.youtube.com/@TheDailyTraderPierre"
            target="_blank"
            rel="noopener noreferrer"
            style={timingStyles.cta}
          >
            Watch the latest analysis →
          </a>
        </div>
        <div style={timingStyles.right}>
          <div style={timingStyles.chartHeader}>
            <div style={timingStyles.chartTicker}>PLTR</div>
            <div style={timingStyles.chartName}>Palantir Technologies · 2020–2026</div>
          </div>
          <svg viewBox="0 0 440 320" preserveAspectRatio="xMidYMid meet" style={timingStyles.chart}>
            <defs>
              <linearGradient id="pltr-fill" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#3a6d92" stopOpacity="0.28" />
                <stop offset="1" stopColor="#3a6d92" stopOpacity="0" />
              </linearGradient>
            </defs>

            {/* Grid lines */}
            <line x1="40" y1="40"  x2="420" y2="40"  stroke="#d8d6cc" strokeWidth="0.5" strokeDasharray="2 4" />
            <line x1="40" y1="160" x2="420" y2="160" stroke="#d8d6cc" strokeWidth="0.5" strokeDasharray="2 4" />
            <line x1="40" y1="280" x2="420" y2="280" stroke="#c4c2b8" strokeWidth="1" />

            {/* Y-axis labels */}
            <text x="36" y="44" textAnchor="end" fontSize="10" fill="#8898aa" fontFamily="'JetBrains Mono', monospace">$200</text>
            <text x="36" y="164" textAnchor="end" fontSize="10" fill="#8898aa" fontFamily="'JetBrains Mono', monospace">$100</text>
            <text x="36" y="284" textAnchor="end" fontSize="10" fill="#8898aa" fontFamily="'JetBrains Mono', monospace">$0</text>

            {/* "Dead money" zone background — 2 years from end of 2021 to early 2024 */}
            <rect x="125" y="265" width="147" height="15" fill="#0a2540" opacity="0.04" />

            {/* Price area fill */}
            <path
              d="M 40,269 L 63,231 L 85,253 L 125,260 L 159,270 L 193,273 L 216,271 L 238,264 L 261,261 L 272,253 L 307,247 L 312,241 L 329,193 L 346,171 L 374,117 L 391,54 L 420,124 L 420,280 L 40,280 Z"
              fill="url(#pltr-fill)"
            />

            {/* Price line */}
            <path
              d="M 40,269 L 63,231 L 85,253 L 125,260 L 159,270 L 193,273 L 216,271 L 238,264 L 261,261 L 272,253 L 307,247 L 312,241 L 329,193 L 346,171 L 374,117 L 391,54 L 420,124"
              stroke="#3a6d92"
              strokeWidth="2"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
            />

            {/* "Dead money" label */}
            <text x="198" y="252" textAnchor="middle" fontSize="9" fontWeight="700" fill="#697386" letterSpacing="0.1em">2 YEARS · DEAD MONEY</text>

            {/* "Fundamentals turn" callout — AIP launched April 2023 */}
            <line x1="216" y1="271" x2="216" y2="148" stroke="#df6b1f" strokeWidth="1" strokeDasharray="3 3" />
            <circle cx="216" cy="271" r="3" fill="#df6b1f" />
            <text x="216" y="138" textAnchor="middle" fontSize="9.5" fontWeight="700" fill="#df6b1f" letterSpacing="0.04em">APR 2023 · AIP LAUNCH</text>
            <text x="216" y="150" textAnchor="middle" fontSize="9" fill="#697386">fundamentals turn</text>

            {/* "Breakout" callout — Feb 2024 above $20 on volume */}
            <line x1="272" y1="253" x2="272" y2="194" stroke="#0a875a" strokeWidth="1" strokeDasharray="3 3" />
            <circle cx="272" cy="253" r="4" fill="#0a875a" stroke="#fff" strokeWidth="2" />
            <text x="272" y="184" textAnchor="middle" fontSize="9.5" fontWeight="700" fill="#0a875a" letterSpacing="0.04em">FEB 2024 · BREAKOUT</text>
            <text x="272" y="196" textAnchor="middle" fontSize="9" fill="#697386">chart confirms</text>

            {/* "Meme pump" tiny label near Jan 2021 spike */}
            <text x="63" y="222" textAnchor="middle" fontSize="8" fontWeight="600" fill="#8898aa" letterSpacing="0.06em">MEME PUMP · CRASH</text>

            {/* Top-right return callout */}
            <text x="416" y="22" textAnchor="end" fontSize="14" fontWeight="800" fill="#0a2540">+30x</text>
            <text x="416" y="34" textAnchor="end" fontSize="10" fill="#697386">from 2022 lows</text>

            {/* X-axis labels */}
            <text x="40"  y="302" textAnchor="middle" fontSize="10" fill="#8898aa" fontFamily="'JetBrains Mono', monospace">2020</text>
            <text x="131" y="302" textAnchor="middle" fontSize="10" fill="#8898aa" fontFamily="'JetBrains Mono', monospace">2022</text>
            <text x="267" y="302" textAnchor="middle" fontSize="10" fill="#8898aa" fontFamily="'JetBrains Mono', monospace">2024</text>
            <text x="403" y="302" textAnchor="middle" fontSize="10" fill="#8898aa" fontFamily="'JetBrains Mono', monospace">2026</text>
          </svg>
          <div style={timingStyles.chartCaption}>
            <strong>The 10-month gap is the point.</strong> AIP launched in April 2023 — first real commercial AI product, demand visible in Q2 earnings, GAAP profitability hit. A fundamental filter would have flagged PLTR as a buy. The stock didn't actually break out until February 2024, when it cleared $20 on volume after 8 months of basing. Buying on fundamentals alone meant nearly a year of dead money. The technical layer is what tells you the move has started.
          </div>
        </div>
      </div>
    </div>
  );
}

const timingStyles = {
  section: {
    background: "#f6f5f0",
    padding: "80px 40px",
    borderTop: "1px solid #e3e8ee",
  },
  inner: {
    maxWidth: 1100,
    margin: "0 auto",
    display: "grid",
    gridTemplateColumns: "1.4fr 1fr",
    gap: 80,
    alignItems: "start",
  },
  left: {},
  kicker: {
    display: "inline-block",
    fontSize: 11, fontWeight: 700, color: "#3a6d92",
    background: "#e8eff6",
    padding: "5px 12px", borderRadius: 4,
    letterSpacing: "0.08em", textTransform: "uppercase",
    marginBottom: 24,
  },
  title: {
    margin: 0,
    fontSize: 52,
    fontWeight: 800,
    letterSpacing: "-0.03em",
    lineHeight: 1.05,
    color: "#0a2540",
  },
  titleAccent: {
    color: "#3a6d92",
    fontStyle: "italic",
  },
  lede: {
    fontSize: 20,
    color: "#0a2540",
    fontWeight: 600,
    lineHeight: 1.4,
    marginTop: 24,
    marginBottom: 28,
    maxWidth: 540,
    letterSpacing: "-0.01em",
  },
  body: {
    fontSize: 16,
    color: "#425466",
    lineHeight: 1.65,
    marginTop: 0,
    marginBottom: 16,
    maxWidth: 560,
  },
  cta: {
    display: "inline-block",
    background: "#0a2540",
    color: "#fff",
    padding: "14px 24px",
    borderRadius: 8,
    fontSize: 15,
    fontWeight: 600,
    textDecoration: "none",
    marginTop: 16,
    transition: "transform 0.15s, background 0.15s",
  },
  right: {
    paddingTop: 8,
    paddingLeft: 32,
    borderLeft: "1px solid #d8d6cc",
  },
  chartHeader: {
    display: "flex",
    alignItems: "baseline",
    gap: 12,
    marginBottom: 16,
    paddingBottom: 14,
    borderBottom: "1px solid #d8d6cc",
  },
  chartTicker: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 22,
    fontWeight: 800,
    color: "#0a2540",
    letterSpacing: "-0.02em",
  },
  chartName: {
    fontSize: 12,
    color: "#697386",
    fontWeight: 500,
  },
  chart: {
    width: "100%",
    height: "auto",
    display: "block",
    maxWidth: "100%",
  },
  chartCaption: {
    fontSize: 13,
    color: "#425466",
    lineHeight: 1.6,
    marginTop: 18,
    paddingTop: 18,
    borderTop: "1px solid #d8d6cc",
  },
};

// ============ Subscribe Section (Beehiiv embed) ============
const BEEHIIV_FORM_ID = "b2126e4a-fe48-4ce5-9112-90e8ef01b015";

function BeehiivEmbed() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://subscribe-forms.beehiiv.com/v3/loader.js";
    script.setAttribute("data-beehiiv-form", BEEHIIV_FORM_ID);
    ref.current.appendChild(script);
    return () => { if (ref.current) ref.current.innerHTML = ""; };
  }, []);
  return <div ref={ref} style={{ minHeight: 80, width: "100%" }} />;
}

function SubscribeSection() {
  return (
    <div style={subStyles.section}>
      <div style={subStyles.inner}>
        <div style={subStyles.left}>
          <div style={subStyles.kicker}>The free briefing</div>
          <h3 style={subStyles.title}>Every catalyst on the watchlist. The morning after.</h3>
          <p style={subStyles.lede}>
            Daily catalyst monitoring + event-driven score alerts + quarterly deep dives. Sent when the dashboard moves — sometimes daily during earnings season, sometimes weeks of silence. Free.
          </p>
          <div style={subStyles.tinyMeta}>No fluff. No daily upsells. Unsubscribe anytime.</div>
        </div>
        <div style={subStyles.form}>
          <BeehiivEmbed />
        </div>
      </div>
    </div>
  );
}

const subStyles = {
  section: {
    background: "#0a2540",
    color: "#fff",
    padding: "56px 40px",
    borderTop: "1px solid #e3e8ee",
  },
  inner: {
    maxWidth: 1100,
    margin: "0 auto",
    display: "grid",
    gridTemplateColumns: "1.2fr 1fr",
    gap: 64,
    alignItems: "start",
  },
  left: {},
  kicker: {
    display: "inline-block",
    fontSize: 11, fontWeight: 700, color: "#b1c1d6",
    background: "rgba(255,255,255,0.08)",
    padding: "5px 12px", borderRadius: 4,
    letterSpacing: "0.08em", textTransform: "uppercase",
    marginBottom: 16,
  },
  title: {
    margin: 0, fontSize: 32, fontWeight: 800,
    letterSpacing: "-0.02em", lineHeight: 1.1,
  },
  lede: {
    fontSize: 15, color: "#a3acb9", lineHeight: 1.6,
    marginTop: 14, marginBottom: 14, maxWidth: 480,
  },
  tinyMeta: {
    fontSize: 12, color: "#7c8895",
    fontFamily: "'JetBrains Mono', monospace",
  },
  form: {
    display: "flex",
    flexDirection: "column",
    gap: 10,
    maxWidth: 380,
    width: "100%",
  },
  input: {
    background: "#fff",
    color: "#0a2540",
    border: "1px solid transparent",
    borderRadius: 8,
    padding: "14px 16px",
    fontSize: 15,
    fontFamily: "inherit",
    outline: "none",
    transition: "border-color 0.15s",
  },
  btn: {
    background: "#5b8db8",
    color: "#fff",
    border: "none",
    borderRadius: 8,
    padding: "14px 18px",
    fontSize: 15,
    fontWeight: 600,
    cursor: "pointer",
    fontFamily: "inherit",
    transition: "background 0.15s",
  },
  btnDisabled: {
    background: "#3a6d92",
    cursor: "default",
    opacity: 0.7,
  },
  success: {
    fontSize: 13,
    color: "#7ed957",
    marginTop: 4,
    fontWeight: 500,
  },
  errorMsg: {
    fontSize: 13,
    color: "#ff8585",
    marginTop: 4,
    fontWeight: 500,
  },
};

const fwStyles = {
  back: {
    position: "fixed", inset: 0, background: "rgba(10,37,64,0.55)",
    backdropFilter: "blur(6px)", zIndex: 200,
    display: "flex", justifyContent: "center", alignItems: "flex-start",
    padding: "40px 20px", overflowY: "auto",
  },
  modal: {
    width: "min(820px, 100%)",
    background: "#fff",
    borderRadius: 16,
    padding: "40px 48px 56px",
    position: "relative",
    boxShadow: "0 24px 80px rgba(10,37,64,0.25)",
  },
  close: {
    position: "absolute", top: 20, right: 20,
    width: 36, height: 36, borderRadius: 999,
    background: "#f4f6f8", border: "none", color: "#0a2540",
    fontSize: 22, cursor: "pointer", lineHeight: 1, fontWeight: 600,
  },
  hero: { paddingBottom: 28, borderBottom: "1px solid #e3e8ee", marginBottom: 28 },
  heroKicker: {
    display: "inline-block",
    fontSize: 11, fontWeight: 700, color: "#3a6d92",
    background: "#e8eff6", padding: "5px 12px", borderRadius: 4,
    letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16,
  },
  heroTitle: { margin: 0, fontSize: 38, fontWeight: 800, color: "#0a2540", letterSpacing: "-0.025em", lineHeight: 1.1 },
  heroLede: { fontSize: 16, color: "#425466", lineHeight: 1.6, marginTop: 16, marginBottom: 0, maxWidth: 640 },

  weightRow: {
    display: "grid",
    gridTemplateColumns: "repeat(5, 1fr)",
    gap: 8,
    marginBottom: 32,
  },
  weightCell: {
    border: "1px solid #e3e8ee",
    borderTop: "3px solid",
    borderRadius: "0 0 8px 8px",
    padding: "16px 12px",
    textAlign: "center",
  },
  weightNum: { fontSize: 32, fontWeight: 800, lineHeight: 1, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" },
  weightLabel: { fontSize: 11, color: "#697386", marginTop: 6, fontWeight: 600 },

  section: { marginBottom: 28 },
  sectionHead: { marginBottom: 14 },
  sectionPill: {
    display: "inline-block",
    fontSize: 11, fontWeight: 700, padding: "6px 12px",
    borderRadius: 999, letterSpacing: "0.04em", textTransform: "uppercase",
  },
  crit: {
    padding: "14px 0",
    borderBottom: "1px solid #f4f6f8",
  },
  critTop: { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 },
  critLabel: { fontSize: 14, fontWeight: 700, color: "#0a2540" },
  critMax: { fontSize: 12, fontWeight: 600, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.02em" },
  critDesc: { fontSize: 13, color: "#425466", lineHeight: 1.55 },

  tierRow: {
    display: "grid",
    gridTemplateColumns: "180px 100px 1fr",
    gap: 16,
    padding: "14px 18px",
    borderRadius: 8,
    marginBottom: 6,
    alignItems: "center",
  },
  tierName: { fontSize: 12, fontWeight: 800, letterSpacing: "0.06em" },
  tierRange: { fontSize: 13, color: "#425466", fontFamily: "'JetBrains Mono', monospace", fontWeight: 600 },
  tierAction: { fontSize: 13, color: "#0a2540" },

  modList: { margin: 0, paddingLeft: 20, color: "#425466" },

  philosophy: {
    background: "#fafbfc",
    border: "1px solid #e3e8ee",
    borderRadius: 8,
    padding: "20px 24px",
    marginTop: 8,
  },
  philosophyKicker: {
    fontSize: 11, fontWeight: 700, color: "#3a6d92",
    letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8,
  },
  philosophyText: { fontSize: 14, color: "#425466", lineHeight: 1.6, margin: "0 0 8px" },
};

const stripeStyles = {
  root: {
    background: "#fbfaf6",
    color: "#0a2540",
    minHeight: "100%",
    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
    fontSize: 14,
  },

  channelHero: {
    position: "relative",
    background: "linear-gradient(180deg, #6b9bc4 0%, #5b8db8 50%, #4a7ba8 100%)",
    overflow: "hidden",
    borderBottom: "1px solid #d8dde3",
  },
  channelHeroBg: { position:"absolute", inset: 0, pointerEvents:"none" },
  channelHeroInner: {
    position: "relative",
    padding: "32px 40px 24px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-end",
    gap: 24,
    minHeight: 200,
  },
  channelLeft: { display:"flex", alignItems:"flex-end", gap: 20 },
  channelAvatar: {
    width: 80, height: 80, borderRadius: "50%", overflow:"hidden",
    border: "3px solid #fff",
    boxShadow: "0 4px 12px rgba(10,37,64,0.2)",
    flexShrink: 0,
  },
  channelKicker: {
    fontSize: 11, fontWeight: 600, color:"rgba(255,255,255,0.75)",
    letterSpacing:"0.08em", textTransform:"uppercase", marginBottom: 8,
  },
  channelTitle: {
    margin: 0, fontSize: 44, fontWeight: 800, letterSpacing:"-0.02em", lineHeight: 1,
    fontFamily: '"Inter", sans-serif',
  },
  channelTitleAccent: {
    color: "#fff",
    fontStyle: "italic",
    fontWeight: 800,
    textShadow: "0 2px 4px rgba(10,37,64,0.15)",
  },
  channelTagline: {
    fontSize: 14, color:"#fff", fontStyle:"italic", marginTop: 10,
    fontWeight: 500, letterSpacing:"0.01em",
    textShadow: "0 1px 2px rgba(10,37,64,0.2)",
  },
  channelRight: { display:"flex", flexDirection:"column", alignItems:"flex-end", gap: 6 },
  channelTabs: {
    position: "relative",
    background: "#fff",
    padding: "0 40px",
    display: "flex", gap: 28,
    borderBottom: "1px solid #e3e8ee",
  },
  channelTab: {
    padding: "14px 0", fontSize: 14, fontWeight: 600,
    color: "#697386", cursor:"default",
    borderBottom: "3px solid transparent", marginBottom: -1,
  },
  channelTabActive: {
    color: "#0a2540",
    borderBottomColor: "#0a2540",
  },

  nav: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "16px 40px",
    borderBottom: "1px solid #e3e8ee",
  },
  navBrand: { display:"flex", alignItems:"center", gap: 12 },
  navLogo: {
    width: 28, height: 28,
    background: "#0a2540",
    borderRadius: 6,
    display:"flex", alignItems:"center", justifyContent:"center",
  },
  navLogoMark: { color:"#fff", fontWeight: 700, fontSize: 13, letterSpacing:"-0.02em" },
  navTitle: { fontSize: 15, fontWeight: 600, color:"#0a2540" },
  navDivider: { width: 1, height: 18, background:"#e3e8ee" },
  navSection: { fontSize: 13, color: "#697386" },
  navRight: { display:"flex", alignItems:"center", gap: 12 },
  navBadge: {
    fontSize: 11, padding: "4px 10px", background: "rgba(255,255,255,0.95)", color: "#0a2540",
    borderRadius: 999, fontWeight: 700, letterSpacing: "0.04em",
    fontFamily:"'JetBrains Mono', monospace"
  },
  navMeta: { fontSize: 12, color:"rgba(255,255,255,0.85)" },

  hero: {
    padding: "56px 40px 56px",
    display: "grid",
    gridTemplateColumns: "1.4fr 1fr",
    gap: 64,
    alignItems: "start",
    borderBottom: "1px solid #e3e8ee",
    background: "#fbfaf6",
  },
  heroLeft: {},
  kicker: {
    display: "inline-block",
    fontSize: 11, fontWeight: 700, color: "#3a6d92",
    background: "#e8eff6",
    padding: "5px 12px", borderRadius: 4,
    letterSpacing: "0.08em", textTransform:"uppercase",
    marginBottom: 24,
  },
  h1: {
    margin: 0,
    fontSize: 64,
    fontWeight: 800,
    letterSpacing: "-0.035em",
    lineHeight: 1.0,
    color: "#0a2540",
  },
  h1Accent: { color: "#3a6d92", fontStyle:"italic" },
  lede: {
    fontSize: 18, color: "#425466", lineHeight: 1.55,
    marginTop: 24, maxWidth: 540,
  },
  heroCtas: { display:"flex", gap: 12, marginTop: 32 },
  btnPrimary: {
    background: "#3a6d92", color:"#fff",
    padding: "10px 18px", borderRadius: 6,
    fontSize: 14, fontWeight: 600, cursor:"pointer",
    textDecoration:"none", display:"inline-block",
  },
  btnSecondary: {
    background: "#fff", color:"#0a2540",
    padding: "10px 18px", borderRadius: 6,
    fontSize: 14, fontWeight: 600, cursor:"pointer",
    border: "1px solid #e3e8ee",
    textDecoration:"none", display:"inline-block",
  },
  heroRight: { display:"flex", flexDirection:"column", gap: 12 },
  heroStatRow: { display:"grid", gridTemplateColumns:"1fr 1fr", gap: 12 },
  hstat: {
    background: "#fff",
    border: "1px solid #e3e8ee",
    borderRadius: 10,
    padding: "16px 18px",
    boxShadow: "0 1px 2px rgba(10,37,64,0.04)",
  },
  hstatLabel: { fontSize: 12, color:"#697386", marginBottom: 6, fontWeight: 500 },
  hstatValue: { fontSize: 36, fontWeight: 800, letterSpacing:"-0.02em", lineHeight: 1, fontVariantNumeric:"tabular-nums" },

  heroAvg: {
    background: "#0a2540",
    color: "#fff",
    borderRadius: 10,
    padding: "20px 22px",
    marginTop: 4,
  },
  heroAvgLabel: { fontSize: 12, color: "#a3acb9", fontWeight: 500, marginBottom: 8 },
  heroAvgValue: {
    fontSize: 48, fontWeight: 800, letterSpacing:"-0.03em", lineHeight: 1,
    fontVariantNumeric:"tabular-nums",
  },
  heroAvgOf: { fontSize: 18, color:"#a3acb9", fontWeight: 500, marginLeft: 4 },
  heroAvgBar: { height: 4, background: "rgba(255,255,255,0.1)", borderRadius: 2, marginTop: 14, overflow:"hidden" },
  heroAvgFill: { height: "100%", background:"#5b8db8", borderRadius: 2 },

  section: { padding: "48px 40px 8px", borderBottom: "1px solid #e3e8ee" },
  sectionHead: {
    display:"flex", justifyContent:"space-between", alignItems:"baseline",
    marginBottom: 24,
  },
  h2: { margin: 0, fontSize: 28, fontWeight: 700, color: "#0a2540", letterSpacing:"-0.02em" },
  sectionMeta: { fontSize: 13, color:"#697386", fontFamily:"'JetBrains Mono', monospace" },

  topGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(3, 1fr)",
    gap: 16,
    marginBottom: 32,
  },
  topCard: {
    background: "#fff",
    border: "1px solid #e3e8ee",
    borderRadius: 12,
    padding: 24,
    cursor: "pointer",
    transition: "border-color 0.15s, box-shadow 0.15s, transform 0.15s",
    display: "flex",
    flexDirection: "column",
    minHeight: 280,
    position: "relative",
    boxShadow: "0 1px 2px rgba(10,37,64,0.04)",
  },
  topCardHead: { display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 20 },
  topCardRank: { fontSize: 12, color:"#697386", fontFamily:"'JetBrains Mono', monospace", fontWeight: 600 },
  topCardChip: { fontSize: 11, padding: "4px 10px", borderRadius: 999, fontWeight: 600, letterSpacing:"0.02em" },
  topCardBody: { flex: 1, marginBottom: 20 },
  topCardTicker: { fontSize: 32, fontWeight: 800, color:"#0a2540", letterSpacing:"-0.02em", lineHeight: 1, fontFamily:"'JetBrains Mono', monospace" },
  topCardName: { fontSize: 13, color:"#697386", marginTop: 6 },
  topCardThesis: { fontSize: 14, color:"#425466", lineHeight: 1.55, marginTop: 16 },
  topCardScore: {
    display:"flex", alignItems:"baseline", gap: 16,
    paddingTop: 20, borderTop: "1px solid #f4f6f8",
    marginBottom: 16,
  },
  topCardScoreNum: { fontSize: 56, fontWeight: 800, color:"#0a2540", letterSpacing:"-0.04em", lineHeight: 1, fontVariantNumeric:"tabular-nums" },
  topCardScoreMeta: {},
  topCardScoreOf: { fontSize: 12, color:"#697386" },
  topCardDelta: { fontSize: 13, fontWeight: 600, marginTop: 4, fontFamily:"'JetBrains Mono', monospace" },
  topCardFooter: {
    display: "flex", justifyContent:"space-between", alignItems:"center",
    fontSize: 12,
  },
  topCardTheme: { color:"#697386" },
  topCardArrow: { color:"#3a6d92", fontWeight: 600 },

  controls: {
    display:"flex",
    justifyContent:"space-between",
    alignItems:"center",
    marginBottom: 8,
    gap: 16,
    flexWrap: "wrap",
  },
  tabRow: { display:"flex", gap: 4, borderBottom: "1px solid #e3e8ee", flex: 1, flexWrap:"wrap" },
  tab: {
    background: "transparent",
    border: "none",
    padding: "10px 14px",
    fontSize: 13,
    fontFamily: "inherit",
    cursor: "pointer",
    color: "#697386",
    fontWeight: 500,
    display: "flex",
    alignItems: "center",
    gap: 8,
    borderBottom: "2px solid transparent",
    marginBottom: -1,
  },
  tabActive: {
    color: "#0a2540",
    fontWeight: 600,
    borderBottomColor: "#0a2540",
  },
  tabCount: {
    fontSize: 11,
    background: "#f4f6f8",
    color: "#697386",
    padding: "2px 7px",
    borderRadius: 999,
    fontVariantNumeric: "tabular-nums",
    fontFamily:"'JetBrains Mono', monospace"
  },
  sortGroup: { display:"flex", alignItems:"center", gap: 4 },
  sortLabel: { fontSize: 12, color:"#697386", marginRight: 4 },
  sortBtn: {
    background:"transparent", border:"1px solid #e3e8ee",
    padding:"6px 10px", borderRadius: 6, fontSize: 12,
    cursor:"pointer", color:"#0a2540", fontFamily:"inherit", fontWeight: 500,
  },
  sortBtnActive: { background:"#0a2540", color:"#fff", borderColor:"#0a2540" },

  tableHead: {
    display:"flex",
    gap: 12,
    padding: "12px 12px",
    fontSize: 11,
    color: "#697386",
    fontWeight: 600,
    letterSpacing: "0.04em",
    textTransform: "uppercase",
    background: "#fafbfc",
    borderRadius: "8px 8px 0 0",
    borderTop: "1px solid #e3e8ee",
    borderLeft: "1px solid #e3e8ee",
    borderRight: "1px solid #e3e8ee",
    marginTop: 16,
  },
  thStripe: {},
  row: {
    display:"flex",
    gap: 12,
    padding: "14px 12px",
    borderBottom: "1px solid #e3e8ee",
    borderLeft: "1px solid #e3e8ee",
    borderRight: "1px solid #e3e8ee",
    alignItems:"center",
    cursor:"pointer",
    background:"#fff",
    transition: "background 0.1s",
  },
  rowTd: {},
  rowTicker: {
    fontFamily:"'JetBrains Mono', monospace",
    fontSize: 15,
    fontWeight: 700,
    color:"#0a2540",
    letterSpacing:"-0.01em",
  },
  rowName: { fontSize: 14, fontWeight: 600, color:"#0a2540", marginBottom: 2 },
  rowThesis: { fontSize: 12, color:"#697386", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", lineHeight: 1.4 },
  rowScore: { fontSize: 22, fontWeight: 800, color:"#0a2540", fontVariantNumeric:"tabular-nums", letterSpacing:"-0.02em" },
  tierChip: {
    fontSize: 11, padding: "4px 10px", borderRadius: 999, fontWeight: 600,
    letterSpacing: "0.01em",
  },

  drawerBack: {
    position: "fixed", inset: 0, background: "rgba(10,37,64,0.5)",
    backdropFilter: "blur(4px)", zIndex: 100,
    display:"flex", justifyContent:"flex-end",
  },
  drawer: {
    width: "min(640px, 95vw)", height: "100vh",
    background: "#fff", overflowY: "auto",
    padding: "32px 40px 80px",
    position: "relative",
    boxShadow: "-12px 0 40px rgba(10,37,64,0.12)",
  },
  drawerClose: {
    position: "absolute", top: 16, right: 16,
    width: 32, height: 32, borderRadius: 999,
    background: "#f4f6f8", border:"none", color:"#0a2540",
    fontSize: 22, cursor:"pointer", lineHeight: 1,
  },
  drawerHero: { paddingBottom: 24, borderBottom: "1px solid #e3e8ee" },
  drawerKickerChip: {
    display:"inline-block",
    fontSize: 11, padding: "4px 10px", borderRadius: 999, fontWeight: 600,
    marginBottom: 16,
  },
  drawerTicker: { fontSize: 40, fontWeight: 800, color:"#0a2540", letterSpacing:"-0.03em", fontFamily:"'JetBrains Mono', monospace", lineHeight: 1 },
  drawerName: { fontSize: 18, color:"#697386", marginTop: 4 },
  drawerThesis: { fontSize: 16, color:"#425466", lineHeight: 1.55, marginTop: 16 },
  drawerScoreCard: {
    display: "grid",
    gridTemplateColumns: "1fr 1.2fr",
    gap: 24,
    padding: "24px 0",
    borderBottom: "1px solid #e3e8ee",
  },
  drawerScoreLabel: { fontSize: 12, color:"#697386", fontWeight: 600, marginBottom: 8 },
  drawerScoreNum: { fontSize: 64, fontWeight: 800, lineHeight: 0.95, fontVariantNumeric:"tabular-nums", letterSpacing:"-0.04em", marginBottom: 8 },
  drawerScoreOf: { fontSize: 16, color:"#697386", fontWeight: 500, marginLeft: 4 },
  drawerSizing: {
    background: "#fafbfc", border: "1px solid #e3e8ee",
    borderRadius: 8, padding: "16px",
  },
  drawerSizingKind: { fontSize: 18, fontWeight: 700, color:"#0a2540", marginBottom: 4 },
  drawerSizingTarget: { fontSize: 14, color:"#425466", marginBottom: 8, fontFamily:"'JetBrains Mono', monospace" },
  drawerSizingRationale: { fontSize: 12, color:"#697386", lineHeight: 1.5 },
  drawerGrid: {
    display: "grid", gridTemplateColumns:"1fr 1fr",
    gap: "20px 28px", padding: "24px 0",
    borderBottom: "1px solid #e3e8ee",
  },
  dfLabel: { fontSize: 11, color:"#697386", fontWeight: 600, marginBottom: 6, letterSpacing:"0.02em" },
  dfVal: { fontSize: 13, color:"#0a2540", lineHeight: 1.5 },
  drawerSection: { padding: "24px 0", borderBottom:"1px solid #e3e8ee" },
  drawerH3: { fontSize: 16, fontWeight: 700, color:"#0a2540", marginBottom: 16 },
  critRowS: { display:"grid", gridTemplateColumns:"180px 1fr 56px", gap: 12, alignItems:"center", padding: "5px 0" },
  critLabelS: { fontSize: 12, color:"#425466" },
  critBarS: { height: 6, background:"#f4f6f8", borderRadius: 3, overflow:"hidden" },
  critBarFillS: { height:"100%", borderRadius: 3 },
  critValS: { fontFamily:"'JetBrains Mono', monospace", fontSize: 12, textAlign:"right" },
  drawerNote: { padding: "20px 0" },
  drawerNoteLabel: { fontSize: 11, color:"#3a6d92", fontWeight: 700, letterSpacing:"0.06em", textTransform:"uppercase", marginBottom: 8 },
  drawerNoteText: { fontSize: 14, color:"#0a2540", lineHeight: 1.6 },

  footer: { padding: "48px 40px", background:"#fafbfc", borderTop: "1px solid #e3e8ee" },
  footerInner: { display:"grid", gridTemplateColumns:"2fr 1fr", gap: 32, alignItems:"start" },
  footerKicker: { fontSize: 11, color:"#3a6d92", fontWeight: 700, letterSpacing:"0.06em", textTransform:"uppercase", marginBottom: 8 },
  footerText: { fontSize: 13, color:"#425466", lineHeight: 1.6, maxWidth: 600 },
  footerCmd: { textAlign:"right" },
  code: {
    fontFamily:"'JetBrains Mono', monospace",
    fontSize: 12,
    background: "#fff",
    border: "1px solid #e3e8ee",
    color: "#0a2540",
    padding: "8px 12px",
    borderRadius: 6,
    display: "inline-block",
  },
};

window.StripeView = StripeView;