// Uygulama detay sayfaları (tek şablon) + davet landing + yasal sayfalar

function PlatformChips({ app }) {
  return <>
    {app.play && <span className="chip">Android</span>}
    {app.ios && <span className="chip">iOS</span>}
  </>;
}

// PatissTray'in "yakında" rozeti: iki mağazada da henüz yok.
function pendingLabel(app, raw) {
  if (app.key === 'patisstray') return raw.soonBadge;
  return null;
}

// Uygulamanın kendi hero notu: Tenax davet kodu (?davet=KOD, uygulamadaki paylaş
// ekranı üretiyor — Tenax/Core/Config.swift), PatissTray erişim kutusu.
function HeroExtras({ app, raw }) {
  if (app.key === 'tenax') {
    const code = (new URLSearchParams(window.location.search).get('davet') || '')
      .toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 12);
    return <>
      {code && (
        <div className="note-box">
          <div className="note-h">{raw.invite.title}</div>
          <div className="note-code">{code}</div>
          <p>{raw.invite.lead}</p>
          <p className="note-dim">{raw.invite.note}</p>
        </div>
      )}
    </>;
  }
  if (app.key === 'patisstray') {
    return <>
      <div className="note-box">
        <div className="note-h">{raw.access.title}</div>
        <p>{raw.access.lead}</p>
        <p className="note-dim">{raw.access.note}</p>
      </div>
      <p className="note-dim">{raw.soonNote}</p>
    </>;
  }
  return null;
}

function AppHeroBig({ app, x }) {
  const t = useT();
  const name = x.name;
  const fs = `min(24vw, calc((100vw - 2 * var(--pad)) / ${(Math.max(name.length, 4) * 0.9).toFixed(2)}))`;
  return (
    <section className="ah wrap" data-screen-label={name + ' hero'}>
      <div className="ah-top">
        <div className="crumbs"><Link to="/">kolabs</Link><span>/</span><span>{t.ui.apps}</span><span>/</span><b>{x.fullName}</b></div>
        <div className="ah-tags"><span className="chip chip-c">{app.soon ? t.home.statusSoon : t.home.statusLive}</span><span className="chip">{x.cat}</span><PlatformChips app={app} /></div>
      </div>
      <h1 className="ah-name" style={{ fontSize: fs }}><SplitWord text={name} /></h1>
      <div className="ah-row">
        <img src={app.logo} alt="" className="ah-logo" />
        <p className="ah-tag">{x.tagline}</p>
        <div className="ah-lead">
          <p>{x.lead}</p>
          <StoreButtons app={app} pending={pendingLabel(app, x.raw)} />
          <HeroExtras app={app} raw={x.raw} />
        </div>
      </div>
    </section>
  );
}

// Uygulamanın tanıtım videosu. Ekran görüntüleri sayfanın altındaki
// "Ekranlar" bölümünde; videosu olmayan uygulamada bu bölüm hiç çıkmaz.
function AppShowcase({ app, x }) {
  const t = useT();
  const { lang } = useLang();
  if (!app.video) return null;
  const poster = shotsOf(app, lang)[0];
  return (
    <section className="sc wrap">
      <div className="sc-panel has-video" style={{ '--c': app.color }}>
        <div className="sc-video">
          {poster && <div className="sc-fallback" style={{ backgroundImage: `url(${poster})` }}></div>}
          <iframe src={`https://www.youtube.com/embed/${app.video}?autoplay=1&mute=1&loop=1&playlist=${app.video}&controls=0&modestbranding=1&rel=0&playsinline=1&iv_load_policy=3&disablekb=1&fs=0`} title="video" frameBorder="0" allow="autoplay; encrypted-media"></iframe>
        </div>
        <div className="sc-label"><span>{x.name}</span></div>
      </div>
    </section>
  );
}

function AppStats({ x }) {
  if (!x.stats) return null;
  return (
    <section className="st wrap">
      {x.stats.map(([n, l], i) => (
        <Reveal key={i} className="st-cell" delay={i * 90}><div className="st-n">{n}</div><div className="st-l">{l}</div></Reveal>
      ))}
    </section>
  );
}

