// ============================================================
// SamuelMarndi.com — Shared Layout Components
// Nav, Footer, ChatLauncher, ExitModal, StickyCTA, TweaksPanel
// ============================================================

// Path helper for nested pages (sets window.BASE_PATH = "../")
const B = (path) => (window.BASE_PATH || "") + path;
window.B = B;

// =============== Real contact info ===============
const CONTACT = {
  phone: "+91 8280320550",
  phoneRaw: "+918280320550",
  whatsapp: "918280320550",
  emailPrimary: "mail@samuelmarndi.com",
  emailSecondary: "samuelmarandi6@gmail.com",
  location: "Bangalore, India",
};
window.CONTACT = CONTACT;

// =============== Top utility bar ===============
function TopBar({ theme, onToggleTheme }) {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="topbar-left">
          <a href={`https://wa.me/${CONTACT.whatsapp}`} target="_blank" rel="noopener" className="topbar-item topbar-wa" title="Chat on WhatsApp">
            <Icons.whatsapp size={13} />
            <span>{CONTACT.phone}</span>
            <span className="topbar-badge">WhatsApp</span>
          </a>
          <a href={`tel:${CONTACT.phoneRaw}`} className="topbar-item" title="Call now">
            <Icons.phone size={13} />
            <span>Call</span>
          </a>
          <span className="topbar-divider"></span>
          <a href={`mailto:${CONTACT.emailPrimary}`} className="topbar-item" title="Email primary">
            <Icons.mail size={13} />
            <span>{CONTACT.emailPrimary}</span>
          </a>
          <a href={`mailto:${CONTACT.emailSecondary}`} className="topbar-item topbar-hide-md" title="Email secondary">
            <span>{CONTACT.emailSecondary}</span>
          </a>
        </div>
        <div className="topbar-right">
          <span className="topbar-item topbar-loc">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 22s-7-7.5-7-13a7 7 0 1114 0c0 5.5-7 13-7 13z"/>
              <circle cx="12" cy="9" r="2.5"/>
            </svg>
            <span>{CONTACT.location}</span>
          </span>
          <span className="topbar-divider"></span>
          <span className="topbar-item topbar-status">
            <span className="topbar-dot"></span>
            Available · Mon–Sat
          </span>
          <span className="topbar-divider"></span>
          <button onClick={onToggleTheme} className="topbar-theme" aria-label="Toggle dark mode" title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}>
            {theme === "light" ? <Icons.moon size={14} /> : <Icons.sun size={14} />}
            <span className="topbar-theme-label">{theme === "light" ? "Dark" : "Light"}</span>
          </button>
        </div>
      </div>
    </div>
  );
}
window.TopBar = TopBar;

// Initialize tweaks state — reads localStorage for persisted theme
function initialTweaks() {
  let theme = "light";
  try {
    theme = localStorage.getItem("sm_theme") ||
            document.documentElement.getAttribute("data-theme") ||
            "light";
  } catch (e) {}
  return { ...DEFAULT_TWEAKS, theme };
}
window.initialTweaks = initialTweaks;

// Toggle theme helper — updates state + localStorage
function makeThemeToggler(tweaks, setTweak) {
  return () => {
    const next = tweaks.theme === "light" ? "dark" : "light";
    try { localStorage.setItem("sm_theme", next); } catch (e) {}
    setTweak("theme", next);
  };
}
window.makeThemeToggler = makeThemeToggler;

