// SalusVita Tech showcase section + product mock

function SalusMock() {
  const items = [
    { id: 'paneis', label: 'Painel geral', on: true },
    { id: 'pacientes', label: 'Pacientes' },
    { id: 'cardapios', label: 'Cardápios' },
    { id: 'producao', label: 'Produção' },
    { id: 'distrib', label: 'Distribuição' },
    { id: 'relat', label: 'Relatórios' }
  ];
  const stats = [
    { k: 'Refeições / dia', v: '1.842', d: '+4,2%' },
    { k: 'Aderência', v: '98,1%', d: '+1,3%' },
    { k: 'Desperdício', v: '3,4%', d: '−2,0%' }
  ];
  const rows = [
    { i: 'MA', n: 'Maria Andrade · 312A', tag: 'Hipossódica', tagk: 'ok',  num: '1.840 kcal' },
    { i: 'JC', n: 'João Carvalho · 304B', tag: 'Diabética',   tagk: 'warn', num: '1.620 kcal' },
    { i: 'BS', n: 'Beatriz Silva · 218',  tag: 'Enteral',     tagk: 'crit', num: '1.500 kcal' },
    { i: 'RN', n: 'Renata Nunes · 410',   tag: 'Geral',       tagk: 'ok',  num: '2.000 kcal' },
    { i: 'PA', n: 'Pedro Alves · 105',    tag: 'Branda',      tagk: 'ok',  num: '1.750 kcal' }
  ];
  return (
    <div className="salus__mock">
      <div className="mock__bar">
        <span className="mock__dots"><span /><span /><span /></span>
        <span className="mock__url">salusvitatech.com.br / dashboard</span>
        <span style={{ width: 36 }} />
      </div>
      <div className="mock__body">
        <aside className="mock__side">
          <div className="mock__side-h">Operação</div>
          {items.slice(0, 3).map((i) => (
            <div key={i.id} className={"mock__side-i" + (i.on ? " is-on" : "")}>
              <span className="dot" />{i.label}
            </div>
          ))}
          <div className="mock__side-h">Gestão</div>
          {items.slice(3).map((i) => (
            <div key={i.id} className="mock__side-i"><span className="dot" />{i.label}</div>
          ))}
        </aside>
        <div className="mock__main">
          <div className="mock__crumbs">Hospital · Ala Sul <span>/ Hoje · 12:40</span></div>
          <div className="mock__h">Painel nutricional — Almoço</div>
          <div className="mock__stats">
            {stats.map((s, i) => (
              <div className="mock__stat" key={i}>
                <div className="mock__stat-k">{s.k}</div>
                <div className="mock__stat-v">{s.v}</div>
                <div className="mock__stat-d">{s.d}</div>
              </div>
            ))}
          </div>
          <div className="mock__rows">
            {rows.map((r, i) => (
              <div className="mock__row" key={i}>
                <div className="av">{r.i}</div>
                <div>{r.n}</div>
                <div className={"tag " + r.tagk}>{r.tag}</div>
                <div className="num">{r.num}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Salus({ t }) {
  return (
    <section className="salus" id="salus">
      <div className="salus__bg" />
      <div className="shell salus__inner">
        <div className="reveal">
          <div className="salus__chip">
            <span className="salus__chip-mark">SV</span>
            {t.salus.chip}
          </div>
          <h2 className="salus__title">
            {t.salus.title_a} <em>{t.salus.title_em}</em> {t.salus.title_b}
          </h2>
          <p className="salus__desc">{t.salus.desc}</p>
          <ul className="salus__list">
            {t.salus.list.map((it, i) => (
              <li key={i}><Icon.Check /> {it}</li>
            ))}
          </ul>
          <div className="salus__actions">
            <a href="https://salusvitatech.com.br/" target="_blank" rel="noopener" className="btn btn--accent">
              {t.salus.ctaPrimary} <Icon.ArrowOut />
            </a>
            <a href="#contato" className="btn">{t.salus.ctaSecondary}</a>
          </div>
        </div>
        <div className="reveal" style={{ '--reveal-delay': '120ms' }}>
          <SalusMock />
        </div>
      </div>
    </section>
  );
}

window.Salus = Salus;