// Product Detail — Sayfa 3 // Featured product: Dell Latitude 5550. Aynı header + breadcrumb + 2 sütun + sekmeler. // ─────────── data: featured product ─────────── const PRODUCT_DETAIL = { id: 'p01', name: 'Dell Latitude 5550 Business Laptop', brand: 'Dell', model: 'Latitude 5550', code: 'DLT-5550-I7-16-512', group: 'eu-hw', sub: 'Laptop', groupName: 'Donanım & Aksesuar', imgKind: 'laptop', imgFolder: 'DellLatitude5550BusinessLaptop', priceNet: 45000, priceUnit: null, rating: 4.6, ratingCount: 38, stock: 'in-stock', // in-stock | low | order stockMsg: 'Stokta mevcut', leadTime: '2-3 iş günü içinde teslim', galleryLabels: ['ÖNDEN', 'KAPALI', 'KLAVYE DET.', 'PORTLAR'], shortDesc: '15.6" FHD ekran · 13. nesil Intel Core i7 · 16 GB RAM · 512 GB NVMe SSD · 3 yıl on-site garanti.', approvalDays: 3, approvalSteps: ['Yönetici onayı', 'Departman bütçesi', 'IT teknik onay', 'Satınalma'], specs: [ { group: 'İşlemci & Bellek', rows: [ ['İşlemci', 'Intel® Core™ i7-1355U (12 MB önbellek, 10 çekirdek)'], ['Bellek', '16 GB DDR5 5200 MHz (2× 8 GB)'], ['Depolama', '512 GB M.2 2280 PCIe NVMe SSD, Class 35'], ['Grafik', 'Intel® Iris® Xe Graphics (entegre)'], ]}, { group: 'Ekran & Tasarım', rows: [ ['Ekran', '15.6" FHD (1920×1080) IPS, parlama önleyici, 250 nits'], ['Webcam', 'HD RGB + IR (Windows Hello uyumlu)'], ['Klavye', 'Aydınlatmalı, TR Q düzeni, sayısal tuş takımı'], ['Ağırlık', '1.62 kg'], ]}, { group: 'Bağlantı & Güç', rows: [ ['Portlar', '2× Thunderbolt 4 / USB-C, 2× USB-A, HDMI 2.0, RJ-45, 3.5 mm'], ['Kablosuz', 'Wi-Fi 6E AX211, Bluetooth 5.3'], ['Pil', '54 Whr, ExpressCharge™ (1 saatte %80)'], ['Adaptör', '65W USB-C Type-C Adapter'], ]}, { group: 'İşletim Sistemi & Garanti', rows: [ ['İşletim Sistemi', 'Windows 11 Pro 64-bit (TR)'], ['Garanti', '3 yıl ProSupport — sonraki iş günü on-site servis'], ['Güvenlik', 'TPM 2.0, parmak izi okuyucu, Kensington kilit yuvası'], ]}, ], longDesc: [ 'Latitude 5550, hibrit çalışma düzenine geçiş yapmış profesyoneller için tasarlanmış 15.6" iş laptopudur. ' + '13. nesil Intel Core i7 işlemci ve 16 GB DDR5 bellek ile aynı anda çoklu uygulama, video konferans ve büyük tablolar üzerinde rahatça çalışırsınız.', 'ExpressCharge teknolojisi sayesinde pil 1 saatte %80 doluluğa ulaşır; tüm gün toplantı zincirlerinde kablodan bağımsız çalışabilirsiniz. ' + 'Standart 65W USB-C adaptör hem laptop hem cep telefonu için kullanılabilir.', 'Dell ProSupport ile sonraki iş günü on-site servis dahildir — bir sorun yaşandığında IT ekibi cihaz değişimi için ek prosedür yürütmek zorunda kalmaz.', ], useCases: [ { title: 'Hibrit ofis profesyoneli', body: 'Hafta içi 2-3 gün ofiste, kalan günler evden çalışan, gün boyunca Office uygulamaları, Teams ve tarayıcı ile yoğun çalışan kullanıcılar.' }, { title: 'Saha & ziyaret odaklı satış', body: 'Müşteri ziyaretlerinde sunum yapan, fiyat tabloları üzerinde gerçek zamanlı düzenleme yapan, mobil bağlantı kullanması gereken takımlar.' }, { title: 'Finans / İK analistleri', body: 'Büyük Excel modelleriyle, Power BI raporlarıyla, dijital imza ve PDF onay süreçleriyle çalışan back-office ekipler.' }, { title: 'Yeni başlayan çalışan standart kit', body: 'IT ekibinin yeni işe başlayanlara varsayılan olarak tahsis ettiği, 3 yıllık çevrim için ideal standart bilgisayar.' }, ], }; // ─────────── Dinamik ürün detayı ─────────── // Katalogdaki herhangi bir ürünü, detay sayfasının beklediği zengin formata çevirir. // Bilinen "p01" (Dell Latitude) için elle yazılmış PRODUCT_DETAIL kullanılır. // Diğer ürünler için imgKind'a göre uygun (sahte ama tutarlı) teknik özellikler üretilir. function specsForKind(kind, p) { const tpl = { laptop: [ { group: 'İşlemci & Bellek', rows: [ ['İşlemci', 'Intel® Core™ i7 (12. nesil veya üzeri)'], ['Bellek', '16 GB DDR5 5200 MHz'], ['Depolama', '512 GB M.2 NVMe SSD'], ['Grafik', 'Entegre grafik birimi'], ]}, { group: 'Ekran & Tasarım', rows: [ ['Ekran', '14"-15.6" FHD (1920×1080) IPS, parlama önleyici'], ['Klavye', 'Aydınlatmalı, TR Q düzeni'], ['Webcam', 'HD RGB + IR (Windows Hello uyumlu)'], ['Ağırlık', '~1.6 kg'], ]}, { group: 'Bağlantı & Güç', rows: [ ['Portlar', '2× USB-C/Thunderbolt, 2× USB-A, HDMI, 3.5 mm'], ['Kablosuz', 'Wi-Fi 6E, Bluetooth 5.3'], ['Pil', '~54 Whr, hızlı şarj destekli'], ['Adaptör', '65W USB-C Type-C Adapter'], ]}, { group: 'İşletim Sistemi & Garanti', rows: [ ['İşletim Sistemi', 'Windows 11 Pro 64-bit (TR)'], ['Garanti', '3 yıl üretici garantisi — sonraki iş günü servis'], ['Güvenlik', 'TPM 2.0, parmak izi okuyucu'], ]}, ], desktop: [ { group: 'İşlemci & Bellek', rows: [ ['İşlemci', 'Intel® Core™ i5 (14. nesil)'], ['Bellek', '16 GB DDR5'], ['Depolama', '512 GB NVMe SSD'], ['Form Faktör', 'USFF / Mini iş istasyonu'], ]}, { group: 'Bağlantı', rows: [ ['Portlar', '4× USB-A, 2× USB-C, HDMI, DisplayPort, RJ-45'], ['Ağ', 'Gigabit Ethernet, Wi-Fi 6'], ['Ses', '3.5 mm combo, entegre hoparlör'], ]}, { group: 'Güç & Garanti', rows: [ ['Güç', '90W harici adaptör'], ['Garanti', '3 yıl on-site servis'], ['İşletim Sistemi', 'Windows 11 Pro 64-bit (TR)'], ]}, ], monitor: [ { group: 'Panel', rows: [ ['Ekran Boyutu', '27"'], ['Çözünürlük', '3840×2160 (4K UHD)'], ['Panel', 'IPS, %99 sRGB, 400 nits'], ['Tazeleme', '60 Hz'], ]}, { group: 'Bağlantı', rows: [ ['USB-C', 'Güç dağıtımı 90W, video + veri tek kabloda'], ['Diğer', 'HDMI 2.0, DisplayPort 1.4, 3× USB-A'], ['Özellik', 'KVM, Picture-by-Picture'], ]}, { group: 'Tasarım & Garanti', rows: [ ['Ayak', 'Yükseklik, eğim, dönme ayarlı; VESA 100×100'], ['Garanti', '3 yıl Premium Panel Exchange'], ]}, ], keyboard: [ { group: 'Genel', rows: [ ['Bağlantı', 'Bluetooth + 2.4 GHz USB alıcı + USB-C kablolu'], ['Düzen', 'TR Q tam boy (sayısal tuş takımı dahil)'], ['Aydınlatma', 'Beyaz arkadan aydınlatma, otomatik sensör'], ]}, { group: 'Kullanım', rows: [ ['Pil', 'Şarjla 10 güne kadar (aydınlatma ile)'], ['Çoklu cihaz', '3 cihaz arasında tek tuşla geçiş'], ['Garanti', '2 yıl üretici garantisi'], ]}, ], mouse: [ { group: 'Sensör & Tasarım', rows: [ ['DPI', '200 – 8000 DPI'], ['Tıklama', 'Sessiz tıklama mekanizması'], ['Tasarım', 'Sağ el ergonomik'], ]}, { group: 'Bağlantı & Pil', rows: [ ['Bağlantı', 'Bluetooth + 2.4 GHz USB alıcı'], ['Şarj', 'USB-C, 1 dakika hızlı şarj = 3 saat kullanım'], ['Pil ömrü', 'Tek şarjla 70 güne kadar'], ['Garanti', '2 yıl üretici garantisi'], ]}, ], headset: [ { group: 'Ses', rows: [ ['Sürücü', '40 mm dinamik'], ['Mikrofon', 'Gürültü engelleyici çift mikrofon, Teams sertifikalı'], ['Aktif Gürültü', 'ANC + şeffaf mod'], ]}, { group: 'Bağlantı & Pil', rows: [ ['Bağlantı', 'Bluetooth 5.2 + USB-A donanım kilidi'], ['Pil', '37 saat müzik / 24 saat konuşma'], ['Şarj', 'USB-C, 15 dk = 8 saat kullanım'], ['Garanti', '2 yıl üretici garantisi'], ]}, ], webcam: [ { group: 'Görüntü', rows: [ ['Çözünürlük', '1080p / 60 fps veya 4K / 30 fps'], ['Lens', 'Cam lens, otomatik odak'], ['Görüş Açısı', '78° / 90° (ayarlanabilir)'], ]}, { group: 'Diğer', rows: [ ['Mikrofon', 'Çift gürültü engelleyici'], ['Bağlantı', 'USB-C, tak-çalıştır'], ['Güvenlik', 'Fiziksel objektif kapağı'], ['Garanti', '2 yıl üretici garantisi'], ]}, ], dock: [ { group: 'Bağlantı', rows: [ ['Host', 'Thunderbolt 4 / USB-C (90W güç dağıtımı)'], ['Video Çıkışı', '2× DisplayPort, 1× HDMI, 1× USB-C (DP Alt)'], ['USB', '4× USB-A, 1× USB-C (data)'], ['Ağ', '2.5 GbE Ethernet'], ]}, { group: 'Diğer', rows: [ ['Ses', '3.5 mm combo'], ['Adaptör', '180W harici'], ['Garanti', '3 yıl üretici garantisi'], ]}, ], speaker: [ { group: 'Ses', rows: [ ['Sürücü', '360° geniş bant'], ['Mikrofon', '4 yönlü mikrofon dizisi, gürültü engelleme'], ['Yankı önleme', 'Donanımsal akustik yankı engelleyici'], ]}, { group: 'Bağlantı & Pil', rows: [ ['Bağlantı', 'Bluetooth + USB-C + dongle'], ['Pil', 'Tek şarjla 12 saat'], ['Garanti', '2 yıl üretici garantisi'], ]}, ], 'software-ms': [ { group: 'Abonelik & Lisans', rows: [ ['Tür', 'Yıllık abonelik, kullanıcı bazlı'], ['Aktivasyon', 'Microsoft 365 yönetim portalı üzerinden'], ['Cihaz', 'Kullanıcı başına 5 PC/Mac + 5 mobil + 5 tablet'], ]}, { group: 'Servisler', rows: [ ['E-posta', 'Exchange Online (50 GB / kullanıcı)'], ['Depolama', 'OneDrive 1 TB / kullanıcı'], ['Uygulamalar', 'Word, Excel, PowerPoint, Outlook, Teams'], ['Destek', '7/24 web ve telefon desteği'], ]}, ], 'software-adobe': [ { group: 'Lisans', rows: [ ['Tür', 'Yıllık taahhütlü abonelik'], ['Cihaz', 'Kullanıcı başına 2 cihazda aktif kullanım'], ['Yönetim', 'Adobe Admin Console üzerinden'], ]}, { group: 'Özellikler', rows: [ ['PDF', 'Oluşturma, düzenleme, dönüştürme, e-imza'], ['OCR', 'Tarama → aranabilir/düzenlenebilir PDF'], ['Bulut', 'Adobe Document Cloud entegrasyonu'], ['Destek', 'Üretici destek hattı'], ]}, ], software: [ { group: 'Lisans', rows: [ ['Tür', 'Yıllık abonelik'], ['Aktivasyon', 'Üretici portalı üzerinden'], ['Cihaz', 'Kullanıcı/cihaz bazlı'], ]}, { group: 'Destek', rows: [ ['Güncelleme', 'Sürüm güncellemeleri abonelik süresince ücretsiz'], ['Destek', 'Üretici destek hattı'], ]}, ], 'software-tech': [ { group: 'Lisans', rows: [ ['Tür', 'Çekirdek/soket bazlı yıllık lisans'], ['Aktivasyon', 'Üretici lisans portalı'], ['Kapsam', 'Üretim ortamı kullanımı'], ]}, { group: 'Destek', rows: [ ['Güncelleme', 'Sürüm güncellemeleri dahildir'], ['Destek', 'Üretici 7/24 destek (Production-level)'], ]}, ], server: [ { group: 'Donanım', rows: [ ['Form', '2U rack server'], ['CPU', '2× Intel Xeon Silver / Gold işlemci'], ['Bellek', '128 GB DDR5 ECC (genişletilebilir)'], ['Depolama', 'NVMe + SAS karışık konfigürasyon'], ]}, { group: 'Yönetim & Garanti', rows: [ ['Yönetim', 'iDRAC / iLO uzak yönetim'], ['Güç', 'Çift redundant PSU'], ['Garanti', '5 yıl ProSupport, sonraki iş günü on-site'], ]}, ], service: [ { group: 'Hizmet', rows: [ ['Kapsam', 'Danışmanlık ve uygulama hizmeti'], ['Süre', 'Talep edilen adam-gün üzerinden'], ['Çalışma', 'Uzaktan + ihtiyaç halinde yerinde'], ]}, { group: 'Çıktılar', rows: [ ['Rapor', 'Hizmet sonu özet ve öneri raporu'], ['Bilgi Transferi', 'IT ekibine bilgi transferi seansı dahil'], ]}, ], }; return tpl[kind] || tpl.software; } function detailFromCatalog(cp) { const isSoftware = (cp.group || '').startsWith('sw-') || cp.imgKind.startsWith('software'); const isService = cp.imgKind === 'service'; const groupName = (window.CATALOG_CATEGORIES.find((g) => g.id === cp.group) || {}).name || ''; const code = (cp.brand + '-' + cp.model).toUpperCase().replace(/[^A-Z0-9]+/g, '-').replace(/-+$/g, ''); return { id: cp.id, name: cp.name, brand: cp.brand, model: cp.model, code, group: cp.group, sub: cp.sub, groupName, imgKind: cp.imgKind, imgFolder: cp.imgFolder, imgExt: cp.imgExt, priceNet: cp.priceNet, priceUnit: null, rating: 4.4, ratingCount: Math.max(8, Math.round((cp.requestCount || 20) / 6)), stock: isSoftware || isService ? 'order' : 'in-stock', stockMsg: isSoftware ? 'Lisans temin edilebilir' : isService ? 'Hizmet planlanabilir' : 'Stokta mevcut', leadTime: isSoftware ? '1-2 iş günü içinde lisans atanır' : isService ? 'Plana göre 1-2 hafta içinde başlatılır' : '2-5 iş günü içinde teslim', galleryLabels: isSoftware || isService ? ['LİSANS', 'PORTAL', 'YÖNETİM', 'DESTEK'] : ['ÖNDEN', 'YANDAN', 'DETAY', 'PORTLAR'], shortDesc: cp.desc, approvalDays: isService ? 5 : isSoftware ? 2 : 3, approvalSteps: ['Yönetici onayı', 'Departman bütçesi', 'IT teknik onay', 'Satınalma'], specs: specsForKind(cp.imgKind, cp), longDesc: [ `${cp.brand} ${cp.model}, şirketimizin standart katalogunda yer alan ${cp.sub.toLowerCase()} ürünüdür. ${cp.desc}`, isSoftware ? 'Lisans yönetim portalı üzerinden kullanıcıya atanır; ilgili çalışan giriş yaptığında uygulamalar otomatik olarak aktive olur. IT ekibinin önceden tanımladığı politikalar bu lisansa da otomatik uygulanır.' : isService ? 'Bu hizmet, talep onaylandıktan sonra IT ekibi ve tedarikçinin ortak planlaması ile başlatılır. Çalışma süresince düzenli durum raporları paylaşılır ve hizmet sonunda bilgi transferi yapılır.' : 'Cihaz, IT ekibi tarafından şirket standartlarına göre kurulmuş ve gerekli kurumsal yazılımları yüklenmiş şekilde teslim edilir. Garanti süresince destek IT üzerinden tek noktadan yürütülür.', 'Onay süreci tamamlandığında bu talep otomatik olarak satınalma listesine eklenir; teslim tarihi belirlendiğinde ilgili çalışana bildirim gönderilir.', ], useCases: [ { title: 'Standart kullanım', body: `${cp.sub} ihtiyacı duyan tüm çalışanlar için varsayılan tercih. Şirket içinde en yaygın kullanılan modeldir.` }, { title: 'Hibrit ofis kullanıcısı', body: 'Hafta içi ofis ve evden çalışmayı dönüşümlü yürüten, taşıma ve dayanıklılık önemli olan kullanıcılar için uygundur.' }, { title: 'Yeni başlayan çalışan', body: 'IT ekibinin yeni işe başlayanlara varsayılan olarak tahsis ettiği standart kit kapsamındadır.' }, { title: 'Yenileme döngüsü', body: '3-4 yılını dolduran cihazların yerine geçecek standart modeldir; envanter ve garanti yönetimi kolaylaşır.' }, ], }; } function getProductDetail(productId) { if (productId === 'p01' || !productId) return PRODUCT_DETAIL; const cp = (window.CATALOG_PRODUCTS || []).find((x) => x.id === productId); if (!cp) return null; return detailFromCatalog(cp); } // ─────────── small UI atoms ─────────── function StarRating({ value, count, c }) { const full = Math.floor(value); const half = value - full >= 0.4 && value - full < 0.9; return (
{[0, 1, 2, 3, 4].map((i) => { const filled = i < full; const isHalf = i === full && half; return ( ); })}
{value.toFixed(1)} ({count} değerlendirme)
); } function StockBadge({ stock, msg, leadTime, c }) { const colors = { 'in-stock': { bg: 'rgba(16,185,129,0.10)', dot: c.success, text: c.success }, 'low': { bg: 'rgba(245,158,11,0.10)', dot: '#F59E0B', text: '#B45309' }, 'order': { bg: 'rgba(59,130,246,0.10)', dot: c.primary, text: c.primary }, }; const s = colors[stock]; return (
{msg}
{leadTime}
); } function QuantitySelector({ qty, setQty, c }) { return (
{qty}
); } function qtyBtn(c) { return { appearance: 'none', cursor: 'pointer', width: 40, height: 40, background: 'transparent', color: c.text, border: 'none', fontSize: 18, fontWeight: 500, fontFamily: 'inherit', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', }; } // ─────────── Image gallery ─────────── function ImageGallery({ p, c }) { const [active, setActive] = React.useState(0); const folder = p.imgFolder ? `images/products/${p.imgFolder}` : null; const ext = p.imgExt || 'jpg'; // 1. → ana resim, 2-4. → diğer açılar. Galeri etiketi sayısı kadar resim varsayılıyor. const imgFor = (i) => folder ? `${folder}/${i + 1}.${ext}` : null; return (
{/* Main image */}
{p.galleryLabels[active]}
{/* Thumbnails */}
{p.galleryLabels.map((lbl, i) => ( ))}
); } // ─────────── Tabs ─────────── function DetailTabs({ p, c }) { const [tab, setTab] = React.useState('specs'); const tabs = [ { id: 'specs', label: 'Teknik Özellikler' }, { id: 'desc', label: 'Açıklama' }, { id: 'use', label: 'Kullanım Senaryoları' }, ]; return (
{/* Tab bar */}
{tabs.map((t) => { const active = tab === t.id; return ( ); })}
{/* Content */}
{tab === 'specs' && } {tab === 'desc' && } {tab === 'use' && }
); } function SpecsTable({ specs, c }) { return (
{specs.map((g) => (
{g.group}
{g.rows.map(([k, v], i) => (
{k}
{v}
))}
))}
); } function DescContent({ paras, c }) { return (
{paras.map((p, i) => (

{p}

))}
); } function UseCasesGrid({ items, c }) { return (
{items.map((u, i) => (
{i + 1}
{u.title}

{u.body}

))}
); } // ─────────── Approval info box ─────────── function ApprovalInfoBox({ p, c }) { return (
Onay süreci ortalama {p.approvalDays} iş günü
Bu ürün için tipik onay aşamaları
    {p.approvalSteps.map((step, i) => (
  1. {i + 1} {step}
    2. ))}
); } // ─────────── MAIN PAGE ─────────── function ProductDetailPage({ initialDark = false, productId = 'p01' }) { const [dark, setDark] = React.useState(initialDark); React.useEffect(() => { setDark(initialDark); }, [initialDark]); const [qty, setQty] = React.useState(1); const cart = useCartSnapshot(); const [justAdded, setJustAdded] = React.useState(false); const [savedForLater, setSavedForLater] = React.useState(false); const [search, setSearch] = React.useState(''); const c = catalogTheme(dark); const p = getProductDetail(productId); function goCatalog() { if (typeof window.__navigate === 'function') window.__navigate('catalog'); } if (!p) { return (
setDark((x) => !x)} search={search} setSearch={setSearch} cartCount={0} notifCount={3} />

