/* Nexus CRM — Marketing landing: nav, hero, dashboard mockup, trust strip.
   Composes DS components from the bundle namespace. */
(function () {
  const NX = window.NexusCRMDesignSystem_b16bff;
  const B = window.BRAND || { name: 'Marka CRM', domain: 'marka.com' };
  const { Button, Badge } = NX;
  const Icon = ({ n, s }) => <i data-lucide={n} style={s ? { width: s, height: s } : undefined}></i>;

  /* ---------------- TOP DEMO BAR ---------------- */
  function TopBar() {
    return (
      <div className="nxm-topbar">
        <div className="nxm-topbar__inner">
          <span className="nxm-topbar__label"><i data-lucide="sparkles"></i> Canlı demolar</span>
          <div className="nxm-topbar__actions">
            <a className="nxm-topbar__btn nxm-topbar__btn--primary" href={B.demoUrl} target="_blank" rel="noopener noreferrer">
              CRM Demosu <i data-lucide="arrow-up-right"></i>
            </a>
            <a className="nxm-topbar__btn" href={B.partnerUrl} target="_blank" rel="noopener noreferrer">
              Partner Portal Demosu <i data-lucide="arrow-up-right"></i>
            </a>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- NAV ---------------- */
  function Nav() {
    const [scrolled, setScrolled] = React.useState(false);
    React.useEffect(() => {
      const el = document.querySelector(".nxm-scroll") || window;
      const onScroll = () => {
        const y = el === window ? window.scrollY : el.scrollTop;
        setScrolled(y > 12);
      };
      el.addEventListener("scroll", onScroll);
      return () => el.removeEventListener("scroll", onScroll);
    }, []);
    const links = [
      ["Özellikler", "#ozellikler"],
      ["Nasıl çalışır", "#nasil"],
      ["Uzaktan destek", "#destek"],
      ["Ürün turu", "#tur"],
      ["SSS", "#sss"],
    ];
    return (
      <header className={"nxm-nav" + (scrolled ? " is-scrolled" : "")}>
        <div className="nxm-nav__inner">
          <a href="#top" className="nxm-nav__brand nxm-brandlockup">
            <img src="./assets/logo-mark-dark.png" alt="" className="nxm-brandlockup__mark" />
            <span className="nxm-brandlockup__name">{B.name}</span>
          </a>
          <nav className="nxm-nav__links">
            {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
          </nav>
          <div className="nxm-nav__cta">
            <Button variant="ghost" size="sm" href="#iletisim">İletişim</Button>
            <Button variant="secondary" size="sm" href={B.partnerUrl} target="_blank" rel="noopener noreferrer">Partner Portal</Button>
            <Button variant="primary" size="sm" href={B.demoUrl} target="_blank" rel="noopener noreferrer" rightIcon={<Icon n="arrow-right" />}>Demoyu Dene</Button>
          </div>
        </div>
      </header>
    );
  }

  /* ---------------- HERO ---------------- */
  function Hero() {
    return (
      <section className="nxm-hero" id="top">
        <div className="nxm-hero__glow" aria-hidden="true"></div>
        <div className="nxm-hero__net nx-constellation" aria-hidden="true"></div>
        <div className="nxm-hero__inner">
          <div className="nxm-hero__copy">
            <span className="nx-eyebrow nxm-hero__eyebrow">Tek platform · Satış · Teklif · Destek · Finans</span>
            <h1 className="nxm-hero__title">Satıştan desteğe, tüm müşteri sürecini <span className="nxm-grad">tek platformda</span> yönet.</h1>
            <p className="nxm-hero__sub">Fırsattan profesyonel teklife, faturadan uzaktan teknik desteğe kadar — müşterine 3 tıkla bağlan, teklifini dakikalar içinde gönder. Türkiye'deki KOBİ'ler, bilişim firmaları ve bayiler için yapay zekâ destekli iş yönetim platformu.</p>
            <div className="nxm-hero__actions">
              <Button variant="primary" size="lg" href={B.demoUrl} target="_blank" rel="noopener noreferrer" rightIcon={<Icon n="arrow-right" />}>Demoyu Dene</Button>
              <Button variant="secondary" size="lg" href={B.partnerUrl} target="_blank" rel="noopener noreferrer" leftIcon={<Icon n="layout-grid" />}>Partner Portal Demosu</Button>
            </div>
            <div className="nxm-hero__meta">
              <span><Icon n="check" /> Türkçe arayüz</span>
              <span><Icon n="check" /> Hızlı kurulum</span>
              <span><Icon n="check" /> AI destekli</span>
            </div>
          </div>
          <div className="nxm-hero__mock">{NX.__DashboardMock()}</div>
        </div>
      </section>
    );
  }

  /* ---------------- DASHBOARD MOCKUP (glass) ---------------- */
  function DashboardMock() {
    const stages = [
      { n: "Yeni", c: 12, v: "₺840B" },
      { n: "Teklif", c: 8, v: "₺1,2M" },
      { n: "Müzakere", c: 5, v: "₺960B" },
      { n: "Kazanıldı", c: 3, v: "₺2,4M" },
    ];
    return (
      <div className="nxm-mock" role="img" aria-label={B.name + " panel önizlemesi"}>
        <div className="nxm-mock__bar">
          <span className="nxm-mock__dot"></span><span className="nxm-mock__dot"></span><span className="nxm-mock__dot"></span>
          <div className="nxm-mock__url"><Icon n="lock" /> panel.{B.domain}</div>
        </div>
        <div className="nxm-mock__body">
          <aside className="nxm-mock__side">
            <img src="./assets/logo-mark-dark.png" alt="" className="nxm-mock__logo" />
            {["layout-dashboard", "users", "target", "file-text", "headset", "wallet"].map((n, i) =>
              <span key={n} className={"nxm-mock__nav" + (i === 2 ? " is-active" : "")}><i data-lucide={n}></i></span>
            )}
          </aside>
          <div className="nxm-mock__main">
            <div className="nxm-mock__kpis">
              {[["Açık Fırsat", "₺5,4M", "+12%"], ["Kazanma", "%68", "+4%"], ["Bekleyen Teklif", "23", "+6"]].map((k) =>
                <div className="nxm-mock__kpi" key={k[0]}>
                  <span className="nxm-mock__kpiLabel">{k[0]}</span>
                  <span className="nxm-mock__kpiVal">{k[1]}</span>
                  <span className="nxm-mock__kpiDelta"><i data-lucide="trending-up"></i>{k[2]}</span>
                </div>
              )}
            </div>
            <div className="nxm-mock__pipe">
              {stages.map((s) =>
                <div className="nxm-mock__col" key={s.n}>
                  <div className="nxm-mock__colHead"><span>{s.n}</span><b>{s.c}</b></div>
                  <div className="nxm-mock__card"><span className="nxm-mock__line w70"></span><span className="nxm-mock__line w40"></span><em>{s.v}</em></div>
                  <div className="nxm-mock__card faint"><span className="nxm-mock__line w60"></span><span className="nxm-mock__line w30"></span></div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
  NX.__DashboardMock = () => <DashboardMock />;

  /* ---------------- TRUST STRIP ---------------- */
  function TrustStrip() {
    const items = [
      ["target", "Satış"], ["file-text", "Teklif"], ["headset", "Destek"], ["wallet", "Finans"],
    ];
    return (
      <section className="nxm-trust">
        <div className="nxm-trust__inner">
          <span className="nxm-trust__lead">Tek platform —</span>
          <div className="nxm-trust__items">
            {items.map(([ic, l], i) =>
              <React.Fragment key={l}>
                <span className="nxm-trust__item"><i data-lucide={ic}></i>{l}</span>
                {i < items.length - 1 ? <span className="nxm-trust__sep">·</span> : null}
              </React.Fragment>
            )}
          </div>
        </div>
      </section>
    );
  }

  NX.__sections = Object.assign({}, NX.__sections, { TopBar, Nav, Hero, TrustStrip });
})();