/* ============================================================
   SAYRU — service.jsx  (data-driven service detail template)
   Reads window.SVC (service id: 'yon'|'goz'|'iz'|'dem').
   ============================================================ */

const SERVICE_META = {
  yon: { icon: 'yon', tool: 'GLPI',          toolDesc: 'Open-Source ITSM & Asset Management',   panel: 'desk' },
  goz: { icon: 'goz', tool: 'Zabbix',        toolDesc: 'Open-Source Infrastructure Monitoring', panel: 'mon' },
  iz:  { icon: 'iz',  tool: 'Wazuh / SIEM',  toolDesc: 'Central Log Management & Correlation',  panel: 'log' },
  dem: { icon: 'dem', tool: 'Denetim & Uyum', toolDesc: 'Audit, Policy & Evidence Management',  panel: 'audit' },
};
const getSvc = () => window.PAGE_SVC || 'yon';
const meta = () => SERVICE_META[getSvc()];
const split = (s) => String(s).split(',');

/* ============================================================
   HERO GRAPHIC PANELS (one per service)
   ============================================================ */

/* yön — GLPI service desk ticket queue */
const SD_TICKETS = [
  { id: '#INC-2048', t: 'VPN bağlantı sorunu', p: 'high', sla: 86 },
  { id: '#REQ-1180', t: 'Yeni kullanıcı kurulumu', p: 'med', sla: 64 },
  { id: '#INC-2051', t: 'Yazıcı çevrimdışı', p: 'low', sla: 42 },
  { id: '#CHG-0090', t: 'Sunucu güncellemesi', p: 'med', sla: 73 },
  { id: '#INC-2055', t: 'E-posta gecikmesi', p: 'high', sla: 91 },
];
function DeskPanel() {
  return (
    <div className="sdesk" role="img" aria-label="GLPI servis masası">
      <div className="sdesk__bar">
        <div className="sdesk__tabs"><span className="noc__dot"></span><span className="noc__dot"></span><span className="noc__dot"></span><span className="mono sdesk__title">glpi://servis-masası</span></div>
        <span className="pill"><span className="dot"></span>12 AÇIK</span>
      </div>
      <div className="sdesk__head mono"><span>TALEP</span><span>ÖNCELİK</span><span>SLA</span></div>
      <div className="sdesk__rows">
        {SD_TICKETS.map((tk, i) => (
          <div className="sdesk__row" key={tk.id} style={{ animationDelay: (i * 0.12) + 's' }}>
            <div className="sdesk__main"><span className="sdesk__id mono">{tk.id}</span><span className="sdesk__t">{tk.t}</span></div>
            <span className={'sdesk__prio sdesk__prio--' + tk.p}></span>
            <div className="sdesk__sla"><span className="sdesk__sla-bar"><i style={{ width: tk.sla + '%' }} className={'p-' + tk.p}></i></span><span className="mono sdesk__sla-v">{tk.sla}%</span></div>
          </div>
        ))}
      </div>
      <div className="sdesk__foot">
        <div className="sdesk__stat"><span className="mono sdesk__stat-l">ÇÖZÜLEN</span><span className="mono sdesk__stat-v">38</span></div>
        <div className="sdesk__stat"><span className="mono sdesk__stat-l">ORT. YANIT</span><span className="mono sdesk__stat-v">1.4<i>s</i></span></div>
        <div className="sdesk__stat"><span className="mono sdesk__stat-l">SLA UYUMU</span><span className="mono sdesk__stat-v sdesk__stat-v--cy">98.6<i>%</i></span></div>
      </div>
    </div>
  );
}

