/* global React, ReactDOM, Nav, StickyCTA, Hero, Marquee, Press, Story, Cases, Quiz, BeforeAfter, Videos, Freedom, WaysToWork, LeadMagnet, FinalCTA, Footer, CookieConsent, FAQ, HonestPathLanding, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */
const { useEffect } = React;

// Curated palettes — each has dark + light variants
const PALETTES = {
  warm: {
    dark:  { bg: "#0a0a0a", bg2: "#131211", bg3: "#1c1a17", ink: "#f5f1ea", ink2: "#cfc8bb", ink3: "#8a8377", line: "#2a2622", line2: "#3a352e", accent: "#d4a574" },
    light: { bg: "#faf7f1", bg2: "#f3eee5", bg3: "#ebe4d6", ink: "#1a1814", ink2: "#4a443b", ink3: "#7a7263", line: "#e3dccc", line2: "#d2c9b3", accent: "#a67a3f" },
  },
  forest: {
    dark:  { bg: "#0d100d", bg2: "#141815", bg3: "#1c211d", ink: "#eef0e8", ink2: "#c5c9bb", ink3: "#828777", line: "#262b25", line2: "#363c34", accent: "#9bb37a" },
    light: { bg: "#f5f6f0", bg2: "#eceee3", bg3: "#e1e5d3", ink: "#181a16", ink2: "#454a40", ink3: "#737867", line: "#dadfca", line2: "#c4ccb1", accent: "#5a7d3e" },
  },
  rust: {
    dark:  { bg: "#0e0a08", bg2: "#171110", bg3: "#1f1614", ink: "#f4ece2", ink2: "#d0c2b3", ink3: "#8a7d6e", line: "#2b201c", line2: "#3a2c26", accent: "#d97757" },
    light: { bg: "#fbf6ef", bg2: "#f3ece0", bg3: "#ebe1cf", ink: "#1a1411", ink2: "#4a3e35", ink3: "#7d6f62", line: "#e4d8c4", line2: "#d4c5ac", accent: "#b8482a" },
  },
  ink: {
    dark:  { bg: "#08090c", bg2: "#0f1116", bg3: "#161823", ink: "#eaeef8", ink2: "#b9c0d2", ink3: "#7a8298", line: "#1d2030", line2: "#2a2e44", accent: "#a0b4ff" },
    light: { bg: "#f6f7fb", bg2: "#edeff5", bg3: "#e2e5ef", ink: "#0e1018", ink2: "#3d4258", ink3: "#6f7693", line: "#dde1ee", line2: "#c8cee0", accent: "#4a63d6" },
  },
};
const PALETTE_OPTS = [
  ["#0a0a0a", "#f5f1ea", "#d4a574"],
  ["#0d100d", "#eef0e8", "#9bb37a"],
  ["#0e0a08", "#f4ece2", "#d97757"],
  ["#08090c", "#eaeef8", "#a0b4ff"],
];
const PALETTE_NAMES = ["warm", "forest", "rust", "ink"];

