/* global React, ReactDOM */
const { useState, useEffect } = React;

function BookNav() {
  return <SiteNav ctaHref="#calendar" ctaLabel="Book now" />;
}

/* ─── Niche → GHL calendar map ──────────────────────────── */
const NICHES = [
  {
    key: "clinics",
    icon: "🏥",
    label: "Clinic / Med Spa",
    desc: "Medical, aesthetic & wellness clinics",
    color: "#10B981",
    widgetUrl: "https://api.leadconnectorhq.com/widget/booking/8fn6q2nQxJqineDdqXZ5",
  },
  {
    key: "home",
    icon: "🏠",
    label: "Home Services",
    desc: "HVAC, roofing, plumbing & trades",
    color: "#3B82F6",
    widgetUrl: "https://api.leadconnectorhq.com/widget/booking/O0PdvnvDMjwnLe7taOFP",
  },
  {
    key: "agencies",
    icon: "🎯",
    label: "Agency / Coach / Consultant",
    desc: "Marketing agencies, coaches & consultants",
    color: "#7B5CF5",
    widgetUrl: "https://api.leadconnectorhq.com/widget/booking/2xE7ZJaFYjLKHbWzlkVw",
  },
  {
    key: "ecom",
    icon: "🛍️",
    label: "E-com / Info Product",
    desc: "DTC brands, online stores & digital products",
    color: "#F59E0B",
    widgetUrl: "https://api.leadconnectorhq.com/widget/booking/lNu0jK4HUFHeXjaU39CT",
  },
];

const WINS = [
  { dot: "#7B5CF5", niche: "CLINIC",   name: "Dr. Joey Alcantara",  result: "$38K in 30 days"    },
  { dot: "#10B981", niche: "CLINIC",   name: "Renuva Back & Pain",  result: "$2.1M · 7.6× ROI"   },
  { dot: "#F59E0B", niche: "HOME SVC", name: "Alanis Air",          result: "$400K+ · 40× ROAS"  },
  { dot: "#3B82F6", niche: "FEATURED", name: "Bentley Trike",       result: "$3M/yr · 17.8× ROAS" },
];

const STEPS = [
  { num: "01", title: "30-min audit call",  body: "We screen-share your account and show you exactly what's broken, what's working, and what's missing." },
  { num: "02", title: "Custom 90-day plan", body: "Offer · creative strategy · funnel · tracking · spend curve — built specifically for your business." },
  { num: "03", title: "48-hour build",      body: "Ads + landing page + Sophie AI follow-up + live dashboard. Live in 2 business days." },
  { num: "04", title: "3X guarantee",       body: "Hit 3X ROAS in 90 days or we work free until we do. Signed on every contract." },
];

const TRUST_LINES = [
  "No long-term contract · month-to-month",
  "You own the ad account forever",
  "One client per niche per market",
  "3X ROAS in 90 days or we work free",
];