/* göz — Zabbix host monitoring grid */
const MON_HOSTS = [
  { n: 'web-01', s: 'ok' }, { n: 'web-02', s: 'ok' }, { n: 'db-01', s: 'ok' }, { n: 'db-02', s: 'warn' },
  { n: 'app-01', s: 'ok' }, { n: 'app-02', s: 'ok' }, { n: 'fw-01', s: 'ok' }, { n: 'cache-01', s: 'ok' },
  { n: 'lb-01', s: 'ok' }, { n: 'k8s-01', s: 'crit' }, { n: 'k8s-02', s: 'ok' }, { n: 'bkp-01', s: 'ok' },
];
function MonPanel() {
  return (
    <div className="sdesk" role="img" aria-label="Zabbix izleme panosu">
      <div className="sdesk__bar">
        <div className="sdesk__tabs"><span className="noc__dot"></span><span className="noc__dot"></span><span className="noc__dot"></span><span className="mono sdesk__title">zabbix://noc-dashboard</span></div>
        <span className="pill"><span className="dot"></span>İZLENİYOR</span>
      </div>
      <div className="mon">
        <div className="mon__metrics">
          <div className="mon__metric"><span className="mono noc__label">UPTIME</span><span className="mono mon__v">99.98<i>%</i></span><Sparkline points={[6,7,7,8,8,9,9,9,10,10]} w={110} h={24} /></div>
          <div className="mon__metric"><span className="mono noc__label">CPU AVG</span><span className="mono mon__v">37<i>%</i></span><Sparkline points={[5,6,5,7,6,8,6,7,5,6]} color="var(--blue)" w={110} h={24} /></div>
        </div>
        <div className="mon__gridlabel mono noc__label">HOST DURUMU · 12 NODE</div>
        <div className="mon__grid">
          {MON_HOSTS.map((h, i) => (
            <div className={'mon__host mon__host--' + h.s} key={h.n} style={{ animationDelay: (i * 0.05) + 's' }}>
              <span className="mon__host-dot"></span>
              <span className="mono mon__host-n">{h.n}</span>
            </div>
          ))}
        </div>
        <div className="mon__alert"><span className="mono">⚠ k8s-01 · yüksek bellek</span><span className="mono mon__alert-t">14:02</span></div>
      </div>
    </div>
  );
}

/* iz — SIEM live log stream */
const LOG_LINES = [
  { lv: 'info', src: 'auth', m: 'user login success · admin@sayru' },
  { lv: 'warn', src: 'fw', m: 'blocked inbound 203.0.113.9:443' },
  { lv: 'info', src: 'app', m: 'job queue drained · 0 pending' },
  { lv: 'err',  src: 'auth', m: 'failed login x5 · 10.0.4.22' },
  { lv: 'warn', src: 'sys', m: 'disk usage 82% · /var/log' },
  { lv: 'info', src: 'web', m: 'GET /api/health 200 · 12ms' },
];
function LogPanel() {
  return (
    <div className="sdesk" role="img" aria-label="SIEM log akışı">
      <div className="sdesk__bar">
        <div className="sdesk__tabs"><span className="noc__dot"></span><span className="noc__dot"></span><span className="noc__dot"></span><span className="mono sdesk__title">siem://log-stream</span></div>
        <span className="pill"><span className="dot"></span>CANLI</span>
      </div>
      <div className="logp">
        <div className="logp__stats">
          <div className="logp__stat"><span className="mono noc__label">EPS</span><span className="mono logp__v">4.2<i>k</i></span></div>
          <div className="logp__stat"><span className="mono noc__label">KAYNAK</span><span className="mono logp__v">38</span></div>
          <div className="logp__stat"><span className="mono noc__label">ALARM</span><span className="mono logp__v logp__v--warn">3</span></div>
        </div>
        <div className="logp__stream">
          {LOG_LINES.map((l, i) => (
            <div className={'logp__line logp__line--' + l.lv} key={i} style={{ animationDelay: (i * 0.1) + 's' }}>
              <span className={'logp__lv logp__lv--' + l.lv}>{l.lv.toUpperCase()}</span>
              <span className="mono logp__src">{l.src}</span>
              <span className="mono logp__m">{l.m}</span>
            </div>
          ))}
        </div>
        <div className="logp__corr"><span className="mono">⟂ KORELASYON</span><span className="logp__corr-m">5 başarısız giriş → brute-force alarmı</span></div>
      </div>
    </div>
  );
}

