---
import WaitlistForm from '../components/WaitlistForm.astro';
import DemoLaunchCard from '../components/DemoLaunchCard.astro';
import pcbnew from '../assets/screens/pcbnew.png';
---

<section class="hero bp-grid">
  <div class="container hero-grid">
    <div class="hero-copy">
      <span class="eyebrow">PCBJam · built on KiCad</span>
      <h1>Real KiCad. In your browser. No install.</h1>
      <p class="lead">
        The full KiCad suite, compiled to WebAssembly and running in a tab. Open your own
        board, route, run DRC, spin it in 3D, export Gerbers — the real engine, not a
        re-implementation. Multiplayer co-editing is coming: join the waitlist for early
        access.
      </p>

      <p class="hero-cta">
        <a
          class="btn btn-primary btn-demo"
          href="https://demo.pcbjam.com"
          target="_blank"
          rel="noopener"
        >
          ▶&nbsp; Open the live demo
        </a>
        <span class="hero-cta-sub">Free · no install, no account</span>
      </p>

      <p class="hero-wl-lead">Want early access to multiplayer?</p>
      <WaitlistForm
        source="hero"
        id="waitlist"
        class="hero-form"
        microcopy="Collab rolls out in waves — get your invite."
      />

      <ul class="hero-trust">
        <li>Open source</li>
        <li>Your files stay in KiCad format</li>
        <li>Runs on Mac, Linux, Chromebook, iPad</li>
      </ul>
    </div>

    <div class="hero-visual">
      {/* TODO(assets): swap the poster for a hero board still w/ presence cursors
          (§4b.3) or the multiplayer demo loop (§4b.2) once produced. */}
      <DemoLaunchCard
        href="https://demo.pcbjam.com"
        image={pcbnew}
        alt="KiCad Pcbnew editing the pic_programmer demo board in a browser tab — open the live demo"
        sub="Real KiCad in your browser · opens in a new tab"
      />
    </div>
  </div>
</section>

<style>
  .hero {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  .hero-copy h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: 0.75rem;
  }
  .hero-cta {
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }
  .btn-demo {
    padding: 0.85rem 1.6rem;
    font-size: 1.05rem;
  }
  .hero-cta-sub {
    font-size: 0.85rem;
    color: var(--fg-muted);
  }
  .hero-wl-lead {
    margin: 1.75rem 0 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .hero-form {
    max-width: 30rem;
  }
  /* One primary action per hero: the demo button. Demote the waitlist submit
     to ghost weight (it stays full-primary in the final CTA and footer).
     .hero-copy anchors the scope — .hero-form itself sits on the WaitlistForm
     root, which doesn't carry this component's scope attribute. */
  .hero-copy :global(.hero-form .btn-primary) {
    background: transparent;
    border-color: var(--border);
    color: var(--fg);
  }
  .hero-copy :global(.hero-form .btn-primary:hover) {
    border-color: var(--accent);
    color: var(--accent);
    filter: none;
  }
  .hero-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0;
    margin: 1.5rem 0 0;
    font-size: 0.85rem;
    color: var(--fg-muted);
  }
  .hero-trust li {
    position: relative;
    padding-left: 1rem;
  }
  .hero-trust li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--signal-400);
    font-size: 0.6rem;
    top: 0.25rem;
  }
  @media (max-width: 880px) {
    .hero-grid {
      grid-template-columns: 1fr;
    }
    .hero-visual {
      order: -1;
    }
  }
</style>
