// Atlubni Docs — page content (split per page; rendered by router)
const { useState: uS, useEffect: uE, useMemo: uM } = React;

// ============ /docs LANDING ============
const PageIndex = ({ t, lang, go, openCP }) => (
  <div className="content fade-in">
    <div className="docs-hero">
      <h1>{lang === "ar" ? "توثيق Atlubni Map" : "Atlubni Map Docs"}</h1>
      <p>{lang === "ar" ? "خرائط ذاتيّة الاستضافة وذكاء موقعي للعراق وسوريا والأردن. كل ما تحتاجه للتقييم، الإعداد، والمرجعة." : "Self-hosted maps and location intelligence for Iraq, Syria, and Jordan. Everything you need to evaluate, integrate, and reference."}</p>
      <div className="big-search" onClick={openCP} role="button" tabIndex={0}>
        <DocIcon name="search" size={16} />
        <span className="ph">{t.searchPh}</span>
        <span className="kbd">{t.cmdK}</span>
      </div>
    </div>

    <div className="cta-row">
      <a className="cta-card" onClick={() => go("quickstart")} href={`#/quickstart`}>
        <div className="ic"><DocIcon name="rocket" size={16}/></div>
        <span className="h">{lang === "ar" ? "البدء السريع" : "Quickstart"}</span>
        <span className="d">{lang === "ar" ? "أوّل طلب يعمل خلال خمس دقائق." : "Your first request working in 5 minutes."}</span>
        <span className="arr">{lang === "ar" ? "ابدأ" : "Start"} →</span>
      </a>
      <a className="cta-card" onClick={() => go("geocoding")} href={`#/geocoding`}>
        <div className="ic"><DocIcon name="book" size={16}/></div>
        <span className="h">{lang === "ar" ? "مرجع الـ API" : "API Reference"}</span>
        <span className="d">{lang === "ar" ? "كل النقاط، المعاملات، والاستجابات." : "Every endpoint, parameter, and response."}</span>
        <span className="arr">{lang === "ar" ? "تصفّح" : "Browse"} →</span>
      </a>
      <a className="cta-card" onClick={() => go("g-dispatch")} href={`#/g-dispatch`}>
        <div className="ic"><DocIcon name="code" size={16}/></div>
        <span className="h">{lang === "ar" ? "أدلّة" : "Guides"}</span>
        <span className="d">{lang === "ar" ? "وصفات لمشاكل حقيقيّة." : "Recipes for real problems."}</span>
        <span className="arr">{lang === "ar" ? "اقرأ" : "Read"} →</span>
      </a>
    </div>

    <h2 style={{ fontSize: 18, marginBottom: 14, color: "var(--ink)" }}>{lang === "ar" ? "الواجهات الأساسية" : "Core APIs"}</h2>
    <div className="api-grid">
      {[
        { id: "geocoding", ic: "pin", en: ["Geocoding", "Forward, reverse, and batch — coordinates ↔ Arabic and English addresses."], ar: ["الترميز الجغرافي", "أمامي، عكسي، وبالجملة — إحداثيّات ↔ عناوين بالعربية والإنكليزية."] },
        { id: "routing", ic: "route", en: ["Routing", "Driving, walking, distance matrices with live traffic for IQ/SY/JO."], ar: ["التوجيه", "قيادة، مشي، ومصفوفات مسافات مع مرور حيّ."] },
        { id: "matching", ic: "users", en: ["Driver Matching", "Nearest, nearby, snap-to-road for delivery and ride-hail."], ar: ["مطابقة السائقين", "الأقرب، القريبون، ومحاذاة الطرق."] },
        { id: "places", en: ["Places Search", "By name, category, or autocomplete across 1.4M places."], ar: ["بحث الأماكن", "بالاسم أو الفئة أو الإكمال التلقائي عبر ١٫٤ مليون مكان."], ic: "search" },
        { id: "bulk", ic: "upload", en: ["Bulk Import", "CSV, Excel, OSM bbox — process millions of rows."], ar: ["استيراد بالجملة", "CSV، Excel، OSM bbox — معالجة ملايين الصفوف."] },
      ].map(c => (
        <a key={c.id} className="api-card" onClick={() => go(c.id)} href={`#/${c.id}`}>
          <div className="top"><DocIcon name={c.ic} size={14}/> {lang === "ar" ? c.ar[0] : c.en[0]}</div>
          <p>{lang === "ar" ? c.ar[1] : c.en[1]}</p>
        </a>
      ))}
    </div>

    <Callout type="tip" title={lang === "ar" ? "تحتاج مساعدة؟" : "Need help?"}>
      {lang === "ar" ? <>
        راجع <a onClick={()=>go("faq")} href="#/faq">الأسئلة الشائعة</a>، أو <a onClick={()=>go("status")} href="#/status">صفحة الحالة</a>، أو راسل <code>support@atlubni.io</code>.
      </> : <>
        Check the <a onClick={()=>go("faq")} href="#/faq">FAQ</a>, the <a onClick={()=>go("status")} href="#/status">status page</a>, or email <code>support@atlubni.io</code>.
      </>}
    </Callout>
  </div>
);

