/* ================= Kurumsal site — sayfalar ================= */
const U  = window.UI;
const {Reveal, PageHead, Accordion, CtaBand, AppWindow, HwImage, openQuote, openProduct, on: secOn} = U;

/* ================================================== ANA SAYFA */
function HomePage({nav}) {
  return (
    <div className="app-fade">
      {secOn('hero') && (
        <section className="chero">
          <div className="aur" style={{width:520,height:520,background:"rgba(147,180,255,.45)",top:-220,right:-120}}></div>
          <div className="aur" style={{width:380,height:380,background:"rgba(165,232,255,.4)",bottom:-200,left:-120}}></div>
          <div className="wrap hgrid">
            <div>
              <span className="eyebrow">{T('hero_eyebrow', 'Yazılım · Donanım · Destek')}</span>
              <h1 className="h1 mt20" dangerouslySetInnerHTML={{__html: T('hero_title', "Kendi ERP'sini yazan firma,<br><span class='grad'>sizin sisteminizi de kurar.</span>")}}/>
              <p className="lead mt20">{T('hero_lead', 'Bayilik yapmıyoruz — kullandığınız yazılımı biz geliştiriyoruz. Barkod, kasa, sunucu ve ağ altyapısını da aynı ekip kuruyor. Bir sorun çıktığında tek bir numarayı arıyorsunuz.')}</p>
              <div className="hcta">
                <button className="btn btn-primary btn-lg" onClick={() => openQuote("")}>{T('hero_cta1', 'Ücretsiz Keşif Talebi')}<I.arrow/></button>
                <button className="btn btn-ghost btn-lg" onClick={() => nav("erp")}><I.play/> {T('hero_cta2', 'Ürünümüzü İnceleyin')}</button>
              </div>
              <div className="hproof">
                {D.STATS.slice(0, 3).map((s, i) => (
                  <div key={i}><div className="n">{s.v}</div><div className="l">{s.label}</div></div>
                ))}
              </div>
            </div>
            <div style={{position:"relative"}}>
              <AppWindow view="panel"/>
              <div className="floatcard" style={{bottom:-26,left:-30}}>
                <span className="ic" style={{background:"var(--ok-soft)",color:"var(--ok)"}}><I.shield/></span>
                <span>
                  <span className="t">{T('hero_badge_t', 'Veriler sizde kalır')}</span>
                  <span className="s">{T('hero_badge_d', 'Yerel sunucu · internet kesilse de çalışır')}</span>
                </span>
              </div>
            </div>
          </div>
        </section>
      )}

      {secOn('trust_bar') && D.CLIENTS.length > 0 && (
        <div className="strip"><div className="wrap">
          <span className="lbl">{T('trust_label', 'Bize güvenenler')}</span>
          <span className="cs">{D.CLIENTS.map((c, i) => <span key={i}>{c}</span>)}</span>
        </div></div>
      )}

      {secOn('home_capabilities') && <CapabilitiesSection nav={nav}/>}
      {secOn('home_product') && <ProductBand nav={nav}/>}
      {secOn('home_hardware') && <HardwareTeaser nav={nav}/>}
      {secOn('home_process') && D.STEPS.length > 0 && <ProcessSection/>}
      {secOn('home_sectors') && D.SECTORS.length > 0 && <SectorsSection/>}
      {secOn('home_projects') && D.PROJECTS.length > 0 && <ProjectsTeaser nav={nav}/>}
      {secOn('stats_band') && <StatsBand/>}
      {secOn('cta_band') && (
        <CtaBand
          title={T('home_cta_title', 'Nereden başlayacağınızı bilmiyorsanız normal.')}
          desc={T('home_cta_desc', 'Yerinize gelelim, mevcut düzeninize bakalım, ne gerektiğini birlikte çıkaralım. Keşif ücretsiz ve hiçbir bağlayıcılığı yok.')}
          label={T('home_cta_btn', 'Keşif Talebi Oluştur')}
          onClick={() => openQuote("")}/>
      )}
    </div>
  );
}

function CapabilitiesSection({nav}) {
  const sw = [
    ["box", T('cap_sw_1_t', 'ALKERSOFT ERP'), T('cap_sw_1_d', 'Stok, satış, cari, teklif ve kasa yönetimi tek programda')],
    ["doc", T('cap_sw_2_t', 'Kuruma özel yazılım'), T('cap_sw_2_d', 'Süreciniz standart değilse sıfırdan geliştiriyoruz')],
    ["globe", T('cap_sw_3_t', 'Web, e-ticaret, B2B panel'), T('cap_sw_3_d', "ERP'nizle canlı stok ve fiyat senkronizasyonu")],
    ["layers", T('cap_sw_4_t', 'Entegrasyon'), T('cap_sw_4_d', 'e-Fatura, pazaryeri, muhasebe programı bağlantıları')],
  ];
  const hw = [
    ["barcode", T('cap_hw_1_t', 'Barkod ve etiket sistemleri'), T('cap_hw_1_d', 'Yazıcı, okuyucu, el terminali, etiket tasarımı')],
    ["wallet", T('cap_hw_2_t', 'Kasa ve POS noktaları'), T('cap_hw_2_d', 'Yazarkasa, barkodlu terazi, para çekmecesi')],
    ["database", T('cap_hw_3_t', 'Sunucu ve yedekleme'), T('cap_hw_3_d', 'Kurulum, otomatik yedek, felaket kurtarma planı')],
    ["shield", T('cap_hw_4_t', 'Ağ ve güvenlik kamerası'), T('cap_hw_4_d', 'Şubeler arası VPN, kayıt cihazı, uzaktan izleme')],
  ];
  const List = ({rows, color, bg}) => (
    <ul>
      {rows.map((r, i) => { const Ico = I[r[0]] || I.box; return (
        <li key={i}>
          <span className="ic" style={{background:bg, color}}><Ico/></span>
          <span><span className="t">{r[1]}</span><span className="d">{r[2]}</span></span>
        </li>
      );})}
    </ul>
  );
  return (
    <section className="sec tint"><div className="wrap">
      <div className="center" style={{marginBottom:48}}>
        <span className="eyebrow">{T('cap_eyebrow', 'Ne yapıyoruz')}</span>
        <h2 className="h2 mt14">{T('cap_title', 'İki tarafı da biz yapıyoruz')}</h2>
        <p className="lead mt14">{T('cap_lead', 'Çoğu firma ya yazılım satar ya donanım kurar. Arada bir sorun çıktığında iki taraf birbirini işaret eder. Biz ikisini de yaptığımız için o tartışma hiç başlamıyor.')}</p>
      </div>
      <Reveal className="split">
        <div>
          <span className="tag2" style={{background:"var(--brand-soft)",color:"var(--brand-ink)"}}><I.doc size={14}/> {T('cap_sw', 'Yazılım')}</span>
          <h3 className="h3 mt20">{T('cap_sw_title', 'Geliştiriyoruz, satmıyoruz')}</h3>
          <p style={{color:"var(--ink-2)",fontSize:14.8,marginTop:12,lineHeight:1.6}}>{T('cap_sw_desc', 'Kendi ERP ürünümüz var. İhtiyacınız standardın dışındaysa kaynak kodu bizde olduğu için değiştirebiliyoruz.')}</p>
          <List rows={sw} color="var(--brand)" bg="var(--brand-soft)"/>
          <a className="tlink mt20" onClick={() => nav("hizmetler")}>{T('cap_sw_link', 'Hizmetleri incele')} <I.arrow/></a>
        </div>
        <div>
          <span className="tag2" style={{background:"var(--ok-soft)",color:"#0f7a4f"}}><I.database size={14}/> {T('cap_hw', 'Donanım')}</span>
          <h3 className="h3 mt20">{T('cap_hw_title', 'Kuruyoruz, bakımını yapıyoruz')}</h3>
          <p style={{color:"var(--ink-2)",fontSize:14.8,marginTop:12,lineHeight:1.6}}>{T('cap_hw_desc', 'Sattığımız her cihazı kendi kurduğumuz sistemlerde kullanıyoruz. Yazılımla uyumlu olduğunu test etmeden katalogda yer vermiyoruz.')}</p>
          <List rows={hw} color="#0f7a4f" bg="var(--ok-soft)"/>
          <a className="tlink mt20" onClick={() => nav("donanim")}>{T('cap_hw_link', 'Katalogu aç')} <I.arrow/></a>
        </div>
      </Reveal>
    </div></section>
  );
}

