// ============= PRODUCT SCREENS for the interface carousel =============
const SCR_T = {
  ru: { leadsH:"YouTube Лиды", leadsS:"Скрейпинг каналов с контактами", collected:"Собрано", email:"С email", tg:"С Telegram", verified:"Верифицировано",
        gen:"AI Генерация лидов", genS:"AI подберёт прибыльные темы", auto:"Авто", niche:"По нишам", genBtn:"Сгенерировать 100 тем",
        verifyH:"Верификация", verifyS:"Проверка контактов через прокси-пулы", scanning:"Идёт проверка", live:"LIVE", valid:"Валидные", dead:"Мёртвые", banned:"Бан", checked:"проверено",
        inboxH:"CRM-инбокс", inboxS:"Все ответы в одном месте", online:"онлайн", reply:"Ответить",
        warmH:"Прогрев аккаунтов", warmS:"Авто-прогрев и лимиты", account:"Аккаунт", progress:"Прогрев", limit:"Лимит" },
  en: { leadsH:"YouTube Leads", leadsS:"Channel scraping with contacts", collected:"Collected", email:"With email", tg:"With Telegram", verified:"Verified",
        gen:"AI Lead generation", genS:"AI picks profitable topics", auto:"Auto", niche:"By niche", genBtn:"Generate 100 topics",
        verifyH:"Verification", verifyS:"Contacts via proxy pools", scanning:"Scanning", live:"LIVE", valid:"Valid", dead:"Dead", banned:"Banned", checked:"checked",
        inboxH:"CRM inbox", inboxS:"All replies in one place", online:"online", reply:"Reply",
        warmH:"Account warm-up", warmS:"Auto warm-up & limits", account:"Account", progress:"Warm-up", limit:"Limit" },
};
SCR_T.uk = SCR_T.ru;

function ScrHead({ ico, t, s, right }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ width: 38, height: 38, borderRadius: 11, display: "grid", placeItems: "center", color: "#fff", background: "linear-gradient(150deg,var(--accent-bright),var(--accent) 55%,var(--accent-deep))", boxShadow: "0 8px 18px -8px var(--accent-glow)" }}>{ico}</span>
        <div><div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 17, color: "var(--text-hi)" }}>{t}</div><div style={{ fontSize: 11.5, color: "var(--text-lo)" }}>{s}</div></div>
      </div>
      {right}
    </div>
  );
}
const scrWrap = { padding: "20px 22px", background: "var(--bg)", minHeight: 452 };

