// screens-core.jsx — Landing, Onboarding, Dashboard, Account Detail

function Landing({ lang, setRoute }) {
  const isAr = lang === "ar";
  return (
    <div style={{ background: "var(--bg)", minHeight: "100vh" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "20px 32px" }}>
        {/* Mini topbar */}
        <header className="row" style={{ padding: "14px 0 36px", borderBottom: "1px solid var(--line)" }}>
          <div className="brand" style={{ padding: 0 }}>
            <div className="brand-mark">R</div>
            <div className="brand-name">
              <b>{isAr ? "روّج برو" : "Rawj Pro"}</b>
              <span>rawj.pro</span>
            </div>
          </div>
          <div className="row" style={{ marginInlineStart: "auto", gap: 24, fontSize: 13.5, color: "var(--muted)" }}>
            <a>{isAr ? "المنتج" : "Product"}</a>
            <a>{isAr ? "الأسعار" : "Pricing"}</a>
            <a>{isAr ? "الأمان" : "Security"}</a>
            <a>{isAr ? "العملاء" : "Customers"}</a>
            <button className="btn" onClick={() => setRoute("login")}>{isAr ? "تسجيل الدخول" : "Sign in"}</button>
            <button className="btn btn-primary" onClick={() => setRoute("signup")}>{isAr ? "ابدأ الآن" : "Get started"}</button>
          </div>
        </header>

        {/* Hero */}
        <section style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 64, padding: "56px 0 40px", alignItems: "center" }}>
          <div>
            <span className="chip ar" style={{ background: "var(--primary-soft)", color: "var(--primary)", height: 26, padding: "0 12px", fontSize: 12 }}>
              <span className="chip-dot"></span>
              {isAr ? "للمعلنين العرب — يدعم Meta · Google · TikTok · Snapchat" : "Built for Arabic advertisers — Meta · Google · TikTok · Snapchat"}
            </span>
            <h1 style={{ fontSize: "clamp(44px, 5.4vw, 76px)", lineHeight: 1.04, letterSpacing: "-.025em", fontWeight: 600, margin: "22px 0 18px" }}>
              {isAr ? <>حسابك الإعلاني<br/>ما يوقفش <span style={{ color: "var(--primary)" }}>أبداً</span>.</> : <>Your ad accounts<br/>never go <span style={{ color: "var(--primary)" }}>dark</span>.</>}
            </h1>
            <p style={{ fontSize: 18, color: "var(--muted)", maxWidth: 540, lineHeight: 1.5, margin: "0 0 28px", textWrap: "pretty" }}>
              {isAr
                ? "روّج برو يراقب كل حساباتك الإعلانية على مدار الساعة، يُنبّهك فوراً لو فيه مديونية أو حساب موقوف، ويرسل لك تقرير عربي يومي بالعناصر اللي أنت محددها — بريد، واتساب أو تليجرام."
                : "Rawj Pro watches every ad account 24/7. Get instant alerts on debts and suspensions before your ads stop, and a custom Arabic daily report — by email, WhatsApp or Telegram."}
            </p>
            <div className="row" style={{ gap: 10 }}>
              <button className="btn btn-primary btn-lg" onClick={() => setRoute("signup")}>
                {isAr ? "اربط حساباتك مجاناً" : "Connect accounts free"}
                <Icon.arrow size={16} />
              </button>
              <button className="btn btn-lg">
                <Icon.eye size={16} />
                {isAr ? "شوف التقرير اليومي" : "See the daily report"}
              </button>
            </div>
            <div className="row" style={{ gap: 22, marginTop: 32, color: "var(--muted)", fontSize: 12.5 }}>
              <div className="row gap-sm"><Icon.shield size={14} /> {isAr ? "صلاحية قراءة فقط" : "Read-only access"}</div>
              <div className="row gap-sm"><Icon.lock size={14} /> {isAr ? "بدون أي خطر تعليق" : "Zero suspension risk"}</div>
              <div className="row gap-sm"><Icon.flash size={14} /> {isAr ? "تنبيه خلال ٣٠ ثانية" : "30-sec alerts"}</div>
            </div>
          </div>

          {/* Hero mock — alert card stack */}
          <div style={{ position: "relative", height: 460 }}>
            <div className="card" style={{ position: "absolute", top: 0, insetInlineEnd: 0, width: "92%", padding: 16, boxShadow: "var(--shadow-lg)", transform: "rotate(-1.5deg)" }}>
              <div className="row gap-sm" style={{ marginBottom: 10 }}>
                <Plat kind="meta" size={28} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>Zalma — Retargeting</div>
                  <div style={{ fontSize: 11, color: "var(--muted)" }} className="mono">act_104882901</div>
                </div>
                <span className="chip chip-success chip-dot">{isAr ? "نشط" : "Active"}</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, fontSize: 12 }}>
                <div><div className="muted">{isAr ? "المصروف" : "Spend"}</div><div className="num" style={{ fontSize: 16, fontWeight: 600 }}>EGP 6,210</div></div>
                <div><div className="muted">ROAS</div><div className="num" style={{ fontSize: 16, fontWeight: 600, color: "var(--success)" }}>3.05×</div></div>
                <div><Spark data={[12,14,15,11,13,16,15]} /></div>
              </div>
            </div>

            <div className="card" style={{ position: "absolute", top: 130, insetInlineStart: 0, width: "85%", padding: 18, boxShadow: "var(--shadow-lg)", borderColor: "var(--danger)", borderWidth: 1.5, transform: "rotate(1deg)" }}>
              <div className="row" style={{ gap: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--danger-soft)", color: "var(--danger)", display: "grid", placeItems: "center" }}>
                  <Icon.alert size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600 }}>{isAr ? "مديونية متأخرة — Zalma KSA Search" : "Outstanding balance — Zalma KSA Search"}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>{isAr ? "السداد قبل ٤٨ ساعة لتفادي الإيقاف" : "Pay within 48h to avoid suspension"}</div>
                </div>
                <div className="num" style={{ fontWeight: 600 }}>$1,240</div>
              </div>
              <div className="row" style={{ gap: 8, marginTop: 14 }}>
                <button className="btn btn-danger btn-sm">{isAr ? "ادفع الآن" : "Pay now"}</button>
                <button className="btn btn-sm">{isAr ? "ذكّرني" : "Remind me"}</button>
                <span className="chip" style={{ marginInlineStart: "auto" }}><Icon.mail size={11} /> {isAr ? "وصل بريد" : "Mailed"}</span>
                <span className="chip"><Icon.send size={11} /> Telegram</span>
              </div>
            </div>

            <div className="card" style={{ position: "absolute", bottom: 0, insetInlineEnd: 30, width: "78%", padding: 16, boxShadow: "var(--shadow-lg)", background: "var(--ink)", color: "var(--bg)", borderColor: "transparent" }}>
              <div className="row gap-sm" style={{ marginBottom: 12, opacity: .7, fontSize: 11 }}>
                <Icon.send size={12} /> Telegram · 8:00 ص
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.7, fontFamily: "var(--font-ar)" }}>
                <b>صباح الخير محمد ☀️</b><br/>
                تقرير أمس (٨ مايو):<br/>
                • المصروف: <b>۸۲٬۳٤۰ ج.م</b> ▼ ٤٪<br/>
                • مبيعات: <b>۲٤۸ طلب</b> بقيمة <b>۲۲۱٬۹٠٠ ج.م</b><br/>
                • أعلى ROAS: Performance Max <b>٣.٢×</b><br/>
                • تنبيه: حساب Snap موقوف — مديونية ۸۲۰$
              </div>
            </div>
          </div>
        </section>

        {/* Logos / platforms */}
        <section className="row" style={{ gap: 32, padding: "20px 0 60px", justifyContent: "center", color: "var(--muted)", fontSize: 12.5, fontFamily: "var(--font-ltn)" }}>
          <span>{isAr ? "متكامل مع" : "Connects with"}</span>
          {[["meta","Meta Ads"],["google","Google Ads"],["tiktok","TikTok Ads"],["snap","Snapchat Ads"]].map(([k,n]) => (
            <span key={k} className="row gap-sm" style={{ fontWeight: 500, color: "var(--ink-2)" }}><Plat kind={k} size={20} /> {n}</span>
          ))}
        </section>

        {/* Three pillars */}
        <section style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginBottom: 64 }}>
          {[
            { ic: "shield", t: isAr ? "حماية من الإيقاف" : "Suspension shield", d: isAr ? "صلاحية قراءة آمنة فقط، بدون أي صلاحيات تعديل تعرّض الحساب لخطر الإيقاف." : "Read-only API access — no edit scope, zero risk to your account standing." },
            { ic: "alert", t: isAr ? "تنبيهات مديونيات لحظية" : "Real-time debt alerts", d: isAr ? "إشعار خلال ٣٠ ثانية على البريد، واتساب أو تليجرام مع رابط دفع مباشر." : "30-second alerts on email, WhatsApp & Telegram with one-click pay links." },
            { ic: "doc", t: isAr ? "تقرير عربي مخصص" : "Custom Arabic report", d: isAr ? "اختر العناصر بنفسك (مصروف، مبيعات، ROAS، CPA…) واستلم بصياغة عربية واضحة." : "Pick the metrics you care about. We deliver in clear, native Arabic." },
          ].map((p, i) => (
            <div key={i} className="card" style={{ padding: 24 }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--primary-soft)", color: "var(--primary)", display: "grid", placeItems: "center", marginBottom: 14 }}>
                {React.createElement(Icon[p.ic], { size: 18 })}
              </div>
              <h3 style={{ margin: "0 0 6px", fontSize: 17, fontWeight: 600 }}>{p.t}</h3>
              <p style={{ color: "var(--muted)", fontSize: 13.5, margin: 0, textWrap: "pretty" }}>{p.d}</p>
            </div>
          ))}
        </section>
      </div>
    </div>
  );
}

