/* global React, Arrow, Check */

// ============================================================
// BIGNMS Powered by XSOL DATA — product spotlight
// + 1000+ Customers Trust banner
// ============================================================
const BignmsSection = () => (
  <>
    {/* ====== Product spotlight ====== */}
    <section style={{ background: "var(--paper)", position: "relative", overflow: "hidden" }}>
      {/* Soft purple radial accent */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 60% 50% at 80% 40%, rgba(120,69,233,0.10), transparent 60%)",
      }} />
      <div className="wrap" style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 48, alignItems: "center" }}>
        <BignmsVisual />

        <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <span className="eyebrow">PRODUCT — BIGNMS · POWERED BY XSOL DATA</span>
          <h2 className="h2" style={{ margin: 0 }}>
            BIGNMS{" "}
            <span style={{ color: "var(--ink-mute)", fontWeight: 400 }}>—</span><br />
            Advanced Network{" "}
            <span style={{ color: "var(--bel-orange)", fontStyle: "italic", fontWeight: 500 }}>Management System.</span>
          </h2>
          <p className="lead" style={{ margin: 0 }}>
            <strong>BIGNMS</strong> (Big Network Management System) is a cutting-edge solution developed by XSOL DATA that offers advanced network monitoring, automated issue detection, and comprehensive performance analytics for enterprise environments.
          </p>

          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 18 }}>
            {[
              { t: "Real-time network performance monitoring", d: "Continuous monitoring with instant alerts and comprehensive network performance insights." },
              { t: "Automated issue detection and resolution", d: "AI-powered detection with automated troubleshooting and resolution workflows." },
              { t: "Comprehensive analytics and reporting", d: "Advanced analytics with customizable reports and performance insights." },
              { t: "Scalable cloud-based architecture", d: "Cloud-native design with enterprise-grade scalability and security." },
            ].map((b, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "26px 1fr", gap: 14, alignItems: "flex-start" }}>
                <span style={{
                  width: 24, height: 24, borderRadius: "50%",
                  background: "var(--bel-blue-soft)", color: "var(--bel-blue)",
                  display: "grid", placeItems: "center", marginTop: 4,
                }}>
                  <Check size={13} />
                </span>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 16, color: "var(--ink)", marginBottom: 3 }}>{b.t}</div>
                  <div style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.5 }}>{b.d}</div>
                </div>
              </li>
            ))}
          </ul>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 10 }}>
            <a href="#contact" className="btn btn--primary">
              Explore BIGNMS <span className="arrow"><Arrow size={11} /></span>
            </a>
            <a href="#contact" className="btn btn--ghost">Request demo</a>
          </div>
        </div>
      </div>
    </section>

    {/* ====== Trusted by 1000+ banner ====== */}
    <TrustedBanner />
  </>
);