// --- YouTube Leads ---
function ScreenLeads() {
  const { lang } = useApp();
  const m = SCR_T[lang] || SCR_T.ru;
  const ref = useRef(null);
  const { seen } = useInView(ref, { threshold: 0.15 });
  const stats = [[m.collected, "50", "users"], [m.email, "673", "mail"], [m.tg, "25", "tg"], [m.verified, "412", "check"]];
  const ico = { users: <IconUsers />, mail: <IconMail />, tg: <IconTG />, check: <IconCheck /> };
  const rows = [["Бизнес-молодость", "YouTube", "biz@ml.ru", "184K"], ["Финансы PRO", "Telegram", "—", "92K"], ["AI Дайджест", "YouTube", "hi@aid.io", "311K"], ["Крипто Эфир", "YouTube", "info@kr.io", "76K"]];
  return (
    <div style={scrWrap} ref={ref}>
      <ScrHead ico={<IconYT />} t={m.leadsH} s={m.leadsS} right={<span className="badge badge--accent"><span className="bdot"></span>{m.live}</span>} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, marginBottom: 14 }}>
        {stats.map(([l, v, ic], i) => (
          <div key={i} className="mstat"><div style={{ display: "flex", justifyContent: "space-between", color: "var(--text-lo)" }}><span style={{ fontSize: 10.5 }}>{l}</span><span style={{ width: 20, height: 20 }}>{ico[ic]}</span></div><div className="mstat__v" style={{ fontSize: 21 }}>{v}</div></div>
        ))}
      </div>
      <div className="card card--pad" style={{ marginBottom: 12, padding: 16 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 12 }}>
          <span style={{ width: 34, height: 34, borderRadius: 10, display: "grid", placeItems: "center", color: "#fff", background: "linear-gradient(150deg,var(--accent),var(--accent-deep))" }}><IconWand /></span>
          <div><div style={{ fontWeight: 600, color: "var(--text-hi)", fontSize: 14 }}>{m.gen}</div><div style={{ fontSize: 11, color: "var(--text-lo)" }}>{m.genS}</div></div>
          <button className="mock__chip" style={{ marginLeft: "auto" }}><IconBolt />{m.genBtn}</button>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {["20", "50", "100", "200", "500"].map((n) => (
            <div key={n} style={{ flex: 1, textAlign: "center", padding: "9px 0", borderRadius: 9, fontSize: 12, fontWeight: 600, background: n === "100" ? "linear-gradient(180deg,color-mix(in oklab,var(--accent),white 8%),var(--accent))" : "var(--surface-2)", color: n === "100" ? "#fff" : "var(--text-lo)", border: "1px solid " + (n === "100" ? "transparent" : "var(--border)") }}>{n}</div>
          ))}
        </div>
      </div>
      <div className="tbl-wrap" style={{ border: "1px solid var(--border)", borderRadius: 14, overflow: "hidden", background: "var(--surface)" }}>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1.4fr 0.8fr 1.1fr 0.6fr", gap: 10, padding: "11px 16px", borderBottom: i < 3 ? "1px solid var(--border)" : "0", fontSize: 12.5, alignItems: "center", opacity: seen ? 1 : 0, transform: seen ? "none" : "translateY(6px)", transition: `all .4s ease ${i * 60}ms` }}>
            <span style={{ color: "var(--text-hi)", fontWeight: 600 }}>{r[0]}</span>
            <span style={{ color: "var(--text-lo)", fontFamily: "var(--mono)", fontSize: 11 }}>{r[1]}</span>
            <span style={{ color: "var(--text-lo)", fontFamily: "var(--mono)", fontSize: 11 }}>{r[2]}</span>
            <span style={{ color: "var(--text-mid)", fontFamily: "var(--mono)", fontWeight: 600, textAlign: "right" }}>{r[3]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- Analytics (stats + area + funnel) ---
function ScreenAnalytics() {
  const { lang } = useApp();
  const ref = useRef(null);
  const { seen } = useInView(ref, { threshold: 0.2 });
  const area = wavePath(71, 320, 100, 60, 92, 9);
  const lnOk = wavePath(37, 320, 100, 38, 62, 9);
  const lnVio = wavePath(13, 320, 100, 12, 36, 9);
  const stats = [["Лидов", "1 440", "var(--accent)"], ["Открыт.", "62%", "var(--ok)"], ["Reply", "14.2%", "var(--vio)"], ["Конв.", "1.8%", "var(--warn)"]];
  return (
    <div style={scrWrap} ref={ref}>
      <ScrHead ico={<IconChart />} t={lang === "en" ? "Analytics" : "Аналитика"} s={lang === "en" ? "Dynamics, sources, funnel" : "Динамика, источники, воронка"}
        right={<div className="segmented" style={{ padding: 3 }}>{["24Ч", "7Д", "30Д"].map((x, i) => <button key={x} className={i === 1 ? "active" : ""} style={{ padding: "6px 11px", fontSize: 11 }}>{x}</button>)}</div>} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, marginBottom: 14 }}>
        {stats.map(([l, v, c], i) => (
          <div key={i} className="mstat"><div style={{ fontSize: 10.5, color: "var(--text-lo)" }}>{l}</div><div className="mstat__v" style={{ fontSize: 20, color: c }}>{v}</div></div>
        ))}
      </div>
      <div className="card" style={{ padding: 16, marginBottom: 12 }}>
        <div className="mock__chart-t" style={{ marginBottom: 10 }}>{lang === "en" ? "Activity" : "Активность за период"}</div>
        <svg viewBox="0 0 320 100" preserveAspectRatio="none" style={{ width: "100%", height: 150, display: "block", overflow: "hidden" }}>
          <defs><linearGradient id="scra" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--accent)" stopOpacity=".34" /><stop offset="1" stopColor="var(--accent)" stopOpacity="0" /></linearGradient></defs>
          {[20, 45, 70, 95].map((y) => (
            <line key={y} x1="0" y1={y} x2="320" y2={y} stroke="var(--border)" strokeWidth="0.5" vectorEffect="non-scaling-stroke" />
          ))}
          <path d={`${area} L 320 100 L 0 100 Z`} fill="url(#scra)" />
          <path d={lnVio} fill="none" stroke="var(--vio)" strokeWidth="1.5" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
          <path d={lnOk} fill="none" stroke="var(--ok)" strokeWidth="1.5" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
          <path d={area} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
        </svg>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
        {[["YouTube", "var(--accent)", "94%"], ["Telegram", "var(--vio)", "4%"], ["Email", "var(--text-dim)", "2%"]].map(([n, c, v], i) => (
          <div key={i} className="mstat" style={{ display: "flex", alignItems: "center", gap: 8, padding: 12 }}><span style={{ width: 9, height: 9, borderRadius: 3, background: c }}></span><span style={{ fontSize: 12, color: "var(--text-mid)" }}>{n}</span><span style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontWeight: 600, color: "var(--text-hi)", fontSize: 12 }}>{v}</span></div>
        ))}
      </div>
    </div>
  );
}