function Nav({ active = "home" }) {
  const [menuOpen, setMenuOpen] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    const handler = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(null);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  const links = [
    { id: "services",   label: "Services",   hasMenu: true,  href: "/services" },
    { id: "industries", label: "Industries", hasMenu: true,  href: "/industries" },
    { id: "work",       label: "Work",       href: "/work" },
    { id: "blog",       label: "Blog",       href: "/blog" },
    { id: "about",      label: "About",      href: "/about" },
  ];

  return (
    <nav className="nav" ref={menuRef}>
      <div className="container nav-inner">
        <a href={"/"} className="nav-logo">
          <img src="/assets/logo-mark.png" alt="Samuel Marndi" className="nav-logo-mark" />
          <span style={{ display: "flex", flexDirection: "column", gap: 0, lineHeight: 1 }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em", color: "var(--text)" }}>Samuel Marndi</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--copper)", marginTop: 3 }}>Visionary · IT Consultant</span>
          </span>
        </a>

        <div className="nav-links">
          {links.map(l => (
            <a key={l.id}
              className={`nav-link ${l.hasMenu ? "has-menu" : ""} ${active === l.id ? "active" : ""}`}
              onMouseEnter={() => l.hasMenu && setMenuOpen(l.id)}
              href={l.href || (l.hasMenu ? "#" : `#${l.id}`)}>
              {l.label}
            </a>
          ))}
        </div>

        <div className="nav-cta">
          <a href="#chat" className="btn btn-ghost btn-sm" onClick={(e) => { e.preventDefault(); window.openChat?.(); }}>
            <Icons.sparkles size={14} />
            Talk to AI
          </a>
          <a href={"/contact"} className="btn btn-primary btn-sm">
            Get a quote
            <Icons.arrow size={14} />
          </a>
        </div>
      </div>

      {/* Services mega menu */}
      <div className={`mega ${menuOpen === "services" ? "open" : ""}`} onMouseLeave={() => setMenuOpen(null)}>
        <div className="container">
          <div className="mega-grid">
            {SERVICES.map(s => {
              const I = Icons[s.icon];
              return (
                <a key={s.id} href={B(s.href)} className="mega-item">
                  <div className="mega-icon"><I size={18} /></div>
                  <div>
                    <div className="mega-title">{s.name}</div>
                    <div className="mega-desc">{s.desc}</div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </div>

      {/* Industries mega menu */}
      <div className={`mega ${menuOpen === "industries" ? "open" : ""}`} onMouseLeave={() => setMenuOpen(null)}>
        <div className="container">
          <div className="mega-grid">
            {INDUSTRIES.map(s => {
              const I = Icons[s.icon];
              return (
                <a key={s.id} href={"/industries/" + s.slug} className="mega-item">
                  <div className="mega-icon"><I size={18} /></div>
                  <div>
                    <div className="mega-title">{s.name}</div>
                    <div className="mega-desc">{s.count} projects delivered</div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <a href={"/"} style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
              <img src="/assets/logo-mark.png" alt="" style={{ height: 72, width: "auto" }} />
              <span style={{ display: "flex", flexDirection: "column", lineHeight: 1, gap: 4 }}>
                <span style={{ fontFamily: "var(--font-display)", fontSize: 30, color: "var(--cream)", letterSpacing: "-0.01em" }}>Samuel Marndi</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--copper-bright)" }}>Visionary · IT Consultant</span>
              </span>
            </a>
            <p style={{ fontSize: 14, color: "#A89A85", lineHeight: 1.6, marginBottom: 20, maxWidth: 320 }}>
              One consultant. Every IT need. Sales, installation, and support — from one accountable person.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 18, fontSize: 13 }}>
              <a href={`https://wa.me/${CONTACT.whatsapp}`} target="_blank" rel="noopener" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 28, height: 28, borderRadius: 6, background: "#25D36622", display: "grid", placeItems: "center", color: "#25D366" }}>
                  <Icons.whatsapp size={14} />
                </span>
                {CONTACT.phone} <span style={{ color: "#8E8170", fontSize: 11 }}>· WhatsApp</span>
              </a>
              <a href={`tel:${CONTACT.phoneRaw}`} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 28, height: 28, borderRadius: 6, background: "#2D2620", display: "grid", placeItems: "center" }}>
                  <Icons.phone size={14} />
                </span>
                {CONTACT.phone}
              </a>
              <a href={`mailto:${CONTACT.emailPrimary}`} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 28, height: 28, borderRadius: 6, background: "#2D2620", display: "grid", placeItems: "center" }}>
                  <Icons.mail size={14} />
                </span>
                {CONTACT.emailPrimary}
              </a>
              <a href={`mailto:${CONTACT.emailSecondary}`} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 28, height: 28, borderRadius: 6, background: "transparent" }}></span>
                {CONTACT.emailSecondary}
              </a>
            </div>
            <div style={{ fontSize: 12, color: "#8E8170" }}>
              <div>{CONTACT.location} · serving global clients</div>
              <div style={{ marginTop: 4 }}>ISO-aligned · DPDP & GDPR-ready</div>
            </div>
          </div>

          <div className="footer-col">
            <h4>Services</h4>
            <ul>
              {SERVICES.slice(0, 6).map(s => <li key={s.id}><a href={B(s.href)}>{s.name}</a></li>)}
            </ul>
          </div>
          <div className="footer-col">
            <h4>&nbsp;</h4>
            <ul>
              {SERVICES.slice(6).map(s => <li key={s.id}><a href={B(s.href)}>{s.name}</a></li>)}
            </ul>
          </div>

          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="/about">About Samuel</a></li>
              <li><a href="/work">Case studies</a></li>
              <li><a href="/blog">Blog & insights</a></li>
              <li><a href="/industries">Industries</a></li>
              <li><a href="/locations">Locations</a></li>
              <li><a href="/contact">Contact</a></li>
              <li><a href="/partner">Partner with me</a></li>
              <li><a href="/portal" style={{ color: "var(--copper-bright)" }}>Client Portal →</a></li>
              <li><a href="/vendor" style={{ color: "var(--copper-bright)" }}>Vendor Portal →</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="/legal/privacy">Privacy</a></li>
              <li><a href="/legal/cookies">Cookies</a></li>
              <li><a href="/legal/terms">Terms</a></li>
              <li><a href="/legal/dpa">DPA</a></li>
              <li><a href="/legal/security">Security</a></li>
              <li><a href="/legal/refund">Refund policy</a></li>
              <li><a href="/legal/acceptable-use">Acceptable use</a></li>
            </ul>
          </div>
        </div>

        <div style={{ paddingTop: 24, marginTop: 8, borderTop: "1px solid #3D3329" }}>
          <div style={{ fontSize: 11, color: "#A89A85", letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 10, fontFamily: "var(--font-mono)" }}>Serving across India</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 18, fontSize: 12 }}>
            {["bengaluru","mumbai","delhi-ncr","hyderabad","chennai","pune","kolkata","ahmedabad","jaipur","coimbatore","lucknow","surat"].map(s => (
              <a key={s} href={"/locations/" + s} style={{ padding: "4px 10px", background: "#2D2620", borderRadius: 999, color: "#C9BCA8" }}>
                {s.split('-').map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(' ')}
              </a>
            ))}
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 Samuel Marndi. All rights reserved.</div>
          <div style={{ display: "flex", gap: 20 }}>
            <a href="/sitemap.xml">Sitemap</a>
            <a href="/legal/security">Status</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// Chat launcher + panel host