const BignmsVisual = () => (
  <div className="reveal" style={{ position: "relative", aspectRatio: "0.95 / 1", maxWidth: 560, width: "100%", justifySelf: "start" }}>
    {/* Soft backdrop gradient */}
    <div aria-hidden style={{
      position: "absolute", inset: "6% -4% 4% -4%",
      background: "linear-gradient(155deg, var(--bel-blue) 0%, var(--bel-blue-deep) 100%)",
      borderRadius: 28,
      transform: "rotate(-2deg)",
    }} />

    {/* Main NMS dashboard card */}
    <div style={{
      position: "absolute", inset: "4% 0% 4% 4%",
      background: "var(--paper)",
      borderRadius: 24,
      border: "1px solid var(--line)",
      padding: 24,
      display: "flex", flexDirection: "column", gap: 16,
      boxShadow: "0 32px 70px -28px rgba(120, 69, 233, 0.4)",
    }}>
      {/* Header bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: "var(--bel-blue)", color: "white",
            display: "grid", placeItems: "center",
            fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 11,
          }}>NMS</div>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
            <span style={{ fontWeight: 700, fontSize: 14, color: "var(--ink)" }}>BIGNMS · Operations</span>
            <span style={{ fontSize: 11.5, color: "var(--ink-soft)", fontFamily: "var(--font-mono)" }}>Live · 14 sites · 312 devices</span>
          </div>
        </div>
        <span style={{
          padding: "4px 10px",
          background: "rgba(34,197,94,0.12)", color: "#16A34A",
          borderRadius: 999, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: 0.08,
        }}>● ALL HEALTHY</span>
      </div>

      {/* Stats row */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
        {[
          { l: "Uptime", v: "99.98%", c: "#16A34A" },
          { l: "Avg latency", v: "11ms", c: "var(--bel-blue)" },
          { l: "Alerts", v: "0", c: "var(--ink)" },
        ].map((s, i) => (
          <div key={i} style={{
            padding: "10px 12px",
            border: "1px solid var(--line)",
            borderRadius: 10,
            background: "var(--cream)",
          }}>
            <div style={{ fontSize: 10.5, color: "var(--ink-soft)", fontFamily: "var(--font-mono)", letterSpacing: 0.05, textTransform: "uppercase" }}>{s.l}</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 20, letterSpacing: "-0.02em", color: s.c, marginTop: 2 }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Live throughput chart */}
      <div style={{ background: "var(--cream)", border: "1px solid var(--line)", borderRadius: 12, padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontWeight: 600, fontSize: 13, color: "var(--ink)" }}>Throughput · 24h</span>
          <span style={{ fontSize: 11, color: "var(--ink-soft)", fontFamily: "var(--font-mono)" }}>Mbps</span>
        </div>
        <svg viewBox="0 0 300 90" style={{ width: "100%", height: 78 }}>
          <defs>
            <linearGradient id="nmsg" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="var(--bel-blue)" stopOpacity="0.25"/>
              <stop offset="100%" stopColor="var(--bel-blue)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0,68 C20,60 35,72 55,58 C80,42 100,52 125,38 C150,30 175,46 200,28 C225,16 245,32 270,22 C285,18 295,12 300,10 L300,90 L0,90 Z" fill="url(#nmsg)"/>
          <path d="M0,68 C20,60 35,72 55,58 C80,42 100,52 125,38 C150,30 175,46 200,28 C225,16 245,32 270,22 C285,18 295,12 300,10" stroke="var(--bel-blue)" strokeWidth="2" fill="none" strokeLinecap="round"/>
          <circle cx="270" cy="22" r="4" fill="white" stroke="var(--bel-blue)" strokeWidth="2"/>
          {/* Live ping dot */}
          <circle cx="270" cy="22" r="9" fill="var(--bel-blue)" opacity="0.3">
            <animate attributeName="r" values="5;14;5" dur="2.2s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.4;0;0.4" dur="2.2s" repeatCount="indefinite"/>
          </circle>
        </svg>
      </div>

      {/* Device list */}
      {/* Device rows — hidden on mobile (too cramped to be legible) */}
      <div className="bignms-devices" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { name: "core-rtr-del-01", site: "Delhi", status: "ok", val: "10G ↑" },
          { name: "agg-sw-blr-04", site: "Bangalore", status: "ok", val: "1G ↑" },
          { name: "fw-fortinet-mum-02", site: "Mumbai", status: "warn", val: "high cpu" },
        ].map((d, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "16px 1fr auto auto", gap: 10,
            alignItems: "center", padding: "8px 10px",
            background: "var(--cream)", borderRadius: 8,
            border: "1px solid var(--line-2)",
            fontSize: 12.5,
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: "50%",
              background: d.status === "ok" ? "#22C55E" : "#F59E0B",
              boxShadow: `0 0 0 3px ${d.status === "ok" ? "rgba(34,197,94,0.2)" : "rgba(245,158,11,0.2)"}`,
            }} />
            <span style={{ fontFamily: "var(--font-mono)", color: "var(--ink)" }}>{d.name}</span>
            <span style={{ fontSize: 11, color: "var(--ink-soft)" }}>{d.site}</span>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: d.status === "ok" ? "#16A34A" : "#B45309",
              fontWeight: 600,
            }}>{d.val}</span>
          </div>
        ))}
      </div>
    </div>

    {/* Floating reliability chip */}
    <div style={{
      position: "absolute", top: "-2%", right: "-2%",
      background: "var(--ink)", color: "var(--cream)",
      padding: "16px 18px",
      borderRadius: 16,
      display: "flex", flexDirection: "column", lineHeight: 1.1,
      boxShadow: "0 18px 40px -14px rgba(24,24,27,0.4)",
      transform: "rotate(3deg)",
      animation: "bnFloat 5s ease-in-out infinite",
      zIndex: 3,
    }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, letterSpacing: "-0.04em", color: "var(--bel-orange)" }}>99.9%</span>
      <span style={{ fontSize: 11.5, color: "#A1A1A8", fontFamily: "var(--font-mono)", marginTop: 2 }}>Reliability SLA</span>
    </div>

    {/* Floating 24/7 chip */}
    <div style={{
      position: "absolute", bottom: "4%", left: "-4%",
      background: "var(--bel-orange)", color: "white",
      padding: "14px 16px",
      borderRadius: 16,
      display: "flex", flexDirection: "column", lineHeight: 1.1,
      boxShadow: "0 18px 40px -14px rgba(239,106,31,0.55)",
      transform: "rotate(-3deg)",
      animation: "bnFloat 6s ease-in-out -2s infinite",
      zIndex: 3,
    }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, letterSpacing: "-0.03em" }}>24/7</span>
      <span style={{ fontSize: 11.5, opacity: 0.9, fontFamily: "var(--font-mono)" }}>Monitoring</span>
    </div>

    <style>{`
      @keyframes bnFloat {
        0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
        50%      { transform: translateY(-6px) rotate(var(--r, 0deg)); }
      }
      /* Hide the device rows (Delhi / Bangalore / Mumbai) on mobile */
      @media (max-width: 720px) {
        .bignms-devices { display: none !important; }
      }
    `}</style>
  </div>
);

