/* ============== CALENDAR / BOOK A CALL ============== */
const Calendar = ({ lang }) => {
  const isAR = lang === "ar";
  const iframeRef = React.useRef(null);
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    // Inject GHL embed script once
    if (!document.querySelector('script[src*="form_embed.js"]')) {
      const s = document.createElement("script");
      s.src = "https://link.msgsndr.com/js/form_embed.js";
      s.async = true;
      document.body.appendChild(s);
    }
    // Detect iframe load
    const f = iframeRef.current;
    if (!f) return;
    const onload = () => setLoaded(true);
    f.addEventListener("load", onload);
    return () => f.removeEventListener("load", onload);
  }, []);

  const bullets = isAR ? [
    "جلسة استراتيجية ٣٠ دقيقة — لا عرض مبيعات",
    "نراجع منطقتك وحجم استفساراتك",
    "نخبرك بصراحة إن كنّا مناسبين"
  ] : [
    "30-minute strategy call — no sales pitch",
    "We review your area and inquiry volume",
    "Straight answer on whether we're a fit"
  ];

  return (
    <section className="section calendar" id="book" data-screen-label="06 Book">
      <div className="shell">
        <div className="section-head">
          <div className="label">
            <span className="num">/06</span>
            <span className="eyebrow">{isAR ? "احجز مكالمتك" : "Book your call"}</span>
          </div>
          <h2>
            {isAR ? <>اختر <span className="it">وقتك</span>.</> : <>Pick <span className="it">your moment</span>.</>}
          </h2>
        </div>

        <div className="cal-grid">
          <aside className="cal-aside">
            <div className="cal-aside-eye eyebrow mono">
              {isAR ? "ما يحدث بعد الحجز" : "What happens next"}
            </div>
            <ul className="cal-list">
              {bullets.map((b, i) => (
                <li key={i} className="cal-li">
                  <span className="cal-li-num mono">{String(i + 1).padStart(2, "0")}</span>
                  <span className="cal-li-t">{b}</span>
                </li>
              ))}
            </ul>

            <div className="cal-pulse" aria-hidden="true">
              <span className="pulse-dot"></span>
              <span className="pulse-ring r1"></span>
              <span className="pulse-ring r2"></span>
              <span className="pulse-ring r3"></span>
            </div>

            <div className="cal-foot mono">
              {isAR ? "متاح: من الأحد إلى الخميس · توقيت الخليج" : "Available: Sun–Thu · Gulf time"}
            </div>
          </aside>

          <div className={`cal-frame ${loaded ? "is-loaded" : ""}`}>
            <div className="cal-frame-bar mono">
              <span className="cal-bar-dot d1"></span>
              <span className="cal-bar-dot d2"></span>
              <span className="cal-bar-dot d3"></span>
              <span className="cal-bar-url">wastafy.ai/book</span>
              <span className="cal-bar-live">
                <span className="live-dot"></span>
                {isAR ? "حيّ" : "live"}
              </span>
            </div>
            {!loaded && (
              <div className="cal-skeleton" aria-hidden="true">
                <div className="cal-skel-row" style={{ width: "60%" }}></div>
                <div className="cal-skel-grid">
                  {Array.from({ length: 21 }).map((_, i) => (
                    <div key={i} className="cal-skel-cell" style={{ animationDelay: `${i * 40}ms` }}></div>
                  ))}
                </div>
              </div>
            )}
            <iframe
              ref={iframeRef}
              src="https://api.leadconnectorhq.com/widget/booking/5SteSrPC7nn6brYERcxF"
              title="Book a strategy call"
              id="5SteSrPC7nn6brYERcxF_1778086000250"
              className="cal-iframe"
              scrolling="no"
              style={{ width: "100%", border: "none", overflow: "hidden" }}
            ></iframe>
          </div>
        </div>
      </div>

      <style>{`
        .calendar { padding-top: 96px; padding-bottom: 96px; }
        .cal-grid {
          display: grid;
          grid-template-columns: 360px 1fr;
          gap: 0;
          border-top: 1px solid var(--rule);
          border-left: 1px solid var(--rule);
          border-right: 1px solid var(--rule);
          background: var(--bg);
        }
        .cal-aside {
          padding: 40px 32px;
          border-right: 1px solid var(--rule);
          background: var(--bg-2);
          display: flex;
          flex-direction: column;
          gap: 28px;
          position: relative;
          overflow: hidden;
        }
        .cal-aside-eye {
          font-size: 10px;
          color: var(--muted);
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }
        .cal-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 18px;
        }
        .cal-li {
          display: grid;
          grid-template-columns: 36px 1fr;
          gap: 12px;
          align-items: baseline;
          font-size: 15px;
          line-height: 1.45;
          color: var(--ink);
          opacity: 0;
          transform: translateY(6px);
          animation: calRise .6s var(--ease) forwards;
        }
        .cal-li:nth-child(1) { animation-delay: .15s; }
        .cal-li:nth-child(2) { animation-delay: .30s; }
        .cal-li:nth-child(3) { animation-delay: .45s; }
        .cal-li-num {
          font-size: 10px;
          color: var(--accent);
          letter-spacing: 0.18em;
        }

        .cal-pulse {
          position: relative;
          width: 80px; height: 80px;
          margin: 8px 0;
        }
        .pulse-dot {
          position: absolute; left: 50%; top: 50%;
          width: 10px; height: 10px;
          background: var(--accent);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
        }
        .pulse-ring {
          position: absolute; left: 50%; top: 50%;
          width: 14px; height: 14px;
          border: 1px solid var(--accent);
          border-radius: 50%;
          transform: translate(-50%, -50%) scale(1);
          opacity: 0;
          animation: pulseOut 2.4s cubic-bezier(.2,.6,.2,1) infinite;
        }
        .pulse-ring.r2 { animation-delay: .8s; }
        .pulse-ring.r3 { animation-delay: 1.6s; }
        @keyframes pulseOut {
          0%   { transform: translate(-50%, -50%) scale(1);   opacity: .8; }
          80%  { opacity: 0; }
          100% { transform: translate(-50%, -50%) scale(5);   opacity: 0; }
        }

        .cal-foot {
          font-size: 10px;
          color: var(--muted);
          letter-spacing: 0.14em;
          text-transform: uppercase;
          margin-top: auto;
          padding-top: 24px;
          border-top: 1px solid var(--rule);
        }

        .cal-frame {
          position: relative;
          background: var(--bg);
          min-height: 620px;
          opacity: 0;
          transform: translateY(8px);
          animation: calFadeIn .8s var(--ease) .3s forwards;
        }
        @keyframes calFadeIn { to { opacity: 1; transform: none; } }
        @keyframes calRise   { to { opacity: 1; transform: none; } }

        .cal-frame-bar {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 14px 18px;
          border-bottom: 1px solid var(--rule);
          font-size: 11px;
          color: var(--muted);
          letter-spacing: 0.08em;
        }
        .cal-bar-dot {
          width: 9px; height: 9px; border-radius: 50%;
          background: color-mix(in oklab, var(--ink) 18%, transparent);
        }
        .cal-bar-dot.d1 { background: #ff5f57; }
        .cal-bar-dot.d2 { background: #febc2e; }
        .cal-bar-dot.d3 { background: #28c840; }
        .cal-bar-url {
          flex: 1;
          text-align: center;
          font-family: var(--mono);
          font-size: 11px;
          color: var(--muted);
          letter-spacing: 0.1em;
        }
        .cal-bar-live {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 10px;
          color: var(--accent);
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }
        .live-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--accent);
          animation: liveBlink 1.6s ease-in-out infinite;
        }
        @keyframes liveBlink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

        .cal-iframe {
          display: block;
          min-height: 620px;
          width: 100%;
        }

        .cal-skeleton {
          position: absolute;
          inset: 50px 0 0 0;
          padding: 32px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          background: var(--bg);
          pointer-events: none;
        }
        .cal-skel-row {
          height: 14px;
          background: color-mix(in oklab, var(--ink) 8%, transparent);
          border-radius: 4px;
        }
        .cal-skel-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 8px;
          margin-top: 8px;
        }
        .cal-skel-cell {
          aspect-ratio: 1 / 1;
          background: color-mix(in oklab, var(--ink) 6%, transparent);
          border-radius: 4px;
          animation: skelPulse 1.6s ease-in-out infinite;
        }
        @keyframes skelPulse {
          0%, 100% { opacity: .35 }
          50%      { opacity: .8 }
        }
        .cal-frame.is-loaded .cal-skeleton { display: none; }

        @media (max-width: 900px) {
          .cal-grid { grid-template-columns: 1fr; }
          .cal-aside { border-right: 0; border-bottom: 1px solid var(--rule); }
          .cal-frame { min-height: 720px; }
          .cal-iframe { min-height: 720px; }
        }
      `}</style>
    </section>
  );
};

window.Calendar = Calendar;