HeroCta Hero

---
/**
 * HeroCta
 * Lead-capture hero: tekstkolom links (eyebrow, kop, sub, trust-lijst) en een
 * formulier-card rechts (titel, e-mailveld, submit, disclaimer). Light.
 *
 * Props: zie interface. Alle copy is prop-driven.
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  trust?: string[];
  formTitle?: string;
  formAction?: string;
  inputPlaceholder?: string;
  submitLabel?: string;
  disclaimer?: string;
}

const {
  eyebrow,
  headline,
  sub,
  trust = [],
  formTitle,
  formAction = '#',
  inputPlaceholder,
  submitLabel = 'Aanvragen',
  disclaimer,
} = Astro.props;
---

<section class:list={['bl-section', 'hcf']}>
  <div class="bl-inner 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>}
      {trust.length > 0 && (
        <ul class="hcf-trust">
          {trust.map((item) => (
            <li class="hcf-trust-item"><span>&#10003;</span>{item}</li>
          ))}
        </ul>
      )}
    </div>
    <div class="hcf-card">
      {formTitle && <p class="hcf-form-title">{formTitle}</p>}
      <form action={formAction} class="hcf-form">
        <input type="email" placeholder={inputPlaceholder} class="hcf-input" required />
        <button type="submit" class="hcf-submit">{submitLabel} &rarr;</button>
      </form>
      {disclaimer && <p class="hcf-disclaimer">{disclaimer}</p>}
    </div>
  </div>
</section>

<style>
.hcf{background:linear-gradient(135deg,#f8fafc,#fff 60%)}
.hcf-inner{display:grid;grid-template-columns:1fr 420px;gap:4rem;align-items:center}
.hcf-eyebrow{display:inline-block;font-size:.8125rem;font-weight:600;letter-spacing:.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:-.03em;line-height:1.1;color:#0f172a;margin:0 0 1.25rem}
.hcf-sub{font-size:1.0625rem;color:#475569;line-height:1.65;margin:0 0 2rem}
.hcf-trust{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.hcf-trust-item{display:flex;align-items:center;gap:.625rem;font-size:.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 #00000014,0 0 0 1px #0000000a}
.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:.75rem}
.hcf-input{padding:.8125rem 1rem;border:1.5px solid #e2e8f0;border-radius:.5rem;font-size:1rem;outline:none;transition:border-color .2s}
.hcf-input:focus{border-color:var(--color-accent,#6366f1)}
.hcf-submit{padding:.875rem 1rem;background:var(--color-accent,#6366f1);color:#fff;border:none;border-radius:.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.hcf-submit:hover{opacity:.9}
.hcf-disclaimer{font-size:.8125rem;color:#64748b;margin-top:.75rem;line-height:1.5}
@media (max-width:860px){
  .hcf-inner{grid-template-columns:1fr}
}
</style>