CtaPhone CTA

---
/**
 * CtaPhone
 * Telefoon-CTA: eyebrow, kop, sub, een prominente bel-knop met nummer, openings-
 * tijden en een secundaire e-maillink. Gecentreerd.
 *
 * Props:
 * - eyebrow?: string
 * - headline: string
 * - sub?: string
 * - phone: { label: string; number: string; tel: string }
 * - hours?: string
 * - email?: { label: string; address: string }
 */
interface Props {
  eyebrow?: string;
  headline: string;
  sub?: string;
  phone: { label: string; number: string; tel: string };
  hours?: string;
  email?: { label: string; address: string };
}
const { eyebrow, headline, sub, phone, hours, email } = Astro.props;
---

<section class="bl-section ctaph">
  <div class="bl-inner bl-inner--narrow ctaph-inner">
    {eyebrow && <span class="ctaph-eyebrow">{eyebrow}</span>}
    <h2 class="ctaph-headline">{headline}</h2>
    {sub && <p class="ctaph-sub">{sub}</p>}
    <div class="ctaph-contact">
      <a href={`tel:${phone.tel}`} class="ctaph-phone-btn">
        <span class="ctaph-phone-icon" aria-hidden="true">&#9742;</span>
        <span>
          <span class="ctaph-phone-label">{phone.label}</span>
          <span class="ctaph-phone-num">{phone.number}</span>
        </span>
      </a>
      {hours && <p class="ctaph-hours">{hours}</p>}
      {email && <a href={`mailto:${email.address}`} class="ctaph-secondary">{email.label}</a>}
    </div>
  </div>
</section>

<style>
.ctaph{background:#fff;border-top:1px solid #e5e7eb}
.ctaph-inner{text-align:center}
.ctaph-eyebrow{display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent,#6366f1);margin-bottom:.75rem}
.ctaph-headline{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:900;color:#0a0a0a;letter-spacing:-.04em;line-height:1.15;margin:0 0 .875rem}
.ctaph-sub{font-size:1.0625rem;color:#4b5563;line-height:1.65;margin:0 0 2.5rem}
.ctaph-contact{display:flex;flex-direction:column;align-items:center;gap:1rem}
.ctaph-phone-btn{display:inline-flex;align-items:center;gap:1rem;padding:1.125rem 2.5rem;background:#0a0a0a;color:#fff;border-radius:.75rem;text-decoration:none;transition:opacity .2s}
.ctaph-phone-btn:hover{opacity:.85}
.ctaph-phone-icon{font-size:1.5rem}
.ctaph-phone-label{display:block;font-size:.8125rem;color:#cbd5e1;text-align:left}
.ctaph-phone-num{display:block;font-size:1.375rem;font-weight:800;letter-spacing:-.02em}
.ctaph-hours{font-size:.875rem;color:#6b7280;margin:0}
.ctaph-secondary{font-size:1rem;color:var(--color-accent,#6366f1);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.ctaph-secondary:hover{border-color:var(--color-accent,#6366f1)}
</style>