HeroCta Hero

---
/**
 * HeroCta
 * Hero met inline email/lead form rechts naast de headline.
 * Split layout: tekst links, form card rechts.
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  formTitle?: string;
  formAction?: string;
  formPlaceholder?: string;
  submitLabel?: string;
  disclaimer?: string;
  trustItems?: string[];
}
const {
  eyebrow, headline, sub,
  formTitle = 'Start vandaag gratis',
  formAction = '#',
  formPlaceholder = 'jouw@email.nl',
  submitLabel = 'Aan de slag →',
  disclaimer,
  trustItems = [],
} = Astro.props;
---
<section class="hcf">
  <div class="hcf-inner">
    <div class="hcf-text">
      {eyebrow && <span class="hcf-eyebrow">{eyebrow}</span>}
      <h1 class="hcf-headline">{headline}</h1>
      {sub && <p class="hcf-sub">{sub}</p>}
      {trustItems.length > 0 && (
        <ul class="hcf-trust">
          {trustItems.map(t => <li class="hcf-trust-item"><span>✓</span>{t}</li>)}
        </ul>
      )}
    </div>
    <div class="hcf-card">
      <p class="hcf-form-title">{formTitle}</p>
      <form action={formAction} class="hcf-form">
        <input type="email" placeholder={formPlaceholder} class="hcf-input" required />
        <button type="submit" class="hcf-submit">{submitLabel}</button>
      </form>
      {disclaimer && <p class="hcf-disclaimer">{disclaimer}</p>}
    </div>
  </div>
</section>
<style>
  .hcf { padding: 5rem 2rem; background: linear-gradient(135deg, #f8fafc 0%, #fff 60%); }
  .hcf-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 420px; gap: 4rem; align-items: center; }
  .hcf-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent,#6366f1); margin-bottom: 1rem; }
  .hcf-headline { font-size: clamp(2rem, 3.5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #0f172a; margin: 0 0 1.25rem; }
  .hcf-sub { font-size: 1.0625rem; color: #64748b; line-height: 1.65; margin: 0 0 2rem; }
  .hcf-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  .hcf-trust-item { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: #334155; }
  .hcf-trust-item span { color: var(--color-accent,#6366f1); font-weight: 700; }
  .hcf-card { background: #fff; border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); }
  .hcf-form-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0 0 1.25rem; }
  .hcf-form { display: flex; flex-direction: column; gap: 0.75rem; }
  .hcf-input { padding: 0.8125rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem; font-size: 0.9375rem; outline: none; transition: border-color 0.2s; }
  .hcf-input:focus { border-color: var(--color-accent,#6366f1); }
  .hcf-submit { padding: 0.875rem 1rem; background: var(--color-accent,#6366f1); color: #fff; border: none; border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
  .hcf-submit:hover { opacity: 0.9; }
  .hcf-disclaimer { font-size: 0.75rem; color: #94a3b8; margin-top: 0.75rem; line-height: 1.5; }
  @media (max-width: 768px) { .hcf-inner { grid-template-columns: 1fr; } }
</style>