// Operations & Analytics section: inventory optimization, warehouse,
// logistics, accounting integrations + KPI dashboards.
function OpsAnalytics({ lang }) {
  const t = window.I18N[lang];
  const o = t.ops;

  // 12-week trendline data (synthetic but realistic)
  const trend = [42,46,44,51,49,55,58,62,60,67,72,78];
  const max = Math.max(...trend);
  const w = 320, h = 100, pad = 6;
  const stepX = (w - pad*2) / (trend.length - 1);
  const points = trend.map((v, i) => `${pad + i*stepX},${h - pad - (v / max) * (h - pad*2)}`).join(" ");
  const areaPoints = `${pad},${h-pad} ${points} ${pad + (trend.length-1)*stepX},${h-pad}`;

  // donut: warehouse fill rate
  const fill = 86;
  const C = 2 * Math.PI * 42;
  const offset = C - (fill / 100) * C;

  return (
    <section className="section ops-section" id="ops">
      <div className="wrap">
        <div className="section-head services-head">
          <div className="services-head-visual">
            <span className="eyebrow">{o.eyebrow}</span>
            <div className="services-photo">
              <img
                src="https://images.unsplash.com/photo-1553413077-190dd305871c?auto=format&fit=crop&w=900&q=80"
                alt={lang === "es" ? "Almacén con sistemas de inventario" : "Warehouse with inventory systems"}
                loading="lazy"
              />
              <div className="services-photo-overlay"></div>
              <div className="services-photo-tag">
                <span className="dot"></span>
                {lang === "es" ? "OPS · ANALÍTICA · ERP" : "OPS · ANALYTICS · ERP"}
              </div>
            </div>
          </div>
          <div>
            <h2>{o.title} <span className="accent">{o.titleAccent}</span></h2>
            <p className="desc" style={{ marginTop: 24 }}>{o.desc}</p>
          </div>
        </div>

        {/* Pillars row */}
        <div className="ops-pillars">
          {o.pillars.map((p, i) => (
            <div className="ops-pillar" key={i}>
              <div className="ops-pillar-num">0{i+1}</div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>

        {/* Dashboard mockup */}
        <div className="ops-dash">
          <div className="ops-dash-head">
            <div className="ops-dash-title">
              <span className="ops-dash-dot"></span>
              <span className="ops-dash-name">amaac · ops console</span>
              <span className="ops-dash-meta">{o.dash.live}</span>
            </div>
            <div className="ops-dash-tabs">
              <span className="on">{o.dash.tabs[0]}</span>
              <span>{o.dash.tabs[1]}</span>
              <span>{o.dash.tabs[2]}</span>
              <span>{o.dash.tabs[3]}</span>
            </div>
          </div>

          <div className="ops-dash-grid">
            {/* KPI row */}
            <div className="ops-kpi-row">
              {o.kpis.map((k, i) => (
                <div className="ops-kpi" key={i}>
                  <div className="ops-kpi-label">{k.label}</div>
                  <div className="ops-kpi-num">{k.v}</div>
                  <div className={`ops-kpi-delta ${k.up ? "up" : "down"}`}>
                    {k.up ? "▲" : "▼"} {k.d}
                  </div>
                </div>
              ))}
            </div>

            {/* Chart card */}
            <div className="ops-card ops-chart">
              <div className="ops-card-head">
                <div>
                  <div className="ops-card-eyebrow">{o.dash.chart.eye}</div>
                  <div className="ops-card-title">{o.dash.chart.title}</div>
                </div>
                <div className="ops-card-pill">+18% WoW</div>
              </div>
              <svg viewBox={`0 0 ${w} ${h}`} className="ops-svg" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="opsGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#00b5ff" stopOpacity="0.45"/>
                    <stop offset="100%" stopColor="#00b5ff" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                {[0,1,2,3].map(i => (
                  <line key={i} x1={pad} x2={w-pad}
                    y1={pad + i*((h-pad*2)/3)} y2={pad + i*((h-pad*2)/3)}
                    stroke="rgba(255,255,255,0.05)" strokeDasharray="2 4"/>
                ))}
                <polygon points={areaPoints} fill="url(#opsGrad)"/>
                <polyline points={points} fill="none" stroke="#00b5ff" strokeWidth="1.8"/>
                {trend.map((v, i) => (
                  <circle key={i}
                    cx={pad + i*stepX}
                    cy={h - pad - (v/max)*(h-pad*2)}
                    r={i === trend.length-1 ? 3.5 : 2}
                    fill={i === trend.length-1 ? "#00b5ff" : "#0a0e15"}
                    stroke="#00b5ff" strokeWidth="1.4"/>
                ))}
              </svg>
              <div className="ops-chart-axis">
                <span>W1</span><span>W4</span><span>W8</span><span>W12</span>
              </div>
            </div>

            {/* Donut card */}
            <div className="ops-card ops-donut-card">
              <div className="ops-card-head">
                <div>
                  <div className="ops-card-eyebrow">{o.dash.donut.eye}</div>
                  <div className="ops-card-title">{o.dash.donut.title}</div>
                </div>
              </div>
              <div className="ops-donut-wrap">
                <svg viewBox="0 0 100 100" className="ops-donut">
                  <circle cx="50" cy="50" r="42" stroke="rgba(255,255,255,0.08)" strokeWidth="9" fill="none"/>
                  <circle cx="50" cy="50" r="42"
                    stroke="#00b5ff" strokeWidth="9" fill="none"
                    strokeLinecap="round"
                    strokeDasharray={C}
                    strokeDashoffset={offset}
                    transform="rotate(-90 50 50)"/>
                </svg>
                <div className="ops-donut-center">
                  <div className="ops-donut-num">{fill}%</div>
                  <div className="ops-donut-sub">{o.dash.donut.sub}</div>
                </div>
              </div>
              <div className="ops-donut-legend">
                <div><span className="d on"></span>{o.dash.donut.legend[0]}</div>
                <div><span className="d"></span>{o.dash.donut.legend[1]}</div>
              </div>
            </div>

            {/* Table card */}
            <div className="ops-card ops-table">
              <div className="ops-card-head">
                <div>
                  <div className="ops-card-eyebrow">{o.dash.table.eye}</div>
                  <div className="ops-card-title">{o.dash.table.title}</div>
                </div>
                <div className="ops-card-pill">{o.dash.table.pill}</div>
              </div>
              <div className="ops-table-rows">
                <div className="ops-table-head">
                  <span>{o.dash.table.cols[0]}</span>
                  <span>{o.dash.table.cols[1]}</span>
                  <span>{o.dash.table.cols[2]}</span>
                  <span>{o.dash.table.cols[3]}</span>
                </div>
                {o.dash.table.rows.map((r, i) => (
                  <div className="ops-table-row" key={i}>
                    <span className="sku">{r.sku}</span>
                    <span>{r.name}</span>
                    <span className="bar-cell">
                      <span className="bar-track">
                        <span className="bar-fill" style={{ width: r.stock + "%" }}></span>
                      </span>
                      {r.stock}%
                    </span>
                    <span className={`status ${r.cls}`}>{r.status}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Integrations strip */}
        <div className="ops-integrations">
          <div className="ops-int-head">
            <span className="eyebrow">{o.int.eyebrow}</span>
            <h3>{o.int.title}</h3>
            <p>{o.int.desc}</p>
          </div>
          <div className="ops-int-grid">
            {o.int.items.map((it, i) => (
              <div className="ops-int-card" key={i}>
                <div className="ops-int-logo" style={{ background: it.bg }}>{it.glyph}</div>
                <div className="ops-int-name">{it.name}</div>
                <div className="ops-int-tag">{it.tag}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { OpsAnalytics });