// Curated font pairings
const FONT_PAIRS = {
  editorial: {
    display: '"Instrument Serif", Georgia, serif',
    sans: '"Geist", -apple-system, BlinkMacSystemFont, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  classic: {
    display: '"Cormorant Garamond", "Times New Roman", serif',
    sans: '"DM Sans", -apple-system, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  modern: {
    display: '"Fraunces", Georgia, serif',
    sans: '"Plus Jakarta Sans", -apple-system, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  bold: {
    display: '"Space Grotesk", -apple-system, sans-serif',
    sans: '"Space Grotesk", -apple-system, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
};

const DEFAULTS = window.__TWEAK_DEFAULTS;

function applyPalette(name, mode) {
  const palette = PALETTES[name] || PALETTES.warm;
  const p = palette[mode] || palette.dark;
  const root = document.documentElement;
  Object.entries(p).forEach(([k, v]) => {
    const cssKey = "--" + (k === "bg2" ? "bg-2" : k === "bg3" ? "bg-3" : k === "ink2" ? "ink-2" : k === "ink3" ? "ink-3" : k === "line2" ? "line-2" : k);
    root.style.setProperty(cssKey, v);
  });
  // Warm accents read on dark bgs; on light bgs we want light text over the accent button
  const accentInkLight = mode === "light";
  root.style.setProperty("--accent-ink", accentInkLight ? "#faf7f1" : p.bg);
}

function applyFonts(name) {
  const f = FONT_PAIRS[name] || FONT_PAIRS.editorial;
  const root = document.documentElement;
  root.style.setProperty("--f-display", f.display);
  root.style.setProperty("--f-sans", f.sans);
  root.style.setProperty("--f-mono", f.mono);
}

function App() {
  const [t, setT] = useTweaks(DEFAULTS);

  // Apply non-CSS-var-toggleable settings imperatively
  useEffect(() => applyPalette(t.palette, t.mode), [t.palette, t.mode]);
  useEffect(() => applyFonts(t.fonts), [t.fonts]);
  useEffect(() => {
    document.documentElement.dataset.mode = t.mode;
    document.documentElement.dataset.density = t.density;
  }, [t.mode, t.density]);

  const onBook = () => {
    // Route through the on-site booking page (clean URL: /discovery-call)
    // instead of the raw Typeform. That page embeds the same form AND fires
    // the Google Ads booking conversion on submit — so every CTA that calls
    // onBook is now tracked. Same-tab navigation keeps attribution clean.
    window.location.href = "https://jaysbansal.com/discovery-call/";
  };

  return (
    <>
      <Nav onBook={onBook} bookLabel="Book your free discovery call" showAffiliates={false} />
      <Hero layout={t.heroLayout} headline={t.headline} onBook={onBook} quoteAvatar="assets/student-billy.webp" bookLabel="Book your free discovery call" eyebrow="Amazon FBA Coaching" showOfferTag={false} availLabel="Currently booking" />

      {/* Why before how — lead with the life */}
      <SaidThisLanding />
      <HonestPathLanding onBook={onBook} showCta={false} />
      <MethodLanding onBook={onBook} />

      {/* The simple path in */}
      <QuizLanding onBook={onBook} />

      {/* Proof — given lots of room */}
      <Marquee />
      <WallLanding onBook={onBook} />
      <BeforeAfter />
      <Videos />
      <Meetups onBook={onBook} containedStrip />

      {/* The payoff */}
      <Freedom />

      {/* The low-cost way in */}
      <LeadMagnet eyebrow="Not ready to book? Start here." />

      {/* A coach, not a guru → FAQ → the 30-min talk */}
      <About onBook={onBook} bookLabel="Book your free 30-min discovery call" />
      <FAQ onBook={onBook} bookLabel="Book your free discovery call" />
      <FinalCTALanding onBook={onBook} />
      <Footer />
      <StickyCTA onBook={onBook} bookLabel="Book your free call" />
      <CookieConsent />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakColor
            label="Palette"
            value={PALETTE_OPTS[PALETTE_NAMES.indexOf(t.palette)]}
            options={PALETTE_OPTS}
            onChange={(arr) => {
              const idx = PALETTE_OPTS.findIndex((p) => p[0] === arr[0]);
              setT("palette", PALETTE_NAMES[idx]);
            }}
          />
          <TweakRadio
            label="Mode"
            value={t.mode}
            options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
            onChange={(v) => setT("mode", v)}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            options={[{ value: "spacious", label: "Spacious" }, { value: "compact", label: "Compact" }]}
            onChange={(v) => setT("density", v)}
          />
        </TweakSection>

        <TweakSection label="Type">
          <TweakSelect
            label="Font pairing"
            value={t.fonts}
            options={[
              { value: "editorial", label: "Instrument Serif × Geist" },
              { value: "classic", label: "Cormorant × DM Sans" },
              { value: "modern", label: "Fraunces × Jakarta" },
              { value: "bold", label: "Space Grotesk (single)" },
            ]}
            onChange={(v) => setT("fonts", v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakSelect
            label="Layout"
            value={t.heroLayout}
            options={[
              { value: "split", label: "Split · text + portrait" },
              { value: "centered", label: "Centered · text only" },
              { value: "asym", label: "Asymmetric · stats + text + portrait" },
            ]}
            onChange={(v) => setT("heroLayout", v)}
          />
          <TweakSelect
            label="Headline copy"
            value={t.headline}
            options={[
              { value: "a", label: "A · you want your life back" },
              { value: "b", label: "B · build it, get your life back" },
              { value: "c", label: "C · buy back your time" },
            ]}
            onChange={(v) => setT("headline", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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