/* Nexus CRM — Marketing landing: features, how-it-works, remote support,
   product tour, why, FAQ, contact, footer. Composes DS components. */
(function () {
  const NX = window.NexusCRMDesignSystem_b16bff;
  const B = window.BRAND || { name: 'Marka CRM', email: 'merhaba@trendtech.com.tr', partner: 'TrendTech Bilişim Teknolojileri' };
  const { Button, Badge, Card } = NX;
  const LI = ({ n }) => <i data-lucide={n}></i>;

  /* ---------------- FEATURES ---------------- */
  const GROUPS = [
    { tag: "Satış", items: [
      { ic: "git-branch", t: "Akıllı Satış Pipeline'ı", d: "Fırsat takibi, aşama yönetimi ve kazanma oranı analizi. Her fırsatın nerede olduğunu tek bakışta gör." },
      { ic: "file-text", t: "Profesyonel Teklif Yönetimi", d: "Tek tıkla çok sayfalı kurumsal PDF teklifler: kapak mektubu, ürün tablosu, satış koşulları ve imza. Maliyet/marj dahili kalır." },
    ]},
    { tag: "Destek", items: [
      { ic: "screen-share", t: "Entegre Uzaktan Destek", d: "WebRTC tabanlı uzak masaüstü ile müşterine CRM içinden tek tıkla bağlan; izleme ve tam kontrol modu.", hot: true },
      { ic: "timer", t: "SLA & Destek Yönetimi", d: "Önceliğe göre yanıt/çözüm hedefleri, kategori bazlı talepler ve performans BI panelleri." },
    ]},
    { tag: "Finans", items: [
      { ic: "receipt", t: "Faturalandırma & Fiyatlandırma", d: "Fatura yönetimi, e-Fatura/e-Arşiv farkındalığı, fiyat listeleri, tedarikçi maliyeti ve kâr marjı takibi." },
    ]},
    { tag: "AI & Analitik", items: [
      { ic: "sparkles", t: "Yapay Zekâ Asistanı", d: "Pipeline ve aktivite analizine dayalı haftalık öneriler — bir sonraki en iyi aksiyonu söyler." },
      { ic: "layout-dashboard", t: "Modüler Kontrol Paneli", d: "Sürükle-bırak ile taşınabilir, gizlenebilir widget'lar. Panelini ekibine göre kur." },
      { ic: "activity", t: "Canlı İş Göstergeleri", d: "Döviz/altın kurları, hava durumu ve gerçek zamanlı grafikler — iş günü tek ekranda." },
    ]},
    { tag: "Entegrasyon", items: [
      { ic: "calendar", t: "Takvim Senkronizasyonu", d: "Microsoft 365 (Outlook) ve Google Calendar ile çift yönlü senkronizasyon." },
      { ic: "key-round", t: "Lisanslı Müşteri & Telemetri", d: "SaaS müşterilerinin kullanım raporları, Excel/PDF export ile tam görünürlük." },
    ]},
  ];

  function FeatureCard({ f }) {
    return (
      <Card interactive glow={f.hot} className={"nxm-feat" + (f.hot ? " is-hot" : "")}>
        {f.hot ? <Badge tone="accent" className="nxm-feat__flag">Öne çıkan</Badge> : null}
        <span className="nxm-feat__icon"><i data-lucide={f.ic}></i></span>
        <h3 className="nxm-feat__title">{f.t}</h3>
        <p className="nxm-feat__desc">{f.d}</p>
      </Card>
    );
  }

  function Features() {
    return (
      <section className="nxm-sec nx-light" id="ozellikler">
        <div className="nxm-wrap">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">Özellikler</span>
            <h2 className="nxm-sec__title">Satıştan finansa, tek panelde her şey</h2>
            <p className="nxm-sec__lead">Firma ve kişi yönetiminden satış fırsatına, profesyonel teklife, faturaya ve uzaktan desteğe — sürecin tamamı {B.name}'de.</p>
          </div>
          <div className="nxm-groups">
            {GROUPS.map((g) =>
              <div className="nxm-group" key={g.tag}>
                <div className="nxm-group__label"><span className="nx-eyebrow">{g.tag}</span><span className="nxm-group__rule"></span></div>
                <div className="nxm-feat__grid">
                  {g.items.map((f) => <FeatureCard key={f.t} f={f} />)}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- HOW IT WORKS ---------------- */
  function HowItWorks() {
    const steps = [
      { ic: "target", t: "Fırsat", d: "Yeni fırsatı yakala, firma ve kişiyle ilişkilendir, pipeline'a düş." },
      { ic: "file-text", t: "Teklif", d: "Ürünleri seç, marjı belirle, kurumsal PDF teklifi dakikalar içinde gönder." },
      { ic: "package-check", t: "Sipariş", d: "Onaylanan teklif siparişe ve faturaya dönüşür, stok ve finans güncellenir." },
      { ic: "headset", t: "Destek", d: "Kurulum sonrası SLA'lı destek ve tek tıkla uzaktan bağlantı devreye girer." },
    ];
    return (
      <section className="nxm-sec nxm-sec--dark" id="nasil">
        <div className="nxm-wrap">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">Nasıl çalışır?</span>
            <h2 className="nxm-sec__title">Fırsattan desteğe, kesintisiz dört adım</h2>
          </div>
          <div className="nxm-steps">
            {steps.map((s, i) =>
              <div className="nxm-step" key={s.t}>
                <div className="nxm-step__top">
                  <span className="nxm-step__num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="nxm-step__icon"><i data-lucide={s.ic}></i></span>
                  {i < steps.length - 1 ? <span className="nxm-step__arrow"><i data-lucide="arrow-right"></i></span> : null}
                </div>
                <h3 className="nxm-step__title">{s.t}</h3>
                <p className="nxm-step__desc">{s.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- REMOTE SUPPORT SHOWCASE ---------------- */
  function RemoteSupport() {
    const bullets = [
      "CRM içinden, talebi açan müşteriye tek tıkla bağlan",
      "İzleme modu veya tam kontrol — duruma göre seç",
      "WebRTC ile uçtan uca, ek yazılım kurulumu olmadan",
      "Bağlantı kaydı talebe ve müşteri geçmişine işlenir",
    ];
    return (
      <section className="nxm-sec nxm-showcase" id="destek">
        <div className="nxm-showcase__glow" aria-hidden="true"></div>
        <div className="nxm-wrap nxm-showcase__grid">
          <div className="nxm-showcase__copy">
            <Badge tone="accent" dot>Farklılaştırıcı</Badge>
            <h2 className="nxm-sec__title">Entegre Uzaktan Destek</h2>
            <p className="nxm-sec__lead">Müşterine destek vermek için ayrı bir araca geçme. Talebi aç, "Bağlan"a bas — müşterinin masaüstüne CRM'in içinden, saniyeler içinde eriş.</p>
            <ul className="nxm-checklist">
              {bullets.map((b) => <li key={b}><i data-lucide="check"></i>{b}</li>)}
            </ul>
            <Button variant="primary" href="#iletisim" rightIcon={<LI n="arrow-right" />}>Canlı görelim</Button>
          </div>
          <div className="nxm-showcase__visual">{NX.__RemoteMock()}</div>
        </div>
      </section>
    );
  }

  /* ---------------- PRODUCT TOUR ---------------- */
  function ProductTour() {
    const shots = [
      { ic: "layout-dashboard", t: "Modüler Panel", d: "Sürükle-bırak widget'lar" },
      { ic: "file-text", t: "Teklif Hazırlama", d: "Çok sayfalı kurumsal PDF" },
      { ic: "git-branch", t: "Satış Pipeline'ı", d: "Aşama bazlı fırsat takibi" },
    ];
    return (
      <section className="nxm-sec nx-light" id="tur">
        <div className="nxm-wrap">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">Ürün turu</span>
            <h2 className="nxm-sec__title">Panelden teklife, gerçek ekranlar</h2>
          </div>
          <div className="nxm-tour">
            {shots.map((s, i) =>
              <figure className="nxm-shot" key={s.t}>
                <div className="nxm-shot__frame">{NX.__TourMock(i)}</div>
                <figcaption><span className="nxm-shot__ic"><i data-lucide={s.ic}></i></span><div><b>{s.t}</b><em>{s.d}</em></div></figcaption>
              </figure>
            )}
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- WHY NEXUS ---------------- */
  function Why() {
    const reasons = [
      { ic: "languages", t: "Tam Türkçe arayüz", d: "Ekibinin günlük kullandığı dilde, yerel iş akışlarına uygun." },
      { ic: "smartphone", t: "Mobil uyumlu", d: "Masaüstü, tablet ve telefonda aynı akıcı deneyim." },
      { ic: "sparkles", t: "AI destekli", d: "Veriye dayalı haftalık öneriler ve otomasyon." },
      { ic: "rocket", t: "Hızlı kurulum", d: "Günler değil saatler içinde devreye al, hemen kullanmaya başla." },
    ];
    return (
      <section className="nxm-sec nxm-sec--dark" id="neden">
        <div className="nxm-wrap">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">Neden {B.name}?</span>
            <h2 className="nxm-sec__title">Kurumsal güç, KOBİ pratikliği</h2>
          </div>
          <div className="nxm-why">
            {reasons.map((r) =>
              <div className="nxm-why__item" key={r.t}>
                <span className="nxm-why__ic"><i data-lucide={r.ic}></i></span>
                <h3>{r.t}</h3>
                <p>{r.d}</p>
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- FAQ ---------------- */
  function FAQ() {
    const qa = [
      [B.name + " kimler için uygun?", "Teknoloji/bilişim çözümleri satan KOBİ'ler, sistem entegratörleri, donanım & yazılım satıp teknik destek veren firmalar, bayiler, distribütörler ve danışmanlık şirketleri için tasarlandı."],
      ["Uzaktan destek nasıl çalışıyor?", "WebRTC tabanlı uzak masaüstü teknolojisi ile, destek talebini açan müşteriye CRM'in içinden tek tıkla bağlanırsın. İzleme ve tam kontrol modları arasında geçiş yapabilirsin."],
      ["Tekliflerimde maliyet ve marjım müşteriye gider mi?", "Hayır. Maliyet ve kâr marjı bilgileri tamamen dahili kalır; müşteriye giden PDF teklifte yalnızca kapak mektubu, ürün tablosu, satış koşulları ve imza alanı bulunur."],
      ["Takvim ve e-posta entegrasyonu var mı?", "Evet. Microsoft 365 (Outlook) ve Google Calendar ile çift yönlü senkronizasyon desteklenir."],
      ["Kurulum ne kadar sürer?", B.name + " hızlı kuruluma göre tasarlandı; çoğu ekip aynı gün içinde kullanmaya başlar. Kurumsal ihtiyaçlar için TrendTech ekibi geçişte yanında olur."],
    ];
    const [open, setOpen] = React.useState(0);
    return (
      <section className="nxm-sec nx-light" id="sss">
        <div className="nxm-wrap nxm-wrap--narrow">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">SSS</span>
            <h2 className="nxm-sec__title">Sık sorulan sorular</h2>
          </div>
          <div className="nxm-faq">
            {qa.map(([q, a], i) =>
              <div className={"nxm-faq__item" + (open === i ? " is-open" : "")} key={q}>
                <button className="nxm-faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{q}</span>
                  <svg className="nxm-faq__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                </button>
                <div className="nxm-faq__a"><p>{a}</p></div>
              </div>
            )}
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- CONTACT CTA ---------------- */
  function Contact() {
    return (
      <section className="nxm-sec nxm-contact" id="iletisim">
        <div className="nxm-contact__glow" aria-hidden="true"></div>
        <div className="nxm-wrap nxm-contact__inner">
          <span className="nx-eyebrow">İletişim</span>
          <h2 className="nxm-contact__title">Projeniz için birlikte çalışalım.</h2>
          <p className="nxm-contact__lead">Kurumsal ihtiyaçlarınıza özel çözümler ve proje talepleriniz için TrendTech ekibimize ulaşabilirsiniz. Size en uygun kurulumu birlikte planlayalım.</p>
          <div className="nxm-contact__actions">
            <Button variant="primary" size="lg" href="mailto:merhaba@trendtech.com.tr" leftIcon={<LI n="mail" />}>İletişime Geç</Button>
            <Button variant="secondary" size="lg" href="#tur" leftIcon={<LI n="play" />}>Ürün turunu izle</Button>
          </div>
          <div className="nxm-contact__meta">
            <span><i data-lucide="mail"></i> merhaba@trendtech.com.tr</span>
            <span><i data-lucide="phone"></i> +90 212 000 00 00</span>
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- FOOTER ---------------- */
  function Footer() {
    const cols = [
      ["Ürün", [["Özellikler", "#ozellikler"], ["Nasıl çalışır", "#nasil"], ["Uzaktan destek", "#destek"], ["Ürün turu", "#tur"]]],
      ["Kurumsal", [["Neden " + B.name + "?", "#neden"], ["SSS", "#sss"], ["İletişim", "#iletisim"]]],
      ["Çözümler", [["KOBİ & bayiler", "#"], ["Sistem entegratörleri", "#"], ["SaaS firmaları", "#"]]],
    ];
    return (
      <footer className="nxm-footer">
        <div className="nxm-wrap nxm-footer__grid">
          <div className="nxm-footer__brand">
            <a href="#top" className="nxm-brandlockup">
              <img src="./assets/logo-mark-dark.png" alt="" className="nxm-brandlockup__mark" />
              <span className="nxm-brandlockup__name">{B.name}</span>
            </a>
            <p>Satıştan desteğe tüm müşteri sürecini tek platformda yöneten, yapay zekâ destekli iş yönetim aracı.</p>
            <div className="nxm-footer__contact">
              <span><i data-lucide="mail"></i> merhaba@trendtech.com.tr</span>
              <span><i data-lucide="map-pin"></i> İstanbul, Türkiye</span>
            </div>
          </div>
          {cols.map(([h, ls]) =>
            <div className="nxm-footer__col" key={h}>
              <span className="nxm-footer__h">{h}</span>
              {ls.map(([l, u]) => <a key={l} href={u}>{l}</a>)}
            </div>
          )}
        </div>
        <div className="nxm-wrap nxm-footer__bottom">
          <span>© 2026 {B.partner}. Tüm hakları saklıdır.</span>
          <div className="nxm-footer__legal"><a href="#">Gizlilik</a><a href="#">Koşullar</a></div>
        </div>
      </footer>
    );
  }

  NX.__sections = Object.assign({}, NX.__sections, {
    Features, HowItWorks, RemoteSupport, ProductTour, Why, FAQ, Contact, Footer,
  });
})();