function ProductBand({nav}) {
  const feats = [
    [T('pb_f1_t', 'Yerel veritabanı'), T('pb_f1_d', 'Bulut zorunluluğu yok')],
    [T('pb_f2_t', 'Barkod & terazi'), T('pb_f2_d', 'Donanımla hazır entegre')],
    [T('pb_f3_t', 'Çok kullanıcılı'), T('pb_f3_d', 'Yetki bazlı erişim')],
    [T('pb_f4_t', 'Kaynak kod bizde'), T('pb_f4_d', 'Özel geliştirme mümkün')],
  ];
  return (
    <section className="sec"><div className="wrap">
      <Reveal className="prod">
        <div className="glow"></div>
        <div className="pgrid">
          <div>
            <span className="pill2"><I.bolt size={13}/> {T('pb_badge', 'Kendi ürünümüz')}</span>
            <h2 className="h2 mt20" style={{color:"#fff"}}>{PHP.productName || "ALKERSOFT ERP"}</h2>
            <p className="lead mt14" style={{color:"#9fb0c9"}}>{T('pb_lead', 'KOBİ ve perakende için geliştirdiğimiz masaüstü ERP. Verileriniz kendi makinenizde durur; internet kesildiğinde kasa çalışmaya devam eder.')}</p>
            <div className="pfeat">
              {feats.map((f, i) => (
                <div key={i}><I.check/><span><span className="t">{f[0]}</span><span className="d">{f[1]}</span></span></div>
              ))}
            </div>
            <div style={{display:"flex",gap:12,marginTop:32,flexWrap:"wrap"}}>
              <button className="btn btn-primary" onClick={() => nav("erp")}>{T('pb_cta1', 'Ürün Sayfası')}<I.arrow/></button>
              <button className="btn btn-line" onClick={() => nav("erp", {scroll:"erp-demo"})}><I.play/> {T('pb_cta2', 'Canlı Demo')}</button>
            </div>
          </div>
          <AppWindow view="stock"/>
        </div>
      </Reveal>
    </div></section>
  );
}

function HardwareTeaser({nav}) {
  const items = D.HARDWARE.slice(0, 4);
  if (!items.length) return null;
  return (
    <section className="sec tint" style={{paddingTop:0}}><div className="wrap">
      <div style={{display:"flex",alignItems:"flex-end",gap:24,flexWrap:"wrap",marginBottom:8}}>
        <div>
          <span className="eyebrow">{T('nav_hardware', 'Donanım')}</span>
          <h2 className="h2 mt14">{T('hw_teaser_title', 'Test ettiğimiz cihazları satıyoruz')}</h2>
          <p className="lead mt14">{T('hw_teaser_lead', 'Katalogtaki her ürün en az bir müşterimizde çalışıyor. Fiyat vermiyoruz çünkü kurulum, kablolama ve eğitim dahil teklif çıkarıyoruz.')}</p>
        </div>
        <button className="btn btn-ghost" style={{marginLeft:"auto"}} onClick={() => nav("donanim")}>{T('hw_all', 'Tüm katalog')} <I.arrow/></button>
      </div>
      <div className="cat">
        {items.map((h, i) => <ProductCard key={i} item={h} delay={i * .05}/>)}
      </div>
    </div></section>
  );
}

function ProductCard({item, delay}) {
  return (
    <Reveal className="pc" delay={delay}>
      <div className="im">
        {item.badge && <span className="cg">{item.badge}</span>}
        <HwImage item={item}/>
      </div>
      <div className="bx">
        <span className="br">{item.brand}</span>
        <h4>{item.name}</h4>
        <p>{item.desc}</p>
        {item.specs.length > 0 && <div className="sp">{item.specs.map((s, i) => <b key={i}>{s}</b>)}</div>}
        <div className="ft">
          <span className="q" role="button" tabIndex={0}
            onClick={() => openQuote(item.name)}
            onKeyDown={(e) => { if (e.key === "Enter") openQuote(item.name); }}>{T('cta_quote', 'Teklif Al')}</span>
          <span className="d" role="button" tabIndex={0}
            onClick={() => openProduct(item)}
            onKeyDown={(e) => { if (e.key === "Enter") openProduct(item); }}>{T('detail', 'Detay')}</span>
        </div>
      </div>
    </Reveal>
  );
}

function ProcessSection() {
  return (
    <section className="sec"><div className="wrap">
      <div className="center">
        <span className="eyebrow">{T('process_eyebrow', 'Nasıl çalışıyoruz')}</span>
        <h2 className="h2 mt14">{T('process_title', 'Sürpriz yok, adım adım')}</h2>
        <p className="lead mt14">{T('process_lead', 'Her projede aynı yolu izliyoruz. Hangi aşamada olduğunuzu ve sıradaki adımı her zaman biliyorsunuz.')}</p>
      </div>
      <div className="steps2">
        {D.STEPS.map((s, i) => (
          <Reveal className="step2" key={i} delay={i * .07}>
            <div className="n">{s.n}</div>
            <h4>{s.title}</h4>
            <p>{s.desc}</p>
          </Reveal>
        ))}
      </div>
    </div></section>
  );
}

function SectorsSection() {
  return (
    <section className="sec tint" style={{paddingTop:0}}><div className="wrap">
      <span className="eyebrow">{T('sectors_eyebrow', 'Sektörler')}</span>
      <h2 className="h2 mt14">{T('sectors_title', 'Kimlerle çalışıyoruz')}</h2>
      <p className="lead mt14">{T('sectors_lead', 'Her sektörün kendi derdi var. Market kasasında hız, hırdavatta ürün çeşidi, atölyede maliyet takibi.')}</p>
      <div className="g3 mt40" style={{gap:14}}>
        {D.SECTORS.map((s, i) => { const Ico = I[s.icon] || I.box; return (
          <Reveal className="secrow" key={i} delay={(i % 3) * .06}>
            <span className="ic"><Ico/></span>
            <span style={{flex:1,minWidth:0}}><h4>{s.title}</h4><p>{s.desc}</p></span>
            <span className="go" onClick={() => openQuote(T('sector_ctx', 'Sektörel çözüm') + " — " + s.title)}
              role="button" tabIndex={0}><I.arrow/></span>
          </Reveal>
        );})}
      </div>
    </div></section>
  );
}

function ProjectsTeaser({nav}) {
  return (
    <section className="sec"><div className="wrap">
      <div style={{display:"flex",alignItems:"flex-end",gap:24,flexWrap:"wrap",marginBottom:34}}>
        <div>
          <span className="eyebrow">{T('projects_eyebrow', 'Projeler')}</span>
          <h2 className="h2 mt14">{T('projects_home_title', 'Son işlerimiz')}</h2>
        </div>
        <button className="btn btn-ghost" style={{marginLeft:"auto"}} onClick={() => nav("projeler")}>{T('projects_all', 'Tümünü gör')} <I.arrow/></button>
      </div>
      {D.PROJECTS.slice(0, 2).map((p, i) => <CaseCard key={i} p={p} delay={i * .08}/>)}
    </div></section>
  );
}