function AppFeatures({ app, x, num = '01' }) {
  const t = useT();
  const { lang } = useLang();
  return (
    <section className="ft wrap" style={{ '--c': app.color }}>
      <div className="sec-head"><SectionLabel num={num}>{t.common.features}</SectionLabel><h2 className="h-xl">{t.common.featuresQ}</h2></div>
      <div className="ft-list">
        {x.features.map((f, i) => {
          const inner = <><span className="ft-n">{String(i + 1).padStart(2, '0')}</span><span className="ft-t">{f.title}</span><span className="ft-d">{f.desc}</span><span className="ft-ar">{f.to ? '↓' : '→'}</span></>;
          return f.to
            ? <a key={i} href={applyLang(app.route + '/' + f.to, lang)} className="ft-row" onClick={(e) => { e.preventDefault(); scrollToId(f.to); }}>{inner}</a>
            : <Reveal key={i} className="ft-row" delay={i * 60}>{inner}</Reveal>;
        })}
      </div>
    </section>
  );
}

function AppScreens({ app, x, num = '02' }) {
  const t = useT();
  const { lang } = useLang();
  const shots = shotsOf(app, lang);
  if (!shots.length) return null;
  return (
    <section className="scr">
      <div className="wrap sec-head"><SectionLabel num={num}>{t.ui.screens}</SectionLabel><h2 className="h-xl">{t.ui.screensTitle}</h2></div>
      <div className="scr-track">
        {shots.map((s, i) => <Reveal key={i} className="scr-item" delay={i * 70}><img src={s} alt={`${x.name} ${i + 1}`} /><span>{String(i + 1).padStart(2, '0')}</span></Reveal>)}
      </div>
    </section>
  );
}