/* ─── Niche selector + GHL embed ────────────────────────── */
function NicheCalendar() {
  const [sel, setSel] = useState(null); // niche key

  const active = NICHES.find(n => n.key === sel);

  return (
    <div>
      {/* Step label */}
      <div style={{
        fontSize: 11, fontFamily: "'JetBrains Mono',monospace",
        letterSpacing: 1.5, color: "var(--fg-4)", marginBottom: 16,
        textTransform: "uppercase",
        display: "flex", alignItems: "center", gap: 10,
      }}>
        <span style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          width: 20, height: 20, borderRadius: "50%",
          background: sel ? "var(--violet)" : "var(--bg-4)",
          color: sel ? "#fff" : "var(--fg-4)",
          fontSize: 10, fontWeight: 700, flexShrink: 0,
          transition: "all 0.2s",
        }}>1</span>
        What best describes your business?
      </div>

      {/* 2×2 niche tiles */}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        gap: 10, marginBottom: sel ? 20 : 0,
      }}>
        {NICHES.map(n => {
          const isActive = sel === n.key;
          return (
            <button key={n.key} onClick={() => setSel(n.key)} style={{
              padding: "16px 14px", borderRadius: 14, cursor: "pointer",
              border: isActive ? `2px solid ${n.color}` : "1px solid var(--line-2)",
              background: isActive ? `${n.color}12` : "var(--bg-1)",
              textAlign: "left", transition: "all 0.15s",
              outline: "none",
            }}>
              <div style={{ fontSize: 24, marginBottom: 8, lineHeight: 1 }}>{n.icon}</div>
              <div style={{
                fontWeight: 700, fontSize: 13,
                color: isActive ? n.color : "var(--fg)",
                marginBottom: 3, lineHeight: 1.2,
              }}>{n.label}</div>
              <div style={{ fontSize: 11, color: "var(--fg-4)", lineHeight: 1.4 }}>{n.desc}</div>
            </button>
          );
        })}
      </div>

      {/* Step 2 — GHL embed revealed after niche pick */}
      {sel && (
        <div>
          <div style={{
            fontSize: 11, fontFamily: "'JetBrains Mono',monospace",
            letterSpacing: 1.5, color: "var(--fg-4)", marginBottom: 14,
            textTransform: "uppercase",
            display: "flex", alignItems: "center", gap: 10,
          }}>
            <span style={{
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              width: 20, height: 20, borderRadius: "50%",
              background: "var(--violet)", color: "#fff",
              fontSize: 10, fontWeight: 700, flexShrink: 0,
            }}>2</span>
            Pick a time · MST
          </div>

          {/* GHL calendar iframe */}
          <div style={{
            background: "var(--bg-1)", border: "1px solid var(--line-2)",
            borderRadius: 16, overflow: "hidden",
          }}>
            <iframe
              key={sel}
              src={active.widgetUrl}
              style={{
                width: "100%", border: "none",
                height: 680, display: "block",
              }}
              title={`Book a call — ${active.label}`}
            />
          </div>

          <div style={{
            marginTop: 10, textAlign: "center",
            fontSize: 11, fontFamily: "'JetBrains Mono',monospace",
            letterSpacing: 0.5, color: "var(--fg-4)",
          }}>
            Avg. response &lt; 2 hrs · Mon–Fri 8 AM–6 PM MST
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── BookPage ───────────────────────────────────────────── */
function BookPage() {
  const [mobile, setMobile] = useState(
    typeof window !== "undefined" && window.innerWidth <= 768
  );
  useEffect(() => {
    const update = () => setMobile(window.innerWidth <= 768);
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);

  return (
    <section className="sec" id="top" style={{ paddingTop: 112, paddingBottom: 80 }}>
      <div className="sec-inner">

        {/* Hero */}
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <span className="eyebrow">
            <span className="dot" /> 3 CLIENT SLOTS REMAINING · 1 BUSINESS PER NICHE PER MARKET
          </span>
          <h1 className="display" style={{
            marginTop: 22, marginBottom: 18,
            fontSize: "clamp(42px,6.5vw,82px)",
          }}>
            Book your<br /><span className="it">free 30-min audit.</span>
          </h1>
          <p className="lede" style={{ maxWidth: "50ch", margin: "0 auto 28px" }}>
            No pitch. No fluff. We show you exactly what's broken in your account — whether we work together or not.
          </p>

          {/* Social proof pills */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }}>
            {WINS.map((w, i) => (
              <div key={i} style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "8px 14px", borderRadius: 999,
                background: "var(--bg-1)", border: "1px solid var(--line-2)",
                fontSize: 12,
              }}>
                <span style={{
                  width: 7, height: 7, borderRadius: "50%",
                  background: w.dot, flexShrink: 0,
                  boxShadow: `0 0 6px ${w.dot}`,
                }} />
                <span style={{ fontSize: 9, fontFamily: "'JetBrains Mono',monospace", color: "var(--fg-4)", letterSpacing: 1 }}>{w.niche}</span>
                <span style={{ fontWeight: 700, color: "var(--fg)" }}>{w.name}</span>
                <span style={{ color: w.dot, fontWeight: 700 }}>{w.result}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Two-col grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "1fr 1fr",
          gap: mobile ? 40 : 60,
          alignItems: "start",
          maxWidth: 1020,
          margin: "0 auto",
        }}>

          {/* CALENDAR — right on desktop, top on mobile */}
          <div id="calendar" style={{ order: mobile ? 0 : 1 }}>
            <NicheCalendar />
          </div>

          {/* STEPS + TRUST — left on desktop, bottom on mobile */}
          <div style={{ order: mobile ? 1 : 0 }}>
            <div style={{
              fontSize: 11, fontFamily: "'JetBrains Mono',monospace",
              letterSpacing: 1.5, color: "var(--fg-4)", marginBottom: 20,
              textTransform: "uppercase",
            }}>What happens next</div>

            <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
              {STEPS.map((s, i) => (
                <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <div style={{
                    flexShrink: 0, width: 40, height: 40, borderRadius: 10,
                    background: "oklch(0.42 0.26 285 / 0.08)",
                    border: "1px solid oklch(0.42 0.26 285 / 0.20)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 11, fontFamily: "'JetBrains Mono',monospace",
                    color: "var(--violet)", fontWeight: 700,
                  }}>{s.num}</div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 15, color: "var(--fg)", marginBottom: 4 }}>{s.title}</div>
                    <div style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.65 }}>{s.body}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Trust card */}
            <div style={{
              marginTop: 32, padding: "18px 20px", borderRadius: 16,
              background: "var(--bg-1)", border: "1px solid var(--line-2)",
            }}>
              {TRUST_LINES.map((line, i) => (
                <div key={i} style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "8px 0",
                  borderBottom: i < TRUST_LINES.length - 1 ? "1px solid var(--line)" : "none",
                  fontSize: 13, color: "var(--fg-2)", fontWeight: 500,
                }}>
                  <span style={{ color: "#10b981", fontSize: 14, flexShrink: 0 }}>✓</span>
                  {line}
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

/* ─── App ────────────────────────────────────────────────── */
function BookFooter() {
  return (
    <div style={{
      textAlign: "center", padding: "20px 24px 32px",
      fontSize: 12, fontFamily: "'JetBrains Mono',monospace",
      letterSpacing: 0.4, color: "#9ca3af",
    }}>
      © {new Date().getFullYear()} Ad Scaling ·
      <a href="privacy.html" style={{ color: "var(--fg-4)", marginLeft: 8, marginRight: 8, textDecoration: "underline" }}>Privacy Policy</a>
      ·
      <a href="terms.html" style={{ color: "var(--fg-4)", marginLeft: 8, textDecoration: "underline" }}>Terms of Service</a>
    </div>
  );
}

function App() {
  return (
    <>
      <div className="world-bg" />
      <div className="world-grid" />
      <BookNav />
      <BookPage />
      <FinalCTA />
      <BookFooter />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);