function CaseCard({p, delay}) {
  return (
    <Reveal className="case" delay={delay}>
      <div className="lft">
        <div>
          <div className="who">{p.client}</div>
          <div className="sec2">{p.sector}</div>
        </div>
        {p.tags.length > 0 && <div className="tags">{p.tags.map((t, i) => <b key={i}>{t}</b>)}</div>}
      </div>
      <div className="rgt">
        <h4>{p.title}</h4>
        <p>{p.body}</p>
        {p.metrics.length > 0 && (
          <div className="mets">
            {p.metrics.map((m, i) => (
              <div key={i}>
                <div className={"v" + (m.v === "—" ? " ph" : "")}>{m.v}</div>
                <div className="l">{m.l}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </Reveal>
  );
}

function StatsBand() {
  return (
    <section className="sec dark"><div className="wrap">
      <div style={{maxWidth:640}}>
        <span className="eyebrow">{T('stats_eyebrow', 'Rakamlarla')}</span>
        <h2 className="h2 mt14">{T('stats_title', 'Biriken tecrübe')}</h2>
        <p className="lead mt14">{T('stats_lead', 'Kurulumdan sonra ortalama kaç yıl birlikte çalıştığımız, bizim için en önemli rakam.')}</p>
      </div>
      <div className="statgrid">
        {D.STATS.map((s, i) => (
          <Reveal key={i} delay={i * .06}><div className="v">{s.v}</div><div className="l">{s.label}</div></Reveal>
        ))}
      </div>
    </div></section>
  );
}

/* ================================================== HİZMETLER */
function ServicesPage({nav}) {
  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('nav_services', 'Hizmetler')}]}
        title={T('services_title', 'Yazılımdan altyapıya, tek ekip')}
        lead={T('services_lead', 'Analiz, geliştirme, kurulum ve sonrasındaki destek — hepsi bizde. Taşeron kullanmıyoruz, projeyi kim başlattıysa o bitiriyor.')}/>
      <section className="sec"><div className="wrap">
        <div className="g3">
          {D.SERVICES.map((s, i) => { const Ico = I[s.icon] || I.doc; return (
            <Reveal className="ccard" key={i} delay={(i % 3) * .06}>
              <span className="ic"><Ico/></span>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              {s.points.length > 0 && (
                <ul>{s.points.map((p, j) => <li key={j}><I.check/>{p}</li>)}</ul>
              )}
              <a className="tlink" onClick={() => nav("hizmet", {s: s.key})}>{T('detail_more', 'Detaylı bilgi')} <I.arrow/></a>
            </Reveal>
          );})}
        </div>
      </div></section>

      <section className="sec dark" style={{paddingTop:70,paddingBottom:70}}><div className="wrap">
        <div className="g2" style={{gap:48,alignItems:"center"}}>
          <div>
            <span className="eyebrow">{T('svc_how_eyebrow', 'Çalışma biçimimiz')}</span>
            <h2 className="h2 mt14">{T('svc_how_title', 'Sabit fiyat, yazılı kapsam')}</h2>
            <p className="lead mt14">{T('svc_how_lead', 'Proje başlamadan önce ne yapılacağı, ne kadar süreceği ve ne kadara mal olacağı yazılı olarak elinizde olur. Kapsam değişirse yeniden konuşuruz — ama sürpriz fatura göndermeyiz.')}</p>
            <button className="btn btn-primary mt28" onClick={() => openQuote(T('svc_ctx', 'Proje görüşmesi'))}>{T('svc_how_cta', 'Proje Görüşmesi Talep Et')}<I.arrow/></button>
          </div>
          <div style={{display:"grid",gap:14}}>
            {[
              [T('svc_g1_t', 'Yazılı kapsam dokümanı'), T('svc_g1_d', 'Neyin dahil, neyin dahil olmadığı madde madde')],
              [T('svc_g2_t', 'Aşamalı teslim'), T('svc_g2_d', 'Her aşamada çalışan bir şey görüyorsunuz')],
              [T('svc_g3_t', 'Kaynak kodu sizin'), T('svc_g3_d', 'Özel geliştirmelerde kod teslim ediliyor')],
            ].map((g, i) => (
              <div key={i} style={{display:"flex",gap:14,background:"rgba(255,255,255,.05)",border:"1px solid rgba(255,255,255,.1)",borderRadius:14,padding:20}}>
                <I.check size={20} style={{color:"#43d693",marginTop:2,flex:"0 0 auto"}}/>
                <span>
                  <span style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:15.5,color:"#fff",display:"block"}}>{g[0]}</span>
                  <span style={{display:"block",fontSize:13.5,color:"#8fa2bf",marginTop:4}}>{g[1]}</span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div></section>
    </div>
  );
}

/* ================================================== HİZMET DETAYI */
function ServiceDetailPage({nav, serviceKey}) {
  const s = D.SERVICES.find(x => x.key === serviceKey) || D.SERVICES[0];
  if (!s) return <NotFoundPage nav={nav}/>;
  return (
    <div className="app-fade">
      <PageHead nav={nav}
        crumb={[{t: T('nav_services', 'Hizmetler'), k: "hizmetler"}, {t: s.title}]}
        title={s.title} lead={s.desc}/>
      <section className="sec"><div className="wrap">
        <div className="sdgrid">
          <div className="sdblock">
            {s.body && <><h3>{T('sd_what', 'Ne yapıyoruz')}</h3><p>{s.body}</p></>}
            {s.scope.length > 0 && (
              <>
                <h3>{T('sd_scope', 'Kapsam')}</h3>
                <div className="sdlist">
                  {s.scope.map((x, i) => (
                    <Reveal key={i} delay={i * .05}>
                      <div style={{display:"flex",gap:13}}>
                        <I.check/>
                        <span><span className="t">{x.t}</span><span className="d">{x.d}</span></span>
                      </div>
                    </Reveal>
                  ))}
                </div>
              </>
            )}
            {s.process && <><h3>{T('sd_process', 'Nasıl ilerliyoruz')}</h3><p>{s.process}</p></>}
          </div>
          <aside className="sdside">
            <h4>{T('sd_fit', 'Bu hizmet size uygun mu?')}</h4>
            <p>{T('sd_fit_d', 'Kısa bir görüşmeyle netleştirelim. Uygun değilse açıkça söylüyoruz — gereksiz iş almıyoruz.')}</p>
            <div className="mini">
              {[T('sd_m1', 'Ücretsiz ön görüşme'), T('sd_m2', 'Yazılı kapsam ve sabit fiyat'), T('sd_m3', 'Aşamalı teslim, ara kontroller')].map((m, i) => (
                <div key={i}><I.check/><span>{m}</span></div>
              ))}
            </div>
            <button className="btn btn-primary" style={{width:"100%"}} onClick={() => openQuote(s.title)}>{T('cta_quote', 'Teklif Al')}</button>
            {PHP.sitePhone && (
              <a style={{display:"block",textAlign:"center",marginTop:14,fontSize:13.5,color:"#8fa2bf"}}
                href={"tel:" + PHP.sitePhone.replace(/\s/g, "")}>{T('sd_or_call', 'veya arayın')}: {PHP.sitePhone}</a>
            )}
          </aside>
        </div>
      </div></section>

      {D.SERVICES.length > 1 && (
        <section className="sec tint" style={{paddingTop:0}}><div className="wrap">
          <h2 className="h2" style={{marginBottom:28}}>{T('sd_other', 'Diğer hizmetlerimiz')}</h2>
          <div className="g3">
            {D.SERVICES.filter(x => x.key !== s.key).slice(0, 3).map((o, i) => { const Ico = I[o.icon] || I.doc; return (
              <Reveal className="ccard" key={i} delay={i * .06}>
                <span className="ic"><Ico/></span>
                <h3>{o.title}</h3>
                <p>{o.desc}</p>
                <a className="tlink" onClick={() => nav("hizmet", {s: o.key})}>{T('detail_more', 'Detaylı bilgi')} <I.arrow/></a>
              </Reveal>
            );})}
          </div>
        </div></section>
      )}

      <CtaBand
        title={T('sd_cta_t', 'Aklınızdaki işi konuşalım')}
        desc={T('sd_cta_d', 'Kapsamı netleştirelim, gerçekçi bir süre ve bütçe çıkaralım. Keşif görüşmesi ücretsiz.')}
        label={T('sd_cta_b', 'Görüşme Talep Et')}
        onClick={() => openQuote(s.title)}/>
    </div>
  );
}

/* ================================================== DONANIM */
function HardwarePage({nav, initialCat}) {
  const [cat, setCat] = useState(initialCat || "all");
  useEffect(() => { if (initialCat) setCat(initialCat); }, [initialCat]);
  const items = cat === "all" ? D.HARDWARE : D.HARDWARE.filter(h => h.category === cat);
  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('nav_hardware', 'Donanım')}]}
        title={T('hw_title', 'Kataloğumuzdaki her cihaz sahada çalışıyor')}
        lead={T('hw_lead', 'Kutudan çıkarıp size vermiyoruz. Kuruyor, yazılıma bağlıyor, personele gösteriyoruz. Fiyatları kurulum ve eğitimle birlikte teklif olarak veriyoruz.')}/>

      <section className="sec tint" style={{paddingTop:36}}><div className="wrap">
        <div className="chips" style={{marginTop:0}}>
          <button className={"chip" + (cat === "all" ? " on" : "")} onClick={() => setCat("all")}>{T('hw_all_cat', 'Tümü')}</button>
          {D.HW_CATS.map((c, i) => (
            <button className={"chip" + (cat === c.key ? " on" : "")} key={i} onClick={() => setCat(c.key)}>{c.label}</button>
          ))}
        </div>

        {items.length > 0 ? (
          <div className="cat">
            {items.map((h, i) => <ProductCard key={h.name + i} item={h} delay={(i % 4) * .05}/>)}
          </div>
        ) : (
          <p className="lead" style={{marginTop:40}}>{T('hw_empty', 'Bu kategoride şu an ürün yok.')}</p>
        )}

        <Reveal style={{marginTop:44,background:"#fff",border:"1px solid var(--line)",borderRadius:"var(--r-xl)",padding:38,display:"flex",gap:32,alignItems:"center",flexWrap:"wrap",boxShadow:"var(--shadow-sm)"}}>
          <span style={{width:56,height:56,borderRadius:16,background:"var(--brand-soft)",color:"var(--brand)",display:"grid",placeItems:"center",flex:"0 0 auto"}}><I.search size={26}/></span>
          <div style={{flex:1,minWidth:260}}>
            <h3 className="h3">{T('hw_notfound_t', 'Aradığınız burada yok mu?')}</h3>
            <p style={{color:"var(--ink-2)",marginTop:9,fontSize:15}}>{T('hw_notfound_d', 'Katalog sadece en çok kurduğumuz cihazları içeriyor. İhtiyacınızı yazın; uygun marka, model ve fiyat seçeneklerini biz çıkaralım.')}</p>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => openQuote(T('hw_need_ctx', 'Donanım ihtiyaç formu'))}>{T('hw_notfound_b', 'İhtiyaç Formu')}<I.arrow/></button>
        </Reveal>
      </div></section>
    </div>
  );
}

