// ERP365 · Shared components: Nav, Footer, CTA banner, mock dashboard.
// Each page is its own HTML file; navigation = real anchor links.

window.__erp_routes = {
  home: '/',
  funkcionalumas: '/funkcionalumas',
  kainos: '/kainos',
  rivile: '/rivile',
  siuntos: '/siuntos',
  prieziura: '/prieziura',
  apie: '/apie',
  blogas: '/blogas',
  'blog-post': '/blogas/baltijos-medis',
  kontaktai: '/kontaktai',
  privatumas: '/privatumas',
  taisykles: '/taisykles',
};

window.__erp_url = (p) => window.__erp_routes[p] || '/';

window.__erp_page_from_path = () => {
  const path = window.location.pathname.replace(/\/$/, '') || '/';
  for (const [page, route] of Object.entries(window.__erp_routes)) {
    if (route === path) return page;
  }
  return 'home';
};

// Backward-compat fallback for any straggler call sites.
window.__erp_nav = (p) => { window.location.href = window.__erp_url(p); };
window.__erp_page = window.__erp_page_from_path();

const APPOINTLET_URL = 'https://appt.link/meet-with-erp365-7L7tGvrg';
const WEB3FORMS_ACCESS_KEY = 'cf359f55-06f8-4dd8-babf-366a4411e9d8';

function DemoRegistrationForm() {
  const [vardas, setVardas] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [imone, setImone] = React.useState('');
  const [telefonas, setTelefonas] = React.useState('+370 ');
  const [sutikimas, setSutikimas] = React.useState(false);
  const [status, setStatus] = React.useState('idle');
  const [errors, setErrors] = React.useState({});

  const validateEmail = (v) =>
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v || '').trim())
      ? null
      : 'Įveskite teisingą el. pašto adresą.';
  const validatePhone = (v) => {
    const cleaned = (v || '').replace(/[\s\-()]/g, '');
    if (!cleaned.startsWith('+')) return 'Telefonas turi prasidėti su + ir šalies kodu (pvz. +370).';
    if (!/^\+\d{7,15}$/.test(cleaned)) return 'Įveskite teisingą telefono numerį su šalies kodu (pvz. +370 600 00000).';
    return null;
  };

  const clearError = (key) => {
    setErrors((prev) => (prev[key] ? { ...prev, [key]: null } : prev));
  };

  const onBlurValidate = (key, validator) => (e) => {
    const err = validator(e.target.value);
    setErrors((prev) => ({ ...prev, [key]: err }));
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    const fieldErrors = {
      email: validateEmail(email),
      telefonas: validatePhone(telefonas),
    };
    if (fieldErrors.email || fieldErrors.telefonas) {
      setErrors(fieldErrors);
      return;
    }
    setErrors({});
    if (!sutikimas) return;
    setStatus('sending');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_ACCESS_KEY,
          subject: 'Demo registracija — ERP365',
          from_name: vardas,
          replyto: email,
          vardas,
          email,
          imone,
          telefonas,
          botcheck: '',
        }),
      });
      const data = await res.json().catch(() => ({ success: false }));
      setStatus(data.success ? 'ok' : 'error');
    } catch (_err) {
      setStatus('error');
    }
  };

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  }, [status]);

  if (status === 'ok') {
    return (
      <div className="erp-booking-modal-form-success" role="status" aria-live="polite">
        <div className="erp-booking-modal-form-success-icon">
          <i data-lucide="check"></i>
        </div>
        <h4>Ačiū{vardas ? `, ${vardas}` : ''}!</h4>
        <p>Susisieksime per 1 darbo dieną ir atsiųsime prisijungimą prie ERP365 demo aplinkos el. paštu <strong>{email}</strong>.</p>
      </div>
    );
  }

  const submitDisabled = !sutikimas || status === 'sending';

  return (
    <form className="erp-booking-modal-form-fields" onSubmit={onSubmit} noValidate>
      <div className="erp-form-row">
        <div className="erp-form-field">
          <label htmlFor="reg-vardas">Vardas</label>
          <input
            id="reg-vardas"
            type="text"
            required
            autoComplete="name"
            value={vardas}
            onChange={(e) => setVardas(e.target.value)}
          />
        </div>
        <div className="erp-form-field">
          <label htmlFor="reg-telefonas">Telefonas</label>
          <input
            id="reg-telefonas"
            type="tel"
            required
            autoComplete="tel"
            placeholder="+370 600 00000"
            className={errors.telefonas ? 'is-error' : ''}
            aria-invalid={!!errors.telefonas}
            aria-describedby={errors.telefonas ? 'reg-telefonas-error' : undefined}
            value={telefonas}
            onChange={(e) => { setTelefonas(e.target.value); clearError('telefonas'); }}
            onBlur={onBlurValidate('telefonas', validatePhone)}
          />
          {errors.telefonas && (
            <p id="reg-telefonas-error" className="erp-form-field-error" role="alert">{errors.telefonas}</p>
          )}
        </div>
      </div>
      <div className="erp-form-field">
        <label htmlFor="reg-email">Darbo el. paštas</label>
        <input
          id="reg-email"
          type="email"
          required
          autoComplete="email"
          placeholder="vardas@imone.lt"
          className={errors.email ? 'is-error' : ''}
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? 'reg-email-error' : undefined}
          value={email}
          onChange={(e) => { setEmail(e.target.value); clearError('email'); }}
          onBlur={onBlurValidate('email', validateEmail)}
        />
        {errors.email && (
          <p id="reg-email-error" className="erp-form-field-error" role="alert">{errors.email}</p>
        )}
      </div>
      <div className="erp-form-field">
        <label htmlFor="reg-imone">Įmonė</label>
        <input
          id="reg-imone"
          type="text"
          required
          autoComplete="organization"
          value={imone}
          onChange={(e) => setImone(e.target.value)}
        />
      </div>
      <label className="erp-form-check">
        <input
          type="checkbox"
          checked={sutikimas}
          onChange={(e) => setSutikimas(e.target.checked)}
          required
        />
        <span>Sutinku, kad mano duomenys bus tvarkomi pagal <a href={window.__erp_url('privatumas')}>privatumo politiką</a>.</span>
      </label>
      <button
        type="submit"
        className="erp-btn erp-btn-primary erp-btn-full erp-btn-lg"
        disabled={submitDisabled}
      >
        {status === 'sending' ? 'Siunčiama…' : 'Gauti demo prisijungimą →'}
      </button>
      {status === 'error' && (
        <p className="erp-booking-modal-form-error" role="alert">
          Nepavyko išsiųsti. Bandykite dar kartą arba parašykite <a href="mailto:info@erp365.lt">info@erp365.lt</a>.
        </p>
      )}
    </form>
  );
}

