// Nav + Hero
function ThemeToggle({ theme, setTheme }) {
  return (
    <button
      className="theme-toggle"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      aria-label={theme === "dark" ? "Mode clair" : "Mode sombre"}
    >
      {theme === "dark" ? (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <circle cx="8" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.5"/>
          <line x1="8" y1="1" x2="8" y2="2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          <line x1="8" y1="13.5" x2="8" y2="15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          <line x1="1" y1="8" x2="2.5" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          <line x1="13.5" y1="8" x2="15" y2="8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          <line x1="2.93" y1="2.93" x2="4.05" y2="4.05" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          <line x1="11.95" y1="11.95" x2="13.07" y2="13.07" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          <line x1="2.93" y1="13.07" x2="4.05" y2="11.95" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          <line x1="11.95" y1="4.05" x2="13.07" y2="2.93" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ) : (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
        </svg>
      )}
    </button>
  );
}

function Nav({ t, lang, setLang, theme, setTheme }) {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);

  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#top" onClick={close}><Logo variant={window.__dxnLogoVariant || "glyph"} accent="var(--accent)" ink="var(--ink)" /></a>
        <div className="nav-links">
          <a href="#services">{t.nav.services}</a>
          <a href="#process">{t.nav.process}</a>
          <a href="#about">{t.nav.about}</a>
          <a href="#faq">{t.nav.faq}</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch">
            <button className={lang === "fr" ? "active" : ""} onClick={() => setLang("fr")}>FR</button>
            <button className={lang === "nl" ? "active" : ""} onClick={() => setLang("nl")}>NL</button>
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <ThemeToggle theme={theme} setTheme={setTheme} />
          <a href="#contact" className="btn btn-primary">{t.nav.quote} →</a>
          <button className="nav-hamburger" onClick={() => setOpen(o => !o)} aria-label="Menu">
            {open ? (
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <line x1="2" y1="2" x2="16" y2="16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
                <line x1="16" y1="2" x2="2" y2="16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <line x1="2" y1="5" x2="16" y2="5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
                <line x1="2" y1="9" x2="16" y2="9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
                <line x1="2" y1="13" x2="16" y2="13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
              </svg>
            )}
          </button>
        </div>
      </div>
      {open && (
        <div className="mobile-menu">
          <a href="#services" onClick={close}>{t.nav.services}</a>
          <a href="#process" onClick={close}>{t.nav.process}</a>
          <a href="#about" onClick={close}>{t.nav.about}</a>
          <a href="#faq" onClick={close}>FAQ</a>
          <a href="#contact" className="mobile-menu-cta" onClick={close}>{t.nav.quote} →</a>
        </div>
      )}
    </nav>
  );
}

function Hero({ t }) {
  return (
    <header className="hero" id="top">
      <div className="container hero-inner">
        <div>
          <div className="hero-eyebrow mono caps">
            <span className="dot" />
            {t.hero.eyebrow}
          </div>
          <h1 className="display hero-title" style={{ marginTop: 32, marginBottom: 32 }}>
            {t.hero.titleA}
            <span className="line-b">
              {t.hero.titleB}
            </span>
          </h1>
          <p className="hero-sub"><BrandInline>{t.hero.sub}</BrandInline></p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary">{t.hero.ctaA} →</a>
            <a href="#services" className="btn btn-ghost">{t.hero.ctaB}</a>
          </div>
        </div>
        <div className="hero-meta hero-meta-3col">
          <div>
            <div className="k mono">[01] Location</div>
            <div className="v">{t.hero.metaA}</div>
          </div>
          <div>
            <div className="k mono">[02] {t.hero.metaD}</div>
            <div className="v">{t.hero.metaE}</div>
          </div>
          <div>
            <div className="k mono">[03] {t.hero.metaF}</div>
            <div className="v" style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 8px var(--accent)", flexShrink: 0 }} />
              {t.hero.metaG}
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, Hero });