// Root app — assembles nav, hero, both paths, footer + tweaks panel

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8B4B0",
  "dark": false,
  "density": "cozy",
  "display": "DM Serif Display",
  "ui": "Geist",
  "realtorCTA": "Apply for the Free Mastermind →",
  "clientCTA": "Get in touch →"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "Instrument Serif": { display: '"Instrument Serif", serif', ui: '"Geist", ui-sans-serif, system-ui, sans-serif' },
  "Playfair Display": { display: '"Playfair Display", serif', ui: '"Geist", ui-sans-serif, system-ui, sans-serif' },
  "DM Serif Display": { display: '"DM Serif Display", serif', ui: '"DM Sans", ui-sans-serif, system-ui, sans-serif' },
  "EB Garamond":      { display: '"EB Garamond", serif',      ui: '"Geist", ui-sans-serif, system-ui, sans-serif' },
  "Libre Caslon Display": { display: '"Libre Caslon Display", serif', ui: '"Geist", ui-sans-serif, system-ui, sans-serif' },
};

const DIRECT_CHOICES = new Set(["realtor", "client"]);

function normalizeDirectChoice(value) {
  if (!value) return null;
  const segment = value
    .replace(/^#/, "")
    .split("/")
    .filter(Boolean)
    .pop();
  const choice = segment ? segment.toLowerCase() : null;
  return DIRECT_CHOICES.has(choice) ? choice : null;
}

function choiceFromLocation() {
  if (typeof window === "undefined") return null;
  return normalizeDirectChoice(window.location.pathname) ||
         normalizeDirectChoice(window.location.hash);
}

function writeChoiceToUrl(choice, replace = false) {
  if (typeof window === "undefined") return;

  if (!window.history || window.location.protocol === "file:") {
    window.location.hash = choice || "";
    return;
  }

  const method = replace ? "replaceState" : "pushState";
  window.history[method](
    { choice },
    "",
    choice ? `/${choice}` : "/"
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <div className="logo" style={{ marginBottom: 14 }}>
            <span className="logo-mark">O</span>
            <span>Olga Moreno</span>
          </div>
          <p style={{ color: "var(--ink-3)", fontSize: 14, maxWidth: "36ch", margin: 0 }}>
            Las Vegas realtor, YouTuber, and coach to agents building channels
            that sell homes on autopilot.
          </p>
        </div>
        <div>
          <h4>For Agents</h4>
          <a href="/realtor">Mastermind</a>
          <a href="#apply">Apply</a>
          <a href="#youtube">Watch on YouTube</a>
        </div>
        <div>
          <h4>For Clients</h4>
          <a href="https://olgamorenorealestate.com" target="_blank" rel="noopener">Listings ↗</a>
          <a href="https://olgamorenorealestate.com" target="_blank" rel="noopener">Buy ↗</a>
          <a href="https://olgamorenorealestate.com" target="_blank" rel="noopener">Sell ↗</a>
        </div>
        <div>
          <h4>Connect</h4>
          <a href="#">YouTube</a>
          <a href="#">Instagram</a>
          <a href="#">TikTok</a>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 Olga Moreno</span>
        <span>Las Vegas · Nevada · NVRE #S.0196042</span>
      </div>
    </footer>
  );
}

// ── About section ───────────────────────────────────────────────────
function About() {
  return (
    <section className="path" id="about">
      <div className="about">
        <div className="about-photo">
          <img src="assets/olga-hero.png" alt="Olga Moreno"
               style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>About Olga</div>
          <h2>From real estate rookie to 16K-sub creator — in 24 months.</h2>
          <p>
            Olga Moreno got her Nevada real estate license and immediately did
            something most agents never do: she turned on the camera. No door-knocking,
            no zillow leads, no cold calls.
          </p>
          <p>
            Just YouTube, consistency, and a clear point of view on the Las Vegas market.
            The result: <b style={{ color: "var(--ink)" }}>$500K GCI in her first two years</b>,
            a channel that now reaches millions, and on pace for $1M GCI in year three.
          </p>
          <p>
            Now she teaches other agents — in any market — to do the same.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── YouTube section (bridges both paths) ────────────────────────────
function YouTubeBridge() {
  return (
    <section className="section" id="youtube" style={{ borderTop: "0.5px solid var(--line)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 60, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>▶ The channel</div>
            <h2 style={{
              fontFamily: "var(--display)", fontSize: "clamp(40px, 4.5vw, 64px)",
              lineHeight: 0.98, letterSpacing: "-0.02em", fontWeight: 400,
              margin: "0 0 20px", textWrap: "balance"
            }}>
              Everything funnels through one place.
            </h2>
            <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.55, margin: "0 0 14px", maxWidth: "44ch" }}>
              Olga's YouTube channel is the entire business. For Vegas viewers it becomes
              a listing call. For agents everywhere else, it becomes a masterclass in how
              to do the same.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
              <a href="/realtor" className="btn btn-primary">
                I want to build a channel
                <Arrow />
              </a>
              <a href="https://olgamorenorealestate.com" target="_blank" rel="noopener" className="btn btn-ghost">
                I want a Vegas home
                <Arrow />
              </a>
            </div>
          </div>
          <div style={{
            position: "relative",
            aspectRatio: "16/10",
            borderRadius: "var(--radius-lg)",
            overflow: "hidden",
            border: "0.5px solid var(--line)",
          }}>
            <img src="assets/olga-youtube.png" alt=""
                 style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [choice, setChoice] = useStateA(choiceFromLocation); // null | 'realtor' | 'client'

  // Apply tweaks → CSS vars + data attrs on <html>
  useEffectA(() => {
    const root = document.documentElement;
    root.setAttribute("data-dark", tweaks.dark ? "1" : "0");
    root.setAttribute("data-density", tweaks.density);
    root.style.setProperty("--accent", tweaks.accent);
    const pair = FONT_PAIRS[tweaks.display] || FONT_PAIRS["Instrument Serif"];
    root.style.setProperty("--display", pair.display);
    root.style.setProperty("--ui", pair.ui);
  }, [tweaks]);

  useEffectA(() => {
    const syncChoice = () => setChoice(choiceFromLocation());
    window.addEventListener("popstate", syncChoice);
    window.addEventListener("hashchange", syncChoice);
    return () => {
      window.removeEventListener("popstate", syncChoice);
      window.removeEventListener("hashchange", syncChoice);
    };
  }, []);

  const choose = (nextChoice) => {
    setChoice(nextChoice);
    writeChoiceToUrl(nextChoice);
  };

  const reset = () => {
    setChoice(null);
    writeChoiceToUrl(null);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <>
      <Hero
        tweaks={tweaks}
        choice={choice}
        onChoose={choose}
        onReset={reset}
      />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={tweaks.accent}
                    onChange={(v) => setTweak("accent", v)} />
        <TweakToggle label="Dark mode" value={tweaks.dark}
                     onChange={(v) => setTweak("dark", v)} />
        <TweakRadio label="Density" value={tweaks.density}
                    options={["airy", "cozy", "dense"]}
                    onChange={(v) => setTweak("density", v)} />

        <TweakSection label="Type" />
        <TweakSelect label="Display font" value={tweaks.display}
                     options={Object.keys(FONT_PAIRS)}
                     onChange={(v) => setTweak("display", v)} />

        <TweakSection label="CTA copy (A/B)" />
        <TweakText label="Realtor submit" value={tweaks.realtorCTA}
                   onChange={(v) => setTweak("realtorCTA", v)} />
        <TweakText label="Client submit" value={tweaks.clientCTA}
                   onChange={(v) => setTweak("clientCTA", v)} />

        <TweakSection label="Flow" />
        <TweakButton label="Reset hero choice" onClick={reset} secondary />
      </TweaksPanel>
    </>
  );
}

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