/* ================= Kurumsal site — paylaşılan arayüz bileşenleri ================= */
const {useState, useEffect, useRef, useCallback} = React;

const PHP = window.__PHP || {};
const SEC = PHP.sections || {};
const D   = window.DATA;
const I   = window.Icons;

const on = (key) => SEC[key] !== false;          // bölüm açık mı
const T  = D.t;

/* ---------------- Reveal (scroll ile beliren) ---------------- */
function Reveal({children, className = "", delay = 0, tag = "div", style}) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el || !("IntersectionObserver" in window)) { setSeen(true); return; }
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, {rootMargin: "0px 0px -8% 0px", threshold: .05});
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = tag;
  return (
    <Tag ref={ref} className={className} style={{
      ...style,
      opacity: seen ? 1 : 0,
      transform: seen ? "none" : "translateY(24px)",
      transition: `opacity .65s cubic-bezier(.16,1,.3,1) ${delay}s, transform .65s cubic-bezier(.16,1,.3,1) ${delay}s`,
    }}>{children}</Tag>
  );
}

/* ---------------- Toast ---------------- */
let _toastFn = null;
function toast(msg) { if (_toastFn) _toastFn(msg); }
function Toast() {
  const [msg, setMsg] = useState("");
  const timer = useRef(null);
  useEffect(() => {
    _toastFn = (m) => {
      setMsg(m);
      clearTimeout(timer.current);
      timer.current = setTimeout(() => setMsg(""), 3600);
    };
    return () => { _toastFn = null; clearTimeout(timer.current); };
  }, []);
  return (
    <div className={"toast" + (msg ? " show" : "")} role="status" aria-live="polite">
      <I.check/><span>{msg}</span>
    </div>
  );
}

/* ---------------- Ürün görseli (yüklenmediyse çizgi ikon) ---------------- */
const HW_ART = {
  barkod: <><rect x="16" y="30" width="68" height="40" rx="6"/><path d="M28 30V18h44v12"/><rect x="30" y="70" width="40" height="16" rx="3"/><path d="M36 78h28"/><circle cx="72" cy="42" r="3"/></>,
  kasa: <><rect x="18" y="24" width="64" height="44" rx="5"/><path d="M28 34h44M28 44h30"/><rect x="24" y="72" width="52" height="10" rx="3"/><circle cx="66" cy="56" r="5"/></>,
  bilgisayar: <><rect x="26" y="16" width="48" height="68" rx="6"/><path d="M34 30h32M34 42h32M34 54h20"/><circle cx="64" cy="66" r="4"/></>,
  ag: <><rect x="16" y="44" width="68" height="22" rx="5"/><circle cx="30" cy="55" r="2.5"/><circle cx="40" cy="55" r="2.5"/><path d="M58 55h18"/><path d="M50 44V28M36 28h28"/><path d="M36 28l-8-8M64 28l8-8"/></>,
  guvenlik: <><path d="M20 38 68 24l6 18-48 14z"/><circle cx="47" cy="38" r="7"/><path d="M32 56v14M24 84h16M74 30l10-4v22l-10-4"/></>,
};
function HwArt({cat}) {
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      {HW_ART[cat] || HW_ART.bilgisayar}
    </svg>
  );
}
function HwImage({item}) {
  if (item.image) return <img src={item.image} alt={item.name} loading="lazy"/>;
  return <HwArt cat={item.category}/>;
}

