// Model Labs page — self-contained (inline styles + scoped <style>), matches the design preview 1:1.

const LabsIcon = ({ paths }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="url(#labsGrad)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="22" height="22">
    {paths.map((d, i) => <path key={i} d={d} />)}
  </svg>
);

const LABS_CAPABILITIES = [
  {
    title: 'Shared Live Workspace',
    paths: ['M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z', 'M6 9l2 2-2 2', 'M11 15h4'],
    lines: [
      'Every participant joins the same Claude Code session and follows the same terminal, files, commands, and outputs in real time.',
      'No duplicated environments.',
      'No context lost between participants.',
    ],
  },
  {
    title: 'Permission-Based Control',
    paths: ['M12 2 4 5v6c0 4.5 3.2 7.8 8 9 4.8-1.2 8-4.5 8-9V5z', 'M9 12l2 2 4-4'],
    lines: [
      'Participants can join as read-only viewers and request control when they are ready to contribute.',
      'The session owner decides who can operate the workspace.',
    ],
  },
  {
    title: 'Structured Handoffs',
    paths: ['M8 3H5a2 2 0 0 0-2 2v3', 'M16 3h3a2 2 0 0 1 2 2v3', 'M21 16v3a2 2 0 0 1-2 2h-3', 'M3 16v3a2 2 0 0 0 2 2h3', 'M8 12h5', 'M11 9l3 3-3 3'],
    lines: [
      'Control can be approved, transferred, and reassigned without restarting the session or interrupting the workflow.',
      'One participant controls the terminal at a time.',
      'Everyone else remains synchronized.',
    ],
  },
];

const LABS_STEPS = [
  { num: '01', title: 'Create a Session', body: 'The master opens a Collaborative Claude Code workspace and becomes the session owner and initial controller.' },
  { num: '02', title: 'Invite Participants', body: 'Generate guest links with viewer access and invite collaborators into the live session.' },
  { num: '03', title: 'Request and Approve Control', body: 'A guest requests control. The master reviews and approves the request before editing access is granted.' },
  { num: '04', title: 'Transfer the Workspace', body: 'Control moves between participants while the terminal, files, history, and shared context remain unchanged.' },
];

const LABS_VALUES = [
  { tag: '01', title: 'Pair Programming', body: 'Developers can observe, review, debug, and take over the same AI coding session.' },
  { tag: '02', title: 'Technical Support', body: 'Engineers can join an active customer session without requiring screen sharing or environment recreation.' },
  { tag: '03', title: 'Mentorship and Review', body: 'Senior developers can observe work in real time and take control only when intervention is needed.' },
  { tag: '04', title: 'Agent Operations', body: 'Teams can supervise and control shared coding agents through a structured permission and handoff model.' },
  { tag: '05', title: 'Remote Collaboration', body: 'Distributed teams can work inside one persistent AI workspace instead of passing screenshots, logs, and partial context between tools.' },
];

const LABS_CSS = `
.labs-root {
  --l-bg:#0a0a0b; --l-card:#131318; --l-line:rgba(255,255,255,0.07); --l-line2:rgba(255,255,255,0.14);
  --l-fg:#f5f5f6; --l-dim:#8a8a93; --l-dimmer:#56565d;
  --l-mono:'JetBrains Mono',ui-monospace,monospace;
  --l-accent:linear-gradient(120deg,#6080ff 0%,#b264ff 50%,#ff6fbf 100%);
  --l-maxw:1240px; --l-pad:clamp(20px,4vw,56px); --l-r:16px;
  background:#0a0a0b; color:#f5f5f6;
  font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
}
.labs-root *, .labs-root *::before, .labs-root *::after { box-sizing:border-box; }
.labs-root .l-grad { background:var(--l-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.labs-root a { color:inherit; text-decoration:none; }
@keyframes labsPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
@keyframes labsIn { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.labs-btn { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; font-size:14.5px; font-weight:600; transition:transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s cubic-bezier(.16,1,.3,1), border-color 0.25s ease, background 0.25s ease; }
.labs-btn-primary { background:#fff; color:#000; }
.labs-btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,255,255,0.18); }
.labs-btn-ghost { background:transparent; color:var(--l-fg); border:1px solid var(--l-line2); }
.labs-btn-ghost:hover { transform:translateY(-2px); border-color:var(--l-fg); background:rgba(255,255,255,0.04); }
@media (max-width:900px) {
  .labs-caps, .labs-steps, .labs-values { grid-template-columns:1fr !important; }
}
`;