function WhatsAppFab() {
  const [hover, setHover] = useState(false);
  const wa = (window.CONTACT && window.CONTACT.whatsapp) || "918280320550";
  const message = encodeURIComponent("Hi Samuel, I have an enquiry about IT services.");
  return (
    <a
      href={`https://wa.me/${wa}?text=${message}`}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="WhatsApp Samuel"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "fixed",
        left: 20,
        bottom: 20,
        zIndex: 70,
        display: "flex",
        alignItems: "center",
        gap: 10,
        padding: hover ? "12px 18px 12px 12px" : "12px",
        background: "#25D366",
        color: "#fff",
        borderRadius: 999,
        boxShadow: "0 8px 24px -8px rgba(37, 211, 102, 0.55), 0 2px 6px rgba(0,0,0,0.18)",
        textDecoration: "none",
        fontWeight: 600,
        fontSize: 14,
        transition: "all 0.22s cubic-bezier(.2,.8,.2,1)",
      }}
    >
      <span style={{
        width: 40, height: 40, borderRadius: "50%",
        background: "rgba(255,255,255,0.15)",
        display: "grid", placeItems: "center",
      }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479c0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
      </span>
      {hover && (
        <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.15, paddingRight: 4 }}>
          <span style={{ fontSize: 13, opacity: 0.85 }}>Chat with</span>
          <span style={{ fontSize: 16 }}>Samuel on WhatsApp</span>
        </span>
      )}
    </a>
  );
}
window.WhatsAppFab = WhatsAppFab;

