/* ============================================================
   Tectus — Tweaks + app composition
   ============================================================ */
const {
  NotificationBar, Nav, MobileMenu,
  Hero, TrustStrip,
  Problem, SystemGrid, TectusGoSplit,
  Services, HowItWorks, Compliance,
  Partners, Resources, FAQ, FinalCTA, Footer,
  HowItWorksPinned, Marquee, VideoSection, AppDownload, CoverageMap,
  RoutedPage, useRoute, NewsletterBand,
} = window;

function HomePage({ heroGlow }) {
  return (
    <main>
      <div style={{ position: "relative" }} data-glow={heroGlow ? "on" : "off"}>
        <Hero />
      </div>
      <TrustStrip />
      <VideoSection />
      <Problem />
      <SystemGrid />
      <TectusGoSplit />
      <Services />
      <HowItWorksPinned />
      <Compliance />
      <CoverageMap />
      <Partners />
      <AppDownload />
      <Resources />
      <FAQ />
      <FinalCTA />
    </main>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D4AF37",
  "radius": "rounded",
  "heroGlow": true,
  "leadMessage": "Physical security, delivered faster"
}/*EDITMODE-END*/;

const ACCENTS = {
  "#D4AF37": { light: "#E2C86A", hover: "#C29D2A" },
  "#E2C86A": { light: "#EED892", hover: "#D4AF37" },
  "#C9A227": { light: "#D9B84A", hover: "#A8861F" },
};
const RADII = {
  sharp:   { sm: "4px", md: "6px", lg: "9px", xl: "13px" },
  rounded: { sm: "8px", md: "12px", lg: "16px", xl: "24px" },
  soft:    { sm: "12px", md: "16px", lg: "22px", xl: "30px" },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [mobileOpen, setMobileOpen] = useState(false);
  const route = useRoute();
  const [currentTheme, setCurrentTheme] = useState(() => document.documentElement.getAttribute('data-theme') || 'dark');

  useEffect(() => {
    const handler = (e) => setCurrentTheme(e.detail);
    window.addEventListener('tectus-theme', handler);
    return () => window.removeEventListener('tectus-theme', handler);
  }, []);

  // apply accent — respect light mode (inline styles beat CSS vars, so we must set black here too)
  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS["#D4AF37"];
    const r = document.documentElement.style;
    const isLight = currentTheme === 'light';
    r.setProperty("--color-primary", isLight ? '#0B0B0D' : t.accent);
    r.setProperty("--gold-500", t.accent);
    r.setProperty("--color-primary-light", isLight ? '#0B0B0D' : a.light);
    r.setProperty("--gold-300", a.light);
    r.setProperty("--color-primary-hover", isLight ? '#1a1a1a' : a.hover);
    r.setProperty("--gold-600", a.hover);
  }, [t.accent, currentTheme]);

  // apply radius scale
  useEffect(() => {
    const r = RADII[t.radius] || RADII.rounded;
    const s = document.documentElement.style;
    s.setProperty("--radius-sm", r.sm);
    s.setProperty("--radius-md", r.md);
    s.setProperty("--radius-lg", r.lg);
    s.setProperty("--radius-xl", r.xl);
  }, [t.radius]);

  // reorder notification messages so chosen leads
  const messages = React.useMemo(() => {
    const list = [...NOTIF_MESSAGES];
    const idx = list.findIndex((m) => m.text.startsWith(t.leadMessage));
    if (idx > 0) { const [m] = list.splice(idx, 1); list.unshift(m); }
    return list;
  }, [t.leadMessage]);

  return (
    <div>
      <NotificationBar messages={messages} />
      <Nav onOpenMobile={() => setMobileOpen(true)} />
      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} />
      {route ? <main key={route} className="tt-page-fade"><RoutedPage route={route} /></main> : <HomePage key="home" heroGlow={t.heroGlow} />}
      <NewsletterBand />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Gold tone" value={t.accent}
          options={["#D4AF37", "#E2C86A", "#C9A227"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Surfaces" />
        <TweakRadio label="Corner radius" value={t.radius}
          options={["sharp", "rounded", "soft"]}
          onChange={(v) => setTweak("radius", v)} />
        <TweakToggle label="Hero ambient glow" value={t.heroGlow}
          onChange={(v) => setTweak("heroGlow", v)} />
        <TweakSection label="Notification bar" />
        <TweakSelect label="Lead message" value={t.leadMessage}
          options={["Physical security, delivered faster", "Now available: Tectus GO", "Book a live demo"]}
          onChange={(v) => setTweak("leadMessage", v)} />
      </TweaksPanel>
    </div>
  );
}

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