// ============ INTRODUCTION ============
const PageIntro = ({ lang }) => (
  <div className="prose">
    <h2 id="what-it-is">{lang === "ar" ? "ما هو Atlubni Map؟" : "What Atlubni Map is"}<a href="#what-it-is" className="anchor">#</a></h2>
    <p>{lang === "ar" ? "Atlubni Map منصّة خرائط وذكاء موقعي مصمَّمة خصّيصًا للعراق وسوريا والأردن. تُغطّي ما تتجاهله المنصّات العالميّة: أسماء الشوارع بالعربية، الأحياء غير المعنونة، طرق غير ممرّسة، وبيانات تتجدّد أسبوعيًا من فرق محلية." : "Atlubni Map is a mapping and location-intelligence platform designed specifically for Iraq, Syria, and Jordan. It covers what global providers miss: Arabic street names, unaddressed neighborhoods, unsealed roads, and weekly-refreshed data sourced from local teams."}</p>
    <p>{lang === "ar" ? "المنصّة تعمل عبر REST API، أو يمكن استضافتها ذاتيًا داخل بنيتك التحتية." : "The platform runs as a hosted REST API, or self-hosted inside your own infrastructure."}</p>

    <h2 id="who-its-for">{lang === "ar" ? "لمن هي" : "Who it's for"}<a href="#who-its-for" className="anchor">#</a></h2>
    <ul>
      <li><strong>{lang === "ar" ? "تطبيقات التوصيل والمشاركة" : "Delivery and ride-hail apps"}</strong> — {lang === "ar" ? "توجيه ومطابقة السائقين بأقلّ تأخير." : "routing and driver matching with low latency."}</li>
      <li><strong>{lang === "ar" ? "البنوك والمؤسّسات" : "Banks and enterprises"}</strong> — {lang === "ar" ? "ترميز عناوين العملاء مع الامتثال للسيادة." : "customer-address geocoding with data-sovereignty compliance."}</li>
      <li><strong>{lang === "ar" ? "المنظمات الإنسانية" : "Humanitarian orgs"}</strong> — {lang === "ar" ? "خرائط لمناطق غير مغطّاة." : "maps for under-covered regions."}</li>
    </ul>

    <h2 id="how-its-different">{lang === "ar" ? "ما الذي يميّزه" : "How it's different"}<a href="#how-its-different" className="anchor">#</a></h2>
    <Callout type="info" title={lang === "ar" ? "ملاحظة" : "Note"}>
      {lang === "ar" ? "نحن لسنا بديلًا عن Google Maps في كل مكان — فقط حيث تكون البيانات المحلية ذات أهمية." : "We're not a Google-Maps replacement everywhere — only where local data matters."}
    </Callout>
    <ul>
      <li>{lang === "ar" ? "أسماء عربية أصلية، ليست مُحوَّلة." : "Native Arabic names, not transliterated."}</li>
      <li>{lang === "ar" ? "تحديث أسبوعي للبيانات من فرق ميدانية." : "Weekly data refresh from local teams."}</li>
      <li>{lang === "ar" ? "بيانات تبقى داخل الإقليم — مهم للامتثال." : "Data stays in-region — important for compliance."}</li>
      <li>{lang === "ar" ? "تسعير شفاف، بدون مفاجآت." : "Transparent pricing, no surprises."}</li>
    </ul>
  </div>
);

