// 85runtime — Showcase browser mockups (original stylized previews)

const BrowserChrome = ({ url, theme, children }) => (
  <div className="browser" data-theme={theme}>
    <div className="browser-bar">
      <div className="browser-dots">
        <span></span><span></span><span></span>
      </div>
      <div className="browser-url mono">{url}</div>
      <div className="browser-actions"><span>↻</span></div>
    </div>
    <div className="browser-body">{children}</div>
  </div>
);

// AIwrites.news — editorial newsroom layout
const AiwritesPreview = () => (
  <div className="aw">
    <div className="aw-top">
      <div className="aw-brand">AIwrites<span>.news</span></div>
      <div className="aw-nav">
        <span>AI News</span><span>Tools</span><span>Learn AI</span><span>Analysis</span><span>Research</span>
      </div>
      <div className="aw-newsletter">Newsletter</div>
    </div>
    <div className="aw-featured">
      <div className="aw-tag">FEATURED · 16:10</div>
      <div className="aw-kicker">News Brief · Cover Story</div>
      <div className="aw-headline">The EU AI Act:<br/>What Practitioners<br/>Need to Know</div>
      <div className="aw-meta">AIwrites Editorial · 8 min read</div>
    </div>
    <div className="aw-grid">
      <div className="aw-item">
        <div className="aw-item-tag">News Brief</div>
        <div className="aw-item-title">The Inference Cost Curve</div>
        <div className="aw-item-meta">Apr 18 · 5 min</div>
      </div>
      <div className="aw-item">
        <div className="aw-item-tag">Tool Compare</div>
        <div className="aw-item-title">Cursor vs. GitHub Copilot</div>
        <div className="aw-item-meta">Apr 15 · 5 min</div>
      </div>
      <div className="aw-item">
        <div className="aw-item-tag">Research</div>
        <div className="aw-item-title">Chain-of-Thought Prompting</div>
        <div className="aw-item-meta">Apr 12 · 5 min</div>
      </div>
    </div>
  </div>
);

// Mona Sport Coach — fitness dashboard
const MonaPreview = () => (
  <div className="ms">
    <div className="ms-top">
      <div className="ms-brand">⬢ MONA<span>sport coach</span></div>
      <div className="ms-nav">
        <span>Dashboard</span><span>Tréning</span><span>Regenerácia</span><span>Coach</span>
      </div>
      <div className="ms-avatar">M</div>
    </div>
    <div className="ms-body">
      <div className="ms-hero">
        <div className="ms-greet">Dobré ráno, Marek</div>
        <div className="ms-status">
          <div>
            <div className="ms-num">87<span>%</span></div>
            <div className="ms-lbl">Readiness</div>
          </div>
          <div>
            <div className="ms-num">42<span>ms</span></div>
            <div className="ms-lbl">HRV</div>
          </div>
          <div>
            <div className="ms-num">7.4<span>h</span></div>
            <div className="ms-lbl">Spánok</div>
          </div>
        </div>
      </div>
      <div className="ms-cards">
        <div className="ms-card">
          <div className="ms-card-tag">DNES</div>
          <div className="ms-card-title">Tempo run · 8 km</div>
          <div className="ms-bar"><span style={{width: '64%'}}></span></div>
          <div className="ms-coach">"Tvoj HRV ukazuje plnú regeneráciu. Pridaj jedno surge interval na konci."</div>
        </div>
        <div className="ms-card ms-card-2">
          <div className="ms-card-tag">CHART</div>
          <div className="ms-chart">
            {Array.from({length: 14}).map((_, i) => (
              <span key={i} style={{height: `${30 + Math.sin(i * 0.7) * 25 + Math.random() * 20}%`}}></span>
            ))}
          </div>
          <div className="ms-card-meta">14d · Load progression</div>
        </div>
      </div>
    </div>
  </div>
);

window.BrowserChrome = BrowserChrome;
window.AiwritesPreview = AiwritesPreview;
window.MonaPreview = MonaPreview;