// Mini product UI mocks — used in hero + product section
// These are real React components rendered like a tiny dashboard, not images

// Seeded random + tiny sparkline path
function _rng(s){ return function(){ s|=0; s=s+0x6D2B79F5|0; let t=Math.imul(s^s>>>15,1|s); t=t+Math.imul(t^t>>>7,61|t)^t; return ((t^t>>>14)>>>0)/4294967296; }; }
function _series(n, seed, drift=0.5, vol=1.5){ const rng=_rng(seed); let v=100; const arr=[]; for(let i=0;i<n;i++){ v += (rng()-0.5+drift*0.06)*vol; arr.push(v);} return arr; }
function _pathOf(values, w, h, pad=4){ if (!values?.length) return {p:"",a:""}; const mn=Math.min(...values), mx=Math.max(...values); const r=mx-mn||1; const xs=(w-pad*2)/(values.length-1); let d=""; values.forEach((v,i)=>{ const x=pad+i*xs; const y=pad+(h-pad*2)*(1-(v-mn)/r); d += (i===0?"M":"L")+x.toFixed(1)+" "+y.toFixed(1)+" "; }); const a=d+` L ${(w-pad).toFixed(1)} ${(h-pad).toFixed(1)} L ${pad.toFixed(1)} ${(h-pad).toFixed(1)} Z`; return {p:d.trim(), a:a.trim()}; }

function MiniSpark({ values, w=120, h=36, up=true }) {
  const { p, a } = _pathOf(values, w, h, 2);
  const c = up?"#3CFFAE":"#FF5577";
  const id = React.useId().replace(/:/g,"");
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h} className="block">
      <defs>
        <linearGradient id={"sg"+id} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={c} stopOpacity="0.45"/>
          <stop offset="100%" stopColor={c} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={a} fill={`url(#sg${id})`}/>
      <path d={p} stroke={c} strokeWidth="1.3" fill="none"/>
    </svg>
  );
}

function MiniArea({ values, w=560, h=180, animate=true }) {
  const { p, a } = _pathOf(values, w, h, 6);
  const id = React.useId().replace(/:/g,"");
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="w-full h-full block" preserveAspectRatio="none">
      <defs>
        <linearGradient id={"g"+id} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#5EE7FF" stopOpacity="0.45"/>
          <stop offset="60%" stopColor="#9B7BFF" stopOpacity="0.10"/>
          <stop offset="100%" stopColor="#9B7BFF" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id={"s"+id} x1="0" x2="1">
          <stop offset="0%" stopColor="#5EE7FF"/>
          <stop offset="100%" stopColor="#9B7BFF"/>
        </linearGradient>
        <filter id={"gl"+id} x="-10%" y="-50%" width="120%" height="200%">
          <feGaussianBlur stdDeviation="2.5" result="b"/>
          <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>
      {[0.25,0.5,0.75].map((y,i)=><line key={i} x1="0" x2={w} y1={h*y} y2={h*y} stroke="rgba(255,255,255,0.04)"/>)}
      <path d={a} fill={`url(#g${id})`}/>
      <path d={p} stroke={`url(#s${id})`} strokeWidth="1.8" fill="none" filter={`url(#gl${id})`}/>
    </svg>
  );
}

// Full equity card — the centerpiece preview
function MockEquityCard({ width=560 }) {
  const data = useMemo(()=>_series(120, 21, 0.7, 1.3),[]);
  return (
    <div className="rounded-2xl glass-strong hairline-strong p-5 relative overflow-hidden" style={{width}}>
      <div className="absolute -top-20 -right-10 w-72 h-72 rounded-full opacity-40 blur-3xl pointer-events-none" style={{background:"radial-gradient(circle, rgba(94,231,255,0.35), transparent 60%)"}}/>
      <div className="flex items-start gap-3 relative">
        <div>
          <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">Equity Curve · 30D</div>
          <div className="mt-1 flex items-end gap-3">
            <div className="text-[28px] font-semibold tabular tracking-tight">$148,420.<span className="text-white/40 text-[20px]">62</span></div>
            <div className="mb-1.5 px-2 py-0.5 rounded-md hairline bg-gain/10 text-gain text-[11px] tabular">+$32,041 · +27.6%</div>
          </div>
          <div className="text-[11px] text-white/45 mt-1">Sharpe <span className="text-white/70">2.41</span> · Max DD <span className="text-white/70">-2.8%</span></div>
        </div>
        <div className="ml-auto flex items-center gap-1 hairline rounded-lg p-1 bg-white/[0.02] text-[10.5px]">
          {["1D","1W","1M","3M","YTD"].map((t,i)=>(
            <span key={t} className={"px-2 py-0.5 rounded " + (i===2?"bg-white/10 text-white":"text-white/55")}>{t}</span>
          ))}
        </div>
      </div>
      <div className="mt-2 h-[180px] relative">
        <MiniArea values={data} w={width} h={180}/>
      </div>
      <div className="flex justify-between text-[10px] text-white/40 font-mono mt-1">
        <span>Apr 09</span><span>Apr 23</span><span>May 02</span><span className="text-white/70">May 09</span>
      </div>
    </div>
  );
}

