// ============================================================
// SHARED · Contact + Footer
// Used by homepage AND ROI calculator page.
// ============================================================

function HmContact({ eyebrow, title, subtitle, hideSubtitle } = {}) {
  return (
    <section className="hm-contact" id="contact">
      <div className="hm-contact-head">
        <div className="eyebrow-big"><span className="bar"></span>{eyebrow || 'Laten we praten'}</div>
        {title
          ? <h2>{title}</h2>
          : <h2>Meer doen met <span className="grad">hetzelfde team?</span></h2>}
        {!hideSubtitle && (subtitle
          ? <p>{subtitle}</p>
          : <p>
              Plan een gesprek. Je weet precies welke agents capaciteit vrijspelen, wat het oplevert en wat het kost.<br/>
              Geen verkooppraatje. Gewoon een eerlijk gesprek.
            </p>)}
      </div>

      <div className="hm-contact-grid">
        <a href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ2AUTktW8sBy8pDHE4ZLiNaKIjJHG2Y7aSb9UEZkC8czjgP5Qqw8_upqM_3yfrcWDTRUfHh5E0U" className="c-card c-plan" target="_blank" rel="noopener">
          <div className="c-inner">
            <div className="c-title">Plan direct</div>
            <div className="c-sub">Kies een moment dat past</div>
            <div className="c-value">Digitaal of fysiek</div>
          </div>
          <div className="c-arrow">Kies je moment →</div>
        </a>

        <a href="mailto:info@repetive.ai" className="c-card c-mail">
          <div className="c-inner">
            <div className="c-title">Mail ons</div>
            <div className="c-sub">We antwoorden binnen 24u</div>
            <div className="c-value">info@repetive.ai</div>
          </div>
          <div className="c-arrow">E-mail opstellen →</div>
        </a>

        <a href="tel:+31461515150" className="c-card c-call">
          <div className="c-inner">
            <div className="c-title">Bel ons</div>
            <div className="c-sub">Direct contact met het team</div>
            <div className="c-value">06 46 15 15 50</div>
          </div>
          <div className="c-arrow">Nu bellen →</div>
        </a>

        <a href="https://maps.app.goo.gl/eaow5ZeUKy7ciWqv8" target="_blank" rel="noopener" className="c-card c-visit">
          <div className="c-inner">
            <div className="c-title">Bezoek ons</div>
            <div className="c-sub">Kom koffie drinken</div>
            <div className="c-value">Spoorlaan 181, Tilburg</div>
          </div>
          <div className="c-arrow">Route plannen →</div>
        </a>
      </div>
    </section>
  );
}

function HmFooter() {
  return (
    <footer className="hm-foot-meta">
      <a href="/" className="brand-b" aria-label="Repetive">
        <img src="assets/logo.png" alt="Repetive" />
      </a>
      <div className="links">
        <a href="/#missie">Missie</a>
        <a href="/#aanpak">Aanpak</a>
        <a href="Cases hub.html">Cases</a>
        <a href="ROI Calculator.html">Wat het oplevert</a>
        <a href="/#team">Over ons</a>
        <a href="Kennisbank.html">Kennisbank</a>
        <a href="Jobs.html">Vacatures</a>
        <a href="Trust Center.html">Trust Center</a>
        <a href="/#contact">Contact</a>
      </div>
      <div>© 2026 Repetive · Tilburg</div>
    </footer>
  );
}

Object.assign(window, { HmContact, HmFooter });