// ============ QUICKSTART ============
const PageQuickstart = ({ lang, t }) => {
  const steps = lang === "ar" ? [
    { h: "أنشئ مفتاح API", c: <p>اشترك وأنشئ مفتاحًا من اللوحة. المفاتيح بالشكل <code>atl_live_…</code>.</p> },
    { h: "أرسل أوّل طلب", c: <CodeBlock t={{...t, lang}} samples={[{ lang: "bash", name: "cURL", code: `curl https://api.atlubni.io/v1/geocode/search \\\n  -H "Authorization: Bearer $ATLUBNI_KEY" \\\n  --data-urlencode "q=شارع الرشيد، بغداد"` }]} /> },
    { h: "افحص الاستجابة", c: <CodeBlock t={{...t, lang}} samples={[{ lang: "json", name: "200 OK", code: `{\n  "results": [\n    {\n      "place_id": "iq_bg_rashid_01",\n      "name_ar": "شارع الرشيد",\n      "name_en": "Al-Rasheed Street",\n      "lat": 33.3399,\n      "lon": 44.4078,\n      "confidence": 0.94\n    }\n  ]\n}` }]} /> },
    { h: "بدّل إلى لغتك", c: <CodeBlock t={{...t, lang}} samples={[
      { lang: "js", name: "Node", code: `import { Atlubni } from "@atlubni/sdk";\nconst atl = new Atlubni(process.env.ATLUBNI_KEY);\nconst res = await atl.geocode.search({ q: "شارع الرشيد، بغداد" });` },
      { lang: "python", name: "Python", code: `from atlubni import Client\natl = Client(api_key=os.environ["ATLUBNI_KEY"])\nres = atl.geocode.search(q="شارع الرشيد، بغداد")` },
    ]} /> },
    { h: "الخطوات التالية", c: <p>راجع <a href="#/auth">المصادقة</a>، <a href="#/rate-limits">الحدود</a>، أو <a href="#/geocoding">مرجع الترميز الجغرافي</a>.</p> },
  ] : [
    { h: "Get an API key", c: <p>Sign up and create one in the dashboard. Keys look like <code>atl_live_…</code>.</p> },
    { h: "Make your first request", c: <CodeBlock t={{...t, lang}} samples={[{ lang: "bash", name: "cURL", code: `curl https://api.atlubni.io/v1/geocode/search \\\n  -H "Authorization: Bearer $ATLUBNI_KEY" \\\n  --data-urlencode "q=Al-Rasheed Street, Baghdad"` }]} /> },
    { h: "Inspect the response", c: <CodeBlock t={{...t, lang}} samples={[{ lang: "json", name: "200 OK", code: `{\n  "results": [\n    {\n      "place_id": "iq_bg_rashid_01",\n      "name_ar": "شارع الرشيد",\n      "name_en": "Al-Rasheed Street",\n      "lat": 33.3399,\n      "lon": 44.4078,\n      "confidence": 0.94\n    }\n  ]\n}` }]} /> },
    { h: "Switch to your language", c: <CodeBlock t={{...t, lang}} samples={[
      { lang: "js", name: "Node", code: `import { Atlubni } from "@atlubni/sdk";\nconst atl = new Atlubni(process.env.ATLUBNI_KEY);\nconst res = await atl.geocode.search({ q: "Al-Rasheed St, Baghdad" });` },
      { lang: "python", name: "Python", code: `from atlubni import Client\natl = Client(api_key=os.environ["ATLUBNI_KEY"])\nres = atl.geocode.search(q="Al-Rasheed St, Baghdad")` },
    ]} /> },
    { h: "Next steps", c: <p>Read <a href="#/auth">Authentication</a>, <a href="#/rate-limits">Rate limits</a>, or jump to the <a href="#/geocoding">Geocoding reference</a>.</p> },
  ];
  return (
    <div className="prose">
      <Callout type="tip" title={lang === "ar" ? "نصيحة" : "Tip"}>
        {lang === "ar" ? "تستطيع تجربة كلّ نقطة مباشرةً من المتصفّح في صفحة المرجع — انقر «جرّبها»." : "You can try every endpoint live in the browser on its reference page — click \"Try it\"."}
      </Callout>
      <div className="stepper">
        {steps.map((s, i) => (
          <div key={i} className={`step ${i < 1 ? "done" : i === 1 ? "current" : ""}`}>
            <div className="num">{i + 1}</div>
            <h3>{s.h}</h3>
            {s.c}
          </div>
        ))}
      </div>
    </div>
  );
};