// Floating metric chip
function MockMetric({ label, value, delta, up=true, icon="trending-up" }) {
  return (
    <div className="rounded-xl glass-strong hairline px-3.5 py-3 flex items-center gap-3 min-w-[200px]">
      <div className="w-8 h-8 rounded-lg grid place-items-center" style={{background: up?"rgba(60,255,174,0.12)":"rgba(255,85,119,0.12)", color: up?"#3CFFAE":"#FF5577"}}>
        <Icon name={icon} size={14}/>
      </div>
      <div>
        <div className="text-[9.5px] uppercase tracking-[0.18em] text-white/45">{label}</div>
        <div className="text-[16px] font-semibold tabular">{value}</div>
      </div>
      <div className={"ml-auto text-[11px] tabular " + (up?"text-gain":"text-loss")}>{delta}</div>
    </div>
  );
}

// AI assistant floating chip
function MockAi() {
  return (
    <div className="rounded-2xl glass-strong hairline-strong p-3 flex items-start gap-2.5 max-w-[270px]">
      <div className="w-8 h-8 rounded-full orb shrink-0" style={{boxShadow:"0 0 24px rgba(94,231,255,0.6)"}}/>
      <div className="leading-snug">
        <div className="text-[10.5px] uppercase tracking-[0.16em] text-white/45">Nova · AI</div>
        <div className="text-[12.5px] text-white/85 mt-0.5">BTC пробил $71K. Сетап breakout активен. R/R 2.7, инвалидация ниже $70.4K.</div>
      </div>
    </div>
  );
}

// Mini calendar cluster
function MockCalendar() {
  const cells = useMemo(()=>{
    const rng = _rng(13);
    return Array.from({length:21}).map(()=>{
      const has = rng() > 0.25;
      if (!has) return { v:0 };
      const win = rng() > 0.35;
      return { v: Math.round((win?1:-1) * (80 + rng()*600)) };
    });
  }, []);
  return (
    <div className="rounded-2xl glass-strong hairline-strong p-3.5 max-w-[260px]">
      <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">P&L Calendar</div>
      <div className="mt-2 grid grid-cols-7 gap-1">
        {cells.map((c,i)=>{
          const has = c.v!==0;
          const win = c.v>0;
          const intensity = Math.min(1, Math.abs(c.v)/600);
          const bg = !has ? "rgba(255,255,255,0.03)" : win
            ? `linear-gradient(135deg, rgba(60,255,174,${0.15+intensity*0.5}), rgba(94,231,255,${0.05+intensity*0.2}))`
            : `linear-gradient(135deg, rgba(255,85,119,${0.18+intensity*0.5}), rgba(255,135,165,${0.05+intensity*0.2}))`;
          const glow = has ? (win?"0 0 10px -2px rgba(60,255,174,0.4)":"0 0 10px -2px rgba(255,85,119,0.4)") : "none";
          return <div key={i} className="aspect-square rounded hairline" style={{background:bg, boxShadow:glow}}/>;
        })}
      </div>
    </div>
  );
}

