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

const SOLUTION_TABS = [
  { value: "odeme", label: { tr: "Ödeme", en: "Payments" }, icon: "credit-card" },
  { value: "sadakat", label: { tr: "Sadakat", en: "Loyalty" }, icon: "gift" },
  { value: "cuzdan", label: { tr: "Cüzdan", en: "Wallet" }, icon: "wallet" },
  { value: "yazilim", label: { tr: "Özel yazılım", en: "Custom software" }, icon: "file-text" },
];

const SOLUTION_DETAIL = {
  odeme: {
    title: { tr: "Ödeme orkestrasyonu", en: "Payment orchestration" },
    lede: { tr: "Birden fazla sanal POS arasında otomatik yönlendirme, hata yönetimi ve yeniden deneme. Amaç, başarılı işlem oranını ölçülebilir biçimde yükseltmek.", en: "Automatic routing across several virtual POS providers, with error handling and retry. The goal is a measurably higher success rate." },
    rows: [
      { icon: "credit-card", label: { tr: "Sanal POS yönlendirme", en: "Virtual POS routing" }, meta: { tr: "Çoklu sağlayıcı, kural bazlı", en: "Multiple providers, rule-based" }, v: { tr: "Otomatik", en: "Automatic" } },
      { icon: "refresh-cw", label: { tr: "Başarısız işlem yeniden deneme", en: "Failed transaction retry" }, meta: { tr: "Sağlayıcı bazlı kural seti", en: "Per-provider rule set" }, v: { tr: "Aktif", en: "Active" } },
      { icon: "lock", label: { tr: "Kart saklama", en: "Card on file" }, meta: { tr: "Tokenizasyon, kart verisi tutulmaz", en: "Tokenised, no card data retained" }, v: "PCI DSS" },
      { icon: "globe", label: { tr: "Yurt dışı kart işlemleri", en: "Foreign card transactions" }, meta: { tr: "Kur farkı ve iade bilgilendirmesi", en: "FX and refund disclosure" }, v: { tr: "TRY tahsilat", en: "TRY capture" } },
      { icon: "activity", label: { tr: "İzleme ve alarm", en: "Monitoring and alerting" }, meta: { tr: "Sağlayıcı bazlı başarı oranı", en: "Success rate per provider" }, v: "7/24" },
    ],
    stats: [
      [{ tr: "Dijital cüzdan yöntemleri", en: "Digital wallet methods" }, "Apple Pay · Google Pay"],
      [{ tr: "Karma ödeme akışı", en: "Mixed payment flow" }, "BKM TekPOS · NFC · QR"],
      [{ tr: "Fiziksel terminal", en: "Physical terminal" }, { tr: "POS entegrasyonu", en: "POS integration" }],
    ],
    note: { tr: "Türkiye'de kredi kartı işlemleri TL üzerinden gerçekleşir. Çoklu para birimi gösterim seviyesindedir.", en: "Card transactions in Türkiye settle in TRY. Multi-currency is display-only." },
  },
  sadakat: {
    title: { tr: "Sadakat programı altyapısı", en: "Loyalty program infrastructure" },
    lede: { tr: "Segment bazında ayrıcalık tanımı, puan kazanımı ve kullanımı, kampanya kurgusu, müşteri segmentasyonu ve kampanya maliyet yönetimi.", en: "Segment-based privileges, point earning and redemption, campaign setup, customer segmentation and campaign cost management." },
    rows: [
      { icon: "gift", label: { tr: "Puan kazan ve harca", en: "Earn and spend points" }, meta: { tr: "Her işlemde otomatik kazanım", en: "Automatic on every transaction" }, v: { tr: "Aktif", en: "Active" } },
      { icon: "trending-up", label: { tr: "Dinamik segmentasyon", en: "Dynamic segmentation" }, meta: { tr: "Harcama davranışına göre", en: "Based on spend behaviour" }, v: { tr: "Aktif", en: "Active" } },
      { icon: "building-2", label: { tr: "Kampanya fonlama takibi", en: "Campaign funding attribution" }, meta: { tr: "Maliyeti hangi taraf karşılıyor", en: "Which party bears the cost" }, v: { tr: "Zorunlu alan", en: "Required field" } },
      { icon: "activity", label: { tr: "Statü kademeleri", en: "Tier levels" }, meta: { tr: "Kurum tanımına göre yapılandırılır", en: "Configured per organisation" }, v: { tr: "Opsiyonel", en: "Optional" } },
      { icon: "receipt", label: { tr: "Puan mutabakatı", en: "Points reconciliation" }, meta: { tr: "Muhasebe ile karşılıklı kapanış", en: "Two-way close against accounting" }, v: { tr: "Otomatik", en: "Automatic" } },
    ],
    stats: [
      [{ tr: "Kazanım kuralı", en: "Earning rule" }, { tr: "İşlem, tutar ve kategori bazlı", en: "By transaction, amount and category" }],
      [{ tr: "Raporlama", en: "Reporting" }, { tr: "Kampanya bazlı maliyet ve dönüşüm", en: "Cost and conversion per campaign" }],
    ],
    note: { tr: "Sadakat ve ödeme altyapısı ayrı ayrı alınabilir; birlikte çalıştıklarında tek işlem kaydı üzerinden ilerler.", en: "Loyalty and payment infrastructure can be adopted separately; together they run off a single transaction record." },
  },
  cuzdan: {
    title: { tr: "Dijital cüzdan", en: "Digital wallet" },
    lede: { tr: "Harcama alanı tanımlanabilir kapalı devre bakiye. Yükleme kanalları, limitler ve mutabakat kuralları kuruma göre yapılandırılır.", en: "A closed-loop balance with configurable spend areas. Top-up channels, limits and reconciliation rules are configured per organisation." },
    rows: [
      { icon: "credit-card", label: { tr: "Kart ile yükleme", en: "Top-up by card" }, meta: { tr: "3D Secure zorunlu", en: "3D Secure required" }, v: { tr: "Aktif", en: "Active" } },
      { icon: "smartphone", label: "Apple Pay · Google Pay", meta: { tr: "Dijital cüzdan ile yükleme", en: "Top-up via digital wallet" }, v: { tr: "Destekli", en: "Supported" } },
      { icon: "receipt", label: { tr: "Kurumsal yükleme", en: "Corporate top-up" }, meta: { tr: "Toplu bakiye tanımlama", en: "Bulk balance allocation" }, v: { tr: "Destekli", en: "Supported" } },
      { icon: "shield-check", label: { tr: "MASAK limitleri", en: "MASAK limits" }, meta: { tr: "Bakiye ve işlem üst sınırları", en: "Balance and transaction caps" }, v: { tr: "Uygulanıyor", en: "Enforced" } },
      { icon: "activity", label: { tr: "Gün sonu mutabakat", en: "End-of-day settlement" }, meta: { tr: "23:59 kapanış", en: "23:59 close" }, v: { tr: "Otomatik", en: "Automatic" } },
    ],
    stats: [
      [{ tr: "Bakiye tipi", en: "Balance type" }, { tr: "Kapalı devre, nakde çevrilmez", en: "Closed-loop, not convertible to cash" }],
      [{ tr: "Tahsilat para birimi", en: "Settlement currency" }, { tr: "TRY ve müşteri isteğine göre çoklu para birimi", en: "TRY, with multi-currency on request" }],
      [{ tr: "Harcama alanı", en: "Spend area" }, { tr: "Üye işyeri ve kategori bazlı", en: "By merchant and category" }],
    ],
    note: { tr: "Harcama alanları sözleşme kapsamında tanımlanır. Bakiye nakde çevrilmez.", en: "Spend areas are defined contractually. Balance is not convertible to cash." },
  },
  yazilim: {
    title: { tr: "Özel yazılım geliştirme", en: "Custom software development" },
    lede: { tr: "Kurumların mevcut sistemlerini değiştirmeden üzerine kurulan uygulama, yönetim paneli ve entegrasyon katmanları geliştiriyoruz.", en: "We build applications, back-office panels and integration layers on top of existing systems, without replacing them." },
    rows: [
      { icon: "file-text", label: { tr: "Mobil ve web uygulaması", en: "Mobile and web applications" }, meta: { tr: "iOS, Android ve web", en: "iOS, Android and web" }, v: { tr: "Uçtan uca", en: "End to end" } },
      { icon: "building-2", label: { tr: "Yönetim paneli", en: "Back-office panel" }, meta: { tr: "Raporlama, yetkilendirme ve operasyon", en: "Reporting, permissions and operations" }, v: { tr: "Kuruma özel", en: "Bespoke" } },
      { icon: "refresh-cw", label: { tr: "Entegrasyon katmanı", en: "Integration layer" }, meta: { tr: "ERP, muhasebe ve POS sistemleri", en: "ERP, accounting and POS systems" }, v: "API" },
      { icon: "store", label: { tr: "Satış noktası entegrasyonu", en: "Point-of-sale integration" }, meta: { tr: "Farklı otomasyon sistemleri tek katmanda", en: "Different automation systems behind one layer" }, v: { tr: "Destekli", en: "Supported" } },
      { icon: "activity", label: { tr: "İşletme ve bakım", en: "Operation and maintenance" }, meta: { tr: "İzleme, sürüm yönetimi ve destek", en: "Monitoring, release management and support" }, v: { tr: "Sözleşmeli", en: "Contracted" } },
    ],
    stats: [
      [{ tr: "Çalışma modeli", en: "Engagement model" }, { tr: "Kapsam bazlı proje veya sürekli geliştirme", en: "Scoped project or continuous development" }],
      [{ tr: "Yazılım modeli", en: "Software model" }, { tr: "Agile, pilot, doğrulama, devreye alma", en: "Agile, pilot, validation, go-live" }],
      [{ tr: "Kod sahipliği", en: "Code ownership" }, { tr: "Sözleşmede tanımlanır", en: "Defined in the contract" }],
    ],
    note: { tr: "Her proje keşif çalışmasıyla başlar; mevcut sistem haritası çıkarılmadan kapsam verilmez.", en: "Every project starts with discovery; no scope is committed before the existing system is mapped." },
  },
};

