// Main app — routing + tweaks
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "statusPill": false,
  "lenis": true,
  "letterbox": false,
  "grain": false,
  "splitReveal": true,
  "kenburns": true,
  "magnetic": true,
  "scramble": false,
  "cinemaCursor": false
}/*EDITMODE-END*/;

const PAGE_META = {
  home:        { title: "Vlad Tudor — AI Engineer & Entrepreneur | Bucharest, Romania", description: "Vlad Tudor: AI engineer, Forbes 30 Under 30, founder of Sapio AI (custom AI software) and ai-aflat.ro. AI consultant, chatbot builder, and AI workshop trainer for companies across Romania.", canonical: "https://vladtudor.com/" },
  work:        { title: "About Vlad Tudor — AI Engineer, Founder & AI Consultant", description: "Who is Vlad Tudor? AI engineer and entrepreneur from Bucharest. Built 11+ custom AI systems — chatbots, intelligent assistants, RAG apps, computer vision tools. Founder of Sapio AI. Forbes 30 Under 30. TEDx speaker.", canonical: "https://vladtudor.com/work" },
  workshops:   { title: "AI Workshops Romania — Ateliere AI pentru Companii | Vlad Tudor", description: "AI training & workshops for companies, managers and teams in Romania. Hands-on sessions on ChatGPT, AI tools, intelligent automation, and chatbot development. In Romanian and English. Book Vlad Tudor.", canonical: "https://vladtudor.com/workshops" },
  "ai-aflat":  { title: "ai-aflat.ro — Asistent AI pentru Legislația Română | Vlad Tudor", description: "ai-aflat.ro: free AI assistant for Romanian law. Indexes 200,000+ legal acts — type any legal question and get an instant answer. 15,000+ users. Built by Vlad Tudor (Sapio AI).", canonical: "https://vladtudor.com/ai-aflat" },
  media:       { title: "Media & Talks — Vlad Tudor | TEDx, ProTV, RFI, Podcasts", description: "Vlad Tudor on AI, tech entrepreneurship, and civic technology: TEDx speaker, ProTV iLikeIT, RFI, Romanian podcasts. Watch talks and interviews.", canonical: "https://vladtudor.com/media" },
  cv:          { title: "CV — Vlad Tudor | AI Engineer, Consultant & Entrepreneur", description: "Full CV of Vlad Tudor: 8+ years in machine learning, founder of Sapio AI and ai-aflat.ro, UPB teaching assistant, Forbes 30 Under 30 nominee. Bucharest, Romania.", canonical: "https://vladtudor.com/cv" },
};

function pageFromPath() {
  const path = window.location.pathname.replace(/^\/+|\/+$/g, "") || "home";
  if (path === "sapio") {
    window.location.replace("https://sapio.ro");
    return "home";
  }
  const valid = ["home", "work", "workshops", "ai-aflat", "media", "cv"];
  if (valid.includes(path)) return path;
  return "home";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPageState] = useStateA(pageFromPath);

  useEffectA(() => {
    const onPopState = () => setPageState(pageFromPath());
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  }, []);

  // Update all crawlable meta on every route change
  useEffectA(() => {
    const meta = PAGE_META[page] || PAGE_META.home;
    document.title = meta.title;
    const desc = document.querySelector("meta[name=\"description\"]");
    if (desc) desc.content = meta.description;
    const canon = document.querySelector("link[rel=\"canonical\"]");
    if (canon) canon.href = meta.canonical;
    const ogTitle = document.querySelector("meta[property=\"og:title\"]");
    if (ogTitle) ogTitle.content = meta.title;
    const ogDesc = document.querySelector("meta[property=\"og:description\"]");
    if (ogDesc) ogDesc.content = meta.description;
    const ogUrl = document.querySelector("meta[property=\"og:url\"]");
    if (ogUrl) ogUrl.content = meta.canonical;
  }, [page]);

  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", t.theme || "dark");
  }, [t.theme]);

  useEffectA(() => {
    if (window.ensureLenis) window.ensureLenis(!!t.lenis);
    return () => window.ensureLenis && window.ensureLenis(false);
  }, [t.lenis]);

  const setPage = (p) => {
    const url = p === "home" ? "/" : "/" + p;
    history.pushState({}, "", url);
    setPageState(p);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const copy = useMemoA(() => ({ ...window.CONTENT.en, lang: "en" }), []);

  let PageComp = HomePage;
  if (page === "work") PageComp = WorkPage;
  else if (page === "sapio") PageComp = SapioPage;
  else if (page === "workshops") PageComp = WorkshopsPage;
  else if (page === "ai-aflat") PageComp = AaflatPage;
  else if (page === "writing") PageComp = WritingPage;
  else if (page === "media") PageComp = MediaPage;
  else if (page === "cv") PageComp = CvPage;

  return (
    <React.Fragment>
      <Nav page={page} setPage={setPage} copy={copy} />
      <main key={page} className="fadein">
        <PageComp copy={copy} lang="en" tweaks={t} />
      </main>
      <Footer copy={copy} setPage={setPage} lang="en" />

      <Letterbox enabled={!!t.letterbox} />
      <Grain enabled={!!t.grain} />
      <CinemaCursor enabled={!!t.cinemaCursor} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Mode"
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[{ label: "Dark", value: "dark" }, { label: "Light", value: "light" }]}
          />
        </TweakSection>
        <TweakSection label="Cinematic hero">
          <TweakToggle label="SplitText line reveal" value={t.splitReveal} onChange={(v) => setTweak("splitReveal", v)} />
          <TweakToggle label="Ken Burns on portrait" value={t.kenburns} onChange={(v) => setTweak("kenburns", v)} />
          <TweakToggle label="Magnetic CTAs" value={t.magnetic} onChange={(v) => setTweak("magnetic", v)} />
          <TweakToggle label="Scramble third tagline" value={t.scramble} onChange={(v) => setTweak("scramble", v)} />
        </TweakSection>
        <TweakSection label="Atmosphere">
          <TweakToggle label="Letterbox bars" value={t.letterbox} onChange={(v) => setTweak("letterbox", v)} />
          <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak("grain", v)} />
          <TweakToggle label="Cinema cursor" value={t.cinemaCursor} onChange={(v) => setTweak("cinemaCursor", v)} />
          <TweakToggle label="Lenis smooth scroll" value={t.lenis} onChange={(v) => setTweak("lenis", v)} />
        </TweakSection>
        <TweakSection label="Home page">
          <TweakToggle
            label="Show status pill"
            value={t.statusPill}
            onChange={(v) => setTweak("statusPill", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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