// ============= PRODUCT MOCKUPS (built from the design system) =============

const MOCK_T = {
  ru: { outreach:"Outreach", crm:"CRM", main:"Главное", leadgen:"Лидоген", send:"Рассылка",
        dash:"Дашборд", yt:"YouTube Лиды", verify:"Верификация", analytics:"Аналитика", mailings:"Рассылки", accounts:"Аккаунты", warmup:"Прогрев",
        title:"Дашборд", sub:"Обзор лидогенерации и рассылок", newCamp:"Новая рассылка",
        leadsBase:"Лидов в базе", contacted:"Контактировано", conv:"Конверсия",
        flow:"Поток лидов · 2026", account:"Аккаунт отправки", warmupL:"Прогрев", limit:"Лимит", channels:"Каналы лидов", total:"всего" },
  en: { outreach:"Outreach", crm:"CRM", main:"Main", leadgen:"Lead gen", send:"Outreach",
        dash:"Dashboard", yt:"YouTube Leads", verify:"Verification", analytics:"Analytics", mailings:"Campaigns", accounts:"Accounts", warmup:"Warm-up",
        title:"Dashboard", sub:"Lead-gen & outreach overview", newCamp:"New campaign",
        leadsBase:"Leads in base", contacted:"Contacted", conv:"Conversion",
        flow:"Lead flow · 2026", account:"Sending account", warmupL:"Warm-up", limit:"Limit", channels:"Lead channels", total:"total" },
  uk: { outreach:"Outreach", crm:"CRM", main:"Головне", leadgen:"Лідоген", send:"Розсилка",
        dash:"Дашборд", yt:"YouTube Ліди", verify:"Верифікація", analytics:"Аналітика", mailings:"Розсилки", accounts:"Акаунти", warmup:"Прогрів",
        title:"Дашборд", sub:"Огляд лідогенерації та розсилок", newCamp:"Нова розсилка",
        leadsBase:"Лідів у базі", contacted:"Контактовано", conv:"Конверсія",
        flow:"Потік лідів · 2026", account:"Акаунт відправки", warmupL:"Прогрів", limit:"Ліміт", channels:"Канали лідів", total:"всього" },
};

const MONTHS = ["Янв","Фев","Мар","Апр","Май","Июн","Июл","Авг","Сен","Окт","Ноя","Дек"];
const BAR_VALS = [34, 48, 40, 62, 52, 100, 70, 58, 44, 80, 56, 66];
const HOT_IDX = 5;