// ============ AUTH ============
const PageAuth = ({ lang, t }) => (
  <div className="prose">
    <p>{lang === "ar" ? "كل طلب لـ Atlubni Map يجب أن يحمل ترويسة Authorization مع رمز Bearer. المفاتيح تُنشأ من اللوحة وتظهر مرّة واحدة فقط." : "Every Atlubni Map request must carry an Authorization header with a Bearer token. Keys are generated in the dashboard and shown exactly once."}</p>

    <h2 id="header">{lang === "ar" ? "ترويسة الطلب" : "The header"}<a className="anchor" href="#header">#</a></h2>
    <CodeBlock t={{...t, lang}} samples={[
      { lang: "bash", name: "cURL", code: `curl https://api.atlubni.io/v1/geocode/search?q=Amman \\\n  -H "Authorization: Bearer atl_live_a1b2c3d4e5"` },
      { lang: "js", name: "Node", code: `const res = await fetch("https://api.atlubni.io/v1/geocode/search?q=Amman", {\n  headers: { Authorization: \`Bearer \${process.env.ATLUBNI_KEY}\` }\n});` },
      { lang: "python", name: "Python", code: `import requests, os\nres = requests.get(\n  "https://api.atlubni.io/v1/geocode/search",\n  params={"q": "Amman"},\n  headers={"Authorization": f"Bearer {os.environ['ATLUBNI_KEY']}"})` },
      { lang: "bash", name: "PHP", code: `$ch = curl_init("https://api.atlubni.io/v1/geocode/search?q=Amman");\ncurl_setopt($ch, CURLOPT_HTTPHEADER, ["Authorization: Bearer " . getenv("ATLUBNI_KEY")]);\n$r = curl_exec($ch);` },
    ]} />

    <Callout type="warning" title={lang === "ar" ? "تحذير" : "Warning"}>
      {lang === "ar" ? "لا تكشف المفاتيح في كود العميل أبدًا. استخدم ‎خادمًا وسيطًا أو مفتاحًا عامًّا محدود الصلاحية. عند الشكّ بالتسريب، قم بالتدوير من اللوحة فورًا." : "Never expose keys in client-side code. Use a server-side proxy or a public, scope-limited key. On suspected leak, rotate from the dashboard immediately."}
    </Callout>

    <h2 id="scopes">{lang === "ar" ? "الصلاحيات" : "Key scopes"}<a className="anchor" href="#scopes">#</a></h2>
    <p>{lang === "ar" ? "كل مفتاح يمكن تقييده بصلاحيات وقيود سرعة مستقلّة:" : "Each key can be restricted with scopes and an independent rate limit:"}</p>
    <table className="tbl">
      <thead><tr><th>Scope</th><th>{lang === "ar" ? "السماح" : "Grants"}</th></tr></thead>
      <tbody>
        <tr><td><code>geocode:read</code></td><td>{lang === "ar" ? "ترميز أمامي وعكسي وبالجملة." : "Forward, reverse, batch geocoding."}</td></tr>
        <tr><td><code>routing:read</code></td><td>{lang === "ar" ? "حساب الطرق والمصفوفات." : "Route and matrix calculations."}</td></tr>
        <tr><td><code>matching:read</code></td><td>{lang === "ar" ? "مطابقة السائقين والأقرب." : "Driver matching and nearest."}</td></tr>
        <tr><td><code>places:read</code></td><td>{lang === "ar" ? "البحث والإكمال التلقائي." : "Search and autocomplete."}</td></tr>
        <tr><td><code>bulk:write</code></td><td>{lang === "ar" ? "رفع CSV ‏و OSM ‏bbox." : "Upload CSV and OSM bbox jobs."}</td></tr>
      </tbody>
    </table>
  </div>
);

