---
import SectionBand from '../components/SectionBand.astro';
import DemoVideo from '../components/DemoVideo.astro';

const subpoints = [
  {
    title: 'Live cursors & presence',
    body: 'See who’s here and where they’re working.',
    comingSoon: true,
  },
  {
    title: 'Conflict-free editing',
    body: 'CRDT sync merges everyone’s edits — no overwrite wars.',
    comingSoon: false,
  },
  {
    title: 'Pin a comment to a pad',
    body: 'Review and resolve right on the canvas.',
    comingSoon: true,
  },
];
---

<SectionBand id="multiplayer" labelledby="mp-h2">
  <div class="section-head">
    <span class="eyebrow">Real-time, not “real-time-ish”</span>
    <h2 id="mp-h2">Your whole team. One board. The same second.</h2>
    <p class="lead">
      Everyone else who says “real-time collaboration” means comments, check-out locks, or a
      read-only viewer. PCBJam means <strong>live co-editing</strong>: shared cursors, presence,
      and conflict-free edits on the same schematic and layout — the way you already work in
      Google Docs and Figma. Route a trace while a teammate places parts on the other side of
      the board. No emailing files. No “who has it checked out?”
    </p>
  </div>

  <DemoVideo
    class="mp-demo"
    caption="2 editors · live cursors · one board.kicad_pcb · no merge step"
  />

  <ul class="subpoints">
    {
      subpoints.map((s) => (
        <li class="subpoint">
          <strong class="subpoint-title">
            {s.title}
            {s.comingSoon && <span class="badge">Coming soon</span>}
          </strong>
          <p class="muted">{s.body}</p>
        </li>
      ))
    }
  </ul>
</SectionBand>

<style>
  .mp-demo {
    margin-block: 0.5rem 2rem;
  }
  .subpoints {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .subpoint {
    padding-top: 0.85rem;
    border-top: 2px solid var(--accent);
  }
  .subpoint-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .subpoint p {
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
  }
  .badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--signal-400);
    border: 1px solid color-mix(in srgb, var(--signal-400) 50%, transparent);
    border-radius: var(--radius-full, 9999px);
    padding: 0.1rem 0.5rem;
  }
  @media (max-width: 760px) {
    .subpoints {
      grid-template-columns: 1fr;
    }
  }
</style>