/* global React, window */
// =====================================================================
// V4 Apps — página de apps propias de Inteli-K (Factura+ e Inteli-Kit)
// Reutiliza el sistema visual de Soluciones (clases sol-*) y soluciones.css.
// Cada tarjeta enlaza a su página de detalle.
// =====================================================================

const APP_URLS = {
  "factura-plus": "factura-plus.html",
  "inteli-kit": "inteli-kit.html",
};

window.V4AppsPage = function V4AppsPage() {
  window.useReveal();
  const { useMemo } = React;
  const Icon = window.IKIcon;

  const { lang, t } = window.useV4();
  const c = t.apps;           // copy de la página Apps
  const cs = t.soluciones;    // reutilizamos labels de tarjeta de Soluciones
  const fmt = (tpl, vars) => (tpl || "").replace(/\{(\w+)\}/g, (_, k) => vars[k] ?? "");

  const apps = useMemo(() => window.IK_localizeApps(lang), [lang]);

  const firstSentence = (txt) => {
    if (!txt) return "";
    const m = txt.match(/^[^.!?]*[.!?]/);
    return (m ? m[0] : txt).trim();
  };

  const cardMeta = (a) => {
    const find = (kind) => (a.ficha || []).find((e) => e.kind === kind);
    const tiempo = find("time")?.v || "";
    const productos = find("prods")?.v || "";
    const prodShort = productos.split(/\s*\(/)[0].trim();
    return { tiempo, prodShort };
  };

  return (
    <React.Fragment>
      <window.V4Nav active="apps" />

      {/* ===== HERO — split ===== */}
      <section className="sol-hero">
        <div className="sol-hero__inner sol-hero__split" data-reveal>
          <div className="sol-hero__copy">
            <p className="sol-hero__eyebrow">
              <span className="sol-hero__platinum" style={{ color: "rgb(118, 95, 255)" }}>
                <Icon name="sparkles" size={14} /> {c.eyebrow}
              </span>
            </p>
            <h1 className="sol-hero__title">
              {c.hero_t1} <em><span style={{ color: "rgb(0, 200, 200)" }}>{c.hero_t1_em}</span></em>
              <br />{c.hero_t2}
            </h1>
            <p className="sol-hero__sub">{c.hero_sub}</p>

            <dl className="sol-hero__stats">
              <div className="sol-hero__stat">
                <dt className="sol-hero__stat-k">{c.stat_apps}</dt>
                <dd className="sol-hero__stat-v"><window.CountUp to={apps.length} /></dd>
              </div>
              <div className="sol-hero__stat">
                <dt className="sol-hero__stat-k">{c.stat_built_k}</dt>
                <dd className="sol-hero__stat-v" style={{ fontSize: "clamp(22px, 2.6vw, 32px)" }}>{c.stat_built_v}</dd>
              </div>
            </dl>
          </div>

          <div className="sol-hero__visual" aria-hidden="true">
            {apps.map((a, i) => (
              <div key={a.id} className={`sol-hero__minicard sol-hero__minicard--${i + 1}`}>
                <div className="sol-hero__minicard-icn" style={{ background: "transparent", padding: 0 }}><img src={a.logo} alt="" style={{ width: 36, height: 36, borderRadius: 9, display: "block" }} /></div>
                <div className="sol-hero__minicard-cat">{a.tagline}</div>
                <div className="sol-hero__minicard-title">{a.titulo}</div>
                <div className="sol-hero__minicard-bar" />
              </div>
            ))}
            <div className="sol-hero__visual-glow" />
          </div>
        </div>
      </section>

      {/* ===== GRID ===== */}
      <section className="sol-grid-section">
        <div className="sol-grid-section__inner">
          <div className="sol-grid-meta" style={{ display: "block" }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(22px, 2.4vw, 30px)", color: "var(--ink)", margin: "0 0 8px" }}>{c.grid_title}</h2>
            <p style={{ color: "var(--ink-soft)", fontSize: 16, margin: 0 }}>{c.grid_sub}</p>
          </div>

          <div className="sol-grid">
            {apps.map((a) => {
              const { tiempo, prodShort } = cardMeta(a);
              return (
                <article key={a.id}>
                  <a
                    href={APP_URLS[a.id] || "apps.html"}
                    className="sol-card"
                    aria-label={fmt(cs.card_aria, { title: a.titulo })}>
                    <div className="sol-card__head" style={{ alignItems: "center", gap: 14 }}>
                      <img src={a.logo} alt="" style={{ width: 54, height: 54, borderRadius: 13, flex: "none", boxShadow: "0 4px 14px rgba(11,21,37,.12)" }} />
                      <span className="sol-card__cat" style={{ margin: 0 }}>{a.tagline}</span>
                      {a.badge && <span className="sol-card__badge" style={{ marginLeft: "auto" }}>{a.badge}</span>}
                    </div>
                    <h2 className="sol-card__title">{a.titulo}</h2>
                    <p className="sol-card__hook">{firstSentence(a.gancho)}</p>

                    <div className="sol-card__meta">
                      {tiempo && <span className="sol-card__metachip"><Icon name="clock" size={13} /> {tiempo}</span>}
                      {prodShort && <span className="sol-card__metachip"><Icon name="plug" size={13} /> {prodShort}</span>}
                    </div>

                    <div className="sol-card__foot">
                      <span className="sol-card__cta">{cs.card_cta}<Icon name="arrowRight" size={14} /></span>
                    </div>
                  </a>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <window.V5Contact />
      <window.V4Footer />
    </React.Fragment>
  );
};