const { TickRule, Button, Card, Badge, Tag, Icon, SectionHeading, DataRow, FeatureCard, Accordion, Alert } = (window.FintelligentComTrLanding_96e553 || (console.error("Fintelligent DS: _ds_bundle.js not loaded — check the <script src> path"), {}));

function ServicesScreen({ lang, onNav }) {
  const T = window.T;
  const { Container, Section, Reveal } = window;

  const stages = [
    { n: "01", l: { tr: "Keşif ve kapsam", en: "Discovery and scope" }, d: { tr: "Mevcut POS, ERP ve muhasebe akışı çıkarılır. Kapsam bu haritanın üzerine yazılır.", en: "The current POS, ERP and accounting flow is mapped. Scope is written on top of that map." } },
    { n: "02", l: { tr: "Teknik tasarım", en: "Technical design" }, d: { tr: "Veri modeli, API sözleşmesi, limit ve yetki kuralları netleştirilir.", en: "Data model, API contract, limit and permission rules are settled." } },
    { n: "03", l: { tr: "Geliştirme", en: "Development" }, d: { tr: "Uygulama, yönetim paneli ve entegrasyon katmanı paralel yürütülür.", en: "Application, back-office panel and integration layer run in parallel." } },
    { n: "04", l: { tr: "Pilot ve doğrulama", en: "Pilot and validation" }, d: { tr: "Sınırlı kapsamda canlı işlem doğrulaması ve mutabakat kontrolü yapılır.", en: "Live transaction validation and reconciliation checks in a limited scope." } },
    { n: "05", l: { tr: "Güvenlik testi", en: "Security testing" }, d: { tr: "Devreye alma öncesi bağımsız sızma testi zorunludur.", en: "An independent penetration test is mandatory before go-live." } },
    { n: "06", l: { tr: "Devreye alma ve işletme", en: "Go-live and operation" }, d: { tr: "İzleme, sürüm yönetimi, mutabakat ve sürekli geliştirme.", en: "Monitoring, release management, reconciliation and ongoing development." } },
  ];

  return (
    <div>
      <Container style={{ paddingTop: 72, paddingBottom: 48 }}>
        <SectionHeading eyebrow={T({ tr: "Hizmetler", en: "Services" }, lang)} as="h1" size="lg"
          title={T({ tr: "Mevcut sisteminizin üzerine kuruyoruz", en: "We build on top of your existing systems" }, lang)}
          lede={T({ tr: "Kurumların çalışan sistemlerini değiştirmesini istemiyoruz. Entegrasyon katmanını biz yazıyor, işletme ve mutabakat yükünü biz taşıyoruz.", en: "We do not ask organisations to replace systems that work. We write the integration layer and carry the operational and reconciliation load." }, lang)} />
      </Container>

      <Section pad="sm" style={{ paddingTop: 0 }}>
        <Container>
          <div className="g-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 28 }}>
            {[
              { icon: "file-text", t: { tr: "Uçtan uca yazılım geliştirme", en: "End-to-end software development" }, b: { tr: "Mobil uygulama, web arayüzü ve yönetim paneli tek ekip tarafından geliştirilir.", en: "Mobile app, web interface and back-office panel built by one team." } },
              { icon: "refresh-cw", tone: "accent", t: { tr: "Entegrasyon ve API", en: "Integration and API" }, b: { tr: "ERP, muhasebe ve satış noktası sistemleri tek veri modelinde toplanır.", en: "ERP, accounting and point-of-sale systems converge on one data model." } },
              { icon: "activity", t: { tr: "İşletme ve destek", en: "Operation and support" }, b: { tr: "İzleme, alarm, sürüm yönetimi ve sözleşmeli destek hizmeti.", en: "Monitoring, alerting, release management and contracted support." } },
            ].map((x, i) => (
              <Reveal key={i} delay={i * 60}>
                <FeatureCard icon={x.icon} tone={x.tone} title={T(x.t, lang)} body={T(x.b, lang)} />
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      <Section tone="subtle">
        <Container>
          <SectionHeading eyebrow={T({ tr: "Süreç", en: "Process" }, lang)}
            title={T({ tr: "Altı aşama, tek kapsam", en: "Six stages, one scope" }, lang)}
            lede={T({ tr: "Her aşama bir öncekine bağlıdır. Kapsam keşif çalışması tamamlanmadan verilmez.", en: "Each stage depends on the one before it. No scope is committed before discovery is complete." }, lang)} />
          <div style={{ marginTop: 44 }}>
            <TickRule ticks={7} />
            <div className="g-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "0 40px", marginTop: 8 }}>
              {stages.map((s, i) => (
                <Reveal key={s.n} delay={i * 50}>
                  <div style={{ padding: "26px 0 30px", borderBottom: i < 3 ? "1px solid var(--border-default)" : "none" }}>
                    <span className="tabular" style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".10em", color: "var(--navy-300)" }}>{s.n}</span>
                    <h3 style={{ marginTop: 10, fontSize: 20, letterSpacing: "-0.012em" }}>{T(s.l, lang)}</h3>
                    <p style={{ marginTop: 8, fontSize: 15, lineHeight: 1.62, color: "var(--text-secondary)" }}>{T(s.d, lang)}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </Container>
      </Section>

      <Section>
        <Container>
          <div className="g-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72 }}>
            <div>
              <SectionHeading eyebrow={T({ tr: "Çalışma modeli", en: "Engagement model" }, lang)}
                title={T({ tr: "Kapsam bazlı proje veya sürekli geliştirme", en: "Scoped project or continuous development" }, lang)}
                lede={T({ tr: "İki modelde de teslim kriterleri, sahiplik ve destek koşulları sözleşmede tanımlanır.", en: "In both models the delivery criteria, ownership and support terms are defined in the contract." }, lang)} />
              <div style={{ marginTop: 28 }}>
                <Card padding="md">
                  <DataRow icon="file-text" label={T({ tr: "Kod sahipliği", en: "Code ownership" }, lang)} meta={T({ tr: "Sözleşmede tanımlanır", en: "Defined in the contract" }, lang)} value={T({ tr: "Müşteriye devredilebilir", en: "Transferable" }, lang)} />
                  <DataRow icon="shield-check" label={T({ tr: "Gizlilik", en: "Confidentiality" }, lang)} meta="NDA · KVKK" value={T({ tr: "Zorunlu", en: "Mandatory" }, lang)} />
                  <DataRow icon="activity" label={T({ tr: "Destek seviyesi", en: "Support level" }, lang)} meta={T({ tr: "Yanıt ve çözüm süreleri", en: "Response and resolution times" }, lang)} value="SLA" />
                  <DataRow icon="lock" label={T({ tr: "Veri konumu", en: "Data location" }, lang)} meta={T({ tr: "Türkiye içi veri merkezi", en: "Data centre in Türkiye" }, lang)} value={T({ tr: "Sabit", en: "Fixed" }, lang)} />
                </Card>
              </div>
            </div>
            <div>
              <SectionHeading eyebrow={T({ tr: "İletişim", en: "Contact" }, lang)}
                title={T({ tr: "Sorularınız için buradayız", en: "We are here for your questions" }, lang)}
                lede={T({ tr: "Kapsam, süreç veya çalışma modeliyle ilgili her türlü sorunuz için bizimle iletişime geçin.", en: "Get in touch with us for any question about scope, process or the engagement model." }, lang)} />
              <div style={{ marginTop: 28 }}>
                <Card padding="lg" variant="subtle">
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-400)" }}>
                    {T({ tr: "E-posta", en: "Email" }, lang)}
                  </div>
                  <a href={"mailto:" + window.SITE.company.email} style={{ display: "block", marginTop: 10, fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 600, letterSpacing: "-0.022em", color: "var(--navy-900)", textDecoration: "none", overflowWrap: "anywhere" }}>
                    {window.SITE.company.email}
                  </a>
                  <div style={{ marginTop: 22 }}>
                    <Button size="lg" arrow onClick={() => onNav("contact")}>{T({ tr: "Ekibimizle görüşün", en: "Talk to our team" }, lang)}</Button>
                  </div>
                </Card>
              </div>
            </div>
          </div>
        </Container>
      </Section>

      <Section tone="inverse" pad="sm">
        <Container>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, flexWrap: "wrap" }}>
            <h2 style={{ fontSize: 38, letterSpacing: "-0.028em", color: "var(--text-inverse)", maxWidth: 600 }}>
              {T({ tr: "Keşif görüşmesiyle başlayalım", en: "Let us start with a discovery call" }, lang)}
            </h2>
            <Button variant="inverse" size="lg" arrow onClick={() => onNav("contact")}>{T({ tr: "Ekibimizle görüşün", en: "Talk to our team" }, lang)}</Button>
          </div>
        </Container>
      </Section>
    </div>
  );
}

Object.assign(window, { ServicesScreen });