function ChatHost() {
  const [open, setOpen] = useState(false);
  const [greetVisible, setGreetVisible] = useState(false);

  useEffect(() => {
    window.openChat = () => setOpen(true);
    // Proactive greet after 12s
    const t = setTimeout(() => setGreetVisible(true), 12000);
    return () => clearTimeout(t);
  }, []);

  return (
    <>
      {!open && greetVisible && (
        <div style={{
          position: "fixed", right: 100, bottom: 36, zIndex: 59,
          background: "var(--surface)", border: "1px solid var(--line)",
          borderRadius: 16, padding: "12px 16px",
          boxShadow: "var(--shadow-md)",
          maxWidth: 260,
          animation: "popIn 0.4s ease",
          fontSize: 13,
          cursor: "pointer"
        }} onClick={() => setOpen(true)}>
          <div style={{ fontWeight: 600, marginBottom: 4 }}>Need IT scoped in 2 minutes?</div>
          <div style={{ color: "var(--text-soft)" }}>I'll ask 3 questions and draft a quote range.</div>
          <button onClick={(e) => { e.stopPropagation(); setGreetVisible(false); }}
            style={{ position: "absolute", top: 4, right: 4, padding: 4, color: "var(--text-mute)" }}>
            <Icons.close size={12} />
          </button>
        </div>
      )}
      {open && <ChatBot onClose={() => setOpen(false)} />}
      <button className={`chat-launcher ${!open && greetVisible ? "has-greet" : ""}`}
        onClick={() => setOpen(!open)} aria-label="Open chat">
        {open ? <Icons.close size={22} /> : <Icons.chat size={22} />}
      </button>
    </>
  );
}

function StickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      setVisible(window.scrollY > 800 && window.scrollY < document.body.scrollHeight - window.innerHeight - 400);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`sticky-cta ${visible ? "visible" : ""}`}>
      <div className="sticky-cta-text">
        Want a <strong>fixed-price quote</strong> in 24 hours? Talk to Samuel directly — no sales reps, no agencies.
      </div>
      <div className="sticky-cta-actions">
        <button onClick={() => window.openChat?.()} className="btn btn-ghost btn-sm">
          <Icons.sparkles size={14} /> Talk to AI
        </button>
        <a href={"/contact"} className="btn btn-primary btn-sm">
          Get a quote <Icons.arrow size={14} />
        </a>
      </div>
    </div>
  );
}

function ExitModal() {
  const [open, setOpen] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [email, setEmail] = useState("");

  useEffect(() => {
    if (sessionStorage.getItem("exit_shown")) return;
    const onLeave = (e) => {
      if (e.clientY < 10 && !sessionStorage.getItem("exit_shown")) {
        setOpen(true);
        sessionStorage.setItem("exit_shown", "1");
      }
    };
    document.addEventListener("mouseleave", onLeave);
    // Fallback: open after 90s if not triggered
    const t = setTimeout(() => {
      if (!sessionStorage.getItem("exit_shown")) {
        setOpen(true);
        sessionStorage.setItem("exit_shown", "1");
      }
    }, 90000);
    return () => { document.removeEventListener("mouseleave", onLeave); clearTimeout(t); };
  }, []);

  return (
    <div className={`exit-overlay ${open ? "open" : ""}`} onClick={() => setOpen(false)}>
      <div className="exit-modal" onClick={e => e.stopPropagation()}>
        <button className="exit-close" onClick={() => setOpen(false)}><Icons.close size={18} /></button>
        {!submitted ? (
          <>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Before you go</div>
            <h2 style={{ fontSize: "clamp(28px, 4vw, 40px)", marginBottom: 14 }}>
              Take the <em style={{ color: "var(--copper)", fontStyle: "italic" }}>cost-of-IT</em> calculator with you.
            </h2>
            <p style={{ color: "var(--text-soft)", marginBottom: 22, fontSize: 15, lineHeight: 1.55 }}>
              A 1-page worksheet to estimate networking, surveillance, and AMC costs for your office or store — sized to your team, locations, and uptime needs. No spam, no follow-up unless you want one.
            </p>
            <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
              <input
                type="email" placeholder="you@company.com"
                value={email} onChange={e => setEmail(e.target.value)}
                style={{
                  flex: 1, padding: "14px 16px",
                  background: "var(--bg)", border: "1px solid var(--line)",
                  borderRadius: 10, fontSize: 14, color: "var(--text)"
                }}
              />
              <button className="btn btn-copper" onClick={() => email && setSubmitted(true)}>
                <Icons.download size={16} /> Send it
              </button>
            </div>
            <div style={{ fontSize: 12, color: "var(--text-mute)" }}>
              Or <button onClick={() => { setOpen(false); window.openChat?.(); }} style={{ color: "var(--copper)", textDecoration: "underline" }}>scope your project with JARVIS →</button>
            </div>
          </>
        ) : (
          <div style={{ textAlign: "center", padding: "20px 0" }}>
            <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--copper)", display: "grid", placeItems: "center", color: "#fff", margin: "0 auto 16px" }}>
              <Icons.check size={28} />
            </div>
            <h3 style={{ fontSize: 28, marginBottom: 8 }}>On its way.</h3>
            <p style={{ color: "var(--text-soft)" }}>Check your inbox in a minute or two.</p>
          </div>
        )}
      </div>
    </div>
  );
}

