---
// HeroSplit.astro
interface Props {
  badge?: string;
  title?: string;
  subtitle?: string;
}

const {
  badge = "Open Source · MIT",
  title = "Ship Faster with Premium Components",
  subtitle = "Stop building from scratch. Accessible, beautiful, and zero-runtime.",
} = Astro.props;
---
<section class="hero-split">
  <div class="hero-split__content">
    <span class="hero-split__badge">{badge}</span>
    <h1 class="hero-split__title">{title}</h1>
    <p class="hero-split__subtitle">{subtitle}</p>
    <div class="hero-split__actions">
      <button class="hero-split__btn hero-split__btn--primary">Start Building</button>
      <button class="hero-split__btn hero-split__btn--ghost">Documentation</button>
    </div>
  </div>
  <div class="hero-split__visual" aria-hidden="true">
    <div class="mockup-frame">
      <div class="mockup-header">
        <span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
      </div>
      <div class="mockup-body">
        <code>npm install astro-component-kit</code>
      </div>
    </div>
  </div>
</section>

<style>
  .hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    min-height: 80vh;
    padding: 4rem 2rem;
    background: #030712;
  }
  .hero-split__badge {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: rgba(99,102,241,0.15);
    color: #818cf8;
    border: 1px solid rgba(99,102,241,0.3);
  }
  .hero-split__title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    margin: 1rem 0;
  }
  .hero-split__subtitle {
    font-size: 1.1rem;
    color: #94a3b8;
    margin: 0 0 2rem;
  }
  .hero-split__actions {
    display: flex;
    gap: 1rem;
  }
  .hero-split__btn {
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
  }
  .hero-split__btn--primary {
    background: #eab308;
    color: #000;
    border: none;
  }
  .hero-split__btn--ghost {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
  }
  .mockup-frame {
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem;
  }
  .mockup-header {
    display: flex;
    gap: 6px;
    margin-bottom: 1.5rem;
  }
  .dot { width: 10px; height: 10px; border-radius: 50%; }
  .dot.red { background: #ef4444; }
  .dot.yellow { background: #f59e0b; }
  .dot.green { background: #10b981; }
  @media (max-width: 860px) {
    .hero-split { grid-template-columns: 1fr; }
  }
</style>