/* global React, UmIcon */
const { useState: useBA, useEffect: useEffBA } = React;

function BookAppointmentPage() {
  const R2 = (typeof window !== "undefined" && window.UM_ROOT) || "../../";
  const [mouse, setMouse] = useBA({ x: 0.5, y: 0.5 });

  useEffBA(() => {
    const onMove = (e) => {
      setMouse({
        x: e.clientX / window.innerWidth,
        y: e.clientY / window.innerHeight,
      });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  // Looping floating-orb data
  const orbs = [
    { x: 12, y: 18, size: 96, hue: "var(--accent)",      delay: 0   },
    { x: 82, y: 32, size: 120, hue: "#ff5c8a",           delay: 2.4 },
    { x: 20, y: 78, size: 80,  hue: "#39FF14",           delay: 4.0 },
    { x: 70, y: 84, size: 140, hue: "var(--accent)",     delay: 1.2 },
    { x: 50, y: 12, size: 60,  hue: "#6BC4FF",           delay: 3.2 },
  ];

  return (
    <div className="ba-shell">
      {/* Mouse-tracked aurora */}
      <div
        className="ba-spotlight"
        style={{
          background: `radial-gradient(600px circle at ${mouse.x * 100}% ${mouse.y * 100}%, rgba(0,163,255,0.12), transparent 60%)`,
        }}
      ></div>

      <div className="ba-aurora"></div>

      {/* Looping floating orbs */}
      <div className="ba-orbs">
        {orbs.map((o, i) => (
          <div key={i} className="ba-orb" style={{
            left: `${o.x}%`, top: `${o.y}%`,
            width: o.size, height: o.size,
            background: `radial-gradient(circle, ${o.hue} 0%, transparent 60%)`,
            animationDelay: `${o.delay}s`,
          }}></div>
        ))}
      </div>

      <div className="ba-top">
        <a className="of-top-mark" href={`${R2}index.html`}>
          <img src={`${R2}assets/logos/transparent/iconmark-whiteblue.png`} alt="UM"/>
          <span className="nm">UCHE MADUMERE</span>
        </a>
        <a className="of-back" href={`${R2}index.html`}>Exit ×</a>
      </div>

      <section className="ba-hero">
        <div className="ba-hero-copy">
          <span className="of-hero-eyebrow">
            <span className="dot"></span> Book a call · 15 or 30 min
          </span>
          <h1 className="ba-title">
            Let's <span className="ba-grad">talk</span><br/>
            about<br/>
            your <span className="accent">brand.</span>
          </h1>
          <p className="ba-sub">
            A 15-minute intro is enough to scope most projects. Bring your brief, current brand,
            or just a vibe. I'll send a scoped reply within 24 hours.
          </p>

          {/* CALL OPTIONS */}
          <div className="ba-call-grid">
            <a className="ba-call" href="https://calendar.app.google/CfnNGnukiMfhDTyf8" target="_blank" rel="noopener">
              <div className="ba-call-time">15<span>min</span></div>
              <div className="ba-call-nm">Quick intro</div>
              <div className="ba-call-sub">Project scoping · fit check</div>
              <div className="ba-call-arrow">→</div>
            </a>
            <a className="ba-call featured" href="https://calendar.app.google/CfnNGnukiMfhDTyf8" target="_blank" rel="noopener">
              <div className="ba-pop-pill">★ POPULAR</div>
              <div className="ba-call-time">30<span>min</span></div>
              <div className="ba-call-nm">Deep dive</div>
              <div className="ba-call-sub">Strategy + walkthrough of work</div>
              <div className="ba-call-arrow">→</div>
            </a>
          </div>

          <div className="ba-promise">
            <div className="ba-promise-row">
              <span className="ba-promise-tick">✓</span>
              <span>Free · No commitment · Scoped reply within 24 hours</span>
            </div>
            <div className="ba-promise-row">
              <span className="ba-promise-tick">✓</span>
              <span>If we don't fit, I'll refer you to someone who does</span>
            </div>
            <div className="ba-promise-row">
              <span className="ba-promise-tick">✓</span>
              <span>Or skip the call — <a href="order.html">build your offer →</a></span>
            </div>
          </div>
        </div>

        {/* RIGHT: orbiting brand wheel — looping */}
        <div className="ba-visual">
          <div className="ba-wheel">
            <div className="ba-wheel-ring r1"></div>
            <div className="ba-wheel-ring r2"></div>
            <div className="ba-wheel-ring r3"></div>

            {/* orbiting service chips */}
            <div className="ba-wheel-orbit o1">
              {["Static", "Motion", "Brand", "Video", "Web"].map((t, i) => (
                <span key={i} className="ba-chip" style={{transform: `rotate(${i * 72}deg) translateX(180px) rotate(-${i * 72}deg)`}}>
                  <span className="dot"></span>{t}
                </span>
              ))}
            </div>
            <div className="ba-wheel-orbit o2">
              {["UI/UX", "Decks", "AI", "Photo"].map((t, i) => (
                <span key={i} className="ba-chip alt" style={{transform: `rotate(${i * 90 + 45}deg) translateX(118px) rotate(-${i * 90 + 45}deg)`}}>
                  <span className="dot"></span>{t}
                </span>
              ))}
            </div>

            <div className="ba-wheel-core">
              <img src={`${R2}assets/logos/transparent/iconmark-whiteblue.png`} alt=""/>
              <div className="ba-pulse"></div>
              <div className="ba-pulse pulse-2"></div>
              <div className="ba-pulse pulse-3"></div>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT TO EXPECT */}
      <section className="ba-expect">
        <div className="ba-expect-inner">
          <div className="ba-expect-head">
            <span className="pw-label"><span className="dot"></span>What to expect</span>
            <h2>3 steps. <span className="accent">Zero friction.</span></h2>
          </div>
          <div className="ba-expect-grid">
            {[
              { n: "01", t: "Pick a time", d: "Choose 15- or 30-min on my calendar. Pacific, Eastern, or your time — auto-converted." },
              { n: "02", t: "Bring your brief", d: "Even a few bullet points work. I'll dig into the goal and propose the scope." },
              { n: "03", t: "Get a scoped reply", d: "Within 24 hours: deliverables, timeline, fee. No back-and-forth before the price is on the table." },
            ].map(s => (
              <div key={s.n} className="ba-step">
                <div className="ba-step-num">{s.n}</div>
                <div className="ba-step-t">{s.t}</div>
                <div className="ba-step-d">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <footer className="ba-foot">
        <span>UCHE MADUMERE · Graphic + Motion Designer</span>
        <span>Mississauga, ON · Available worldwide</span>
      </footer>
    </div>
  );
}

window.BookAppointmentPage = BookAppointmentPage;