// =========================================================================
// App — root composition + theme + smooth scroll + scroll progress
// =========================================================================
const {
  useState: useAppState,
  useEffect: useAppEffect,
  useRef: useAppRef,
} = React;

// -------------------------------------------------------------------------
// Translations (EN / TR)
// -------------------------------------------------------------------------
const TRANSLATIONS = {
  en: {
    // Hero
    "hero.line1": "Computer Engineer",
    "hero.line2": "Build better and stronger",
    "hero.desc":
      "I am a computer engineer with a grand interest on UX and AI. I aim to create programs that can be used by everyone! I build production-ready systems including web, mobile, CMS, and AI-powered products with TypeScript, React, Next.js, Remix, React Native, Directus, PostgreSQL, Docker, and LLM workflows.",
    "hero.cta.work": "See the work",
    "hero.cta.contact": "Get in touch ↗",
    "hero.status": "OPEN TO COLLABORATIONS",
    "hero.meta.now.label": "NOW",
    "hero.meta.now.val": "Open to work",
    "hero.meta.loc.label": "LOC",
    "hero.meta.loc.val": "Izmir, Turkey",
    "hero.meta.yr.label": "YR",
    "hero.meta.yr.val": "2026 / v1",

    // Nav
    "nav.work": "Work",
    "nav.projects": "Projects",
    "nav.stack": "Stack",
    "nav.about": "About",
    "nav.contact": "Contact",
    "nav.theme.dark": "◐ Dark",
    "nav.theme.light": "◑ Light",

    // Tech Stack section
    "stack.eyebrow": "STACK · PRODUCTION-GRADE TOOLS",
    "stack.title": "Things I\nreach for.",
    "stack.kicker":
      "Technologies I use across data-driven platforms, mobile apps, CMS infrastructure, backend services, and AI workflow automation.",
    "stack.cat.backend": "BACKEND",
    "stack.cat.frontend": "FRONTEND",
    "stack.cat.cloud": "CLOUD & INFRA",
    "stack.cat.integrations": "INTEGRATIONS",

    // Work section
    "work.eyebrow": "WORK · 2024 → NOW",
    "work.title": "Shipped at\nproduction scale.",
    "work.kicker":
      "Software specialist experience, internship work, team collaboration, and product ownership across corporate and internal platforms.",

    // Projects section
    "projects.eyebrow": "PROJECTS · SHIPPED, SOLO OR LEAD",
    "projects.title": "Things I've\nbuilt and broken.",
    "project.featured.tag": "AI · Thesis",
    "project.featured.role": "Full-stack · AI agent",
    "project.featured.desc":
      "Reportly is an AI agent that generates SQL-based reports from connected databases and exports them as PDF or CSV.",

    // About section
    "about.eyebrow": "ABOUT · IZMIR INSTITUTE OF TECHNOLOGY",
    "about.title": "Hi, I'm Ege.",
    "about.quote.pre": "I combine ",
    "about.quote.em":
      "user experience, backend reliability, and scalable system design",
    "about.quote.post":
      " to build production-ready products for different industries.",
    "about.bio":
      "Full-stack and product-focused developer specializing in TypeScript, React, Next.js, Remix, React Native/Expo, Directus, GraphQL, Drizzle ORM, PostgreSQL, Docker, Express, NestJS, LangChain, and AI workflow automation.",
    "about.stat.years.k": "Years shipping",
    "about.stat.years.v": "1+",
    "about.stat.stack.k": "Production stacks",
    "about.stat.stack.v": "TypeScript · React · AI",
    "about.stat.latest.k": "Last role",
    "about.stat.latest.v": "Brew Interactive · 2024-2026",
    "about.stat.edu.k": "Education",
    "about.stat.edu.v": "CompEng, IYTE · 2026",

    // Contact section
    "contact.eyebrow": "CONTACT · REPLY WITHIN 24H",
    "contact.title": "Let's work\ntogether.",
    "contact.kicker":
      "Available for full-stack web/mobile products, CMS infrastructure, AI assistants, dashboards, and production maintenance. All channels go directly to me.",
    "contact.field.name": "YOUR NAME",
    "contact.field.email": "EMAIL",
    "contact.field.message": "MESSAGE",
    "contact.field.name.ph": "Ada Lovelace",
    "contact.field.email.ph": "you@company.com",
    "contact.field.message.ph": "I'm building a thing. Can you help with…",
    "contact.submit": "Send message →",
    "contact.sent.tag": "SENT · 200 OK",
    "contact.sent.thanks": "Thanks, {name}.",
    "contact.sent.reply": "I'll reply to {email} within 24 hours.",

    // Footer
    "footer.signoff.line1": "Make your own path",
    "footer.signoff.line2": "Grow infinitely",
    "footer.elsewhere": "ELSEWHERE",
    "footer.currently.title": "CURRENTLY",
    "footer.currently.line1": "Open to new opportunities.",
    "footer.currently.line2":
      "Computer Engineering @ Izmir Institute of Technology.",
    "footer.legal": "© 2026 · EGE TURANOGLU",
    "footer.nocookies": "NO COOKIES. NO ANALYTICS. NO NEWSLETTER.",
    "footer.version": "v1.0 · EGE TURANOGLU",
  },

  tr: {
    // Hero
    "hero.line1": "Bilgisayar Mühendisi",
    "hero.line2": "Daha iyi ve daha güçlü geliştir",
    "hero.desc":
      "UX ve AI'a büyük ilgi duyan bir bilgisayar mühendisiyim. Herkesin kullanabileceği programlar üretmeyi hedefliyorum! TypeScript, React, Next.js, Remix, React Native, Directus, PostgreSQL, Docker ve LLM iş akışlarıyla web, mobil, CMS ve AI destekli production'a hazır sistemler geliştiriyorum.",
    "hero.cta.work": "Çalışmaları gör",
    "hero.cta.contact": "İletişime geç ↗",
    "hero.status": "İŞBİRLİKLERİNE AÇIK",
    "hero.meta.now.label": "ŞU AN",
    "hero.meta.now.val": "Çalışmaya açık",
    "hero.meta.loc.label": "LOKASYON",
    "hero.meta.loc.val": "İzmir, Türkiye",
    "hero.meta.yr.label": "YIL",
    "hero.meta.yr.val": "2026 / v1",

    // Nav
    "nav.work": "Deneyim",
    "nav.projects": "Projeler",
    "nav.stack": "Stack",
    "nav.about": "Hakkımda",
    "nav.contact": "İletişim",
    "nav.theme.dark": "◐ Koyu",
    "nav.theme.light": "◑ Açık",

    // Tech Stack section
    "stack.eyebrow": "STACK · PRODUCTION SEVİYESİ ARAÇLAR",
    "stack.title": "Sık kullandığım\naraçlar.",
    "stack.kicker":
      "Veri odaklı platformlar, mobil uygulamalar, CMS altyapısı, backend servisleri ve AI iş akışı otomasyonunda kullandığım teknolojiler.",
    "stack.cat.backend": "BACKEND",
    "stack.cat.frontend": "FRONTEND",
    "stack.cat.cloud": "CLOUD & ALTYAPI",
    "stack.cat.integrations": "ENTEGRASYONLAR",

    // Work section
    "work.eyebrow": "DENEYİM · 2024 → BUGÜN",
    "work.title": "Production ölçeğinde\nyayına alınan işler.",
    "work.kicker":
      "Kurumsal ve şirket içi platformlarda yazılım uzmanlığı, staj deneyimi, ekip çalışması ve ürün sahipliği.",

    // Projects section
    "projects.eyebrow": "PROJELER · YAYINA ALINDI, SOLO VEYA LİDER OLARAK",
    "projects.title": "Geliştirdiğim ve\nbozduğum şeyler.",
    "project.featured.tag": "AI · Tez",
    "project.featured.role": "Full-stack · AI agent",
    "project.featured.desc":
      "Reportly, bağlanan veritabanlarından SQL tabanlı raporlar üreten ve PDF/CSV olarak dışa aktaran bir AI agent projesidir.",

    // About section
    "about.eyebrow": "HAKKIMDA · İZMİR YÜKSEK TEKNOLOJİ ENSTİTÜSÜ",
    "about.title": "Merhaba, ben Ege.",
    "about.quote.pre": "",
    "about.quote.em":
      "Kullanıcı deneyimini, backend güvenilirliğini ve ölçeklenebilir sistem tasarımını",
    "about.quote.post":
      " birleştirerek farklı sektörler için production'a hazır ürünler geliştiriyorum.",
    "about.bio":
      "TypeScript, React, Next.js, Remix, React Native/Expo, Directus, GraphQL, Drizzle ORM, PostgreSQL, Docker, Express, NestJS, LangChain ve AI iş akış otomasyonu alanlarında çalışan full-stack ve ürün odaklı bir geliştiriciyim.",
    "about.stat.years.k": "Deneyim yılı",
    "about.stat.years.v": "1+",
    "about.stat.stack.k": "Production stack'leri",
    "about.stat.stack.v": "TypeScript · React · AI",
    "about.stat.latest.k": "Son pozisyon",
    "about.stat.latest.v": "Brew Interactive · 2024-2026",
    "about.stat.edu.k": "Eğitim",
    "about.stat.edu.v": "Bilg. Müh., İYTE · 2026",

    // Contact section
    "contact.eyebrow": "İLETİŞİM · 24 SAAT İÇİNDE YANIT",
    "contact.title": "Birlikte\nçalışalım.",
    "contact.kicker":
      "Full-stack web/mobil ürünler, CMS altyapıları, AI asistanları, dashboard'lar ve production bakımı için ulaşabilirsiniz. Tüm kanallar doğrudan bana ulaşıyor.",
    "contact.field.name": "ADINIZ",
    "contact.field.email": "E-POSTA",
    "contact.field.message": "MESAJ",
    "contact.field.name.ph": "Ada Lovelace",
    "contact.field.email.ph": "siz@sirket.com",
    "contact.field.message.ph":
      "Bir şey inşa ediyorum. Yardımcı olabilir misiniz…",
    "contact.submit": "Mesaj gönder →",
    "contact.sent.tag": "GÖNDERİLDİ · 200 OK",
    "contact.sent.thanks": "Teşekkürler, {name}.",
    "contact.sent.reply": "{email} adresine 24 saat içinde dönüş yapacağım.",

    // Footer
    "footer.signoff.line1": "Kendi yolunu çiz",
    "footer.signoff.line2": "Sonsuz büyü",
    "footer.elsewhere": "BAĞLANTILAR",
    "footer.currently.title": "ŞU ANDA",
    "footer.currently.line1": "Yeni fırsatlara açık.",
    "footer.currently.line2":
      "İzmir Yüksek Teknoloji Enstitüsü'nde Bilgisayar Mühendisliği.",
    "footer.legal": "© 2026 · EGE TURANOĞLU",
    "footer.nocookies": "ÇEREZ YOK. ANALİTİK YOK. BÜLTEN YOK.",
    "footer.version": "v1.0 · EGE TURANOĞLU",
  },
};

