/* App — assembles the redesigned Axious home page.
   Loads the Tweaks panel and wires accent + density + motion toggles. */

/* ── Tweaks stubs (tweaks-panel.jsx not present) ── */
function useTweaks(defaults) {
  const [state, setState] = React.useState(defaults);
  const setTweak = (key, val) => setState(prev => ({ ...prev, [key]: val }));
  return [state, setTweak];
}
function TweaksPanel({ children }) { return null; }
function TweakSection({ children }) { return null; }
function TweakRadio() { return null; }
function TweakColor() { return null; }
function TweakToggle() { return null; }
function TweakButton() { return null; }

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#f97316",
  "density": "comfortable",
  "showTrustToast": true,
  "reduceMotion": false,
  "theme": "light",
  "showcaseVariant": "preview-card"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [wizardOpen, setWizardOpen] = useState(false);
  const [isElvisOpen, setIsElvisOpen] = useState(false);
  const elvisRef = React.useRef(null);

  // Apply accent + density + theme CSS vars to :root
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-dim", hexToRgba(t.accent, 0.1));
    root.style.setProperty(
      "--section-py",
      t.density === "compact" ? "5rem" : t.density === "airy" ? "9rem" : "7rem"
    );
    if (t.reduceMotion) root.setAttribute("data-reduce-motion", "true");
    else root.removeAttribute("data-reduce-motion");
    root.setAttribute("data-theme", t.theme || "light");
  }, [t.accent, t.density, t.reduceMotion, t.theme]);

  // Intercept clicks on #quote / #quote-* anchors → open wizard
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest('a[href^="#quote"]');
      if (a) { e.preventDefault(); setWizardOpen(true); }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  // Intercept clicks on #chat / #elvis anchors → open Elvis
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest('a[href^="#chat"], a[href^="#elvis"]');
      if (a) { e.preventDefault(); setIsElvisOpen(true); }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  // Handle ?chat=1 on load (matches main site link pattern)
  useEffect(() => {
    if (new URLSearchParams(window.location.search).get('chat') === '1') setIsElvisOpen(true);
  }, []);

  return (
    <div>
      <Nav />
      <main>
        <Hero />
        <Marquee items={["Cape Town", "Hand-coded", "From R2,499", "Premium", "Modern SaaS", "POPIA-ready", "5★ Google", "Local + global", "Fast as light", "Custom React"]} />
        <About />
        <Services />
        <WhyChoose />
        <Process />
        <Packages />
        <AddOns />
        <POSSystems />
        <AppDev />
        <SmartChat />
        <Work />
        <Testimonials />
        <FAQ />
        <CTA />
        <Footer />
      </main>
      {t.showTrustToast && <TrustToast />}
      <ScrollProgress />
      <QuoteWizard open={wizardOpen} onClose={() => setWizardOpen(false)} />

      {/* Elvis AI Orb */}
      {typeof AmbientElvisOrb !== 'undefined' && (
        <AmbientElvisOrb
          onOpen={() => setIsElvisOpen(true)}
          isElvisOpen={isElvisOpen}
        />
      )}
      {isElvisOpen && typeof ElvisChat !== 'undefined' && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 100,
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
          background: 'var(--bg)',
        }}>
          <ElvisChat ref={elvisRef} onClose={() => setIsElvisOpen(false)} />
        </div>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio label="Mode"
            value={t.theme || "light"}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "light", label: "Light" },
              { value: "dark", label: "Dark" },
            ]}
          />
          <TweakColor label="Accent"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#f97316", "#ea580c", "#111111", "#0EA5E9", "#16A34A"]}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio label="Density"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "Compact" },
              { value: "comfortable", label: "Default" },
              { value: "airy", label: "Airy" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Motion">
          <TweakToggle label="Reduce motion"
            value={t.reduceMotion}
            onChange={(v) => setTweak("reduceMotion", v)}
          />
        </TweakSection>
        <TweakSection title="Surfaces">
          <TweakToggle label="Live activity toast"
            value={t.showTrustToast}
            onChange={(v) => setTweak("showTrustToast", v)}
          />
        </TweakSection>
        <TweakButton onClick={() => setWizardOpen(true)}>Open quote wizard</TweakButton>
      </TweaksPanel>
    </div>
  );
}

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

/* ─────────────────────────────────────────────────────────────────
   ScrollProgress — orange bar pinned to top of viewport.
   ───────────────────────────────────────────────────────────────── */
function ScrollProgress() {
  const [p, setP] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setP(max > 0 ? h.scrollTop / max : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div aria-hidden style={{
      position: "fixed", top: 0, left: 0, right: 0, height: 2, zIndex: 60,
      pointerEvents: "none",
    }}>
      <div style={{
        height: "100%", width: `${p * 100}%`,
        background: "linear-gradient(90deg, var(--accent), #ea580c)",
        transition: "width 0.1s linear",
        boxShadow: "0 0 12px rgba(249,115,22,0.5)",
      }} />
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────────
   TrustToast — bottom-left live activity, slide-in.
   ───────────────────────────────────────────────────────────────── */
const CITIES = ["Cape Town", "Johannesburg", "Durban", "Pretoria", "Stellenbosch", "Paarl"];
function TrustToast() {
  const [visible, setVisible] = useState(false);
  const [text, setText] = useState("A business in Cape Town just requested a quote");
  useEffect(() => {
    let n = 0;
    const cycle = () => {
      setVisible(false);
      setTimeout(() => {
        n++;
        setText(`A business in ${CITIES[n % CITIES.length]} just requested a quote`);
        setVisible(true);
      }, 600);
    };
    const t1 = setTimeout(() => setVisible(true), 2000);
    const t2 = setInterval(cycle, 9000);
    return () => { clearTimeout(t1); clearInterval(t2); };
  }, []);
  return (
    <div
      role="status"
      aria-live="polite"
      style={{
        position: "fixed",
        bottom: 22,
        left: 22,
        zIndex: 70,
        transform: visible ? "translateX(0)" : "translateX(-130%)",
        transition: `transform 0.55s ${EASE_OUT}, opacity 0.45s ease`,
        opacity: visible ? 1 : 0,
        maxWidth: 340,
      }}
    >
      <div
        className="flex items-center gap-3 px-4 py-3 rounded-2xl ax-toast"
        style={{
          background: "rgba(255,255,255,0.95)",
          backdropFilter: "blur(14px) saturate(140%)",
          border: "1px solid rgba(0,0,0,0.06)",
          boxShadow: "0 18px 40px -16px rgba(0,0,0,0.18)",
        }}
      >
        <span style={{
          width: 10, height: 10, borderRadius: "50%",
          background: "#16A34A",
          animation: prefersReducedMotion() ? "none" : "ax-pulse 2.4s ease-in-out infinite",
        }} />
        <span style={{ fontSize: 13, color: "var(--text)" }}>{text}</span>
      </div>
    </div>
  );
}

Object.assign(window, { App, ScrollProgress, TrustToast });

/* Mount */
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);