/* mocks.jsx — small product mock components used inline */

const LabMock = () =>
<div className="mock-frame">
    <div className="mock-bar">
      <span className="mock-tag">RESEARCH LAB</span>
      <span style={{ opacity: 0.6 }}>alcohol_moderation • 17,580 posts • 21 themes</span>
    </div>
    <div className="mock-body" data-comment-anchor="f41a0ab3db-div-9-5">
      <div className="lab-mock">
        <div className="lab-panel">
          <div className="lab-panel-title">Measure</div>
          <div className="kpi">17,580</div>
          <div className="kpi-label">Total posts</div>
          <div style={{ marginTop: 14 }}>
            <div className="kpi" style={{ fontSize: 14, color: 'var(--teal)' }}>21</div>
            <div className="kpi-label">Themes identified</div>
          </div>
          <svg viewBox="0 0 100 24" style={{ width: '100%', marginTop: 14 }}>
            <polyline
            points="0,18 16,16 32,12 48,14 64,9 80,7 100,5"
            fill="none"
            stroke="var(--teal)"
            strokeWidth="1.2" />
          
            <polyline
            points="0,18 16,16 32,12 48,14 64,9 80,7 100,5 100,24 0,24"
            fill="rgba(75,173,175,0.12)"
            stroke="none" />
          
          </svg>
        </div>
        <div className="lab-panel">
          <div className="lab-panel-title">Macro-themes</div>
          <div className="lab-bubbles">
            <div className="lab-bubble" style={{ width: 38, height: 38, top: '20%', left: '15%' }}></div>
            <div className="lab-bubble warm" style={{ width: 32, height: 32, top: '12%', left: '55%' }}></div>
            <div className="lab-bubble" style={{ width: 26, height: 26, top: '50%', left: '40%' }}></div>
            <div className="lab-bubble dim" style={{ width: 22, height: 22, top: '60%', left: '12%' }}></div>
            <div className="lab-bubble" style={{ width: 30, height: 30, top: '55%', left: '70%' }}></div>
            <div className="lab-bubble warm" style={{ width: 18, height: 18, top: '30%', left: '78%' }}></div>
            <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
              <line x1="30%" y1="35%" x2="55%" y2="60%" stroke="rgba(75,173,175,0.4)" strokeWidth="1" strokeDasharray="2 3" />
              <line x1="60%" y1="22%" x2="80%" y2="40%" stroke="rgba(216,180,138,0.4)" strokeWidth="1" strokeDasharray="2 3" />
            </svg>
          </div>
        </div>
        <div className="lab-panel">
          <div className="lab-panel-title">Talk to Jacques</div>
          <span className="chat-line">
            <strong>1.</strong> Premiumization & Sophistication — biggest signal at 7%
          </span>
          <span className="chat-line">
            <strong>2.</strong> Aesthetic ritualization of festive drinks
          </span>
          <span className="chat-line">
            <strong>3.</strong> Efficiency in alcohol-free consumption
          </span>
        </div>
      </div>
    </div>
  </div>;


const StudioMock = () =>
<div className="mock-frame" data-comment-anchor="951569f063-div-66-3">
    <div className="mock-bar">
      <span className="mock-tag">INSIGHTS STUDIO</span>
      <span style={{ opacity: 0.6 }}>milestone 1 of 3 — Data Context</span>
    </div>
    <div className="mock-body">
      <div className="studio-mock">
        <div className="studio-pane">
          <div className="lab-panel-title">Your Evidence</div>
          <div className="evidence-card">
            <span className="src">REDDIT • r/cocktails</span>
            "...calling these mocktails 'glorified juice' is wild given the price point."
          </div>
          <div className="evidence-card">
            <span className="src">CAPTURED NOTE</span>
            Premiumization signal — drinkers willing to pay cocktail prices for craft.
          </div>
          <div className="evidence-card">
            <span className="src">TWITTER / X</span>
            "sleepy girl mocktail saved me through dry january ngl"
          </div>
        </div>
        <div className="studio-pane">
          <div className="lab-panel-title">Jacques Draft</div>
          <div className="draft-h">From signals to strategy.</div>
          <div className="draft-p">
            Consumers are shifting toward <span className="hl">authenticity signals over brand heritage claims</span>, creating a window for challenger positioning in a saturated category.
          </div>
          <div style={{ display: 'flex', gap: 4, marginTop: 10, flexWrap: 'wrap' }}>
            {['Find Verbatims', 'Rewrite', 'Add Evidence', 'Challenge', 'Simplify'].map((b) =>
          <div key={b} style={{ fontSize: 8, padding: '3px 6px', border: '1px solid var(--line)', borderRadius: 3, color: 'var(--ink-mute)' }}>{b}</div>
          )}
          </div>
        </div>
      </div>
    </div>
  </div>;


window.LabMock = LabMock;
window.StudioMock = StudioMock;