/* ---------------- ERP uygulama penceresi (statik ürün görseli) ---------------- */
function AppWindow({view = "panel"}) {
  const menu = [
    {g: T('app_group_general', 'GENEL')},
    {i: "grid", t: T('app_menu_panel', 'Panel'), k: "panel"},
    {i: "box", t: T('app_menu_stock', 'Stok'), k: "stock"},
    {g: T('app_group_ops', 'İŞLEMLER')},
    {i: "cart", t: T('app_menu_sales', 'Satış'), k: "sales"},
    {i: "receipt", t: T('app_menu_quote', 'Teklif'), k: "quote"},
    {i: "users", t: T('app_menu_crm', 'Cari'), k: "crm"},
    {i: "wallet", t: T('app_menu_pos', 'Kasa / POS'), k: "pos"},
    {g: T('app_group_report', 'RAPOR')},
    {i: "chart", t: T('app_menu_reports', 'Raporlar'), k: "reports"},
  ];
  const isStock = view === "stock";
  return (
    <div className="appwin">
      <div className="tb">
        <i></i><i></i><i></i>
        <span className="ttl">{PHP.productName || "ALKERSOFT ERP"} — {isStock ? T('app_title_stock', 'Stok Yönetimi') : T('app_title_panel', 'Merkez Şube')}</span>
        <span className="live"><b></b>{T('app_live', 'CANLI')}</span>
      </div>
      <div className="bd">
        <div className="sd">
          {menu.map((m, i) => m.g
            ? <div className="gp" key={i}>{m.g}</div>
            : (() => { const Ico = I[m.i]; return (
                <div className={"mi" + ((isStock ? m.k === "stock" : m.k === "panel") ? " on" : "")} key={i}>
                  <Ico size={15}/>{m.t}
                </div>
              ); })()
          )}
          <div className="usr">
            <span className="av">AÖ</span>
            <span><span className="nm">Ali Özkan</span><span className="st">{T('app_role', 'Yönetici')}</span></span>
          </div>
        </div>
        <div className="mn">
          <div className="tabs">
            <span className={isStock ? "" : "on"}>{T('app_menu_panel', 'Panel')}</span>
            <span className={isStock ? "on" : ""}>{T('app_tab_stock_list', 'Stok Listesi')}</span>
            <span>{T('app_menu_sales', 'Satış')}</span>
          </div>
          {isStock ? <AppStockView/> : <AppPanelView/>}
        </div>
      </div>
    </div>
  );
}

function AppPanelView() {
  const rows = [
    ["FIS2026000004 · Kaan Elektrik", "₺8.450"],
    ["FIS2026000003 · Kaan Kablo", "₺1.290"],
    ["FIS2026000002 · Arsitem Yazılım", "₺3.100"],
    ["FIS2026000001 · Merkez Ticaret", "₺640"],
  ];
  const alerts = [
    [T('stock_item_1', 'Işıklı Anahtar'), T('stock_out', 'Tükendi'), "rgba(224,83,59,.18)", "#ff8b73"],
    [T('stock_item_2', '1.8A Motor'), T('stock_low', 'Kritik') + " · 1", "rgba(224,150,43,.18)", "#ffc46b"],
    [T('stock_item_3', 'Otomat Rayı'), T('stock_low', 'Kritik') + " · 3", "rgba(224,150,43,.18)", "#ffc46b"],
    [T('stock_item_4', 'NYF Kablo'), "50 mt", "rgba(22,163,106,.18)", "#6ee7a8"],
  ];
  const months = D.REVENUE.map(r => r.m);
  return (
    <div className="ct">
      <div className="kp">
        <div className="k" style={{"--kc":"#2563eb"}}><div className="l">{T('kpi_revenue', 'Günlük Ciro')}</div><div className="v">₺18.420</div></div>
        <div className="k" style={{"--kc":"#e0533b"}}><div className="l">{T('kpi_critical', 'Kritik Stok')}</div><div className="v">7</div></div>
        <div className="k" style={{"--kc":"#e0962b"}}><div className="l">{T('kpi_quotes', 'Açık Teklif')}</div><div className="v">12</div></div>
        <div className="k" style={{"--kc":"#16a36a"}}><div className="l">{T('kpi_collection', 'Tahsilat')}</div><div className="v">₺9.140</div></div>
      </div>
      <div className="two">
        <div className="cd">
          <div className="ch"><I.receipt/>{T('app_recent_sales', 'Son Satışlar')}</div>
          {rows.map((r, i) => <div className="rw" key={i}><span>{r[0]}</span><b>{r[1]}</b></div>)}
        </div>
        <div className="cd">
          <div className="ch"><I.warn/>{T('app_stock_alerts', 'Stok Uyarıları')}</div>
          {alerts.map((a, i) => (
            <div className="rw" key={i}><span>{a[0]}</span>
              <b className="tagx" style={{background:a[2], color:a[3]}}>{a[1]}</b></div>
          ))}
        </div>
      </div>
      <div className="cd">
        <div className="ch"><I.trend/>{T('app_revenue_trend', 'Aylık Ciro Trendi')}</div>
        <div className="bars">
          {D.REVENUE.map((r, i) => <i key={i} style={{height: r.v + "%"}}></i>)}
        </div>
        <div className="lgd">{months.map((m, i) => <span key={i}>{m}</span>)}</div>
      </div>
    </div>
  );
}

