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

/* Live settlement register — the ledger motif standing in for hero imagery.
   Rows arrive on a cycle; the day total counts with them in tabular figures. */
function SettlementLedger({ lang }) {
  const T = window.T;
  const feed = [
    { m: { tr: "Üye işyeri ödemesi", en: "Merchant payment" }, pos: "POS 4412", rail: { tr: "QR kod", en: "QR code" }, a: -184.0 },
    { m: { tr: "Cüzdan yükleme", en: "Wallet top-up" }, pos: "SANAL POS", rail: "Apple Pay", a: 500.0 },
    { m: { tr: "Üye işyeri ödemesi", en: "Merchant payment" }, pos: "POS 2107", rail: "NFC", a: -96.5 },
    { m: { tr: "Kart ile tahsilat", en: "Card capture" }, pos: "POS 5530", rail: { tr: "Temassız", en: "Contactless" }, a: -312.75 },
    { m: { tr: "İade", en: "Refund" }, pos: "POS 2107", rail: { tr: "Otomatik", en: "Automatic" }, a: 96.5 },
    { m: { tr: "Puan ile ödeme", en: "Points redemption" }, pos: "POS 3308", rail: { tr: "Sadakat", en: "Loyalty" }, a: -238.0 },
  ];
  const [n, setN] = React.useState(3);
  React.useEffect(() => {
    const t = setInterval(() => setN((v) => (v >= feed.length ? 3 : v + 1)), 2200);
    return () => clearInterval(t);
  }, []);
  const rows = feed.slice(0, n).slice(-4).reverse();
  const volume = feed.slice(0, n).reduce((a, r) => a + Math.abs(r.a), 0);
  const money = (v) => "₺" + v.toLocaleString("tr-TR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  return (
    <Card padding="none" style={{ overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 18px", borderBottom: "1px solid var(--border-default)" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-400)" }}>
          {T({ tr: "İşlem kaydı", en: "Transaction register" }, lang)}
        </span>
        <Badge tone="neutral">{T({ tr: "Demo — örnek veri", en: "Demo — sample data" }, lang)}</Badge>
      </div>

      <div style={{ padding: "6px 18px 2px", minHeight: 232 }}>
        {rows.map((r) => (
          <div key={r.pos + r.a} style={{ animation: "fx-ledger .42s cubic-bezier(.16,1,.3,1) both" }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, padding: "13px 0", borderBottom: "1px solid var(--border-subtle)" }}>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: "block", fontSize: 14, fontWeight: 500, letterSpacing: "-0.012em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{T(r.m, lang)}</span>
                <span style={{ display: "block", marginTop: 2, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".04em", textTransform: "uppercase", color: "var(--navy-300)" }}>{r.pos} · {T(r.rail, lang)}</span>
              </span>
              <span className="tabular" style={{ fontSize: 14, fontWeight: 600, whiteSpace: "nowrap", color: r.a > 0 ? "var(--green-500)" : "var(--navy-900)" }}>
                {(r.a > 0 ? "+" : "−") + money(Math.abs(r.a))}
              </span>
            </div>
          </div>
        ))}
      </div>

      <div style={{ padding: "14px 18px 16px", borderTop: "1px solid var(--border-default)", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16 }}>
        <span>
          <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-300)" }}>
            {T({ tr: "Gün içi işlem hacmi", en: "Volume today" }, lang)}
          </span>
          <span className="tabular" style={{ display: "block", marginTop: 4, fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1 }}>{money(volume)}</span>
        </span>
        <span style={{ textAlign: "right" }}>
          <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-300)" }}>
            {T({ tr: "İşlem", en: "Count" }, lang)}
          </span>
          <span className="tabular" style={{ display: "block", marginTop: 4, fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1 }}>{n}</span>
        </span>
      </div>

      <div style={{ borderTop: "1px solid var(--border-default)", padding: "12px 18px", display: "flex", gap: 18, flexWrap: "wrap", background: "var(--paper-100)" }}>
        {["POS", "BKM TekPOS", "NFC", "QR", "Apple Pay", "Google Pay"].map((x) => (
          <span key={x} style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--navy-400)" }}>{x}</span>
        ))}
      </div>
    </Card>
  );
}

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

  return (
    <div>
      {/* ---------- hero ---------- */}
      <div style={{ position: "relative", overflow: "hidden" }}>
        <div aria-hidden="true" style={{ position: "absolute", inset: "0 0 auto 0", height: 440, background: "var(--beam-wash)" }} />
        <div aria-hidden="true" style={{ position: "absolute", inset: "0 0 auto 0", height: 440, background: "linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.78) 46%,#fff 100%)" }} />
        <Container className="hero-wrap" style={{ position: "relative", paddingTop: 96, paddingBottom: 104 }}>
          <div className="g-hero" style={{ display: "grid", gridTemplateColumns: "1.25fr .95fr", gap: 64, alignItems: "start" }}>
            <div>
              <Reveal><Eyebrow>{T({ tr: "Fintelligent Teknoloji Yatırımları A.Ş.", en: "Fintelligent Teknoloji Yatırımları A.Ş." }, lang)}</Eyebrow></Reveal>
              <Reveal delay={60}>
                <h1 style={{ marginTop: 22, fontSize: "clamp(40px,5.3vw,68px)", lineHeight: 1.03, letterSpacing: "-0.035em", fontWeight: 600 }}>
                  {T({ tr: "Müşteri sadakatini kazanca çeviren altyapı", en: "Infrastructure that turns loyalty into revenue" }, lang)}
                </h1>
              </Reveal>
              <Reveal delay={120}>
                <p style={{ marginTop: 24, fontSize: 19, lineHeight: 1.62, color: "var(--text-secondary)", maxWidth: 560 }}>
                  {T({
                    tr: "Harcama, ödeme, dijital cüzdan ve sadakat altyapısı geliştiriyoruz. Her kurumun kendi iş modeline özel çözümler sunuyoruz.",
                    en: "We develop spending, payment, digital wallet and loyalty infrastructure, with solutions tailored to each organisation's own business model.",
                  }, lang)}
                </p>
              </Reveal>
              <Reveal delay={180}>
                <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <Button size="lg" arrow onClick={() => onNav("contact")}>{T({ tr: "Ekibimizle görüşün", en: "Talk to our team" }, lang)}</Button>
                  <Button size="lg" variant="secondary" onClick={() => onNav("solutions")}>{T({ tr: "Çözümleri inceleyin", en: "See the solutions" }, lang)}</Button>
                </div>
              </Reveal>
              <Reveal delay={240}>
                <div style={{ marginTop: 40, display: "flex", gap: 10, flexWrap: "wrap" }}>
                  {[
                    { tr: "Sadakat programı", en: "Loyalty programs" },
                    { tr: "Ödeme orkestrasyonu", en: "Payment orchestration" },
                    { tr: "Kurumsal yazılım", en: "Enterprise software" },
                    { tr: "KVKK uyumlu", en: "KVKK compliant" },
                  ].map((x, i) => (<Tag key={i}>{T(x, lang)}</Tag>))}
                </div>
              </Reveal>
            </div>
            <Reveal delay={140}><SettlementLedger lang={lang} /></Reveal>
          </div>
        </Container>
      </div>

      {/* ---------- 01 solutions ---------- */}
      <Section tone="subtle">
        <Container>
          <SectionHeading eyebrow={T({ tr: "Çözümler", en: "Solutions" }, lang)}
            title={T({ tr: "Dört yapı taşı, tek platform", en: "Four building blocks, one platform" }, lang)}
            lede={T({ tr: "Her biri tek başına güçlü; birlikte çalıştıklarında işlem, bakiye ve puan aynı kaydı paylaşır — müşteriniz tek deneyim yaşar.", en: "Each is strong on its own; together they share one record across transaction, balance and points — your customer sees one experience." }, lang)} />
          <div className="g-4" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 28, marginTop: 48 }}>
            {[
              { icon: "gift", tone: "amber", t: { tr: "Sadakat programı altyapısı", en: "Loyalty program infrastructure" }, b: { tr: "Puan kazanımı ve kullanımı, kampanya kurgusu, segmentasyon ve fonlama takibi. Müşteriyi geri getiren kurgu burada kurulur.", en: "Earning and redemption, campaign setup, segmentation and funding attribution. The mechanics that bring customers back are built here." } },
              { icon: "refresh-cw", tone: "accent", t: { tr: "Ödeme orkestrasyonu", en: "Payment orchestration" }, b: { tr: "POS, kasa, ÖKC veya fiş üzerinden tüm entegrasyonları sağlıyoruz. Ödeme akışınız hangi kanaldan geçerse geçsin tek kayıtta toplanır.", en: "We integrate through POS, till, fiscal device or receipt. Whichever channel your payment flows through, it lands in one record." } },
              { icon: "wallet", tone: "teal", t: { tr: "Dijital cüzdan", en: "Digital wallet" }, b: { tr: "Kapalı devre bakiye, kart ve dijital cüzdan ile yükleme, harcama alanı tanımı ve gün sonu mutabakat.", en: "Closed-loop balance, top-up by card and digital wallet, spend-area rules and end-of-day settlement." } },
              { icon: "file-text", t: { tr: "Özel yazılım geliştirme", en: "Custom software development" }, b: { tr: "Kurumların mevcut sistemlerine göre tasarlanan uygulama, panel ve entegrasyon katmanları.", en: "Applications, back-office panels and integration layers designed around existing systems." } },
            ].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)}
                  linkLabel={T({ tr: "Çözümü inceleyin", en: "See the solution" }, lang)} href="#solutions"
                  onClick={(e) => { e.preventDefault(); onNav("solutions"); }} />
              </Reveal>
            ))}
          </div>
        </Container>
      </Section>

      {/* ---------- 02 how we work ---------- */}
      <Section tone="inverse">
        <Container>
          <div className="g-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 72, alignItems: "center" }}>
            <div>
              <SectionHeading inverse eyebrow={T({ tr: "Çalışma biçimi", en: "How we work" }, lang)}
                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)} />
              <div style={{ marginTop: 30, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button variant="inverse" arrow onClick={() => onNav("services")}>{T({ tr: "Hizmetleri inceleyin", en: "See the services" }, lang)}</Button>
                <Button variant="inverse-ghost" onClick={() => onNav("contact")}>{T({ tr: "Entegrasyon için yazın", en: "Ask about integration" }, lang)}</Button>
              </div>
            </div>
            <Reveal>
              <Card variant="inverse" padding="lg" style={{ background: "var(--surface-inverse-soft)" }}>
                {[
                  { icon: "activity", label: { tr: "Keşif ve kapsam", en: "Discovery and scope" }, meta: { tr: "Mevcut POS, ERP ve muhasebe akışının çıkarılması", en: "Mapping the current POS, ERP and accounting flow" }, v: "01" },
                  { icon: "file-text", label: { tr: "Teknik tasarım", en: "Technical design" }, meta: { tr: "Veri modeli, API sözleşmesi ve limit kuralları", en: "Data model, API contract and limit rules" }, v: "02" },
                  { icon: "refresh-cw", label: { tr: "Entegrasyon ve pilot", en: "Integration and pilot" }, meta: { tr: "Sınırlı kapsamda canlı işlem doğrulaması", en: "Live transaction validation in a limited scope" }, v: "03" },
                  { icon: "shield-check", label: { tr: "Güvenlik testi", en: "Security testing" }, meta: { tr: "Devreye alma öncesi bağımsız sızma testi", en: "Independent penetration test before go-live" }, v: "04" },
                  { icon: "trending-up", label: { tr: "Devreye alma ve işletme", en: "Go-live and operation" }, meta: { tr: "İzleme, mutabakat ve sürekli geliştirme", en: "Monitoring, reconciliation and ongoing development" }, v: "05" },
                ].map((x, i) => (
                  <DataRow key={i} inverse icon={x.icon} label={T(x.label, lang)} meta={T(x.meta, lang)}
                    value={<span className="tabular" style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-inverse-secondary)" }}>{x.v}</span>} />
                ))}
              </Card>
            </Reveal>
          </div>
        </Container>
      </Section>

      {/* ---------- 03 corporate identity ---------- */}
      <Section tone="subtle" pad="sm">
        <Container>
          <SectionHeading eyebrow={T({ tr: "Şirket", en: "Company" }, lang)} size="sm"
            title={T({ tr: "Tüzel kişilik bilgileri", en: "Legal entity details" }, lang)}
            lede={T({ tr: "Uygulama mağazası doğrulaması, sözleşme ve fatura süreçlerinde bu bilgiler birebir kullanılır.", en: "These details are used verbatim for app-store verification, contracts and invoicing." }, lang)} />
          <Card padding="none" style={{ marginTop: 36 }}>
            <div className="g-2t" style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
              {[
                [{ tr: "Ticaret ünvanı", en: "Legal name" }, window.SITE.company.legalName],
                [{ tr: "Kayıtlı adres", en: "Registered address" }, window.SITE.company.address],
                [{ tr: "Vergi dairesi / VKN", en: "Tax office / VKN" }, window.SITE.company.taxOffice + " · " + window.SITE.company.vkn],
                [{ tr: "İletişim", en: "Contact" }, window.SITE.company.email],
              ].map(([k, v], i) => (
                <div key={i} style={{ padding: "16px 22px", borderBottom: "1px solid var(--border-subtle)", borderRight: i % 2 === 0 ? "1px solid var(--border-subtle)" : "none" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-300)" }}>{T(k, lang)}</div>
                  <div className="tabular" style={{ marginTop: 5, fontSize: 15, color: "var(--navy-900)", lineHeight: 1.5 }}>{v}</div>
                </div>
              ))}
            </div>
          </Card>
        </Container>
      </Section>

      {/* ---------- CTA ---------- */}
      <Section pad="sm">
        <Container>
          <TickRule ticks={13} />
          <div style={{ marginTop: 44, display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 40, flexWrap: "wrap" }}>
            <div>
              <h2 style={{ fontSize: 46, letterSpacing: "-0.035em", lineHeight: 1.05, maxWidth: 620 }}>
                {T({ tr: "Sadakat programınızı birlikte kuralım", en: "Let us build your loyalty program together" }, lang)}
              </h2>
              <p style={{ marginTop: 16, fontSize: 18, lineHeight: 1.6, color: "var(--text-secondary)", maxWidth: 560 }}>
                {T({ tr: "Her türlü sorunuz için bizimle iletişime geçin.", en: "Get in touch with us for any questions you have." }, lang)}
              </p>
            </div>
            <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, { HomeScreen, SettlementLedger });