// Risk meter card
function MockRisk() {
  return (
    <div className="rounded-2xl glass-strong hairline-strong p-4 max-w-[260px]">
      <div className="flex items-center">
        <div className="text-[10px] uppercase tracking-[0.18em] text-white/45">Risk Engine</div>
        <span className="ml-auto text-[9.5px] px-1.5 py-0.5 rounded-md bg-gain/10 text-gain hairline">SAFE</span>
      </div>
      <div className="mt-2 space-y-2">
        {[
          {k:"Daily",   v:28, c:"#3CFFAE"},
          {k:"Weekly",  v:41, c:"#5EE7FF"},
          {k:"Monthly", v:57, c:"#FFB46B"},
        ].map(it=>(
          <div key={it.k}>
            <div className="flex text-[10.5px] text-white/55"><span>{it.k}</span><span className="ml-auto font-mono">{it.v}%</span></div>
            <div className="mt-0.5 h-1.5 rounded-full bg-white/[0.05] overflow-hidden">
              <div className="h-full rounded-full" style={{width:it.v+"%", background:`linear-gradient(90deg, ${it.c}, ${it.c}80)`, boxShadow:`0 0 10px ${it.c}80`}}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// "Browser chrome" wrapper used around the hero product preview
function BrowserChrome({ children, label="novarise.app / dashboard" }) {
  return (
    <div className="rounded-2xl glass-strong hairline-strong overflow-hidden relative" style={{boxShadow:"0 50px 120px -30px rgba(0,0,0,0.8), 0 0 80px -20px rgba(94,231,255,0.25)"}}>
      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-white/5 bg-white/[0.025]">
        <span className="w-2.5 h-2.5 rounded-full" style={{background:"#FF5577"}}/>
        <span className="w-2.5 h-2.5 rounded-full" style={{background:"#FFB46B"}}/>
        <span className="w-2.5 h-2.5 rounded-full" style={{background:"#3CFFAE"}}/>
        <span className="mx-auto text-[10.5px] text-white/45 font-mono tracking-wider">{label}</span>
        <span className="w-4 invisible"/>
      </div>
      {children}
    </div>
  );
}

// Compact full-product hero shot
function HeroProduct() {
  return (
    <div style={{
      maxWidth: 680,
      margin: '0 auto',
      background: 'rgba(255,255,255,0.03)',
      border: '1px solid rgba(94,231,255,0.15)',
      borderRadius: 24,
      padding: '24px 28px',
      backdropFilter: 'blur(20px)',
    }}>
      {/* Верхняя строка */}
      <div style={{
        display:'flex',justifyContent:'space-between',
        alignItems:'center',marginBottom:20,
        fontSize:12,color:'rgba(255,255,255,0.4)',
      }}>
        <span>NOVARISE · LIVE DASHBOARD</span>
        <span style={{display:'flex',alignItems:'center',gap:6,color:'#00C896'}}>
          <span style={{width:6,height:6,borderRadius:'50%',background:'#00C896',boxShadow:'0 0 8px #00C896',display:'inline-block'}}/>
          LIVE
        </span>
      </div>

      {/* Метрики */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginBottom:20}}>
        {[
          { label:'TOTAL P&L',     value:'+$24,831', color:'#00C896', sub:'+18.4% all time' },
          { label:'WIN RATE',      value:'67.3%',    color:'#5EE7FF', sub:'142 trades' },
          { label:'PROFIT FACTOR', value:'2.41',     color:'#9B7BFF', sub:'gross win/loss' },
        ].map(m => (
          <div key={m.label} style={{background:'rgba(255,255,255,0.03)',borderRadius:14,padding:'14px 16px',border:'1px solid rgba(255,255,255,0.06)'}}>
            <div style={{fontSize:10,color:'rgba(255,255,255,0.35)',letterSpacing:1,marginBottom:6}}>{m.label}</div>
            <div style={{fontSize:20,fontWeight:700,color:m.color,fontFamily:'monospace'}}>{m.value}</div>
            <div style={{fontSize:11,color:'rgba(255,255,255,0.3)',marginTop:2}}>{m.sub}</div>
          </div>
        ))}
      </div>

      {/* Последние сделки */}
      <div style={{fontSize:11,color:'rgba(255,255,255,0.3)',marginBottom:10,letterSpacing:1}}>ПОСЛЕДНИЕ СДЕЛКИ</div>
      {[
        { sym:'XAU/USD', side:'Long',  pnl:'+$832', r:'+2.1R', win:true  },
        { sym:'EUR/USD', side:'Short', pnl:'+$445', r:'+1.4R', win:true  },
        { sym:'BTC/USD', side:'Long',  pnl:'-$210', r:'-0.7R', win:false },
      ].map((t,i) => (
        <div key={i} style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'8px 0',borderBottom:i<2?'1px solid rgba(255,255,255,0.05)':'none'}}>
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            <div style={{width:36,height:36,borderRadius:10,background:t.win?'rgba(0,200,150,0.1)':'rgba(255,77,109,0.1)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:700,color:t.win?'#00C896':'#FF4D6D'}}>{t.sym.slice(0,3)}</div>
            <div>
              <div style={{fontSize:13,fontWeight:600}}>{t.sym}</div>
              <div style={{fontSize:11,color:'rgba(255,255,255,0.35)'}}>{t.side}</div>
            </div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:14,fontWeight:700,fontFamily:'monospace',color:t.win?'#00C896':'#FF4D6D'}}>{t.pnl}</div>
            <div style={{fontSize:11,fontFamily:'monospace',color:'rgba(255,255,255,0.35)'}}>{t.r}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function SmallMetric({ label, value, delta, up, icon }) {
  const c = up?"#3CFFAE":"#FF5577";
  return (
    <div className="rounded-xl hairline p-2.5 relative overflow-hidden">
      <div className="absolute -top-8 -right-8 w-24 h-24 rounded-full opacity-40 blur-2xl" style={{background:`radial-gradient(circle, ${c}40, transparent 60%)`}}/>
      <div className="flex items-center gap-2 text-[9.5px] uppercase tracking-[0.16em] text-white/45">
        <span className="grid place-items-center w-5 h-5 rounded hairline" style={{color:c}}><Icon name={icon} size={10}/></span>
        {label}
      </div>
      <div className="text-[15px] font-semibold tabular mt-1">{value}</div>
      <div className={"text-[10px] tabular " + (up?"text-gain":"text-loss")}>{delta}</div>
    </div>
  );
}

window.MockEquityCard = MockEquityCard;
window.MockMetric = MockMetric;
window.MockAi = MockAi;
window.MockCalendar = MockCalendar;
window.MockRisk = MockRisk;
window.HeroProduct = HeroProduct;
window.BrowserChrome = BrowserChrome;
window.MiniSpark = MiniSpark;
window.MiniArea = MiniArea;
window._series = _series;
window._rng = _rng;