---
// HeroSplit.astro — Split-screen hero with image/media side
interface Props {
  title?: string;
  subtitle?: string;
}

const {
  title = "Ship Faster with Premium Components",
  subtitle = "Stop building from scratch. Use production-ready, accessible, and responsive components.",
} = Astro.props;
---

<div class="cq-hero-split-cq">
<section class="hero-split">
  <div class="hero-split__content">
    <span class="hero-split__badge">Open Source · MIT</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
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </button>
      <button class="hero-split__btn hero-split__btn--ghost">
        Documentation
      </button>
    </div>
    <div class="hero-split__stats">
      <div class="hero-split__stat">
        <span class="hero-split__stat-num">200+</span>
        <span class="hero-split__stat-label">Components</span>
      </div>
      <div class="hero-split__stat">
        <span class="hero-split__stat-num">10K+</span>
        <span class="hero-split__stat-label">Downloads</span>
      </div>
      <div class="hero-split__stat">
        <span class="hero-split__stat-num">5K+</span>
        <span class="hero-split__stat-label">Stars</span>
      </div>
    </div>
  </div>
  <div class="hero-split__visual" aria-hidden="true">
    <div class="hero-split__visual-inner">
      <div class="hero-split__mock-card">
        <div class="hero-split__mock-body">
          <div class="hero-split__mock-line hero-split__mock-line--wide"></div>
          <div class="hero-split__mock-line hero-split__mock-line--medium"></div>
          <div class="hero-split__mock-line hero-split__mock-line--short"></div>
          <div class="hero-split__mock-grid">
            <div class="hero-split__mock-box"></div>
            <div class="hero-split__mock-box"></div>
            <div class="hero-split__mock-box"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</div>
<style>
  .cq-hero-split-cq { container-type: inline-size; }
  .hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;
    min-height: 85vh;
    padding: var(--sp-12) var(--sp-8);
    position: relative;
  }
  .hero-split__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    max-width: 560px;
  }
  .hero-split__badge {
    display: inline-block;
    width: fit-content;
    padding: 0.35rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-primary-light);
    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
    border-radius: var(--r-full);
  }
  .hero-split__title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: var(--c-text-1);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
  }
  .hero-split__subtitle {
    font-size: 1.05rem;
    color: var(--c-text-2);
    line-height: 1.6;
    margin: 0;
  }
  .hero-split__actions {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
  }
  .hero-split__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-sans);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
  }
  .hero-split__btn--primary {
    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
    color: var(--c-on-primary, #0a0a0a);
    border: none;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
  }
  .hero-split__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
  }
  .hero-split__btn--ghost {
    background: transparent;
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
  }
  .hero-split__btn--ghost:hover {
    color: var(--c-text-1);
    border-color: var(--c-primary-light);
  }
  .hero-split__stats {
    display: flex;
    gap: var(--sp-6);
    margin-top: var(--sp-2);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
  }
  .hero-split__stat { display: flex; flex-direction: column; gap: 2px; }
  .hero-split__stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-primary-light);
  }
  .hero-split__stat-label {
    font-size: 0.8rem;
    color: var(--c-text-3);
  }

  /* Visual side */
  .hero-split__visual {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-split__visual-inner {
    width: 100%;
    max-width: 500px;
  }
  .hero-split__mock-card {
    background: rgb(var(--ink-rgb, 255 255 255) / 0.03);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }
  .hero-split__mock-body { padding: var(--sp-5); }
  .hero-split__mock-line {
    height: 8px;
    border-radius: 4px;
    background: rgb(var(--ink-rgb, 255 255 255) / 0.06);
    margin-bottom: var(--sp-3);
  }
  .hero-split__mock-line--wide { width: 80%; }
  .hero-split__mock-line--medium { width: 60%; }
  .hero-split__mock-line--short { width: 40%; }
  .hero-split__mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }
  .hero-split__mock-box {
    height: 60px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--c-primary, #b8860b) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 15%, transparent);
  }

  @container (max-width: 768px) {
    .hero-split {
      grid-template-columns: 1fr;
      gap: var(--sp-8);
      padding: var(--sp-8) var(--sp-4);
    }
    .hero-split__visual { order: -1; }
    .hero-split__visual-inner { max-width: 100%; }
    .hero-split__stats { gap: var(--sp-4); }
  }
</style>