/* Marka CRM — "Markanıza özel CRM" konumlandırması, referans şeridi ve
   müşteri yorumları. Mevcut tasarım sistemini (NX) kullanır. */
(function () {
  const NX = window.NexusCRMDesignSystem_b16bff;
  const B  = window.BRAND || { name: 'Marka CRM', email: 'marka@trendtech.com.tr' };
  const { Button, Badge, Card } = NX;
  const LI = ({ n }) => <i data-lucide={n}></i>;

  /* ---------------- MARKANIZA ÖZEL CRM (beyaz etiket) ---------------- */

  const WL_ITEMS = [
    {
      ic: 'palette',
      t: 'Sizin logonuz, sizin renkleriniz',
      d: 'Panel, giriş ekranı ve tüm belgeler kendi kurumsal kimliğinizle çıkar. Logo, renk paleti ve tipografi tek yapılandırma dosyasından yönetilir — ekiplerinize “bizim yazılımımız” diye tanıtırsınız.',
    },
    {
      ic: 'file-badge',
      t: 'Belgeleriniz sizin adınıza',
      d: 'Teklif, proforma ve fatura PDF’leri sizin ünvanınız, vergi bilgileriniz ve kaşenizle üretilir. Müşterinize giden hiçbir evrakta üçüncü bir marka görünmez.',
    },
    {
      ic: 'globe-2',
      t: 'Kendi alan adınızda',
      d: 'CRM kendi alan adınızdan yayınlanır (ör. crm.firmaniz.com). Kullanıcılarınız tanıdık bir adrese girer; SSL ve yönlendirmeler bizim tarafımızda kurulur.',
    },
    {
      ic: 'blocks',
      t: 'Modülleri işinize göre kuruyoruz',
      d: 'Sektörünüzde karşılığı olmayan modülleri kaldırır, ihtiyacınız olanı ekleriz. Turizm acentesi, bayi ağı, depo sayımı — her biri aynı çekirdek üzerinde ayrı ürün olarak kurgulandı.',
    },
    {
      ic: 'sliders-horizontal',
      t: 'Alanlar ve süreçler size uyar',
      d: 'Fırsat aşamaları, talep kategorileri, SLA hedefleri ve form alanları sizin iş akışınıza göre tanımlanır. Yazılıma uymazsınız; yazılım size uyar.',
    },
    {
      ic: 'database',
      t: 'Veriniz ayrı, size ait',
      d: 'Her kurulum kendi veritabanında çalışır. Verinizi istediğiniz an dışa aktarabilir, kendi altyapınıza taşıyabilirsiniz — kilitlenme yok.',
    },
  ];

  function WhiteLabel() {
    return (
      <section className="nxm-sec nxm-sec--dark" id="markaniza-ozel">
        <div className="nxm-wrap">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">Özelleştirme</span>
            <h2 className="nxm-sec__title">Markanıza özel CRM</h2>
            <p className="nxm-sec__lead">
              {B.name} hazır bir kutu ürün değil, üzerine sizin markanızı kurduğumuz bir çekirdek.
              Logonuzdan alan adınıza, modüllerinizden belgelerinize kadar her katman
              sizin kurumsal kimliğinizle çıkar.
            </p>
          </div>

          <div className="nxm-wl__grid">
            {WL_ITEMS.map((f) => (
              <Card key={f.t} interactive className="nxm-wl__card">
                <span className="nxm-feat__icon"><LI n={f.ic} /></span>
                <h3 className="nxm-feat__title">{f.t}</h3>
                <p className="nxm-feat__desc">{f.d}</p>
              </Card>
            ))}
          </div>

          <div className="nxm-wl__cta">
            <div className="nxm-wl__ctaText">
              <Badge tone="accent">Anahtar teslim</Badge>
              <h3>Kendi markanızla başlayın</h3>
              <p>
                Kurumsal kimliğinizi paylaşın; panelinizi, belgelerinizi ve alan adınızı
                sizin adınıza kuralım. Kurulum ve eğitim dahil.
              </p>
            </div>
            <Button
              variant="primary"
              href="#iletisim"
              data-nxa="wl-teklif"
              rightIcon={<LI n="arrow-right" />}
            >
              Markanıza özel teklif alın
            </Button>
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- REFERANSLAR (kayan logo şeridi) ---------------- */

  function RefLogo({ item }) {
    if (item.src) {
      return (
        <span className="nxm-marquee__item" title={item.name}>
          <img src={item.src} alt={item.name} loading="lazy" />
        </span>
      );
    }
    // Logo dosyası yoksa firma adı rozet olarak çizilir — şerit boş kalmaz.
    return (
      <span className="nxm-marquee__item nxm-marquee__item--text" title={item.name}>
        {item.name}
      </span>
    );
  }

  function References() {
    const items = window.BRAND_REFERENCES || [];
    // Liste boşsa bölümü hiç basma — yarım görünen bir şerit kötü durur.
    if (!items.length) return null;

    // Şerit geniş ekranda boşluk bırakmasın diye liste önce yeterli sayıya
    // çoğaltılır, sonra kesintisiz akış için iki kez basılır (CSS %50 kaydırır).
    let base = items;
    while (base.length < 8) base = base.concat(items);
    const loop = base.concat(base);

    return (
      <section className="nxm-sec nx-light nxm-refs" id="referanslar">
        <div className="nxm-wrap">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">Referanslar</span>
            <h2 className="nxm-sec__title">Bizimle çalışan markalar</h2>
            <p className="nxm-sec__lead">
              Farklı sektörlerden ekipler, kendi süreçlerine göre kurgulanmış
              {' '}{B.name} kurulumlarını her gün kullanıyor.
            </p>
          </div>
        </div>

        {/* Şerit tam genişlikte akar; kenarlarda yumuşak geçiş maskesi var. */}
        <div className="nxm-marquee" role="list" aria-label="Referans firmalar">
          <div className="nxm-marquee__track">
            {loop.map((item, i) => (
              <RefLogo key={`${item.name}-${i}`} item={item} />
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------------- MÜŞTERİ YORUMLARI ---------------- */

  function Stars({ n }) {
    if (!n) return null;
    return (
      <span className="nxm-rev__stars" aria-label={`${n} / 5`}>
        {[1, 2, 3, 4, 5].map((i) => (
          <i key={i} data-lucide="star" className={i <= n ? 'is-on' : ''}></i>
        ))}
      </span>
    );
  }

  function Reviews() {
    const [items, setItems]   = React.useState([]);
    const [avg, setAvg]       = React.useState(null);
    const [form, setForm]     = React.useState({ name: '', company: '', comment: '', rating: 5, website: '' });
    const [state, setState]   = React.useState('idle'); // idle | sending | sent | error
    const [open, setOpen]     = React.useState(false);

    React.useEffect(() => {
      fetch('/api/reviews')
        .then((r) => (r.ok ? r.json() : null))
        .then((d) => { if (d) { setItems(d.items || []); setAvg(d.avgRating); } })
        .catch(() => {});   // uç nokta hazır değilse bölüm sessizce boş kalır
    }, []);

    const submit = async (e) => {
      e.preventDefault();
      if (state === 'sending') return;
      setState('sending');
      try {
        const res = await fetch('/api/reviews', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(form),
        });
        if (!res.ok) throw new Error('gonderilemedi');
        setState('sent');
        setForm({ name: '', company: '', comment: '', rating: 5, website: '' });
      } catch {
        setState('error');
      }
    };

    const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

    return (
      <section className="nxm-sec nxm-sec--dark" id="yorumlar">
        <div className="nxm-wrap">
          <div className="nxm-sec__head">
            <span className="nx-eyebrow">Görüşler</span>
            <h2 className="nxm-sec__title">Kullananlar ne diyor?</h2>
            <p className="nxm-sec__lead">
              {avg
                ? `Kullanıcılarımızın ortalama değerlendirmesi ${avg} / 5.`
                : 'Deneyiminizi paylaşın — yorumunuz incelendikten sonra burada yayınlanır.'}
            </p>
          </div>

          {items.length > 0 && (
            <div className="nxm-rev__grid">
              {items.slice(0, 6).map((r) => (
                <Card key={r.id} className="nxm-rev__card">
                  <Stars n={r.rating} />
                  <p className="nxm-rev__text">“{r.comment}”</p>
                  <div className="nxm-rev__who">
                    <strong>{r.name}</strong>
                    {r.company ? <span>{r.company}</span> : null}
                  </div>
                </Card>
              ))}
            </div>
          )}

          <div className="nxm-rev__formWrap">
            {!open ? (
              <Button variant="secondary" onClick={() => setOpen(true)} data-nxa="yorum-ac" leftIcon={<LI n="message-square" />}>
                Deneyiminizi paylaşın
              </Button>
            ) : state === 'sent' ? (
              <p className="nxm-rev__ok">
                <LI n="check-circle-2" /> Teşekkürler! Yorumunuz incelendikten sonra yayınlanacak.
              </p>
            ) : (
              <form className="nxm-rev__form" onSubmit={submit}>
                <div className="nxm-rev__row">
                  <input required placeholder="Adınız" value={form.name} onChange={set('name')} maxLength={60} />
                  <input placeholder="Firmanız (opsiyonel)" value={form.company} onChange={set('company')} maxLength={80} />
                  <select value={form.rating} onChange={set('rating')} aria-label="Puan">
                    {[5, 4, 3, 2, 1].map((n) => <option key={n} value={n}>{n} yıldız</option>)}
                  </select>
                </div>
                <textarea
                  required rows={4} maxLength={1000}
                  placeholder="Deneyiminizi birkaç cümleyle anlatın…"
                  value={form.comment} onChange={set('comment')}
                />
                {/* Bal küpü — görünmez alan; yalnızca botlar doldurur. */}
                <input
                  className="nxm-rev__hp" tabIndex={-1} autoComplete="off"
                  value={form.website} onChange={set('website')} aria-hidden="true"
                />
                <div className="nxm-rev__actions">
                  <Button variant="primary" type="submit" data-nxa="yorum-gonder">
                    {state === 'sending' ? 'Gönderiliyor…' : 'Gönder'}
                  </Button>
                  <button type="button" className="nxm-rev__cancel" onClick={() => setOpen(false)}>Vazgeç</button>
                </div>
                {state === 'error' && (
                  <p className="nxm-rev__err">Gönderilemedi. Lütfen daha sonra tekrar deneyin.</p>
                )}
              </form>
            )}
          </div>
        </div>
      </section>
    );
  }

  NX.__sections = Object.assign({}, NX.__sections, { WhiteLabel, References, Reviews });
})();