---
import SectionBand from '../components/SectionBand.astro';
import Chip from '../components/Chip.astro';
import Icon from '../components/Icon.astro';

const proof = [
  'WebAssembly',
  'Real-time collaboration (Yjs/CRDT)',
  'Rich-text & ProseMirror editors',
  'AI / LLM features',
  'Fintech & Stripe',
];
const clients = [
  { name: 'Skiff', file: 'clients/skiff.svg' },
  { name: 'Memrise', file: 'clients/memrise.svg' },
  { name: 'AXDRAFT', file: 'clients/axdraft.svg' },
  { name: 'Lex', file: 'clients/lex.svg' },
  { name: 'Filtered', file: 'clients/filtered.svg' },
  { name: 'SwaraLink', file: 'clients/swaralink.svg' },
];
---

<SectionBand id="built-by" tone="soft" labelledby="ee-h2">
  <div class="section-head">
    <span class="eyebrow">Who’s behind PCBJam</span>
    <h2 id="ee-h2">We’re Emergence Engineering. We build hard things in the browser.</h2>
    <p class="lead">
      PCBJam exists because we got obsessed with a genuinely hard problem: running a full,
      native C++ EDA suite — and real-time multiplayer — entirely in a browser, on WebAssembly.
      That’s the kind of work we do for a living. Emergence Engineering is a full-stack software
      studio (🇪🇺, remote-first) that builds WASM ports, real-time collaborative editors, AI
      features, and the payments and infrastructure behind them — for startups and scale-ups who
      need the hard parts done right.
    </p>
  </div>

  <div class="cluster proof">
    {proof.map((p) => <Chip label={p} />)}
  </div>

  <p class="trusted muted">Trusted by teams at</p>
  <div class="clients">
    {clients.map((c) => <Icon name={c.file} mode="img" size="1.5rem" alt={c.name} />)}
  </div>

  <blockquote class="quote">
    “They are incredibly smart, you can trust them, and they’re great to work with. I cannot
    recommend them highly enough.”
    <cite>— Greg Detre, Chief Data Scientist &amp; CTO</cite>
  </blockquote>

  <a class="btn btn-ghost" href="mailto:contact@emergence-engineering.com">
    Need something hard built? → Talk to the team
  </a>
</SectionBand>

<style>
  .proof {
    margin-bottom: 2rem;
  }
  .trusted {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
  }
  .clients {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
    opacity: 0.85;
    margin-bottom: 2rem;
  }
  .quote {
    margin: 0 0 2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--accent);
    font-size: 1.05rem;
    max-width: 38rem;
  }
  .quote cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--fg-muted);
  }
</style>