// --- Verification scan ---
function ScreenVerify() {
  const { lang } = useApp();
  const m = SCR_T[lang] || SCR_T.ru;
  const ref = useRef(null);
  const { seen } = useInView(ref, { threshold: 0.2 });
  const bars = [["@channel_pro", 100, "ok"], ["@finance_hub", 100, "ok"], ["@crypto_air", 64, "scan"], ["@ai_daily", 40, "scan"], ["@dead_acc", 100, "bad"]];
  const col = { ok: "var(--ok)", bad: "var(--bad)", scan: "var(--accent)" };
  return (
    <div style={scrWrap} ref={ref}>
      <ScrHead ico={<IconShield />} t={m.verifyH} s={m.verifyS} right={<span className="live" style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "4px 10px", borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent-bright)", fontSize: 11, fontWeight: 700, fontFamily: "var(--mono)" }}><span style={{ width: 6, height: 6, borderRadius: 50, background: "var(--accent)" }} className="no-tr"></span>{m.scanning}</span>} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10, marginBottom: 16 }}>
        {[[m.valid, "1 218", "var(--ok)"], [m.dead, "94", "var(--bad)"], [m.banned, "31", "var(--warn)"]].map(([l, v, c], i) => (
          <div key={i} className="mstat"><div style={{ fontSize: 10.5, color: "var(--text-lo)" }}>{l}</div><div className="mstat__v" style={{ fontSize: 22, color: c }}>{v}</div></div>
        ))}
      </div>
      <div className="card" style={{ padding: 16 }}>
        {bars.map(([name, pct, st], i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "9px 0", borderBottom: i < 4 ? "1px solid var(--border)" : "0" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--text-mid)", width: 120, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</span>
            <div className="track" style={{ flex: 1, height: 7, borderRadius: 999, background: "var(--surface-3)", overflow: "hidden" }}>
              <div style={{ height: "100%", borderRadius: 999, width: seen ? pct + "%" : "0%", background: col[st], transition: `width 1s cubic-bezier(.2,.7,.2,1) ${i * 0.12}s` }} className="no-tr"></div>
            </div>
            <span style={{ width: 64, textAlign: "right" }}>
              {st === "ok" && <span className="badge badge--ok" style={{ padding: "3px 9px", fontSize: 10.5 }}><IconCheck />ok</span>}
              {st === "bad" && <span className="badge badge--muted" style={{ padding: "3px 9px", fontSize: 10.5, color: "var(--bad)" }}>bad</span>}
              {st === "scan" && <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent-bright)" }}>{pct}%</span>}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- CRM Inbox ---
function ScreenInbox() {
  const { lang } = useApp();
  const m = SCR_T[lang] || SCR_T.ru;
  const convs = [["АК", "Артём К.", "Окей, давай созвон", 2, true], ["ДН", "Дмитрий Н.", "Сколько стоит?", 1, true], ["ПС", "Павел С.", "Интересно, расскажите", 0, false], ["МО", "Максим О.", "Спасибо за оффер", 0, false]];
  const av = ["linear-gradient(140deg,#2AABEE,#1b6fb0)", "linear-gradient(140deg,#7E72F2,#5448c4)", "linear-gradient(140deg,#2BCB86,#1c8a5b)", "linear-gradient(140deg,#F5A23D,#c47416)"];
  return (
    <div style={scrWrap}>
      <ScrHead ico={<IconInbox />} t={m.inboxH} s={m.inboxS} right={<span className="badge badge--accent"><span className="bdot"></span>3</span>} />
      <div style={{ display: "grid", gridTemplateColumns: "210px 1fr", gap: 12, height: 360 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, overflow: "hidden" }}>
          {convs.map(([ini, name, last, badge, on], i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: 10, borderRadius: 12, background: i === 0 ? "var(--surface)" : "transparent", border: "1px solid " + (i === 0 ? "var(--border-2)" : "transparent") }}>
              <span style={{ position: "relative", width: 32, height: 32, borderRadius: 9, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 11, background: av[i] }}>{ini}{on && <span style={{ position: "absolute", right: -1, bottom: -1, width: 9, height: 9, borderRadius: 50, background: "var(--ok)", border: "2px solid var(--bg)" }}></span>}</span>
              <div style={{ minWidth: 0, flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text-hi)" }}>{name}</div><div style={{ fontSize: 11, color: "var(--text-lo)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{last}</div></div>
              {badge > 0 && <span style={{ minWidth: 18, height: 18, padding: "0 5px", borderRadius: 9, background: "var(--accent)", color: "#fff", fontSize: 10.5, fontWeight: 700, display: "grid", placeItems: "center" }}>{badge}</span>}
            </div>
          ))}
        </div>
        <div className="card" style={{ display: "flex", flexDirection: "column", overflow: "hidden", padding: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
            <span style={{ width: 30, height: 30, borderRadius: 9, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 11, background: av[0] }}>АК</span>
            <div><div style={{ fontSize: 13, fontWeight: 600, color: "var(--text-hi)" }}>Артём К.</div><div style={{ fontSize: 10.5, color: "var(--ok)" }}>● {m.online}</div></div>
          </div>
          <div style={{ flex: 1, padding: 16, display: "flex", flexDirection: "column", gap: 10, justifyContent: "flex-end" }}>
            <div style={{ alignSelf: "flex-start", maxWidth: "78%", background: "var(--surface-2)", border: "1px solid var(--border)", padding: "9px 13px", borderRadius: "4px 14px 14px 14px", fontSize: 12.5, color: "var(--text-mid)" }}>Привет! Видел твой канал — есть оффер по монтажу 🎬</div>
            <div style={{ alignSelf: "flex-end", maxWidth: "78%", background: "linear-gradient(150deg,var(--accent),var(--accent-deep))", color: "#fff", padding: "9px 13px", borderRadius: "14px 4px 14px 14px", fontSize: 12.5 }}>Окей, давай созвон 👍</div>
          </div>
          <div style={{ display: "flex", gap: 10, padding: "12px 16px", borderTop: "1px solid var(--border)" }}>
            <div className="input" style={{ flex: 1, borderRadius: 999, padding: "9px 16px", fontSize: 12.5, color: "var(--text-lo)", background: "var(--surface-2)", border: "1px solid var(--border)" }}>{m.reply}…</div>
            <button className="mock__chip" style={{ width: 40, padding: 0, justifyContent: "center" }}><IconSend /></button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenLeads, ScreenAnalytics, ScreenVerify, ScreenInbox });