// -------------------------------------------------------------------------

function App() {
  const [theme, setTheme] = useAppState("dark");
  const [lang, setLang] = useAppState("en");
  const [active, setActive] = useAppState("top");
  const [progress, setProgress] = useAppState(0);

  function t(key, params = {}) {
    const tr = TRANSLATIONS[lang];
    const en = TRANSLATIONS["en"];
    let str =
      tr && tr[key] !== undefined
        ? tr[key]
        : en && en[key] !== undefined
          ? en[key]
          : key;
    Object.entries(params).forEach(([k, v]) => {
      str = str.replace(`{${k}}`, v);
    });
    return str;
  }

  useAppEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  useAppEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const scrolled = h.scrollTop;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(
        max > 0 ? Math.min(100, Math.round((scrolled / max) * 100)) : 0,
      );

      const ids = ["work", "projects", "about", "stack", "contact"];
      let curr = "top";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.45) curr = id;
      }
      setActive(curr);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  function scrollTo(id) {
    if (id === "top") {
      window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
      const el = document.getElementById(id);
      if (el) {
        window.scrollTo({ top: el.offsetTop - 8, behavior: "smooth" });
      }
    }
  }

  const langCtxValue = { lang, t, theme };

  return (
    <window.LangContext.Provider value={langCtxValue}>
      <div data-theme={theme}>
        <Nav
          active={active}
          onNav={scrollTo}
          theme={theme}
          onThemeToggle={() =>
            setTheme((th) => (th === "dark" ? "light" : "dark"))
          }
          lang={lang}
          onLangToggle={() => setLang((l) => (l === "en" ? "tr" : "en"))}
        />
        <CursorDot />

        <main>
          <Hero onScrollNext={() => scrollTo("work")} />
          <Work />
          <StackMarquee />
          <Projects />
          <About />
          <TechStack />
          <Contact />
        </main>

        <Footer />

        {/* Scroll progress indicator */}
        <div
          style={{
            position: "fixed",
            bottom: 20,
            right: 24,
            zIndex: 90,
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.12em",
            color: "var(--fg-faint)",
            textTransform: "uppercase",
            display: "flex",
            alignItems: "center",
            gap: 8,
            background: "color-mix(in oklab, var(--bg) 78%, transparent)",
            backdropFilter: "blur(8px)",
            padding: "8px 12px",
            borderRadius: 999,
            border: "var(--border-hairline)",
          }}
        >
          <span
            style={{
              display: "inline-block",
              width: 32,
              height: 1,
              background: "var(--border-loud)",
              position: "relative",
            }}
          >
            <span
              style={{
                position: "absolute",
                top: -0.5,
                left: 0,
                height: 2,
                background: "var(--accent)",
                width: `${progress}%`,
                transition: "width 80ms linear",
              }}
            />
          </span>
          <span style={{ color: "var(--fg)" }}>
            {String(progress).padStart(2, "0")}%
          </span>
        </div>
      </div>
    </window.LangContext.Provider>
  );
}

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