// ============================================================
// Trusted by Industry Leaders — 1000+ customers banner
// ============================================================
const TrustedBanner = () => (
  <section style={{ background: "var(--ink)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
    {/* Backdrop accent */}
    <div aria-hidden style={{
      position: "absolute", inset: 0,
      background: "radial-gradient(circle at 90% 20%, rgba(120,69,233,0.35), transparent 50%), radial-gradient(circle at 10% 90%, rgba(239,106,31,0.18), transparent 45%)",
    }} />
    <div className="wrap" style={{ position: "relative", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 44, alignItems: "center" }}>
      <div className="reveal" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        <span className="eyebrow" style={{ color: "var(--bel-orange)" }}>TRUSTED BY INDUSTRY LEADERS</span>
        <h2 className="h2" style={{ margin: 0, color: "var(--cream)" }}>
          1,000+ customers trust{" "}
          <span style={{ color: "#A1A1A8", fontWeight: 400 }}>Big Expert Lab</span>{" "}
          for their IT needs.
        </h2>
        <p className="lead" style={{ margin: 0, color: "#C7C7CE" }}>
          Join thousands of satisfied customers who have transformed their business with our reliable advisory, system integration and 24/7 support — across regulated industries and pan-India delivery.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 8 }}>
          <a href="#contact" className="btn btn--accent">Book a 30-min consult <span className="arrow"><Arrow size={11} /></span></a>
          <a href="#" className="btn" style={{ height: 50, background: "transparent", color: "var(--cream)", border: "1px solid #3A3A40" }}>
            See case studies
          </a>
        </div>

        {/* Mini metrics row */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 18, paddingTop: 18, borderTop: "1px solid #2A2A2F" }}>
          {[
            { v: "1,100+", l: "satisfied customers" },
            { v: "3,500+", l: "projects deployed" },
            { v: "20%", l: "international clientele" },
          ].map((m, i, a) => (
            <div key={i} style={{ borderRight: i < a.length - 1 ? "1px solid #2A2A2F" : "none", paddingRight: 16 }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 32, letterSpacing: "-0.03em" }}>{m.v}</div>
              <div style={{ fontSize: 13, color: "#A1A1A8", marginTop: 2 }}>{m.l}</div>
            </div>
          ))}
        </div>
      </div>

      <TrustVideoCard />
    </div>
  </section>
);

// Small testimonial video / spotlight panel
const TrustVideoCard = () => (
  <div className="reveal" style={{
    position: "relative",
    borderRadius: 22,
    overflow: "hidden",
    aspectRatio: "5 / 6",
    border: "1px solid #2A2A2F",
    boxShadow: "0 32px 70px -28px rgba(0,0,0,0.6)",
    background: "linear-gradient(155deg, #2A1B58 0%, #1A1135 50%, #0F0820 100%)",
  }}>
    {/* Background pattern */}
    <svg aria-hidden viewBox="0 0 400 500" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.18 }}>
      {Array.from({ length: 24 }, (_, i) => (
        <line key={i} x1={i * 18} y1="0" x2={i * 18 - 80} y2="500" stroke="#9B7AF0" strokeWidth="0.5"/>
      ))}
    </svg>
    <div aria-hidden style={{
      position: "absolute", inset: 0,
      background: "radial-gradient(circle at 30% 35%, rgba(155,122,240,0.45), transparent 55%)",
    }} />
    {/* Quote chip */}
    <div style={{
      position: "absolute", top: 22, left: 22, right: 22,
      display: "flex", flexDirection: "column", gap: 16,
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10,
        background: "var(--bel-orange)",
        display: "grid", placeItems: "center",
        color: "white", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22,
      }}>“</div>
      <p style={{ margin: 0, color: "white", fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 17, letterSpacing: "-0.015em", lineHeight: 1.35 }}>
        BIGNMS replaced three monitoring tools for us. Six weeks in, our MTTR dropped from 41 minutes to under 7.
      </p>
    </div>

    {/* Play button */}
    <button aria-label="Watch case study" className="tv-play" style={{
      position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)",
      width: 72, height: 72, borderRadius: "50%",
      background: "rgba(255,255,255,0.94)",
      display: "grid", placeItems: "center",
      cursor: "pointer",
      transition: "transform .2s, box-shadow .2s",
      boxShadow: "0 18px 40px rgba(0,0,0,0.45)",
    }}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="var(--bel-orange)">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>

    {/* Speaker footer */}
    <div style={{
      position: "absolute", bottom: 0, left: 0, right: 0,
      padding: "18px 22px",
      display: "flex", alignItems: "center", gap: 12,
      background: "linear-gradient(180deg, transparent, rgba(0,0,0,0.55))",
      color: "white",
    }}>
      <div style={{ width: 42, height: 42, borderRadius: "50%", background: "var(--bel-orange)", display: "grid", placeItems: "center", fontWeight: 700, fontFamily: "var(--font-display)" }}>AM</div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        <span style={{ fontWeight: 700, fontSize: 14 }}>Anisha Mishra</span>
        <span style={{ fontSize: 12, opacity: 0.7 }}>CTO, Genes2Me</span>
      </div>
      <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 11, color: "#C7C7CE" }}>02:14</span>
    </div>

    <style>{`
      .tv-play:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 22px 50px rgba(120,69,233,0.6); }
    `}</style>
  </div>
);

Object.assign(window, { BignmsSection });