// SVG icon components
const ICONS = {
  github: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
    </svg>
  ),
  linkedin: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
  ),
  cv: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
      <polyline points="14 2 14 8 20 8"/>
      <line x1="8" y1="13" x2="16" y2="13"/>
      <line x1="8" y1="17" x2="13" y2="17"/>
    </svg>
  ),
  discord: (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
    </svg>
  ),
  globe: (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="2" y1="12" x2="22" y2="12"/>
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
    </svg>
  ),
  chevronDown: (
    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6 9 12 15 18 9"/>
    </svg>
  ),
};

const LANG_LABELS = { en: "English", fr: "Français", de: "Deutsch", es: "Español", pt: "Português", ja: "日本語", zh: "中文" };

function LangDropdown({ lang, setLang, languages }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const onClickOutside = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onClickOutside);
    return () => document.removeEventListener("mousedown", onClickOutside);
  }, []);

  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        onClick={() => setOpen(!open)}
        className="cursor-link"
        style={{
          background: "none", border: "1px solid #1e1e1e", padding: "4px 10px 4px 8px",
          display: "flex", alignItems: "center", gap: 6,
          fontFamily: "'DM Mono', monospace", fontSize: 10, letterSpacing: "0.18em",
          color: open ? "#888" : "#444", transition: "color 0.2s ease, border-color 0.2s ease",
          borderColor: open ? "#2a2a2a" : "#1e1e1e",
        }}
        onMouseEnter={e => e.currentTarget.style.color="#888"}
        onMouseLeave={e => { if (!open) e.currentTarget.style.color="#444"; }}
      >
        {ICONS.globe}
        <span>{lang.toUpperCase()}</span>
        <span style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s ease", display: "flex" }}>{ICONS.chevronDown}</span>
      </button>

      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 6px)", right: 0,
          background: "#0a0a0a", border: "1px solid #1a1a1a",
          minWidth: 140, zIndex: 200,
          animation: "fadeUp 0.2s cubic-bezier(0.16,1,0.3,1) both",
        }}>
          {languages.map((l) => (
            <button key={l} onClick={() => { setLang(l); setOpen(false); }}
              className="cursor-link"
              style={{
                display: "flex", alignItems: "center", justifyContent: "space-between",
                width: "100%", padding: "9px 14px", background: "none", border: "none",
                fontFamily: "'DM Mono', monospace", fontSize: 10, letterSpacing: "0.14em",
                color: l === lang ? "#ededeb" : "#444",
                borderBottom: "1px solid #111", transition: "color 0.2s, background 0.2s",
                textAlign: "left",
              }}
              onMouseEnter={e => { e.currentTarget.style.color="#ededeb"; e.currentTarget.style.background="#111"; }}
              onMouseLeave={e => { e.currentTarget.style.color = l===lang?"#ededeb":"#444"; e.currentTarget.style.background="none"; }}
            >
              <span>{LANG_LABELS[l] || l.toUpperCase()}</span>
              {l === lang && <span style={{ fontSize: 8, color: "#555" }}>✓</span>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ICONS });

function Navigation() {
  const { t, lang, setLang, languages } = useI18n();
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Scroll lock — overflow:hidden on <html>, no scroll position manipulation
  // → no visual jump, and overscroll-behavior:none on <html> kills iOS rubber-band
  React.useEffect(() => {
    if (!menuOpen) return;
    const html = document.documentElement;
    const prevOverflow = html.style.overflow;
    const prevOverscroll = html.style.overscrollBehavior;
    html.style.overflow = "hidden";
    html.style.overscrollBehavior = "none";
    return () => {
      html.style.overflow = prevOverflow;
      html.style.overscrollBehavior = prevOverscroll;
    };
  }, [menuOpen]);

  // Close on Escape
  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [menuOpen]);

  const scrollTo = (id) => {
    setMenuOpen(false);
    requestAnimationFrame(() => {
      const el = document.getElementById(id);
      if (!el) return;
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: "smooth" });
    });
  };

  const navLinks = [
    { id: "about", label: t.nav.about },
    { id: "skills", label: t.nav.skills },
    { id: "projects", label: t.nav.projects },
    { id: "contact", label: t.nav.contact },
  ];

  return (
    <>
      <nav style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 100,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "0 clamp(24px, 5vw, 64px)",
        height: 60,
        background: scrolled || menuOpen ? "rgba(6,6,8,0.85)" : "transparent",
        backdropFilter: scrolled || menuOpen ? "blur(12px)" : "none",
        WebkitBackdropFilter: scrolled || menuOpen ? "blur(12px)" : "none",
        borderBottom: scrolled || menuOpen ? "1px solid #111" : "1px solid transparent",
        transition: "background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease",
      }}>
        <MagneticElement strength={0.3}>
          <button
            onClick={() => { setMenuOpen(false); window.scrollTo({ top: 0, behavior: "smooth" }); }}
            style={{
              background: "none",
              border: "none",
              cursor: "none",
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 600,
              fontSize: 18,
              color: "#ededeb",
              letterSpacing: "-0.01em",
              padding: 0,
            }}
          >
            muuqi
          </button>
        </MagneticElement>

        <div className="nav-links" style={{ display: "flex", gap: "clamp(24px, 3vw, 44px)", alignItems: "center" }}>
          {navLinks.map((link) => (
            <MagneticElement key={link.id} strength={0.5}>
              <button
                onClick={() => scrollTo(link.id)}
                className="nav-link cursor-link"
              >
                {link.label}
              </button>
            </MagneticElement>
          ))}

          <LangDropdown lang={lang} setLang={setLang} languages={languages} />
        </div>

        <button
          className={`menu-toggle${menuOpen ? " is-open" : ""}`}
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label="Menu"
          aria-expanded={menuOpen}
        >
          <span className="menu-toggle-bar" />
          <span className="menu-toggle-bar" />
          <span className="menu-toggle-bar" />
        </button>
      </nav>

      {/* Mobile menu overlay — sibling of nav (NOT child) to avoid backdrop-filter
          containing-block bug that broke fixed positioning when scrolled. */}
      <div
        className={`mobile-menu${menuOpen ? " is-open" : ""}`}
        aria-hidden={!menuOpen}
        onClick={(e) => { if (e.target === e.currentTarget) setMenuOpen(false); }}
      >
        <div className="mobile-menu-inner">
          {navLinks.map((link, i) => (
            <button
              key={link.id}
              onClick={() => scrollTo(link.id)}
              className="mobile-menu-link"
              style={{ transitionDelay: menuOpen ? `${0.18 + i * 0.06}s` : "0s" }}
              tabIndex={menuOpen ? 0 : -1}
            >
              {link.label}
            </button>
          ))}
          <div
            className="mobile-menu-lang"
            style={{ transitionDelay: menuOpen ? `${0.18 + navLinks.length * 0.06}s` : "0s" }}
          >
            <LangDropdown lang={lang} setLang={setLang} languages={languages} />
          </div>
        </div>
      </div>
    </>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "skillsVariant": "marquee",
  "contactLayout": "centered",
  "contactScramble": true,
  "contactRing": "grain"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <I18nProvider>
      <CustomCursor />
      <Navigation />
      <main>
        <HeroSection />
        <AboutSection />
        <SkillsSection variant={tweaks.skillsVariant} />
        <ProjectsSection />
        <ContactSection layout={tweaks.contactLayout} scramble={tweaks.contactScramble} ambientRing={tweaks.contactRing} />
      </main>
      <TweaksPanel>
        <TweakSection label="Skills Section">
          <TweakRadio
            label="Variant"
            value={tweaks.skillsVariant}
            options={[
              { value: "marquee", label: "Marquee" },
              { value: "orbital", label: "Orbital" },
              { value: "grid", label: "Grid" },
            ]}
            onChange={(v) => setTweak("skillsVariant", v)}
          />
        </TweakSection>
        <TweakSection label="Contact Section">
          <TweakRadio
            label="Layout"
            value={tweaks.contactLayout}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "centered", label: "Centered" },
            ]}
            onChange={(v) => setTweak("contactLayout", v)}
          />
          <TweakToggle label="Email scramble" value={tweaks.contactScramble} onChange={(v) => setTweak("contactScramble", v)} />
          <TweakSelect
            label="Ambient effect"
            value={tweaks.contactRing}
            options={[
              { value: "none",  label: "None" },
              { value: "grain", label: "Film grain" },
              { value: "echo",  label: "Ghost echo" },
              { value: "lines", label: "Hairlines" },
            ]}
            onChange={(v) => setTweak("contactRing", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </I18nProvider>
  );
}

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