/* ================================================== PROJELER */
function ProjectsPage({nav}) {
  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('nav_projects', 'Projeler')}]}
        title={T('projects_title', 'Ne yaptığımızı anlatmak yerine gösterelim')}
        lead={T('projects_lead', 'Tamamladığımız işlerden birkaçı. Hangi problemle geldiler, ne kurduk, sonuç ne oldu.')}/>
      <section className="sec"><div className="wrap">
        {D.PROJECTS.map((p, i) => <CaseCard key={i} p={p} delay={i * .06}/>)}
      </div></section>

      {D.TESTIMONIALS.length > 0 && (
        <section className="sec tint" style={{paddingTop:0}}><div className="wrap">
          <div className="center" style={{marginBottom:40}}>
            <span className="eyebrow">{T('ref_eyebrow', 'Referanslar')}</span>
            <h2 className="h2 mt14">{T('ref_title', 'Müşterilerimiz ne diyor')}</h2>
          </div>
          <div className="g3">
            {D.TESTIMONIALS.map((t, i) => {
              // Henüz gerçek yorum girilmemiş kayıtlar sönük ve kesikli çerçeveli gösterilir
              const placeholder = !t.quote || /buraya gelecek|eklenecek|to be added|placeholder/i.test(t.quote);
              return (
                <Reveal className="ccard tsm" key={i} delay={(i % 3) * .06}>
                  <div className="stars" style={{display:"flex",gap:3,marginBottom:14,color: placeholder ? "#d9dfe8" : "#e0962b"}}>
                    {[0,1,2,3,4].map(j => <I.star key={j}/>)}
                  </div>
                  {placeholder
                    ? <p className="tq">{t.quote || T('ref_placeholder', 'Müşteri yorumu eklenecek.')}</p>
                    : <p style={{fontSize:15.5,color:"var(--ink)",lineHeight:1.65}}>“{t.quote}”</p>}
                  <div style={{display:"flex",alignItems:"center",gap:12,marginTop:22,paddingTop:18,borderTop:"1px solid var(--line-2)"}}>
                    <span style={{width:42,height:42,borderRadius:12,background:"var(--grad-brand)",color:"#fff",display:"grid",placeItems:"center",fontFamily:"var(--font-display)",fontWeight:800,fontSize:14}}>{t.initials}</span>
                    <span>
                      <span style={{display:"block",fontFamily:"var(--font-display)",fontWeight:700,fontSize:14.5}}>{t.name}</span>
                      <span style={{display:"block",fontSize:13,color:"var(--muted)"}}>{t.role}</span>
                    </span>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div></section>
      )}

      <CtaBand
        title={T('projects_cta_t', 'Sıradaki proje sizinki olsun')}
        desc={T('projects_cta_d', 'Benzer bir ihtiyacınız varsa konuşalım. Referans müşterilerimizle görüşmenizi de memnuniyetle ayarlarız.')}
        label={T('projects_cta_b', 'Görüşme Talep Et')}
        onClick={() => openQuote(T('projects_ctx', 'Proje görüşmesi'))}/>
    </div>
  );
}

/* ================================================== HAKKIMIZDA */
function AboutPage({nav}) {
  const values = [
    ["doc", T('about_v1_t', 'Ne yapacağımızı yazarız'), T('about_v1_d', 'Sözlü mutabakat yok. Kapsam, süre ve fiyat teklifte madde madde yazılı olur; sonradan ek kalem çıkmaz.')],
    ["headset", T('about_v2_t', 'Telefonu açarız'), T('about_v2_d', 'Destek talebi bilet sistemine düşüp kaybolmaz. Sistemi kuran kişiye doğrudan ulaşırsınız.')],
    ["lock", T('about_v3_t', 'Verinizi rehin almayız'), T('about_v3_d', 'Bir gün ayrılmak isterseniz veritabanınızı ve kayıtlarınızı eksiksiz teslim ederiz. Kilitli format kullanmıyoruz.')],
  ];
  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('nav_about', 'Hakkımızda')}]}
        title={T('about_title', 'Küçük ekip, uzun ilişkiler')}
        lead={T('about_lead', 'Ankara merkezliyiz. Büyümek yerine kurduğumuz sistemlerin arkasında durmayı tercih ettik.')}/>
      <section className="sec"><div className="wrap">
        <div className="g2" style={{gap:56,alignItems:"start"}}>
          <div>
            <span className="eyebrow">{T('about_story', 'Hikâye')}</span>
            <h2 className="h2 mt14">{T('about_story_t', 'Nasıl başladı')}</h2>
            {[T('about_p1', 'Bir hırdavatçının stok programı çalışmadığı için başladı her şey. Piyasadaki programlar ya çok pahalıydı ya da o işletmenin çalışma şeklini hiç dikkate almıyordu. Kendi programımızı yazdık.'),
              T('about_p2', 'Sonra fark ettik ki yazılım tek başına yetmiyor — barkod okuyucu çalışmıyorsa, sunucu her hafta kapanıyorsa program ne kadar iyi olursa olsun işe yaramıyor. Donanım tarafını da öğrenmek zorunda kaldık.'),
              T('about_p3', 'Bugün ikisini birlikte yapıyoruz. Müşterilerimizin çoğu ilk kurulumdan beri bizimle.')
            ].map((p, i) => (
              <p key={i} style={{color:"var(--ink-2)",fontSize:16,lineHeight:1.75,marginTop:i === 0 ? 18 : 16}}>{p}</p>
            ))}
            <div className="g2" style={{gap:16,marginTop:36}}>
              {[[T('about_b1_t', 'Taşeron kullanmıyoruz'), T('about_b1_d', 'Projeyi kim başlattıysa o bitiriyor')],
                [T('about_b2_t', 'Satıp kaçmıyoruz'), T('about_b2_d', 'Gelirin önemli kısmı bakım anlaşmalarından')]].map((b, i) => (
                <div key={i} style={{background:"var(--bg)",border:"1px solid var(--line)",borderRadius:"var(--r)",padding:22}}>
                  <I.check size={20} style={{color:"var(--ok)"}}/>
                  <div style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:15.5,marginTop:11}}>{b[0]}</div>
                  <div style={{fontSize:13.5,color:"var(--muted)",marginTop:5,lineHeight:1.5}}>{b[1]}</div>
                </div>
              ))}
            </div>
          </div>
          <Reveal style={{background:"linear-gradient(140deg,var(--navy),var(--navy-3))",borderRadius:"var(--r-xl)",padding:38,color:"#fff"}}>
            <span className="eyebrow" style={{color:"#7fa9ff"}}>{T('about_numbers', 'Rakamlar')}</span>
            <div style={{display:"grid",gap:26,marginTop:26}}>
              {D.STATS.map((s, i) => (
                <div key={i} style={i > 0 ? {borderTop:"1px solid rgba(255,255,255,.12)",paddingTop:22} : undefined}>
                  <div style={{fontFamily:"var(--font-display)",fontWeight:800,fontSize:38,letterSpacing:"-.04em",lineHeight:1}}>{s.v}</div>
                  <div style={{fontSize:13.5,color:"#8fa2bf",marginTop:6}}>{s.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div></section>

      <section className="sec tint" style={{paddingTop:0}}><div className="wrap">
        <div className="center" style={{marginBottom:44}}>
          <span className="eyebrow">{T('about_values', 'Değerlerimiz')}</span>
          <h2 className="h2 mt14">{T('about_values_t', 'Üzerinde anlaştığımız üç şey')}</h2>
        </div>
        <div className="g3">
          {values.map((v, i) => { const Ico = I[v[0]]; return (
            <Reveal className="ccard" key={i} delay={i * .06}>
              <span className="ic"><Ico/></span>
              <h3>{v[1]}</h3>
              <p>{v[2]}</p>
            </Reveal>
          );})}
        </div>
      </div></section>
    </div>
  );
}

/* ================================================== DESTEK */
function SupportPage({nav}) {
  const faq = [
    {q: T('sup_f1_q', 'Program açılmıyor / "veritabanına bağlanılamadı" hatası'),
     a: T('sup_f1_a', 'Genellikle sunucu bilgisayarının kapalı olmasından kaynaklanır. Önce sunucunun açık olduğundan ve ağ kablosunun takılı olduğundan emin olun. Sunucu açıksa programı kapatıp yeniden açın. Sorun sürerse bizi arayın.')},
    {q: T('sup_f2_q', 'Barkod okuyucu okumuyor'),
     a: T('sup_f2_a', 'Okuyucuyu bir metin belgesine okutmayı deneyin. Metin belgesine yazıyorsa sorun programda değil ayarlardadır, bizi arayın. Hiçbir şey yazmıyorsa USB kablosunu farklı bir porta takıp tekrar deneyin.')},
    {q: T('sup_f3_q', 'Fiş yazıcı çıktı vermiyor'),
     a: T('sup_f3_a', 'Kağıt rulosunun doğru yönde takıldığından ve kapağın tam kapandığından emin olun. Yazıcının üzerindeki hata ışığı yanıyorsa cihazı 10 saniye kapatıp açın.')},
    {q: T('sup_f4_q', 'Yedek alındı mı nasıl anlarım?'),
     a: T('sup_f4_a', 'Programda Ayarlar → Yedekleme ekranında son yedek tarihi görünür. Tarih güncel değilse otomatik yedekleme durmuş olabilir; bu durumda hemen bizi arayın.')},
  ];
  const sla = [
    [T('sla1_l', 'İlk yanıt'), T('sla1_v', '30 dk'), T('sla1_d', 'Mesai saatleri içinde telefon veya e-posta')],
    [T('sla2_l', 'Uzaktan müdahale'), T('sla2_v', '4 saat'), T('sla2_d', 'Satışı durduran arızalarda öncelikli')],
    [T('sla3_l', 'Yerinde servis'), T('sla3_v', 'Aynı gün'), T('sla3_d', 'Ankara içi · taşra için ertesi iş günü')],
    [T('sla4_l', 'Mesai dışı'), T('sla4_v', '7/24'), T('sla4_d', 'Kritik arıza hattı, kurumsal anlaşmalarda')],
  ];
  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('nav_support', 'Teknik Destek')}]}
        title={T('sup_title', 'Sistemi kuran ekip, destek de veriyor')}
        lead={T('sup_lead', 'Destek talebiniz bir bilet sistemine düşüp kaybolmuyor. Kurulumunuzu yapan kişiye doğrudan ulaşıyorsunuz.')}/>
      <section className="sec"><div className="wrap">
        <div className="spg">
          <Reveal className="spc">
            <span className="ic" style={{background:"var(--brand-soft)",color:"var(--brand)"}}><I.phone/></span>
            <h3>{T('sup_c1_t', 'Telefonla destek')}</h3>
            <p>{T('sup_c1_d', 'Mesai saatleri içinde doğrudan teknik ekibe bağlanırsınız.')}</p>
            {PHP.sitePhone && <span className="big">{PHP.sitePhone}</span>}
            <p style={{fontSize:13,marginTop:8}}>{PHP.siteHours}</p>
          </Reveal>
          <Reveal className="spc" delay={.06}>
            <span className="ic" style={{background:"var(--ok-soft)",color:"var(--ok)"}}><I.headset/></span>
            <h3>{T('sup_c2_t', 'Uzaktan bağlantı')}</h3>
            <p>{T('sup_c2_d', 'Destek aracını çalıştırın, ekranınıza bağlanıp sorunu birlikte çözelim.')}</p>
            {PHP.supportTool ? (
              /* Araç panelden yüklenmişse doğrudan indir */
              <a className="btn btn-primary" style={{marginTop:16}} href={PHP.supportTool.url}
                 download={PHP.supportTool.external ? undefined : true}
                 rel={PHP.supportTool.external ? "noopener" : undefined}>
                {T('sup_c2_b', 'Destek Aracını İndir')}
                {PHP.supportTool.size ? <span style={{opacity:.75,fontWeight:600}}>({PHP.supportTool.size})</span> : null}
              </a>
            ) : (
              <button className="btn btn-primary" style={{marginTop:16}} onClick={() => nav("erp", {scroll:"erp-indir"})}>
                {T('sup_c2_b', 'Destek Aracını İndir')}
              </button>
            )}
          </Reveal>
          <Reveal className="spc" delay={.12}>
            <span className="ic" style={{background:"var(--warn-soft)",color:"var(--warn)"}}><I.doc/></span>
            <h3>{T('sup_c3_t', 'Talep oluştur')}</h3>
            <p>{T('sup_c3_d', 'Acil olmayan istekler ve geliştirme talepleri için form doldurun.')}</p>
            <button className="btn btn-ghost" style={{marginTop:16}} onClick={() => openQuote(T('sup_ctx', 'Teknik destek talebi'))}>{T('sup_c3_b', 'Destek Talebi Aç')}</button>
          </Reveal>
        </div>

        <div className="mt56">
          <span className="eyebrow">{T('sla_eyebrow', 'Hizmet seviyesi')}</span>
          <h2 className="h2 mt14">{T('sla_title', 'Lisanslı müşterilerimiz için')}</h2>
          <p className="lead mt14">{T('sla_lead', 'Yazılı olarak taahhüt ettiğimiz süreler. Destek, yıllık ALKERSOFT lisansına dahildir — ayrıca bakım ücreti ödemezsiniz.')}</p>
          <div className="sla">
            {sla.map((s, i) => (
              <div key={i}><div className="l">{s[0]}</div><div className="v">{s[1]}</div><div className="d">{s[2]}</div></div>
            ))}
          </div>
        </div>

        <div className="mt56">
          <span className="eyebrow">{T('sup_faq_eyebrow', 'Sık karşılaşılan')}</span>
          <h2 className="h2 mt14">{T('sup_faq_title', 'Aramadan önce deneyebilecekleriniz')}</h2>
          <div style={{maxWidth:860,marginTop:28}}><Accordion items={faq}/></div>
        </div>
      </div></section>

      <CtaBand dark
        title={T('sup_cta_t', 'ALKERSOFT kullanmıyor musunuz?')}
        desc={T('sup_cta_d', 'Sadece donanımınız ve ağ altyapınız için de yıllık bakım anlaşması yapıyoruz. Periyodik kontrol, öncelikli müdahale ve yedekleme takibi dahil.')}
        label={T('sup_cta_b', 'Bakım Teklifi Al')}
        onClick={() => openQuote(T('sup_maint_ctx', 'Donanım bakım anlaşması'))}/>
    </div>
  );
}