// Tweaks: site-wide editable knobs
const DEFAULT_TWEAKS = {
  theme: "light",
  density: "normal",
  palette: "cream",
  hero: "chatbot",
  layout: "grid",
  typography: "editorial",
  headline: "main",
};

function applyTweaks(t) {
  document.documentElement.setAttribute("data-theme", t.theme);
  document.documentElement.setAttribute("data-density", t.density);
  document.documentElement.setAttribute("data-palette", t.palette);
  document.documentElement.setAttribute("data-layout", t.layout);
  document.documentElement.setAttribute("data-typography", t.typography);
  try { localStorage.setItem("sm_theme", t.theme); } catch (e) {}
}

function SiteTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Appearance">
        <TweakRadio label="Theme" value={tweaks.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]} />
        <TweakSelect label="Color palette" value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "cream", label: "Cream & copper" },
            { value: "dark", label: "Dark & copper" },
            { value: "hybrid", label: "Hybrid" }
          ]} />
        <TweakSelect label="Typography" value={tweaks.typography}
          onChange={(v) => setTweak("typography", v)}
          options={[
            { value: "editorial", label: "Editorial serif" },
            { value: "geometric", label: "Geometric sans" },
            { value: "mono", label: "Mono accents" },
          ]} />
        <TweakRadio label="Density" value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[{ value: "dense", label: "Dense" }, { value: "normal", label: "Normal" }, { value: "spacious", label: "Spacious" }]} />
      </TweakSection>
      <TweakSection label="Layout">
        <TweakSelect label="Hero variant" value={tweaks.hero}
          onChange={(v) => setTweak("hero", v)}
          options={[
            { value: "chatbot", label: "Chatbot-first" },
            { value: "founder", label: "Founder portrait" },
            { value: "capability", label: "Capability grid" },
            { value: "split", label: "Cinematic split" },
          ]} />
        <TweakSelect label="Service cards" value={tweaks.layout}
          onChange={(v) => setTweak("layout", v)}
          options={[
            { value: "grid", label: "Grid" },
            { value: "list", label: "List" },
            { value: "carousel", label: "Carousel" },
          ]} />
        <TweakSelect label="Headline copy" value={tweaks.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
            { value: "main", label: "Cable to cloud to AI" },
            { value: "alt1", label: "One number for IT" },
            { value: "alt2", label: "Cables to AI" },
            { value: "alt3", label: "Fractional CTO" },
          ]} />
      </TweakSection>
    </TweaksPanel>
  );
}

// Scroll fade-up animator
function useFadeUp() {
  useEffect(() => {
    const els = document.querySelectorAll(".fade-up");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

window.Nav = Nav;
window.Footer = Footer;
window.ChatHost = ChatHost;
window.StickyCTA = StickyCTA;
window.ExitModal = ExitModal;
window.SiteTweaks = SiteTweaks;
window.DEFAULT_TWEAKS = DEFAULT_TWEAKS;
window.applyTweaks = applyTweaks;
window.useFadeUp = useFadeUp;
