/* Nuestros Productos — página propia (route "products", como Get Started).
   Auditflow en línea (auditflow.lat); WizKeep y DashFlow próximamente. */

function AuditflowStage() {
  // Documento auditado con hallazgos por severidad — misma familia visual que
  // los stages de Services (SVG animado, mono + serif, paleta de la casa).
  const findings = [
    { y: 150, color: "#c0564d", label: "ALTA" },
    { y: 250, color: "oklch(0.78 0.12 70)", label: "MEDIA" },
    { y: 350, color: "oklch(0.62 0.09 150)", label: "BAJA" },
  ];
  return (
    <svg viewBox="0 0 600 600" width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
      {/* Documento */}
      <rect x="90" y="90" width="280" height="420" rx="14" fill="#fff" fillOpacity="0.97" />
      <rect x="90" y="90" width="280" height="34" rx="14" fill="#0e1b22" fillOpacity="0.05" />
      <text x="112" y="112" fontSize="11" fontFamily="JetBrains Mono" fill="#0e1b22" fillOpacity="0.45">CONTRATO.PDF</text>
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
        <rect key={i} x="115" y={150 + i * 34} width={i % 3 === 0 ? 180 : 225} height="8" rx="3"
          fill="#0e1b22" fillOpacity={i === 1 || i === 4 || i === 7 ? "0.35" : "0.14"} />
      ))}
      {/* Línea de escaneo */}
      <rect x="98" y="130" width="264" height="26" rx="6" fill="#1a3a6c" fillOpacity="0.1">
        <animate attributeName="y" values="130;460;130" dur="7s" repeatCount="indefinite" />
      </rect>
      {/* Hallazgos por severidad */}
      {findings.map((f, i) => (
        <g key={f.label}>
          <line x1="370" y1={f.y + 4 + i * 34} x2="420" y2={f.y} stroke="#fff" strokeOpacity="0.25" strokeWidth="1" />
          <circle r="3.5" fill={f.color}>
            <animateMotion dur="2.6s" begin={`${i * 0.9}s`} repeatCount="indefinite"
              path={`M 370 ${f.y + 4 + i * 34} L 420 ${f.y}`} />
          </circle>
          <rect x="420" y={f.y - 22} width="120" height="44" rx="10" fill="#fff" fillOpacity="0.06" stroke="#fff" strokeOpacity="0.15" />
          <circle cx="442" cy={f.y} r="5" fill={f.color}>
            <animate attributeName="fill-opacity" values="1;0.4;1" dur="2s" begin={`${i * 0.5}s`} repeatCount="indefinite" />
          </circle>
          <text x="458" y={f.y + 4} fontSize="12" fontFamily="JetBrains Mono" fill="#fff" fillOpacity="0.85" letterSpacing="1">{f.label}</text>
        </g>
      ))}
      {/* Métrica inferior */}
      <text x="90" y="556" fontSize="11" fontFamily="JetBrains Mono" fill="#fff" fillOpacity="0.4" letterSpacing="1.5">AUDITFLOW.LAT</text>
      <text x="420" y="548" fontSize="11" fontFamily="JetBrains Mono" fill="#fff" fillOpacity="0.4">12 RAMAS</text>
      <text x="420" y="564" fontSize="11" fontFamily="JetBrains Mono" fill="#fff" fillOpacity="0.4">DEL DERECHO</text>
    </svg>
  );
}

function ProductsPage() {
  const { t } = useT();
  const p = t.products;
  const feature = p.list[0];
  const soon = p.list.slice(1);

  return (
    <section className="products-page">
      <div className="shell">
        <div className="pp-head">
          <Reveal>
            <div className="eyebrow">{p.eyebrow}</div>
          </Reveal>
          <h1 className="pp-title">
            <Words text={p.h2a} delay={100} />
            <em><Words text={p.h2b} delay={320} /></em>
          </h1>
          <Reveal delay={280}>
            <p className="pp-sub">{p.sub}</p>
          </Reveal>
        </div>

        <Reveal delay={160}>
          <article className="pp-feature">
            <div className="pp-feature-info">
              <span className="pp-status mono"><span className="pp-live-dot" />{feature.status}</span>
              <h2 className="serif">{feature.name}</h2>
              <p className="pp-tagline">{feature.tagline}</p>
              <p className="pp-desc">{feature.desc}</p>
              <div className="service-tags">
                {feature.tags.map((tag) => <span className="service-tag" key={tag}>{tag}</span>)}
              </div>
              <a className="btn pp-cta" href={feature.href} target="_blank" rel="noopener noreferrer" data-magnet>
                {feature.cta} <ArrowIcon />
              </a>
            </div>
            <div className="pp-visual">
              <AuditflowStage />
            </div>
          </article>
        </Reveal>

        <div className="pp-soon-grid">
          {soon.map((prod, i) => (
            <Reveal key={prod.name} delay={280 + i * 140}>
              <article className="pp-soon-card">
                <span className="pp-soon-label mono">{prod.status}</span>
                <h3 className="serif">{prod.name}</h3>
                <span className="pp-soon-text">{p.soon}</span>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProductsPage });