// booking.jsx — booking section with embedded external service
const ICONS = {
  prescription: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M6 3h8l4 4v14H6z" />
      <path d="M14 3v4h4" />
      <path d="M9 12h6" />
      <path d="M9 16h4" />
    </svg>
  ),
  wallet: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="6" width="18" height="13" rx="2" />
      <path d="M3 9h18" />
      <circle cx="16.5" cy="13.5" r="1.2" />
    </svg>
  ),
};

const BOOKING_URL = "https://web.cenplexbooking.ch/appointment-selection?customerId=282&locationId=465";

function Booking({ lang }) {
  const t = COPY[lang].booking;

  React.useEffect(() => {
    const section = document.getElementById('booking');
    if (!section) return;
    let active = false;

    const pushGuard = () => {
      window.history.pushState({ bookingGuard: true }, '');
      active = true;
    };

    const onPopState = () => {
      if (active) pushGuard();
    };

    // Activate guard as soon as booking section scrolls into view
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting && !active) pushGuard(); },
      { threshold: 0.1 }
    );

    obs.observe(section);
    window.addEventListener('popstate', onPopState);

    return () => {
      obs.disconnect();
      window.removeEventListener('popstate', onPopState);
    };
  }, []);

  return (
    <section className="booking-section" id="booking">
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <h2 className="sec-title" style={{ whiteSpace: "pre-line" }}>{t.title}</h2>
        <p className="sec-subtitle" style={{ color: "color-mix(in oklab, var(--bg) 75%, transparent)" }}>{t.subtitle}</p>
        <p style={{ fontSize: 13.5, color: "color-mix(in oklab, var(--bg) 60%, transparent)", margin: "-12px 0 40px", lineHeight: 1.5 }}>
          ⚠ Termine, die nicht mindestens 24 Stunden im Voraus abgesagt werden, sowie No-Shows werden verrechnet.
        </p>

        <div className="booking-info">
          <div className="binfo-methods">
            {t.methods.map((m, i) => (
              <div className="binfo-card" key={i}>
                {m.icon === "wallet" && (
                  <a className="emr-badge-link" href="https://emr.ch/" target="_blank" rel="noopener noreferrer" aria-label="EMR / RME">
                    <img className="emr-badge" src="assets/emr-rme.jpeg" alt="EMR / RME anerkannt" />
                  </a>
                )}
                <span className="binfo-icon">{ICONS[m.icon]}</span>
                <h4>{m.title}</h4>
                <p>{m.body}</p>
              </div>
            ))}
          </div>
          <div className="binfo-prices">
            <div className="mono binfo-prices-title">{t.priceTitle}</div>
            {t.prices.map((p, i) => (
              <div className="binfo-price-row" key={i}>
                <span>{p.label}</span>
                <span className="binfo-price-val">CHF {p.value}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="booking-embed">
          <iframe
            className="booking-iframe"
            src={BOOKING_URL}
            title={t.eyebrow}
            loading="lazy"
            allow="payment"
          />
          <a className="booking-embed-fallback mono" href={BOOKING_URL} target="_blank" rel="noopener noreferrer">
            {lang === "de" ? "In neuem Tab öffnen ↗" : "Open in a new tab ↗"}
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Booking });