// ============ RATE LIMITS ============
const PageRateLimits = ({ lang, t }) => (
  <div className="prose">
    <p>{lang === "ar" ? "لكل خطّة حدود ساعيّة، يوميّة، وشهريّة. تُطبَّق الحدود لكل مفتاح وتُعاد كل ساعة كاملة UTC." : "Each plan has hourly, daily, and monthly buckets. Limits apply per-key and reset on the UTC hour."}</p>

    <h2 id="per-plan">{lang === "ar" ? "حدود لكل خطّة" : "Per-plan limits"}<a className="anchor" href="#per-plan">#</a></h2>
    <table className="tbl">
      <thead><tr><th>{lang === "ar" ? "الخطّة" : "Plan"}</th><th>{lang === "ar" ? "ساعيًّا" : "Hourly"}</th><th>{lang === "ar" ? "يوميًّا" : "Daily"}</th><th>{lang === "ar" ? "شهريًّا" : "Monthly"}</th></tr></thead>
      <tbody>
        <tr><td>Free</td><td>1,000</td><td>10,000</td><td>50,000</td></tr>
        <tr><td>Starter</td><td>20,000</td><td>200,000</td><td>2,000,000</td></tr>
        <tr><td>Growth</td><td>120,000</td><td>2,000,000</td><td>30,000,000</td></tr>
        <tr><td>Enterprise</td><td>{lang === "ar" ? "مخصّص" : "Custom"}</td><td>{lang === "ar" ? "مخصّص" : "Custom"}</td><td>{lang === "ar" ? "مخصّص" : "Custom"}</td></tr>
      </tbody>
    </table>

    <h2 id="headers">{lang === "ar" ? "ترويسات الاستجابة" : "Response headers"}<a className="anchor" href="#headers">#</a></h2>
    <table className="tbl">
      <tbody>
        <tr><td><code>X-RateLimit-Limit</code></td><td>{lang === "ar" ? "الحدّ الكامل لهذه الفترة." : "Total quota for the window."}</td></tr>
        <tr><td><code>X-RateLimit-Remaining</code></td><td>{lang === "ar" ? "المتبقّي." : "Remaining requests."}</td></tr>
        <tr><td><code>X-RateLimit-Reset</code></td><td>{lang === "ar" ? "وقت إعادة التعيين بالـ UTC." : "Epoch seconds when window resets."}</td></tr>
        <tr><td><code>Retry-After</code></td><td>{lang === "ar" ? "ثوانٍ يجب الانتظار عند 429." : "Seconds to wait on 429."}</td></tr>
      </tbody>
    </table>

    <h2 id="example-429">{lang === "ar" ? "استجابة 429" : "Example 429"}<a className="anchor" href="#example-429">#</a></h2>
    <CodeBlock t={{...t, lang}} samples={[{ lang: "json", name: "429", code: `{\n  "error": {\n    "code": "rate_limited",\n    "message": "Hourly quota of 20000 exhausted.",\n    "retry_after": 412\n  }\n}` }]} />
  </div>
);

// ============ ERRORS ============
const PageErrors = ({ lang, t }) => {
  const [q, setQ] = uS("");
  const errs = window.__DOCS_ERRORS;
  const filtered = errs.filter(e => !q || String(e.code).includes(q) || e.slug.includes(q.toLowerCase()));
  return (
    <div className="prose">
      <p>{lang === "ar" ? "كل خطأ يُرجَع بصيغة JSON مع code و message. القائمة أدناه شاملة." : "Every error is returned as JSON with code and message. The list below is exhaustive."}</p>
      <div className="err-filter">
        <DocIcon name="filter" size={14} />
        <input value={q} onChange={e => setQ(e.target.value)} placeholder={t.filterPh} dir={lang === "ar" ? "rtl" : "ltr"}/>
      </div>
      <table className="tbl">
        <thead><tr><th>{lang === "ar" ? "حالة" : "Status"}</th><th>Code</th><th>{lang === "ar" ? "المعنى" : "Meaning"}</th><th>{lang === "ar" ? "الإصلاح" : "Fix"}</th></tr></thead>
        <tbody>
          {filtered.map(e => (
            <tr key={e.code} id={String(e.code)}>
              <td><span className={`status-pill ${e.code < 500 ? "s4xx" : "s5xx"}`}>{e.code}</span></td>
              <td><code>{e.slug}</code></td>
              <td>{e.meaning[lang]}</td>
              <td>{e.fix[lang]}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <h2 id="shape">{lang === "ar" ? "شكل الخطأ" : "Error shape"}<a className="anchor" href="#shape">#</a></h2>
      <CodeBlock t={{...t, lang}} samples={[{ lang: "json", name: "error", code: `{\n  "error": {\n    "code": "invalid_query",\n    "message": "lat 91.0 outside valid range -90..90",\n    "request_id": "req_01HSY3..."\n  }\n}` }]} />
    </div>
  );
};

window.PageIndex = PageIndex;
window.PageIntro = PageIntro;
window.PageQuickstart = PageQuickstart;
window.PageAuth = PageAuth;
window.PageRateLimits = PageRateLimits;
window.PageErrors = PageErrors;