function BookingModal() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    window.__erp_book_demo = () => setOpen(true);
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    if (open && window.lucide) window.lucide.createIcons();
  }, [open]);
  if (!open) return null;
  return (
    <div className="erp-booking-modal" onClick={() => setOpen(false)} role="dialog" aria-modal="true" aria-label="Užsisakyti demo">
      <div className="erp-booking-modal-inner erp-booking-modal-inner-split" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="erp-booking-modal-close" onClick={() => setOpen(false)} aria-label="Uždaryti">
          <i data-lucide="x"></i>
        </button>

        <aside className="erp-booking-modal-form">
          <div className="erp-booking-panel-badge">
            <i data-lucide="key-round" style={{width: 16, height: 16}}></i>
            <span>Greitas prisijungimas</span>
          </div>
          <h3>Gaukite demo prisijungimą</h3>
          <p className="erp-form-lede">Užpildykite ir per 1 darbo dieną atsiųsime prisijungimą prie ERP365 demo aplinkos.</p>
          <DemoRegistrationForm />
        </aside>

        <div className="erp-booking-modal-divider" aria-hidden="true">
          <span>arba</span>
        </div>

        <section className="erp-booking-modal-calendar">
          <header className="erp-booking-modal-calendar-head">
            <div className="erp-booking-panel-badge">
              <i data-lucide="calendar-check" style={{width: 16, height: 16}}></i>
              <span>30 min. demo skambutis</span>
            </div>
            <h3>Susitarkite pokalbį</h3>
          </header>
          <iframe
            className="erp-booking-modal-frame"
            src={APPOINTLET_URL}
            title="Užsisakyti demo — ERP365"
            loading="lazy"
            allow="camera; microphone; autoplay; fullscreen"
          />
        </section>
      </div>
    </div>
  );
}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const page = window.__erp_page_from_path();
  const [openDrop, setOpenDrop] = React.useState(null);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobileSolOpen, setMobileSolOpen] = React.useState(false);
  const closeTimer = React.useRef(null);
  const url = window.__erp_url;
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', on);
    return () => { window.removeEventListener('scroll', on); };
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    const onKey = (e) => { if (e.key === 'Escape') setMobileOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [mobileOpen]);
  const openMenu = (id) => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    setOpenDrop(id);
  };
  const scheduleClose = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setOpenDrop(null), 120);
  };
  const solutions = [
    { id: 'rivile',    label: 'Rivilė integracija',  desc: 'Odoo ⇄ Rivilės apskaitos sistema per REST API', icon: 'refresh-cw' },
    { id: 'siuntos',   label: 'Siuntų integracijos', desc: 'DPD · LP Express · Omniva · Venipak — etiketės ir sekimas', icon: 'truck' },
    { id: 'prieziura', label: 'Įrangos priežiūra',   desc: 'Įrangos registras, užduotys, garantijos ir patikros', icon: 'wrench', iconImg: 'assets/odoo-maintenance.svg' },
  ];
  const solActive = ['rivile', 'siuntos', 'prieziura'].includes(page);
  return (
    <>
    <nav className={`erp-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="erp-nav-inner">
        <a href={url('home')} className="erp-nav-logo">
          <LogoMark height={28} />
        </a>
        <div className="erp-nav-links">
          <a href={url('funkcionalumas')} className={page === 'funkcionalumas' ? 'is-active' : ''}>Funkcionalumas</a>

          <div
            className="erp-nav-drop"
            onMouseEnter={() => openMenu('sprendimai')}
            onMouseLeave={scheduleClose}
          >
            <a
              href="#"
              onClick={(e) => { e.preventDefault(); setOpenDrop(openDrop === 'sprendimai' ? null : 'sprendimai'); }}
              className={`erp-nav-drop-trigger ${solActive ? 'is-active' : ''} ${openDrop === 'sprendimai' ? 'is-open' : ''}`}
              aria-expanded={openDrop === 'sprendimai'}
            >
              Sprendimai
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{marginLeft: 4, transition: 'transform 180ms', transform: openDrop === 'sprendimai' ? 'rotate(180deg)' : 'none'}}><path d="M6 9l6 6 6-6"/></svg>
            </a>
            {openDrop === 'sprendimai' && (
              <div className="erp-nav-dropmenu">
                <div className="erp-nav-dropmenu-head">Integracijos ir spec. sprendimai</div>
                {solutions.map(s => (
                  <a key={s.id} href={url(s.id)} className={`erp-nav-dropmenu-item ${page === s.id ? 'is-active' : ''}`}>
                    <span className={`erp-nav-dropmenu-icon ${s.iconImg ? 'erp-nav-dropmenu-icon--img' : ''}`}>
                      {s.iconImg
                        ? <img src={s.iconImg} alt="" />
                        : <i data-lucide={s.icon} style={{width: 18, height: 18}}></i>}
                    </span>
                    <span>
                      <span className="erp-nav-dropmenu-item-t">{s.label}</span>
                      <span className="erp-nav-dropmenu-item-d">{s.desc}</span>
                    </span>
                  </a>
                ))}
              </div>
            )}
          </div>

          <a href={url('kainos')} className={page === 'kainos' ? 'is-active' : ''}>Kainos</a>
          <a href={url('apie')} className={page === 'apie' ? 'is-active' : ''}>Apie ERP365</a>
          {/* <a href={url('blogas')} className={page === 'blogas' ? 'is-active' : ''}>Blogas</a> */}
          <a href={url('kontaktai')} className={page === 'kontaktai' ? 'is-active' : ''}>Kontaktai</a>
        </div>
        <div className="erp-nav-actions">
          <a href={APPOINTLET_URL} onClick={(e) => { e.preventDefault(); setMobileOpen(false); window.__erp_book_demo && window.__erp_book_demo(); }} className="erp-btn erp-btn-primary erp-btn-sm erp-nav-demo-desktop">Užsisakyti demo</a>
          <button
            type="button"
            className="erp-nav-burger"
            aria-label={mobileOpen ? 'Uždaryti meniu' : 'Atidaryti meniu'}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen(v => !v)}
          >
            <span className={`erp-nav-burger-bar ${mobileOpen ? 'is-open' : ''}`} />
            <span className={`erp-nav-burger-bar ${mobileOpen ? 'is-open' : ''}`} />
            <span className={`erp-nav-burger-bar ${mobileOpen ? 'is-open' : ''}`} />
          </button>
        </div>
      </div>
    </nav>

      {mobileOpen && (
        <div className="erp-nav-mobile">
          <a href={url('funkcionalumas')} className={`erp-nav-mobile-item ${page === 'funkcionalumas' ? 'is-active' : ''}`}>Funkcionalumas</a>

          <button
            type="button"
            className={`erp-nav-mobile-item erp-nav-mobile-group ${solActive ? 'is-active' : ''}`}
            aria-expanded={mobileSolOpen}
            onClick={() => setMobileSolOpen(v => !v)}
          >
            <span>Sprendimai</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{transition: 'transform 180ms', transform: mobileSolOpen ? 'rotate(180deg)' : 'none'}}><path d="M6 9l6 6 6-6"/></svg>
          </button>
          {mobileSolOpen && (
            <div className="erp-nav-mobile-sub">
              {solutions.map(s => (
                <a key={s.id} href={url(s.id)} className={`erp-nav-mobile-subitem ${page === s.id ? 'is-active' : ''}`}>
                  <span className="erp-nav-mobile-subitem-t">{s.label}</span>
                  <span className="erp-nav-mobile-subitem-d">{s.desc}</span>
                </a>
              ))}
            </div>
          )}

          <a href={url('kainos')} className={`erp-nav-mobile-item ${page === 'kainos' ? 'is-active' : ''}`}>Kainos</a>
          <a href={url('apie')} className={`erp-nav-mobile-item ${page === 'apie' ? 'is-active' : ''}`}>Apie ERP365</a>
          {/* <a href={url('blogas')} className={`erp-nav-mobile-item ${page === 'blogas' ? 'is-active' : ''}`}>Blogas</a> */}
          <a href={url('kontaktai')} className={`erp-nav-mobile-item ${page === 'kontaktai' ? 'is-active' : ''}`}>Kontaktai</a>
          <a href={APPOINTLET_URL} onClick={(e) => { e.preventDefault(); setMobileOpen(false); window.__erp_book_demo && window.__erp_book_demo(); }} className="erp-btn erp-btn-primary erp-btn-full erp-nav-mobile-cta">Užsisakyti demo</a>
        </div>
      )}
      <BookingModal />
    </>
  );
}

function Footer() {
  const url = window.__erp_url;
  return (
    <footer className="erp-footer">
      <div className="erp-container">
        <div className="erp-footer-grid">
          <div className="erp-footer-brand">
            <LogoMark height={32} inverse />
            <p>Odoo ERP, kuris veikia nuo pirmos dienos. Diegimas per 4–6 savaites. Skaidri kainodara.</p>
            <div className="erp-footer-brand-social">
              <a href="#" aria-label="LinkedIn"><i data-lucide="linkedin" style={{width: 16, height: 16}}></i></a>
              <a href="#" aria-label="Facebook"><i data-lucide="facebook" style={{width: 16, height: 16}}></i></a>
              <a href="#" aria-label="YouTube"><i data-lucide="youtube" style={{width: 16, height: 16}}></i></a>
            </div>
          </div>
          <div>
            <h5>Produktas</h5>
            <a href={url('funkcionalumas')}>Funkcionalumas</a>
            <a href={url('kainos')}>Kainos</a>
            <a href={url('rivile')}>Rivilė integracija</a>
            <a href={url('siuntos')}>Siuntų integracijos</a>
            <a href={url('prieziura')}>Įrangos priežiūra</a>
            <a href="#" onClick={(e) => e.preventDefault()}>Moduliai</a>
            <a href="#" onClick={(e) => e.preventDefault()}>Saugumas</a>
          </div>
          <div>
            <h5>Įmonė</h5>
            <a href={url('apie')}>Apie ERP365</a>
            {/* <a href={url('blogas')}>Blogas</a> */}
            <a href="#" onClick={(e) => e.preventDefault()}>Klientų atsiliepimai</a>
            <a href="#" onClick={(e) => e.preventDefault()}>Karjera</a>
            <a href={url('kontaktai')}>Kontaktai</a>
          </div>
          <div>
            <h5>Susisiekti</h5>
            <a href="mailto:info@erp365.lt">info@erp365.lt</a>
            <a href="tel:+37052000000">+370 5 200 0000</a>
            <a href="#" onClick={(e) => e.preventDefault()}>Gedimino pr. 20, Vilnius</a>
          </div>
        </div>
        <div className="erp-footer-bottom">
          <span>© 2026 ERP365, UAB. Visos teisės saugomos.</span>
          <span>
            <a href={url('privatumas')}>Privatumas</a>
            <a href={url('taisykles')}>Taisyklės</a>
            <a href={url('privatumas')}>Slapukai</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function CTASection({
  title = "Pasiruošę pradėti?",
  lede = "30 min. demo. Parodome, kaip veikia. Jokio spaudimo.",
  primary = "Užsisakyti demo →",
  secondary = "Pradėti bandymą",
}) {
  const url = window.__erp_url;
  return (
    <section className="erp-cta-section">
      <div className="erp-container">
        <div className="erp-cta-inner">
          <div>
            <h2 className="erp-cta-title">{title}</h2>
            <p className="erp-cta-lede">{lede}</p>
          </div>
          <div className="erp-cta-actions">
            {primary && (primary.startsWith('+') || primary.toLowerCase().includes('skamb'))
              ? <a href={`tel:${primary.replace(/\s+/g, '')}`} className="erp-btn erp-btn-primary erp-btn-lg">{primary}</a>
              : <a href={APPOINTLET_URL} onClick={(e) => { e.preventDefault(); window.__erp_book_demo && window.__erp_book_demo(); }} className="erp-btn erp-btn-primary erp-btn-lg">{primary}</a>
            }
            {secondary && <a href={url('kainos')} className="erp-btn erp-btn-ghost-dark erp-btn-lg">{secondary}</a>}
          </div>
        </div>
      </div>
    </section>
  );
}

// === Reusable dashboard mock (hero visual — Odoo 19 inspired) ===
function useCounter(target, { duration = 1400, decimals = 0, prefix = '', suffix = '' } = {}) {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    let raf = 0;
    const start = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setV(target * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  const fmt = decimals === 0
    ? Math.round(v).toLocaleString('lt-LT')
    : v.toLocaleString('lt-LT', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return `${prefix}${fmt}${suffix}`;
}

function DashboardMock() {
  const sumNew = useCounter(80000, { suffix: ' €', duration: 1600 });
  const sumQual = useCounter(51300, { suffix: ' €', duration: 1600 });
  const sumProp = useCounter(79100, { suffix: ' €', duration: 1600 });
  const sumWon = useCounter(19800, { suffix: ' €', duration: 1600 });

  const stages = [
    {
      key: 'new', label: 'Naujas', sum: sumNew, progress: 35, barColor: '#0080FF',
      cards: [
        { title: 'Pasiūlymas 150 staliukų', amount: '40 000,00 €', client: 'OpenWood', logo: 'OW', tag: 'Produktas', tagColor: 'pink', stars: 1, icon: 'clock' },
        { title: 'Užklausa 12 stalams', amount: '40 000,00 €', client: 'Marius Jonaitis', logo: 'MJ', tag: 'Produktas', tagColor: 'pink', stars: 1, icon: 'phone' },
      ]
    },
    {
      key: 'qual', label: 'Kvalifikuota', sum: sumQual, progress: 55, barColor: '#0080FF',
      cards: [
        { title: 'Global Solutions: Biuro baldai', amount: '3 800,00 €', client: 'Ready Mat', logo: 'RM', tag: 'Dizainas', tagColor: 'purple', stars: 2, icon: 'phone' },
        { title: 'Pasiūlymas 600 kėdžių', amount: '22 500,00 €', client: 'Erika Petraitė', logo: 'EP', tag: 'Produktas', tagColor: 'pink', stars: 1, icon: 'clock' },
        { title: 'Info apie paslaugas', amount: '25 000,00 €', client: 'Acme Corporation', logo: 'AC', tag: 'Produktas', tagColor: 'pink', stars: 1, icon: 'phone' },
      ]
    },
    {
      key: 'prop', label: 'Pasiūlymas', sum: sumProp, progress: 72, barColor: 'split', alert: 1,
      cards: [
        { title: 'Modernus open space', amount: '4 500,00 €', client: 'Henrikas Jordanas', logo: 'HJ', tag: 'Informacija', tagColor: 'blue', stars: 2, icon: 'phone' },
        { title: 'Biuro dizainas ir architektūra', amount: '9 000,00 €', client: 'Ready Mat', logo: 'RM', tag: 'Konsultavimas', tagColor: 'green', stars: 2, icon: 'phone' },
        { title: '5 VIP vadovo kėdės', amount: '5 600,00 €', client: 'Azure Interior', logo: 'AI', tag: 'Paslaugos', tagColor: 'yellow', stars: 1, icon: 'email', overdue: '6d' },
      ]
    },
    {
      key: 'won', label: 'Laimėta', sum: sumWon, progress: 20, barColor: '#E2E8F0',
      cards: [
        { title: 'Platintojo sutartis', amount: '19 800,00 €', client: 'Gemini Furniture', logo: 'GF', tag: 'Informacija', tagColor: 'blue', tag2: 'Kita', tag2Color: 'pink', stars: 2, icon: 'clock' },
      ]
    },
  ];

  const tagColorMap = {
    pink: { bg: '#FCE7F3', fg: '#9D174D' },
    purple: { bg: '#EDE9FE', fg: '#5B21B6' },
    blue: { bg: '#DBEAFE', fg: '#1E40AF' },
    green: { bg: '#D1FAE5', fg: '#065F46' },
    yellow: { bg: '#FEF3C7', fg: '#92400E' },
  };

  const renderIcon = (icon) => {
    if (icon === 'phone') return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    if (icon === 'email') return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="m22 6-10 7L2 6"/></svg>;
    return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
  };

  const renderStars = (count) => (
    <span className="erp-crm-stars">
      {[0,1,2].map(i => (
        <svg key={i} width="11" height="11" viewBox="0 0 24 24" fill={i < count ? '#FFD143' : 'none'} stroke={i < count ? '#FFD143' : '#CBD5E1'} strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
      ))}
    </span>
  );

  return (
    <div className="erp-odoo erp-crm">
      {/* Odoo top nav bar */}
      <div className="erp-crm-topbar">
        <div className="erp-crm-topbar-left">
          <span className="erp-crm-app-icon">
            <img src="assets/odoo-crm.svg" alt="" />
          </span>
          <span className="erp-crm-app-name">CRM</span>
          <span className="erp-crm-nav-link is-active">Pardavimai</span>
          <span className="erp-crm-nav-link">Ataskaitos</span>
          <span className="erp-crm-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-crm-topbar-right">
          <span className="erp-crm-status-dot" style={{background:'#EF4444'}} />
          <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          <span className="erp-crm-ai-pill">AI</span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-crm-badge">16</span>
          </span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-crm-badge">28</span>
          </span>
          <span className="erp-crm-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-crm-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-crm-actions">
        <div className="erp-crm-actions-left">
          <button className="erp-crm-btn erp-crm-btn-primary">Naujas</button>
          <button className="erp-crm-btn erp-crm-btn-ghost">
            Generuoti
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <span className="erp-crm-pipe-label">
            Piltuvėlis
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-crm-actions-center">
          <div className="erp-crm-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-crm-search-chip">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#0080FF" strokeWidth="3"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
              Mano piltuvėlis
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </span>
            <span className="erp-crm-search-placeholder">ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-crm-actions-right">
          <span className="erp-crm-views">
            <span title="Kanban" className="is-active">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
            </span>
            <span title="Sąrašas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </span>
            <span title="Kalendorius">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
            </span>
            <span title="Kohortos">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h18v18H3zM3 9h18M9 3v18"/></svg>
            </span>
            <span title="Grafikas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-6"/></svg>
            </span>
            <span title="Žemėlapis">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            </span>
            <span title="Veiksmai">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </span>
          </span>
        </div>
      </div>

      {/* Kanban board body */}
      <div className="erp-crm-body">
        {stages.map(st => (
          <div key={st.key} className="erp-crm-col">
            <div className="erp-crm-col-head">
              <div className="erp-crm-col-head-row">
                <span className="erp-crm-col-title">{st.label}</span>
                <span className="erp-crm-col-add">+</span>
              </div>
              <div className="erp-crm-col-meta">
                <span className="erp-crm-col-bar">
                  {st.barColor === 'split' ? (
                    <>
                      <span style={{background:'#22C55E', flex: 0.4}} />
                      <span style={{background:'#FFD143', flex: 0.3}} />
                      <span style={{background:'#EF4444', flex: 0.3}} />
                    </>
                  ) : (
                    <span style={{background: st.barColor, width: `${st.progress}%`}} />
                  )}
                </span>
                {st.alert && <span className="erp-crm-alert-badge">{st.alert}</span>}
                <span className="erp-crm-col-sum">{st.sum}</span>
              </div>
            </div>
            <div className="erp-crm-col-body">
              {st.cards.map((c, i) => {
                const t1 = tagColorMap[c.tagColor];
                const t2 = c.tag2 ? tagColorMap[c.tag2Color] : null;
                return (
                  <div key={i} className="erp-crm-card">
                    <div className="erp-crm-card-title">{c.title}</div>
                    <div className="erp-crm-card-amount">{c.amount}</div>
                    <div className="erp-crm-card-client">
                      <span className="erp-crm-client-logo">{c.logo}</span>
                      <span>{c.client}</span>
                    </div>
                    <div className="erp-crm-card-tags">
                      <span className="erp-crm-tag" style={{background: t1.bg, color: t1.fg}}>{c.tag}</span>
                      {c.tag2 && <span className="erp-crm-tag" style={{background: t2.bg, color: t2.fg}}>{c.tag2}</span>}
                    </div>
                    <div className="erp-crm-card-footer">
                      <span className="erp-crm-card-footer-left">
                        {renderStars(c.stars)}
                        {renderIcon(c.icon)}
                      </span>
                      <span className="erp-crm-card-footer-right">
                        {c.overdue && <span className="erp-crm-overdue">{c.overdue}</span>}
                        <span className="erp-crm-card-avatar">
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="#94A3B8"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                        </span>
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockPirkimai() {
  const k1 = useCounter(11,   { duration: 1400 });
  const k2 = useCounter(1,    { duration: 1400 });
  const k3 = useCounter(12,   { duration: 1400 });
  const k4 = useCounter(6,    { duration: 1400 });
  const k5 = useCounter(4,    { duration: 1400 });
  const m1 = useCounter(10,   { duration: 1400 });
  const m2 = useCounter(1,    { duration: 1400 });
  const m3 = useCounter(11,   { duration: 1400 });
  const m4 = useCounter(6,    { duration: 1400 });
  const m5 = useCounter(4,    { duration: 1400 });
  const sLate = useCounter(20,   { suffix: ' %', duration: 1400 });
  const sDays = useCounter(3.11, { decimals: 2, duration: 1400 });
  const sLateMy = useCounter(0,    { suffix: ' %', duration: 1400 });
  const sDaysMy = useCounter(4,    { decimals: 2, duration: 1400 });

  const rows = [
    { nr: 'P00022', supplier: 'Ready Mat',        buyer: 'JV', buyerName: 'Jonas Vilkas',   due: null,                 activity: 'clock', amount: '0,00 €',     status: 'order' },
    { nr: 'P00021', supplier: 'Gemini Furniture', buyer: 'JV', buyerName: 'Jonas Vilkas',   due: null,                 activity: 'clock', amount: '100,00 €',   status: 'order' },
    { nr: 'P00020', supplier: 'Wood Corner',      buyer: null, buyerName: null,             due: { text: 'Praėjusį mėnesį', tone: 'red' }, activity: 'clock', amount: '862,50 €',   status: 'rfq' },
    { nr: 'P00019', supplier: 'Wood Corner',      buyer: null, buyerName: null,             due: null,                 activity: 'shipping', amount: '46,00 €',    status: 'order' },
    { nr: 'P00018', supplier: 'Wood Corner',      buyer: null, buyerName: null,             due: null,                 activity: 'clock', amount: '276,00 €',   status: 'order' },
    { nr: 'P00017', supplier: 'Joel Willis',      buyer: 'JV', buyerName: 'Jonas Vilkas',   due: null,                 activity: 'clock', amount: '57,50 €',    status: 'order' },
    { nr: 'P00016', supplier: 'Ready Mat',        buyer: 'JV', buyerName: 'Jonas Vilkas',   due: null,                 activity: 'clock', amount: '7 976,40 €', status: 'order' },
    { nr: 'P00015', supplier: 'Wood Corner',      buyer: 'JV', buyerName: 'Jonas Vilkas',   due: { text: 'Šiandien', tone: 'amber' }, activity: 'clock', amount: '690,00 €',   status: 'rfq' },
  ];

  const renderActivity = (kind) => {
    if (kind === 'shipping') return (
      <span className="erp-purchase-activity erp-purchase-activity-shipping">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
        Siųsti siuntimo info
      </span>
    );
    return (
      <span className="erp-purchase-activity">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
      </span>
    );
  };

  return (
    <div className="erp-odoo erp-purchase">
      {/* Top nav bar — reuses CRM chrome classes */}
      <div className="erp-crm-topbar">
        <div className="erp-crm-topbar-left">
          <span className="erp-crm-app-icon">
            <img src="assets/odoo-purchase.svg" alt="" />
          </span>
          <span className="erp-crm-app-name">Pirkimai</span>
          <span className="erp-crm-nav-link is-active">Užsakymai</span>
          <span className="erp-crm-nav-link">Produktai</span>
          <span className="erp-crm-nav-link">Ataskaitos</span>
          <span className="erp-crm-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-crm-topbar-right">
          <span className="erp-crm-status-dot" style={{background:'#EF4444'}} />
          <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          <span className="erp-crm-ai-pill">AI</span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-crm-badge">17</span>
          </span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-crm-badge">25</span>
          </span>
          <span className="erp-crm-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-crm-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-crm-actions">
        <div className="erp-crm-actions-left">
          <button className="erp-crm-btn erp-crm-btn-primary">Naujas</button>
          <button className="erp-crm-btn">Įkelti</button>
          <span className="erp-crm-pipe-label">
            Komercinio pasiūlymo užklausos
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-crm-actions-center">
          <div className="erp-crm-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-crm-search-placeholder">ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-crm-actions-right">
          <span className="erp-purchase-pagination">
            <span>1-22 / 22</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg>
          </span>
          <span className="erp-crm-views">
            <span title="Sąrašas" className="is-active">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </span>
            <span title="Kanban">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
            </span>
            <span title="Suvestinė">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h18v18H3zM3 9h18M9 3v18"/></svg>
            </span>
            <span title="Grafikas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-6"/></svg>
            </span>
            <span title="Kalendorius">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
            </span>
            <span title="Veiksmai">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </span>
          </span>
        </div>
      </div>

      {/* KPI / filter strip */}
      <div className="erp-purchase-kpis">
        <div className="erp-purchase-kpi-rows">
          <div className="erp-purchase-kpi-row">
            <span className="erp-purchase-kpi-rowlabel">Visi</span>
            <span className="erp-purchase-kpi tone-blue">
              <span className="erp-purchase-kpi-num">{k1}</span>
              <span className="erp-purchase-kpi-lab">Naujas</span>
            </span>
            <span className="erp-purchase-kpi tone-gray">
              <span className="erp-purchase-kpi-num">{k2}</span>
              <span className="erp-purchase-kpi-lab">Užklausa išsiųsta</span>
            </span>
            <span className="erp-purchase-kpi tone-yellow">
              <span className="erp-purchase-kpi-num">{k3}</span>
              <span className="erp-purchase-kpi-lab">Vėluojanti užklausa</span>
            </span>
            <span className="erp-purchase-kpi tone-blue">
              <span className="erp-purchase-kpi-num">{k4}</span>
              <span className="erp-purchase-kpi-lab">Nepatvirtinta</span>
            </span>
            <span className="erp-purchase-kpi tone-red">
              <span className="erp-purchase-kpi-num">{k5}</span>
              <span className="erp-purchase-kpi-lab">Vėluojantis priėmimas</span>
            </span>
          </div>
          <div className="erp-purchase-kpi-row">
            <span className="erp-purchase-kpi-rowlabel">Mano</span>
            <span className="erp-purchase-kpi tone-blue ghost"><span className="erp-purchase-kpi-num">{m1}</span></span>
            <span className="erp-purchase-kpi tone-gray ghost"><span className="erp-purchase-kpi-num">{m2}</span></span>
            <span className="erp-purchase-kpi tone-yellow ghost"><span className="erp-purchase-kpi-num">{m3}</span></span>
            <span className="erp-purchase-kpi tone-blue ghost"><span className="erp-purchase-kpi-num">{m4}</span></span>
            <span className="erp-purchase-kpi tone-red ghost"><span className="erp-purchase-kpi-num">{m5}</span></span>
          </div>
        </div>
        <div className="erp-purchase-kpi-side">
          <div className="erp-purchase-kpi-stats">
            <span className="erp-purchase-kpi-statval">{sLate}</span>
            <span className="erp-purchase-kpi-statval">{sDays}</span>
          </div>
          <div className="erp-purchase-kpi-statlabels">
            <span>Vėluoja</span>
            <span>Dienų iki užs.</span>
          </div>
          <div className="erp-purchase-kpi-stats">
            <span className="erp-purchase-kpi-statval erp-purchase-kpi-statval-sub">{sLateMy}</span>
            <span className="erp-purchase-kpi-statval erp-purchase-kpi-statval-sub">{sDaysMy}</span>
          </div>
        </div>
      </div>

      {/* List */}
      <div className="erp-purchase-list">
        <div className="erp-purchase-row erp-purchase-row-head">
          <span></span>
          <span>Numeris</span>
          <span>Tiekėjas</span>
          <span>Įmonė</span>
          <span>Pirkėjas</span>
          <span>Galiojimo data</span>
          <span>Veikla</span>
          <span className="erp-purchase-cell-num">Suma</span>
          <span>Būsena</span>
        </div>
        {rows.map(r => (
          <div key={r.nr} className="erp-purchase-row">
            <span className="erp-purchase-cell-star">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            </span>
            <span className="erp-purchase-cell-nr">{r.nr}</span>
            <span>{r.supplier}</span>
            <span className="erp-purchase-cell-truncate">UAB „Baltijos medis" (Vilnius)</span>
            <span className="erp-purchase-buyer">
              {r.buyer && <span className="erp-purchase-buyer-avatar">{r.buyer}</span>}
              {r.buyerName && <span>{r.buyerName}</span>}
            </span>
            <span className={`erp-purchase-due ${r.due ? `erp-purchase-due-${r.due.tone}` : ''}`}>
              {r.due?.text || ''}
            </span>
            {renderActivity(r.activity)}
            <span className="erp-purchase-cell-num">{r.amount}</span>
            <span>
              <span className={`erp-purchase-status erp-purchase-status-${r.status}`}>
                {r.status === 'order' ? 'Pirkimo užsakymas' : 'Pirkimo užklausa'}
              </span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockPardavimai() {
  const a1 = useCounter(0.80,      { decimals: 2, suffix: ' €', duration: 1400 });
  const a2 = useCounter(690,       { decimals: 2, suffix: ' €', duration: 1400 });
  const a3 = useCounter(256691.50, { decimals: 2, suffix: ' €', duration: 1400 });
  const a4 = useCounter(1086.75,   { decimals: 2, suffix: ' €', duration: 1400 });
  const a5 = useCounter(1242,      { decimals: 2, suffix: ' €', duration: 1400 });

  const rows = [
    { nr: 'S00080', date: '05-01 11:57', client: 'Rediff Mail, Will McEncroe', site: null,            activity: 'clock', amount: a1 },
    { nr: 'S00079', date: '05-01 11:48', client: 'Mitchell Admin',             site: 'Mūsų svetainė', activity: 'clock', amount: a2 },
    { nr: 'S00077', date: '05-01 09:05', client: 'Acme Corporation',           site: null,            activity: 'clock', amount: a3 },
    { nr: 'S00073', date: '05-01 09:05', client: 'Acme Corporation',           site: null,            activity: 'clock', amount: a4 },
    { nr: 'S00072', date: '05-01 09:05', client: 'Acme Corporation',           site: null,            activity: 'clock', amount: a5 },
    { nr: 'S00071', date: '03-31 09:05', client: 'Marc Demo',                  site: 'Mūsų svetainė', activity: 'clock', amount: '184,00 €' },
    { nr: 'S00070', date: '01-21 08:05', client: 'Joel Willis',                site: 'Mūsų svetainė', activity: { kind: 'call', text: 'Aptarti nuolaidą' }, amount: '230,00 €' },
    { nr: 'S00069', date: '03-31 09:05', client: 'Marc Demo',                  site: 'Mūsų svetainė', activity: { kind: 'call', text: 'Pasiūlyti papildomus prod…' }, amount: '92,00 €' },
    { nr: 'S00067', date: '05-01 09:05', client: 'Acme Corporation',           site: null,            activity: 'clock', amount: '46 000,00 €' },
    { nr: 'S00066', date: '05-01 09:05', client: 'Acme Corporation',           site: null,            activity: 'clock', amount: '13 800,00 €' },
    { nr: 'S00064', date: '05-01 09:05', client: 'Gemini Furniture',           site: null,            activity: 'clock', amount: '6 201,60 €' },
  ];

  const renderActivity = (a) => {
    if (a && typeof a === 'object' && a.kind === 'call') return (
      <span className="erp-purchase-activity erp-purchase-activity-call">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
        {a.text}
      </span>
    );
    return (
      <span className="erp-purchase-activity">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
      </span>
    );
  };

  return (
    <div className="erp-odoo erp-sale">
      {/* Top nav bar */}
      <div className="erp-crm-topbar">
        <div className="erp-crm-topbar-left">
          <span className="erp-crm-app-icon">
            <img src="assets/odoo-sales.svg" alt="" />
          </span>
          <span className="erp-crm-app-name">Pardavimai</span>
          <span className="erp-crm-nav-link is-active">Užsakymai</span>
          <span className="erp-crm-nav-link">Sąskaitų pateikimui</span>
          <span className="erp-crm-nav-link">Produktai</span>
          <span className="erp-crm-nav-link">Komisiniai</span>
          <span className="erp-crm-nav-link">Ataskaitos</span>
          <span className="erp-crm-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-crm-topbar-right">
          <span className="erp-crm-status-dot" style={{background:'#EF4444'}} />
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-crm-badge">1</span>
          </span>
          <span className="erp-crm-ai-pill">AI</span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-crm-badge">17</span>
          </span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-crm-badge">25</span>
          </span>
          <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-crm-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-crm-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-crm-actions">
        <div className="erp-crm-actions-left">
          <button className="erp-crm-btn erp-crm-btn-primary">Naujas</button>
          <span className="erp-crm-pipe-label">
            Komerciniai pasiūlymai
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-crm-actions-center">
          <div className="erp-crm-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-crm-search-filter">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
              Mano komerciniai pasiūlymai
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </span>
            <span className="erp-crm-search-placeholder">ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-crm-actions-right">
          <span className="erp-purchase-pagination">
            <span>1-36 / 36</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg>
          </span>
          <span className="erp-crm-views">
            <span title="Sąrašas" className="is-active">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </span>
            <span title="Kanban">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
            </span>
            <span title="Žemėlapis">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            </span>
            <span title="Kalendorius">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
            </span>
            <span title="Suvestinė">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h18v18H3zM3 9h18M9 3v18"/></svg>
            </span>
            <span title="Grafikas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-6"/></svg>
            </span>
            <span title="Veiksmai">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </span>
          </span>
        </div>
      </div>

      {/* List */}
      <div className="erp-sale-list">
        <div className="erp-sale-row erp-sale-row-head">
          <span></span>
          <span>Įrašo numeris</span>
          <span>Sukūrimo data</span>
          <span>Klientas</span>
          <span>Svetainė</span>
          <span>Pardavėjas</span>
          <span>Veiklos</span>
          <span>Įmonė</span>
          <span className="erp-purchase-cell-num">Suma</span>
          <span>Būsena</span>
        </div>
        {rows.map(r => (
          <div key={r.nr} className="erp-sale-row">
            <span className="erp-purchase-cell-star">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2"><rect x="3" y="5" width="18" height="14" rx="2"/></svg>
            </span>
            <span className="erp-purchase-cell-nr">{r.nr}</span>
            <span className="erp-sale-cell-date">{r.date}</span>
            <span className="erp-purchase-cell-truncate">{r.client}</span>
            <span className="erp-sale-cell-site">{r.site || ''}</span>
            <span className="erp-purchase-buyer">
              <span className="erp-purchase-buyer-avatar">JV</span>
              <span>Jonas Vilkas</span>
            </span>
            {renderActivity(r.activity)}
            <span className="erp-purchase-cell-truncate">UAB „Baltijos medis"</span>
            <span className="erp-purchase-cell-num">{r.amount}</span>
            <span>
              <span className="erp-sale-status erp-sale-status-order">Pardavimo užsakymas</span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MockShell({ title, children, subtitle }) {
  return (
    <div className="erp-mock">
      <div className="erp-mock-chrome">
        <span className="erp-mock-dot"></span><span className="erp-mock-dot"></span><span className="erp-mock-dot"></span>
      </div>
      <div style={{padding: '22px 24px'}}>
        <div style={{font: '700 15px/1.2 var(--erp-font-display)', color: 'var(--erp-maastricht)', marginBottom: 4}}>{title}</div>
        {subtitle && <div style={{font: '400 12px/1.4 var(--erp-font-body)', color: 'var(--erp-gray-500)', marginBottom: 16}}>{subtitle}</div>}
        {children}
      </div>
    </div>
  );
}

function DashboardMockApskaita() {
  // Pardavimai KPI
  const sCnt1 = useCounter(1,        { duration: 1400 });
  const sCnt2 = useCounter(12,       { duration: 1400 });
  const sCnt3 = useCounter(2,        { duration: 1400 });
  const sAmt1 = useCounter(120,      { decimals: 2, prefix: '$ ', duration: 1400 });
  const sAmt2 = useCounter(4051.75,  { decimals: 2, prefix: '$ ', duration: 1400 });
  const sAmt3 = useCounter(38512.50, { decimals: 2, prefix: '$ ', duration: 1400 });
  // Pirkimai KPI
  const pCnt1 = useCounter(5,        { duration: 1400 });
  const pCnt2 = useCounter(1,        { duration: 1400 });
  const pAmt1 = useCounter(93725,    { decimals: 2, prefix: '$ ', duration: 1400 });
  const pAmt2 = useCounter(92000,    { decimals: 2, prefix: '$ ', duration: 1400 });
  // Bankas
  const bAmt1 = useCounter(6793.93,  { decimals: 2, prefix: '$ ', duration: 1400 });
  const bAmt2 = useCounter(6678,     { decimals: 2, prefix: '$ ', duration: 1400 });
  const bAmt3 = useCounter(790.25,   { decimals: 2, prefix: '$ ', duration: 1400 });
  const bAmt4 = useCounter(2500,     { decimals: 2, prefix: '$ ', duration: 1400 });
  // Kasa
  const kAmt1 = useCounter(100,      { decimals: 2, prefix: '$ ', duration: 1400 });

  const xLabels = ['Laukia', '20–26 bal.', 'Ši savaitė', '4–10 geg.', '11–17 geg.', 'Nepradelstos'];
  const cards = [
    {
      title: 'Pardavimai',
      buttons: [{ label: 'Naujas', primary: true }],
      kpis: [
        { count: sCnt1, label: 'Reikia patvirtinti', amount: sAmt1 },
        { count: sCnt2, label: 'Neapmokėta', amount: sAmt2 },
        { count: sCnt3, label: 'Vėluoja', amount: sAmt3 },
      ],
      chart: { kind: 'bars', bars: [{h:85,t:'plum'},{h:25,t:'plum'},{h:65,t:'teal'},{h:0},{h:0},{h:50,t:'teal'}] },
    },
    {
      title: 'Pirkimai',
      kebab: true,
      buttons: [{ label: 'Įkelti', primary: true }, { label: 'Naujas' }],
      kpis: [
        { count: pCnt1, label: 'Neapmokėti', amount: pAmt1 },
        { count: pCnt2, label: 'Vėluoja', amount: pAmt2 },
      ],
      chart: { kind: 'bars', bars: [{h:90,t:'plum'},{h:0},{h:6,t:'teal'},{h:0},{h:0},{h:0}] },
    },
    {
      title: 'Bankas',
      buttons: [{ label: 'Operacijos', primary: true }, { label: '6 derinti' }],
      kpis: [
        { label: 'Balansas', amount: bAmt1 },
        { label: 'Paskutinis išrašas', amount: bAmt2 },
        { label: 'Neatsiskaityti mokėjimai', amount: bAmt3 },
        { label: 'Kit. operacijos', amount: bAmt4 },
      ],
      chart: { kind: 'line-up' },
    },
    {
      title: 'Kasa',
      buttons: [{ label: 'Operacijos', primary: true }],
      kpis: [
        { label: 'Kit. operacijos', amount: kAmt1 },
      ],
      chart: { kind: 'spark' },
    },
    {
      title: 'Kasos sistema',
      buttons: [{ label: 'Naujas', primary: true }, { label: 'Įkelti' }],
      kpis: [],
      chart: null,
    },
    {
      title: 'Mokesčių deklaracijos',
      buttons: [{ label: 'Mokesčių deklaracijos', primary: true }],
      kpis: [],
      checklist: ['Nustatyti įmonės duomenis', 'Nustatyti laikotarpius', 'Peržiūrėti sąskaitų planą'],
    },
  ];

  const renderChart = (chart) => {
    if (!chart) return null;
    if (chart.kind === 'bars') {
      return (
        <div className="erp-acc-chart">
          <div className="erp-acc-chart-bars">
            {chart.bars.map((b, i) => (
              <div key={i} className="erp-acc-bar-wrap">
                {b.h > 0 && (
                  <span
                    className="erp-acc-bar"
                    style={{
                      height: `${b.h}%`,
                      background: b.t === 'plum' ? 'rgba(2,44,74,0.22)' : 'var(--erp-freedom-200)',
                    }}
                  />
                )}
              </div>
            ))}
          </div>
          <div className="erp-acc-chart-x">
            {xLabels.map((l) => <span key={l}>{l}</span>)}
          </div>
        </div>
      );
    }
    if (chart.kind === 'line-up') {
      return (
        <div className="erp-acc-chart erp-acc-chart-line">
          <svg viewBox="0 0 200 70" preserveAspectRatio="none" width="100%" height="70">
            <path d="M0,55 L200,12 L200,70 L0,70 Z" fill="rgba(2,44,74,0.10)" />
            <path d="M0,55 L200,12" fill="none" stroke="rgba(2,44,74,0.60)" strokeWidth="1.4" />
          </svg>
        </div>
      );
    }
    if (chart.kind === 'spark') {
      return (
        <div className="erp-acc-chart erp-acc-chart-spark">
          <svg viewBox="0 0 200 40" preserveAspectRatio="none" width="100%" height="40">
            <path d="M0,32 C30,30 60,28 90,30 C120,33 150,15 200,30 L200,40 L0,40 Z" fill="rgba(2,44,74,0.05)" />
            <path d="M0,32 C30,30 60,28 90,30 C120,33 150,15 200,30" fill="none" stroke="rgba(2,44,74,0.45)" strokeWidth="1.2" />
          </svg>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="erp-odoo erp-acc">
      {/* Top bar */}
      <div className="erp-acc-topbar">
        <div className="erp-acc-topbar-left">
          <span className="erp-acc-app-icon"><img src="assets/odoo-accounting.svg" alt="" /></span>
          <span className="erp-acc-app-name">Apskaita</span>
          <span className="erp-acc-nav-link is-active">Valdymo skydelis</span>
          <span className="erp-acc-nav-link">Klientai</span>
          <span className="erp-acc-nav-link">Tiekėjai</span>
          <span className="erp-acc-nav-link">Apskaita</span>
          <span className="erp-acc-nav-link">Peržiūrėti</span>
          <span className="erp-acc-nav-link">Ataskaitos</span>
          <span className="erp-acc-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-acc-topbar-right">
          <span className="erp-acc-status-dot" style={{background:'#EF4444'}} />
          <span className="erp-acc-badge-wrap">
            <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-acc-badge">1</span>
          </span>
          <span className="erp-acc-ai-pill">AI</span>
          <span className="erp-acc-badge-wrap">
            <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-acc-badge">17</span>
          </span>
          <span className="erp-acc-badge-wrap">
            <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-acc-badge">25</span>
          </span>
          <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-acc-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-acc-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-acc-actions">
        <div className="erp-acc-actions-left">
          <span className="erp-acc-pagetitle">
            Valdymo skydelis
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-acc-actions-center">
          <div className="erp-acc-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-acc-search-chip">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#0080FF" strokeWidth="3"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
              Mėgstamiausi
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </span>
            <span className="erp-acc-search-placeholder">Ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-acc-actions-right">
          <span className="erp-acc-paging">1-9 / 9</span>
          <span className="erp-acc-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg></span>
          <span className="erp-acc-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg></span>
        </div>
      </div>

      {/* Card grid */}
      <div className="erp-acc-grid">
        {cards.map((c, i) => (
          <div key={i} className="erp-acc-card">
            <div className="erp-acc-card-head">
              <span className="erp-acc-card-title">{c.title}</span>
              {c.kebab && (
                <span className="erp-acc-card-kebab">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="#94A3B8"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
                </span>
              )}
            </div>
            <div className="erp-acc-card-btns">
              {c.buttons.map((b, bi) => (
                <span key={bi} className={`erp-acc-card-btn ${b.primary ? 'erp-acc-card-btn-primary' : ''}`}>{b.label}</span>
              ))}
            </div>
            {c.kpis && c.kpis.length > 0 && (
              <div className="erp-acc-kpis">
                {c.kpis.map((k, ki) => (
                  <div key={ki} className="erp-acc-kpi">
                    <span className="erp-acc-kpi-label">
                      {k.count && <span className="erp-acc-kpi-count">{k.count}</span>}
                      {k.label}
                    </span>
                    <span className="erp-acc-kpi-amt">{k.amount}</span>
                  </div>
                ))}
              </div>
            )}
            {c.checklist && (
              <div className="erp-acc-checklist">
                {c.checklist.map((item, idx) => (
                  <div key={idx} className="erp-acc-checklist-item">
                    <span className="erp-acc-checklist-dot" />
                    <span className="erp-acc-checklist-text">{item}</span>
                  </div>
                ))}
              </div>
            )}
            {renderChart(c.chart)}
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockSaskaitos() {
  const i1 = useCounter(0.80,     { decimals: 2, duration: 1400 });
  const i2 = useCounter(34.50,    { decimals: 2, duration: 1400 });
  const i3 = useCounter(207,      { decimals: 2, duration: 1400 });
  const i4 = useCounter(750,      { decimals: 2, duration: 1400 });
  const i5 = useCounter(36512.50, { decimals: 2, duration: 1400 });

  const invoices = [
    { client: 'Rediff Mail, Will McEncroe', nr: 'INV/2026/00012', date: '05-01', amount: i1,        activity: 'clock',       status: 'paying' },
    { client: 'Joel Willis',                nr: 'INV/2026/00011', date: '05-01', amount: i2,        activity: 'phone-green', status: 'sent' },
    { client: 'Joel Willis',                nr: 'INV/2026/00010', date: '05-01', amount: i3,        activity: 'clock',       status: 'sent' },
    { client: 'LightsUp',                   nr: 'INV/2026/00008', date: '05-01', amount: i4,        activity: 'clock',       status: 'partial' },
    { client: 'Azure Interior',             nr: 'INV/2026/00001', date: '05-01', amount: i5,        activity: 'check',       status: 'registered' },
    { client: 'Acme Corporation',           nr: 'INV/2026/00002', date: '04-29', amount: '48 012,50',activity: 'phone-amber', status: 'paying' },
    { client: 'Acme Corporation',           nr: 'INV/2026/00003', date: '04-28', amount: '22 137,50',activity: 'check',       status: 'registered' },
    { client: 'OpenWood',                   nr: 'INV/2026/00009', date: '04-26', amount: '1 799,00', activity: 'clock',       status: 'registered' },
  ];

  const statusLabel = (s) => ({
    paying: 'Mokėjime', sent: 'Išsiųsta', partial: 'Dalinai apmokėta', registered: 'Registruotas',
  })[s];

  const renderActivity = (kind) => {
    if (kind === 'clock') return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    if (kind === 'check') return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>;
    if (kind === 'phone-green') return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    if (kind === 'phone-amber') return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    return null;
  };

  return (
    <div className="erp-odoo erp-acc">
      {/* Top bar — reuses .erp-acc-* chrome */}
      <div className="erp-acc-topbar">
        <div className="erp-acc-topbar-left">
          <span className="erp-acc-app-icon"><img src="assets/odoo-accounting.svg" alt="" /></span>
          <span className="erp-acc-app-name">Apskaita</span>
          <span className="erp-acc-nav-link">Valdymo skydelis</span>
          <span className="erp-acc-nav-link">Klientai</span>
          <span className="erp-acc-nav-link">Tiekėjai</span>
          <span className="erp-acc-nav-link is-active">Apskaita</span>
          <span className="erp-acc-nav-link">+</span>
        </div>
        <div className="erp-acc-topbar-right">
          <span className="erp-acc-status-dot" style={{background:'#EF4444'}} />
          <span className="erp-acc-badge-wrap">
            <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-acc-badge">1</span>
          </span>
          <span className="erp-acc-ai-pill">AI</span>
          <span className="erp-acc-badge-wrap">
            <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-acc-badge">17</span>
          </span>
          <span className="erp-acc-badge-wrap">
            <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-acc-badge">25</span>
          </span>
          <svg className="erp-acc-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-acc-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-acc-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-acc-actions">
        <div className="erp-acc-actions-left">
          <span className="erp-saf-new">Naujas</span>
          <span className="erp-saf-btn">Įkelti</span>
          <span className="erp-acc-pagetitle">
            Sąskaitos-faktūros
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-acc-actions-center">
          <div className="erp-acc-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-acc-search-chip">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#0080FF" strokeWidth="3"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
              Sąskaitos-faktūros <em style={{fontStyle:'italic', color:'#94A3B8', margin:'0 4px'}}>arba</em> Kvitai
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </span>
            <span className="erp-acc-search-placeholder">ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-acc-actions-right">
          <span className="erp-acc-paging">1-13 / 13</span>
          <span className="erp-acc-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg></span>
          <span className="erp-acc-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg></span>
          <span className="erp-saf-views">
            <span title="Sąrašas"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg></span>
            <span title="Kanban" className="is-active"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg></span>
            <span title="Suvestinė"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h18v18H3zM3 9h18M9 3v18"/></svg></span>
            <span title="Grafikas"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-6"/></svg></span>
            <span title="Veiksmai"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span>
          </span>
        </div>
      </div>

      {/* Invoice card grid */}
      <div className="erp-saf-grid">
        {invoices.map(inv => (
          <div key={inv.nr} className="erp-saf-card">
            <div className="erp-saf-card-head">
              <span className="erp-saf-client">{inv.client}</span>
              <span className="erp-saf-amount">$ {inv.amount}</span>
            </div>
            <div className="erp-saf-card-foot">
              <span className="erp-saf-meta">
                <span className="erp-saf-nr">{inv.nr}</span>
                <span className="erp-saf-date">{inv.date}</span>
                <span className="erp-saf-act">{renderActivity(inv.activity)}</span>
              </span>
              <span className={`erp-saf-status erp-saf-status-${inv.status}`}>{statusLabel(inv.status)}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MockInvoices() {
  const rows = [
    ['SF-2026-0284', 'UAB Agroferma', '4 280€', 'paid'],
    ['SF-2026-0283', 'Vilniaus archytai', '1 950€', 'due'],
    ['SF-2026-0282', 'TechPro LT', '12 400€', 'paid'],
    ['SF-2026-0281', 'Baltijos Medis', '860€', 'overdue'],
    ['SF-2026-0280', 'Skanū Namai', '2 140€', 'paid'],
  ];
  const tag = { paid: ['Apmokėta','erp-mock-tag-paid'], due: ['Laukia','erp-mock-tag-due'], overdue: ['Vėluoja','erp-mock-tag-overdue'] };
  return (
    <MockShell title="Sąskaitos faktūros" subtitle="Kovas 2026 · 284 sąskaitos">
      <div className="erp-mock-list" style={{border: '1px solid var(--erp-gray-100)', borderRadius: 10, overflow: 'hidden'}}>
        <div className="erp-mock-row erp-mock-row-head">
          <span>Nr.</span><span>Klientas</span><span>Suma</span><span>Būsena</span>
        </div>
        {rows.map(([nr, k, s, st]) => (
          <div key={nr} className="erp-mock-row">
            <span style={{fontFamily: 'var(--erp-font-mono)'}}>{nr}</span>
            <span>{k}</span>
            <span style={{fontWeight: 600}}>{s}</span>
            <span className={`erp-mock-tag ${tag[st][1]}`}>{tag[st][0]}</span>
          </div>
        ))}
      </div>
    </MockShell>
  );
}

function MockWarehouse() {
  return (
    <MockShell title="Sandėlio atsargos" subtitle="Vilniaus sandėlis · 1 240 SKU">
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 12}}>
        {['In', 'Užsakyta', 'Prognozė', 'Saugus lygis'].map((l, i) => (
          <div key={l} style={{background: i === 3 ? 'var(--erp-yellow-50)' : 'var(--erp-gray-50)', padding: 10, borderRadius: 8}}>
            <div style={{font: '500 9px/1 var(--erp-font-body)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--erp-gray-500)', marginBottom: 4}}>{l}</div>
            <div style={{font: '700 16px/1 var(--erp-font-display)', color: 'var(--erp-maastricht)'}}>{['842', '126', '968', '120'][i]}</div>
          </div>
        ))}
      </div>
      <div style={{border: '1px solid var(--erp-gray-100)', borderRadius: 10, overflow: 'hidden'}}>
        <div className="erp-mock-row erp-mock-row-head">
          <span>Produktas</span><span>SKU</span><span>Likutis</span><span>Būsena</span>
        </div>
        {[['Lentynų sistema 180', 'LNT-180', '48', 'ok'],
          ['Medžio plokštė 12mm', 'MDP-012', '12', 'low'],
          ['Varžtai M6×30', 'VAR-M6-30', '2 400', 'ok'],
          ['Dažai baltas 5L', 'DAZ-B-5', '3', 'low']].map(([p, sku, q, st]) => (
          <div key={sku} className="erp-mock-row">
            <span>{p}</span><span style={{fontFamily: 'var(--erp-font-mono)', color: 'var(--erp-gray-500)'}}>{sku}</span>
            <span style={{fontWeight: 600}}>{q}</span>
            <span className={`erp-mock-tag ${st === 'ok' ? 'erp-mock-tag-paid' : 'erp-mock-tag-due'}`}>{st === 'ok' ? 'OK' : 'Žemas'}</span>
          </div>
        ))}
      </div>
    </MockShell>
  );
}

function MockKanban() {
  const cols = [
    { title: 'Naujas', count: 12, color: 'var(--erp-gray-300)', items: [['UAB Velga', '8 400€'], ['Architektas R.', '1 200€']] },
    { title: 'Pasiūlymas', count: 8, color: 'var(--erp-freedom)', items: [['TechPro', '24 000€'], ['Medienos fab.', '6 800€']] },
    { title: 'Derybos', count: 5, color: 'var(--erp-yellow-500)', items: [['Baltijos Medis', '18 500€'], ['Skanū Namai', '3 200€']] },
    { title: 'Laimėta', count: 14, color: '#16a34a', items: [['Vilniaus arch.', '12 400€']] },
  ];
  return (
    <MockShell title="Pardavimų piltuvas" subtitle="Q2 2026 · 39 galimybės · 287 500€">
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8}}>
        {cols.map(c => (
          <div key={c.title} style={{background: 'var(--erp-gray-50)', borderRadius: 8, padding: 8}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8}}>
              <span style={{width: 8, height: 8, borderRadius: '50%', background: c.color}}></span>
              <span style={{font: '700 10px/1 var(--erp-font-body)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--erp-maastricht)'}}>{c.title}</span>
              <span style={{marginLeft: 'auto', font: '600 10px/1 var(--erp-font-mono)', color: 'var(--erp-gray-500)'}}>{c.count}</span>
            </div>
            {c.items.map(([n, v]) => (
              <div key={n} style={{background: '#fff', border: '1px solid var(--erp-gray-100)', borderRadius: 6, padding: 8, marginBottom: 6}}>
                <div style={{font: '600 11px/1.2 var(--erp-font-body)', color: 'var(--erp-maastricht)', marginBottom: 2}}>{n}</div>
                <div style={{font: '700 11px/1 var(--erp-font-mono)', color: 'var(--erp-freedom)'}}>{v}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </MockShell>
  );
}

function MockGantt() {
  const rows = [
    { name: 'Analizė', start: 0, end: 20, color: 'var(--erp-freedom-300)' },
    { name: 'Dizainas', start: 15, end: 45, color: 'var(--erp-freedom)' },
    { name: 'Diegimas', start: 40, end: 75, color: 'var(--erp-freedom-700)' },
    { name: 'Mokymai', start: 70, end: 90, color: 'var(--erp-yellow-500)' },
    { name: 'Paleidimas', start: 85, end: 100, color: 'var(--erp-maastricht)' },
  ];
  return (
    <MockShell title="Projekto Gantt" subtitle="ERP diegimas · Baltijos Medis · 6 savaitės">
      <div>
        {rows.map((r, i) => (
          <div key={r.name} style={{display: 'grid', gridTemplateColumns: '90px 1fr', gap: 10, alignItems: 'center', marginBottom: 8}}>
            <div style={{font: '500 12px/1 var(--erp-font-body)', color: 'var(--erp-maastricht)'}}>{r.name}</div>
            <div style={{position: 'relative', height: 18, background: 'var(--erp-gray-50)', borderRadius: 4}}>
              <div style={{position: 'absolute', left: `${r.start}%`, width: `${r.end - r.start}%`, height: '100%', background: r.color, borderRadius: 4}}></div>
            </div>
          </div>
        ))}
        <div style={{display: 'grid', gridTemplateColumns: '90px 1fr', gap: 10, marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--erp-gray-100)'}}>
          <div></div>
          <div style={{display: 'flex', justifyContent: 'space-between', font: '500 10px/1 var(--erp-font-mono)', color: 'var(--erp-gray-500)'}}>
            <span>S1</span><span>S2</span><span>S3</span><span>S4</span><span>S5</span><span>S6</span>
          </div>
        </div>
      </div>
    </MockShell>
  );
}

function MockHR() {
  return (
    <MockShell title="Komanda" subtitle="24 darbuotojai · 3 komandos">
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14}}>
        {[['Aktyvūs', '22', 'var(--erp-freedom)'], ['Atostogose', '2', 'var(--erp-yellow-600)'], ['Nauji', '1', 'var(--erp-picton)']].map(([l, v, c]) => (
          <div key={l} style={{background: 'var(--erp-gray-50)', borderRadius: 10, padding: 12}}>
            <div style={{font: '500 10px/1 var(--erp-font-body)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--erp-gray-500)', marginBottom: 6}}>{l}</div>
            <div style={{font: '800 22px/1 var(--erp-font-display)', color: c}}>{v}</div>
          </div>
        ))}
      </div>
      <div>
        {[['Jolita K.', 'Finansų dir.', 'JK', 'var(--erp-freedom)'], ['Tomas P.', 'Pardavimai', 'TP', 'var(--erp-yellow-500)'], ['Rita B.', 'Projektai', 'RB', 'var(--erp-picton)']].map(([n, r, in_, c]) => (
          <div key={n} style={{display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--erp-gray-100)'}}>
            <div style={{width: 32, height: 32, borderRadius: '50%', background: c, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 11px/1 var(--erp-font-display)'}}>{in_}</div>
            <div style={{flex: 1}}>
              <div style={{font: '600 12px/1.2 var(--erp-font-body)', color: 'var(--erp-maastricht)'}}>{n}</div>
              <div style={{font: '400 11px/1.2 var(--erp-font-body)', color: 'var(--erp-gray-500)'}}>{r}</div>
            </div>
            <span className="erp-mock-tag erp-mock-tag-paid">Aktyvus</span>
          </div>
        ))}
      </div>
    </MockShell>
  );
}

function MockShop() {
  return (
    <MockShell title="Internetinė parduotuvė" subtitle="erp365shop.lt · 1 284 produktai">
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 12}}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{border: '1px solid var(--erp-gray-100)', borderRadius: 8, overflow: 'hidden'}}>
            <div style={{aspectRatio: '1', background: i === 0 ? 'var(--erp-freedom-50)' : i === 1 ? 'var(--erp-yellow-50)' : 'var(--erp-gray-50)', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
              <i data-lucide={['package', 'box', 'gift'][i]} style={{width: 28, height: 28, color: ['var(--erp-freedom)', 'var(--erp-yellow-600)', 'var(--erp-gray-400)'][i]}}></i>
            </div>
            <div style={{padding: 8}}>
              <div style={{font: '600 11px/1.2 var(--erp-font-body)', color: 'var(--erp-maastricht)', marginBottom: 4}}>{['Produktas A', 'Produktas B', 'Produktas C'][i]}</div>
              <div style={{font: '700 12px/1 var(--erp-font-mono)', color: 'var(--erp-freedom)'}}>{['24€', '38€', '12€'][i]}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between', padding: '10px 12px', background: 'var(--erp-gray-50)', borderRadius: 8, font: '500 12px/1 var(--erp-font-body)', color: 'var(--erp-maastricht)'}}>
        <span>Šiandien: <strong>42 užsakymai</strong></span>
        <span style={{color: 'var(--erp-freedom)', fontWeight: 700}}>3 284€</span>
      </div>
    </MockShell>
  );
}

function MockMfg() {
  return (
    <MockShell title="Gamybos užsakymai" subtitle="Linija A · šiandien · OEE 87%">
      {[['MO-284', 'Stalas „Nida"', 40, 60, 'vyksta'],
        ['MO-283', 'Kėdė „Palanga"', 80, 100, 'baigta'],
        ['MO-282', 'Lentyna „Kuršių"', 15, 100, 'laukia'],
        ['MO-281', 'Stalčius „Juodkrantė"', 100, 100, 'baigta']].map(([id, p, done, total, st]) => (
        <div key={id} style={{padding: '10px 0', borderBottom: '1px solid var(--erp-gray-100)'}}>
          <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 6}}>
            <div>
              <span style={{font: '600 11px/1 var(--erp-font-mono)', color: 'var(--erp-gray-500)', marginRight: 8}}>{id}</span>
              <span style={{font: '600 12px/1 var(--erp-font-body)', color: 'var(--erp-maastricht)'}}>{p}</span>
            </div>
            <span className={`erp-mock-tag ${st === 'baigta' ? 'erp-mock-tag-paid' : st === 'vyksta' ? 'erp-mock-tag-due' : 'erp-mock-tag-overdue'}`} style={{background: st === 'vyksta' ? 'var(--erp-freedom-50)' : undefined, color: st === 'vyksta' ? 'var(--erp-freedom)' : undefined}}>{st}</span>
          </div>
          <div style={{height: 4, background: 'var(--erp-gray-100)', borderRadius: 2, overflow: 'hidden'}}>
            <div style={{height: '100%', width: `${done}%`, background: done === 100 ? '#16a34a' : 'var(--erp-freedom)'}}></div>
          </div>
        </div>
      ))}
    </MockShell>
  );
}

function MockReports() {
  return (
    <MockShell title="Finansinė ataskaita" subtitle="Q1 2026 · generuota prieš 4 min.">
      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14}}>
        <div style={{background: 'var(--erp-gray-50)', padding: 14, borderRadius: 10}}>
          <div style={{font: '500 10px/1 var(--erp-font-body)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--erp-gray-500)', marginBottom: 6}}>Pajamos</div>
          <div style={{font: '800 22px/1 var(--erp-font-display)', color: 'var(--erp-maastricht)'}}>842 120€</div>
          <div style={{font: '500 11px/1 var(--erp-font-body)', color: '#16a34a', marginTop: 4}}>▲ 14.2% YoY</div>
        </div>
        <div style={{background: 'var(--erp-gray-50)', padding: 14, borderRadius: 10}}>
          <div style={{font: '500 10px/1 var(--erp-font-body)', letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--erp-gray-500)', marginBottom: 6}}>Pelnas</div>
          <div style={{font: '800 22px/1 var(--erp-font-display)', color: 'var(--erp-maastricht)'}}>186 420€</div>
          <div style={{font: '500 11px/1 var(--erp-font-body)', color: '#16a34a', marginTop: 4}}>▲ 22.1% YoY</div>
        </div>
      </div>
      <div style={{height: 80, background: 'var(--erp-gray-50)', borderRadius: 8, padding: 10, display: 'flex', alignItems: 'end', gap: 6}}>
        {[40, 55, 48, 62, 70, 58, 75, 82, 68, 88, 92, 78].map((h, i) => (
          <div key={i} style={{flex: 1, height: `${h}%`, background: i > 8 ? 'var(--erp-freedom)' : 'var(--erp-freedom-200)', borderRadius: '2px 2px 0 0'}}></div>
        ))}
      </div>
    </MockShell>
  );
}

function DashboardMockSkydeliai() {
  const k1 = useCounter(18,    { duration: 1400 });
  const k2 = useCounter(68,    { duration: 1400 });
  const k3 = useCounter(444,   { prefix: '$', suffix: 'k', duration: 1600 });
  const k4 = useCounter(6534,  { prefix: '$', duration: 1600 });

  const sidebar = [
    { group: 'PARDAVIMAI', items: [
      { label: 'Pardavimai', active: true },
      { label: 'Produktai' },
      { label: 'Kasos sistema' },
      { label: 'Kasos sistema – Restoranas' },
      { label: 'Nuoma' },
    ]},
    { group: 'PRENUMERATOS', items: [
      { label: 'Prenumeratos' },
      { label: 'MRR raida' },
      { label: 'Išlaikymas' },
      { label: 'Pardavėjas' },
    ]},
    { group: 'CRM', items: [
      { label: 'Potencialūs klientai' },
      { label: 'Piltuvėlis' },
    ]},
    { group: 'FINANSAI', items: [
      { label: 'Apskaita' },
      { label: 'Pateikimas apmok…' },
      { label: 'Etalonas' },
      { label: 'Išlaidos' },
    ]},
  ];

  const kpis = [
    { label: 'Pasiūlymai', value: k1, tone: 'blue' },
    { label: 'Užsakymai', value: k2, tone: 'blue' },
    { label: 'Pajamos', value: k3, tone: 'yellow' },
    { label: 'Vidutinis užsakymas', value: k4, tone: 'yellow', kebab: true },
  ];

  const topQuotations = [
    ['Ready Mat', 'Mitchell Admin', '$2 947,50'],
    ['Gemini Furniture', 'Marc Demo', '$1 799,00'],
    ['Acme Corporation', 'Marc Demo', '$1 740,00'],
    ['Joel Willis', 'Mitchell Admin', '$1 740,00'],
  ];
  const topOrders = [
    ['Acme Corporation', 'Mitchell Admin', '$223 210,00'],
    ['Acme Corporation', 'Mitchell Admin', '$40 000,00'],
    ['Ready Mat', 'Mitchell Admin', '$38 960,00'],
    ['Acme Corporation', 'Mitchell Admin', '$18 420,00'],
  ];

  return (
    <div className="erp-odoo erp-skd">
      {/* Top bar */}
      <div className="erp-skd-topbar">
        <div className="erp-skd-topbar-left">
          <span className="erp-skd-app-icon"><img src="assets/odoo-dashboards.svg" alt="" /></span>
          <span className="erp-skd-app-name">Informacijos suvestinės</span>
          <span className="erp-skd-nav-link is-active">Informacijos suvestinės</span>
          <span className="erp-skd-nav-link">Mano skydelis</span>
          <span className="erp-skd-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-skd-topbar-right">
          <span className="erp-skd-status-dot" style={{background:'#EF4444'}} />
          <span className="erp-skd-badge-wrap">
            <svg className="erp-skd-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-skd-badge">1</span>
          </span>
          <span className="erp-skd-ai-pill">AI</span>
          <span className="erp-skd-badge-wrap">
            <svg className="erp-skd-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-skd-badge">17</span>
          </span>
          <span className="erp-skd-badge-wrap">
            <svg className="erp-skd-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-skd-badge">25</span>
          </span>
          <svg className="erp-skd-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-skd-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-skd-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-skd-actions">
        <div className="erp-skd-actions-left">
          <span className="erp-skd-pagetitle">Informacijos suvestinės</span>
        </div>
        <div className="erp-skd-actions-center">
          <div className="erp-skd-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-skd-search-placeholder">Ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-skd-actions-right">
          <span className="erp-skd-daterange">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#475569" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
            Paskutinės 90 d.
          </span>
          <span className="erp-skd-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg></span>
          <span className="erp-skd-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg></span>
          <span className="erp-skd-share">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"/></svg>
            Dalintis
          </span>
          <svg className="erp-skd-fav" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
        </div>
      </div>

      {/* Body: sidebar + main */}
      <div className="erp-skd-body">
        <div className="erp-skd-sidebar">
          {sidebar.map(g => (
            <div key={g.group} className="erp-skd-sb-group">
              <div className="erp-skd-sb-grouplabel">{g.group}</div>
              {g.items.map(it => (
                <div key={it.label} className={`erp-skd-sb-item ${it.active ? 'is-active' : ''}`}>{it.label}</div>
              ))}
            </div>
          ))}
        </div>
        <div className="erp-skd-main">
          <div className="erp-skd-kpi-row">
            {kpis.map(k => (
              <div key={k.label} className={`erp-skd-kpi tone-${k.tone}`}>
                <div className="erp-skd-kpi-head">
                  <span className="erp-skd-kpi-label">{k.label}</span>
                  {k.kebab && (
                    <span className="erp-skd-kpi-kebab">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="#94A3B8"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
                    </span>
                  )}
                </div>
                <div className="erp-skd-kpi-value">{k.value}</div>
                <div className="erp-skd-kpi-delta">
                  <span className="erp-skd-kpi-up">↑∞%</span> nuo praėjusio laikot…
                </div>
              </div>
            ))}
          </div>

          <div>
            <div className="erp-skd-section-title">Mėnesio pardavimai</div>
            <div className="erp-skd-chart">
              <svg viewBox="0 0 800 240" preserveAspectRatio="none">
                {[20, 60, 100, 140, 180, 220].map(y => (
                  <line key={y} x1="60" x2="780" y1={y} y2={y} stroke="#E2E8F0" strokeWidth="1" />
                ))}
                {[
                  { y: 20, label: '400k' },
                  { y: 60, label: '350k' },
                  { y: 100, label: '300k' },
                  { y: 140, label: '250k' },
                  { y: 180, label: '200k' },
                  { y: 220, label: '0' },
                ].map((l, i) => (
                  <text key={i} x="50" y={l.y + 4} fontSize="11" fill="#94A3B8" textAnchor="end">{l.label}</text>
                ))}
                <path d="M60,220 L300,195 L540,193 L780,45 L780,220 L60,220 Z" fill="rgba(0,128,255,0.18)" />
                <path d="M60,220 L300,195 L540,193 L780,45" fill="none" stroke="#0080FF" strokeWidth="2.5" />
                {[[60,220],[300,195],[540,193],[780,45]].map((p, i) => (
                  <circle key={i} cx={p[0]} cy={p[1]} r="4" fill="#0080FF" />
                ))}
              </svg>
              <div className="erp-skd-chart-x">
                <span>vasario 2026</span>
                <span>kovo 2026</span>
                <span>balandžio 2026</span>
                <span>gegužės 2026</span>
              </div>
            </div>
          </div>

          <div className="erp-skd-tables">
            <div className="erp-skd-table tone-yellow">
              <div className="erp-skd-table-title">Geriausi pasiūlymai</div>
              <div className="erp-skd-th"><span>partneris</span><span>vartotojas</span><span className="right">Pajamos ▼</span></div>
              {topQuotations.map((row, i) => (
                <div key={i} className="erp-skd-tr">
                  <span className="erp-skd-td-partner">{row[0]}</span>
                  <span>{row[1]}</span>
                  <span className="right">{row[2]}</span>
                </div>
              ))}
            </div>
            <div className="erp-skd-table tone-blue">
              <div className="erp-skd-table-title">Geriausi pardavimo užsakymai</div>
              <div className="erp-skd-th"><span>partneris</span><span>vartotojas</span><span className="right">Pajamos ▼</span></div>
              {topOrders.map((row, i) => (
                <div key={i} className="erp-skd-tr">
                  <span className="erp-skd-td-partner">{row[0]}</span>
                  <span>{row[1]}</span>
                  <span className="right">{row[2]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DashboardMockProjektai() {
  const cards = [
    { title: 'AGR - S00074 - Pardavimo užsakymas', star: true, accent: null,
      contact: 'Acme Corporation', dates: '04-13 → 06-08', tags: [],
      count: '11', countLabel: 'Užduotys', flag: '1/3',
      badge: { text: '-184h 30min.', tone: 'red' },
      icons: ['phone'], avatars: ['JV'], dot: 'gray' },
    { title: 'Namo statyba', star: true, accent: 'navy',
      contact: 'Acme Corporation', dates: '03-01 → 04-26',
      tags: [
        { label: 'Architektūra', tone: 'peach' },
        { label: 'Statyba', tone: 'teal' },
        { label: 'Dizainas', tone: 'purple' },
        { label: 'Interjeras', tone: 'lavender' },
      ],
      count: '10', countLabel: 'Užduotys', flag: '1/3',
      icons: ['dollar', 'clock'], avatars: ['JV'], dot: 'green' },
    { title: 'Biuro dizainas', star: true, accent: 'yellow',
      contact: 'Joel Willis', dates: '02-27 → 05-08',
      tags: [{ label: 'Išorinis', tone: 'red' }],
      count: '22', countLabel: 'Užduotys', flag: '1/3',
      icons: ['clock'], avatars: ['JW'], dot: 'green' },
    { title: 'Renovacijos', star: true, accent: 'blue',
      contact: null, dates: '03-01 → 04-26',
      tags: [
        { label: 'Eksperimentas', tone: 'green' },
        { label: 'Vidinis', tone: 'purple' },
      ],
      count: '3', countLabel: 'Užduotys',
      icons: ['dollar', 'clock'], avatars: ['JV', 'AC'], dot: 'navy' },
    { title: 'Tyrimai ir plėtra', star: true, accent: null,
      contact: null, dates: null,
      tags: [{ label: 'Vidinis', tone: 'purple' }],
      count: '6', countLabel: 'Užduotys',
      icons: ['group'], avatars: [], dot: 'blue' },
    { title: 'ACME - S00076 - Pardavimo užsakymas', star: false, accent: null,
      contact: 'Acme Corporation', dates: '05-04 → 05-18', tags: [],
      count: '2', countLabel: 'Užduotys',
      badge: { text: '16h', tone: 'green' },
      icons: ['clock'], avatars: ['JV'], dot: 'gray' },
    { title: 'Aptarnavimas po pardavimo', star: false, accent: 'orange',
      contact: null, dates: null, tags: [],
      count: '3', countLabel: 'Paslaugos',
      icons: ['clock'], avatars: [], dot: 'orange' },
    { title: 'DOC - S00072 - Renovacijų architektas', star: false, accent: 'orange',
      contact: 'Acme Corporation', dates: null, tags: [],
      count: '1', countLabel: 'Užduotys',
      icons: ['clock'], avatars: ['JV'], dot: 'gray' },
    { title: 'DPC - S00075 - Pardavimo užsakymas', star: false, accent: null,
      contact: 'Ready Mat', dates: '03-30 → 05-25', tags: [],
      count: '9', countLabel: 'Užduotys', flag: '0/2',
      badge: { text: '5h', tone: 'green' },
      icons: ['clock'], avatars: ['JV'], dot: 'red' },
    { title: 'Lauko paslaugos', star: false, accent: null,
      contact: null, dates: null, tags: [],
      count: '16', countLabel: 'Intervencijos',
      icons: ['clock'], avatars: ['JV'], dot: 'gray' },
    { title: 'Iniciatyvos', star: false, accent: null,
      contact: null, dates: null, tags: [],
      count: '6', countLabel: 'Užduotys',
      icons: ['clock'], avatars: ['MD'], dot: 'gray' },
    { title: 'Renovacijų architektas', star: false, accent: 'orange',
      contact: 'Joel Willis', dates: null, tags: [],
      count: '1', countLabel: 'Užduotys',
      icons: ['clock'], avatars: ['JW'], dot: 'gray' },
  ];

  const counters = cards.map(c => useCounter(parseInt(c.count, 10), { duration: 1400 }));

  const renderIcon = (kind) => {
    if (kind === 'phone') return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    if (kind === 'dollar') return <span style={{font:'700 11px/1 var(--erp-font-display)', color:'#16A34A'}}>$</span>;
    if (kind === 'clock') return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    if (kind === 'group') return <svg width="13" height="11" viewBox="0 0 24 24" fill="#16A34A"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>;
    return null;
  };

  const dotColor = (d) => ({
    gray: '#CBD5E1', green: '#16A34A', blue: 'var(--erp-freedom)',
    orange: '#F97316', red: '#EF4444', navy: 'var(--erp-maastricht)',
  })[d] || '#CBD5E1';

  const accentColor = (a) => ({
    navy: 'var(--erp-maastricht)', yellow: '#F59E0B',
    blue: 'var(--erp-freedom)', orange: '#FB923C',
  })[a] || 'transparent';

  return (
    <div className="erp-odoo erp-prj">
      {/* Top bar */}
      <div className="erp-prj-topbar">
        <div className="erp-prj-topbar-left">
          <span className="erp-prj-app-icon"><img src="assets/odoo-project.svg" alt="" /></span>
          <span className="erp-prj-app-name">Projektas</span>
          <span className="erp-prj-nav-link is-active">Projektai</span>
          <span className="erp-prj-nav-link">Užduotys</span>
          <span className="erp-prj-nav-link">Ataskaitos</span>
          <span className="erp-prj-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-prj-topbar-right">
          <span className="erp-prj-status-dot" style={{background:'#EF4444'}} />
          <span className="erp-prj-badge-wrap">
            <svg className="erp-prj-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-prj-badge">1</span>
          </span>
          <span className="erp-prj-ai-pill">AI</span>
          <span className="erp-prj-badge-wrap">
            <svg className="erp-prj-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-prj-badge">17</span>
          </span>
          <span className="erp-prj-badge-wrap">
            <svg className="erp-prj-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-prj-badge">25</span>
          </span>
          <svg className="erp-prj-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-prj-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-prj-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-prj-actions">
        <div className="erp-prj-actions-left">
          <span className="erp-prj-new">
            Naujas
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" strokeWidth="3"><path d="M6 9l6 6 6-6"/></svg>
          </span>
          <span className="erp-prj-pagetitle">
            Projektai
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-prj-actions-center">
          <div className="erp-prj-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-prj-search-placeholder">Ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-prj-actions-right">
          <span className="erp-prj-paging">1-12 / 12</span>
          <span className="erp-prj-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg></span>
          <span className="erp-prj-paging-arrow"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg></span>
          <span className="erp-prj-views">
            <span className="is-active" title="Kanban">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
            </span>
            <span title="Sąrašas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </span>
          </span>
        </div>
      </div>

      {/* Card board */}
      <div className="erp-prj-board">
        {cards.map((c, i) => (
          <div key={i} className="erp-prj-card" style={{borderLeft: c.accent ? `3px solid ${accentColor(c.accent)}` : '1px solid #E2E8F0'}}>
            <div className="erp-prj-card-head">
              <span className={`erp-prj-card-star ${c.star ? 'is-on' : ''}`} aria-hidden="true">★</span>
              <span className="erp-prj-card-title">{c.title}</span>
            </div>
            {c.contact && (
              <div className="erp-prj-card-line">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="#94A3B8"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                <span>{c.contact}</span>
              </div>
            )}
            {c.dates && (
              <div className="erp-prj-card-line">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                <span>{c.dates}</span>
              </div>
            )}
            {c.tags.length > 0 && (
              <div className="erp-prj-card-tags">
                {c.tags.map(t => (
                  <span key={t.label} className={`erp-prj-tag tone-${t.tone}`}>{t.label}</span>
                ))}
              </div>
            )}
            <div className="erp-prj-card-bottom">
              <span className="erp-prj-card-count">{counters[i]} {c.countLabel}</span>
              {c.flag && (
                <span className="erp-prj-card-flag">
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="#EF4444"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6z"/></svg>
                  {c.flag}
                </span>
              )}
              {c.badge && (
                <span className={`erp-prj-card-badge tone-${c.badge.tone}`}>{c.badge.text}</span>
              )}
              <span className="erp-prj-card-icons">
                {c.icons.map((kind, ki) => <span key={ki} className="erp-prj-card-icon">{renderIcon(kind)}</span>)}
              </span>
              <span className="erp-prj-card-avs">
                {c.avatars.map((av, ai) => <span key={ai} className="erp-prj-card-av">{av}</span>)}
              </span>
              <span className="erp-prj-card-dot" style={{background: dotColor(c.dot)}} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockGamyba() {
  const q1 = useCounter(5, { decimals: 2, duration: 1400 });
  const q2 = useCounter(3, { decimals: 2, duration: 1400 });
  const q3 = useCounter(3, { decimals: 2, duration: 1400 });
  const q4 = useCounter(1, { decimals: 2, duration: 1400 });
  const total = useCounter(29, { decimals: 2, duration: 1400 });

  const rows = [
    { nr: 'WH/MO/00009', start: { text: 'Praėjusį mėn.', tone: 'red' },   product: '[STAL_8855] Stalčius',         comp: null,                                qty: q1,     status: 'done' },
    { nr: 'WH/MO/00008', start: { text: 'Praėjusį mėn.', tone: 'red' },   product: '[STAL_8855] Stalčius',         comp: null,                                qty: q2,     status: 'done' },
    { nr: 'WH/MO/00007', start: { text: 'Šiandien',      tone: 'amber' }, product: '[STAL_7800] Stalo komplektas', comp: { text: 'Numatoma geg. 10', tone: 'red' }, qty: q3,     status: 'confirmed' },
    { nr: 'WH/MO/00006', start: { text: 'Šiandien',      tone: 'amber' }, product: '[STAL_8522] Stalo viršus',     comp: { text: 'Pasiekiamas',      tone: 'green' }, qty: q4,     status: 'confirmed' },
    { nr: 'WH/MO/00005', start: { text: 'Šiandien',      tone: 'amber' }, product: '[STAL_8855] Stalčius',         comp: null,                                qty: '5,00', status: 'done' },
    { nr: 'WH/MO/00004', start: { text: 'Šiandien',      tone: 'amber' }, product: '[STAL_8855] Stalčius',         comp: { text: 'Pasiekiamas',      tone: 'green' }, qty: '5,00', status: 'confirmed' },
    { nr: 'WH/MO/00003', start: { text: 'Šiandien',      tone: 'amber' }, product: 'Valgomojo stalas',             comp: null,                                qty: '5,00', status: 'done' },
    { nr: 'WH/MO/00002', start: { text: 'Šiandien',      tone: 'amber' }, product: '[STAL_9666] Lentelė',          comp: null,                                qty: '1,00', status: 'done' },
    { nr: 'WH/MO/00001', start: { text: 'Rytoj',         tone: 'blue' },  product: '[STAL_9666] Lentelė',          comp: null,                                qty: '1,00', status: 'draft', draft: true },
  ];

  return (
    <div className="erp-odoo erp-mfg">
      {/* Top nav bar */}
      <div className="erp-crm-topbar">
        <div className="erp-crm-topbar-left">
          <span className="erp-crm-app-icon">
            <img src="assets/odoo-manufacturing.svg" alt="" />
          </span>
          <span className="erp-crm-app-name">Gamyba</span>
          <span className="erp-crm-nav-link is-active">Apžvalga</span>
          <span className="erp-crm-nav-link">Operacijos</span>
          <span className="erp-crm-nav-link">Planavimas</span>
          <span className="erp-crm-nav-link">Produktai</span>
          <span className="erp-crm-nav-link">Ataskaitos</span>
          <span className="erp-crm-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-crm-topbar-right">
          <span className="erp-crm-status-dot" style={{background:'#EF4444'}} />
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-crm-badge">1</span>
          </span>
          <span className="erp-crm-ai-pill">AI</span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-crm-badge">17</span>
          </span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-crm-badge">25</span>
          </span>
          <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-crm-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-crm-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-crm-actions">
        <div className="erp-crm-actions-left">
          <button className="erp-crm-btn erp-crm-btn-primary">Naujas</button>
          <span className="erp-crm-pipe-label">
            Gamybos užsakymai
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-crm-actions-center">
          <div className="erp-crm-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-crm-search-placeholder">ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-crm-actions-right">
          <span className="erp-purchase-pagination">
            <span>1-9 / 9</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg>
          </span>
          <span className="erp-crm-views">
            <span title="Sąrašas" className="is-active">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </span>
            <span title="Kanban">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
            </span>
            <span title="Sąrašas detaliai">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
            </span>
            <span title="Kalendorius">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
            </span>
            <span title="Suvestinė">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h18v18H3zM3 9h18M9 3v18"/></svg>
            </span>
            <span title="Grafikas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-6"/></svg>
            </span>
            <span title="Veiksmai">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </span>
          </span>
        </div>
      </div>

      {/* List */}
      <div className="erp-mfg-list">
        <div className="erp-mfg-row erp-mfg-row-head">
          <span></span>
          <span>Numeris</span>
          <span>Pradėti</span>
          <span>Produktas</span>
          <span>Kitas veiksmas</span>
          <span>Šaltinis</span>
          <span>Komponentų prieinamumas</span>
          <span className="erp-purchase-cell-num">Kiekis</span>
          <span>Vienetas</span>
          <span>Įmonė</span>
          <span>Būsena</span>
        </div>
        {rows.map(r => (
          <div key={r.nr} className={`erp-mfg-row ${r.draft ? 'erp-mfg-row-draft' : ''}`}>
            <span className="erp-purchase-cell-star">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            </span>
            <span className="erp-purchase-cell-nr">{r.nr}</span>
            <span className={`erp-mfg-start erp-mfg-start-${r.start.tone}`}>{r.start.text}</span>
            <span className="erp-purchase-cell-truncate">{r.product}</span>
            <span className="erp-purchase-activity">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </span>
            <span></span>
            <span className={`erp-mfg-comp erp-mfg-comp-${r.comp ? r.comp.tone : 'none'}`}>{r.comp?.text || ''}</span>
            <span className="erp-purchase-cell-num">{r.qty}</span>
            <span className="erp-mfg-cell-uom">Vienetai</span>
            <span className="erp-purchase-cell-truncate">UAB „Baltijos medis"</span>
            <span>
              <span className={`erp-mfg-status erp-mfg-status-${r.status}`}>
                {r.status === 'done' ? 'Atlikta' : r.status === 'confirmed' ? 'Patvirtinti' : 'Juodraštis'}
              </span>
            </span>
          </div>
        ))}
        <div className="erp-mfg-row erp-mfg-row-total">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span className="erp-purchase-cell-num">{total}</span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  );
}

function DashboardMockAtsargos() {
  const products = [
    { name: 'Juodas stalčius',                  code: 'FURN_2100', price: '24,00',    qty: '45,00',  icon: 'archive',     bg: '#0F172A', fg: '#FFD143' },
    { name: 'Juodas stalčius',                  code: 'FURN_8900', price: '25,00',    qty: '0,00',   icon: 'archive',     bg: '#FEF3C7', fg: '#92400E' },
    { name: 'Kampinis kairėje rašomasis stalas', code: 'FURN_1118', price: '85,00',    qty: '2,00',   icon: 'square',     bg: '#FEF3C7', fg: '#92400E' },
    { name: 'Keturių žmonių stalas',            code: 'FURN_8220', price: '2 350,00', qty: '20,00',  icon: 'square',     bg: '#F1F5F9', fg: '#475569' },
    { name: 'Kiaulienos burgeris',              code: 'FOOD_0001', price: '15,50',    qty: '120,00', icon: 'utensils',    bg: '#FEE2E2', fg: '#DC2626' },
    { name: 'Konferencijų kėdė', variants: '2 Variantai', code: 'FURN_4200', price: '33,00', qty: '55,00', icon: 'armchair', bg: '#DBEAFE', fg: '#1E40AF' },
    { name: 'Kėdės grindų apsauga',             code: 'FURN_5500', price: '12,00',    qty: '88,00',  icon: 'shield',      bg: '#F1F5F9', fg: '#64748B' },
    { name: 'LED lempa',                        code: 'FURN_0003', price: '0,90',     qty: '0,00',   icon: 'lamp',        bg: '#FEF9C3', fg: '#A16207' },
    { name: 'Laidų tvarkymo dėžutė',            code: 'FURN_5800', price: '1,00',     qty: '0,00',   icon: 'box',         bg: '#F1F5F9', fg: '#475569' },
    { name: 'Laidų tvarkymo dėžutė',            code: 'FURN_5555', price: '1,00',     qty: '90,00',  icon: 'box',         bg: '#FEF3C7', fg: '#92400E' },
    { name: 'Laikraščių lentyna',               code: 'FURN_0007', price: '1,28',     qty: '0,00',   icon: 'layers',      bg: '#F1F5F9', fg: '#475569' },
    { name: 'Laiškų dėtuvė',                    code: 'FURN_0004', price: '4,80',     qty: '0,00',   icon: 'inbox',       bg: '#FFEDD5', fg: '#9A3412' },
    { name: 'Odinė striukė',                    code: 'CLOTH_120', price: '120,00',   qty: '8,00',   icon: 'shirt',       bg: '#1E293B', fg: '#FFD143' },
    { name: 'Lenta',                            code: 'OFC_1700',  price: '1,70',     qty: '0,00',   icon: 'square',      bg: '#F1F5F9', fg: '#94A3B8' },
    { name: 'Lentelė',                          code: 'FURN_9666', price: '520,00',   qty: '2,00',   icon: 'table',       bg: '#1E293B', fg: '#FFFFFF' },
    { name: 'Lentos rašiklis',                  code: 'CONS_0001', price: '1,20',     qty: '430,00', icon: 'pen-tool',    bg: '#DCFCE7', fg: '#166534' },
  ];

  const qtyCounters = products.map(p => useCounter(parseFloat(p.qty.replace(/\s/g, '').replace(',', '.')), { decimals: 2, duration: 1400 }));

  return (
    <div className="erp-odoo erp-inv">
      {/* Top nav bar */}
      <div className="erp-crm-topbar">
        <div className="erp-crm-topbar-left">
          <span className="erp-crm-app-icon">
            <img src="assets/odoo-inventory.svg" alt="" />
          </span>
          <span className="erp-crm-app-name">Atsargos</span>
          <span className="erp-crm-nav-link is-active">Apžvalga</span>
          <span className="erp-crm-nav-link">Operacijos</span>
          <span className="erp-crm-nav-link">Produktai</span>
          <span className="erp-crm-nav-link">Ataskaitos</span>
          <span className="erp-crm-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-crm-topbar-right">
          <span className="erp-crm-status-dot" style={{background:'#EF4444'}} />
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-crm-badge">1</span>
          </span>
          <span className="erp-crm-ai-pill">AI</span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-crm-badge">17</span>
          </span>
          <span className="erp-crm-badge-wrap">
            <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span className="erp-crm-badge">25</span>
          </span>
          <svg className="erp-crm-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-crm-company">UAB „Baltijos medis" (Vilnius)</span>
          <span className="erp-crm-avatar">JV</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-crm-actions">
        <div className="erp-crm-actions-left">
          <button className="erp-crm-btn erp-crm-btn-primary">Naujas</button>
          <span className="erp-crm-pipe-label">
            Produktai
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-crm-actions-center">
          <div className="erp-crm-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-crm-search-filter">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
              Prekės
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </span>
            <span className="erp-crm-search-placeholder">ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-crm-actions-right">
          <span className="erp-purchase-pagination">
            <span>1-80 / 141</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg>
          </span>
          <span className="erp-crm-views">
            <span title="Kanban" className="is-active">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
            </span>
            <span title="Sąrašas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </span>
          </span>
        </div>
      </div>

      {/* Product kanban grid */}
      <div className="erp-inv-grid">
        {products.map((p, i) => (
          <div key={p.code} className="erp-inv-card">
            <div className="erp-inv-card-body">
              <span className="erp-inv-card-star">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                <span className="erp-inv-card-name">{p.name}</span>
              </span>
              <div className="erp-inv-card-code">[{p.code}]</div>
              {p.variants && <div className="erp-inv-card-variant">{p.variants}</div>}
              <div className="erp-inv-card-meta">
                <div>Kaina: <strong>€ {p.price}</strong></div>
                <div>Turima: <strong>{qtyCounters[i]}</strong> Vienetai</div>
              </div>
            </div>
            <div className="erp-inv-card-img" style={{background: p.bg, color: p.fg}}>
              <i data-lucide={p.icon} style={{width: 32, height: 32}}></i>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockPrieziura() {
  const columns = [
    { title: 'Nauja užklausa', count: 12, cards: [
      { title: 'Šlifavimas (medienos patalpos)', person: 'Tadas',
        lines: ['Inventoriaus Nr. 056', 'Servisas Kaunas'],
        date: '2026-05-04 14:00:00', stars: 2 },
      { title: 'Nuoma Panevėžio servisui (5 dienos)', person: 'Olesia',
        lines: ['Inventoriaus Nr. 33691', 'Servisas Kaunas'],
        date: '2026-04-25 14:00:00', stars: 3 },
      { title: 'Rūsio patalpų apdaila', person: 'Martynas',
        lines: ['Inventoriaus Nr. 202', 'Servisas Vilnius'],
        date: '2026-04-29 14:00:00', stars: 3 },
    ]},
    { title: 'Vykdoma', count: 7, cards: [
      { title: 'Guolių tepimas', person: 'Karolis',
        lines: ['Modelis: Buehler ECOMET30 49-10070', 'Inventoriaus Nr. E-09095', 'Servisas Kaunas'],
        date: '2026-04-29 09:00:00', stars: 2 },
      { title: 'Lipdukų gamyba/klijavimas', person: 'Olesia',
        lines: ['Inventoriaus Nr. ML340P', 'Lipdukų linija'],
        date: '2026-04-29 15:25:00', stars: 3 },
      { title: 'Užspaudimo patikros (3 skyrius)', person: 'Povilas',
        lines: ['Inventoriaus Nr. 135', 'Servisas Vilnius'],
        date: '2026-04-27 14:00:00', stars: 3 },
    ]},
    { title: 'Sutaisyta', count: 3, cards: [
      { title: 'Remontas (vidinė priežiūra)', person: 'Olesia',
        lines: ['Modelis: Buehler ECOMET30 49-10070', 'Inventoriaus Nr. E-09005', 'Serijinis numeris: EC30SM-190381'],
        date: '2026-04-30 15:00:00', stars: 3 },
      { title: 'Patikra mėnesinė', person: 'Administrator',
        lines: ['Inventoriaus Nr. YT-73083', 'Serijinis numeris: 45849', 'Sandėlis'],
        date: null, stars: 0 },
      { title: 'Metrologinė patikra', person: 'Olesia',
        lines: ['Inventoriaus Nr. 7001', 'Serijinis numeris: 7000/123', 'Pilstymas'],
        date: '2026-04-22 15:00:00', stars: 3 },
    ]},
    { title: 'Nurašyta', count: 0, cards: [] },
  ];

  const colCounters = columns.map(col => useCounter(col.count, { duration: 1400 }));

  return (
    <div className="erp-odoo erp-prie">
      {/* Top bar */}
      <div className="erp-prie-topbar">
        <div className="erp-prie-topbar-left">
          <span className="erp-prie-app-icon"><img src="assets/odoo-maintenance.svg" alt="" /></span>
          <span className="erp-prie-app-name">Priežiūra</span>
          <span className="erp-prie-nav-link">Valdymo skydelis</span>
          <span className="erp-prie-nav-link is-active">Priežiūra</span>
          <span className="erp-prie-nav-link">Įranga</span>
          <span className="erp-prie-nav-link">Ataskaitos</span>
          <span className="erp-prie-nav-link">Konfigūracija</span>
        </div>
        <div className="erp-prie-topbar-right">
          <span className="erp-prie-badge-wrap">
            <svg className="erp-prie-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-prie-badge">20</span>
          </span>
          <span className="erp-prie-badge-wrap">
            <svg className="erp-prie-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            <span className="erp-prie-badge">8</span>
          </span>
          <svg className="erp-prie-topbar-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          <span className="erp-prie-company">UAB Demonstracija</span>
          <span className="erp-prie-avatar">A</span>
        </div>
      </div>

      {/* Action bar */}
      <div className="erp-prie-actions">
        <div className="erp-prie-actions-left">
          <span className="erp-prie-new">Naujas</span>
          <span className="erp-prie-pagetitle">
            Priežiūros užklausos
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </span>
        </div>
        <div className="erp-prie-actions-center">
          <div className="erp-prie-search">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <span className="erp-prie-search-chip">
              Aktyvus
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </span>
            <span className="erp-prie-search-placeholder">Ieškoti…</span>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </div>
        </div>
        <div className="erp-prie-actions-right">
          <span className="erp-prie-views">
            <span className="is-active" title="Kanban">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
            </span>
            <span title="Sąrašas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            </span>
            <span title="Suvestinė">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3h18v18H3zM3 9h18M9 3v18"/></svg>
            </span>
            <span title="Grafikas">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l3-3 4 4 5-6"/></svg>
            </span>
            <span title="Kalendorius">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
            </span>
            <span title="Veiksmai">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </span>
          </span>
        </div>
      </div>

      {/* Kanban board */}
      <div className="erp-prie-board">
        {columns.map((col, ci) => (
          <div key={col.title} className="erp-prie-col">
            <div className="erp-prie-col-head">
              <span className="erp-prie-col-title">{col.title}</span>
              <span className="erp-prie-col-add">+</span>
            </div>
            <div className="erp-prie-col-bar">
              <span style={{width: '10%'}}></span>
            </div>
            <div className="erp-prie-col-count">{col.count > 0 ? colCounters[ci] : ' '}</div>
            <div className="erp-prie-col-body">
              {col.cards.map((c, i) => (
                <div key={i} className="erp-prie-card">
                  <div className="erp-prie-card-title">{c.title}</div>
                  <div className="erp-prie-card-line">{c.person}</div>
                  {c.lines.map((l, li) => (
                    <div key={li} className="erp-prie-card-line">{l}</div>
                  ))}
                  {c.date && <div className="erp-prie-card-line">{c.date}</div>}
                  <div className="erp-prie-card-footer">
                    <span className="erp-prie-card-stars">
                      {[0,1,2].map(s => (
                        <svg key={s} width="11" height="11" viewBox="0 0 24 24" fill={s < c.stars ? '#FFD143' : 'none'} stroke={s < c.stars ? '#FFD143' : '#CBD5E1'} strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                      ))}
                    </span>
                    <svg className="erp-prie-card-clock" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                    <span className="erp-prie-card-status"></span>
                    <span className="erp-prie-card-mtag">M</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MobileMockChrome({ title, withPager = false, noActions = false }) {
  // Shared chrome for mobile mockups: white topbar (matches desktop) + action bar
  return (
    <>
      <div className="erp-crmm-top">
        <div className="erp-crmm-top-left">
          <span className="erp-crmm-burger" aria-hidden="true">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
          </span>
          <span className="erp-crmm-pagetitle">{title}</span>
        </div>
        <div className="erp-crmm-top-right">
          <span className="erp-crmm-statusdot" />
          <span className="erp-crmm-iconbadge">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="erp-crmm-badge">1</span>
          </span>
          <span className="erp-crmm-ai">AI</span>
          <span className="erp-crmm-iconbadge">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            <span className="erp-crmm-badge">14</span>
          </span>
          <span className="erp-crmm-iconbadge">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            <span className="erp-crmm-badge">25</span>
          </span>
          <span className="erp-crmm-avatar">JV</span>
        </div>
      </div>

      {!noActions && (
      <div className="erp-crmm-actions">
        <div className="erp-crmm-actions-left">
          <button className="erp-crmm-btn erp-crmm-btn-primary">Naujas</button>
          <button className="erp-crmm-btn erp-crmm-btn-icon" aria-label="Daugiau">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="6" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="18" r="1.5"/></svg>
          </button>
          <button className="erp-crmm-btn erp-crmm-btn-icon" aria-label="Nustatymai">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </button>
        </div>
        <div className="erp-crmm-actions-right">
          {withPager && (
            <>
              <button className="erp-crmm-btn erp-crmm-btn-icon" aria-label="Atgal">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
              </button>
              <button className="erp-crmm-btn erp-crmm-btn-icon" aria-label="Pirmyn">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
              </button>
            </>
          )}
          <button className="erp-crmm-btn erp-crmm-btn-icon erp-crmm-btn-icon-active" aria-label="Kanban">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="14" y="3" width="7" height="12" rx="1"/></svg>
          </button>
          <button className="erp-crmm-btn erp-crmm-btn-icon" aria-label="Paieška">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
          </button>
        </div>
      </div>
      )}
    </>
  );
}

function DashboardMockMobileCRM() {
  // Single-stage focused mobile CRM mockup; renders alongside DashboardMock and is shown via CSS only on ≤560px
  const stageSum = useCounter(79100, { decimals: 2, suffix: ' €', duration: 1600 });
  const a1 = useCounter(4500,  { decimals: 2, suffix: ' €', duration: 1600 });
  const a2 = useCounter(9000,  { decimals: 2, suffix: ' €', duration: 1600 });
  const a3 = useCounter(5600,  { decimals: 2, suffix: ' €', duration: 1600 });
  const a4 = useCounter(60000, { decimals: 2, suffix: ' €', duration: 1600 });
  const cards = [
    { title: 'Modernus open space',           amount: a1, client: 'Henrikas Jordanas', logo: null, tag: 'Informacija',   tagColor: 'blue',   stars: 2, icon: 'phone' },
    { title: 'Biuro dizainas ir architektūra', amount: a2, client: 'Ready Mat',         logo: 'RM', tag: 'Konsultavimas', tagColor: 'green',  stars: 2, icon: 'phone-plus' },
    { title: '5 VIP vadovo kėdės',            amount: a3, client: 'Azure Interior',    logo: 'AI', tag: 'Paslaugos',     tagColor: 'yellow', stars: 1, icon: 'email-plus', overdue: '6d' },
    { title: 'Reikia 20 stalų',                amount: a4, client: null,                logo: null, tag: 'Konsultavimas', tagColor: 'green',  stars: 0, icon: 'email' },
  ];
  const tagColors = {
    blue:   { bg: '#DBEAFE', fg: '#1E40AF' },
    green:  { bg: '#D1FAE5', fg: '#065F46' },
    yellow: { bg: '#FEF3C7', fg: '#92400E' },
    pink:   { bg: '#FCE7F3', fg: '#9D174D' },
  };
  const phoneIcon = (color) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
  );
  const phonePlus = (
    <span className="erp-crmm-icon-plus">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
      <span className="erp-crmm-icon-plus-mark">+</span>
    </span>
  );
  const emailIcon = (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="#EF4444" stroke="#EF4444" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="m22 6-10 7L2 6" fill="none" stroke="#fff"/></svg>
  );
  const emailGreenIcon = (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="#16A34A" stroke="#16A34A" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="m22 6-10 7L2 6" fill="none" stroke="#fff"/></svg>
  );
  const cogIcon = (size = 13) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
  );
  const kebabIcon = (size = 14) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="6" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="18" r="1.5"/></svg>
  );
  const renderCardIcon = (icon) => {
    if (icon === 'phone')       return phoneIcon('#22C55E');
    if (icon === 'phone-plus')  return <>{phoneIcon('#22C55E')}{phonePlus}</>;
    if (icon === 'email-plus')  return <>{emailIcon}{phonePlus}</>;
    if (icon === 'email')       return emailGreenIcon;
    return null;
  };

  return (
    <div className="erp-odoo erp-crmm">
      <MobileMockChrome title="Piltuvėlis" />

      {/* Stage bar with peek hints to neighbour stages */}
      <div className="erp-crmm-stagebar">
        <div className="erp-crmm-peek">
          <span className="erp-crmm-peek-add">+</span>
        </div>
        <div className="erp-crmm-stage">
          <div className="erp-crmm-stage-head">
            <span className="erp-crmm-stage-title">Pasiūlymas</span>
            <span className="erp-crmm-stage-actions">
              {cogIcon(13)}
              <span className="erp-crmm-stage-add">+</span>
            </span>
          </div>
          <div className="erp-crmm-stage-meta">
            <span className="erp-crmm-stage-bar">
              <span style={{background:'#22C55E', flex: 0.42}} />
              <span style={{background:'#EAB308', flex: 0.30}} />
              <span style={{background:'#EF4444', flex: 0.28}} />
            </span>
            <span className="erp-crmm-stage-alert">1</span>
            <span className="erp-crmm-stage-sum">{stageSum}</span>
          </div>
        </div>
        <div className="erp-crmm-peek erp-crmm-peek-r">
          <span className="erp-crmm-peek-add">+</span>
        </div>
      </div>

      {/* Cards */}
      <div className="erp-crmm-cards">
        {cards.map((c, i) => {
          const tc = tagColors[c.tagColor];
          return (
            <div key={i} className="erp-crmm-card">
              <div className="erp-crmm-card-head">
                <span className="erp-crmm-card-title">{c.title}</span>
                <span className="erp-crmm-card-kebab">{kebabIcon(14)}</span>
              </div>
              <div className="erp-crmm-card-amount">{c.amount}</div>
              {c.client && (
                <div className="erp-crmm-card-client">
                  {c.logo && <span className="erp-crmm-card-logo">{c.logo}</span>}
                  <span className="erp-crmm-card-client-name">{c.client}</span>
                </div>
              )}
              <span className="erp-crmm-card-tag" style={{background: tc.bg, color: tc.fg}}>{c.tag}</span>
              <div className="erp-crmm-card-foot">
                <span className="erp-crmm-card-foot-l">
                  <span className="erp-crmm-stars">
                    {[0,1,2].map(n => (
                      <svg key={n} width="14" height="14" viewBox="0 0 24 24" fill={n < c.stars ? '#FBBF24' : 'none'} stroke={n < c.stars ? '#FBBF24' : '#CBD5E1'} strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                    ))}
                  </span>
                  {renderCardIcon(c.icon)}
                </span>
                <span className="erp-crmm-card-foot-r">
                  {c.overdue && <span className="erp-crmm-card-overdue">{c.overdue}</span>}
                  <span className="erp-crmm-card-avatar">JV</span>
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DashboardMockMobilePirkimai() {
  // Compact mobile mockup for the Pirkimai (Purchases) tab — KPI grid + stats + card-style order list
  const k1a = useCounter(11, { duration: 1400 });
  const k1b = useCounter(1,  { duration: 1400 });
  const k1c = useCounter(12, { duration: 1400 });
  const k1d = useCounter(6,  { duration: 1400 });
  const k1e = useCounter(4,  { duration: 1400 });
  const k2a = useCounter(10, { duration: 1400 });
  const k2b = useCounter(1,  { duration: 1400 });
  const k2c = useCounter(11, { duration: 1400 });
  const k2d = useCounter(6,  { duration: 1400 });
  const k2e = useCounter(4,  { duration: 1400 });
  const s1 = useCounter(20,  { suffix: ' %', duration: 1400 });
  const s2 = useCounter(3.11, { decimals: 2, duration: 1400 });
  const s3 = useCounter(11,  { suffix: ' %', duration: 1400 });
  const s4 = useCounter(3.50, { decimals: 2, duration: 1400 });
  const am1 = useCounter(0,     { decimals: 2, suffix: ' €', duration: 1400 });
  const am2 = useCounter(100,   { decimals: 2, suffix: ' €', duration: 1400 });
  const am3 = useCounter(862.5, { decimals: 2, suffix: ' €', duration: 1400 });
  const am4 = useCounter(46,    { decimals: 2, suffix: ' €', duration: 1400 });
  const am5 = useCounter(276,   { decimals: 2, suffix: ' €', duration: 1400 });

  const allKpis = [
    { tone: 'blue',   num: k1a, lab: 'Naujas' },
    { tone: 'gray',   num: k1b, lab: 'Užklausa išsiųsta' },
    { tone: 'yellow', num: k1c, lab: 'Vėluojanti užkl.' },
    { tone: 'blue',   num: k1d, lab: 'Nepatvirtinta' },
    { tone: 'red',    num: k1e, lab: 'Vėluojantis priėmimas' },
  ];
  const myKpis = [k2a, k2b, k2c, k2d, k2e];

  const rows = [
    { nr: 'P00022', date: '05-01', supplier: 'Ready Mat',        amount: am1, status: 'order' },
    { nr: 'P00021', date: '05-01', supplier: 'Gemini Furniture', amount: am2, status: 'order' },
    { nr: 'P00020', date: '04-28', supplier: 'Wood Corner',      amount: am3, status: 'rfq' },
    { nr: 'P00019', date: '04-26', supplier: 'Wood Corner',      amount: am4, status: 'order' },
    { nr: 'P00018', date: '04-25', supplier: 'Wood Corner',      amount: am5, status: 'order' },
  ];

  const star = (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
  );
  const clock = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
  );

  return (
    <div className="erp-odoo erp-pum">
      <MobileMockChrome title="Komercinio pasiūlymo užkl…" withPager={true} />

      <div className="erp-pum-body">
        <div className="erp-pum-section-label">Visi</div>
        <div className="erp-pum-kpi-row">
          {allKpis.map((k, i) => (
            <span key={i} className={`erp-pum-kpi tone-${k.tone}`}>
              <span className="erp-pum-kpi-num">{k.num}</span>
              <span className="erp-pum-kpi-lab">{k.lab}</span>
            </span>
          ))}
        </div>

        <div className="erp-pum-section-label">Mano</div>
        <div className="erp-pum-kpi-row">
          {myKpis.map((n, i) => (
            <span key={i} className="erp-pum-kpi erp-pum-kpi-ghost">
              <span className="erp-pum-kpi-num erp-pum-kpi-num-sm">{n}</span>
            </span>
          ))}
        </div>

        <div className="erp-pum-section-label">Visi</div>
        <div className="erp-pum-stat-row">
          <div className="erp-pum-stat">
            <span className="erp-pum-stat-val">{s1}</span>
            <span className="erp-pum-stat-lab">Vėluoja (LAP)</span>
          </div>
          <div className="erp-pum-stat">
            <span className="erp-pum-stat-val">{s2}</span>
            <span className="erp-pum-stat-lab">Dienų iki užsakymo</span>
          </div>
        </div>

        <div className="erp-pum-section-label">Mano</div>
        <div className="erp-pum-stat-row">
          <div className="erp-pum-stat erp-pum-stat-ghost">
            <span className="erp-pum-stat-val erp-pum-stat-val-sm">{s3}</span>
          </div>
          <div className="erp-pum-stat erp-pum-stat-ghost">
            <span className="erp-pum-stat-val erp-pum-stat-val-sm">{s4}</span>
          </div>
        </div>

        <div className="erp-pum-list">
          {rows.map(r => (
            <div key={r.nr} className="erp-pum-row">
              <div className="erp-pum-row-head">
                <span className="erp-pum-row-supplier">
                  {star}
                  <span>{r.supplier}</span>
                </span>
                <span className="erp-pum-row-amount">{r.amount}</span>
              </div>
              <div className="erp-pum-row-meta">
                <span className="erp-pum-row-nr">{r.nr}</span>
                <span className="erp-pum-row-date">{r.date}</span>
                {clock}
                <span className={`erp-pum-row-status erp-pum-row-status-${r.status}`}>
                  {r.status === 'order' ? 'Pirkimo užsakymas' : 'Pirkimo užklausa'}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DashboardMockMobilePardavimai() {
  // Compact mobile mockup for the Pardavimai (Sales) tab — list-only, green status pills
  const am1 = useCounter(0.80,      { decimals: 2, suffix: ' €', duration: 1400 });
  const am2 = useCounter(690,       { decimals: 2, suffix: ' €', duration: 1400 });
  const am3 = useCounter(256691.50, { decimals: 2, suffix: ' €', duration: 1400 });
  const am4 = useCounter(1086.75,   { decimals: 2, suffix: ' €', duration: 1400 });
  const am5 = useCounter(1242,      { decimals: 2, suffix: ' €', duration: 1400 });
  const am6 = useCounter(184,       { decimals: 2, suffix: ' €', duration: 1400 });
  const am7 = useCounter(230,       { decimals: 2, suffix: ' €', duration: 1400 });

  const rows = [
    { nr: 'S00080', date: '05-01 11:57', client: 'Rediff Mail, Will McEncroe', amount: am1, activity: 'clock' },
    { nr: 'S00079', date: '05-01 11:48', client: 'Mitchell Admin',             amount: am2, activity: 'clock' },
    { nr: 'S00077', date: '05-01 09:06', client: 'Acme Corporation',           amount: am3, activity: 'clock' },
    { nr: 'S00073', date: '05-01 09:05', client: 'Acme Corporation',           amount: am4, activity: 'clock' },
    { nr: 'S00072', date: '05-01 09:05', client: 'Acme Corporation',           amount: am5, activity: 'clock' },
    { nr: 'S00071', date: '05-01 09:05', client: 'Marc Demo',                  amount: am6, activity: 'clock' },
    { nr: 'S00070', date: '05-01 09:05', client: 'Joel Willis',                amount: am7, activity: 'call' },
  ];

  const clockIcon = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
  );
  const callIcon = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
  );

  return (
    <div className="erp-odoo erp-sam">
      <MobileMockChrome title="Komerciniai pasiūlymai" withPager={true} />

      <div className="erp-pum-body erp-sam-body">
        <div className="erp-pum-list erp-sam-list">
          {rows.map(r => (
            <div key={r.nr} className="erp-pum-row">
              <div className="erp-pum-row-head">
                <span className="erp-pum-row-supplier">
                  <span>{r.client}</span>
                </span>
                <span className="erp-pum-row-amount">{r.amount}</span>
              </div>
              <div className="erp-pum-row-meta">
                <span className="erp-pum-row-nr">{r.nr}</span>
                <span className="erp-pum-row-date">{r.date}</span>
                {r.activity === 'call' ? callIcon : clockIcon}
                <span className="erp-pum-row-status erp-pum-row-status-sale">
                  Pardavimo užsakymas
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DashboardMockMobileAtsargos() {
  // Compact mobile mockup for the Atsargos (Inventory) tab — single-column product list with right-side image
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);
  const products = [
    { name: 'Juodas stalčiaus dėklas',           code: 'FURN_5623', price: 20.00,    qty: 45.00,  icon: 'archive',  bg: '#0F172A', fg: '#FFD143' },
    { name: 'Juodas stalčius',                   code: 'FURN_2100', price: 24.00,    qty: 45.00,  icon: 'archive',  bg: '#0F172A', fg: '#FFD143' },
    { name: 'Juodas stalčius',                   code: 'FURN_8900', price: 25.00,    qty: 0.00,   icon: 'archive',  bg: '#FEF3C7', fg: '#92400E' },
    { name: 'Kampinis kairėje sėdimas rašomasis stalas', code: 'FURN_1118', price: 85.00, qty: 2.00, icon: 'square', bg: '#FEF3C7', fg: '#92400E' },
    { name: 'Keturių žmonių stalas',             code: 'FURN_8220', price: 2350.00,  qty: 20.00,  icon: 'square',   bg: '#F1F5F9', fg: '#475569' },
    { name: 'Kiaulienos burgeris',               code: 'FOOD_0001', price: 15.50,    qty: 120.00, icon: 'utensils', bg: '#FEE2E2', fg: '#DC2626' },
  ];
  // Animate prices and quantities
  const priceCounters = [
    useCounter(20.00,   { decimals: 2, duration: 1400 }),
    useCounter(24.00,   { decimals: 2, duration: 1400 }),
    useCounter(25.00,   { decimals: 2, duration: 1400 }),
    useCounter(85.00,   { decimals: 2, duration: 1400 }),
    useCounter(2350.00, { decimals: 2, duration: 1400 }),
    useCounter(15.50,   { decimals: 2, duration: 1400 }),
  ];
  const qtyCounters = [
    useCounter(45.00,   { decimals: 2, duration: 1400 }),
    useCounter(45.00,   { decimals: 2, duration: 1400 }),
    useCounter(0,       { decimals: 2, duration: 1400 }),
    useCounter(2.00,    { decimals: 2, duration: 1400 }),
    useCounter(20.00,   { decimals: 2, duration: 1400 }),
    useCounter(120.00,  { decimals: 2, duration: 1400 }),
  ];

  return (
    <div className="erp-odoo erp-iam">
      <MobileMockChrome title="Produktai" />

      <div className="erp-iam-list">
        {products.map((p, i) => (
          <div key={p.code} className="erp-iam-row">
            <div className="erp-iam-row-body">
              <div className="erp-iam-row-head">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                <span className="erp-iam-row-name">{p.name}</span>
              </div>
              <div className="erp-iam-row-code">[{p.code}]</div>
              <div className="erp-iam-row-meta">
                <div>Kaina: <strong>€ {priceCounters[i]}</strong></div>
                <div>Turima: <strong>{qtyCounters[i]}</strong> Vienetai</div>
              </div>
            </div>
            <div className="erp-iam-row-img" style={{background: p.bg, color: p.fg}}>
              <i data-lucide={p.icon} style={{width: 36, height: 36}}></i>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockMobileProjektai() {
  // Compact mobile mockup for the Projektai (Projects) tab — single-column project cards with tags, dates, footer meta
  const cards = [
    { title: 'Namo statyba',      accent: 'navy',
      contact: 'Acme Corporation', dates: '03-01 → 04-26',
      tags: [
        { label: 'Architektūra', tone: 'peach' },
        { label: 'Statyba',      tone: 'teal' },
        { label: 'Dizainas',     tone: 'purple' },
        { label: 'Interjeras',   tone: 'lavender' },
      ],
      count: '10', countLabel: 'Užduotys', flag: '1/3',
      icons: ['dollar', 'clock'], avatars: ['JV'], dot: 'green' },
    { title: 'Biuro dizainas',    accent: 'yellow',
      contact: 'Joel Willis', dates: '02-27 → 05-08',
      tags: [{ label: 'Išorinis', tone: 'red' }],
      count: '22', countLabel: 'Užduotys', flag: '1/3',
      icons: ['clock'], avatars: ['JW'], dot: 'green' },
    { title: 'Renovacijos',       accent: 'blue',
      contact: null, dates: '03-01 → 04-26',
      tags: [
        { label: 'Eksperimentas', tone: 'green' },
        { label: 'Vidinis',       tone: 'purple' },
      ],
      count: '3', countLabel: 'Užduotys',
      icons: ['dollar', 'clock'], avatars: ['JV'], dot: 'navy' },
    { title: 'Tyrimai ir plėtra', accent: 'navy',
      contact: null, dates: null,
      tags: [{ label: 'Vidinis', tone: 'purple' }],
      count: '6', countLabel: 'Užduotys',
      icons: ['group'], avatars: [], dot: 'blue' },
  ];

  const tagTones = {
    peach:    { bg: '#FED7AA', fg: '#9A3412' },
    teal:     { bg: '#A7F3D0', fg: '#065F46' },
    purple:   { bg: '#E9D5FF', fg: '#6B21A8' },
    lavender: { bg: '#DDD6FE', fg: '#5B21B6' },
    red:      { bg: '#FECACA', fg: '#991B1B' },
    green:    { bg: '#BBF7D0', fg: '#166534' },
  };
  const dotColor = (d) => ({ gray:'#CBD5E1', green:'#16A34A', blue:'var(--erp-freedom)', orange:'#F97316', red:'#EF4444', navy:'var(--erp-maastricht)' })[d] || '#CBD5E1';
  const accentColor = (a) => ({ navy:'var(--erp-maastricht)', yellow:'#F59E0B', blue:'var(--erp-freedom)', orange:'#FB923C' })[a] || 'transparent';

  const personIcon = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="#CBD5E1"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
  );
  const clockSm = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
  );
  const arrowSm = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
  );
  const flagIcon = (
    <svg width="10" height="11" viewBox="0 0 24 24" fill="#16A34A"><path d="M4 22V4a1 1 0 0 1 1-1h13l-2 4 2 4H6v11H4z"/></svg>
  );
  const groupIcon = (
    <svg width="13" height="11" viewBox="0 0 24 24" fill="#16A34A"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
  );
  const renderIcon = (k) => {
    if (k === 'dollar') return <span className="erp-prm-icon-dollar">$</span>;
    if (k === 'clock')  return clockSm;
    if (k === 'group')  return groupIcon;
    return null;
  };

  // Animate task counts
  const counters = cards.map(c => useCounter(parseInt(c.count, 10), { duration: 1400 }));

  return (
    <div className="erp-odoo erp-prm">
      <MobileMockChrome title="Projektai" />

      <div className="erp-prm-list">
        {cards.map((c, i) => (
          <div key={i} className="erp-prm-row" style={{ borderLeftColor: accentColor(c.accent) }}>
            <div className="erp-prm-row-head">
              <span className="erp-prm-row-title">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="#FBBF24" stroke="#FBBF24" strokeWidth="1.5"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                <span>{c.title}</span>
              </span>
              <span className="erp-prm-row-kebab">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="6" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="18" r="1.5"/></svg>
              </span>
            </div>

            {c.contact && (
              <div className="erp-prm-row-meta-line">
                {personIcon}
                <span>{c.contact}</span>
              </div>
            )}
            {c.dates && (
              <div className="erp-prm-row-meta-line">
                {clockSm}
                <span>{c.dates.split('→')[0].trim()}</span>
                {arrowSm}
                <span>{c.dates.split('→')[1].trim()}</span>
              </div>
            )}

            {c.tags.length > 0 && (
              <div className="erp-prm-row-tags">
                {c.tags.map((t, j) => (
                  <span key={j} className="erp-prm-row-tag" style={{ background: tagTones[t.tone].bg, color: tagTones[t.tone].fg }}>{t.label}</span>
                ))}
              </div>
            )}

            <div className="erp-prm-row-foot">
              <span className="erp-prm-row-foot-l">
                <span className="erp-prm-count">
                  <strong>{counters[i]}</strong> {c.countLabel}
                </span>
                {c.flag && (
                  <span className="erp-prm-flag">{flagIcon}<span>{c.flag}</span></span>
                )}
                {c.icons.map((k, j) => <span key={j} className="erp-prm-foot-icon">{renderIcon(k)}</span>)}
              </span>
              <span className="erp-prm-row-foot-r">
                {c.avatars.map((a, j) => <span key={j} className="erp-prm-avatar">{a}</span>)}
                <span className="erp-prm-row-dot" style={{ background: dotColor(c.dot) }} />
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockMobilePrieziura() {
  // Compact mobile mockup for the Priežiūra (Maintenance) tab — equipment list with active filter chip
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);

  const items = [
    { name: 'Eigos variklis',           model: 'Buehler ECOMET30 49-10070', serial: 'EC30SM-190381', person: 'Administrator', requests: 2, action: 'avatar', icon: 'cog',     bg: '#F1F5F9', fg: '#475569' },
    { name: 'Alkotesteris Dräger Alcotest 7000', model: 'Li-ion akumuliatorius', serial: '7000/123', person: 'Marius',         requests: 3, action: 'upload', icon: 'battery-medium', bg: '#0F172A', fg: '#F1F5F9' },
    { name: 'Eigos variklis NK3700',    model: 'Buehler ECOMET30 49-10070', serial: null,            person: 'Karolis',       requests: 1, action: 'clock',  icon: 'cog',     bg: '#F1F5F9', fg: '#475569' },
    { name: 'Sandėlio lentynos KLP',    model: null,                        serial: null,            person: 'Karolis',       requests: 1, action: 'clock',  icon: 'package', bg: '#DBEAFE', fg: '#1E40AF' },
  ];

  return (
    <div className="erp-odoo erp-mam">
      <MobileMockChrome title="Įranga" withPager={true} />

      {/* Active search/filter row */}
      <div className="erp-mam-filter">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <span className="erp-mam-filter-chip">
          Vykdoma priežiūra
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </span>
        <span className="erp-mam-filter-placeholder">Ieškoti…</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
      </div>

      <div className="erp-mam-list">
        {items.map((it, i) => (
          <div key={i} className="erp-mam-row">
            <div className="erp-mam-row-body">
              <div className="erp-mam-row-name">
                {it.name}
                {it.model && <span className="erp-mam-row-model"> ({it.model})</span>}
              </div>
              <div className="erp-mam-row-sub">
                {it.serial && <span>{it.serial}</span>}
                <span className="erp-mam-row-person">{it.person}</span>
              </div>
              <div className="erp-mam-row-foot">
                <span className="erp-mam-badge">{it.requests} {it.requests === 1 ? 'Užklausa' : 'Užklausos'}</span>
                <span className="erp-mam-row-foot-r">
                  {it.action === 'avatar' && (
                    <>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                      <span className="erp-mam-row-avatar">A</span>
                    </>
                  )}
                  {it.action === 'upload' && (
                    <span className="erp-mam-row-upload">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="#EF4444" stroke="#EF4444" strokeWidth="2" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="#FFFFFF"/></svg>
                    </span>
                  )}
                  {it.action === 'clock' && (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                  )}
                </span>
              </div>
            </div>
            <div className="erp-mam-row-img" style={{background: it.bg, color: it.fg}}>
              <i data-lucide={it.icon} style={{width: 36, height: 36}}></i>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DashboardMockMobileApskaita() {
  // Compact mobile mockup for the Apskaita (Accounting → Sąskaitos-faktūros) tab — invoice list
  const am1 = useCounter(0.80,    { decimals: 2, suffix: ' €', duration: 1400 });
  const am2 = useCounter(34.50,   { decimals: 2, suffix: ' €', duration: 1400 });
  const am3 = useCounter(207,     { decimals: 2, suffix: ' €', duration: 1400 });
  const am4 = useCounter(750,     { decimals: 2, suffix: ' €', duration: 1400 });
  const am5 = useCounter(36512.50, { decimals: 2, suffix: ' €', duration: 1400 });
  const am6 = useCounter(48012.50, { decimals: 2, suffix: ' €', duration: 1400 });
  const am7 = useCounter(22137.50, { decimals: 2, suffix: ' €', duration: 1400 });

  const rows = [
    { nr: 'INV/2026/00012', date: '05-01', client: 'Rediff Mail, Will McEncroe', amount: am1, activity: 'clock',     status: 'paying',  statusLabel: 'Mokėjime' },
    { nr: 'INV/2026/00011', date: '05-01', client: 'Joel Willis',                amount: am2, activity: 'phone-green', status: 'sent',    statusLabel: 'Išsiųsta' },
    { nr: 'INV/2026/00010', date: '05-01', client: 'Joel Willis',                amount: am3, activity: 'clock',     status: 'sent',    statusLabel: 'Išsiųsta' },
    { nr: 'INV/2026/00008', date: '05-01', client: 'LightsUp',                   amount: am4, activity: 'clock',     status: 'sent',    statusLabel: 'Dalinai apmokėta' },
    { nr: 'INV/2026/00001', date: '05-01', client: 'Azure Interior',             amount: am5, activity: 'check',     status: 'sent',    statusLabel: 'Registruotas' },
    { nr: 'INV/2026/00002', date: '04-29', client: 'Acme Corporation',           amount: am6, activity: 'phone-red', status: 'paying',  statusLabel: 'Mokėjime' },
    { nr: 'INV/2026/00003', date: '04-28', client: 'Acme Corporation',           amount: am7, activity: 'check',     status: 'sent',    statusLabel: 'Registruotas' },
  ];

  const clockIcon = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
  );
  const phoneGreen = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
  );
  const phoneRed = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#EF4444" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
  );
  const checkGreen = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
  );
  const renderActivity = (a) => {
    if (a === 'clock') return clockIcon;
    if (a === 'phone-green') return phoneGreen;
    if (a === 'phone-red') return phoneRed;
    if (a === 'check') return checkGreen;
    return null;
  };

  return (
    <div className="erp-odoo erp-aam">
      <MobileMockChrome title="Sąskaitos-faktūros" withPager={true} />

      <div className="erp-pum-body">
        <div className="erp-pum-list">
          {rows.map(r => (
            <div key={r.nr} className="erp-pum-row">
              <div className="erp-pum-row-head">
                <span className="erp-pum-row-supplier">
                  <span>{r.client}</span>
                </span>
                <span className="erp-pum-row-amount">{r.amount}</span>
              </div>
              <div className="erp-pum-row-meta">
                <span className="erp-aam-row-nr">{r.nr}</span>
                <span className="erp-pum-row-date">{r.date}</span>
                {renderActivity(r.activity)}
                <span className={`erp-pum-row-status erp-pum-row-status-${r.status}`}>
                  {r.statusLabel}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DashboardMockMobileGamyba() {
  // Compact mobile mockup for the Gamyba (Manufacturing) tab — week-grouped manufacturing orders
  const totalH = useCounter(6, { duration: 1400 });

  const orders = [
    { nr: 'WH/MO/00001', code: 'FURN_7800', product: 'Stalo kombinacija', qty: '3,00', status: 'confirmed', dur: '3h 0min.', comp: { kind: 'red',   text: 'Exp geg. 10' } },
    { nr: 'WH/MO/00003', code: 'FURN_8522', product: 'Stalo viršus',      qty: '1,00', status: 'confirmed', dur: '1h 0min.', comp: { kind: 'green', text: 'Pasiekiamas' } },
    { nr: 'WH/MO/00004', code: 'FURN_8855', product: 'Stalčius',          qty: '5,00', status: 'done',      dur: null,       comp: null },
    { nr: 'WH/MO/00007', code: 'FURN_8855', product: 'Stalčius',          qty: '5,00', status: 'confirmed', dur: null,       comp: { kind: 'green', text: 'Pasiekiamas' } },
    { nr: 'WH/MO/00008', code: null,       product: 'Valgomojo stalas',    qty: '5,00', status: 'done',      dur: null,       comp: null },
  ];

  const star = (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
  );
  const clockSm = (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
  );
  const hourglass = (
    <svg width="11" height="13" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M6 2h12v4l-5 6 5 6v4H6v-4l5-6L6 6V2z"/></svg>
  );
  const compIcon = (color) => (
    <svg width="13" height="13" viewBox="0 0 24 24" fill={color} stroke={color} strokeWidth="1.5"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18L19.82 8 12 11.82 4.18 8 12 4.18zM4 9.82l7 3.5v7.36l-7-3.5V9.82zm9 10.86v-7.36l7-3.5v7.36l-7 3.5z"/></svg>
  );

  return (
    <div className="erp-odoo erp-gam">
      <MobileMockChrome title="Gamybos užsakymai" />

      <div className="erp-gam-body">
        {/* Week group header */}
        <div className="erp-gam-week">
          <div className="erp-gam-week-head">
            <span className="erp-gam-week-title">W18 2026</span>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </div>
          <div className="erp-gam-week-meta">
            <span className="erp-gam-week-bar">
              <span style={{background:'#06B6D4', flex: 0.45}} />
              <span style={{background:'#22C55E', flex: 0.40}} />
              <span style={{background:'#E2E8F0', flex: 0.15}} />
            </span>
            <span className="erp-gam-week-total"><strong>{totalH}h</strong> 0min.</span>
          </div>
        </div>

        {/* Orders */}
        <div className="erp-gam-list">
          {orders.map(o => (
            <div key={o.nr} className="erp-gam-row">
              <div className="erp-gam-row-head">
                <span className="erp-gam-row-nr">
                  <strong>{o.nr}</strong>
                  {o.code && <span className="erp-gam-row-code"> {o.code}</span>}
                </span>
                <span className={`erp-gam-status erp-gam-status-${o.status}`}>
                  {o.status === 'done' ? 'Atlikta' : 'Patvirtinti'}
                </span>
              </div>
              <div className="erp-gam-row-body">
                <span className="erp-gam-row-product">{o.product}</span>
                <span className="erp-gam-row-qty">{o.qty} Vienetai</span>
              </div>
              <div className="erp-gam-row-foot">
                <span className="erp-gam-row-foot-l">
                  {star}
                  {clockSm}
                  {o.dur && (
                    <span className="erp-gam-row-dur">
                      {hourglass}
                      <span>{o.dur}</span>
                    </span>
                  )}
                  {o.comp && (
                    <span className={`erp-gam-comp erp-gam-comp-${o.comp.kind}`}>
                      {compIcon(o.comp.kind === 'red' ? '#EF4444' : '#16A34A')}
                      <span>{o.comp.text}</span>
                    </span>
                  )}
                </span>
                <span className="erp-gam-row-avatar">A</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DashboardMockMobileSkydeliai() {
  // Compact mobile mockup for the Skydeliai (Dashboards) tab — KPI cards + line chart
  const closeRate = useCounter(7,     { suffix: '%',     duration: 1400 });
  const dealSize  = useCounter(7933,  { prefix: '€ ',    duration: 1600 });
  const revenue   = useCounter(23800, { prefix: '€ ',    duration: 1600 });
  const daysToWin = useCounter(4,     { duration: 1200 });
  const daysAssign = useCounter(8.7,  { decimals: 1, duration: 1200 });

  const kpis = [
    { tone: 'blue',  label: 'Uždarymo dažnis',     value: closeRate, sub: '0% praėjusį laikotarpį', subTone: 'gray' },
    { tone: 'peach', label: 'Vid. sandorio dydis', value: dealSize,  sub: 'nuo praėjusio laikotarpio', subTone: 'green', arrow: '∞' },
    { tone: 'peach', label: 'Pajamos',             value: revenue,   sub: 'nuo praėjusio laikotarpio', subTone: 'green', arrow: '∞' },
    { tone: 'pink',  label: 'Dienų iki laimėjimo', value: daysToWin, suffix: ' d.', sub: '0 praėjęs laikotarpis', subTone: 'gray' },
    { tone: 'pink',  label: 'Dienos priskyrimui',  value: daysAssign, suffix: ' d.', sub: '0 praėjęs laikotarpis', subTone: 'gray' },
  ];

  // Chart data — 3 monthly leads
  const chartData = [
    { x: 'vasario 2026', y: 1 },
    { x: 'kovo 2026',    y: 9 },
    { x: 'balandžio 2026', y: 34 },
  ];
  const chartW = 320, chartH = 180, padL = 30, padR = 16, padT = 12, padB = 28;
  const yMax = 35;
  const xs = chartData.map((_, i) => padL + i * (chartW - padL - padR) / (chartData.length - 1));
  const ys = chartData.map(d => chartH - padB - (d.y / yMax) * (chartH - padT - padB));
  const linePath = chartData.map((_, i) => `${i === 0 ? 'M' : 'L'} ${xs[i].toFixed(1)} ${ys[i].toFixed(1)}`).join(' ');
  const areaPath = `${linePath} L ${xs[xs.length-1].toFixed(1)} ${(chartH - padB).toFixed(1)} L ${xs[0].toFixed(1)} ${(chartH - padB).toFixed(1)} Z`;

  return (
    <div className="erp-odoo erp-skm">
      <MobileMockChrome title="Informacijos suvestinės" noActions={true} />

      {/* Filter / share row */}
      <div className="erp-skm-filter">
        <div className="erp-skm-filter-left">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#475569" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>
          <span>Potencialūs klientai</span>
        </div>
        <div className="erp-skm-filter-right">
          <span className="erp-skm-share">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#475569" strokeWidth="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
            <span>Dalintis</span>
          </span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--erp-maastricht)" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        </div>
      </div>

      {/* Date range */}
      <div className="erp-skm-daterow">
        <span className="erp-skm-datechip">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
          Paskutiniai 12 mėnesių
        </span>
        <span className="erp-skm-pager">
          <button aria-label="Atgal"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 18l-6-6 6-6"/></svg></button>
          <button aria-label="Pirmyn"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 18l6-6-6-6"/></svg></button>
        </span>
      </div>

      {/* KPI grid */}
      <div className="erp-skm-kpi-grid">
        {kpis.map((k, i) => (
          <div key={i} className={`erp-skm-kpi tone-${k.tone}`}>
            <div className="erp-skm-kpi-label">{k.label}</div>
            <div className="erp-skm-kpi-value">{k.value}{k.suffix || ''}</div>
            <div className={`erp-skm-kpi-sub erp-skm-kpi-sub-${k.subTone}`}>
              {k.arrow && <span className="erp-skm-kpi-arrow">↑{k.arrow}%</span>}
              {!k.arrow && <span className="erp-skm-kpi-arrow erp-skm-kpi-arrow-mute">↑0%</span>}
              <span> {k.sub}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Chart */}
      <div className="erp-skm-chart">
        <div className="erp-skm-chart-head">
          <span className="erp-skm-chart-filter">
            Mėnesiai
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
          </span>
        </div>
        <svg width="100%" height={chartH + 28} viewBox={`0 0 ${chartW} ${chartH + 28}`} preserveAspectRatio="xMidYMid meet">
          {/* Y label */}
          <text x="6" y={(chartH - padB) / 2 + padT} fill="#475569" fontSize="9" transform={`rotate(-90, 6, ${(chartH - padB) / 2 + padT})`}>Potencialūs</text>
          {/* Grid lines */}
          {[0, 5, 10, 15, 20, 25, 30, 35].map(v => {
            const y = chartH - padB - (v / yMax) * (chartH - padT - padB);
            return (
              <g key={v}>
                <line x1={padL} y1={y} x2={chartW - padR} y2={y} stroke="#E2E8F0" strokeWidth="0.5" />
                <text x={padL - 4} y={y + 3} fontSize="9" fill="#94A3B8" textAnchor="end">{v}</text>
              </g>
            );
          })}
          {/* Area */}
          <path d={areaPath} fill="rgba(0,128,255,0.18)" />
          {/* Line */}
          <path d={linePath} fill="none" stroke="var(--erp-freedom)" strokeWidth="2" />
          {/* Dots */}
          {xs.map((x, i) => (
            <circle key={i} cx={x} cy={ys[i]} r="3.5" fill="#FFFFFF" stroke="var(--erp-freedom)" strokeWidth="2" />
          ))}
          {/* X axis labels */}
          {chartData.map((d, i) => (
            <text key={i} x={xs[i]} y={chartH - 8} fontSize="9" fill="#475569" textAnchor="middle">{d.x}</text>
          ))}
        </svg>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Footer, CTASection, DashboardMock, DashboardMockMobileCRM, DashboardMockPirkimai, DashboardMockMobilePirkimai, DashboardMockPardavimai, DashboardMockMobilePardavimai, DashboardMockApskaita, DashboardMockMobileApskaita, DashboardMockSaskaitos, DashboardMockSkydeliai, DashboardMockMobileSkydeliai, DashboardMockProjektai, DashboardMockMobileProjektai, DashboardMockGamyba, DashboardMockMobileGamyba, DashboardMockAtsargos, DashboardMockMobileAtsargos, DashboardMockPrieziura, DashboardMockMobilePrieziura, LogoMark, MockShell, MockInvoices, MockWarehouse, MockKanban, MockGantt, MockHR, MockShop, MockMfg, MockReports });

function LogoMark({ height = 28, inverse = false }) {
  const textColor = inverse ? '#FFFFFF' : '#022C4A';
  const size = height;
  return (
    <span style={{display: 'inline-flex', alignItems: 'center', gap: Math.round(size * 0.35), lineHeight: 1}}>
      <svg width={size} height={size} viewBox="0 0 96 96" aria-label="ERP365" role="img" style={{flexShrink: 0}}>
        <rect x="0" y="0" width="96" height="96" rx="20" fill="#0080FF"/>
        <rect x="18" y="18" width="26" height="26" rx="5" fill="#FFFFFF"/>
        <rect x="52" y="18" width="26" height="26" rx="5" fill="#FFFFFF"/>
        <rect x="18" y="52" width="26" height="26" rx="5" fill="#FFFFFF"/>
        <rect x="52" y="52" width="26" height="26" rx="5" fill="#FFD143"/>
        <rect x="61" y="61" width="8" height="8" rx="2" fill="#022C4A"/>
      </svg>
      <span style={{
        fontFamily: 'var(--erp-font-display)',
        fontWeight: 800,
        fontSize: Math.round(size * 0.72),
        letterSpacing: '-0.03em',
        color: textColor,
      }}>ERP365</span>
    </span>
  );
}