/* ================================================== S.S.S. */
function FaqPage({nav}) {
  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('nav_faq', 'S.S.S.')}]}
        title={T('faq_title', 'Sıkça sorulan sorular')}
        lead={T('faq_lead', 'En çok merak edilenleri derledik. Aradığınızı bulamazsanız bize yazın.')}/>
      <section className="sec"><div className="wrap" style={{maxWidth:860}}>
        {D.FAQ.length > 0
          ? <Accordion items={D.FAQ}/>
          : <p className="lead">{T('faq_empty', 'Henüz soru eklenmemiş.')}</p>}
        <div style={{textAlign:"center",marginTop:34}}>
          <span style={{color:"var(--ink-2)",fontSize:15}}>{T('faq_more', 'Başka sorunuz mu var?')} </span>
          <a className="tlink" onClick={() => nav("contact")}>{T('faq_more_b', 'Bize ulaşın')} <I.arrow/></a>
        </div>
      </div></section>
    </div>
  );
}

/* ================================================== İLETİŞİM */
function ContactPage({nav}) {
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState({});
  const [form, setForm] = useState({name:"", company:"", phone:"", email:"", subject:"", sector:"", message:"", consent:false});
  const set = (k) => (e) => setForm(f => ({...f, [k]: k === "consent" ? e.target.checked : e.target.value}));

  const subjects = [
    PHP.productName || "ALKERSOFT ERP",
    T('contact_s2', 'Donanım / Kasa sistemi'),
    T('contact_s3', 'Web / Mobil yazılım'),
    T('contact_s4', 'Bakım & destek anlaşması'),
    T('contact_s5', 'Diğer'),
  ];

  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (form.name.trim().length < 2) er.name = T('err_name', 'Lütfen adınızı yazın.');
    const digits = form.phone.replace(/\D/g, "");
    if (digits.length < 10 || digits.length > 15) er.phone = T('err_phone', 'Geçerli bir telefon numarası girin.');
    if (form.email.trim() !== "" && !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(form.email.trim())) er.email = T('err_email', 'Geçerli bir e-posta adresi girin.');
    if (!form.consent) er.consent = T('err_consent', 'Devam etmek için onay vermelisiniz.');
    setErr(er);
    if (Object.keys(er).length) { U.toast(T('err_check_fields', 'Lütfen işaretli alanları kontrol edin')); return; }

    setSending(true);
    try {
      const res = await fetch("forms/submit-quote.php", {
        method: "POST", headers: {"Content-Type": "application/json"},
        body: JSON.stringify({...form, subject: form.subject || subjects[0], lang: PHP.lang, csrf: PHP.csrf || ""}),
      });
      const data = await res.json();
      if (data.success) setSent(true);
      else { if (data.errors) setErr(data.errors); U.toast(data.error || T('err_generic', 'Bir hata oluştu.')); }
    } catch (_) {
      U.toast(T('err_network', 'Bağlantı hatası. Lütfen telefonla arayın.'));
    }
    setSending(false);
  };

  const info = [
    ["phone", T('form_phone', 'Telefon'), PHP.sitePhone, PHP.siteHours],
    ["mail", T('form_email', 'E-posta'), PHP.siteEmail, T('contact_mail_note', 'Genellikle aynı gün yanıt')],
    ["pin", T('contact_address', 'Adres'), PHP.siteAddress, T('contact_addr_note', 'Randevu ile ziyaret')],
  ].filter(x => x[2]);

  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('nav_contact', 'İletişim')}]}
        title={T('contact_title', 'Konuşalım')}
        lead={T('contact_lead', 'Formu doldurun ya da doğrudan arayın. Keşif görüşmesi ücretsiz ve hiçbir bağlayıcılığı yok.')}/>
      <section className="sec"><div className="wrap">
        <div style={{display:"grid",gridTemplateColumns:"1.35fr .85fr",gap:36,alignItems:"start"}} className="g2x">
          <div className="cform">
            {sent ? (
              <div className="okbox" style={{padding:"30px 0"}}>
                <span className="ic"><I.check/></span>
                <h3>{T('quote_ok_title', 'Talebiniz bize ulaştı')}</h3>
                <p>{T('quote_ok_desc', 'En kısa sürede, en geç bir iş günü içinde size dönüş yapacağız.')}</p>
                <button className="btn btn-ghost mt28" onClick={() => {setSent(false); setForm({name:"",company:"",phone:"",email:"",subject:"",sector:"",message:"",consent:false});}}>
                  {T('contact_again', 'Yeni Talep Oluştur')}
                </button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <h3 className="h3">{T('contact_form_t', 'Teklif / Keşif Talebi')}</h3>
                <p style={{color:"var(--muted)",fontSize:14.5,marginTop:8,marginBottom:28}}>{T('contact_form_d', 'Aynı gün içinde dönüş yapıyoruz.')}</p>
                <div className="fr">
                  <div><label className="fl">{T('form_name', 'Ad Soyad')} *</label>
                    <input className={"fi" + (err.name ? " err" : "")} value={form.name} onChange={set("name")} placeholder={T('form_name_ph', 'Adınız ve soyadınız')}/>
                    {err.name && <span className="emsg">{err.name}</span>}</div>
                  <div><label className="fl">{T('form_company', 'Firma Adı')}</label>
                    <input className="fi" value={form.company} onChange={set("company")} placeholder={T('form_company_ph', 'Firma unvanınız')}/></div>
                </div>
                <div className="fr">
                  <div><label className="fl">{T('form_phone', 'Telefon')} *</label>
                    <input className={"fi" + (err.phone ? " err" : "")} inputMode="tel" value={form.phone} onChange={set("phone")} placeholder="0___ ___ __ __"/>
                    {err.phone && <span className="emsg">{err.phone}</span>}</div>
                  <div><label className="fl">{T('form_email', 'E-posta')}</label>
                    <input type="email" className={"fi" + (err.email ? " err" : "")} value={form.email} onChange={set("email")} placeholder="ornek@firma.com"/>
                    {err.email && <span className="emsg">{err.email}</span>}</div>
                </div>
                <div className="fr">
                  <div><label className="fl">{T('contact_subject', 'İlgilendiğiniz konu')}</label>
                    <select className="fi" value={form.subject} onChange={set("subject")}>
                      {subjects.map((s, i) => <option key={i} value={s}>{s}</option>)}
                    </select></div>
                  <div><label className="fl">{T('contact_sector', 'Sektörünüz')}</label>
                    <input className="fi" value={form.sector} onChange={set("sector")} placeholder={T('contact_sector_ph', 'Market, hırdavat, atölye…')}/></div>
                </div>
                <div style={{marginBottom:20}}><label className="fl">{T('form_message', 'Mesajınız')}</label>
                  <textarea className="fi" value={form.message} onChange={set("message")} placeholder={T('contact_msg_ph', 'İhtiyacınızı kısaca anlatın; kaç kasa, kaç kullanıcı, mevcut sisteminiz var mı?')}/></div>
                <label style={{display:"flex",gap:10,alignItems:"flex-start",fontSize:13,color:"var(--muted)",marginBottom:10,lineHeight:1.5}}>
                  <input type="checkbox" style={{marginTop:3}} checked={form.consent} onChange={set("consent")}/>
                  <span>{T('form_kvkk', 'Kişisel verilerimin KVKK Aydınlatma Metni kapsamında işlenmesine onay veriyorum.')} *</span>
                </label>
                {err.consent && <span className="emsg" style={{marginBottom:14}}>{err.consent}</span>}
                <button className="btn btn-primary btn-lg" style={{width:"100%",marginTop:12,opacity:sending?.7:1}} type="submit" disabled={sending}>
                  {sending ? T('form_sending', 'Gönderiliyor…') : T('form_submit', 'Talebi Gönder')}<I.arrow/>
                </button>
              </form>
            )}
          </div>

          <div className="cinfo">
            {info.map((c, i) => { const Ico = I[c[0]]; return (
              <div className="cib" key={i}>
                <span className="ic"><Ico/></span>
                <span><span className="t">{c[1]}</span><span className="d">{c[2]}</span><span className="s">{c[3]}</span></span>
              </div>
            );})}
            <div style={{background:"linear-gradient(140deg,var(--navy),var(--navy-3))",borderRadius:"var(--r-lg)",padding:26,color:"#fff",marginTop:6}}>
              <I.clock size={22} style={{color:"#43d693"}}/>
              <div style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:16,marginTop:12}}>{T('contact_urgent_t', 'Acil arıza mı var?')}</div>
              <p style={{fontSize:13.5,color:"#8fa2bf",marginTop:7,lineHeight:1.55}}>{T('contact_urgent_d', 'Bakım anlaşmalı müşterilerimiz mesai dışında da destek hattımıza ulaşabilir.')}</p>
              <button className="btn btn-line btn-sm" style={{marginTop:16}} onClick={() => nav("destek")}>{T('contact_urgent_b', 'Destek Sayfası')}<I.arrow/></button>
            </div>
          </div>
        </div>
      </div></section>
    </div>
  );
}