function AppFaq({ app, x, num = '03' }) {
  const t = useT();
  const [open, setOpen] = useState(0);
  return (
    <section className="fq wrap" style={{ '--c': app.color }}>
      <div className="sec-head"><SectionLabel num={num}>{t.common.faq}</SectionLabel><h2 className="h-xl">{t.common.faq}.</h2></div>
      <div className="fq-list">
        {x.faq.map((f, i) => (
          <div key={i} className={'fq-item ' + (open === i ? 'open' : '')}>
            <button className="fq-q" onClick={() => setOpen(open === i ? -1 : i)}><span>{f.q}</span><span className="fq-plus">+</span></button>
            <div className="fq-a"><p>{f.a}</p></div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Tenax ve PatissTray sayfaları mağazaların ZORUNLU "Support URL" alanını karşılıyor:
// destek e-postası ve yasal linkler sayfada görünür kalmalı.
function SupportRow({ raw }) {
  const t = useT();
  return (
    <div className="acta-support">
      <p>{raw.support.desc}</p>
      <div className="btn-row">
        <a href="mailto:info@kolabs.tr" className="btn btn-c"><span>info@kolabs.tr</span><span className="btn-ar">↗</span></a>
        <Link to="/gizlilik" className="btn btn-line">{t.footer.privacy}</Link>
        <Link to="/kullanim-sartlari" className="btn btn-line">{t.footer.terms}</Link>
      </div>
    </div>
  );
}

function AppCta({ app, x }) {
  const t = useT();
  const i = APPS.indexOf(app);
  const next = APPS[(i + 1) % APPS.length];
  const raw = x.raw;
  return (
    <>
      <section className="acta wrap" style={{ '--c': app.color }}>
        <Reveal as="h2" className="acta-h">{x.ctaTitle || (raw && raw.support && raw.support.title)}</Reveal>
        <StoreButtons app={app} variant="c" pending={pendingLabel(app, raw)} />
        {raw && raw.support && <SupportRow raw={raw} />}
      </section>
      <Link to={next.route} className="next" style={{ '--c': next.color }}>
        <div className="wrap next-in">
          <span className="next-l">{t.ui.nextApp}</span>
          <span className="next-name">{t.appsMeta[next.key].name}</span>
          <span className="next-ar">→</span>
        </div>
      </Link>
    </>
  );
}

function AppPage({ appKey, sub }) {
  const t = useT();
  const app = appByKey(appKey);
  const x = appText(t, appKey);
  useEffect(() => { if (sub) { const tm = setTimeout(() => scrollToId(sub), 250); return () => clearTimeout(tm); } }, [appKey, sub]);
  const isN = appKey === 'noctavia';
  return (
    <main className="app-page" style={{ '--c': app.color }} data-screen-label={x.name}>
      <AppHeroBig app={app} x={x} />
      <AppShowcase app={app} x={x} />
      <AppStats x={x} />
      <AppFeatures app={app} x={x} />
      {isN ? <NoctaviaChapters app={app} /> : null}
      <AppScreens app={app} x={x} num={isN ? '07' : '02'} />
      <AppFaq app={app} x={x} num={isN ? '08' : '03'} />
      <AppCta app={app} x={x} />
    </main>
  );
}

// ─── Zikir Zinciri davet landing (Universal Link: /z/CODE = zincir, /u/CODE = arkadaş) ──
// Uygulama KURULUYSA link doğrudan uygulamada açılır ve bu sayfa hiç görünmez. Bu landing
// yalnızca uygulama YOKKEN (veya masaüstünde) gösterilir → mağazaya yönlendirir; kurulum
// sonrası linke tekrar dokununca uygulama odaya/arkadaş ekleme ekranına düşer.
function ChainInviteLanding({ kind }) {
  const { lang } = useLang();
  const tr = lang === 'tr';
  const isFriend = kind === 'friend';
  const app = appByKey('zikirmatik');
  const seg = window.location.pathname.split('/').filter(Boolean);
  const code = (seg[seg.length - 1] || '').toUpperCase();

  // Yedek yönlendirme: index.html'deki erken script kaçırırsa (ör. SPA gezintisi), mobilde
  // cihaza göre mağazaya gönder. Masaüstünde aşağıdaki landing (iki buton) gösterilir.
  useEffect(() => {
    const ua = navigator.userAgent || navigator.vendor || '';
    const isIOS = /iPad|iPhone|iPod/.test(ua) ||
                  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
    const isAndroid = /android/i.test(ua);
    if (isIOS) window.location.replace(ZIKIRMATIK_APP_STORE);
    else if (isAndroid) {
      // Uygulama kuruluysa intent:// davetle açar, değilse Play Store'a düşer.
      window.location.replace('intent://' + window.location.host + window.location.pathname +
        '#Intent;scheme=https;package=com.kolabs.zikirmatik;S.browser_fallback_url=' +
        encodeURIComponent(playUrl('com.kolabs.zikirmatik')) + ';end');
    }
  }, []);
  const c = {
    crumb: tr ? 'Davet' : 'Invite',
    h1: isFriend ? (tr ? 'Arkadaşlık daveti' : 'Friend invitation')
                 : (tr ? 'Zikir Zinciri daveti' : 'Dhikr Chain invitation'),
    lead: isFriend
      ? (tr ? 'Zikirmatik’te bir arkadaşlık davetin var. Uygulamayı yükle; bu bağlantıya tekrar dokununca davet açılır.'
            : 'You have a friend invite on Zikirmatik. Install the app; tap this link again and the invite opens.')
      : (tr ? 'Ortak bir zikir hedefine katılmaya davet edildin. Uygulamayı yükle; bu bağlantıya tekrar dokununca odaya düşersin.'
            : 'You’re invited to join a shared dhikr goal. Install the app; tap this link again and you’ll land in the room.'),
    codeLabel: tr ? 'Davet kodu' : 'Invite code',
    note: tr ? 'Uygulamayı yükledikten sonra bu bağlantıya tekrar dokun; kodu elle de girebilirsin.'
             : 'After installing, tap this link again; you can also enter the code manually.',
  };
  return (
    <main className="app-page" style={{ '--c': app.color }}>
      <section className="ah wrap">
        <div className="ah-top">
          <div className="crumbs"><Link to="/">kolabs</Link><span>/</span><Link to="/zikirmatik">Zikirmatik</Link><span>/</span><b>{c.crumb}</b></div>
        </div>
        <h1 className="h-xl" style={{ marginTop: 48 }}>{c.h1}</h1>
        <div className="ah-row">
          <img src={app.logo} alt="" className="ah-logo" />
          <div className="ah-lead">
            {code && <div className="note-box"><div className="note-h">{c.codeLabel}</div><div className="note-code">{code}</div></div>}
          </div>
          <div className="ah-lead">
            <p>{c.lead}</p>
            <StoreButtons app={app} />
            <p className="note-dim">{c.note}</p>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Legal: shared layout ─────────────────────────────────────────
function LegalPage({ crumbLabel, eyebrow, title, lastUpdated, children }) {
  const t = useT();
  return (
    <main className="legal-page">
      <div className="detail-wrap" style={{ maxWidth: 840 }}>
        <Crumbs items={[{ label: 'kolabs', to: '/' }, { label: crumbLabel }]} />
        <header style={{ borderTop: '1px solid var(--line)', paddingTop: 56, paddingBottom: 8 }}>
          <div className="detail-eyebrow"><span className="pill">{eyebrow}</span></div>
          <h1 className="detail-h1">{title}</h1>
          <p className="del-updated">{t.legalLastUpdated} {lastUpdated}</p>
        </header>
        <div className="legal-body">{children}</div>
      </div>
    </main>
  );
}

// Gizlilik: tek adres (/gizlilik), üstte uygulama seçici. Mağaza incelemecisi
// kendi uygulamasının sekmesinde o uygulamaya özel her şeyi + ortak hükümleri
// aynı yerde görür. ?app=<key> ile doğrudan bir sekme açılır; eski
// /<uygulama>/privacy adresleri de ilgili sekmeye düşer.
const PRIVACY_TABS = ['general', ...APPS.map(a => a.key)];
function PrivacyPolicy({ initialApp }) {
  const t = useT();
  const p = t.privacy;
  const fromUrl = new URLSearchParams(window.location.search).get('app');
  const [tab, setTab] = useState(PRIVACY_TABS.includes(fromUrl) ? fromUrl : (initialApp || 'general'));
  const pick = (k) => {
    setTab(k);
    const url = new URL(window.location.href);
    if (k === 'general') url.searchParams.delete('app'); else url.searchParams.set('app', k);
    window.history.replaceState({}, '', url.pathname + url.search);
  };
  const app = tab !== 'general' && appByKey(tab);
  const a = app && p.apps[tab];
  return (
    <LegalPage crumbLabel={p.crumb} eyebrow={p.eyebrow} title={p.title} lastUpdated={p.lastUpdated}>
      {p.intro}
      <div className="pv-pick">
        <div className="pv-pick-h">{p.pick}</div>
        <div className="pv-tabs" role="tablist">
          {PRIVACY_TABS.map(k => {
            const ap = k !== 'general' && appByKey(k);
            return (
              <button key={k} role="tab" aria-selected={tab === k} className={'pv-tab ' + (tab === k ? 'on' : '')} style={ap ? { '--c': ap.color } : undefined} onClick={() => pick(k)}>
                {ap ? <img src={ap.logo} alt="" /> : <span className="pv-all">✦</span>}
                <span>{ap ? t.appsMeta[k].name : p.generalTab}</span>
              </button>
            );
          })}
        </div>
      </div>
      {app ? (
        <section className="pv-app" key={tab} style={{ '--c': app.color }}>
          <header className="pv-app-h">
            <img src={app.logo} alt="" />
            <div>
              <h2>{t.home.apps[tab].name}</h2>
              <p className="del-pkg">{a.pkg}</p>
            </div>
          </header>
          {a.body}
          <div className="pv-sep">{p.generalNote}</div>
        </section>
      ) : null}
      <div className="pv-general">{p.general}</div>
    </LegalPage>
  );
}

function TermsOfService() {
  const p = useT().terms;
  return <LegalPage crumbLabel={p.crumb} eyebrow={p.eyebrow} title={p.title} lastUpdated={p.lastUpdated}>{p.body}</LegalPage>;
}

Object.assign(window, { AppPage, ChainInviteLanding, PrivacyPolicy, TermsOfService });