function AppStockView() {
  const rows = [
    ["Işıklı Geniş Anahtar", "Anahtar", T('stock_out', 'Tükendi'), "rgba(224,83,59,.18)", "#ff8b73"],
    ["1.8A Kutulu Motor", "Motor", T('stock_low', 'Kritik') + " · 1", "rgba(224,150,43,.18)", "#ffc46b"],
    ["Klemensli Priz 10'lu", "Priz", T('stock_low', 'Kritik') + " · 4", "rgba(224,150,43,.18)", "#ffc46b"],
    ["Otomat Rayı 1mt", "Pano", "16", "rgba(22,163,106,.18)", "#6ee7a8"],
    ["075-1 NYF Kablo", "Kablo", "50 mt", "rgba(22,163,106,.18)", "#6ee7a8"],
    ["1.5V Pil", "Pil", "128", "rgba(22,163,106,.18)", "#6ee7a8"],
  ];
  return (
    <div className="ct">
      <div className="kp" style={{gridTemplateColumns:"repeat(3,1fr)"}}>
        <div className="k" style={{"--kc":"#2563eb"}}><div className="l">{T('kpi_items', 'Toplam Kalem')}</div><div className="v">1.284</div></div>
        <div className="k" style={{"--kc":"#e0533b"}}><div className="l">{T('kpi_out', 'Tükenen')}</div><div className="v">7</div></div>
        <div className="k" style={{"--kc":"#16a36a"}}><div className="l">{T('kpi_value', 'Stok Değeri')}</div><div className="v">₺842.300</div></div>
      </div>
      <div className="cd">
        <div className="ch"><I.box/>{T('app_product_list', 'Ürün Listesi')}</div>
        {rows.map((r, i) => (
          <div className="rw" key={i}>
            <span style={{color:"#eaf0fb",fontWeight:600}}>{r[0]}</span>
            <span style={{fontSize:10.5,color:"#6b7c9e"}}>{r[1]}</span>
            <b className="tagx" style={{background:r[3], color:r[4]}}>{r[2]}</b>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Teklif modalı ---------------- */
let _quoteFn = null;
function openQuote(subject) { if (_quoteFn) _quoteFn(subject || ""); }

function QuoteModal() {
  const [open, setOpen] = useState(false);
  const [subject, setSubject] = useState("");
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [err, setErr] = useState({});
  const [form, setForm] = useState({name:"", company:"", phone:"", email:"", message:"", consent:false});
  const firstRef = useRef(null);

  useEffect(() => {
    _quoteFn = (s) => {
      setSubject(s); setSent(false); setErr({}); setOpen(true);
      setTimeout(() => firstRef.current && firstRef.current.focus(), 140);
    };
    return () => { _quoteFn = null; };
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    const esc = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", esc);
    return () => { window.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;

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

  const validate = () => {
    const e = {};
    if (form.name.trim().length < 2) e.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) e.phone = T('err_phone', 'Geçerli bir telefon numarası girin.');
    if (form.email.trim() !== "" && !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(form.email.trim())) {
      e.email = T('err_email', 'Geçerli bir e-posta adresi girin.');
    }
    if (!form.consent) e.consent = T('err_consent', 'Devam etmek için onay vermelisiniz.');
    setErr(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) { 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, lang: PHP.lang, csrf: PHP.csrf || ""}),
      });
      const data = await res.json();
      if (data.success) {
        setSent(true);
      } else {
        if (data.errors) setErr(data.errors);
        toast(data.error || T('err_generic', 'Bir hata oluştu.'));
      }
    } catch (_) {
      toast(T('err_network', 'Bağlantı hatası. Lütfen telefonla arayın.'));
    }
    setSending(false);
  };

  const phone = PHP.sitePhone || "";

  return (
    <div className="mdl" role="dialog" aria-modal="true" aria-label={T('quote_title', 'Teklif Talebi')}>
      <div className="bgm" onClick={() => setOpen(false)}></div>
      <div className="bxm">
        {sent ? (
          <div className="bdm" style={{paddingTop:38}}>
            <div className="okbox">
              <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.')}
                {phone ? <> {T('quote_ok_phone', 'Acele ediyorsanız doğrudan')} <b>{phone}</b> {T('quote_ok_phone2', 'numarasından ulaşabilirsiniz.')}</> : null}</p>
              <button className="btn btn-ghost mt28" onClick={() => setOpen(false)}>{T('close', 'Kapat')}</button>
            </div>
          </div>
        ) : (
          <>
            <div className="hdm">
              <div>
                <h3>{T('quote_title', 'Teklif Talebi')}</h3>
                <p>{T('quote_desc', 'Formu doldurun, aynı gün içinde dönüş yapalım. Keşif görüşmesi ücretsizdir.')}</p>
              </div>
              <button className="xm" onClick={() => setOpen(false)} aria-label={T('close', 'Kapat')}><I.close/></button>
            </div>
            <div className="bdm">
              {subject && (
                <div className="ctxbar">
                  <span className="ic"><I.box/></span>
                  <span><span className="l">{T('quote_subject', 'Talep konusu')}</span><span className="v">{subject}</span></span>
                </div>
              )}
              <form onSubmit={submit} noValidate>
                <div className="fr">
                  <div>
                    <label className="fl" htmlFor="q-name">{T('form_name', 'Ad Soyad')} *</label>
                    <input ref={firstRef} id="q-name" 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" htmlFor="q-company">{T('form_company', 'Firma Adı')}</label>
                    <input id="q-company" 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" htmlFor="q-phone">{T('form_phone', 'Telefon')} *</label>
                    <input id="q-phone" 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" htmlFor="q-email">{T('form_email', 'E-posta')}</label>
                    <input id="q-email" 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 style={{marginBottom:16}}>
                  <label className="fl" htmlFor="q-msg">{T('form_message', 'Mesajınız')}</label>
                  <textarea id="q-msg" className="fi" style={{minHeight:96}} value={form.message} onChange={set("message")}
                    placeholder={T('form_message_ph', 'İhtiyacınızı kısaca anlatın')}/>
                </div>
                <label style={{display:"flex",gap:10,alignItems:"flex-start",fontSize:13,color:"var(--muted)",marginBottom:8,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>
    </div>
  );
}

/* ---------------- Ürün detay modalı ---------------- */
let _prodFn = null;
function openProduct(item) { if (_prodFn) _prodFn(item); }

function ProductModal() {
  const [item, setItem] = useState(null);
  useEffect(() => { _prodFn = (i) => setItem(i); return () => { _prodFn = null; }; }, []);
  useEffect(() => {
    document.body.style.overflow = item ? "hidden" : "";
    const esc = (e) => { if (e.key === "Escape") setItem(null); };
    window.addEventListener("keydown", esc);
    return () => { window.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, [item]);
  if (!item) return null;

  const rows = [
    [T('prod_category', 'Kategori'), item.badge || item.category],
    [T('prod_brand', 'Marka'), item.brand],
    item.specs.length ? [T('prod_highlights', 'Öne çıkan'), item.specs.join(" · ")] : null,
    [T('prod_install', 'Kurulum'), T('prod_install_v', 'Fiyata dahil')],
    [T('prod_warranty', 'Garanti'), T('prod_warranty_v', 'Üretici garantisi + 1 yıl işçilik')],
  ].filter(Boolean);

  return (
    <div className="mdl" role="dialog" aria-modal="true" aria-label={item.name}>
      <div className="bgm" onClick={() => setItem(null)}></div>
      <div className="bxm">
        <div className="hdm">
          <div>
            <span style={{fontSize:11.5,fontWeight:700,letterSpacing:".06em",textTransform:"uppercase",color:"var(--muted)"}}>{item.brand}</span>
            <h3 style={{marginTop:5}}>{item.name}</h3>
          </div>
          <button className="xm" onClick={() => setItem(null)} aria-label={T('close', 'Kapat')}><I.close/></button>
        </div>
        <div className="bdm">
          <div className="pdet">
            <div className="vis"><HwImage item={item}/></div>
            <div>
              <p style={{fontSize:15,color:"var(--ink-2)",lineHeight:1.65}}>{item.desc}</p>
              <div className="sp2">
                {rows.map((r, i) => <div key={i}><span>{r[0]}</span><span>{r[1]}</span></div>)}
              </div>
            </div>
          </div>
          <div style={{background:"var(--bg)",border:"1px solid var(--line)",borderRadius:"var(--r)",padding:"18px 20px",marginTop:22,display:"flex",gap:13,alignItems:"flex-start"}}>
            <I.check size={19} style={{color:"var(--ok)",marginTop:2,flex:"0 0 auto"}}/>
            <p style={{fontSize:13.8,color:"var(--ink-2)",lineHeight:1.6}}>
              {T('prod_note', 'Fiyatlarımıza kurulum, yazılım entegrasyonu ve personel eğitimi dahildir. Bu yüzden liste fiyatı yerine ihtiyacınıza göre teklif çıkarıyoruz.')}
            </p>
          </div>
          <button className="btn btn-primary btn-lg" style={{width:"100%",marginTop:20}}
            onClick={() => { setItem(null); openQuote(item.name); }}>
            {T('prod_cta', 'Bu Ürün İçin Teklif Al')}<I.arrow/>
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Çerez bildirimi ---------------- */
function CookieBanner() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    if (!on('cookie_banner')) return;
    let seen = null;
    try { seen = localStorage.getItem("alker_cook"); } catch (_) {}
    if (!seen) { const id = setTimeout(() => setShow(true), 1400); return () => clearTimeout(id); }
  }, []);
  const decide = (v) => {
    try { localStorage.setItem("alker_cook", v); } catch (_) {}
    setShow(false);
    toast(v === "all" ? T('cookie_ok_all', 'Tercihiniz kaydedildi. Teşekkürler.') : T('cookie_ok_req', 'Sadece zorunlu çerezler kullanılacak.'));
  };
  if (!on('cookie_banner')) return null;
  return (
    <div className={"cook" + (show ? " show" : "")}>
      <h4><I.shield/> {T('cookie_title', 'Çerez tercihleri')}</h4>
      <p>{T('cookie_desc', 'Sitenin çalışması için zorunlu çerezleri kullanıyoruz. Ziyaret istatistikleri için analitik çerezleri de kullanmamıza izin verir misiniz? Reklam takip çerezi kullanmıyoruz.')}</p>
      <div className="btns">
        <button className="btn btn-primary btn-sm" onClick={() => decide("all")}>{T('cookie_accept', 'Kabul Et')}</button>
        <button className="btn btn-ghost btn-sm" onClick={() => decide("req")}>{T('cookie_required', 'Sadece Zorunlu')}</button>
      </div>
    </div>
  );
}

/* ---------------- Sabit butonlar ---------------- */
function FloatButtons({nav}) {
  const [top, setTop] = useState(false);
  useEffect(() => {
    const h = () => setTop(window.scrollY > 600);
    h(); window.addEventListener("scroll", h, {passive:true});
    return () => window.removeEventListener("scroll", h);
  }, []);
  if (!on('float_buttons')) return null;
  const wa = PHP.whatsapp || "";
  const tel = PHP.sitePhone || "";
  return (
    <div className="floats">
      <button className={"fab top" + (top ? " show" : "")} aria-label={T('to_top', 'Yukarı çık')}
        onClick={() => window.scrollTo({top:0, behavior:"smooth"})}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 19V5M5 12l7-7 7 7"/>
        </svg>
      </button>
      {wa && (
        <a className="fab wa" href={"https://wa.me/" + wa} target="_blank" rel="noopener" aria-label="WhatsApp">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M17.5 14.4c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Z"/>
          </svg>
        </a>
      )}
      {tel && <a className="fab tel" href={"tel:" + tel.replace(/\s/g, "")} aria-label={T('nav_contact', 'İletişim')}><I.phone/></a>}
    </div>
  );
}

/* ---------------- Üst bilgi çubuğu ---------------- */
function TopBar({nav}) {
  if (!on('topbar')) return null;
  const phone = PHP.sitePhone, mail = PHP.siteEmail;
  return (
    <div className="topbar"><div className="wrap">
      {phone && <a href={"tel:" + phone.replace(/\s/g, "")}><I.phone/>{phone}</a>}
      {mail && <a href={"mailto:" + mail}><I.mail/>{mail}</a>}
      <span className="r">
        <span className="i"><I.clock/>{PHP.siteHours || T('topbar_hours', 'Pzt–Cum 09:00–18:00')}</span>
        <a onClick={(e) => {e.preventDefault(); nav("destek");}} href="?page=destek"><I.headset/>{T('topbar_support', 'Uzaktan Destek')}</a>
      </span>
    </div></div>
  );
}

/* ---------------- Navigasyon ---------------- */
function Navbar({page, nav}) {
  const [scrolled, setScrolled] = useState(false);
  const [drawer, setDrawer] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 10);
    h(); window.addEventListener("scroll", h, {passive:true});
    return () => window.removeEventListener("scroll", h);
  }, []);
  useEffect(() => { setDrawer(false); }, [page]);

  if (!on('navbar')) return null;

  const tree = (PHP.nav || []).filter(item => {
    const map = {hizmetler:'page_hizmetler', donanim:'page_donanim', erp:'page_erp', about:'page_about', contact:'page_contact'};
    return map[item.k] ? on(map[item.k]) : true;
  });
  const curLang = PHP.lang || "tr";
  const otherLang = curLang === "tr" ? "en" : "tr";

  const goChild = (c) => {
    if (c.svc) nav("hizmet", {s: c.svc});
    else if (c.cat) nav("donanim", {cat: c.cat});
    else nav(c.k, {scroll: c.s});
  };

  const Brand = () => (
    <a className="cbrand" href="?page=home" onClick={(e) => {e.preventDefault(); nav("home");}}>
      <img src="assets/images/alker-logo.png" alt={PHP.companyName}/>
      <span>
        <span className="bt">{PHP.companyName || "Alker Yazılım"}</span>
        <span className="bs">{T('brand_tagline', 'Yazılım & Donanım')}</span>
      </span>
    </a>
  );

  return (
    <>
      <nav className={"cnav" + (scrolled ? " sc" : "")}>
        <div className="cnav-in">
          <Brand/>
          <div className="clinks">
            {tree.map(item => {
              const active = page === item.k || (item.k === 'hizmetler' && page === 'hizmet');
              return (
                <div className="it" key={item.k + item.t}>
                  <span className={"lk" + (active ? " on" : "")} tabIndex={0} role="link"
                    onClick={() => nav(item.k)}
                    onKeyDown={(e) => { if (e.key === "Enter") nav(item.k); }}>
                    {item.t}{item.children && item.children.length ? <i className="cv"></i> : null}
                  </span>
                  {item.children && item.children.length > 0 && (
                    <div className={"dd" + (item.wide ? " w2" : "")}>
                      {item.children.map((c, i) => {
                        const Ico = I[c.icon] || I.box;
                        return (
                          <a className="di" key={i} onClick={(e) => {e.preventDefault(); goChild(c);}} href="#">
                            <span className="ic"><Ico size={18}/></span>
                            <span><span className="tt">{c.t}</span>{c.d ? <span className="ds">{c.d}</span> : null}</span>
                          </a>
                        );
                      })}
                      {item.promo && (
                        <div className="promo" onClick={() => nav(item.promo.k, {scroll: item.promo.s})}>
                          <div><div className="tt">{item.promo.t}</div><div className="ds">{item.promo.d}</div></div>
                          <span className="go">{T('demo', 'Demo')} →</span>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
          <div className="cnav-r">
            <a className="lang" href={"?page=" + page + "&lang=" + otherLang}>{curLang === "tr" ? "EN" : "TR"}</a>
            <button className="btn btn-primary btn-sm" onClick={() => openQuote("")}>{T('cta_quote', 'Teklif Al')}</button>
            <button className="cburger" onClick={() => setDrawer(true)} aria-label={T('menu', 'Menü')}><I.menu/></button>
          </div>
        </div>
      </nav>

      <div className={"cdrw" + (drawer ? " open" : "")}>
        <div className="bgd" onClick={() => setDrawer(false)}></div>
        <div className="pn">
          <div style={{display:"flex",alignItems:"center",marginBottom:18}}>
            <Brand/>
            <button className="cburger" style={{marginLeft:"auto",display:"grid"}} onClick={() => setDrawer(false)} aria-label={T('close', 'Kapat')}><I.close/></button>
          </div>
          {tree.map(item => (
            <React.Fragment key={"d" + item.k + item.t}>
              <a className="m" href="#" onClick={(e) => {e.preventDefault(); nav(item.k);}}>{item.t}</a>
              {(item.children || []).map((c, i) => (
                <a className="s" key={i} href="#" onClick={(e) => {e.preventDefault(); goChild(c);}}>{c.t}</a>
              ))}
            </React.Fragment>
          ))}
          {on('page_destek') && <a className="m" href="#" onClick={(e) => {e.preventDefault(); nav("destek");}}>{T('nav_support', 'Teknik Destek')}</a>}
          <button className="btn btn-primary btn-lg" style={{width:"100%",marginTop:20}} onClick={() => {setDrawer(false); openQuote("");}}>
            {T('cta_quote', 'Teklif Al')}<I.arrow/>
          </button>
        </div>
      </div>
    </>
  );
}

/* ---------------- Footer ---------------- */
function Footer({nav}) {
  if (!on('footer')) return null;
  const services = D.SERVICES.slice(0, 5);
  const cats = D.HW_CATS.slice(0, 5);

  return (
    <footer className="cfooter">
      <div className="wrap">
        <div className="fg">
          <div>
            <div className="fb">
              <img src="assets/images/alker-logo.png" alt=""/>
              <span>
                <span className="t">{PHP.companyName || "Alker Yazılım"}</span>
                <span className="s">{T('brand_tagline', 'Yazılım & Donanım')}</span>
              </span>
            </div>
            <p className="fdesc">{T('footer_desc', 'Kuruma özel yazılım geliştirme, ALKERSOFT ERP ve donanım altyapısı. Ankara merkezli, Türkiye geneli hizmet.')}</p>
            <div className="fct">
              {PHP.sitePhone && <div><I.phone/>{PHP.sitePhone}</div>}
              {PHP.siteEmail && <div><I.mail/>{PHP.siteEmail}</div>}
              {PHP.siteAddress && <div><I.pin/>{PHP.siteAddress}</div>}
            </div>
          </div>

          {on('page_hizmetler') && (
            <div>
              <h5>{T('nav_services', 'Hizmetler')}</h5>
              {services.map((s, i) => (
                <a className="fl2" key={i} onClick={() => nav("hizmet", {s: s.key})}>{s.title}</a>
              ))}
            </div>
          )}

          {on('page_donanim') && (
            <div>
              <h5>{T('nav_hardware', 'Donanım')}</h5>
              {cats.map((c, i) => (
                <a className="fl2" key={i} onClick={() => nav("donanim", {cat: c.key})}>{c.label}</a>
              ))}
            </div>
          )}

          {on('page_erp') && (
            <div>
              <h5>{T('nav_products', 'Ürünler')}</h5>
              <a className="fl2" onClick={() => nav("erp")}>{PHP.productName || "ALKERSOFT ERP"}</a>
              <a className="fl2" onClick={() => nav("erp", {scroll:"erp-moduller"})}>{T('nav_erp_modules', 'Modüller')}</a>
              <a className="fl2" onClick={() => nav("erp", {scroll:"erp-fiyat"})}>{T('nav_erp_pricing', 'Fiyatlandırma')}</a>
              <a className="fl2" onClick={() => nav("erp", {scroll:"erp-demo"})}>{T('nav_erp_demo', 'Canlı Demo')}</a>
              <a className="fl2" onClick={() => nav("erp", {scroll:"erp-indir"})}>{T('nav_erp_download', 'İndir')}</a>
            </div>
          )}

          <div>
            <h5>{T('nav_corporate', 'Kurumsal')}</h5>
            {on('page_about') && <a className="fl2" onClick={() => nav("about")}>{T('nav_about', 'Hakkımızda')}</a>}
            {on('page_projeler') && <a className="fl2" onClick={() => nav("projeler")}>{T('nav_projects', 'Projeler')}</a>}
            {on('page_destek') && <a className="fl2" onClick={() => nav("destek")}>{T('nav_support', 'Teknik Destek')}</a>}
            {on('page_faq') && <a className="fl2" onClick={() => nav("faq")}>{T('nav_faq', 'S.S.S.')}</a>}
            {on('page_contact') && <a className="fl2" onClick={() => nav("contact")}>{T('nav_contact', 'İletişim')}</a>}
          </div>
        </div>

        <div className="bot">
          <span>© {new Date().getFullYear()} {PHP.companyName || "Alker Yazılım"}. {T('rights', 'Tüm hakları saklıdır.')}</span>
          {on('page_yasal') && (
            <span className="lk">
              <a onClick={() => nav("yasal", {doc:"gizlilik"})}>{T('legal_privacy', 'Gizlilik Politikası')}</a>
              <a onClick={() => nav("yasal", {doc:"sartlar"})}>{T('legal_terms', 'Kullanım Şartları')}</a>
              <a onClick={() => nav("yasal", {doc:"kvkk"})}>{T('legal_kvkk', 'KVKK Aydınlatma Metni')}</a>
              <a onClick={() => nav("yasal", {doc:"cerez"})}>{T('legal_cookie', 'Çerez Politikası')}</a>
            </span>
          )}
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Sayfa başlığı bloğu ---------------- */
function PageHead({crumb, title, lead, nav}) {
  return (
    <div className="phead"><div className="wrap">
      <div className="crumb">
        <a onClick={() => nav("home")}>{T('nav_home', 'Ana Sayfa')}</a>
        {crumb.map((c, i) => (
          <React.Fragment key={i}>
            {" › "}
            {c.k ? <a onClick={() => nav(c.k, c.p)}>{c.t}</a> : <b>{c.t}</b>}
          </React.Fragment>
        ))}
      </div>
      <h1 className="h1 mt20" style={{maxWidth:800}}>{title}</h1>
      {lead && <p className="lead mt20">{lead}</p>}
    </div></div>
  );
}

/* ---------------- Akordiyon ---------------- */
function Accordion({items}) {
  const [open, setOpen] = useState(-1);
  return (
    <div>
      {items.map((it, i) => (
        <div className={"acc" + (open === i ? " on" : "")} key={i}>
          <button className="q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
            {it.q}<span className="pm"><I.plus/></span>
          </button>
          <div className="a"><p>{it.a}</p></div>
        </div>
      ))}
    </div>
  );
}

/* ---------------- CTA bandı ---------------- */
function CtaBand({title, desc, label, onClick, dark}) {
  return (
    <section className="sec" style={{paddingTop:0}}><div className="wrap">
      <Reveal className="ctab" style={dark ? {background:"linear-gradient(125deg,var(--navy),var(--navy-3))", boxShadow:"var(--shadow-lg)"} : undefined}>
        <div>
          <h2 className="h2">{title}</h2>
          <p>{desc}</p>
        </div>
        <div className="act">
          <button className={"btn btn-lg " + (dark ? "btn-primary" : "btn-white")} onClick={onClick}>{label}<I.arrow/></button>
        </div>
      </Reveal>
    </div></section>
  );
}

window.UI = {
  Reveal, Toast, toast, AppWindow, HwImage, HwArt,
  QuoteModal, openQuote, ProductModal, openProduct,
  CookieBanner, FloatButtons, TopBar, Navbar, Footer, PageHead, Accordion, CtaBand,
  on, PHP, SEC,
};