---
/**
 * HeroShowcaseSplit — Two-column modern landing hero section with install command, action CTAs, and interactive preview widget.
 * 
 * @param {string} badge - Header lead badge. Default is 'NEW: ASTRO 5 SUITE'.
 * @param {string} title - Primary headline string.
 * @param {string} subtitle - Subtitle paragraph text.
 * @param {string} primaryCtaText - Primary CTA button text.
 * @param {string} primaryCtaHref - Primary CTA link.
 * @param {string} secondaryCtaText - Secondary button text.
 * @param {string} secondaryCtaHref - Secondary link.
 */
interface Props {
  badge?: string;
  title?: string;
  subtitle?: string;
  primaryCtaText?: string;
  primaryCtaHref?: string;
  secondaryCtaText?: string;
  secondaryCtaHref?: string;
}

const {
  badge = 'NEW: ASTRO 5 PRODUCTION SUITE',
  title = 'Craft stunning web apps at lightspeed',
  subtitle = 'A cohesive collection of 150+ dark-mode first, accessible Astro components. Zero dependencies, pure vanilla CSS, full TypeScript support.',
  primaryCtaText = 'Explore Components',
  primaryCtaHref = '/docs/glass-button',
  secondaryCtaText = 'View on GitHub',
  secondaryCtaHref = 'https://github.com/konstantinWDK/astro-components',
} = Astro.props;
---

<section class="split-hero">
  <div class="split-hero__inner">
    <div class="split-hero__content">
      <div class="split-hero__badge">
        <span class="dot"></span>
        <span>{badge}</span>
      </div>

      <h1 class="split-hero__title">{title}</h1>
      <p class="split-hero__subtitle">{subtitle}</p>

      <div class="split-hero__actions">
        <a href={primaryCtaHref} class="btn btn--primary">
          {primaryCtaText}
          <span aria-hidden="true">→</span>
        </a>
        <a href={secondaryCtaHref} target="_blank" rel="noopener" class="btn btn--secondary">
          {secondaryCtaText}
        </a>
      </div>

      <div class="split-hero__install">
        <span class="prompt">$</span>
        <code>npm install astro-component-kit</code>
      </div>
    </div>

    <div class="split-hero__visual">
      <div class="glass-device">
        <div class="glass-device__bar">
          <span class="d-dot d-dot--red"></span>
          <span class="d-dot d-dot--yellow"></span>
          <span class="d-dot d-dot--green"></span>
          <span class="glass-device__url">astrocomponents.dev/preview</span>
        </div>
        <div class="glass-device__body">
          <slot>
            <div class="mock-widget">
              <span class="mock-icon">⚡</span>
              <h4>Production SSR Ready</h4>
              <p>Zero JavaScript hydration overhead by default.</p>
              <div class="mock-metrics">
                <div><span>Score</span><strong>100</strong></div>
                <div><span>A11y</span><strong>AA</strong></div>
                <div><span>Speed</span><strong>0.2s</strong></div>
              </div>
            </div>
          </slot>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .split-hero {
    position: relative;
    padding: 6rem 1.5rem;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-sans, system-ui, sans-serif);
  }

  .split-hero__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
  }

  .split-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .split-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.35rem 0.85rem;
    background: rgba(184, 134, 11, 0.12);
    border: 1px solid rgba(184, 134, 11, 0.35);
    border-radius: var(--r-full, 9999px);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--c-accent, #fef3c7);
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
  }

  .split-hero__badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d4a017;
    box-shadow: 0 0 8px #d4a017;
  }

  .split-hero__title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--c-text-1, #ffffff);
    margin: 0 0 1.25rem 0;
  }

  .split-hero__subtitle {
    font-size: 1.05rem;
    color: var(--c-text-2, #a3a3a3);
    line-height: 1.65;
    margin: 0 0 2rem 0;
    max-width: 540px;
  }

  .split-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 2rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 1.8rem;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: var(--r-md, 12px);
    text-decoration: none;
    transition: all 0.25s ease;
  }

  .btn--primary {
    background: linear-gradient(135deg, #d4a017, #b8860b);
    color: #050505;
    box-shadow: 0 4px 20px rgba(184, 134, 11, 0.35);
  }
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(184, 134, 11, 0.5);
  }

  .btn--secondary {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text-1, #ffffff);
  }
  .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }

  .split-hero__install {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 1.1rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md, 10px);
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--c-primary-light, #d4a017);
  }

  .split-hero__install .prompt {
    color: var(--c-text-3, #737373);
  }

  /* Visual mock preview container */
  .glass-device {
    background: rgba(14, 14, 18, 0.85);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-xl, 24px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
  }

  .glass-device__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.8rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .d-dot { width: 10px; height: 10px; border-radius: 50%; }
  .d-dot--red { background: #ef4444; }
  .d-dot--yellow { background: #f59e0b; }
  .d-dot--green { background: #10b981; }

  .glass-device__url {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--c-text-3, #737373);
    font-family: var(--font-mono, monospace);
  }

  .glass-device__body {
    padding: 2.5rem;
  }

  .mock-widget {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .mock-icon {
    font-size: 2.5rem;
    background: rgba(184, 134, 11, 0.15);
    border: 1px solid rgba(184, 134, 11, 0.3);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }

  .mock-widget h4 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--c-text-1, #ffffff);
    margin: 0;
  }

  .mock-widget p {
    font-size: 0.85rem;
    color: var(--c-text-2, #a3a3a3);
    margin: 0;
    max-width: 280px;
  }

  .mock-metrics {
    display: flex;
    gap: 24px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    justify-content: center;
  }

  .mock-metrics div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .mock-metrics span { font-size: 0.7rem; color: var(--c-text-3, #737373); text-transform: uppercase; }
  .mock-metrics strong { font-size: 1.1rem; color: var(--c-primary-light, #d4a017); }

  @media (max-width: 900px) {
    .split-hero__inner {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  }
</style>