function Spark({ seed, color }) {
  const d = sparkPath(seed, 100, 24, 14);
  const id = "sg" + seed;
  return (
    <svg className="mstat__spark" viewBox="0 0 100 24" preserveAspectRatio="none" aria-hidden="true">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity="0.35" />
          <stop offset="1" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={`${d} L 100 24 L 0 24 Z`} fill={`url(#${id})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}

function DashboardMock() {
  const { lang } = useApp();
  const m = MOCK_T[lang] || MOCK_T.ru;
  const ref = useRef(null);
  const { seen: animate } = useInView(ref, { threshold: 0.2 });

  const nav = [
    { ico: <IconGrid />, t: m.dash, on: true, sec: m.main },
    { ico: <IconMsg />, t: lang === "en" ? "Support" : (lang === "uk" ? "Підтримка" : "Поддержка") },
    { ico: <IconYT />, t: m.yt, sec: m.leadgen },
    { ico: <IconCheck />, t: m.verify },
    { ico: <IconChart />, t: m.analytics },
    { ico: <IconSend />, t: m.mailings, sec: m.send },
    { ico: <IconAt />, t: m.accounts },
    { ico: <IconFlame />, t: m.warmup },
  ];

  return (
    <div className="mock mock--rail" ref={ref}>
      {/* sidebar */}
      <aside className="mock__side">
        <div className="mock__brand">
          <span className="bm"><IconLogo /></span>
          <span className="bn">Outforge</span>
        </div>
        <div className="mock__seg"><b className="on">{m.outreach}</b><b>{m.crm}</b></div>
        {nav.map((n, i) => (
          <React.Fragment key={i}>
            {n.sec ? <div className="mock__nsec">{n.sec}</div> : null}
            <div className={`mock__ni ${n.on ? "on" : ""}`}>{n.ico}<span>{n.t}</span></div>
          </React.Fragment>
        ))}
      </aside>

      {/* main */}
      <div className="mock__main">
        <div className="mock__top">
          <div>
            <div className="mock__h">{m.title}</div>
            <div className="mock__hsub">{m.sub}</div>
          </div>
          <button className="mock__chip"><IconPlus />{m.newCamp}</button>
        </div>

        <div className="mock__stats">
          <div className="mstat"><div className="mstat__l">{m.leadsBase}</div><div className="mstat__v">3 312</div><Spark seed={7} color="var(--accent)" /></div>
          <div className="mstat"><div className="mstat__l">{m.contacted}</div><div className="mstat__v">1 248</div><Spark seed={31} color="var(--vio)" /></div>
          <div className="mstat"><div className="mstat__l">{m.conv}</div><div className="mstat__v">9.4%</div><Spark seed={53} color="var(--ok)" /></div>
        </div>

        <div className="mock__chart">
          <div className="mock__chart-h">
            <div>
              <div className="mock__chart-t">{m.flow}</div>
              <div className="mock__chart-v">146 851</div>
            </div>
            <span className="badge badge--accent"><span className="bdot"></span>+12%</span>
          </div>
          <div className="mbars">
            {BAR_VALS.map((v, i) => (
              <div key={i} className={`bar ${i === HOT_IDX ? "hot" : ""}`} data-v="16 251"
                style={{ height: animate ? `${v}%` : "6%", transitionDelay: `${i * 45}ms` }}></div>
            ))}
          </div>
        </div>
      </div>

      {/* rail */}
      <aside className="mock__rail">
        <div className="rcard">
          <div className="rcard__t">{m.account}</div>
          <div className="racc">
            <span className="racc__av">M</span>
            <div><div className="racc__n">Mark</div><div className="racc__s">@markos45</div></div>
            <span className="rsend"><IconTG /></span>
          </div>
          <div className="rline"><span className="k">{m.warmupL}</span><span className="v">86%</span></div>
          <div className="rbar"><i style={{ width: animate ? "86%" : "0%" }}></i></div>
          <div className="rline"><span className="k">{m.limit}</span><span className="v">64/100</span></div>
          <div className="rbar"><i style={{ width: animate ? "64%" : "0%", background: "linear-gradient(90deg,var(--vio),color-mix(in oklab,var(--vio),white 20%))" }}></i></div>
        </div>
        <div className="rcard">
          <div className="rcard__t">{m.channels} · 3 312 {m.total}</div>
          <div className="rchan"><span className="cd" style={{ background: "var(--accent)" }}></span><span className="cn">YouTube</span><span className="cv">94%</span></div>
          <div className="rchan"><span className="cd" style={{ background: "var(--vio)" }}></span><span className="cn">Telegram</span><span className="cv">4%</span></div>
          <div className="rchan"><span className="cd" style={{ background: "var(--text-dim)" }}></span><span className="cn">Email</span><span className="cv">2%</span></div>
        </div>
      </aside>
    </div>
  );
}

// compact analytics mock — area chart (for showcase)
function AnalyticsMock() {
  const ref = useRef(null);
  const { seen } = useInView(ref, { threshold: 0.2 });
  const area = wavePath(71, 320, 120, 72, 110, 9);
  const lnOk = wavePath(37, 320, 120, 46, 72, 9);
  const lnVio = wavePath(13, 320, 120, 14, 42, 9);
  return (
    <div ref={ref} style={{ padding: "20px 20px 76px", background: "var(--bg)", height: "100%" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div>
          <div className="mock__chart-t">{["24Ч","7Д","30Д","90Д"][1]}</div>
          <div className="mock__chart-v" style={{ fontSize: 20 }}>1 440</div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {[["var(--accent)"],["var(--ok)"],["var(--vio)"]].map((c,i)=>(
            <span key={i} style={{ width: 9, height: 9, borderRadius: 3, background: c[0], display:"inline-block" }}></span>
          ))}
        </div>
      </div>
      <svg viewBox="0 0 320 120" preserveAspectRatio="none" style={{ width:"100%", height: 160, display:"block", overflow:"hidden" }}>
        <defs>
          <linearGradient id="aa" 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>
        {[24, 54, 84, 114].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 120 L 0 120 Z`} fill="url(#aa)" />
        <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>
  );
}

Object.assign(window, { DashboardMock, AnalyticsMock, Spark });