const LabsEyebrow = ({ children, animate }) => (
  <div style={{ animation: animate ? 'labsIn 0.9s cubic-bezier(.16,1,.3,1) 0.05s both' : undefined, display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 14px', border: '1px solid var(--l-line2)', borderRadius: 999, background: 'rgba(255,255,255,0.02)', fontFamily: 'var(--l-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--l-dim)', marginBottom: 40 }}>
    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'linear-gradient(135deg,#6080ff,#ff6fbf)', boxShadow: '0 0 12px rgba(178,100,255,0.7)', animation: 'labsPulse 2s ease-in-out infinite' }} />
    {children}
  </div>
);

const LabsLabel = ({ children }) => (
  <span style={{ display: 'block', marginBottom: 24, fontFamily: 'var(--l-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 500, color: 'var(--l-dim)' }}>{children}</span>
);

const wrapS = { maxWidth: 'var(--l-maxw)', margin: '0 auto', padding: '0 var(--l-pad)' };
const sectionS = { padding: 'clamp(72px,10vw,140px) 0', borderTop: '1px solid var(--l-line)' };
const h2S = { margin: 0, fontSize: 'clamp(26px,3.4vw,48px)', fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1.06 };
const ledeS = { fontSize: 'clamp(15px,1.4vw,17px)', color: 'var(--l-dim)', lineHeight: 1.65, margin: 0 };

const Labs = () => (
  <div className="labs-root" id="labs" data-screen-label="Labs">
    <style dangerouslySetInnerHTML={{ __html: LABS_CSS }} />
    <svg width="0" height="0" aria-hidden="true" style={{ position: 'absolute' }}>
      <defs>
        <linearGradient id="labsGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#6080ff" />
          <stop offset="0.5" stopColor="#b264ff" />
          <stop offset="1" stopColor="#ff6fbf" />
        </linearGradient>
      </defs>
    </svg>

    {/* Hero */}
    <section style={{ position: 'relative', padding: '150px var(--l-pad) 96px', maxWidth: 'var(--l-maxw)', margin: '0 auto', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', top: 0, bottom: 0, left: 'calc(50% - 50vw)', width: '100vw', pointerEvents: 'none', zIndex: 0, overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: '8%', right: '2%', width: 640, height: 640, background: 'radial-gradient(circle, rgba(178,100,255,0.13) 0%, rgba(96,128,255,0.055) 40%, transparent 66%)', filter: 'blur(46px)' }} />
        <div style={{ position: 'absolute', bottom: '-14%', left: '-8%', width: 560, height: 560, background: 'radial-gradient(circle, rgba(255,111,191,0.06), transparent 62%)', filter: 'blur(52px)' }} />
      </div>
      <div style={{ position: 'relative' }}>
        <LabsEyebrow animate>Model Labs</LabsEyebrow>
        <h1 style={{ animation: 'labsIn 0.9s cubic-bezier(.16,1,.3,1) 0.18s both', margin: '0 0 32px', fontSize: 'clamp(32px,4.6vw,64px)', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.06, maxWidth: '20ch' }}>
          Where New Ways of Working With AI <span className="l-grad">Begin</span>.
        </h1>
        <p style={{ animation: 'labsIn 0.9s cubic-bezier(.16,1,.3,1) 0.30s both', fontSize: 'clamp(16px,1.6vw,20px)', fontWeight: 400, color: '#9b9ba3', maxWidth: '60ch', lineHeight: 1.5, margin: '0 0 24px' }}>
          Model Labs is the experimental product space of Model OS. We build and test new interfaces for
          collaborative coding, shared agent execution, multi-user workflows, model interaction, and human-AI coordination.
        </p>
        <p style={{ animation: 'labsIn 0.9s cubic-bezier(.16,1,.3,1) 0.40s both', fontFamily: 'var(--l-mono)', fontSize: 13, letterSpacing: '0.02em', color: 'var(--l-dim)', maxWidth: '60ch', lineHeight: 1.7, margin: '0 0 40px' }}>
          Built in public. Tested through real workflows. Evolved into production systems.
        </p>
        <div style={{ animation: 'labsIn 0.9s cubic-bezier(.16,1,.3,1) 0.50s both', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a className="labs-btn labs-btn-primary" href="#experiment">Watch the Demo <span>→</span></a>
          <a className="labs-btn labs-btn-ghost" href="#labs-final">Request Early Access <span>→</span></a>
        </div>
      </div>
    </section>

    {/* Featured Experiment */}
    <section id="experiment" style={sectionS} data-screen-label="Featured Experiment">
      <div style={wrapS}>
        <LabsLabel>Featured Experiment · 01</LabsLabel>
        <h2 style={{ ...h2S, marginBottom: 12 }}>Collaborative <span className="l-grad">Claude Code</span></h2>
        <p style={{ fontSize: 'clamp(17px,1.6vw,22px)', fontWeight: 500, color: '#d7d7dc', margin: '0 0 24px', maxWidth: '48ch', lineHeight: 1.3, letterSpacing: '-0.01em' }}>
          One coding session. Multiple participants. Shared context. Controlled access.
        </p>
        <p style={{ ...ledeS, margin: '0 0 44px', maxWidth: '70ch' }}>
          Collaborative Claude Code transforms a single Claude Code session into a shared, real-time coding environment.
          Multiple participants can join the same workspace, view the same terminal output, request control, and take turns
          operating the session without losing context or duplicating work.
        </p>

        <div style={{ position: 'relative', border: '1px solid var(--l-line)', borderRadius: 'var(--l-r)', background: '#0b0b10', padding: 14, boxShadow: '0 40px 120px -30px rgba(96,128,255,0.25)' }}>
          {[['tl', { top: -1, left: -1, borderTop: '2px solid rgba(178,100,255,0.7)', borderLeft: '2px solid rgba(178,100,255,0.7)', borderRadius: '6px 0 0 0' }],
            ['tr', { top: -1, right: -1, borderTop: '2px solid rgba(178,100,255,0.7)', borderRight: '2px solid rgba(178,100,255,0.7)', borderRadius: '0 6px 0 0' }],
            ['bl', { bottom: -1, left: -1, borderBottom: '2px solid rgba(178,100,255,0.7)', borderLeft: '2px solid rgba(178,100,255,0.7)', borderRadius: '0 0 0 6px' }],
            ['br', { bottom: -1, right: -1, borderBottom: '2px solid rgba(178,100,255,0.7)', borderRight: '2px solid rgba(178,100,255,0.7)', borderRadius: '0 0 6px 0' }]].map(([k, s]) => (
            <span key={k} aria-hidden="true" style={{ position: 'absolute', width: 22, height: 22, ...s }} />
          ))}
          <video src="assets/claude-collab.mp4" controls playsInline preload="metadata" style={{ width: '100%', display: 'block', borderRadius: 10 }}>
            Your browser does not support the video tag.
          </video>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 18, fontFamily: 'var(--l-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--l-dim)' }}>
          <span style={{ color: 'var(--l-fg)' }}>Collaborative Claude Code</span>
          <span aria-hidden="true" style={{ color: 'var(--l-dimmer)' }}>·</span>
          <span>Shared Session Demo</span>
        </div>
      </div>
    </section>

    {/* Core Capabilities */}
    <section style={sectionS} data-screen-label="Core Capabilities">
      <div style={wrapS}>
        <LabsLabel>Core Capabilities</LabsLabel>
        <h2 style={{ ...h2S, marginBottom: 'clamp(40px,6vw,72px)', maxWidth: '20ch' }}>
          Collaborate without <span className="l-grad">fragmenting</span> the session.
        </h2>
        <div className="labs-caps" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {LABS_CAPABILITIES.map((c) => (
            <div key={c.title} style={{ border: '1px solid var(--l-line)', borderRadius: 'var(--l-r)', background: 'var(--l-card)', padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ width: 42, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--l-line2)', borderRadius: 11, background: 'rgba(255,255,255,0.03)' }}>
                <LabsIcon paths={c.paths} />
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.2 }}>{c.title}</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {c.lines.map((ln, i) => <p key={i} style={{ fontSize: 14, color: 'var(--l-dim)', lineHeight: 1.6, margin: 0 }}>{ln}</p>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* How It Works */}
    <section style={sectionS} data-screen-label="How It Works">
      <div style={wrapS}>
        <LabsLabel>One Session · Controlled Collaboration</LabsLabel>
        <h2 style={{ ...h2S, marginBottom: 'clamp(40px,6vw,72px)', maxWidth: '20ch' }}>
          From observation to execution in <span className="l-grad">four steps</span>.
        </h2>
        <div className="labs-steps" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--l-line)', border: '1px solid var(--l-line)', borderRadius: 'var(--l-r)', overflow: 'hidden' }}>
          {LABS_STEPS.map((s) => (
            <div key={s.num} style={{ background: 'var(--l-bg)', padding: '32px 26px', display: 'flex', flexDirection: 'column', gap: 16, minHeight: 220 }}>
              <div className="l-grad" style={{ fontSize: 'clamp(34px,4vw,52px)', fontWeight: 800, letterSpacing: '-0.05em', lineHeight: 1 }}>{s.num}</div>
              <h3 style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.2 }}>{s.title}</h3>
              <p style={{ fontSize: 13.5, color: 'var(--l-dim)', lineHeight: 1.6, margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Product Value */}
    <section style={sectionS} data-screen-label="Product Value">
      <div style={wrapS}>
        <LabsLabel>Product Value</LabsLabel>
        <h2 style={{ ...h2S, marginBottom: 'clamp(40px,6vw,72px)', maxWidth: '22ch' }}>
          Built for the moments when AI work becomes <span className="l-grad">collaborative</span>.
        </h2>
        <div className="labs-values" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {LABS_VALUES.map((v) => (
            <div key={v.tag} style={{ border: '1px solid var(--l-line)', borderRadius: 'var(--l-r)', background: 'var(--l-card)', padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontFamily: 'var(--l-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--l-dimmer)', textTransform: 'uppercase' }}>{v.tag}</div>
              <h3 style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.2 }}>{v.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--l-dim)', lineHeight: 1.6, margin: 0 }}>{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Experimental Status */}
    <section style={sectionS} data-screen-label="Experimental Status">
      <div style={wrapS}>
        <div style={{ position: 'relative', border: '1px solid var(--l-line)', borderRadius: 'var(--l-r)', background: 'radial-gradient(130% 120% at 0% 0%, rgba(96,128,255,0.07), transparent 52%), radial-gradient(130% 120% at 100% 100%, rgba(178,100,255,0.06), transparent 52%), var(--l-card)', padding: 'clamp(36px,5vw,64px)', overflow: 'hidden' }}>
          <LabsLabel>Model Labs</LabsLabel>
          <h3 style={{ margin: '0 0 24px', fontSize: 'clamp(24px,2.8vw,38px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.1, maxWidth: '22ch' }}>
            Experimental today. <span className="l-grad">Infrastructure tomorrow.</span>
          </h3>
          <p style={{ ...ledeS, marginBottom: 28, maxWidth: '70ch' }}>
            Model Labs explores new product ideas before they become part of the broader Model OS platform.
            Labs projects may evolve quickly as we test new interaction models, collaboration systems, agent runtimes,
            and interfaces for controlling AI work.
          </p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px', borderRadius: 999, border: '1px solid rgba(178,100,255,0.3)', background: 'rgba(178,100,255,0.08)', marginBottom: 16 }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'linear-gradient(135deg,#6080ff,#ff6fbf)', animation: 'labsPulse 2s ease-in-out infinite' }} />
            <span style={{ fontFamily: 'var(--l-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(210,190,255,0.95)', fontWeight: 500 }}>Experimental Release</span>
          </div>
          <p style={{ fontSize: 13, color: 'var(--l-dimmer)', margin: 0, lineHeight: 1.5 }}>
            Features, interfaces, and availability may change as the system evolves.
          </p>
        </div>
      </div>
    </section>

    {/* Final CTA */}
    <section id="labs-final" style={{ padding: 'clamp(80px,12vw,160px) var(--l-pad)', borderTop: '1px solid var(--l-line)', textAlign: 'center', position: 'relative', overflow: 'hidden' }} data-screen-label="Final CTA">
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(ellipse 60% 50% at 50% 40%, rgba(96,128,255,0.10), transparent 70%)' }} />
      <div style={{ position: 'relative', maxWidth: 'var(--l-maxw)', margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <h2 style={{ ...h2S, marginBottom: 20, maxWidth: '16ch', fontWeight: 700 }}>Join the next <span className="l-grad">experiment</span>.</h2>
        <p style={{ fontSize: 'clamp(16px,1.5vw,19px)', color: 'var(--l-dim)', lineHeight: 1.55, margin: '0 0 40px', maxWidth: '52ch' }}>
          Explore Collaborative Claude Code and help shape a new way for teams to build with AI together.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a className="labs-btn labs-btn-primary" href="demo.html">Request Early Access <span>→</span></a>
          <a className="labs-btn labs-btn-ghost" href="index.html">Explore Model OS <span>→</span></a>
        </div>
      </div>
    </section>
  </div>
);

window.Labs = Labs;