/* global React, NavBar, Hero, Ticker, ModuleSuite, Prospectivity, Lifecycle, Drillholes, Proof, CTABand, Footer, useScrollReveals, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, WhyThis, Process, ScrollProgress, ScrollHUD, useProcessProgress */
const { useState: useStateApp, useEffect: useEffectApp } = React;

/* ============================================================
   <DemoModal>
============================================================ */
function DemoModal({ open, onClose }) {
  if (!open) return null;
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        background: "rgba(10,10,12,0.78)",
        backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
        display: "grid", placeItems: "center",
        padding: "32px",
        animation: "fadeUp 0.3s ease",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(560px, 100%)",
          background: "var(--ink-2)",
          border: "1px solid var(--line-2)",
          borderRadius: "18px",
          padding: "44px 40px 36px",
          boxShadow: "0 30px 60px -20px rgba(0,0,0,0.7)",
          position: "relative",
        }}
      >
        <button
          onClick={onClose}
          style={{
            position: "absolute", top: 18, right: 18,
            width: 32, height: 32, borderRadius: 8,
            background: "transparent", border: "1px solid var(--line-2)",
            color: "var(--fg-3)", cursor: "pointer", fontFamily: "var(--font-mono)",
          }}
        >×</button>

        <span className="eyebrow"><span className="bar"/>Pilot enquiry</span>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 42, marginTop: 14, color: "#fff", lineHeight: 0.95, letterSpacing: "-0.035em" }}>
          Bring Lithora<br />to your jurisdiction.
        </h3>
        <p style={{ marginTop: 18, fontSize: 14, color: "var(--fg-3)", lineHeight: 1.55 }}>
          Tell us where you operate and what you're hunting. We'll respond within 48 hours.
        </p>

        <form
          onSubmit={(e) => { e.preventDefault(); onClose(); }}
          style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 10 }}
        >
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            <input placeholder="Name" style={inputStyle} />
            <input placeholder="Company" style={inputStyle} />
          </div>
          <input placeholder="Work email" style={inputStyle} type="email" />
          <select style={{ ...inputStyle, appearance: "none", WebkitAppearance: "none", backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")", backgroundRepeat: "no-repeat", backgroundPosition: "right 16px center", paddingRight: 40 }} defaultValue="">
            <option value="" disabled>Jurisdiction of interest</option>
            <option>Nigeria · Kaduna</option>
            <option>South Africa</option>
            <option>DRC · Katanga (waitlist)</option>
            <option>Other / Multiple</option>
          </select>
          <textarea
            placeholder="Targets, commodities, anything relevant…"
            style={{ ...inputStyle, minHeight: 96, resize: "vertical" }}
          />
          <button type="submit" className="btn btn-white" style={{ width: "100%", justifyContent: "center", marginTop: 6 }}>
            Request pilot access →
          </button>
        </form>
      </div>
    </div>
  );
}

const inputStyle = {
  background: "rgba(0,0,0,0.4)",
  border: "1px solid rgba(255,255,255,0.10)",
  padding: "13px 14px",
  borderRadius: 8,
  color: "#fff",
  fontFamily: "var(--font-sans)",
  fontSize: 14,
  width: "100%",
  outline: "none",
};

/* ============================================================
   Tweaks defaults
============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Schibsted Grotesk",
  "accent": "moss"
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Schibsted Grotesk": "'Schibsted Grotesk', sans-serif",
  "Bricolage":         "'Bricolage Grotesque', sans-serif",
  "Familjen Grotesk":  "'Familjen Grotesk', sans-serif",
  "Fraunces Soft":     "'Newsreader', serif",
  "DM Sans (system)":  "'DM Sans', sans-serif",
};

const ACCENT_MAP = {
  moss:       "#7d9080",
  amber:      "#c8a45a",
  terracotta: "#b85c4a",
  sage:       "#6b7d72",
};

function App() {
  const [demoOpen, setDemoOpen] = useStateApp(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useScrollReveals();
  useProcessProgress();

  useEffectApp(() => {
    document.documentElement.style.setProperty("--font-display", FONT_MAP[t.displayFont] || FONT_MAP["Schibsted Grotesk"]);
    document.documentElement.style.setProperty("--brand-moss", ACCENT_MAP[t.accent] || ACCENT_MAP.moss);
  }, [t.displayFont, t.accent]);

  const jumpTo = (id) => {
    if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  const openDemo = () => setDemoOpen(true);

  return (
    <React.Fragment>
      <ScrollProgress />
      <NavBar onBookDemo={openDemo} onJump={jumpTo} />
      <Hero onBookDemo={openDemo} onJump={jumpTo} />
      <Process />
      <ModuleSuite />
      <Prospectivity />
      <Lifecycle />
      <Drillholes />
      <Proof />
      <CTABand onBookDemo={openDemo} />
      <Footer onBookDemo={openDemo} />

      <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />

      <TweaksPanel title="Tweaks" defaultPosition={{ right: 24, bottom: 24 }}>
        <TweakSection title="Display typeface">
          <TweakSelect
            label="Family"
            value={t.displayFont}
            options={Object.keys(FONT_MAP)}
            onChange={(v) => setTweak("displayFont", v)}
          />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakRadio
            value={t.accent}
            options={["moss", "amber", "terracotta", "sage"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

// Load tweak fallback fonts
(function loadTweakFonts() {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600&family=Familjen+Grotesk:wght@500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=DM+Sans:wght@500;600;700&display=swap";
  document.head.appendChild(link);
})();

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