import { useState } from "react"; const WEEKS = [ { week: 0, label: "ALREADY INVESTED", date: "Now", total: 1000, color: "#a78bfa", stocks: [ { ticker: "MU", name: "Micron Technology", amount: 850, pct: 85 }, { ticker: "NVDA", name: "Nvidia", amount: 150, pct: 15 }, ] }, { week: 1, label: "WEEK 1 — TOMORROW", date: "June 4, 2026", total: 1050, color: "#34d399", stocks: [ { ticker: "VOO", name: "Vanguard S&P 500 ETF", amount: 400, pct: 38 }, { ticker: "CEG", name: "Constellation Energy", amount: 200, pct: 19 }, { ticker: "VST", name: "Vistra Corp", amount: 200, pct: 19 }, { ticker: "AVGO", name: "Broadcom", amount: 150, pct: 14 }, { ticker: "COHR", name: "Coherent Corp", amount: 100, pct: 10 }, ] }, { week: 2, label: "WEEK 2 — PAYCHECK 1", date: "June 10-14, 2026", total: 1000, color: "#60a5fa", stocks: [ { ticker: "MU", name: "Micron top up", amount: 350, pct: 35 }, { ticker: "TT", name: "Trane Technologies", amount: 200, pct: 20 }, { ticker: "CIEN", name: "Ciena Corp", amount: 200, pct: 20 }, { ticker: "GEV", name: "GE Vernova", amount: 150, pct: 15 }, { ticker: "LRCX", name: "Lam Research", amount: 100, pct: 10 }, ] }, { week: 3, label: "WEEK 3 — PAYCHECK 2", date: "June 20-24, 2026", total: 1000, color: "#f59e0b", stocks: [ { ticker: "NBIS", name: "Nebius Group", amount: 200, pct: 20 }, { ticker: "ANET", name: "Arista Networks", amount: 200, pct: 20 }, { ticker: "MRVL", name: "Marvell Technology", amount: 150, pct: 15 }, { ticker: "GLW", name: "Corning", amount: 150, pct: 15 }, { ticker: "LITE", name: "Lumentum", amount: 150, pct: 15 }, { ticker: "CRDO", name: "Credo Technology", amount: 150, pct: 15 }, ] }, { week: 4, label: "WEEK 4 — PAYCHECK 3", date: "July 1-7, 2026", total: 950, color: "#f43f5e", stocks: [ { ticker: "VOO", name: "VOO top up", amount: 300, pct: 32 }, { ticker: "TSM", name: "Taiwan Semiconductor", amount: 200, pct: 21 }, { ticker: "PWR", name: "Quanta Services", amount: 150, pct: 16 }, { ticker: "FN", name: "Fabrinet", amount: 150, pct: 16 }, { ticker: "OKLO", name: "Oklo Inc", amount: 150, pct: 16 }, ] }, ]; const PORTFOLIO = [ // PHASE 2 MEMORY { ticker: "MU", name: "Micron Technology", phase: 2, phaseLabel: "MEMORY", totalAlloc: 14, type: "CORE", status: "buy now", week: 1, upside6m: "+20–50%", upside12m: "+40–80%", risk: "HIGH", catalyst: "June 24 earnings — 261% revenue growth expected", why: "The single biggest AI bottleneck right now. HBM memory is nearly sold out through 2027. Only 3 companies in the world make it — MU is the only US one. June 24 earnings are your most time-sensitive catalyst.", upsideColor: "#00ff88" }, { ticker: "LRCX", name: "Lam Research", phase: 2, phaseLabel: "MEMORY", totalAlloc: 5, type: "CORE", status: "buy week 2", week: 2, upside6m: "+15–25%", upside12m: "+25–40%", risk: "MEDIUM", catalyst: "Memory fab expansion orders", why: "Makes the machines that build memory chips. Every new MU fab expansion flows through LRCX equipment. Lower volatility than MU but same thesis.", upsideColor: "#00cc6a" }, { ticker: "TSM", name: "Taiwan Semiconductor", phase: 2, phaseLabel: "MEMORY", totalAlloc: 6, type: "NEW ADD", status: "buy week 4", week: 4, upside6m: "+10–20%", upside12m: "+20–45%", risk: "LOW-MEDIUM", catalyst: "AI inference ramp through 2027", why: "Physically manufactures chips for Nvidia, Apple, AMD — every AI chip in existence. No competitor comes close. Strong Buy consensus.", upsideColor: "#00cc6a" }, // PHASE 2.5 INFRASTRUCTURE { ticker: "VRT", name: "Vertiv Holdings", phase: 2.5, phaseLabel: "INFRASTRUCTURE", totalAlloc: 10, type: "CORE", status: "already held", week: 0, upside6m: "+15–30%", upside12m: "+30–50%", risk: "MEDIUM", catalyst: "Liquid cooling adoption rising to 35-40% of new builds", why: "King of data center cooling and power delivery. Thermal management is a physical bottleneck — you can't run Blackwell GPUs without solving heat. Backlog visibility into 2027.", upsideColor: "#00cc6a" }, { ticker: "ETN", name: "Eaton Corporation", phase: 2.5, phaseLabel: "INFRASTRUCTURE", totalAlloc: 6, type: "CORE", status: "already held", week: 0, upside6m: "+10–20%", upside12m: "+20–35%", risk: "MEDIUM", catalyst: "US grid declared national defense priority", why: "Electrical power management for data centers and the grid. Makes the switchgear and power distribution that every data center needs.", upsideColor: "#00cc6a" }, { ticker: "MTZ", name: "MasTec", phase: 2.5, phaseLabel: "INFRASTRUCTURE", totalAlloc: 5, type: "CORE", status: "already held", week: 0, upside6m: "+10–25%", upside12m: "+25–45%", risk: "MEDIUM", catalyst: "Transmission line buildout", why: "Builds transmission lines connecting data centers to the grid. Physical grid construction pure play that's chronically undervalued.", upsideColor: "#00cc6a" }, { ticker: "PWR", name: "Quanta Services", phase: 2.5, phaseLabel: "INFRASTRUCTURE", totalAlloc: 5, type: "CORE", status: "buy week 4", week: 4, upside6m: "+12–22%", upside12m: "+25–40%", risk: "MEDIUM", catalyst: "AI data center power connections", why: "Grid construction pure-play with a $44B record backlog. Fidelity fund managers specifically named Quanta as how they play the AI power bottleneck.", upsideColor: "#00cc6a" }, { ticker: "TT", name: "Trane Technologies", phase: 2.5, phaseLabel: "INFRASTRUCTURE", totalAlloc: 6, type: "NEW ADD", status: "buy week 2", week: 2, upside6m: "+10–20%", upside12m: "+20–35%", risk: "MEDIUM", catalyst: "Record $10.7B backlog, Applied Solutions bookings +160%", why: "Best cooling play nobody is talking about. Acquired LiquidStack for AI liquid cooling. Organic bookings grew 24% YoY. VRT's biggest competitor and arguably better positioned for data center liquid cooling.", upsideColor: "#00cc6a" }, { ticker: "SMCI", name: "Super Micro Computer", phase: 2.5, phaseLabel: "INFRASTRUCTURE", totalAlloc: 3, type: "CORE", status: "already held", week: 0, upside6m: "+15–35%", upside12m: "+30–60%", risk: "HIGH", catalyst: "AI server demand from hyperscalers", why: "Builds AI servers at scale. Trimmed to 3% due to governance risk. Keep position small — real revenue story but real risk.", upsideColor: "#ffcc00" }, { ticker: "FN", name: "Fabrinet", phase: 2.5, phaseLabel: "INFRASTRUCTURE", totalAlloc: 4, type: "NEW ADD", status: "buy week 4", week: 4, upside6m: "+15–25%", upside12m: "+25–45%", risk: "MEDIUM", catalyst: "Optics manufacturing demand explosion", why: "Manufactures the optical components that COHR and LITE design. As optics demand explodes Fabrinet makes them at scale. Lower risk than pure optics plays but same upside.", upsideColor: "#00cc6a" }, // PHASE 3 POWER { ticker: "AVGO", name: "Broadcom", phase: 3, phaseLabel: "POWER & CUSTOM SILICON", totalAlloc: 13, type: "CORE", status: "buy tomorrow", week: 1, upside6m: "+15–35%", upside12m: "+30–60%", risk: "MEDIUM", catalyst: "June 3 earnings + $100B AI revenue path by 2027", why: "Single highest conviction pick. Custom AI chips for Google, Meta, Apple. AI revenue doubling to $40B in FY2026 and nearly doubling again in FY2027. $73B AI backlog secured.", upsideColor: "#00ff88" }, { ticker: "CEG", name: "Constellation Energy", phase: 3, phaseLabel: "POWER & CUSTOM SILICON", totalAlloc: 10, type: "CORE", status: "buy tomorrow", week: 1, upside6m: "+15–30%", upside12m: "+25–45%", risk: "MEDIUM", catalyst: "Nuclear restart + 5,650MW hyperscaler contracts", why: "Best value entry in the whole portfolio. Down 11% YTD while peers ran hard. Largest clean power producer in US. Long-term contracts with Microsoft and Meta locked in.", upsideColor: "#00ff88" }, { ticker: "VST", name: "Vistra Corp", phase: 3, phaseLabel: "POWER & CUSTOM SILICON", totalAlloc: 8, type: "NEW ADD", status: "buy tomorrow", week: 1, upside6m: "+15–30%", upside12m: "+25–50%", risk: "MEDIUM", catalyst: "Nuclear + gas power, Meta deal, Perry plant restart", why: "CEG's biggest competitor and cheaper right now. Second-largest nuclear fleet in US. Revenue grew 43% YoY in Q1 2026. Analyst median target $232. Power duopoly for AI data centers — own both CEG and VST.", upsideColor: "#00ff88" }, { ticker: "GEV", name: "GE Vernova", phase: 3, phaseLabel: "POWER & CUSTOM SILICON", totalAlloc: 5, type: "CORE", status: "buy week 2", week: 2, upside6m: "+15–30%", upside12m: "+30–60%", risk: "MEDIUM", catalyst: "$200B backlog by 2027, raised guidance twice", why: "Backlog hit $163B in Q1 2026, up 71% YoY. Booked $2.4B in AI data center electrification orders in one quarter — more than all of 2025. Goldman target $1,328.", upsideColor: "#00ff88" }, { ticker: "MSFT", name: "Microsoft", phase: 3, phaseLabel: "POWER & CUSTOM SILICON", totalAlloc: 6, type: "NEW ADD", status: "optional add", week: 2, upside6m: "+15–25%", upside12m: "+25–45%", risk: "LOW", catalyst: "Azure 40% YoY growth + OpenAI monetization", why: "Safest AI compounder. Trading below 20x forward earnings with $627B contracted backlog. Morningstar rates it 30% undervalued. The platform everything else in AI runs on.", upsideColor: "#00cc6a" }, // PHASE 4 COMPUTE & INTERCONNECT { ticker: "MRVL", name: "Marvell Technology", phase: 4, phaseLabel: "COMPUTE & INTERCONNECT", totalAlloc: 6, type: "CORE", status: "buy week 3", week: 3, upside6m: "+15–30%", upside12m: "+20–50%", risk: "MEDIUM-HIGH", catalyst: "Custom silicon orders from hyperscalers", why: "Custom AI silicon and networking chips. 84% analyst buy ratings. HSBC just raised target to $300. Best positioned for next wave of hyperscaler custom chip orders.", upsideColor: "#00cc6a" }, { ticker: "NVDA", name: "Nvidia", phase: 4, phaseLabel: "COMPUTE & INTERCONNECT", totalAlloc: 6, type: "CORE", status: "already held", week: 0, upside6m: "+15–30%", upside12m: "+30–50%", risk: "MEDIUM", catalyst: "Vera Rubin platform H2 2026", why: "The GPU standard for AI training. 90% market share backed by CUDA software moat. Vera Rubin platform coming H2 2026 is the next major cycle.", upsideColor: "#00cc6a" }, { ticker: "ALAB", name: "Astera Labs", phase: 4, phaseLabel: "COMPUTE & INTERCONNECT", totalAlloc: 4, type: "CORE", status: "already held", week: 0, upside6m: "+25–50%", upside12m: "+40–80%", risk: "HIGH", catalyst: "Data center connectivity bottleneck", why: "93% YoY revenue growth. Makes connectivity chips that move data inside AI data centers at the speeds AI requires. Bandwidth bottleneck inside the rack is real and growing.", upsideColor: "#00ff88" }, { ticker: "GLW", name: "Corning", phase: 4, phaseLabel: "COMPUTE & INTERCONNECT", totalAlloc: 4, type: "CORE", status: "buy week 3", week: 3, upside6m: "+10–20%", upside12m: "+20–35%", risk: "LOW-MEDIUM", catalyst: "Fiber demand from hyperscalers", why: "Makes fiber optic cables connecting AI data centers globally. Boring name, essential role. Low volatility relative to peers — your ballast position that still benefits from AI buildout.", upsideColor: "#00cc6a" }, { ticker: "CRDO", name: "Credo Technology", phase: 4, phaseLabel: "COMPUTE & INTERCONNECT", totalAlloc: 3, type: "CORE", status: "buy week 3", week: 3, upside6m: "+25–50%", upside12m: "+40–80%", risk: "HIGH", catalyst: "AEC adoption inside AI clusters", why: "FY2026 revenue tripled. Makes Active Electrical Cables replacing copper in AI racks — faster, lower power. 80%+ growth guided for FY2027.", upsideColor: "#00ff88" }, { ticker: "ANET", name: "Arista Networks", phase: 4, phaseLabel: "COMPUTE & INTERCONNECT", totalAlloc: 5, type: "BUY LATER", status: "buy week 3", week: 3, upside6m: "+15–27%", upside12m: "+25–45%", risk: "MEDIUM", catalyst: "AI cluster scale-up, $3.25B AI networking target", why: "93% analyst buy ratings. Networks all hyperscaler AI infrastructure. Raised AI networking revenue target to $3.25B for 2026. Every packet in every AI cluster runs through Arista switches.", upsideColor: "#ffcc00" }, // PHASE 4.5 OPTICS { ticker: "COHR", name: "Coherent Corp", phase: 4.5, phaseLabel: "OPTICS BOTTLENECK", totalAlloc: 5, type: "NEW ADD", status: "buy tomorrow", week: 1, upside6m: "+20–40%", upside12m: "+40–70%", risk: "MEDIUM-HIGH", catalyst: "Book-to-bill exceeding 4:1, 2027 filling fast", why: "The optics bottleneck is the NEXT MU-type explosion. Nvidia asked suppliers to increase laser capacity 20x. COHR has most of 2026 booked with 2027 filling fast. Vertically integrated indium phosphide lasers give it cost and performance edges.", upsideColor: "#00ff88" }, { ticker: "CIEN", name: "Ciena Corp", phase: 4.5, phaseLabel: "OPTICS BOTTLENECK", totalAlloc: 5, type: "NEW ADD", status: "buy week 2", week: 2, upside6m: "+15–30%", upside12m: "+30–55%", risk: "MEDIUM", catalyst: "Record $7B order backlog, cloud revenue +76% YoY", why: "Optical networking hardware and software that ties AI infrastructure together. CEO described demand as 'unprecedented.' Direct Cloud Provider revenue up 76% YoY representing 42% of total revenue.", upsideColor: "#00ff88" }, { ticker: "LITE", name: "Lumentum", phase: 4.5, phaseLabel: "OPTICS BOTTLENECK", totalAlloc: 4, type: "NEW ADD", status: "buy week 3", week: 3, upside6m: "+20–40%", upside12m: "+50–80%", risk: "HIGH", catalyst: "Sold out through 2027, Jefferies target $1,200", why: "Dominates high-margin indium phosphide lasers for 1.6T transceivers. Sold out capacity through 2027. Price targets from Jefferies $1,200, JPMorgan $1,130, Morgan Stanley $900.", upsideColor: "#00ff88" }, // PHASE 5 SPECULATIVE { ticker: "BWXT", name: "BWX Technologies", phase: 5, phaseLabel: "SPECULATIVE / FUTURE", totalAlloc: 4, type: "BUY LATER", status: "buy on pullbacks", week: 0, upside6m: "+10–20%", upside12m: "+25–50%", risk: "MEDIUM-HIGH", catalyst: "SMR policy + government nuclear contracts", why: "Builds small modular reactors and nuclear components for US government. AI power demand making nuclear the only viable baseload clean energy.", upsideColor: "#ffcc00" }, { ticker: "SMR", name: "NuScale Power", phase: 5, phaseLabel: "SPECULATIVE / FUTURE", totalAlloc: 3, type: "BUY LATER", status: "buy on pullbacks", week: 0, upside6m: "+20–50%", upside12m: "+50–150%", risk: "VERY HIGH", catalyst: "First commercial SMR deployment", why: "Pure-play SMR company — highest risk, highest reward nuclear bet. If SMRs become the AI power solution of the 2030s this captures it most directly.", upsideColor: "#ff6600" }, { ticker: "NBIS", name: "Nebius Group", phase: 5, phaseLabel: "SPECULATIVE / FUTURE", totalAlloc: 4, type: "NEW ADD", status: "buy week 3 if under $240", week: 3, upside6m: "+20–40%", upside12m: "+40–80%", risk: "HIGH", catalyst: "$27B Meta deal + Nvidia $2B investment", why: "Revenue exploded 684% YoY. Nvidia CEO personally endorsed them at Computex. $27B deal with Meta locked in. Only buy if price is at $230-240 — don't chase at all time highs.", upsideColor: "#ffcc00" }, { ticker: "OKLO", name: "Oklo Inc", phase: 5, phaseLabel: "SPECULATIVE / FUTURE", totalAlloc: 3, type: "NEW ADD", status: "buy week 4", week: 4, upside6m: "+20–50%", upside12m: "+50–150%", risk: "VERY HIGH", catalyst: "Microreactors co-located with data centers, Meta deal", why: "Backed by Sam Altman. Designs microreactors that can be co-located directly with data centers. Already has deals with Meta in pipeline. Pure speculation but massive upside if SMRs work.", upsideColor: "#ff6600" }, ]; const PHASE_CONFIG = { 2: { label: "PHASE 2 · MEMORY", color: "#a78bfa", bg: "rgba(167,139,250,0.1)" }, 2.5: { label: "PHASE 2.5 · INFRASTRUCTURE", color: "#60a5fa", bg: "rgba(96,165,250,0.1)" }, 3: { label: "PHASE 3 · POWER & SILICON", color: "#34d399", bg: "rgba(52,211,153,0.1)" }, 4: { label: "PHASE 4 · COMPUTE & INTERCONNECT", color: "#f59e0b", bg: "rgba(245,158,11,0.1)" }, 4.5: { label: "PHASE 4.5 · OPTICS BOTTLENECK", color: "#06b6d4", bg: "rgba(6,182,212,0.1)" }, 5: { label: "PHASE 5 · SPECULATIVE", color: "#f43f5e", bg: "rgba(244,63,94,0.1)" }, }; const RISK_COLOR = { "LOW": "#10b981", "LOW-MEDIUM": "#34d399", "MEDIUM": "#f59e0b", "MEDIUM-HIGH": "#fb923c", "HIGH": "#f43f5e", "VERY HIGH": "#dc2626", }; const TYPE_STYLE = { "CORE": { bg: "#0f1a2e", color: "#64748b", border: "#1e293b" }, "NEW ADD": { bg: "rgba(52,211,153,0.15)", color: "#34d399", border: "#10b981" }, "BUY LATER": { bg: "rgba(245,158,11,0.15)", color: "#fbbf24", border: "#f59e0b" }, }; const GROWTH = [ { label: "Conservative", pct: "25–35%", value: "$6,250–6,750", color: "#60a5fa" }, { label: "Base Case", pct: "45–60%", value: "$7,250–8,000", color: "#34d399" }, { label: "Bull Case", pct: "70–100%", value: "$8,500–10,000", color: "#00ff88" }, ]; export default function Portfolio() { const [page, setPage] = useState("portfolio"); const [expanded, setExpanded] = useState(null); const [filterPhase, setFilterPhase] = useState("all"); const phases = [2, 2.5, 3, 4, 4.5, 5]; const totalInvested = WEEKS.reduce((a, w) => a + w.total, 0); const newAdds = PORTFOLIO.filter(s => s.type === "NEW ADD").length; const grouped = phases.reduce((acc, p) => { const items = filterPhase === "all" ? PORTFOLIO.filter(s => s.phase === p) : PORTFOLIO.filter(s => s.phase === p && filterPhase === String(p)); if (items.length) acc[p] = items; return acc; }, {}); return ( <div style={{ minHeight: "100vh", background: "#030712", color: "#e2e8f0", fontFamily: "'DM Mono', monospace" }}> <style>{` @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@700;800;900&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: #1e293b; } .nav-btn { cursor: pointer; border: none; transition: all 0.2s; } .nav-btn:hover { opacity: 0.8; } .card { transition: transform 0.2s; } .card:hover { transform: translateY(-1px); } .ticker-row { cursor: pointer; transition: background 0.15s; } .ticker-row:hover { background: rgba(255,255,255,0.03) !important; } .phase-btn { cursor: pointer; border: none; transition: all 0.15s; } .phase-btn:hover { opacity: 0.8; } @keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } .fade-up { animation: fadeUp 0.3s ease forwards; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } .pulse { animation: pulse 2s infinite; } @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } .week-bar { transition: width 0.5s ease; } `}</style> {/* TOP NAV */} <div style={{ background: "#030712", borderBottom: "1px solid #0f2040", position: "sticky", top: 0, zIndex: 100 }}> <div style={{ maxWidth: 900, margin: "0 auto", padding: "0 20px", display: "flex", alignItems: "center", justifyContent: "space-between", height: 56 }}> <div style={{ display: "flex", alignItems: "center", gap: 8 }}> <div style={{ width: 6, height: 6, borderRadius: "50%", background: "#00ff88", boxShadow: "0 0 8px #00ff88" }} className="pulse" /> <span style={{ fontFamily: "Syne", fontSize: 14, fontWeight: 800, letterSpacing: "0.05em", color: "#e2e8f0" }}>AI BOTTLENECK</span> </div> <div style={{ display: "flex", gap: 4 }}> {[ { id: "portfolio", label: "PORTFOLIO" }, { id: "roadmap", label: "ROADMAP" }, { id: "growth", label: "GROWTH" }, { id: "catalysts", label: "CATALYSTS" }, ].map(p => ( <button key={p.id} className="nav-btn" onClick={() => setPage(p.id)} style={{ padding: "6px 12px", borderRadius: 6, fontSize: 10, letterSpacing: "0.1em", fontFamily: "DM Mono", background: page === p.id ? "#0f2040" : "transparent", color: page === p.id ? "#60a5fa" : "#475569", border: page === p.id ? "1px solid #1e3a5f" : "1px solid transparent", }}>{p.label}</button> ))} </div> </div> </div> {/* PORTFOLIO PAGE */} {page === "portfolio" && ( <div style={{ maxWidth: 900, margin: "0 auto", padding: "24px 20px 60px" }}> {/* Header */} <div className="fade-up" style={{ marginBottom: 28 }}> <div style={{ fontSize: 10, letterSpacing: "0.15em", color: "#475569", marginBottom: 6 }}>AI BOTTLENECK PORTFOLIO · V2.0 · JUNE 2026</div> <h1 style={{ fontFamily: "Syne", fontSize: "clamp(24px,5vw,40px)", fontWeight: 900, letterSpacing: "-0.02em", background: "linear-gradient(135deg, #e2e8f0 0%, #60a5fa 40%, #34d399 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", marginBottom: 20 }}> AI BOTTLENECK PORTFOLIO </h1> {/* Stats */} <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(100px,1fr))", gap: 10 }}> {[ { label: "POSITIONS", value: PORTFOLIO.length }, { label: "TARGET", value: "$5,000" }, { label: "PHASES", value: "2 → 5" }, { label: "NEW ADDS", value: newAdds, accent: "#34d399" }, { label: "WEEKS", value: "4" }, ].map((s, i) => ( <div key={i} className="card" style={{ background: "#060e1e", border: "1px solid #0f2040", borderRadius: 10, padding: "12px 14px" }}> <div style={{ fontSize: 9, letterSpacing: "0.12em", color: "#475569", marginBottom: 5 }}>{s.label}</div> <div style={{ fontSize: 20, fontWeight: 700, fontFamily: "Syne", color: s.accent || "#e2e8f0" }}>{s.value}</div> </div> ))} </div> </div> {/* Phase Filter */} <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 20 }}> <button className="phase-btn" onClick={() => setFilterPhase("all")} style={{ padding: "5px 12px", borderRadius: 16, fontSize: 10, letterSpacing: "0.08em", background: filterPhase === "all" ? "#60a5fa" : "#0f1a2e", color: filterPhase === "all" ? "#000" : "#64748b", border: "1px solid " + (filterPhase === "all" ? "#60a5fa" : "#1e293b") }}>ALL</button> {phases.map(p => ( <button key={p} className="phase-btn" onClick={() => setFilterPhase(String(p))} style={{ padding: "5px 12px", borderRadius: 16, fontSize: 10, letterSpacing: "0.08em", background: filterPhase === String(p) ? PHASE_CONFIG[p].color : "#0f1a2e", color: filterPhase === String(p) ? "#000" : "#64748b", border: "1px solid " + (filterPhase === String(p) ? PHASE_CONFIG[p].color : "#1e293b") }}> {PHASE_CONFIG[p].label.split("·")[1]?.trim().split(" ")[0]} </button> ))} </div> {/* Stocks by Phase */} {Object.entries(grouped).map(([phase, stocks]) => { const pc = PHASE_CONFIG[parseFloat(phase)]; const phaseAlloc = stocks.reduce((a, s) => a + s.totalAlloc, 0); return ( <div key={phase} className="fade-up" style={{ marginBottom: 24 }}> <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}> <div style={{ width: 16, height: 1, background: pc.color }} /> <span style={{ fontSize: 10, letterSpacing: "0.15em", color: pc.color, fontWeight: 500 }}>{pc.label}</span> <div style={{ flex: 1, height: 1, background: `linear-gradient(90deg, ${pc.color}30, transparent)` }} /> <span style={{ fontSize: 10, color: "#475569" }}>{phaseAlloc}% TOTAL</span> </div> <div style={{ border: `1px solid ${pc.color}20`, borderRadius: 12, overflow: "hidden", background: pc.bg }}> {stocks.map((s, i) => { const isOpen = expanded === s.ticker; const ts = TYPE_STYLE[s.type] || TYPE_STYLE["CORE"]; return ( <div key={s.ticker}> <div className="ticker-row" onClick={() => setExpanded(isOpen ? null : s.ticker)} style={{ display: "grid", gridTemplateColumns: "44px 1fr auto auto auto auto", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: (i < stocks.length - 1 || isOpen) ? `1px solid ${pc.color}12` : "none", background: isOpen ? `${pc.color}06` : "transparent" }}> <div style={{ fontSize: 13, fontWeight: 500, color: pc.color, letterSpacing: "0.05em", fontFamily: "Syne" }}>{s.ticker}</div> <div style={{ fontSize: 11, color: "#64748b", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.name}</div> <span style={{ fontSize: 9, letterSpacing: "0.08em", padding: "2px 7px", borderRadius: 4, background: ts.bg, color: ts.color, border: `1px solid ${ts.border}`, whiteSpace: "nowrap" }}>{s.type}</span> <span style={{ fontSize: 9, color: RISK_COLOR[s.risk] || "#94a3b8", whiteSpace: "nowrap" }}>{s.risk}</span> <span style={{ fontSize: 16, fontWeight: 700, fontFamily: "Syne", color: "#e2e8f0" }}>{s.totalAlloc}%</span> <span style={{ fontSize: 10, color: "#475569", transition: "transform 0.2s", display: "inline-block", transform: isOpen ? "rotate(180deg)" : "none" }}>▼</span> </div> {isOpen && ( <div className="fade-up" style={{ padding: "18px 20px 20px", borderBottom: i < stocks.length - 1 ? `1px solid ${pc.color}12` : "none", background: `${pc.color}04` }}> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 12 }}> <div style={{ background: "#060e1e", border: "1px solid #0f2040", borderRadius: 8, padding: 14 }}> <div style={{ fontSize: 9, letterSpacing: "0.12em", color: "#475569", marginBottom: 8 }}>UPSIDE TARGETS</div> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}> <span style={{ fontSize: 10, color: "#64748b" }}>6-month</span> <span style={{ fontSize: 13, color: s.upsideColor, fontWeight: 500 }}>{s.upside6m}</span> </div> <div style={{ display: "flex", justifyContent: "space-between" }}> <span style={{ fontSize: 10, color: "#64748b" }}>12-month</span> <span style={{ fontSize: 13, color: s.upsideColor, fontWeight: 500 }}>{s.upside12m}</span> </div> </div> <div style={{ background: "#060e1e", border: "1px solid #0f2040", borderRadius: 8, padding: 14 }}> <div style={{ fontSize: 9, letterSpacing: "0.12em", color: "#475569", marginBottom: 8 }}>DETAILS</div> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}> <span style={{ fontSize: 10, color: "#64748b" }}>Allocation</span> <span style={{ fontSize: 10, color: "#e2e8f0" }}>{s.totalAlloc}%</span> </div> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}> <span style={{ fontSize: 10, color: "#64748b" }}>Buy timing</span> <span style={{ fontSize: 10, color: s.type === "BUY LATER" ? "#fbbf24" : "#34d399" }}>{s.status}</span> </div> <div style={{ display: "flex", justifyContent: "space-between" }}> <span style={{ fontSize: 10, color: "#64748b" }}>Risk</span> <span style={{ fontSize: 10, color: RISK_COLOR[s.risk] }}>{s.risk}</span> </div> </div> </div> <div style={{ background: "#060e1e", border: `1px solid ${pc.color}25`, borderRadius: 8, padding: 14, marginBottom: 10 }}> <div style={{ fontSize: 9, letterSpacing: "0.12em", color: pc.color, marginBottom: 6 }}>CATALYST</div> <p style={{ fontSize: 11, color: "#94a3b8", margin: 0 }}>{s.catalyst}</p> </div> <div style={{ background: "#060e1e", border: `1px solid ${pc.color}25`, borderRadius: 8, padding: 14 }}> <div style={{ fontSize: 9, letterSpacing: "0.12em", color: pc.color, marginBottom: 6 }}>WHY INVEST</div> <p style={{ fontSize: 12, color: "#94a3b8", lineHeight: 1.7, margin: 0 }}>{s.why}</p> </div> </div> )} </div> ); })} </div> </div> ); })} {/* Allocation Bar */} <div style={{ background: "#060e1e", border: "1px solid #0f2040", borderRadius: 10, padding: 16, marginTop: 8 }}> <div style={{ fontSize: 9, letterSpacing: "0.12em", color: "#475569", marginBottom: 10 }}>PHASE ALLOCATION</div> <div style={{ display: "flex", height: 10, borderRadius: 5, overflow: "hidden", gap: 1 }}> {phases.map(p => { const alloc = PORTFOLIO.filter(s => s.phase === p).reduce((a, s) => a + s.totalAlloc, 0); return <div key={p} style={{ flex: alloc, background: PHASE_CONFIG[p].color, opacity: 0.8 }} />; })} </div> <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 10 }}> {phases.map(p => { const alloc = PORTFOLIO.filter(s => s.phase === p).reduce((a, s) => a + s.totalAlloc, 0); return ( <div key={p} style={{ display: "flex", alignItems: "center", gap: 5 }}> <div style={{ width: 7, height: 7, borderRadius: 2, background: PHASE_CONFIG[p].color }} /> <span style={{ fontSize: 9, color: "#64748b" }}>{PHASE_CONFIG[p].label.split("·")[0].trim().replace("PHASE ", "Ph")}: <span style={{ color: "#94a3b8" }}>{alloc}%</span></span> </div> ); })} </div> </div> </div> )} {/* ROADMAP PAGE */} {page === "roadmap" && ( <div style={{ maxWidth: 900, margin: "0 auto", padding: "24px 20px 60px" }}> <div className="fade-up" style={{ marginBottom: 28 }}> <div style={{ fontSize: 10, letterSpacing: "0.15em", color: "#475569", marginBottom: 6 }}>4-WEEK INVESTMENT ROADMAP</div> <h2 style={{ fontFamily: "Syne", fontSize: 28, fontWeight: 900, color: "#e2e8f0", marginBottom: 6 }}>$2,050 → $5,000</h2> <p style={{ fontSize: 12, color: "#475569" }}>Deploy across 4 weeks, 3 paychecks</p> </div> {/* Progress bar */} <div style={{ background: "#060e1e", border: "1px solid #0f2040", borderRadius: 10, padding: 16, marginBottom: 24 }}> <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}> <span style={{ fontSize: 10, color: "#475569" }}>TOTAL TARGET</span> <span style={{ fontSize: 12, color: "#34d399", fontFamily: "Syne" }}>${totalInvested.toLocaleString()} / $5,000</span> </div> <div style={{ height: 8, background: "#0f1a2e", borderRadius: 4, overflow: "hidden" }}> <div style={{ height: "100%", width: `${(totalInvested / 5000) * 100}%`, background: "linear-gradient(90deg, #34d399, #60a5fa)", borderRadius: 4 }} /> </div> </div> {/* Weekly cards */} {WEEKS.map((w, wi) => ( <div key={wi} className="fade-up card" style={{ background: "#060e1e", border: `1px solid ${w.color}30`, borderRadius: 12, padding: 20, marginBottom: 16 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}> <div> <div style={{ fontSize: 10, letterSpacing: "0.12em", color: w.color, marginBottom: 4 }}>{w.label}</div> <div style={{ fontSize: 12, color: "#475569" }}>{w.date}</div> </div> <div style={{ textAlign: "right" }}> <div style={{ fontSize: 22, fontFamily: "Syne", fontWeight: 800, color: w.color }}>${w.total.toLocaleString()}</div> <div style={{ fontSize: 9, color: "#475569" }}>DEPLOY</div> </div> </div> <div style={{ display: "flex", flexDirection: "column", gap: 8 }}> {w.stocks.map((s, si) => ( <div key={si} style={{ display: "flex", alignItems: "center", gap: 12 }}> <span style={{ fontSize: 12, fontWeight: 500, color: w.color, fontFamily: "Syne", minWidth: 44 }}>{s.ticker}</span> <div style={{ flex: 1, height: 4, background: "#0f1a2e", borderRadius: 2, overflow: "hidden" }}> <div style={{ height: "100%", width: `${s.pct}%`, background: w.color, opacity: 0.7, borderRadius: 2 }} /> </div> <span style={{ fontSize: 11, color: "#475569", minWidth: 40, textAlign: "right" }}>${s.amount}</span> </div> ))} </div> </div> ))} </div> )} {/* GROWTH PAGE */} {page === "growth" && ( <div style={{ maxWidth: 900, margin: "0 auto", padding: "24px 20px 60px" }}> <div className="fade-up" style={{ marginBottom: 28 }}> <div style={{ fontSize: 10, letterSpacing: "0.15em", color: "#475569", marginBottom: 6 }}>12-MONTH GROWTH PROJECTIONS</div> <h2 style={{ fontFamily: "Syne", fontSize: 28, fontWeight: 900, color: "#e2e8f0" }}>Portfolio Growth Outlook</h2> </div> {/* Growth scenarios */} <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px,1fr))", gap: 14, marginBottom: 28 }}> {GROWTH.map((g, i) => ( <div key={i} className="card" style={{ background: "#060e1e", border: `1px solid ${g.color}30`, borderRadius: 12, padding: 20 }}> <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#475569", marginBottom: 8 }}>{g.label.toUpperCase()}</div> <div style={{ fontSize: 28, fontFamily: "Syne", fontWeight: 900, color: g.color, marginBottom: 4 }}>{g.pct}</div> <div style={{ fontSize: 14, color: "#94a3b8" }}>{g.value}</div> <div style={{ fontSize: 10, color: "#475569", marginTop: 6 }}>on $5,000 invested</div> </div> ))} </div> {/* Per stock projections */} <div style={{ background: "#060e1e", border: "1px solid #0f2040", borderRadius: 12, padding: 20, marginBottom: 20 }}> <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#475569", marginBottom: 16 }}>PER STOCK UPSIDE TARGETS</div> <div style={{ display: "flex", flexDirection: "column", gap: 10 }}> {PORTFOLIO.filter(s => s.type !== "BUY LATER").map((s) => { const pc = PHASE_CONFIG[s.phase]; return ( <div key={s.ticker} style={{ display: "grid", gridTemplateColumns: "44px 1fr auto auto", alignItems: "center", gap: 12, padding: "8px 0", borderBottom: "1px solid #0f1a2e" }}> <span style={{ fontSize: 12, fontWeight: 700, color: pc.color, fontFamily: "Syne" }}>{s.ticker}</span> <div style={{ height: 4, background: "#0f1a2e", borderRadius: 2, overflow: "hidden" }}> <div style={{ height: "100%", width: `${s.totalAlloc * 5}%`, background: s.upsideColor, opacity: 0.6, borderRadius: 2 }} /> </div> <span style={{ fontSize: 11, color: "#64748b", textAlign: "right" }}>{s.upside6m}</span> <span style={{ fontSize: 11, color: s.upsideColor, textAlign: "right", minWidth: 70 }}>{s.upside12m}</span> </div> ); })} </div> </div> {/* Risks */} <div style={{ background: "rgba(244,63,94,0.06)", border: "1px solid rgba(244,63,94,0.2)", borderRadius: 10, padding: 16 }}> <div style={{ fontSize: 10, letterSpacing: "0.12em", color: "#f43f5e", marginBottom: 10 }}>KEY RISKS TO WATCH</div> {["Hyperscaler capex cuts — if Microsoft or Google reduces spending the whole portfolio feels it", "MU June 24 earnings miss — your biggest single position risk", "Macro recession — would hit everything short term", "China/Taiwan conflict — would hurt TSM and supply chains"].map((r, i) => ( <div key={i} style={{ display: "flex", gap: 8, marginBottom: 8 }}> <span style={{ color: "#f43f5e", fontSize: 12 }}>⚠</span> <span style={{ fontSize: 11, color: "#94a3b8", lineHeight: 1.6 }}>{r}</span> </div> ))} </div> </div> )} {/* CATALYSTS PAGE */} {page === "catalysts" && ( <div style={{ maxWidth: 900, margin: "0 auto", padding: "24px 20px 60px" }}> <div className="fade-up" style={{ marginBottom: 28 }}> <div style={{ fontSize: 10, letterSpacing: "0.15em", color: "#475569", marginBottom: 6 }}>UPCOMING CATALYSTS & BOTTLENECKS</div> <h2 style={{ fontFamily: "Syne", fontSize: 28, fontWeight: 900, color: "#e2e8f0" }}>Event Calendar</h2> </div> {/* Upcoming events */} {[ { date: "JUNE 3 — TONIGHT", event: "AVGO Q2 Earnings", detail: "Options pricing 10.65% move. AI revenue guidance $10.7B expected. Beat = buy tomorrow morning.", color: "#f43f5e", urgent: true, stocks: ["AVGO"] }, { date: "JUNE 4 — TOMORROW", event: "Market Open 6:30am PST", detail: "Buy VOO, CEG, VST, AVGO (pending tonight), COHR. Your most important investing day.", color: "#00ff88", urgent: true, stocks: ["VOO", "CEG", "VST", "AVGO", "COHR"] }, { date: "JUNE 10-14", event: "Paycheck 1 Deployment", detail: "Top up MU before June 24. Add TT, CIEN, GEV, LRCX.", color: "#60a5fa", urgent: false, stocks: ["MU", "TT", "CIEN", "GEV", "LRCX"] }, { date: "JUNE 24", event: "MU Q3 Fiscal Earnings", detail: "Your biggest catalyst. 261% revenue growth expected. A beat could drive another 20-50% run.", color: "#f59e0b", urgent: true, stocks: ["MU"] }, { date: "JUNE 20-24", event: "Paycheck 2 Deployment", detail: "Add NBIS (if under $240), ANET, MRVL, GLW, LITE, CRDO.", color: "#a78bfa", urgent: false, stocks: ["NBIS", "ANET", "MRVL", "GLW", "LITE", "CRDO"] }, { date: "JULY 1-7", event: "Paycheck 3 Deployment", detail: "Top up VOO. Add TSM, PWR, FN, OKLO. Hit $5,000 target.", color: "#34d399", urgent: false, stocks: ["VOO", "TSM", "PWR", "FN", "OKLO"] }, ].map((e, i) => ( <div key={i} className="card" style={{ background: "#060e1e", border: `1px solid ${e.color}${e.urgent ? "50" : "20"}`, borderRadius: 12, padding: 18, marginBottom: 14 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}> <div> <div style={{ fontSize: 10, letterSpacing: "0.12em", color: e.color, marginBottom: 4, display: "flex", alignItems: "center", gap: 6 }}> {e.urgent && <span style={{ fontSize: 8, background: e.color, color: "#000", padding: "1px 5px", borderRadius: 3 }}>URGENT</span>} {e.date} </div> <div style={{ fontSize: 15, fontFamily: "Syne", fontWeight: 700, color: "#e2e8f0" }}>{e.event}</div> </div> </div> <p style={{ fontSize: 12, color: "#94a3b8", lineHeight: 1.7, marginBottom: 12 }}>{e.detail}</p> <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}> {e.stocks.map(t => ( <span key={t} style={{ fontSize: 10, padding: "3px 8px", borderRadius: 4, background: `${e.color}15`, color: e.color, border: `1px solid ${e.color}30` }}>{t}</span> ))} </div> </div> ))} {/* Next bottlenecks */} <div style={{ marginTop: 32, marginBottom: 16 }}> <div style={{ fontSize: 10, letterSpacing: "0.15em", color: "#475569", marginBottom: 16 }}>UPCOMING AI BOTTLENECKS — NEXT MU-TYPE OPPORTUNITIES</div> </div> {[ { bottleneck: "OPTICS / LASERS", timing: "NOW", stocks: "COHR, LITE, CIEN", urgency: "🔴", detail: "Nvidia asked suppliers to increase laser capacity 20x. InP optics market growing from $1.9B to $22.75B by 2030. This is the next MU.", color: "#f43f5e" }, { bottleneck: "MEMORY CONTINUES", timing: "NOW → 2027", stocks: "MU", urgency: "🔴", detail: "Samsung and SK Hynix warned of significant shortages through at least 2027. You're already positioned.", color: "#a78bfa" }, { bottleneck: "NUCLEAR POWER", timing: "2027 → 2029", stocks: "CEG, VST, OKLO", urgency: "🟠", detail: "AI data centers need 24/7 baseload power. Nuclear is the only answer at scale. Window to buy is now.", color: "#f59e0b" }, { bottleneck: "COOLING / LIQUID", timing: "NOW → 2027", stocks: "VRT, TT, FN", urgency: "🟠", detail: "Liquid cooling rising from under 5% to 35-40% of new data center builds. Ecolab paid $4.75B for a cooling company at 29x EBITDA.", color: "#60a5fa" }, { bottleneck: "CHIP MANUFACTURING", timing: "2027 → 2028", stocks: "TSM, LRCX", urgency: "🟡", detail: "As HBM moves to HBM4, manufacturing capacity becomes the constraint. TSM makes virtually everything.", color: "#34d399" }, { bottleneck: "SOVEREIGN AI", timing: "2027 → 2030", stocks: "NBIS, CRWV", urgency: "🟢", detail: "Every country wants its own AI infrastructure. Nebius just signed $27B Meta deal and has France commitments.", color: "#10b981" }, ].map((b, i) => ( <div key={i} className="card" style={{ background: "#060e1e", border: `1px solid ${b.color}25`, borderRadius: 10, padding: 16, marginBottom: 10 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}> <div style={{ display: "flex", alignItems: "center", gap: 10 }}> <span style={{ fontSize: 16 }}>{b.urgency}</span> <span style={{ fontSize: 13, fontFamily: "Syne", fontWeight: 700, color: b.color }}>{b.bottleneck}</span> </div> <span style={{ fontSize: 10, color: "#475569" }}>{b.timing}</span> </div> <p style={{ fontSize: 11, color: "#94a3b8", lineHeight: 1.6, marginBottom: 8 }}>{b.detail}</p> <div style={{ display: "flex", gap: 6 }}> {b.stocks.split(", ").map(t => ( <span key={t} style={{ fontSize: 9, padding: "2px 7px", borderRadius: 4, background: `${b.color}12`, color: b.color, border: `1px solid ${b.color}25` }}>{t}</span> ))} </div> </div> ))} </div> )} {/* Footer */} <div style={{ maxWidth: 900, margin: "0 auto", padding: "0 20px 40px" }}> <div style={{ padding: "12px 16px", background: "rgba(244,63,94,0.05)", border: "1px solid rgba(244,63,94,0.15)", borderRadius: 8 }}> <p style={{ fontSize: 10, color: "#475569", margin: 0, lineHeight: 1.7 }}>⚠️ Not financial advice. Upside targets based on analyst consensus as of June 2026. Past performance does not guarantee future results. AI stocks carry significant volatility risk. Always do your own research.</p> </div> </div> </div> ); } Can you make this a nice website easy to use that I can publish

cat > /mnt/user-data/outputs/ai-hub.jsx << 'ENDOFFILE' import { useState } from "react"; // ─── CURRENT PRICES (June 3, 2026) ─────────────────────────────────────────── const STOCKS = [ // PHASE 2 · MEMORY { ticker:"MU", name:"Micron Technology", price:1035, target:900, buy:"Under $1,000", phase:2, phaseLabel:"MEMORY", type:"CORE", week:1, urgency:"🔴", action:"Top up before June 24", upside6m:"+20–50%", upside12m:"+40–80%", risk:"HIGH", upsideColor:"#00ff88", why:"The single biggest AI bottleneck. HBM memory sold out through 2027. June 24 earnings are your most time-sensitive catalyst. Already a $1.17T company.", catalyst:"June 24 earnings — 261% revenue growth expected" }, { ticker:"LRCX", name:"Lam Research", price:750, target:700, buy:"Under $730", phase:2, phaseLabel:"MEMORY", type:"CORE", week:2, urgency:"🟡", action:"Buy on red day", upside6m:"+15–25%", upside12m:"+25–40%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"Makes machines that build memory chips. Every MU fab expansion flows through LRCX equipment. Lower volatility, same thesis.", catalyst:"Memory fab expansion orders" }, { ticker:"TSM", name:"Taiwan Semiconductor", price:410, target:390, buy:"Under $400", phase:2, phaseLabel:"MEMORY", type:"NEW ADD", week:4, urgency:"🟡", action:"Buy on pullback", upside6m:"+10–20%", upside12m:"+20–45%", risk:"LOW-MEDIUM", upsideColor:"#00cc6a", why:"Physically manufactures every AI chip in existence — Nvidia, AMD, Apple. No competitor comes close. Strong Buy consensus.", catalyst:"AI inference ramp through 2027" }, // PHASE 2.5 · INFRASTRUCTURE { ticker:"VRT", name:"Vertiv Holdings", price:334, target:300, buy:"Under $310", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"CORE", week:0, urgency:"🟡", action:"Already holding", upside6m:"+15–30%", upside12m:"+30–50%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"King of data center cooling and power delivery. Up 102% YTD but demand is structural. $15B backlog, 2.9x book-to-bill.", catalyst:"Liquid cooling rising to 35-40% of new builds" }, { ticker:"ETN", name:"Eaton Corporation", price:380, target:355, buy:"Under $360", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"CORE", week:0, urgency:"🟡", action:"Already holding", upside6m:"+10–20%", upside12m:"+20–35%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"Electrical power management for data centers and grid. US declared power grid a national defense priority — ETN makes the switchgear.", catalyst:"US grid national defense priority" }, { ticker:"MTZ", name:"MasTec", price:180, target:160, buy:"Under $165", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"CORE", week:0, urgency:"🟡", action:"Already holding", upside6m:"+10–25%", upside12m:"+25–45%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"Builds transmission lines connecting data centers to the grid. Physical grid construction pure play, chronically undervalued.", catalyst:"Transmission line buildout" }, { ticker:"PWR", name:"Quanta Services", price:290, target:272, buy:"Under $275", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"CORE", week:4, urgency:"🟡", action:"Buy on weakness", upside6m:"+12–22%", upside12m:"+25–40%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"Grid construction pure-play with $44B record backlog. Fidelity fund managers named Quanta as how they play the AI power bottleneck.", catalyst:"AI data center power connections" }, { ticker:"TT", name:"Trane Technologies", price:460, target:440, buy:"Under $445", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"NEW ADD", week:2, urgency:"🟠", action:"Buy on red day", upside6m:"+10–20%", upside12m:"+20–35%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"Best cooling play nobody is talking about. Acquired LiquidStack for AI liquid cooling. Applied Solutions bookings surged 160% YoY. Record $10.7B backlog.", catalyst:"Record backlog, 160% AI bookings growth" }, { ticker:"SMCI", name:"Super Micro Computer", price:55, target:45, buy:"Under $48", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"CORE", week:0, urgency:"🟡", action:"Hold small position", upside6m:"+15–35%", upside12m:"+30–60%", risk:"HIGH", upsideColor:"#ffcc00", why:"Builds AI servers at scale. Trimmed to 3% due to governance risk. Keep position small — real revenue but real risk.", catalyst:"AI server demand from hyperscalers" }, { ticker:"FN", name:"Fabrinet", price:240, target:220, buy:"Under $225", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"NEW ADD", week:4, urgency:"🟡", action:"Buy on dip", upside6m:"+15–25%", upside12m:"+25–45%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"Manufactures optical components that COHR and LITE design. As optics demand explodes, Fabrinet makes them at scale. Lower risk than pure optics.", catalyst:"Optics manufacturing demand explosion" }, { ticker:"TEL", name:"TE Connectivity", price:200, target:192, buy:"Under $195", phase:2.5, phaseLabel:"INFRASTRUCTURE", type:"WATCHLIST",week:0, urgency:"🟡", action:"Watch for $195-200", upside6m:"+15–25%", upside12m:"+25–40%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"Makes connectors and sensors inside every AI data center. Q2 revenue up 15% YoY, record $5.3B orders up 25%. Down 12% despite great earnings.", catalyst:"Record orders, AI connector demand" }, // PHASE 3 · POWER & CUSTOM SILICON { ticker:"AVGO", name:"Broadcom", price:487, target:460, buy:"Post-earnings", phase:3, phaseLabel:"POWER & CUSTOM SILICON", type:"CORE", week:1, urgency:"🔴", action:"Check earnings tonight", upside6m:"+15–35%", upside12m:"+30–60%", risk:"MEDIUM", upsideColor:"#00ff88", why:"Single highest conviction pick. Custom AI chips for Google, Meta, Apple. AI revenue doubling to $40B FY2026. $73B AI backlog. Reports earnings TONIGHT.", catalyst:"June 3 earnings — AI revenue $40B path" }, { ticker:"CEG", name:"Constellation Energy", price:288, target:265, buy:"Under $275", phase:3, phaseLabel:"POWER & CUSTOM SILICON", type:"CORE", week:1, urgency:"🟢", action:"Buy tomorrow", upside6m:"+15–30%", upside12m:"+29%", risk:"MEDIUM", upsideColor:"#00ff88", why:"Best value entry in portfolio. Largest clean power producer in US. Q1 revenue up 64% YoY. Three Mile Island restart got FERC waiver today. Analyst target $372.", catalyst:"Three Mile Island restart + FERC waiver" }, { ticker:"VST", name:"Vistra Corp", price:158, target:145, buy:"Under $150", phase:3, phaseLabel:"POWER & CUSTOM SILICON", type:"NEW ADD", week:1, urgency:"🟢", action:"Buy tomorrow", upside6m:"+15–30%", upside12m:"+25–50%", risk:"MEDIUM", upsideColor:"#00ff88", why:"CEG's biggest competitor, cheaper right now. Second-largest nuclear fleet in US. Revenue grew 43% YoY in Q1 2026. Analyst median target $232.", catalyst:"Nuclear + gas power, Perry plant restart" }, { ticker:"GEV", name:"GE Vernova", price:970, target:920, buy:"Under $940", phase:3, phaseLabel:"POWER & CUSTOM SILICON", type:"CORE", week:2, urgency:"🟠", action:"Buy on pullback", upside6m:"+15–30%", upside12m:"+30–60%", risk:"MEDIUM", upsideColor:"#00ff88", why:"$163B backlog up 71% YoY. Booked $2.4B in AI data center orders in one quarter — more than all of 2025. Goldman target $1,328.", catalyst:"$200B backlog by 2027, guidance raised twice" }, { ticker:"MSFT", name:"Microsoft", price:470, target:440, buy:"Under $450", phase:3, phaseLabel:"POWER & CUSTOM SILICON", type:"NEW ADD", week:2, urgency:"🟡", action:"Optional add", upside6m:"+15–25%", upside12m:"+25–45%", risk:"LOW", upsideColor:"#00cc6a", why:"Safest AI compounder. $627B contracted backlog. Azure growing 40% YoY. Morningstar rates 30% undervalued. The platform everything else in AI runs on.", catalyst:"Azure 40% YoY growth + OpenAI monetization" }, // PHASE 4 · COMPUTE & INTERCONNECT { ticker:"NVDA", name:"Nvidia", price:222, target:200, buy:"Under $210", phase:4, phaseLabel:"COMPUTE & INTERCONNECT", type:"CORE", week:0, urgency:"🟡", action:"Already holding", upside6m:"+15–30%", upside12m:"+30–50%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"The GPU standard. 90% market share backed by CUDA moat. Jensen Huang calling MRVL the next trillion dollar company. Vera Rubin platform H2 2026.", catalyst:"Vera Rubin platform H2 2026" }, { ticker:"MRVL", name:"Marvell Technology", price:215, target:190, buy:"Under $195", phase:4, phaseLabel:"COMPUTE & INTERCONNECT", type:"CORE", week:3, urgency:"🟠", action:"Buy on pullback", upside6m:"+15–30%", upside12m:"+20–50%", risk:"MEDIUM-HIGH", upsideColor:"#00cc6a", why:"Jensen Huang called MRVL 'the next trillion dollar company' at Computex 2026. All-time high June 1. Custom AI silicon, 84% analyst buy ratings.", catalyst:"Nvidia endorsement + custom silicon orders" }, { ticker:"ALAB", name:"Astera Labs", price:120, target:105, buy:"Under $110", phase:4, phaseLabel:"COMPUTE & INTERCONNECT", type:"CORE", week:0, urgency:"🟡", action:"Already holding", upside6m:"+25–50%", upside12m:"+40–80%", risk:"HIGH", upsideColor:"#00ff88", why:"93% YoY revenue growth. Makes connectivity chips moving data inside AI data centers. Bandwidth bottleneck inside the rack is real.", catalyst:"Data center connectivity bottleneck" }, { ticker:"GLW", name:"Corning", price:50, target:46, buy:"Under $47", phase:4, phaseLabel:"COMPUTE & INTERCONNECT", type:"CORE", week:3, urgency:"🟡", action:"Buy on any dip", upside6m:"+10–20%", upside12m:"+20–35%", risk:"LOW-MEDIUM", upsideColor:"#00cc6a", why:"Makes fiber optic cables connecting AI data centers globally. Boring name, essential role. Low volatility ballast position.", catalyst:"Fiber demand from hyperscalers" }, { ticker:"CRDO", name:"Credo Technology", price:65, target:58, buy:"Under $60", phase:4, phaseLabel:"COMPUTE & INTERCONNECT", type:"CORE", week:3, urgency:"🟠", action:"Buy on weakness", upside6m:"+25–50%", upside12m:"+40–80%", risk:"HIGH", upsideColor:"#00ff88", why:"FY2026 revenue tripled. Makes Active Electrical Cables replacing copper in AI racks. 80%+ growth guided for FY2027.", catalyst:"AEC adoption inside AI clusters" }, { ticker:"ANET", name:"Arista Networks", price:95, target:88, buy:"Under $90", phase:4, phaseLabel:"COMPUTE & INTERCONNECT", type:"BUY LATER",week:3, urgency:"🟠", action:"Buy on pullback only", upside6m:"+15–27%", upside12m:"+25–45%", risk:"MEDIUM", upsideColor:"#ffcc00", why:"93% analyst buy ratings. Networks all hyperscaler AI infrastructure. Raised AI networking revenue target to $3.25B for 2026.", catalyst:"AI cluster scale-up, $3.25B networking target" }, // PHASE 4.5 · OPTICS { ticker:"COHR", name:"Coherent Corp", price:427, target:375, buy:"Under $385", phase:4.5,phaseLabel:"OPTICS BOTTLENECK", type:"NEW ADD", week:2, urgency:"🟡", action:"Wait for pullback", upside6m:"+15–30%", upside12m:"+30–60%", risk:"MEDIUM-HIGH", upsideColor:"#00ff88", why:"Just hit ALL-TIME HIGH $427 — up 455% in 52 weeks. Nvidia invested $2B. Book-to-bill exceeding 4:1. DO NOT CHASE — wait for $375-385 pullback.", catalyst:"Nvidia $2B investment, optics demand 20x" }, { ticker:"CIEN", name:"Ciena Corp", price:310, target:285, buy:"Under $295", phase:4.5,phaseLabel:"OPTICS BOTTLENECK", type:"NEW ADD", week:2, urgency:"🟠", action:"Buy on pullback", upside6m:"+15–30%", upside12m:"+30–55%", risk:"MEDIUM", upsideColor:"#00ff88", why:"Optical networking software and hardware. CEO called demand 'unprecedented.' Record $7B backlog, cloud revenue +76% YoY. Better entry than COHR right now.", catalyst:"Record $7B order backlog, cloud revenue +76%" }, { ticker:"LITE", name:"Lumentum", price:580, target:520, buy:"Under $540", phase:4.5,phaseLabel:"OPTICS BOTTLENECK", type:"NEW ADD", week:3, urgency:"🟡", action:"Buy on 10%+ pullback", upside6m:"+20–40%", upside12m:"+50–80%", risk:"HIGH", upsideColor:"#00ff88", why:"Sold out through 2027. Dominates indium phosphide lasers for 1.6T transceivers. Jefferies target $1,200. Morgan Stanley $900.", catalyst:"Sold out capacity 2027, Jefferies $1,200 target" }, // PHASE 5 · SPECULATIVE { ticker:"NBIS", name:"Nebius Group", price:271, target:238, buy:"Under $240", phase:5, phaseLabel:"SPECULATIVE / FUTURE", type:"NEW ADD", week:3, urgency:"🟡", action:"ONLY if under $240", upside6m:"+20–40%", upside12m:"+40–80%", risk:"HIGH", upsideColor:"#ffcc00", why:"Revenue +684% YoY. Nvidia CEO personally endorsed. $27B Meta deal. DO NOT CHASE at all-time highs — only buy if it pulls back to $230-240.", catalyst:"$27B Meta deal + Nvidia $2B investment" }, { ticker:"OKLO", name:"Oklo Inc", price:67, target:58, buy:"Under $60", phase:5, phaseLabel:"SPECULATIVE / FUTURE", type:"NEW ADD", week:4, urgency:"🟡", action:"Small spec buy on dip", upside6m:"+20–50%", upside12m:"+32%", risk:"VERY HIGH", upsideColor:"#ff6600", why:"Backed by Sam Altman. Micro reactors co-located with data centers. Meta deal in pipeline. Citi target $76. Pure speculation — small position only.", catalyst:"Microreactors for data centers, Meta pipeline" }, { ticker:"BWXT", name:"BWX Technologies", price:130, target:118, buy:"Under $120", phase:5, phaseLabel:"SPECULATIVE / FUTURE", type:"BUY LATER",week:0, urgency:"🟡", action:"Buy on pullbacks", upside6m:"+10–20%", upside12m:"+25–50%", risk:"MEDIUM-HIGH", upsideColor:"#ffcc00", why:"Builds SMRs and nuclear components for US government. AI power demand making nuclear the only viable baseload clean energy.", catalyst:"SMR policy + government contracts" }, { ticker:"SMR", name:"NuScale Power", price:22, target:17, buy:"Under $18", phase:5, phaseLabel:"SPECULATIVE / FUTURE", type:"BUY LATER",week:0, urgency:"🟡", action:"Very small spec only", upside6m:"+20–50%", upside12m:"+50–150%", risk:"VERY HIGH", upsideColor:"#ff6600", why:"Pure-play SMR company. Highest risk, highest reward nuclear bet. If SMRs become the AI power solution of the 2030s this captures it most directly.", catalyst:"First commercial SMR deployment" }, { ticker:"CCJ", name:"Cameco Corp", price:120, target:105, buy:"Under $110", phase:5, phaseLabel:"SPECULATIVE / FUTURE", type:"WATCHLIST",week:0, urgency:"🟡", action:"Buy on pullback", upside6m:"+10–20%", upside12m:"+20–35%", risk:"MEDIUM", upsideColor:"#00cc6a", why:"World's largest uranium producer. 20 analyst Buy ratings, zero Sells. Owns Westinghouse which services nuclear reactors globally.", catalyst:"Nuclear power demand for AI data centers" }, { ticker:"UUUU", name:"Energy Fuels", price:14, target:11, buy:"Under $12", phase:5, phaseLabel:"SPECULATIVE / FUTURE", type:"WATCHLIST",week:0, urgency:"🟡", action:"Wait for pullback", upside6m:"+15–30%", upside12m:"+30–60%", risk:"HIGH", upsideColor:"#ffcc00", why:"America's leading uranium miner. Also mines rare earths — Jan 2027 deadline banning Chinese rare earths in US defense. Revenue surged 112% YoY.", catalyst:"Rare earth ban Jan 2027 + uranium demand" }, { ticker:"ONDS", name:"Ondas Holdings", price:12, target:9, buy:"Under $10", phase:5, phaseLabel:"SPECULATIVE / FUTURE", type:"WATCHLIST",week:0, urgency:"🟡", action:"Small spec, wait for dip",upside6m:"+20–60%", upside12m:"+50%", risk:"VERY HIGH", upsideColor:"#ff6600", why:"Defense AI and autonomous drones. Q1 revenue +1,065% YoY. $457M backlog. Palantir partnership. Analyst target $19.50. Wait for Q2 earnings in August.", catalyst:"Q2 earnings August 2026, defense contracts" }, ]; const PHASE_CFG = { 2: { label:"PHASE 2 · MEMORY", color:"#a78bfa" }, 2.5: { label:"PHASE 2.5 · INFRASTRUCTURE", color:"#60a5fa" }, 3: { label:"PHASE 3 · POWER & CUSTOM SILICON", color:"#34d399" }, 4: { label:"PHASE 4 · COMPUTE & INTERCONNECT", color:"#f59e0b" }, 4.5: { label:"PHASE 4.5 · OPTICS BOTTLENECK", color:"#06b6d4" }, 5: { label:"PHASE 5 · SPECULATIVE", color:"#f43f5e" }, }; const WEEKS = [ { id:0, label:"ALREADY IN", date:"Current", color:"#a78bfa", deploy:1000 }, { id:1, label:"WEEK 1 — TOMORROW", date:"June 4", color:"#00ff88", deploy:1050 }, { id:2, label:"WEEK 2 — PAYCHECK 1", date:"June 10-14", color:"#60a5fa", deploy:1000 }, { id:3, label:"WEEK 2 — PAYCHECK 2", date:"June 20-24", color:"#f59e0b", deploy:1000 }, { id:4, label:"WEEK 4 — PAYCHECK 3", date:"July 1-7", color:"#f43f5e", deploy:950 }, ]; const WEEK_BUYS = { 0: [{t:"MU",$:850},{t:"NVDA",$:150}], 1: [{t:"VOO",$:400},{t:"CEG",$:200},{t:"VST",$:200},{t:"AVGO",$:150},{t:"COHR",$:100}], 2: [{t:"MU",$:350},{t:"TT",$:200},{t:"CIEN",$:200},{t:"GEV",$:150},{t:"LRCX",$:100}], 3: [{t:"NBIS",$:200},{t:"ANET",$:200},{t:"MRVL",$:150},{t:"GLW",$:150},{t:"LITE",$:150},{t:"CRDO",$:150}], 4: [{t:"VOO",$:300},{t:"TSM",$:200},{t:"PWR",$:150},{t:"FN",$:150},{t:"OKLO",$:150}], }; const BOTTLENECKS = [ { name:"OPTICS / LASERS", timing:"NOW", urgency:"🔴", stocks:"COHR, LITE, CIEN", color:"#f43f5e", detail:"Nvidia asked suppliers to increase laser capacity 20x. Optics market growing from $1.9B to $22.75B by 2030. This is the next MU." }, { name:"MEMORY", timing:"NOW → 2027", urgency:"🔴", stocks:"MU, LRCX", color:"#a78bfa", detail:"Samsung and SK Hynix warned of shortages through 2027. You're already positioned perfectly." }, { name:"COOLING / LIQUID", timing:"NOW → 2027", urgency:"🟠", stocks:"VRT, TT, FN", color:"#60a5fa", detail:"Liquid cooling rising from 5% to 35-40% of new data center builds. Ecolab paid $4.75B for a cooling company at 29x EBITDA." }, { name:"NUCLEAR POWER", timing:"2027 → 2029", urgency:"🟠", stocks:"CEG, VST, OKLO", color:"#34d399", detail:"AI data centers need 24/7 baseload power. Nuclear is the only answer at scale. Window to buy is now." }, { name:"CHIP MANUFACTURING", timing:"2027 → 2028", urgency:"🟡", stocks:"TSM, LRCX", color:"#f59e0b", detail:"As HBM moves to HBM4 for Nvidia's Rubin chips, manufacturing capacity becomes the constraint." }, { name:"SOVEREIGN AI", timing:"2027 → 2030", urgency:"🟢", stocks:"NBIS, CRWV", color:"#10b981", detail:"Every country wants its own AI infrastructure. Nebius signed $27B Meta deal, France commitments part of $61.7B." }, ]; const CATALYSTS = [ { date:"TONIGHT 2PM PST", event:"AVGO Q2 Earnings", detail:"Options pricing 10.65% move. AI revenue $10.7B expected. Beat = buy tomorrow morning.", color:"#f43f5e", urgent:true, stocks:["AVGO"] }, { date:"JUNE 4 — 6:30AM PST", event:"Market Open — BUY DAY", detail:"Buy VOO, CEG, VST. Check AVGO result first. This is your most important investing day.", color:"#00ff88", urgent:true, stocks:["VOO","CEG","VST","AVGO"] }, { date:"JUNE 10-14", event:"Paycheck 1 Deploy", detail:"Top up MU before June 24. Add TT, CIEN, GEV, LRCX. MU is most time sensitive.", color:"#60a5fa", urgent:false, stocks:["MU","TT","CIEN","GEV","LRCX"] }, { date:"JUNE 24", event:"MU Q3 Earnings", detail:"Your biggest catalyst. 261% revenue growth expected. Strong beat could drive 20-50% pop.", color:"#a78bfa", urgent:true, stocks:["MU"] }, { date:"JUNE 20-24", event:"Paycheck 2 Deploy", detail:"Add NBIS (if under $240), ANET, MRVL, GLW, LITE, CRDO.", color:"#f59e0b", urgent:false, stocks:["NBIS","ANET","MRVL","GLW","LITE","CRDO"] }, { date:"JULY 1-7", event:"Paycheck 3 — Hit $5K", detail:"Top up VOO. Add TSM, PWR, FN, OKLO. Portfolio complete.", color:"#34d399", urgent:false, stocks:["VOO","TSM","PWR","FN","OKLO"] }, { date:"AUGUST 2026", event:"ONDS Q2 Earnings", detail:"Defense AI catalyst. If they beat on revenue the stock moves hard toward $19.50 target.", color:"#f43f5e", urgent:false, stocks:["ONDS"] }, ]; const RISK_COLOR = { "LOW":"#10b981","LOW-MEDIUM":"#34d399","MEDIUM":"#f59e0b","MEDIUM-HIGH":"#fb923c","HIGH":"#f43f5e","VERY HIGH":"#dc2626" }; const TYPE_STYLE = { "CORE": { bg:"#0f1a2e", color:"#64748b", border:"#1e293b" }, "NEW ADD": { bg:"rgba(52,211,153,.15)", color:"#34d399", border:"#10b981" }, "BUY LATER":{ bg:"rgba(245,158,11,.15)", color:"#fbbf24", border:"#f59e0b" }, "WATCHLIST":{ bg:"rgba(100,116,139,.15)", color:"#94a3b8", border:"#475569" }, }; const URG_COLOR = { "🔴":"#f43f5e","🟠":"#fb923c","🟡":"#f59e0b","🟢":"#00ff88" }; const URG_LABEL = { "🔴":"ACT NOW","🟠":"THIS WEEK","🟡":"BE PATIENT","🟢":"BUY NOW" }; export default function App() { const [page, setPage] = useState("portfolio"); const [exp, setExp] = useState(null); const [phaseF, setPhaseF] = useState("all"); const [search, setSearch] = useState(""); const [weekTab, setWeekTab] = useState(1); const phases = [2,2.5,3,4,4.5,5]; const totalDeploy = WEEKS.reduce((a,w)=>a+w.deploy,0); const filtered = search ? STOCKS.filter(s=>s.ticker.toLowerCase().includes(search.toLowerCase())||s.name.toLowerCase().includes(search.toLowerCase())) : null; const grouped = phases.reduce((acc,p)=>{ const items = phaseF==="all" ? STOCKS.filter(s=>s.phase===p) : STOCKS.filter(s=>s.phase===p&&phaseF===String(p)); if(items.length) acc[p]=items; return acc; },{}); const PAGES = [ {id:"portfolio",label:"PORTFOLIO"}, {id:"watchlist",label:"WATCHLIST"}, {id:"roadmap",label:"ROADMAP"}, {id:"bottlenecks",label:"BOTTLENECKS"}, {id:"catalysts",label:"CATALYSTS"}, {id:"growth",label:"GROWTH"}, ]; return ( <div style={{minHeight:"100vh",background:"#030712",color:"#e2e8f0",fontFamily:"'DM Mono',monospace"}}> <style>{` @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@700;800;900&display=swap'); *{box-sizing:border-box;margin:0;padding:0;} ::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:#1e293b} .btn{cursor:pointer;border:none;transition:all .15s}.btn:hover{opacity:.8} .row{cursor:pointer;transition:background .1s}.row:hover{background:rgba(255,255,255,.03)!important} @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .fu{animation:fadeUp .25s ease forwards} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}.pulse{animation:pulse 2s infinite} input{outline:none}input::placeholder{color:#334155} `}</style> {/* NAV */} <div style={{background:"#030712",borderBottom:"1px solid #0f2040",position:"sticky",top:0,zIndex:100}}> <div style={{maxWidth:960,margin:"0 auto",padding:"0 16px"}}> <div style={{display:"flex",alignItems:"center",gap:8,padding:"12px 0 8px",borderBottom:"1px solid #0a1628"}}> <div style={{width:6,height:6,borderRadius:"50%",background:"#00ff88",boxShadow:"0 0 8px #00ff88"}} className="pulse"/> <span style={{fontFamily:"Syne",fontSize:13,fontWeight:900,color:"#e2e8f0",letterSpacing:".03em"}}>AI BOTTLENECK HUB</span> <span style={{fontSize:9,color:"#334155",marginLeft:4,letterSpacing:".1em"}}>JUNE 3, 2026</span> </div> <div style={{display:"flex",gap:2,padding:"6px 0",overflowX:"auto"}}> {PAGES.map(p=>( <button key={p.id} className="btn" onClick={()=>setPage(p.id)} style={{padding:"5px 10px",borderRadius:6,fontSize:9,letterSpacing:".1em",fontFamily:"DM Mono",whiteSpace:"nowrap",background:page===p.id?"#0f2040":"transparent",color:page===p.id?"#60a5fa":"#475569",border:`1px solid ${page===p.id?"#1e3a5f":"transparent"}`}}>{p.label}</button> ))} </div> </div> </div> <div style={{maxWidth:960,margin:"0 auto",padding:"20px 16px 60px"}}> {/* ── PORTFOLIO PAGE ── */} {page==="portfolio"&&( <div className="fu"> <div style={{marginBottom:20}}> <div style={{fontSize:9,letterSpacing:".15em",color:"#475569",marginBottom:4}}>AI BOTTLENECK PORTFOLIO · {STOCKS.length} POSITIONS · 6 PHASES</div> <h2 style={{fontFamily:"Syne",fontSize:28,fontWeight:900,background:"linear-gradient(135deg,#e2e8f0,#60a5fa,#34d399)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",marginBottom:16}}>FULL PORTFOLIO</h2> <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(90px,1fr))",gap:8,marginBottom:16}}> {[{l:"POSITIONS",v:STOCKS.length},{l:"TARGET",v:"$5,000"},{l:"PHASES",v:"2→5"},{l:"NEW ADDS",v:STOCKS.filter(s=>s.type==="NEW ADD").length,c:"#34d399"},{l:"WATCHLIST",v:STOCKS.filter(s=>s.type==="WATCHLIST").length,c:"#94a3b8"}].map((s,i)=>( <div key={i} style={{background:"#060e1e",border:"1px solid #0f2040",borderRadius:8,padding:"10px 12px"}}> <div style={{fontSize:8,letterSpacing:".1em",color:"#475569",marginBottom:4}}>{s.l}</div> <div style={{fontSize:18,fontFamily:"Syne",fontWeight:800,color:s.c||"#e2e8f0"}}>{s.v}</div> </div> ))} </div> <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Search ticker or name..." style={{width:"100%",background:"#060e1e",border:"1px solid #0f2040",borderRadius:8,padding:"8px 12px",fontSize:12,color:"#e2e8f0",fontFamily:"DM Mono",marginBottom:12}}/> {!search&&( <div style={{display:"flex",gap:6,flexWrap:"wrap"}}> <button className="btn" onClick={()=>setPhaseF("all")} style={{padding:"4px 10px",borderRadius:14,fontSize:9,background:phaseF==="all"?"#60a5fa":"#0f1a2e",color:phaseF==="all"?"#000":"#475569",border:`1px solid ${phaseF==="all"?"#60a5fa":"#1e293b"}`}}>ALL</button> {phases.map(p=>( <button key={p} className="btn" onClick={()=>setPhaseF(String(p))} style={{padding:"4px 10px",borderRadius:14,fontSize:9,background:phaseF===String(p)?PHASE_CFG[p].color:"#0f1a2e",color:phaseF===String(p)?"#000":"#475569",border:`1px solid ${phaseF===String(p)?PHASE_CFG[p].color:"#1e293b"}`}}>{PHASE_CFG[p].label.split("·")[1]?.trim().split(" ").slice(0,1).join("")}</button> ))} </div> )} </div> {/* Search results */} {filtered&&( <div> <div style={{fontSize:9,color:"#475569",letterSpacing:".1em",marginBottom:10}}>{filtered.length} RESULTS</div> {filtered.map((s,i)=>{ const pc=PHASE_CFG[s.phase]; const ts=TYPE_STYLE[s.type]||TYPE_STYLE["CORE"]; return( <div key={i} className="row" onClick={()=>setExp(exp===s.ticker?null:s.ticker)} style={{background:"#060e1e",border:`1px solid ${pc.color}20`,borderRadius:8,padding:"12px 14px",marginBottom:6}}> <div style={{display:"grid",gridTemplateColumns:"50px 1fr auto auto auto",alignItems:"center",gap:10}}> <span style={{fontSize:13,fontWeight:700,color:pc.color,fontFamily:"Syne"}}>{s.ticker}</span> <div> <div style={{fontSize:11,color:"#94a3b8"}}>{s.name}</div> <div style={{fontSize:9,color:"#475569",marginTop:2}}>{pc.label}</div> </div> <span style={{fontSize:11,color:"#e2e8f0",fontFamily:"Syne",fontWeight:700}}>${s.price.toLocaleString()}</span> <span style={{fontSize:10,color:"#00ff88"}}>{s.buy}</span> <span style={{fontSize:10,color:s.urgency==="🔴"?"#f43f5e":s.urgency==="🟢"?"#00ff88":"#f59e0b"}}>{s.urgency}</span> </div> {exp===s.ticker&&( <div style={{marginTop:12,padding:"12px",background:`${pc.color}08`,borderRadius:6,border:`1px solid ${pc.color}20`}}> <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:10}}> <div style={{background:"#030712",borderRadius:6,padding:10}}> <div style={{fontSize:8,color:"#475569",marginBottom:6,letterSpacing:".1em"}}>PRICE TARGETS</div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}><span style={{fontSize:10,color:"#64748b"}}>Current</span><span style={{fontSize:11,color:"#e2e8f0",fontWeight:700}}>${s.price.toLocaleString()}</span></div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}><span style={{fontSize:10,color:"#64748b"}}>Buy target</span><span style={{fontSize:11,color:"#00ff88"}}>{s.buy}</span></div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}><span style={{fontSize:10,color:"#64748b"}}>6 month</span><span style={{fontSize:11,color:s.upsideColor}}>{s.upside6m}</span></div> <div style={{display:"flex",justifyContent:"space-between"}}><span style={{fontSize:10,color:"#64748b"}}>12 month</span><span style={{fontSize:11,color:s.upsideColor}}>{s.upside12m}</span></div> </div> <div style={{background:"#030712",borderRadius:6,padding:10}}> <div style={{fontSize:8,color:"#475569",marginBottom:6,letterSpacing:".1em"}}>DETAILS</div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}><span style={{fontSize:10,color:"#64748b"}}>Type</span><span style={{fontSize:10,color:TYPE_STYLE[s.type]?.color||"#94a3b8"}}>{s.type}</span></div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:4}}><span style={{fontSize:10,color:"#64748b"}}>Risk</span><span style={{fontSize:10,color:RISK_COLOR[s.risk]}}>{s.risk}</span></div> <div style={{display:"flex",justifyContent:"space-between"}}><span style={{fontSize:10,color:"#64748b"}}>Action</span><span style={{fontSize:10,color:"#94a3b8",textAlign:"right",maxWidth:100}}>{s.action}</span></div> </div> </div> <div style={{background:"#030712",borderRadius:6,padding:10,marginBottom:8}}><div style={{fontSize:8,color:pc.color,marginBottom:4,letterSpacing:".1em"}}>CATALYST</div><p style={{fontSize:11,color:"#94a3b8",margin:0}}>{s.catalyst}</p></div> <div style={{background:"#030712",borderRadius:6,padding:10}}><div style={{fontSize:8,color:pc.color,marginBottom:4,letterSpacing:".1em"}}>WHY INVEST</div><p style={{fontSize:12,color:"#94a3b8",lineHeight:1.7,margin:0}}>{s.why}</p></div> </div> )} </div> ); })} </div> )} {/* Grouped by phase */} {!filtered&&Object.entries(grouped).map(([phase,stocks])=>{ const pc=PHASE_CFG[parseFloat(phase)]; const phaseAlloc=stocks.reduce((a,s)=>a+s.phase,0); return( <div key={phase} style={{marginBottom:22}}> <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:10}}> <div style={{width:12,height:1,background:pc.color}}/> <span style={{fontSize:9,letterSpacing:".14em",color:pc.color}}>{pc.label}</span> <div style={{flex:1,height:1,background:`linear-gradient(90deg,${pc.color}30,transparent)`}}/> </div> <div style={{border:`1px solid ${pc.color}20`,borderRadius:10,overflow:"hidden",background:`${pc.color}06`}}> {stocks.map((s,i)=>{ const isOpen=exp===s.ticker; const ts=TYPE_STYLE[s.type]||TYPE_STYLE["CORE"]; return( <div key={s.ticker}> <div className="row" onClick={()=>setExp(isOpen?null:s.ticker)} style={{display:"grid",gridTemplateColumns:"48px 1fr 70px 70px 50px 24px",alignItems:"center",gap:8,padding:"13px 14px",borderBottom:(i<stocks.length-1||isOpen)?`1px solid ${pc.color}12`:"none",background:isOpen?`${pc.color}06`:"transparent"}}> <span style={{fontSize:12,fontWeight:700,color:pc.color,fontFamily:"Syne"}}>{s.ticker}</span> <div> <div style={{fontSize:10,color:"#64748b",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{s.name}</div> </div> <div style={{textAlign:"right"}}> <div style={{fontSize:11,color:"#e2e8f0",fontWeight:700}}>${s.price.toLocaleString()}</div> <div style={{fontSize:9,color:"#475569"}}>current</div> </div> <div style={{textAlign:"right"}}> <div style={{fontSize:10,color:"#00ff88"}}>{s.buy}</div> <div style={{fontSize:8,color:"#334155"}}>target</div> </div> <div style={{textAlign:"center"}}> <span style={{fontSize:9,padding:"2px 6px",borderRadius:3,background:ts.bg,color:ts.color,border:`1px solid ${ts.border}`}}>{s.type.split(" ")[0]}</span> </div> <span style={{fontSize:10,color:"#475569",display:"inline-block",transition:"transform .2s",transform:isOpen?"rotate(180deg)":"none",textAlign:"center"}}>▼</span> </div> {isOpen&&( <div className="fu" style={{padding:"14px 16px 16px",borderBottom:i<stocks.length-1?`1px solid ${pc.color}12`:"none",background:`${pc.color}04`}}> <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:10}}> <div style={{background:"#060e1e",border:"1px solid #0f2040",borderRadius:7,padding:12}}> <div style={{fontSize:8,color:"#475569",marginBottom:8,letterSpacing:".1em"}}>PRICE INFO</div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:5}}><span style={{fontSize:10,color:"#64748b"}}>Current price</span><span style={{fontSize:12,color:"#e2e8f0",fontWeight:700}}>${s.price.toLocaleString()}</span></div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:5}}><span style={{fontSize:10,color:"#64748b"}}>Buy target</span><span style={{fontSize:11,color:"#00ff88"}}>{s.buy}</span></div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:5}}><span style={{fontSize:10,color:"#64748b"}}>6-month</span><span style={{fontSize:11,color:s.upsideColor}}>{s.upside6m}</span></div> <div style={{display:"flex",justifyContent:"space-between"}}><span style={{fontSize:10,color:"#64748b"}}>12-month</span><span style={{fontSize:11,color:s.upsideColor}}>{s.upside12m}</span></div> </div> <div style={{background:"#060e1e",border:"1px solid #0f2040",borderRadius:7,padding:12}}> <div style={{fontSize:8,color:"#475569",marginBottom:8,letterSpacing:".1em"}}>DETAILS</div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:5}}><span style={{fontSize:10,color:"#64748b"}}>Type</span><span style={{fontSize:10,color:ts.color}}>{s.type}</span></div> <div style={{display:"flex",justifyContent:"space-between",marginBottom:5}}><span style={{fontSize:10,color:"#64748b"}}>Risk</span><span style={{fontSize:10,color:RISK_COLOR[s.risk]}}>{s.risk}</span></div> <div style={{display:"flex",justifyContent:"space-between"}}><span style={{fontSize:10,color:"#64748b"}}>Action</span><span style={{fontSize:10,color:"#94a3b8"}}>{s.action}</span></div> </div> </div> <div style={{background:"#060e1e",border:`1px solid ${pc.color}20`,borderRadius:7,padding:12,marginBottom:8}}><div style={{fontSize:8,color:pc.color,marginBottom:5,letterSpacing:".1em"}}>CATALYST</div><p style={{fontSize:11,color:"#94a3b8",margin:0}}>{s.catalyst}</p></div> <div style={{background:"#060e1e",border:`1px solid ${pc.color}20`,borderRadius:7,padding:12}}><div style={{fontSize:8,color:pc.color,marginBottom:5,letterSpacing:".1em"}}>WHY INVEST</div><p style={{fontSize:12,color:"#94a3b8",lineHeight:1.7,margin:0}}>{s.why}</p></div> </div> )} </div> ); })} </div> </div> ); })} {/* Allocation bar */} {!filtered&&( <div style={{background:"#060e1e",border:"1px solid #0f2040",borderRadius:8,padding:14,marginTop:8}}> <div style={{fontSize:8,letterSpacing:".1em",color:"#475569",marginBottom:8}}>PHASE ALLOCATION</div> <div style={{display:"flex",height:8,borderRadius:4,overflow:"hidden",gap:1}}> {phases.map(p=>{const alloc=STOCKS.filter(s=>s.phase===p).length;return<div key={p} style={{flex:alloc,background:PHASE_CFG[p].color,opacity:.8}}/>})} </div> <div style={{display:"flex",flexWrap:"wrap",gap:10,marginTop:8}}> {phases.map(p=>{const alloc=STOCKS.filter(s=>s.phase===p).length;return( <div key={p} style={{display:"flex",alignItems:"center",gap:4}}> <div style={{width:6,height:6,borderRadius:2,background:PHASE_CFG[p].color}}/> <span style={{fontSize:8,color:"#64748b"}}>{PHASE_CFG[p].label.split("·")[0].trim().replace("PHASE ","Ph")}: <span style={{color:"#94a3b8"}}>{alloc}</span></span> </div> );})} </div> </div> )} </div> )} {/* ── WATCHLIST PAGE ── */} {page==="watchlist"&&( <div className="fu"> <div style={{marginBottom:20}}> <div style={{fontSize:9,letterSpacing:".15em",color:"#475569",marginBottom:4}}>PRE-MARKET WATCHLIST · UPDATED JUNE 3, 2026</div> <h2 style={{fontFamily:"Syne",fontSize:28,fontWeight:900,color:"#e2e8f0",marginBottom:4}}>TARGET BUY PRICES</h2> <p style={{fontSize:11,color:"#475569",marginBottom:16}}>Market opens 6:30am PST · Check these levels each morning</p> <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="Search ticker..." style={{width:"100%",background:"#060e1e",border:"1px solid #0f2040",borderRadius:8,padding:"8px 12px",fontSize:12,color:"#e2e8f0",fontFamily:"DM Mono",marginBottom:14}}/> </div> {/* Col headers */} <div style={{display:"grid",gridTemplateColumns:"50px 1fr 80px 90px 80px 70px",gap:8,padding:"4px 14px",marginBottom:4}}> {["TICKER","NAME","CURRENT","BUY TARGET","ACTION","URGENCY"].map(h=><div key={h} style={{fontSize:7,letterSpacing:".1em",color:"#334155"}}>{h}</div>)} </div> {(filtered||STOCKS).map((s,i)=>{ const pc=PHASE_CFG[s.phase]; return( <div key={i} className="row" style={{display:"grid",gridTemplateColumns:"50px 1fr 80px 90px 80px 70px",alignItems:"center",gap:8,padding:"11px 14px",background:i%2===0?"transparent":"rgba(255,255,255,.01)",borderBottom:"1px solid #0a1628"}}> <span style={{fontSize:12,fontWeight:700,color:pc.color,fontFamily:"Syne"}}>{s.ticker}</span> <span style={{fontSize:10,color:"#64748b",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{s.name}</span> <span style={{fontSize:11,color:"#e2e8f0",fontWeight:700,textAlign:"right"}}>${s.price.toLocaleString()}</span> <span style={{fontSize:10,color:"#00ff88",textAlign:"center"}}>{s.buy}</span> <span style={{fontSize:9,color:"#94a3b8",lineHeight:1.4}}>{s.action}</span> <div style={{display:"flex",flexDirection:"column",alignItems:"center"}}> <span style={{fontSize:13}}>{s.urgency}</span> <span style={{fontSize:7,color:URG_COLOR[s.urgency],letterSpacing:".06em"}}>{URG_LABEL[s.urgency]}</span> </div> </div> ); })} <div style={{marginTop:16,display:"flex",gap:12,flexWrap:"wrap"}}> {Object.entries(URG_LABEL).map(([e,l])=>( <div key={e} style={{display:"flex",alignItems:"center",gap:5}}> <span style={{fontSize:12}}>{e}</span> <span style={{fontSize:8,color:URG_COLOR[e],letterSpacing:".08em"}}>{l}</span> </div> ))} </div> </div> )} {/* ── ROADMAP PAGE ── */} {page==="roadmap"&&( <div className="fu"> <div style={{marginBottom:20}}> <div style={{fontSize:9,letterSpacing:".15em",color:"#475569",marginBottom:4}}>4-WEEK DEPLOYMENT ROADMAP</div> <h2 style={{fontFamily:"Syne",fontSize:28,fontWeight:900,color:"#e2e8f0",marginBottom:4}}>$2,050 → $5,000</h2> <div style={{background:"#060e1e",border:"1px solid #0f2040",borderRadius:8,padding:14,marginBottom:16}}> <div style={{display:"flex",justifyContent:"space-between",marginBottom:6}}><span style={{fontSize:9,color:"#475569"}}>TOTAL TARGET</span><span style={{fontSize:12,color:"#34d399",fontFamily:"Syne"}}>${totalDeploy.toLocaleString()} / $5,000</span></div> <div style={{height:6,background:"#0f1a2e",borderRadius:3,overflow:"hidden"}}><div style={{height:"100%",width:`${(totalDeploy/5000)*100}%`,background:"linear-gradient(90deg,#34d399,#60a5fa)",borderRadius:3}}/></div> </div> </div> <div style={{display:"flex",gap:6,flexWrap:"wrap",marginBottom:16}}> {WEEKS.map(w=><button key={w.id} className="btn" onClick={()=>setWeekTab(w.id)} style={{padding:"5px 10px",borderRadius:6,fontSize:9,background:weekTab===w.id?w.color:"#060e1e",color:weekTab===w.id?"#000":"#475569",border:`1px solid ${weekTab===w.id?w.color:"#0f2040"}`}}>{w.label}</button>)} </div> {WEEKS.filter(w=>w.id===weekTab).map(w=>( <div key={w.id} className="fu"> <div style={{background:"#060e1e",border:`1px solid ${w.color}30`,borderRadius:10,padding:16,marginBottom:12}}> <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}> <div> <div style={{fontSize:9,color:w.color,letterSpacing:".12em",marginBottom:3}}>{w.label}</div> <div style={{fontSize:15,fontFamily:"Syne",fontWeight:800,color:"#e2e8f0"}}>{w.date}</div> </div> <div style={{textAlign:"right"}}> <div style={{fontSize:24,fontFamily:"Syne",fontWeight:900,color:w.color}}>${w.deploy.toLocaleString()}</div> <div style={{fontSize:8,color:"#475569"}}>DEPLOY</div> </div> </div> {WEEK_BUYS[w.id].map((b,i)=>{ const s=STOCKS.find(x=>x.ticker===b.t)||{}; return( <div key={i} style={{display:"flex",alignItems:"center",gap:10,marginBottom:8}}> <span style={{fontSize:12,fontWeight:700,fontFamily:"Syne",color:w.color,minWidth:44}}>{b.t}</span> <div style={{flex:1,height:4,background:"#0f1a2e",borderRadius:2,overflow:"hidden"}}><div style={{height:"100%",width:`${(b.$/(w.deploy||1))*100}%`,background:w.color,opacity:.7,borderRadius:2}}/></div> <span style={{fontSize:11,color:"#e2e8f0",minWidth:36,textAlign:"right"}}>${b.$}</span> <span style={{fontSize:9,color:"#475569",minWidth:80}}>{s.buy||"market price"}</span> </div> ); })} </div> <div style={{padding:"10px 14px",background:`${w.color}08`,border:`1px solid ${w.color}20`,borderRadius:8}}> <p style={{fontSize:10,color:"#64748b",margin:0,lineHeight:1.6}}>💡 Red market days are your best entry points. If the whole market drops 2-3%, back up the truck on your highest conviction names.</p> </div> </div> ))} </div> )} {/* ── BOTTLENECKS PAGE ── */} {page==="bottlenecks"&&( <div className="fu"> <div style={{marginBottom:20}}> <div style={{fontSize:9,letterSpacing:".15em",color:"#475569",marginBottom:4}}>UPCOMING AI SUPPLY CONSTRAINTS</div> <h2 style={{fontFamily:"Syne",fontSize:28,fontWeight:900,color:"#e2e8f0"}}>Next MU-Type Explosions</h2> </div> {BOTTLENECKS.map((b,i)=>( <div key={i} style={{background:"#060e1e",border:`1px solid ${b.color}25`,borderRadius:10,padding:16,marginBottom:12}}> <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}> <div style={{display:"flex",alignItems:"center",gap:8}}> <span style={{fontSize:18}}>{b.urgency}</span> <span style={{fontSize:14,fontFamily:"Syne",fontWeight:800,color:b.color}}>{b.name}</span> </div> <span style={{fontSize:10,color:"#475569",background:"#0f1a2e",padding:"3px 8px",borderRadius:4}}>{b.timing}</span> </div> <p style={{fontSize:11,color:"#94a3b8",lineHeight:1.7,marginBottom:10}}>{b.detail}</p> <div style={{display:"flex",gap:6,flexWrap:"wrap"}}> {b.stocks.split(", ").map(t=><span key={t} style={{fontSize:9,padding:"2px 8px",borderRadius:4,background:`${b.color}12`,color:b.color,border:`1px solid ${b.color}25`}}>{t}</span>)} </div> </div> ))} </div> )} {/* ── CATALYSTS PAGE ── */} {page==="catalysts"&&( <div className="fu"> <div style={{marginBottom:20}}> <div style={{fontSize:9,letterSpacing:".15em",color:"#475569",marginBottom:4}}>UPCOMING EVENTS & CATALYSTS</div> <h2 style={{fontFamily:"Syne",fontSize:28,fontWeight:900,color:"#e2e8f0"}}>Event Calendar</h2> </div> {CATALYSTS.map((c,i)=>( <div key={i} style={{background:"#060e1e",border:`1px solid ${c.color}${c.urgent?"50":"20"}`,borderRadius:10,padding:16,marginBottom:12}}> <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:8}}> <div> <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:3}}> {c.urgent&&<span style={{fontSize:7,background:c.color,color:"#000",padding:"1px 5px",borderRadius:3,letterSpacing:".1em"}}>URGENT</span>} <span style={{fontSize:9,color:c.color,letterSpacing:".1em"}}>{c.date}</span> </div> <div style={{fontSize:15,fontFamily:"Syne",fontWeight:700,color:"#e2e8f0"}}>{c.event}</div> </div> </div> <p style={{fontSize:11,color:"#94a3b8",lineHeight:1.7,marginBottom:10}}>{c.detail}</p> <div style={{display:"flex",gap:6,flexWrap:"wrap"}}> {c.stocks.map(t=><span key={t} style={{fontSize:9,padding:"2px 8px",borderRadius:4,background:`${c.color}15`,color:c.color,border:`1px solid ${c.color}30`}}>{t}</span>)} </div> </div> ))} </div> )} {/* ── GROWTH PAGE ── */} {page==="growth"&&( <div className="fu"> <div style={{marginBottom:20}}> <div style={{fontSize:9,letterSpacing:".15em",color:"#475569",marginBottom:4}}>12-MONTH PROJECTIONS</div> <h2 style={{fontFamily:"Syne",fontSize:28,fontWeight:900,color:"#e2e8f0"}}>Portfolio Growth</h2> </div> <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:10,marginBottom:24}}> {[{l:"CONSERVATIVE",p:"25–35%",v:"$6,250–6,750",c:"#60a5fa"},{l:"BASE CASE",p:"45–60%",v:"$7,250–8,000",c:"#34d399"},{l:"BULL CASE",p:"70–100%",v:"$8,500–10,000",c:"#00ff88"}].map((g,i)=>( <div key={i} style={{background:"#060e1e",border:`1px solid ${g.c}30`,borderRadius:10,padding:14,textAlign:"center"}}> <div style={{fontSize:8,letterSpacing:".1em",color:"#475569",marginBottom:6}}>{g.l}</div> <div style={{fontSize:22,fontFamily:"Syne",fontWeight:900,color:g.c,marginBottom:4}}>{g.p}</div> <div style={{fontSize:11,color:"#94a3b8"}}>{g.v}</div> <div style={{fontSize:8,color:"#475569",marginTop:4}}>on $5,000</div> </div> ))} </div> <div style={{background:"#060e1e",border:"1px solid #0f2040",borderRadius:10,padding:16,marginBottom:16}}> <div style={{fontSize:8,letterSpacing:".1em",color:"#475569",marginBottom:12}}>PER STOCK UPSIDE TARGETS</div> {STOCKS.filter(s=>!["BUY LATER","WATCHLIST"].includes(s.type)).map(s=>{ const pc=PHASE_CFG[s.phase]; return( <div key={s.ticker} style={{display:"grid",gridTemplateColumns:"48px 1fr 70px 70px",alignItems:"center",gap:10,padding:"7px 0",borderBottom:"1px solid #0a1628"}}> <span style={{fontSize:11,fontWeight:700,color:pc.color,fontFamily:"Syne"}}>{s.ticker}</span> <div style={{height:3,background:"#0f1a2e",borderRadius:2,overflow:"hidden"}}><div style={{height:"100%",width:`${Math.min(90,parseInt(s.upside12m)*0.6||20)}%`,background:s.upsideColor,opacity:.6,borderRadius:2}}/></div> <span style={{fontSize:9,color:"#64748b",textAlign:"right"}}>{s.upside6m}</span> <span style={{fontSize:10,color:s.upsideColor,textAlign:"right",fontWeight:700}}>{s.upside12m}</span> </div> ); })} </div> <div style={{background:"rgba(244,63,94,.06)",border:"1px solid rgba(244,63,94,.2)",borderRadius:8,padding:14}}> <div style={{fontSize:8,color:"#f43f5e",letterSpacing:".1em",marginBottom:8}}>KEY RISKS</div> {["Hyperscaler capex cuts — if Microsoft or Google reduces AI spending the whole portfolio feels it","MU June 24 earnings miss — your biggest single position risk before that date","Macro recession — would hit everything short term but AI thesis survives","China/Taiwan conflict — would hurt TSM and semiconductor supply chains"].map((r,i)=>( <div key={i} style={{display:"flex",gap:8,marginBottom:6}}> <span style={{color:"#f43f5e",fontSize:11}}>⚠</span> <span style={{fontSize:11,color:"#94a3b8",lineHeight:1.6}}>{r}</span> </div> ))} </div> </div> )} {/* Footer */} <div style={{marginTop:24,padding:"10px 14px",background:"rgba(244,63,94,.05)",border:"1px solid rgba(244,63,94,.15)",borderRadius:8}}> <p style={{fontSize:9,color:"#475569",margin:0,lineHeight:1.7}}>⚠️ Not financial advice. Prices updated June 3, 2026. Upside targets based on analyst consensus. Past performance does not guarantee future results. AI stocks carry significant volatility risk. Always verify prices in Webull before trading.</p> </div> </div> </div> ); } ENDOFFILE echo "Done" make this into a site please