/* dem — audit compliance panel */
const AUDIT_ROWS = [
  { c: 'Erişim Kontrolü', s: 'pass' }, { c: 'Log Yönetimi', s: 'pass' },
  { c: 'Yedekleme Politikası', s: 'pass' }, { c: 'Şifreleme', s: 'warn' },
  { c: 'KVKK Aydınlatma', s: 'pass' }, { c: 'Olay Müdahale', s: 'warn' },
];
function AuditPanel() {
  return (
    <div className="sdesk" role="img" aria-label="Denetim uyum panosu">
      <div className="sdesk__bar">
        <div className="sdesk__tabs"><span className="noc__dot"></span><span className="noc__dot"></span><span className="noc__dot"></span><span className="mono sdesk__title">sayru://uyum-paneli</span></div>
        <span className="pill"><span className="dot"></span>ISO 27001</span>
      </div>
      <div className="audp">
        <div className="audp__score">
          <div className="audp__ring" style={{ '--p': '87' }}><span className="mono audp__ring-v">87<i>%</i></span></div>
          <div className="audp__score-meta">
            <span className="mono noc__label">UYUM SKORU</span>
            <span className="audp__score-d">114 kontrolden 99'u karşılandı</span>
          </div>
        </div>
        <div className="audp__rows">
          {AUDIT_ROWS.map((r, i) => (
            <div className="audp__row" key={r.c} style={{ animationDelay: (i * 0.08) + 's' }}>
              <span className={'audp__ic audp__ic--' + r.s}>{r.s === 'pass' ? '✓' : '!'}</span>
              <span className="audp__c">{r.c}</span>
              <span className={'mono audp__s audp__s--' + r.s}>{r.s === 'pass' ? 'GEÇTİ' : 'İNCELE'}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const PANELS = { desk: DeskPanel, mon: MonPanel, log: LogPanel, audit: AuditPanel };
function HeroPanel() {
  const P = PANELS[meta().panel] || DeskPanel;
  return <P />;
}

/* ============================================================
   PAGE SECTIONS (data-driven via window.SVC)
   ============================================================ */

function Breadcrumb({ name }) {
  const { t } = useT();
  return (
    <nav className="crumb" aria-label="breadcrumb">
      <a href="index.html">{t('sd.breadcrumb.home')}</a><span className="crumb__sep">/</span>
      <a href="index.html#hizmetler">{t('sd.breadcrumb.services')}</a><span className="crumb__sep">/</span>
      <span className="crumb__cur">{name}</span>
    </nav>
  );
}

function ServiceHero() {
  const { t } = useT();
  const id = getSvc();
  return (
    <section className="shero dark">
      <div className="cc-grid shero__grid"></div>
      <div className="hero__glow hero__glow--1"></div>
      <div className="hero__rings" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
      <div className="wrap shero__in">
        <div className="shero__content">
          <Breadcrumb name={t('svc.' + id + '.name')} />
          <div className="kicker kicker--ondark shero__kick">{t(id + '.hero.kick')}</div>
          <h1 className="shero__title">{nl2br(t(id + '.hero.title'))}</h1>
          <p className="shero__body">{t(id + '.hero.body')}</p>
          <div className="shero__actions">
            <a href="index.html#iletisim" className="btn btn--cyan">{t('nav.cta')} <span className="ar"><Icon name="arrow" size={17} /></span></a>
            <a href="https://wa.me/905417190401" target="_blank" rel="noopener" className="btn btn--ghost-light"><Icon name="wa" size={16} /> WhatsApp</a>
          </div>
          <div className="shero__chips">
            {split(t(id + '.chips')).map(x => <span key={x} className="hero__chip mono">{x}</span>)}
          </div>
        </div>
        <div className="shero__visual">
          <div className="shero__imgwrap">
            <HeroPanel />
            <span className="shero__badge"><Icon name={meta().icon} size={26} /></span>
          </div>
        </div>
      </div>
    </section>
  );
}

function TopGallery() {
  const { t } = useT();
  const id = getSvc();
  const labels = split(t(id + '.gal.top'));
  return (
    <section className="section section--tight sgal">
      <div className="wrap">
        <div className="kicker sgal__kick reveal">{t('sd.gallery.top')}</div>
        <div className="sgal__grid">
          {labels.map((l, n) => (
            <figure key={n} className={'sgal__item reveal d' + (n + 1)}>
              <CmsImage slot={id + '.top.' + n} className="sgal__img" placeholder={l} shape="rounded" radius="14" />
              <figcaption className="mono">{l}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function ContentBlocks() {
  const { t } = useT();
  const id = getSvc();
  const inLabels = split(t(id + '.gal.in'));
  return (
    <section className="section scontent">
      <div className="wrap">
        <div className="scontent__intro reveal">
          <div className="kicker">{t('sd.overview')}</div>
          <h2 className="scontent__h">{t(id + '.intro.t')}</h2>
          <div className="scontent__cols">
            <p>{t(id + '.intro.p1')}</p>
            <p>{t(id + '.intro.p2')}</p>
          </div>
        </div>

        <div className="sblock reveal">
          <div className="sblock__media">
            <CmsImage slot={id + '.inline.0'} className="sblock__img" placeholder={inLabels[0]} shape="rounded" radius="16" />
          </div>
          <div className="sblock__text">
            <span className="eyebrow-num">01</span>
            <h3>{t(id + '.block1.t')}</h3>
            <p>{t(id + '.block1.p')}</p>
            <ul className="sblock__list">
              <li><Icon name="check" size={16} /> {t(id + '.benefit1')}</li>
              <li><Icon name="check" size={16} /> {t(id + '.benefit2')}</li>
              <li><Icon name="check" size={16} /> {t(id + '.benefit5')}</li>
            </ul>
          </div>
        </div>

        <div className="sblock sblock--rev reveal">
          <div className="sblock__media">
            <CmsImage slot={id + '.inline.1'} className="sblock__img" placeholder={inLabels[1]} shape="rounded" radius="16" />
          </div>
          <div className="sblock__text">
            <span className="eyebrow-num">02</span>
            <h3>{t(id + '.block2.t')}</h3>
            <p>{t(id + '.block2.p')}</p>
            <ul className="sblock__list">
              <li><Icon name="check" size={16} /> {t(id + '.benefit3')}</li>
              <li><Icon name="check" size={16} /> {t(id + '.benefit4')}</li>
              <li><Icon name="check" size={16} /> {t(id + '.benefit6')}</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Benefits() {
  const { t } = useT();
  const id = getSvc();
  const items = ['benefit1', 'benefit2', 'benefit3', 'benefit4', 'benefit5', 'benefit6'];
  return (
    <section className="section section--ben">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker">{t('sd.benefits.kick')}</div>
          <h2>{t('sd.benefits.title')}</h2>
        </div>
        <div className="ben-grid">
          {items.map((b, n) => (
            <div className={'ben-card reveal d' + ((n % 3) + 1)} key={b}>
              <span className="ben-card__ic"><Icon name="check" size={18} /></span>
              <p>{t(id + '.' + b)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StackBlock() {
  const { t } = useT();
  const id = getSvc();
  const caps = split(t(id + '.caps'));
  return (
    <section className="section section--stack dark">
      <div className="cc-grid" style={{ opacity: .4 }}></div>
      <div className="wrap sstack__in">
        <div className="sstack__left reveal">
          <div className="kicker kicker--ondark">{t('sd.stack.kick')}</div>
          <h2 className="sstack__title">{t('sd.stack.title')}</h2>
          <div className="sstack__tool">
            <span className="sstack__tool-ic"><Icon name={meta().icon} size={30} /></span>
            <div>
              <div className="sstack__tool-name">{meta().tool}</div>
              <div className="sstack__tool-desc mono">{meta().toolDesc}</div>
            </div>
          </div>
        </div>
        <div className="sstack__caps reveal d1">
          {caps.map((c, n) => (
            <div className="sstack__cap" key={c}><span className="mono sstack__cap-n">{String(n + 1).padStart(2, '0')}</span><span>{c}</span></div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const { t } = useT();
  const id = getSvc();
  const [open, setOpen] = useState(0);
  const qs = ['faq1', 'faq2', 'faq3', 'faq4'];
  return (
    <section className="section section--faq">
      <div className="wrap sfaq__in">
        <div className="sfaq__head reveal">
          <div className="kicker">{t('sd.faq.kick')}</div>
          <h2>{t('sd.faq.title')}</h2>
        </div>
        <div className="sfaq__list reveal d1">
          {qs.map((q, n) => (
            <div className={'sfaq__item' + (open === n ? ' open' : '')} key={q}>
              <button className="sfaq__q" onClick={() => setOpen(open === n ? -1 : n)} aria-expanded={open === n}>
                <span>{t(id + '.' + q + '.q')}</span><span className="sfaq__ic"><Icon name="plus" size={18} /></span>
              </button>
              <div className="sfaq__a"><div className="sfaq__a-in">{t(id + '.' + q + '.a')}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BottomGallery() {
  const { t } = useT();
  const id = getSvc();
  const labels = split(t(id + '.gal.bot'));
  return (
    <section className="section section--tight sgal sgal--bottom">
      <div className="wrap">
        <div className="kicker sgal__kick reveal">{t('sd.gallery.bottom')}</div>
        <div className="sgal__grid sgal__grid--2">
          {labels.map((l, n) => (
            <figure key={n} className={'sgal__item reveal d' + (n + 1)}>
              <CmsImage slot={id + '.bottom.' + n} className="sgal__img sgal__img--wide" placeholder={l} shape="rounded" radius="16" />
              <figcaption className="mono">{l}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function RelatedCTA() {
  const { t } = useT();
  const others = SERVICES.filter(s => s.id !== getSvc());
  return (
    <section className="section section--related">
      <div className="wrap">
        <div className="srel reveal">
          <div className="kicker">{t('sd.related')}</div>
          <div className="srel__grid">
            {others.map(s => (
              <a key={s.id} href={s.href} className="srel__card">
                <span className="srel__ic"><Icon name={s.icon} size={22} /></span>
                <span className="srel__body">
                  <span className="srel__name">{t('svc.' + s.id + '.name')}</span>
                  <span className="srel__area">{t('svc.' + s.id + '.area')}</span>
                </span>
                <Icon name="arrow" size={16} />
              </a>
            ))}
          </div>
        </div>
        <div className="cta__in srel__cta reveal">
          <div className="cta__text">
            <div className="kicker">{t('cta.kick')}</div>
            <h2 className="cta__title">{t('sd.cta.title')}</h2>
            <p className="cta__body">{t('cta.body')}</p>
          </div>
          <div className="cta__actions">
            <a href="index.html#iletisim" className="btn btn--cyan">{t('cta.btn1')} <span className="ar"><Icon name="arrow" size={17} /></span></a>
            <a href="https://wa.me/905417190401" target="_blank" rel="noopener" className="btn btn--ghost cta__wa"><Icon name="wa" size={17} /> {t('cta.btn2')}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicePage() {
  useReveal();
  return (
    <main>
      <ServiceHero />
      <TopGallery />
      <ContentBlocks />
      <Benefits />
      <StackBlock />
      <FAQ />
      <BottomGallery />
      <RelatedCTA />
    </main>
  );
}

Object.assign(window, { Breadcrumb, ServiceHero, TopGallery, ContentBlocks, Benefits, StackBlock, FAQ, BottomGallery, RelatedCTA, ServicePage, SERVICE_META });