// mockups.jsx — abstract product mockups (CSS/HTML, original)

const mk = {
  // Hero: floating glass funnel/analytics dashboard
  HeroDashboard: () => (
    <div className="hero-viz">
      <div className="hv-bg-glow" />
      {/* Main card: funnel analytics */}
      <div className="hv-card hv-main glass">
        <div className="hv-head">
          <div className="hv-dots"><i/><i/><i/></div>
          <div className="hv-tabs">
            <span className="active">Funnel</span>
            <span>Sessions</span>
            <span>Revenue</span>
          </div>
          <div className="hv-pill mono">Last 30d</div>
        </div>
        <div className="hv-body">
          <div className="hv-kpis">
            <div className="hv-kpi">
              <span className="lbl mono">Conv. Rate</span>
              <div className="num">12.84<i>%</i></div>
              <div className="delta up">+2.4</div>
            </div>
            <div className="hv-kpi">
              <span className="lbl mono">Sessions</span>
              <div className="num">48,210</div>
              <div className="delta up">+18.2%</div>
            </div>
            <div className="hv-kpi">
              <span className="lbl mono">MRR</span>
              <div className="num">$24.6k</div>
              <div className="delta up">+9.1%</div>
            </div>
          </div>
          <div className="hv-chart">
            <svg viewBox="0 0 400 140" preserveAspectRatio="none">
              <defs>
                <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.45"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,110 C40,100 60,80 90,72 C120,64 150,90 180,76 C210,62 240,30 280,28 C320,26 350,50 400,18 L400,140 L0,140 Z"
                    fill="url(#chartFill)"/>
              <path d="M0,110 C40,100 60,80 90,72 C120,64 150,90 180,76 C210,62 240,30 280,28 C320,26 350,50 400,18"
                    fill="none" stroke="var(--accent)" strokeWidth="1.8"/>
              {[40,80,120,160,200,240,280,320,360].map((x,i)=>(
                <line key={i} x1={x} y1="0" x2={x} y2="140" stroke="rgba(255,255,255,0.04)"/>
              ))}
            </svg>
            <div className="hv-tooltip">
              <span className="mono">Mar 18</span>
              <strong>$1,284</strong>
            </div>
          </div>
          <div className="hv-funnel">
            {[
              {label: "Visitors", v: 100, n: "48,210"},
              {label: "Sign-ups", v: 64, n: "30,854"},
              {label: "Trial",    v: 38, n: "18,319"},
              {label: "Paid",     v: 13, n: "6,194"},
            ].map((s,i)=>(
              <div key={i} className="hv-funnel-row">
                <span className="lbl mono">{s.label}</span>
                <div className="bar"><div style={{width: s.v + '%'}}/></div>
                <span className="n">{s.n}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Floating side card: integrations */}
      <div className="hv-card hv-float-a glass">
        <div className="hv-mini-head">
          <span className="mono lbl">Live</span>
          <span className="hv-live"><i/> connected</span>
        </div>
        <div className="hv-integrations">
          {["Stripe", "Resend", "Supabase", "Linear", "Slack"].map((n,i)=>(
            <div key={i} className="hv-int">
              <div className="dot" style={{background: `hsl(${i*60 + 200} 70% 65%)`}}/>
              <span>{n}</span>
              <span className="mono ok">200</span>
            </div>
          ))}
        </div>
      </div>

      {/* Floating side card: deploy */}
      <div className="hv-card hv-float-b glass">
        <div className="hv-deploy">
          <div className="hv-deploy-row">
            <div className="hv-deploy-led" />
            <div>
              <div className="hv-deploy-title">Deployed to production</div>
              <div className="mono hv-deploy-meta">main · 7s ago · build 248</div>
            </div>
          </div>
          <div className="hv-deploy-bar"><i/></div>
        </div>
      </div>
    </div>
  ),

  // Portfolio thumbnails
  SaasDashboard: () => (
    <div className="thumb td-saas">
      <div className="td-top">
        <div className="td-side">
          <div className="td-logo"/>
          {[0,1,2,3,4].map(i=><div key={i} className={"td-nav " + (i===1?"on":"")}/>)}
        </div>
        <div className="td-main">
          <div className="td-row">
            <div className="td-tile"><span/><b/></div>
            <div className="td-tile"><span/><b/></div>
            <div className="td-tile"><span/><b/></div>
          </div>
          <div className="td-chart">
            <svg viewBox="0 0 200 60" preserveAspectRatio="none">
              <path d="M0,50 C30,40 50,30 80,28 C110,26 130,40 160,20 C180,8 195,18 200,12 L200,60 L0,60 Z" fill="var(--accent-soft)"/>
              <path d="M0,50 C30,40 50,30 80,28 C110,26 130,40 160,20 C180,8 195,18 200,12" fill="none" stroke="var(--accent)" strokeWidth="1.2"/>
            </svg>
          </div>
          <div className="td-rows">
            {[0,1,2,3].map(i=><div key={i} className="td-listrow"><span/><span/><span/></div>)}
          </div>
        </div>
      </div>
    </div>
  ),

  FunnelSystem: () => (
    <div className="thumb td-funnel">
      <div className="td-funnel-stage">
        <div className="td-step"><span className="mono">01</span> Landing</div>
        <div className="td-arrow"/>
        <div className="td-step"><span className="mono">02</span> Opt-in</div>
        <div className="td-arrow"/>
        <div className="td-step accent"><span className="mono">03</span> Offer</div>
        <div className="td-arrow"/>
        <div className="td-step"><span className="mono">04</span> Checkout</div>
      </div>
      <div className="td-funnel-stats">
        <div><span className="mono">CTR</span><b>42.8%</b></div>
        <div><span className="mono">CR</span><b>9.6%</b></div>
        <div><span className="mono">AOV</span><b>$148</b></div>
      </div>
    </div>
  ),

  TradingJournal: () => (
    <div className="thumb td-trade">
      <div className="td-trade-head">
        <span className="mono">AI Journal</span>
        <span className="td-pnl up mono">+$1,284.20</span>
      </div>
      <div className="td-candles">
        {Array.from({length: 28}).map((_,i)=>{
          const h = 20 + Math.abs(Math.sin(i*1.3))*60;
          const up = Math.sin(i*0.7) > 0;
          return <div key={i} className={"td-c " + (up?"u":"d")} style={{height: h+'%'}}/>;
        })}
      </div>
      <div className="td-tags">
        <span>Long</span><span>RSI div</span><span>15m</span><span className="accent-pill">+R 2.4</span>
      </div>
    </div>
  ),

  LandingPage: () => (
    <div className="thumb td-land">
      <div className="td-nav-bar">
        <div className="td-logo"/>
        <div className="td-nav-links"><i/><i/><i/></div>
        <div className="td-cta"/>
      </div>
      <div className="td-hero">
        <div className="td-hl"/>
        <div className="td-hl short"/>
        <div className="td-sub"/>
        <div className="td-cta-row"><div className="td-cta primary"/><div className="td-cta ghost"/></div>
      </div>
      <div className="td-logos">
        {[0,1,2,3,4].map(i=><div key={i} className="td-logo-dim"/>)}
      </div>
    </div>
  ),

  BookingFunnel: () => (
    <div className="thumb td-book">
      <div className="td-cal">
        <div className="td-cal-head"><span className="mono">March 2026</span><span className="mono">›</span></div>
        <div className="td-cal-grid">
          {Array.from({length: 28}).map((_,i)=>(
            <div key={i} className={"td-day " + (i===14?"selected":i>5&&i<25?"avail":"")}/>
          ))}
        </div>
      </div>
      <div className="td-slots">
        <div className="td-slot mono">09:00</div>
        <div className="td-slot mono">10:30</div>
        <div className="td-slot mono accent">14:00</div>
        <div className="td-slot mono">15:30</div>
      </div>
    </div>
  ),
};

Object.assign(window, { mk });