/* ================================================== YASAL */
function LegalPage({nav, initialDoc}) {
  const [doc, setDoc] = useState(initialDoc || "gizlilik");
  useEffect(() => { if (initialDoc) setDoc(initialDoc); }, [initialDoc]);

  const docs = {
    gizlilik: {
      t: T('legal_privacy', 'Gizlilik Politikası'),
      upd: T('legal_updated', 'Son güncelleme') + ": " + T('legal_date', '1 Ocak 2026'),
      body: [
        ["h", T('lp_h1', 'Hangi verileri topluyoruz')],
        ["p", T('lp_p1', 'Web sitemizdeki teklif, demo ve destek formlarını doldurduğunuzda ad-soyad, firma adı, telefon, e-posta ve mesajınızda paylaştığınız bilgileri topluyoruz. Bu bilgileri yalnızca talebinize dönüş yapmak için kullanıyoruz.')],
        ["h", T('lp_h2', 'Verilerinizi kimlerle paylaşıyoruz')],
        ["p", T('lp_p2', 'Form verilerinizi üçüncü taraflarla paylaşmıyor, satmıyor ve pazarlama listelerine eklemiyoruz. Yalnızca yasal zorunluluk hâlinde yetkili mercilerle paylaşılabilir.')],
        ["h", T('lp_h3', 'Müşteri verileri')],
        ["p", T('lp_p3', 'Kurulumunu yaptığımız sistemlerdeki ticari verileriniz kendi sunucunuzda barınır; bizim erişimimiz yoktur. Uzaktan destek sırasında sisteminize yalnızca sizin onayınızla ve siz ekranı görürken bağlanırız.')],
        ["box", T('lp_box', 'Bir gün bizimle çalışmayı bırakmak isterseniz veritabanınızı ve tüm kayıtlarınızı açık formatta eksiksiz teslim ederiz. Verinizi rehin almayız.')],
        ["h", T('lp_h4', 'Saklama süresi')],
        ["p", T('lp_p4', 'Form üzerinden gelen talepler, talebin sonuçlanmasından itibaren en fazla 2 yıl saklanır. Silinmesini istediğinizde talebiniz üzerine kayıtlarınız silinir.')],
      ],
    },
    kvkk: {
      t: T('legal_kvkk', 'KVKK Aydınlatma Metni'),
      upd: T('lk_upd', '6698 sayılı Kişisel Verilerin Korunması Kanunu kapsamında'),
      body: [
        ["h", T('lk_h1', 'Veri sorumlusu')],
        ["p", (PHP.companyName || 'Alker Yazılım') + ", " + T('lk_p1', '6698 sayılı Kanun kapsamında veri sorumlusu sıfatıyla hareket etmektedir.') + " " + (PHP.siteEmail || '') + (PHP.sitePhone ? " · " + PHP.sitePhone : "")],
        ["h", T('lk_h2', 'İşlenen veriler ve amaçları')],
        ["ul", [T('lk_l1', 'Kimlik ve iletişim bilgileri — talebinize dönüş yapmak, teklif hazırlamak'),
                T('lk_l2', 'Firma bilgileri — sözleşme ve faturalandırma süreçleri'),
                T('lk_l3', 'Destek kayıtları — hizmet kalitesinin takibi ve arıza geçmişi')]],
        ["h", T('lk_h3', 'Hukuki sebep')],
        ["p", T('lk_p3', 'Verileriniz, sözleşmenin kurulması ve ifası için gerekli olması ile meşru menfaat hukuki sebeplerine dayanarak, açık rızanız alınarak işlenmektedir.')],
        ["h", T('lk_h4', 'Haklarınız')],
        ["ul", [T('lk_r1', 'Kişisel verilerinizin işlenip işlenmediğini öğrenme'),
                T('lk_r2', 'İşlenmişse buna ilişkin bilgi talep etme'),
                T('lk_r3', 'Eksik veya yanlış işlenmiş olması hâlinde düzeltilmesini isteme'),
                T('lk_r4', 'Silinmesini veya yok edilmesini isteme'),
                T('lk_r5', 'İşlemenin kanuna aykırı olması hâlinde zararın giderilmesini talep etme')]],
        ["p", T('lk_p5', 'Bu haklarınızı kullanmak için yukarıdaki iletişim kanallarından bize ulaşabilirsiniz. Talebiniz en geç 30 gün içinde sonuçlandırılır.')],
      ],
    },
    sartlar: {
      t: T('legal_terms', 'Kullanım Şartları'),
      upd: T('legal_updated', 'Son güncelleme') + ": " + T('legal_date', '1 Ocak 2026'),
      body: [
        ["h", T('lt_h1', 'Site içeriği')],
        ["p", T('lt_p1', 'Bu sitedeki metin, görsel ve yazılım içeriklerinin tüm hakları firmamıza aittir. İzinsiz kopyalanamaz ve ticari amaçla kullanılamaz.')],
        ["h", T('lt_h2', 'Fiyat ve teknik bilgiler')],
        ["p", T('lt_p2', 'Sitede yer alan fiyatlar ve teknik özellikler bilgilendirme amaçlıdır, bağlayıcı teklif niteliği taşımaz. Bağlayıcı fiyat yalnızca tarafımızca hazırlanan yazılı teklifle verilir. Fiyatlar KDV hariç olup önceden haber verilmeksizin değiştirilebilir.')],
        ["h", T('lt_h3', 'Donanım ürünleri')],
        ["p", T('lt_p3', 'Katalogda yer alan donanım ürünlerinin garanti şartları üretici firmaya aittir. Tarafımızca yapılan kurulum ve işçilik 1 yıl garantilidir.')],
        ["h", T('lt_h4', 'Yazılım lisansı')],
        ["p", T('lt_p4', 'ALKERSOFT ERP lisansı yıllıktır ve satın alınan kullanıcı sayısı ile sınırlıdır. Lisans süresi boyunca güncelleme ve teknik destek bedele dahildir. Lisansın devri yazılı onayımıza tabidir; programın tersine mühendisliğe konu edilmesi ve çoğaltılması yasaktır.')],
      ],
    },
    cerez: {
      t: T('legal_cookie', 'Çerez Politikası'),
      upd: T('legal_updated', 'Son güncelleme') + ": " + T('legal_date', '1 Ocak 2026'),
      body: [
        ["h", T('lc_h1', 'Çerez nedir')],
        ["p", T('lc_p1', 'Çerezler, siteyi ziyaret ettiğinizde tarayıcınıza kaydedilen küçük metin dosyalarıdır. Sitenin düzgün çalışmasını sağlar ve ziyaretçi davranışını anlamamıza yardımcı olur.')],
        ["h", T('lc_h2', 'Kullandığımız çerezler')],
        ["ul", [T('lc_l1', 'Zorunlu çerezler — dil tercihi, form güvenliği (CSRF) ve oturum yönetimi. Bunlar kapatılamaz.'),
                T('lc_l2', 'Analitik çerezler — hangi sayfaların ziyaret edildiğini anonim olarak ölçer. Reddedebilirsiniz.')]],
        ["p", T('lc_p2', 'Pazarlama ve reklam takip çerezi kullanmıyoruz. Verilerinizi reklam ağlarıyla paylaşmıyoruz.')],
        ["h", T('lc_h3', 'Çerezleri nasıl yönetirsiniz')],
        ["p", T('lc_p3', 'Tarayıcınızın ayarlarından çerezleri silebilir veya engelleyebilirsiniz. Zorunlu çerezleri engellerseniz formlar çalışmayabilir.')],
      ],
    },
  };

  const cur = docs[doc] || docs.gizlilik;

  return (
    <div className="app-fade">
      <PageHead nav={nav} crumb={[{t: T('legal_page', 'Yasal Bilgiler')}]}
        title={T('legal_page', 'Yasal Bilgiler')}
        lead={T('legal_lead', 'Gizlilik, kişisel verilerin korunması, kullanım şartları ve çerez politikamız.')}/>
      <section className="sec"><div className="wrap">
        <div className="legal">
          <nav className="legalnav">
            {Object.keys(docs).map(k => (
              <a key={k} className={doc === k ? "on" : ""} onClick={() => setDoc(k)}>{docs[k].t}</a>
            ))}
          </nav>
          <div className="legaldoc">
            <h2>{cur.t}</h2>
            <div className="upd">{cur.upd}</div>
            {cur.body.map((b, i) => {
              if (b[0] === "h") return <h3 key={i}>{b[1]}</h3>;
              if (b[0] === "p") return <p key={i}>{b[1]}</p>;
              if (b[0] === "box") return <div className="box" key={i}><p>{b[1]}</p></div>;
              if (b[0] === "ul") return <ul key={i}>{b[1].map((li, j) => <li key={j}>{li}</li>)}</ul>;
              return null;
            })}
          </div>
        </div>
      </div></section>
    </div>
  );
}

/* ================================================== 404 */
function NotFoundPage({nav}) {
  return (
    <div className="app-fade">
      <div className="wrap nf">
        <div className="code">404</div>
        <h1 className="h2 mt20">{T('nf_title', 'Aradığınız sayfa bulunamadı')}</h1>
        <p className="lead mt14" style={{marginLeft:"auto",marginRight:"auto"}}>{T('nf_lead', 'Bağlantı taşınmış veya silinmiş olabilir. Aşağıdan devam edebilir ya da bizi arayabilirsiniz.')}</p>
        <div style={{display:"flex",gap:12,justifyContent:"center",marginTop:32,flexWrap:"wrap"}}>
          <button className="btn btn-primary btn-lg" onClick={() => nav("home")}>{T('nf_home', 'Ana Sayfaya Dön')}</button>
          <button className="btn btn-ghost btn-lg" onClick={() => nav("contact")}>{T('nf_contact', 'İletişime Geç')}</button>
        </div>
      </div>
    </div>
  );
}

window.CorpPages = {
  HomePage, ServicesPage, ServiceDetailPage, HardwarePage, ProjectsPage,
  AboutPage, SupportPage, FaqPage, ContactPage, LegalPage, NotFoundPage,
  ProductCard, CaseCard,
};