// ─── Onboarding ──────────────────────────────────────────────────────
function Onboarding({ lang, setRoute }) {
  const isAr = lang === "ar";
  const [step, setStep] = React.useState(1);
  const [connected, setConnected] = React.useState({ meta: true, google: true, tiktok: false, snap: false });
  const [channels, setChannels] = React.useState({ email: true, whatsapp: false, telegram: true });
  const total = 3;

  const platforms = [
    { id: "meta",   name: "Meta (Facebook/Instagram) Ads", desc: isAr ? "صلاحية قراءة عبر Business Manager — بدون مخاطر" : "Read-only via Business Manager — zero risk", accounts: 4 },
    { id: "google", name: "Google Ads",       desc: isAr ? "ربط آمن باستخدام OAuth — صلاحية قراءة" : "Secure OAuth — read scope only", accounts: 2 },
    { id: "tiktok", name: "TikTok Ads",       desc: isAr ? "Marketing API · تقارير وحملات" : "Marketing API · reports & campaigns", accounts: 0 },
    { id: "snap",   name: "Snapchat Ads",     desc: isAr ? "Snap Marketing API" : "Snap Marketing API", accounts: 0 },
  ];

  return (
    <div className="page" style={{ maxWidth: 920, margin: "0 auto" }}>
      <div className="row" style={{ marginBottom: 24, gap: 8 }}>
        {Array.from({ length: total }).map((_, i) => (
          <div key={i} style={{ flex: 1, height: 4, borderRadius: 4, background: i + 1 <= step ? "var(--primary)" : "var(--line-2)" }} />
        ))}
      </div>
      <div className="row gap-sm" style={{ color: "var(--muted)", fontSize: 12, marginBottom: 8 }}>{isAr ? `الخطوة ${step} من ${total}` : `Step ${step} of ${total}`}</div>
      <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-.02em", margin: "0 0 8px" }}>
        {step === 1 ? (isAr ? "اربط حساباتك الإعلانية" : "Connect your ad accounts")
        : step === 2 ? (isAr ? "اختار قنوات الإشعارات" : "Pick your alert channels")
        : (isAr ? "تأكيد ومراجعة" : "Confirm & review")}
      </h1>
      <p style={{ color: "var(--muted)", fontSize: 14, margin: "0 0 28px", maxWidth: 540 }}>
        {step === 1 ? (isAr ? "صلاحيات قراءة فقط — لن نلمس إعداداتك ولن نُعرّض الحساب للإيقاف." : "Read-only scopes only — we never edit your settings.")
        : step === 2 ? (isAr ? "اختر مكان وصول التنبيهات والتقارير اليومية." : "Where should alerts and daily reports land?")
        : (isAr ? "كل شيء جاهز. شاهد ملخص الإعداد قبل الانطلاق." : "Review your setup before going live.")}
      </p>

      {step === 1 && (
        <div className="col">
          {platforms.map(p => (
            <div key={p.id} className="card" style={{ padding: 18, display: "flex", alignItems: "center", gap: 14 }}>
              <Plat kind={p.id} size={40} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{p.name}</div>
                <div style={{ fontSize: 12, color: "var(--muted)" }}>{p.desc}</div>
              </div>
              {connected[p.id] ? (
                <>
                  <span className="chip chip-success chip-dot">{p.accounts} {isAr ? "حساب" : "accounts"}</span>
                  <button className="btn btn-sm" onClick={() => setConnected({ ...connected, [p.id]: false })}>{isAr ? "إدارة" : "Manage"}</button>
                </>
              ) : (
                <button className="btn btn-primary btn-sm" onClick={() => setConnected({ ...connected, [p.id]: true })}>
                  <Icon.link size={13} /> {isAr ? "ربط" : "Connect"}
                </button>
              )}
            </div>
          ))}
        </div>
      )}

      {step === 2 && (
        <div className="col">
          {[
            { id: "email", icon: "mail", name: isAr ? "البريد الإلكتروني" : "Email", val: "mohamed@zalma.co" },
            { id: "whatsapp", icon: "phone", name: "WhatsApp", val: "+20 100 ••• ••88" },
            { id: "telegram", icon: "send", name: "Telegram", val: "@mohamed_omari" },
          ].map(c => (
            <div key={c.id} className="card" style={{ padding: 18, display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--surface-2)", display: "grid", placeItems: "center", color: "var(--ink-2)" }}>
                {React.createElement(Icon[c.icon], { size: 18 })}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{c.name}</div>
                <div style={{ fontSize: 12, color: "var(--muted)" }} className="mono">{c.val}</div>
              </div>
              <button role="switch" aria-checked={channels[c.id]} className="switch" onClick={() => setChannels({ ...channels, [c.id]: !channels[c.id] })}></button>
            </div>
          ))}
          <div className="card" style={{ padding: 18, background: "var(--primary-soft)", borderColor: "transparent" }}>
            <div className="row gap-sm"><Icon.shield size={16} /><b>{isAr ? "حد التنبيه الافتراضي" : "Default alert threshold"}</b></div>
            <p style={{ fontSize: 13, margin: "8px 0 0", color: "var(--ink-2)" }}>
              {isAr ? "ننبهك بمجرد ظهور أي مديونية > $50 أو وصول الإنفاق إلى 80% من الحد." : "We alert you on any debt > $50 or 80% of spend cap reached."}
            </p>
          </div>
        </div>
      )}

      {step === 3 && (
        <div className="col">
          <div className="card">
            <div className="card-head"><h3 className="card-title">{isAr ? "الحسابات المربوطة" : "Connected accounts"}</h3></div>
            <div className="row" style={{ gap: 18, flexWrap: "wrap" }}>
              {platforms.filter(p => connected[p.id]).map(p => (
                <div key={p.id} className="row gap-sm"><Plat kind={p.id} size={22} /><span style={{ fontWeight: 500 }}>{p.name}</span><span className="chip chip-success">{p.accounts}</span></div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="card-head"><h3 className="card-title">{isAr ? "قنوات الإشعارات" : "Alert channels"}</h3></div>
            <div className="row" style={{ gap: 18 }}>
              {channels.email && <span className="chip chip-info"><Icon.mail size={11} /> Email</span>}
              {channels.whatsapp && <span className="chip chip-success"><Icon.phone size={11} /> WhatsApp</span>}
              {channels.telegram && <span className="chip chip-info"><Icon.send size={11} /> Telegram</span>}
            </div>
          </div>
          <div className="row" style={{ justifyContent: "flex-end", marginTop: 12 }}>
            <button className="btn btn-primary btn-lg" onClick={() => setRoute("dashboard")}>
              {isAr ? "ادخل لوحة التحكم" : "Enter dashboard"} <Icon.arrow size={16} />
            </button>
          </div>
        </div>
      )}

      {step < 3 && (
        <div className="row" style={{ marginTop: 24, justifyContent: "space-between" }}>
          <button className="btn" disabled={step === 1} onClick={() => setStep(step - 1)} style={{ opacity: step === 1 ? .5 : 1 }}>
            {isAr ? "السابق" : "Back"}
          </button>
          <button className="btn btn-primary btn-lg" onClick={() => setStep(step + 1)}>
            {isAr ? "التالي" : "Continue"} <Icon.arrow size={16} />
          </button>
        </div>
      )}
    </div>
  );
}

// ─── Dashboard ───────────────────────────────────────────────────────
function Dashboard({ lang, setRoute }) {
  const isAr = lang === "ar";
  const L = useT(lang);
  const [range, setRange] = React.useState("today");
  const totalSpend = ACCOUNTS.reduce((a, b) => a + b.spend, 0);
  const totalSales = ACCOUNTS.reduce((a, b) => a + b.sales, 0);
  const totalOrders = ACCOUNTS.reduce((a, b) => a + b.orders, 0);
  const totalDebt  = ACCOUNTS.filter(a => a.debt).reduce((a, b) => a + b.debt, 0);

  const chartSeries = [
    { color: "var(--primary)", data: [184000, 196000, 178000, 215000, 241000, 268000, 282000] },
    { color: "var(--accent)",  data: [62000, 68000, 64000, 78000, 82000, 89000, 96000] },
  ];

  return (
    <div className="page">
      {/* Banner */}
      <div className="card" style={{ background: "linear-gradient(120deg, var(--danger-soft), transparent)", borderColor: "color-mix(in oklch, var(--danger) 35%, transparent)", padding: 14, marginBottom: 18 }}>
        <div className="row" style={{ gap: 12 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: "var(--danger)", color: "#fff", display: "grid", placeItems: "center" }}><Icon.alert size={16} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600 }}>{isAr ? "حسابان يحتاجان تدخل فوري" : "2 accounts need urgent action"}</div>
            <div style={{ fontSize: 12, color: "var(--muted)" }}>{isAr ? "إجمالي مديونية $2,060 — قد تتوقف الإعلانات خلال 48 ساعة" : "$2,060 outstanding — ads may pause within 48h"}</div>
          </div>
          <button className="btn btn-sm" onClick={() => setRoute("alerts")}>{isAr ? "عرض التنبيهات" : "View alerts"}</button>
          <button className="btn btn-danger btn-sm">{isAr ? "ادفع الآن" : "Pay now"}</button>
        </div>
      </div>

      <div className="row" style={{ marginBottom: 16, gap: 8 }}>
        <h2 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>{isAr ? "نظرة سريعة" : "At a glance"}</h2>
        <div className="seg" style={{ marginInlineStart: "auto" }}>
          {[["today", L.today], ["yesterday", L.yesterday], ["last7", L.last7], ["last30", L.last30]].map(([k, v]) => (
            <button key={k} aria-pressed={range === k} onClick={() => setRange(k)}>{v}</button>
          ))}
        </div>
        <button className="btn btn-sm"><Icon.refresh size={13} />{isAr ? "تحديث" : "Refresh"}</button>
      </div>

      {/* KPIs */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-label"><Icon.card size={12} /> {L.spend}</div>
          <div className="kpi-value num">{fmt(totalSpend)}</div>
          <div className="kpi-foot"><span className="delta-down">▼ 4.2%</span> {isAr ? "مقابل أمس" : "vs yesterday"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><Icon.trend size={12} /> {L.sales}</div>
          <div className="kpi-value num">{fmt(totalSales)}</div>
          <div className="kpi-foot"><span className="delta-up">▲ 11.8%</span> {isAr ? "مقابل أمس" : "vs yesterday"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><Icon.flash size={12} /> {L.orders}</div>
          <div className="kpi-value num">{fmtN(totalOrders)}</div>
          <div className="kpi-foot"><span className="delta-up">▲ 8.0%</span> {isAr ? "مقابل أمس" : "vs yesterday"}</div>
        </div>
        <div className="kpi" style={{ background: "var(--danger-soft)", borderColor: "transparent" }}>
          <div className="kpi-label" style={{ color: "var(--danger)" }}><Icon.alert size={12} /> {L.debt}</div>
          <div className="kpi-value num" style={{ color: "var(--danger)" }}>${fmtN(totalDebt)}</div>
          <div className="kpi-foot" style={{ color: "var(--danger)" }}>{isAr ? "حسابان متأثران" : "2 accounts affected"}</div>
        </div>
      </div>

      {/* Chart + side */}
      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 12, marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">{isAr ? "المصروف مقابل المبيعات" : "Spend vs Sales"}</h3>
              <div className="card-sub">{isAr ? "آخر ٧ أيام · بكل العملات بالـ EGP" : "Last 7 days · normalized to EGP"}</div>
            </div>
            <div className="row" style={{ gap: 14, fontSize: 12 }}>
              <span className="row gap-sm"><span className="dot" style={{ background: "var(--primary)" }}></span>{isAr ? "مبيعات" : "Sales"}</span>
              <span className="row gap-sm"><span className="dot" style={{ background: "var(--accent)" }}></span>{isAr ? "مصروف" : "Spend"}</span>
            </div>
          </div>
          <AreaChart series={chartSeries} />
        </div>
        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">{isAr ? "أفضل ٣ حملات" : "Top 3 campaigns"}</h3>
              <div className="card-sub">{isAr ? "حسب ROAS — أمس" : "By ROAS — yesterday"}</div>
            </div>
          </div>
          {[
            { n: "PMax — Catalog Spring", p: "google", roas: 4.18, spend: 8420 },
            { n: "Retargeting — VV+CTR",  p: "meta",   roas: 3.62, spend: 4210 },
            { n: "Spark Ads — KSA",       p: "tiktok", roas: 3.20, spend: 5180 },
          ].map((c, i) => (
            <div key={i} className="row" style={{ gap: 12, padding: "10px 0", borderBottom: i < 2 ? "1px solid var(--line)" : 0 }}>
              <Plat kind={c.p} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.n}</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{fmt(c.spend)}</div>
              </div>
              <div className="num" style={{ fontWeight: 600, color: "var(--success)" }}>{c.roas}×</div>
            </div>
          ))}
        </div>
      </div>

      {/* Accounts table */}
      <div className="card" style={{ padding: 0 }}>
        <div className="row" style={{ padding: "16px 18px", borderBottom: "1px solid var(--line)" }}>
          <div>
            <h3 className="card-title">{isAr ? "كل الحسابات الإعلانية" : "All ad accounts"}</h3>
            <div className="card-sub">{isAr ? `${ACCOUNTS.length} حسابات على ٤ منصات` : `${ACCOUNTS.length} accounts on 4 platforms`}</div>
          </div>
          <div className="row" style={{ marginInlineStart: "auto", gap: 8 }}>
            <button className="btn btn-sm"><Icon.filter size={13} />{isAr ? "فلترة" : "Filter"}</button>
            <button className="btn btn-sm btn-primary"><Icon.add size={13} />{isAr ? "حساب جديد" : "Add account"}</button>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>{isAr ? "الحساب" : "Account"}</th>
              <th>{isAr ? "الحالة" : "Status"}</th>
              <th style={{ textAlign: "end" }}>{L.spend}</th>
              <th style={{ textAlign: "end" }}>{L.sales}</th>
              <th style={{ textAlign: "end" }}>ROAS</th>
              <th>{isAr ? "أداء ٧ أيام" : "7-day trend"}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {ACCOUNTS.map(a => (
              <tr key={a.id} onClick={() => setRoute("account")} style={{ cursor: "default" }}>
                <td>
                  <div className="row gap-sm">
                    <Plat kind={a.platform} />
                    <div>
                      <div style={{ fontWeight: 500 }}>{a.name}</div>
                      <div className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{a.id} · {a.currency}</div>
                    </div>
                  </div>
                </td>
                <td>
                  {a.status === "active"    && <span className="chip chip-success chip-dot">{isAr ? "نشط" : "Active"}</span>}
                  {a.status === "debt"      && <span className="chip chip-warn chip-dot">{isAr ? "مديونية" : "Debt"} ${a.debt}</span>}
                  {a.status === "suspended" && <span className="chip chip-danger chip-dot">{isAr ? "موقوف" : "Suspended"}</span>}
                </td>
                <td className="num" style={{ textAlign: "end" }}>{fmt(a.spend, a.currency)}</td>
                <td className="num" style={{ textAlign: "end" }}>{fmt(a.sales, a.currency)}</td>
                <td className="num" style={{ textAlign: "end", fontWeight: 600, color: a.roas >= 3 ? "var(--success)" : a.roas >= 2.5 ? "var(--ink)" : "var(--danger)" }}>{a.roas.toFixed(2)}×</td>
                <td style={{ width: 130 }}><Spark data={a.spark} stroke={a.roas >= 3 ? "var(--success)" : "var(--accent)"} /></td>
                <td><Icon.chev /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ─── Account Detail ──────────────────────────────────────────────────
function AccountDetail({ lang, setRoute }) {
  const isAr = lang === "ar";
  const a = ACCOUNTS[0];
  return (
    <div className="page">
      <button className="btn btn-ghost btn-sm" onClick={() => setRoute("dashboard")}><Icon.arrowL size={13} /> {isAr ? "الحسابات" : "Accounts"}</button>
      <div className="row" style={{ gap: 14, margin: "12px 0 22px" }}>
        <Plat kind={a.platform} size={48} />
        <div style={{ flex: 1 }}>
          <h1 style={{ fontSize: 24, fontWeight: 600, margin: 0, letterSpacing: "-.01em" }}>{a.name}</h1>
          <div className="row gap-sm muted" style={{ fontSize: 12 }}>
            <span className="mono">{a.id}</span> · <span>{a.currency}</span> · <span className="chip chip-success chip-dot">{isAr ? "نشط" : "Active"}</span>
          </div>
        </div>
        <button className="btn"><Icon.bell size={13} /> {isAr ? "تنبيهات الحساب" : "Account alerts"}</button>
        <button className="btn btn-primary"><Icon.eye size={13} /> {isAr ? "افتح في Meta Ads" : "Open in Meta Ads"}</button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, marginBottom: 16 }}>
        {[
          { l: isAr ? "الرصيد" : "Balance",  v: "EGP 18,420", chip: "" },
          { l: isAr ? "الحد الشهري" : "Monthly cap", v: "EGP 250k", chip: "" },
          { l: isAr ? "تحت الحد" : "Spent of cap", v: "32%", chip: "ok" },
          { l: isAr ? "آخر دفع" : "Last payment", v: isAr ? "٣ مايو" : "May 3", chip: "" },
          { l: isAr ? "نقاط الجودة" : "Quality score", v: "8.4 / 10", chip: "ok" },
        ].map((k, i) => (
          <div key={i} className="kpi" style={{ padding: 14 }}>
            <div className="kpi-label">{k.l}</div>
            <div style={{ fontSize: 18, fontWeight: 600 }} className="num">{k.v}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 12, marginBottom: 16 }}>
        <div className="card">
          <div className="card-head">
            <div><h3 className="card-title">{isAr ? "أداء الحملات — أمس" : "Campaign performance — yesterday"}</h3></div>
            <div className="seg">
              <button aria-pressed="true">{isAr ? "ROAS" : "ROAS"}</button>
              <button>{isAr ? "مصروف" : "Spend"}</button>
              <button>CPA</button>
            </div>
          </div>
          <table className="tbl">
            <thead><tr><th>{isAr ? "الحملة" : "Campaign"}</th><th style={{textAlign:"end"}}>{isAr ? "مصروف" : "Spend"}</th><th style={{textAlign:"end"}}>{isAr ? "طلبات" : "Orders"}</th><th style={{textAlign:"end"}}>ROAS</th><th style={{textAlign:"end"}}>CPA</th></tr></thead>
            <tbody>
              {[
                ["Catalog — Spring",     4820, 38, 4.18, 127],
                ["Retargeting — VV",     2210, 22, 3.62, 100],
                ["Brand Search — Cairo", 1840, 14, 3.05, 131],
                ["Lookalike — 3%",       3210, 18, 2.38, 178],
                ["Awareness — Reach",    1320,  4, 1.10, 330],
              ].map((c, i) => (
                <tr key={i}>
                  <td style={{fontWeight:500}}>{c[0]}</td>
                  <td className="num" style={{textAlign:"end"}}>{fmt(c[1])}</td>
                  <td className="num" style={{textAlign:"end"}}>{c[2]}</td>
                  <td className="num" style={{textAlign:"end", fontWeight:600, color: c[3]>=3?"var(--success)":c[3]>=2?"var(--ink)":"var(--danger)"}}>{c[3].toFixed(2)}×</td>
                  <td className="num" style={{textAlign:"end"}}>{fmt(c[4])}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="card">
          <div className="card-head"><h3 className="card-title">{isAr ? "تنبيهات هذا الحساب" : "This account's alerts"}</h3></div>
          <div className="col">
            {[
              { t: isAr ? "اقترب الإنفاق من الحد" : "Approaching spend cap", d: isAr ? "وصلت ٨٢٪ من حد $5,000" : "82% of $5,000 cap", c: "warn" },
              { t: isAr ? "تحسّن في ROAS" : "ROAS improved", d: isAr ? "+0.42× مقابل المتوسط الأسبوعي" : "+0.42× vs weekly avg", c: "success" },
              { t: isAr ? "قاعدة جديدة فعّالة" : "New rule active", d: isAr ? "إيقاف الإعلانات تحت ROAS 1.5×" : "Pause ads under ROAS 1.5×", c: "info" },
            ].map((al, i) => (
              <div key={i} className="row" style={{ gap: 10, padding: "10px 0", borderBottom: i<2 ? "1px solid var(--line)" : 0 }}>
                <span className={`dot dot-${al.c}`}></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{al.t}</div>
                  <div style={{ fontSize: 11, color: "var(--muted)" }}>{al.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Landing = Landing;
window.Onboarding = Onboarding;
window.Dashboard = Dashboard;
window.AccountDetail = AccountDetail;