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

function HmContact({ eyebrow, title, subtitle, hideSubtitle } = {}) {
  const [copied, setCopied] = React.useState(false);
  const copy = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const text = 'info@repetive.ai';
    const done = () => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(done).catch(() => {
        try {
          const ta = document.createElement('textarea');
          ta.value = text;
          ta.style.position = 'fixed';
          ta.style.opacity = '0';
          document.body.appendChild(ta);
          ta.select();
          document.execCommand('copy');
          document.body.removeChild(ta);
          done();
        } catch (err) {
          window.location.href = 'mailto:' + text;
        }
      });
    } else {
      try {
        const ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        done();
      } catch (err) {
        window.location.href = 'mailto:' + text;
      }
    }
  };

  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">Teams of op kantoor</div>
          </div>
          <div className="c-arrow">Kies je moment →</div>
        </a>

        <a href="mailto:info@repetive.ai" className="c-card c-mail" onClick={copy}>
          <div className="c-inner">
            <div className="c-title">Mail ons</div>
            <div className="c-sub">We antwoorden binnen 24u</div>
            <div className="c-value">{copied ? '✓ gekopieerd' : '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.google.com/?q=Spoorlaan+181+Tilburg" 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="Homepage.html" className="brand-b" aria-label="Repetive">
        <img src="assets/logo.png" alt="Repetive" />
      </a>
      <div className="links">
        <a href="Homepage.html#missie">Missie</a>
        <a href="Homepage.html#aanpak">Aanpak</a>
        <a href="Cases hub.html">Cases</a>
        <a href="ROI Calculator.html">Wat levert het op?</a>
        <a href="Homepage.html#team">Over ons</a>
        <a href="Kennisbank.html">Kennisbank</a>
        <a href="Jobs.html">Vacatures</a>
        <a href="Homepage.html#contact">Contact</a>
        <a href="assets/fair-use-policy.docx" download>Fair use policy</a>
      </div>
      <div>© 2026 Repetive · Tilburg</div>
    </footer>
  );
}

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