/* Mid-page sections: For Whom, Core Features, Financial, Modules tabs */

const ForWhom = () => {
  const cards = [
    {
      icon: "leader",
      title: "Руководителю",
      text: "Контроль выручки, маржинальности, расходов и эффективности команды в реальном времени.",
      meta: ["Выручка", "Маржа", "P&L", "Команда"],
    },
    {
      icon: "sales",
      title: "Отделу продаж",
      text: "Планы, KPI, воронка и результаты менеджеров по сумме и количеству сделок.",
      meta: ["Воронка", "KPI", "Сделки", "Планы"],
    },
    {
      icon: "ops",
      title: "Операционному отделу",
      text: "Остатки, приходы, перемещения, списания и инвентаризация без ручных таблиц.",
      meta: ["Остатки", "Приходы", "Списания"],
    },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-1)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40, gap: 24, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 640 }}>
            <span className="eyebrow">Для кого</span>
            <h2 style={{ marginTop: 14 }}>Один продукт — три рабочих места</h2>
          </div>
          <p className="muted" style={{ maxWidth: 380, fontSize: 16 }}>
            Каждый отдел видит свой контур данных и инструменты, не отвлекаясь на лишнее.
          </p>
        </div>

        <div className="grid grid-3">
          {cards.map((c, i) => (
            <div key={i} className="card" style={{ padding: 0, overflow: "hidden", background: "#fff" }}>
              <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 18, minHeight: 260 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: "var(--accent-soft)", color: "var(--accent-700)",
                  display: "grid", placeItems: "center",
                  border: "1px solid var(--accent-tint)",
                }}>
                  <Icon name={c.icon} size={22}/>
                </div>
                <h3>{c.title}</h3>
                <p style={{ color: "var(--fg-2)", fontSize: 15.5, lineHeight: 1.55 }}>{c.text}</p>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", padding: "14px 28px", display: "flex", flexWrap: "wrap", gap: 8, background: "var(--bg-1)" }}>
                {c.meta.map(m => (
                  <span key={m} className="mono" style={{ fontSize: 11.5, color: "var(--fg-3)", padding: "4px 8px", background: "#fff", border: "1px solid var(--line)", borderRadius: 6 }}>
                    {m}
                  </span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Core features — large editorial grid */
const CoreFeatures = () => {
  const features = [
    { icon: "sales", title: "Продажи и клиенты", text: "Сделки, история покупок, повторные продажи и контроль статусов." },
    { icon: "box", title: "Товары и каталог", text: "Простые товары, варианты, наборы, SKU/штрихкоды и ценообразование." },
    { icon: "warehouse", title: "Складской учет", text: "Приходы, перемещения между складами, списания и актуальные остатки." },
    { icon: "hr", title: "Команда и HR", text: "Сотрудники, графики работы, планы продаж и заявки на отпуск." },
    { icon: "salary", title: "Зарплаты и бонусы", text: "Правила бонусов и автоматический расчет начислений по KPI." },
    { icon: "report", title: "Отчетность", text: "Отчеты по менеджерам, каналам продаж и динамике ключевых метрик." },
  ];
  return (
    <section id="features" className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "end", marginBottom: 56 }} className="features-head">
          <div>
            <span className="eyebrow">Возможности</span>
            <h2 style={{ marginTop: 14, maxWidth: 560 }}>
              Все ключевые процессы бизнеса <em style={{ fontStyle: "normal", color: "var(--accent-700)" }}>в одном месте</em>
            </h2>
          </div>
          <p className="muted" style={{ fontSize: 16, maxWidth: 460 }}>
            Шесть взаимосвязанных модулей, которые работают как единая операционная система — без интеграций и переключений между сервисами.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          border: "1px solid var(--line)",
          borderRadius: 18,
          overflow: "hidden",
          background: "#fff",
        }} className="feature-grid">
          {features.map((f, i) => (
            <div key={i} className="feature-cell" style={{
              padding: 32,
              borderRight: ((i + 1) % 3) ? "1px solid var(--line)" : "0",
              borderBottom: i < 3 ? "1px solid var(--line)" : "0",
              minHeight: 240,
              display: "flex", flexDirection: "column", gap: 16,
              position: "relative",
              transition: "background 200ms ease",
            }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--fg-4)", letterSpacing: "0.08em" }}>
                0{i + 1} / 06
              </div>
              <div style={{ color: "var(--fg-1)" }}><Icon name={f.icon} size={28} stroke={1.5}/></div>
              <h3 style={{ fontSize: 20 }}>{f.title}</h3>
              <p style={{ color: "var(--fg-2)", fontSize: 15, lineHeight: 1.55 }}>{f.text}</p>
              <div style={{
                position: "absolute", left: 0, bottom: 0, height: 2, background: "var(--accent)",
                width: 0, transition: "width 300ms ease",
              }} className="feature-bar"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Financial = () => {
  return (
    <section className="section" style={{ background: "#0a0e15", color: "#e8ecf1", borderTop: "1px solid #0a0e15" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }} className="hero-split">
          <div>
            <span className="eyebrow" style={{ color: "#7d8696" }}>Финансы</span>
            <h2 style={{ marginTop: 14, color: "#fff" }}>
              Финансы под <em style={{ fontStyle: "normal", color: "var(--accent)" }}>полным контролем</em>
            </h2>
            <p style={{ color: "#9aa4b3", marginTop: 18, fontSize: 17, lineHeight: 1.6, maxWidth: 520 }}>
              Отслеживайте движение денежных средств, структуру доходов и расходов, дебиторку и итоговую прибыль в едином контуре учета.
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: "32px 0 0", display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                "ДДС и P&L в одном интерфейсе",
                "Мультивалютный учет",
                "Прозрачная экономика по филиалам",
              ].map((b, i) => (
                <li key={i} style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 16, color: "#cbd2dd" }}>
                  <span style={{ width: 28, height: 28, borderRadius: 50, background: "rgba(34,197,94,0.15)", color: "var(--accent)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <Icon name="check" size={15} stroke={2.2}/>
                  </span>
                  {b}
                </li>
              ))}
            </ul>
          </div>

          <div>
            <FinanceMock />
          </div>
        </div>
      </div>
    </section>
  );
};

const FinanceMock = () => {
  return (
    <div style={{
      borderRadius: 18,
      background: "linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%)",
      border: "1px solid rgba(255,255,255,0.08)",
      padding: 24,
      backdropFilter: "blur(6px)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <div className="mono" style={{ fontSize: 11, color: "#7a8597", textTransform: "uppercase", letterSpacing: "0.08em" }}>P&L • Апрель 2026</div>
          <div style={{ fontSize: 28, fontWeight: 500, marginTop: 6, color: "#fff", letterSpacing: "-0.02em" }}>₸ 6 982 400</div>
          <div style={{ fontSize: 13, color: "var(--accent)", marginTop: 2 }}>+18.6% к марту</div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          {["KZT", "USD", "RUB"].map((c, i) => (
            <span key={c} className="mono" style={{
              fontSize: 11, padding: "5px 10px", borderRadius: 6,
              background: i === 0 ? "rgba(34,197,94,0.14)" : "transparent",
              color: i === 0 ? "var(--accent)" : "#7a8597",
              border: "1px solid " + (i === 0 ? "rgba(34,197,94,0.25)" : "rgba(255,255,255,0.08)"),
            }}>{c}</span>
          ))}
        </div>
      </div>

      {/* Stacked bars by branch */}
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {[
          { name: "Алматы — центр", income: 78, expense: 42 },
          { name: "Астана — Хан Шатыр", income: 64, expense: 38 },
          { name: "Шымкент", income: 52, expense: 30 },
          { name: "Караганда", income: 38, expense: 28 },
          { name: "Онлайн магазин", income: 70, expense: 24 },
        ].map((row, i) => (
          <div key={i}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "#cbd2dd", marginBottom: 6 }}>
              <span>{row.name}</span>
              <span className="mono" style={{ color: "#7a8597" }}>+₸ {(row.income * 18).toLocaleString("ru")}K</span>
            </div>
            <div style={{ display: "flex", gap: 4, height: 10 }}>
              <div style={{ width: row.income + "%", background: "var(--accent)", borderRadius: 3 }}/>
              <div style={{ width: row.expense + "%", background: "rgba(255,255,255,0.12)", borderRadius: 3 }}/>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 22, display: "flex", gap: 16, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.06)" }}>
        <Legend color="var(--accent)" label="Доход"/>
        <Legend color="rgba(255,255,255,0.25)" label="Расход"/>
        <div style={{ flex: 1 }}/>
        <span className="mono" style={{ fontSize: 11, color: "#7a8597" }}>обновлено 2 мин назад</span>
      </div>
    </div>
  );
};

const Legend = ({ color, label }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "#cbd2dd" }}>
    <span style={{ width: 10, height: 10, borderRadius: 2, background: color }}/> {label}
  </span>
);

const ModulesResponsiveStyles = () => (
  <style>{`
    @media (max-width: 980px) {
      .modules-layout { grid-template-columns: 1fr !important; gap: 14px !important; }
      .modules-tabs { flex-direction: row !important; overflow-x: auto; padding-bottom: 4px; }
      .modules-tab-btn { flex: 0 0 auto; min-width: 180px; }
      .modules-preview { min-height: 0 !important; }
    }

    @media (max-width: 640px) {
      #modules.section { padding-top: 72px; padding-bottom: 72px; }
      .modules-preview { padding: 18px !important; border-radius: 14px !important; }
      .module-preview-grid-4, .module-preview-grid-3, .module-preview-grid-2, .module-preview-grid-wide {
        grid-template-columns: 1fr !important;
      }
      .module-preview-table-wrap { overflow-x: auto; }
      .module-preview-table-head, .module-preview-table-row { min-width: 640px; }
      .module-preview-hr-grid { min-width: 620px; }
    }
  `}</style>
);

/* Modules — interactive tabs */
const Modules = () => {
  const items = [
    { icon: "sales", key: "sales", name: "Продажи", text: "Сделки, статусы, источники, повторные продажи и анализ конверсии воронки." },
    { icon: "users", key: "clients", name: "Клиенты", text: "Карточки клиентов, история коммуникаций, сегментация и повторные продажи." },
    { icon: "box", key: "products", name: "Товары", text: "Каталог, варианты, наборы, SKU и штрихкоды, гибкое ценообразование." },
    { icon: "warehouse", key: "warehouse", name: "Склад", text: "Приходы, перемещения, списания, инвентаризация и актуальные остатки." },
    { icon: "hr", key: "hr", name: "HR", text: "Сотрудники, графики, планы продаж, отпуска и кадровая аналитика." },
    { icon: "salary", key: "salary", name: "Зарплата", text: "Правила бонусов, KPI, автоматический расчет начислений и история выплат." },
    { icon: "report", key: "reports", name: "Отчеты", text: "Срезы по менеджерам, каналам и динамике ключевых метрик бизнеса." },
    { icon: "settings", key: "settings", name: "Настройки", text: "Справочники, права доступа, филиалы и системные параметры." },
  ];
  const [active, setActive] = React.useState(0);
  const cur = items[active];

  return (
    <section id="modules" className="section" style={{ background: "var(--bg-1)", borderTop: "1px solid var(--line)" }}>
      <ModulesResponsiveStyles />
      <div className="container">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <span className="eyebrow">Модули</span>
          <h2 style={{ marginTop: 14 }}>Восемь модулей Saudax</h2>
          <p className="muted" style={{ marginTop: 14, fontSize: 16 }}>
            Каждый модуль работает как самостоятельный продукт и одновременно — часть единой системы.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "320px 1fr",
          gap: 24,
          alignItems: "start",
        }} className="modules-layout">
          {/* Tab list */}
          <div className="modules-tabs" style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {items.map((it, i) => (
              <button key={it.key} className="modules-tab-btn" onClick={() => setActive(i)} style={{
                display: "flex", alignItems: "center", gap: 14,
                textAlign: "left",
                padding: "14px 16px",
                borderRadius: 12,
                background: i === active ? "#fff" : "transparent",
                border: "1px solid " + (i === active ? "var(--line)" : "transparent"),
                color: i === active ? "var(--fg-0)" : "var(--fg-2)",
                fontSize: 15.5,
                transition: "all 180ms ease",
                boxShadow: i === active ? "0 4px 18px -10px rgba(0,0,0,0.15)" : "none",
              }}>
                <span style={{
                  width: 36, height: 36, borderRadius: 10, display: "grid", placeItems: "center",
                  background: i === active ? "var(--accent-soft)" : "transparent",
                  color: i === active ? "var(--accent-700)" : "var(--fg-3)",
                  border: "1px solid " + (i === active ? "var(--accent-tint)" : "transparent"),
                }}>
                  <Icon name={it.icon} size={18}/>
                </span>
                <span style={{ flex: 1 }}>{it.name}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--fg-4)" }}>0{i + 1}</span>
              </button>
            ))}
          </div>

          {/* Preview */}
          <div className="modules-preview" style={{
            background: "#fff",
            border: "1px solid var(--line)",
            borderRadius: 18,
            minHeight: 480,
            padding: 32,
            position: "relative",
            overflow: "hidden",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <span style={{
                width: 48, height: 48, borderRadius: 14,
                background: "var(--accent-soft)", border: "1px solid var(--accent-tint)",
                display: "grid", placeItems: "center", color: "var(--accent-700)",
              }}>
                <Icon name={cur.icon} size={22}/>
              </span>
              <div>
                <div className="mono" style={{ fontSize: 11, color: "var(--fg-4)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                  Модуль 0{active + 1}
                </div>
                <h3 style={{ fontSize: 24 }}>{cur.name}</h3>
              </div>
            </div>
            <p style={{ color: "var(--fg-2)", fontSize: 16.5, lineHeight: 1.55, maxWidth: 560 }}>{cur.text}</p>

            <ModulePreview which={cur.key} />
          </div>
        </div>
      </div>
    </section>
  );
};

const ModulePreview = ({ which }) => {
  /* Tiny stylized fragment per module */
  if (which === "sales") {
    return (
      <div className="module-preview-grid-4" style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {[
          ["Новые", 24, "Холодные лиды"],
          ["В работе", 38, "С менеджером"],
          ["Счет выставлен", 17, "Ожидают оплаты"],
          ["Оплачено", 52, "Закрыто за 30д"],
        ].map(([t, n, s], i) => (
          <div key={i} style={{ padding: 16, border: "1px solid var(--line)", borderRadius: 12, background: "var(--bg-1)" }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{t}</div>
            <div style={{ fontSize: 28, fontWeight: 500, marginTop: 6 }}>{n}</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2 }}>{s}</div>
            <div style={{ marginTop: 10, height: 4, borderRadius: 2, background: "var(--bg-3)", overflow: "hidden" }}>
              <div style={{ width: (i + 1) * 22 + "%", height: "100%", background: "var(--accent)" }}/>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (which === "warehouse") {
    return (
      <div className="module-preview-table-wrap" style={{ marginTop: 28, border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden" }}>
        <div className="module-preview-table-head" style={{ padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-1)", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", fontSize: 12, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>
            <span>SKU / Товар</span><span>Алматы</span><span>Астана</span><span>Шымкент</span>
        </div>
        {[
          ["SDX-1042 — Кофе зерновой 1кг", 124, 86, 42],
          ["SDX-2210 — Чайник электр.", 12, 4, 7],
          ["SDX-3091 — Молотый какао 250г", 240, 180, 95],
          ["SDX-4011 — Контейнер 500мл", 64, 0, 18],
        ].map(([n, a, b, c], i) => (
          <div key={i} className="module-preview-table-row" style={{ padding: "12px 16px", borderTop: i ? "1px solid var(--line)" : "0", display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", fontSize: 14, alignItems: "center" }}>
            <span style={{ color: "var(--fg-1)" }}>{n}</span>
            <span className="mono">{a}</span>
            <span className="mono" style={{ color: b === 0 ? "#ef4444" : "inherit" }}>{b}</span>
            <span className="mono">{c}</span>
          </div>
        ))}
      </div>
    );
  }
  if (which === "salary") {
    return (
      <div className="module-preview-grid-2" style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {[
          ["А. Жунусов", "Менеджер продаж", 870000, 142000, 96],
          ["Д. Сериков", "Старший менеджер", 1100000, 220000, 112],
          ["М. Алтаева", "Менеджер", 720000, 86000, 78],
          ["Р. Кадыров", "Руководитель отдела", 1450000, 310000, 124],
        ].map(([name, role, base, bonus, kpi], i) => (
          <div key={i} style={{ padding: 16, border: "1px solid var(--line)", borderRadius: 12, background: "var(--bg-1)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{name}</div>
                <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{role}</div>
              </div>
              <div className="mono" style={{ fontSize: 11, padding: "3px 8px", borderRadius: 6, background: kpi >= 100 ? "var(--accent-soft)" : "var(--bg-2)", color: kpi >= 100 ? "var(--accent-700)" : "var(--fg-2)", border: "1px solid " + (kpi >= 100 ? "var(--accent-tint)" : "var(--line)") }}>
                KPI {kpi}%
              </div>
            </div>
            <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", fontSize: 13 }}>
              <span style={{ color: "var(--fg-3)" }}>Оклад</span>
              <span className="mono">₸ {base.toLocaleString("ru")}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginTop: 4 }}>
              <span style={{ color: "var(--fg-3)" }}>Бонус</span>
              <span className="mono" style={{ color: "var(--accent-700)" }}>+ ₸ {bonus.toLocaleString("ru")}</span>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (which === "products") {
    return (
      <div className="module-preview-grid-4" style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {[
          ["Кофе зерновой", "120 SKU", "от ₸ 1 800"],
          ["Аксессуары", "48 SKU", "от ₸ 450"],
          ["Сиропы", "32 SKU", "от ₸ 2 200"],
          ["Бариста-сет", "набор · 6 SKU", "₸ 14 900"],
        ].map(([n, s, p], i) => (
          <div key={i} style={{ padding: 14, border: "1px solid var(--line)", borderRadius: 12, background: "var(--bg-1)" }}>
            <div style={{ height: 80, borderRadius: 8, background: "repeating-linear-gradient(135deg, var(--bg-2) 0 8px, #fff 8px 16px)", border: "1px dashed var(--line-strong)", display: "grid", placeItems: "center" }}>
              <Icon name="box" size={20}/>
            </div>
            <div style={{ marginTop: 10, fontSize: 13.5, fontWeight: 500 }}>{n}</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{s}</div>
            <div className="mono" style={{ fontSize: 12, color: "var(--accent-700)", marginTop: 4 }}>{p}</div>
          </div>
        ))}
      </div>
    );
  }
  if (which === "clients") {
    return (
      <div className="module-preview-grid-wide" style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16 }}>
        <div style={{ border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden" }}>
          {[
            ["ТОО Алтын", "B2B · Постоянный", 12, 1240000],
            ["Retail KZ", "B2B · Сеть", 24, 3680000],
            ["ИП Каримов", "B2B · Новый", 2, 320000],
            ["Розница, Алматы", "B2C", 184, 2940000],
          ].map(([n, t, c, v], i) => (
            <div key={i} style={{ padding: "14px 16px", display: "grid", gridTemplateColumns: "1.5fr 1fr 60px 1.2fr", alignItems: "center", borderTop: i ? "1px solid var(--line)" : "0", fontSize: 14 }}>
              <span style={{ fontWeight: 500 }}>{n}</span>
              <span style={{ color: "var(--fg-3)", fontSize: 12.5 }}>{t}</span>
              <span className="mono" style={{ color: "var(--fg-2)" }}>×{c}</span>
              <span className="mono" style={{ textAlign: "right" }}>₸ {v.toLocaleString("ru")}</span>
            </div>
          ))}
        </div>
        <div style={{ border: "1px solid var(--line)", borderRadius: 12, padding: 18, background: "var(--bg-1)" }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Сегменты</div>
          <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }}>
            {[["Постоянные", 64], ["Спящие", 22], ["Новые", 14]].map(([s, p]) => (
              <div key={s}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13 }}>
                  <span>{s}</span><span className="mono" style={{ color: "var(--fg-3)" }}>{p}%</span>
                </div>
                <div style={{ height: 6, borderRadius: 3, background: "#fff", border: "1px solid var(--line)", marginTop: 4, overflow: "hidden" }}>
                  <div style={{ width: p + "%", height: "100%", background: "var(--accent)" }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
  if (which === "hr") {
    return (
      <div className="module-preview-table-wrap" style={{ marginTop: 28, border: "1px solid var(--line)", borderRadius: 12, padding: 16, background: "var(--bg-1)" }}>
        <div className="module-preview-hr-grid" style={{ display: "grid", gridTemplateColumns: "180px repeat(7, 1fr)", gap: 8, alignItems: "center" }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--fg-3)" }}>Сотрудник</div>
            {["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"].map(d => (
            <div key={d} className="mono" style={{ fontSize: 11, color: "var(--fg-3)", textAlign: "center" }}>{d}</div>
          ))}
          {[
            ["А. Жунусов", [1,1,1,0,1,1,0]],
            ["Д. Сериков", [1,1,0,1,1,1,1]],
            ["М. Алтаева", [0,1,1,1,1,0,0]],
            ["Р. Кадыров", [1,1,1,1,1,1,0]],
          ].map(([n, days], i) => (
            <React.Fragment key={i}>
              <div style={{ fontSize: 13.5 }}>{n}</div>
              {days.map((d, j) => (
                <div key={j} style={{ height: 28, borderRadius: 6, background: d ? "var(--accent-soft)" : "#fff", border: "1px solid " + (d ? "var(--accent-tint)" : "var(--line)") }}/>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    );
  }  if (which === "reports") {
    const months = ["Я","Ф","М","А","М","И","И","А","С","О","Н","Д"];
    const revenue = [40, 55, 48, 72, 60, 82, 76, 90, 84, 96, 88, 100];
    const avg = Math.round(revenue.reduce((s, v) => s + v, 0) / revenue.length);
    const peak = Math.max(...revenue);
    const peakIndex = revenue.indexOf(peak);

    return (
      <div style={{
        marginTop: 28,
        padding: 18,
        border: "1px solid var(--line)",
        borderRadius: 12,
        background: "linear-gradient(180deg, #fff 0%, var(--bg-1) 100%)",
      }}>
        <div className="module-preview-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginBottom: 14 }}>
          <div style={{ padding: 10, borderRadius: 10, border: "1px solid var(--line)", background: "#fff" }}>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--fg-3)", textTransform: "uppercase" }}>Среднее</div>
            <div style={{ marginTop: 4, fontSize: 20, fontWeight: 600 }}>{avg}%</div>
          </div>
          <div style={{ padding: 10, borderRadius: 10, border: "1px solid var(--line)", background: "#fff" }}>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--fg-3)", textTransform: "uppercase" }}>Пик</div>
            <div style={{ marginTop: 4, fontSize: 20, fontWeight: 600 }}>{peak}%</div>
          </div>
          <div style={{ padding: 10, borderRadius: 10, border: "1px solid var(--line)", background: "#fff" }}>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--fg-3)", textTransform: "uppercase" }}>Лучший месяц</div>
            <div style={{ marginTop: 4, fontSize: 20, fontWeight: 600 }}>{months[peakIndex]}</div>
          </div>
        </div>

        <div style={{
          display: "flex",
          alignItems: "end",
          gap: 8,
          height: 170,
          padding: "10px 8px 8px",
          border: "1px solid var(--line)",
          borderRadius: 10,
          background: "#fff",
        }}>
          {revenue.map((v, i) => (
            <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
              <div
                title={`${months[i]}: ${v}%`}
                style={{
                  width: "100%",
                  height: v + "%",
                  minHeight: 10,
                  background: i === peakIndex ? "var(--accent-700)" : "var(--accent)",
                  borderRadius: "7px 7px 0 0",
                  opacity: i === peakIndex ? 1 : 0.45 + (i / 12) * 0.45,
                  boxShadow: i === peakIndex ? "0 8px 18px -8px color-mix(in oklab, var(--accent-700) 55%, transparent)" : "none",
                  transition: "height 240ms ease, opacity 200ms ease",
                }}
              />
              <span className="mono" style={{ fontSize: 10, color: "var(--fg-4)" }}>{months[i]}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (which === "settings") {
    return (
      <div className="module-preview-grid-3" style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
        {[
          ["Справочники", "Контрагенты, валюты, налоги, единицы измерения"],
          ["Права доступа", "Роли, ограничения по филиалам и операциям"],
          ["Филиалы и склады", "Иерархия, мультивалютность, локальные настройки"],
          ["Шаблоны документов", "Счета, акты, накладные, чеки"],
          ["Интеграции", "OFD, банк, мессенджеры, маркетплейсы"],
          ["Журнал событий", "Аудит изменений и история действий"],
        ].map(([t, s], i) => (
          <div key={i} style={{ padding: 14, border: "1px solid var(--line)", borderRadius: 10, background: "var(--bg-1)" }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>{t}</div>
            <div style={{ fontSize: 12.5, color: "var(--fg-3)", marginTop: 4 }}>{s}</div>
          </div>
        ))}
      </div>
    );
  }
  return null;
};

Object.assign(window, { ForWhom, CoreFeatures, Financial, Modules });