function SolutionsScreen({ lang, onNav }) {
  const T = window.T;
  const { Container, Section, Reveal } = window;
  const [tab, setTab] = React.useState("odeme");
  const d = SOLUTION_DETAIL[tab];

  return (
    <div>
      <Container style={{ paddingTop: 72, paddingBottom: 44 }}>
        <SectionHeading eyebrow={T({ tr: "Çözümler", en: "Solutions" }, lang)} as="h1" size="lg"
          title={T({ tr: "Dört yapı taşı, tek platform", en: "Four building blocks, one platform" }, lang)}
          lede={T({ tr: "Katmanlar ayrı ayrı alınabilir. Birlikte çalıştıklarında işlem, bakiye ve puan aynı kaydı paylaşır.", en: "Layers can be adopted separately. Together they share one record across transaction, balance and points." }, lang)} />
      </Container>

      <Container>
        <Tabs value={tab} onChange={setTab} items={SOLUTION_TABS.map((t) => ({ value: t.value, label: T(t.label, lang), icon: t.icon }))} />
      </Container>

      <Section pad="sm">
        <Container>
          <div key={tab} className="g-solutions" style={{ display: "grid", gridTemplateColumns: ".85fr 1.15fr", gap: 72, animation: "fx-panel .32s cubic-bezier(.16,1,.3,1) both" }}>
            <div>
              <h2 style={{ fontSize: 30, letterSpacing: "-0.022em" }}>{T(d.title, lang)}</h2>
              <p style={{ marginTop: 16, fontSize: 17, lineHeight: 1.62, color: "var(--text-secondary)" }}>{T(d.lede, lang)}</p>
              <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 18 }}>
                {d.stats.map(([a, b], i) => (
                  <div key={i} style={{ paddingTop: 12, borderTop: "1px solid var(--border-default)" }}>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-300)" }}>{T(a, lang)}</div>
                    <div style={{ marginTop: 5, fontSize: 17, fontWeight: 500, letterSpacing: "-0.012em", color: "var(--navy-900)", lineHeight: 1.45 }}>{T(b, lang)}</div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <Card padding="md">
                {d.rows.map((r, i) => (
                  <DataRow key={i} icon={r.icon} label={T(r.label, lang)} meta={T(r.meta, lang)}
                    value={<span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--navy-500)" }}>{T(r.v, lang)}</span>} />
                ))}
              </Card>
            </div>
          </div>
        </Container>
      </Section>

      <Section tone="subtle" pad="sm">
        <Container>
          <TickRule ticks={13} />
          <div style={{ marginTop: 40, display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap" }}>
            <h2 style={{ fontSize: 30, letterSpacing: "-0.022em", maxWidth: 560 }}>
              {T({ tr: "Hangi katmanın sizin için uygun olduğunu birlikte belirleyelim", en: "Let us work out which layer fits you" }, lang)}
            </h2>
            <Button 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, { SolutionsScreen });