// Main App — Header, theme + accent state, contact modal, sections.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#FF5B1F",
  "fontPair": "manrope"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#FF5B1F", "#111111", "#2E6BFF", "#1F8A5B"];
const FONT_OPTIONS = [
  { key: "manrope",  label: "Manrope (default)",   stack: '"Manrope", ui-sans-serif, system-ui, sans-serif' },
  { key: "ibm",      label: "IBM Plex Sans",        stack: '"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif' },
  { key: "serif",    label: "Instrument Serif",     stack: '"Instrument Serif", "Times New Roman", serif' },
];

function Header({ openContact }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"site-header " + (scrolled ? "scrolled" : "")}>
      <div className="container">
        <div className="site-header__inner">
          <a href="#top" className="brand" aria-label="DealVault — home">
            <span className="brand-mark"><LogoMark size={26} /></span>
            <span>DealVault</span>
          </a>
          <nav className="nav-links" aria-label="Main">
            <a href="#what">What we do</a>
            <a href="#why">Why DealVault</a>
            <a href="#how">Process</a>
            <a href="#team">Team</a>
            <a href="#pricing">Pricing</a>
            <a href="#faq">FAQ</a>
          </nav>
          <button className="btn btn-ink btn-sm" onClick={openContact}>
            Send request
            <ArrowR size={12} />
          </button>
        </div>
      </div>
    </header>
  );
}

function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Appearance">
        <TweakRadio
          label="Theme"
          value={tweaks.theme}
          options={["light", "dark"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSelect
          label="Font"
          value={tweaks.fontPair}
          options={FONT_OPTIONS.map(f => ({ value: f.key, label: f.label }))}
          onChange={(v) => setTweak("fontPair", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [modalOpen, setModalOpen] = React.useState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to :root
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme || "light");
    document.documentElement.style.setProperty("--accent", tweaks.accent || "#FF5B1F");
    const fp = FONT_OPTIONS.find((f) => f.key === tweaks.fontPair) || FONT_OPTIONS[0];
    document.documentElement.style.setProperty("--font-sans", fp.stack);
  }, [tweaks]);

  useReveal();

  const openContact = React.useCallback(() => setModalOpen(true), []);
  const closeContact = React.useCallback(() => setModalOpen(false), []);

  return (
    <>
      <Header openContact={openContact} />
      <main>
        <Hero openContact={openContact} />
        <VerticalsMarquee />
        <ProblemSolution />
        <WhatWeDo />
        <WhyDealVault />
        <HowItWorks />
        <Team />
        <HonestPart />
        <FAQ />
        <FinalCTA openContact={openContact} />
      </main>
      <Footer />
      <ContactModal open={modalOpen} onClose={closeContact} />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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