Ürün bulunamadı

Aradığınız ürün katalogda artık yer almıyor olabilir. Kataloğa dönüp güncel listeyi görüntüleyebilirsiniz.

); } function addToCart() { if (window.__cart && typeof window.__cart.add === 'function') window.__cart.add(p.id, qty); setJustAdded(true); setTimeout(() => setJustAdded(false), 1500); } return (
setDark((x) => !x)} search={search} setSearch={setSearch} cartCount={cart.length} notifCount={3} /> {/* Breadcrumb */}
{ e.preventDefault(); goCatalog(); }} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Tüm Ürünler / { e.preventDefault(); goCatalog(); }} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>{p.groupName} / { e.preventDefault(); goCatalog(); }} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>{p.sub} / {p.brand} {p.model}
{/* Main content */}
{/* LEFT — gallery */}
{/* RIGHT — buy box */}
{p.brand}

{p.name}

Model: {p.model}
{p.code}

{p.shortDesc}

{/* Price block */}
{formatTL(p.priceNet)} KDV hariç
KDV dahil {formatTL(Math.round(p.priceNet * 1.2))} · birim fiyat
{/* Stock */}
{/* Qty + buttons */}
Adet
—
{/* Approval info — sağ köşede sabit kutu */}
{/* Tabs */}
); } Object.assign(window, { PRODUCT_DETAIL, ProductDetailPage, StarRating, StockBadge, QuantitySelector, ImageGallery, DetailTabs, SpecsTable, DescContent, UseCasesGrid, ApprovalInfoBox, });