/* global React */
const { useState: useS, useEffect: useE, useRef: useR } = React;

/* ============ LOGO ============ */
function JsaLogo({ inverse = false }) {
  return (
    <a href="#top" className="logo">
      <img
        src="https://jsaitsolutions.com/assets/img/logo/Picture1.svg"
        alt="JSA IT Solutions"
        style={{ height: 40, width: "auto", display: "block" }}
      />
    </a>
  );
}

/* ============ NAV ============ */
function Nav() {
  const [scrolled, setScrolled] = useS(false);
  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <JsaLogo />
        <div className="nav-links">
          <a href="#services">Services</a>
          <a href="#platform">Platform</a>
          <a href="#why">Why us</a>
          <a href="#industries">Industries</a>
          <a href="#results">Results</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <span className="nav-phone">+971 4 123 4567</span>
          <a href="#consult" className="btn btn-primary">Free consultation <Icon name="arrow" size={14} className="arr" /></a>
        </div>
      </div>
    </nav>
  );
}

/* ============ HERO VIZ STACK ============ */
function HeroStack() {
  const [bars, setBars] = useS([55, 72, 48, 88, 62, 78, 95]);
  const [activeStep, setActiveStep] = useS(2);
  useE(() => {
    const id = setInterval(() => {
      setBars(prev => prev.map(() => 40 + Math.random() * 55));
    }, 2400);
    return () => clearInterval(id);
  }, []);
  useE(() => {
    const id = setInterval(() => {
      setActiveStep(s => (s + 1) % 5);
    }, 2000);
    return () => clearInterval(id);
  }, []);

  const flows = [
    { ic: "cube", t: "Ingest · SAP S/4", tag: "DONE" },
    { ic: "refresh", t: "Transform · ETL", tag: "DONE" },
    { ic: "cloud", t: "Sync · AWS Cloud", tag: "LIVE" },
    { ic: "chart", t: "Analytics · Power BI", tag: "QUEUED" },
    { ic: "users", t: "Notify · Stakeholders", tag: "QUEUED" },
  ];

  return (
    <div className="hero-stack reveal">
      <div className="hs-main">
        <div className="hs-bar">
          <span className="hs-dot" />
          <span className="hs-dot" />
          <span className="hs-dot" />
          <span className="hs-url">jsa-cloud / control-center</span>
          <span className="hs-tab">PROD · LIVE</span>
        </div>
        <div className="hs-body">
          <div className="hs-card">
            <div className="hs-card-head">
              <span className="hs-card-title">Cost savings</span>
              <span className="hs-pill up">+12.4%</span>
            </div>
            <div className="hs-metric">$842K</div>
            <div className="hs-metric-sub">YTD · vs forecast</div>
          </div>
          <div className="hs-card">
            <div className="hs-card-head">
              <span className="hs-card-title">Uptime</span>
              <span className="hs-pill sky">SLA · 99.9%</span>
            </div>
            <div className="hs-metric">99.98%</div>
            <div className="hs-metric-sub">Last 90 days</div>
          </div>
          <div className="hs-card span-2">
            <div className="hs-card-head">
              <span className="hs-card-title">Workflow throughput</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "color-mix(in oklch, white 55%, transparent)" }}>
                LAST 7 DAYS
              </span>
            </div>
            <div className="hs-bars">
              {bars.map((b, i) => <span key={i} style={{ height: `${b}%` }} />)}
            </div>
          </div>
        </div>
      </div>

      <div className="hs-topo">
        <div className="topo-title">
          <span>Cloud topology</span>
          <span className="topo-live">LIVE</span>
        </div>
        <svg className="topo-svg" viewBox="0 0 240 180" fill="none">
          <defs>
            <linearGradient id="topoLine" x1="0" x2="1">
              <stop offset="0%" stopColor="oklch(78% 0.13 225)" stopOpacity="0.2" />
              <stop offset="50%" stopColor="oklch(78% 0.13 225)" stopOpacity="0.8" />
              <stop offset="100%" stopColor="oklch(78% 0.13 225)" stopOpacity="0.2" />
            </linearGradient>
          </defs>
          {/* edges */}
          {[[120,30,40,90],[120,30,200,90],[120,30,120,90],[40,90,80,150],[120,90,120,150],[200,90,160,150]].map(([x1,y1,x2,y2], i) => (
            <g key={i}>
              <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,0.1)" strokeWidth="1" />
              <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="url(#topoLine)" strokeWidth="1.5" strokeDasharray="4 8">
                <animate attributeName="stroke-dashoffset" from="0" to="-24" dur="2s" repeatCount="indefinite" />
              </line>
            </g>
          ))}
          {/* nodes */}
          {[
            [120, 30, "Core", "var(--sky)"],
            [40, 90, "DB", "white"],
            [120, 90, "API", "white"],
            [200, 90, "CDN", "white"],
            [80, 150, "EU", "white"],
            [120, 150, "US", "white"],
            [160, 150, "AP", "white"],
          ].map(([x, y, lbl, c], i) => (
            <g key={i}>
              <circle cx={x} cy={y} r="14" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)" />
              <circle cx={x} cy={y} r="5" fill={c}>
                {i === 0 && <animate attributeName="r" values="5;8;5" dur="2s" repeatCount="indefinite" />}
              </circle>
              <text x={x} y={y + 28} textAnchor="middle" fontSize="9" fill="rgba(255,255,255,0.7)" fontFamily="var(--font-mono)">{lbl}</text>
            </g>
          ))}
        </svg>
      </div>

      <div className="hs-flow">
        <div className="flow-title">ERP workflow · live</div>
        <div className="flow-steps">
          {flows.map((f, i) => (
            <div key={i} className={`flow-step ${i === activeStep ? "active" : ""}`}>
              <span className="ic"><Icon name={f.ic} size={12} /></span>
              <span>{f.t}</span>
              <span className="tag">{i === activeStep ? "RUNNING" : f.tag}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="floater floater-1">
        <div className="ic"><Icon name="shield" size={16} /></div>
        <div>
          <div className="floater-title">SOC 2 Type II</div>
          <div className="floater-sub">Audit passed · Q1</div>
        </div>
      </div>
      <div className="floater floater-2">
        <div className="ic"><Icon name="bolt" size={16} /></div>
        <div>
          <div className="floater-title">40% faster ops</div>
          <div className="floater-sub">Avg. across deploys</div>
        </div>
      </div>
    </div>
  );
}

/* ============ HERO ============ */
function Hero() {
  const ticker = [
    { n: "500+", l: "GCC projects delivered" },
    { n: "98%", l: "Client retention" },
    { n: "24/7", l: "Managed support" },
    { n: "12yr", l: "Avg consultant tenure" },
    { n: "47", l: "Active enterprise clients" },
    { n: "$8.2M", l: "Saved for clients in '25" },
    { n: "99.98%", l: "Uptime SLA" },
    { n: "ISO 27001", l: "Certified" },
    { n: "Dubai", l: "Abu Dhabi · Riyadh · Doha" },
  ];
  return (
    <header className="hero" id="top">
      <div className="hero-bg" />
      <div className="hero-grid" />
      <div className="container hero-inner">
        <div className="reveal">
          <span className="eyebrow hero-eyebrow"><span className="dot" />SAP · Cloud · ERP · Cybersecurity</span>
          <h1 className="hero-headline">
            Enterprise IT, <span className="accent">engineered for outcomes.</span>
          </h1>
          <p className="lead">
            JSA partners with businesses across the GCC — UAE, Saudi Arabia, Qatar, Bahrain,
            Kuwait, and Oman — to plan, implement, and run SAP S/4HANA, cloud migration,
            ERP &amp; CRM, managed IT, and digital transformation programs that ship measurable ROI.
          </p>
          <div className="hero-cta">
            <a href="#consult" className="btn btn-blue btn-lg">Book free consultation <Icon name="arrow" size={16} className="arr" /></a>
            <a href="tel:+97141234567" className="btn btn-light btn-lg"><Icon name="phone" size={16} />Talk to an expert</a>
          </div>
          <div className="urgency-strip">
            <span className="dot" />
            LIMITED · FREE IT INFRASTRUCTURE ASSESSMENT FOR NEW CLIENTS
          </div>
          <div className="hero-trust">
            {[
              { i: "rocket", t: "Deploy in 30 days" },
              { i: "shield", t: "Certified consultants" },
              { i: "users", t: "Dedicated account team" },
              { i: "lock", t: "SOC 2 · ISO 27001" },
            ].map((x, i) => (
              <div key={i} className="hero-trust-item">
                <Icon name={x.i} size={16} />
                {x.t}
              </div>
            ))}
          </div>
        </div>
        <HeroStack />
      </div>

      <div className="hero-ticker">
        <div className="hero-ticker-track">
          {[...ticker, ...ticker].map((t, i) => (
            <div key={i} className="hero-ticker-item">
              <span className="num">{t.n}</span>
              <span>{t.l}</span>
              <span className="sep" />
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

/* ============ TRUST BAR ============ */
function TrustBar() {
  const partners = [
    { name: "SAP", style: { fontWeight: 700, letterSpacing: "0.1em" } },
    { name: "Microsoft", style: { fontWeight: 400 } },
    { name: "AWS", style: { fontWeight: 700 } },
    { name: "Google Cloud", style: { fontWeight: 500 } },
    { name: "Oracle", style: { fontWeight: 600, fontStyle: "italic" } },
    { name: "Cisco", style: { fontWeight: 500 } },
    { name: "ServiceNow", style: { fontWeight: 500 } },
    { name: "Salesforce", style: { fontWeight: 500, fontStyle: "italic" } },
  ];
  return (
    <section className="trust-bar">
      <div className="container">
        <div className="trust-label">
          <span className="trust-label-line" />
          <span>Trusted technology partners</span>
          <span className="trust-label-line" />
        </div>
        <div className="trust-logos reveal-stagger">
          {partners.map((p, i) => (
            <div key={i} className="trust-logo" style={p.style}>{p.name}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ PLATFORM STACK ============ */
function PlatformStack() {
  const layers = [
    { lbl: "Industries", items: ["Manufacturing", "Retail", "Healthcare", "Logistics", "Finance", "Education"], tone: "sky" },
    { lbl: "Business apps", items: ["SAP S/4HANA", "MS Dynamics", "Salesforce", "NetSuite", "ServiceNow", "Custom ERP"], tone: "blue" },
    { lbl: "Platform layer", items: ["Power Platform", "Workflow Automation", "Data & BI", "Identity & SSO", "Integration", "API Gateway"], tone: "blue" },
    { lbl: "Cloud & infra", items: ["AWS", "Azure", "Google Cloud", "Hybrid", "Networking", "Cybersecurity"], tone: "navy" },
  ];
  return (
    <section className="section section--dark" id="platform">
      <div className="platform-bg" />
      <div className="container platform-inner">
        <div className="section-head section-head--row reveal">
          <div>
            <span className="eyebrow hero-eyebrow"><span className="dot" />The JSA platform</span>
            <h2 style={{ marginTop: 18 }}>One partner for the full enterprise stack.</h2>
            <p className="lead">
              We plan, build, and run every layer of the enterprise technology stack — so you
              don't stitch together six vendors and hope they talk to each other.
            </p>
          </div>
          <a href="#consult" className="btn btn-light btn-lg">Map your stack <Icon name="arrow" size={16} className="arr" /></a>
        </div>
        <div className="stack reveal-stagger">
          {layers.map((L, i) => (
            <div key={i} className={`stack-layer tone-${L.tone}`}>
              <div className="stack-label">
                <span className="stack-num">0{i + 1}</span>
                <span>{L.lbl}</span>
              </div>
              <div className="stack-items">
                {L.items.map((it, j) => (
                  <div key={j} className="stack-chip">{it}</div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ SERVICES (interactive showcase) ============ */
function Services() {
  const services = [
    {
      id: "sap",
      ic: "cube",
      title: "SAP Implementation & S/4HANA",
      tag: "Flagship",
      lead: "Certified S/4HANA delivery — greenfield, brownfield, or selective data transition.",
      desc: "Our SAP practice runs senior-led teams across finance, supply chain, manufacturing, and analytics. We've shipped 47+ S/4HANA programs without missing a go-live — including 4 multi-entity migrations against fixed-date board commitments.",
      stats: [["12+", "yr avg consultant tenure"], ["47", "S/4HANA rollouts"], ["100%", "on-time go-live"]],
      pills: ["Greenfield", "Brownfield", "Selective transition", "RISE", "S/4HANA Cloud", "BTP"],
      cta: "Plan an S/4 rollout",
      viz: <SapModulesViz />,
    },
    {
      id: "cloud",
      ic: "cloud",
      title: "Cloud Migration & Operations",
      tag: "Multi-cloud",
      lead: "AWS, Azure, Google Cloud — lift-and-shift, re-platform, or full re-architect.",
      desc: "We move enterprise workloads to cloud without customer-facing downtime. Our cutover playbooks include dual-run safety nets, automated rollback, and load-tested DR before you ever press the button.",
      stats: [["30d", "avg time to cutover"], ["0", "Sev-1 incidents"], ["38%", "infra cost reduction"]],
      pills: ["AWS", "Azure", "GCP", "Hybrid cloud", "Kubernetes", "FinOps"],
      cta: "Migrate to cloud",
      viz: <CloudFlowViz />,
    },
    {
      id: "managed",
      ic: "settings",
      title: "Managed IT Support",
      tag: "24/7 SLA",
      lead: "24/7 enterprise helpdesk, infrastructure monitoring, and proactive maintenance.",
      desc: "Dedicated account manager from day one. Tier-1 incidents acknowledged in under 15 minutes. Quarterly business reviews so optimization compounds — not just keeps the lights on.",
      stats: [["<15min", "Tier-1 ack"], ["99.98%", "uptime SLA"], ["1", "named AM per client"]],
      pills: ["Helpdesk", "NOC", "Endpoint mgmt", "Patching", "Backup", "DR"],
      cta: "Get SLA-backed support",
      viz: <SupportViz />,
    },
    {
      id: "security",
      ic: "shield",
      title: "Cybersecurity",
      tag: "Zero-trust",
      lead: "Zero-trust architecture, threat detection, and compliance for regulated industries.",
      desc: "From posture assessment to SOC integration. We deliver to ISO 27001, SOC 2 Type II, NESA (UAE), SAMA (KSA), and HIPAA controls — and stick around to run them, not just tick the box.",
      stats: [["ISO 27001", "certified"], ["SOC 2", "Type II audited"], ["18mo", "avg MTTD ↓"]],
      pills: ["IAM / SSO", "MDR", "EDR", "Pen testing", "Compliance", "Awareness"],
      cta: "Secure your business",
      viz: <SecurityViz />,
    },
    {
      id: "erp",
      ic: "layers",
      title: "ERP & CRM Solutions",
      tag: "Unified data",
      lead: "Unified ERP & CRM platforms tailored to manufacturing, retail, and services.",
      desc: "We build composable enterprise systems — SAP, Dynamics 365, Salesforce, NetSuite — with integration patterns that survive your next acquisition. Real-time analytics included, not bolted on.",
      stats: [["1", "source of truth"], ["6mo", "avg time-to-value"], ["28%", "process automation"]],
      pills: ["SAP", "Dynamics 365", "Salesforce", "NetSuite", "Integration", "Custom"],
      cta: "Unify your data",
      viz: <ErpViz />,
    },
    {
      id: "digital",
      ic: "sparkle",
      title: "Digital Transformation",
      tag: "Most requested",
      lead: "Process automation, workflows, and analytics that compound across teams.",
      desc: "We don't sell transformation theatre. We ship the boring middle — the integrations, the workflows, the adoption playbooks — that makes your roadmap actually land.",
      stats: [["40%", "faster operations"], ["94%", "user adoption"], ["3.2x", "ROI in year 1"]],
      pills: ["Process automation", "Data platform", "Power BI", "Workflows", "Change mgmt"],
      cta: "Start your transformation",
      viz: <TransformViz />,
    },
    {
      id: "m365",
      ic: "grid",
      title: "Microsoft 365",
      tag: "Productivity",
      lead: "Migration, governance, and adoption for Teams, SharePoint, and Power Platform.",
      desc: "We make M365 actually work — not just installed. Identity, governance, intranet design, and Power Platform automation across the full Microsoft stack.",
      stats: [["100K+", "users migrated"], ["94%", "adoption rate"], ["−60%", "shadow IT"]],
      pills: ["Teams", "SharePoint", "Power Apps", "Power Automate", "Intune", "Purview"],
      cta: "Roll out M365",
      viz: <M365Viz />,
    },
    {
      id: "infra",
      ic: "server",
      title: "IT Infrastructure",
      tag: "Enterprise scale",
      lead: "Networks, data centers, and hybrid infra — designed, deployed, and managed.",
      desc: "From 50-seat offices to 10K-user multi-region rollouts. We design for the load you'll have in 18 months, not the one you have today — and pre-bake the headroom.",
      stats: [["12", "global PoPs"], ["3", "DC regions"], ["10K+", "endpoints"]],
      pills: ["Networking", "SD-WAN", "Data center", "Hybrid", "Edge", "DR"],
      cta: "Design my infra",
      viz: <InfraViz />,
    },
  ];

  const [active, setActive] = useS(0);
  const [auto, setAuto] = useS(true);
  useE(() => {
    if (!auto) return;
    const id = setInterval(() => setActive(a => (a + 1) % services.length), 5500);
    return () => clearInterval(id);
  }, [auto, services.length]);

  const cur = services[active];

  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head section-head--row reveal">
          <div>
            <span className="eyebrow"><span className="dot" />What we do</span>
            <h2 style={{ marginTop: 18 }}>Eight services.<br />One accountable partner.</h2>
          </div>
          <p className="lead" style={{ alignSelf: "center" }}>
            From the boardroom to the server room — we plan, implement, and run the technology
            stack modern businesses depend on. Hover a service to explore.
          </p>
        </div>

        <div className="svc-showcase reveal">
          {/* Horizontal tab strip */}
          <div className="svc-tabs" onMouseLeave={() => setAuto(true)}>
            {services.map((s, i) => (
              <button
                key={s.id}
                className={`svc-tab ${i === active ? "active" : ""}`}
                onMouseEnter={() => { setActive(i); setAuto(false); }}
                onClick={() => { setActive(i); setAuto(false); }}
              >
                <span className="svc-tab-num">0{i + 1}</span>
                <span className="svc-tab-ic"><Icon name={s.ic} size={16} /></span>
                <span className="svc-tab-label">{s.title.split(" & ")[0].split(" Implementation")[0].split(" Migration")[0].split(" Support")[0].split(" Solutions")[0].split(" Transformation")[0]}</span>
                <span className="svc-tab-progress" />
              </button>
            ))}
          </div>

          {/* Detail panel */}
          <div className="svc-detail" key={cur.id}>
            <div className="svc-detail-bg" />
            <div className="svc-detail-grid">
              <div className="svc-detail-left">
                <div className="svc-detail-head">
                  <div className="svc-detail-ic"><Icon name={cur.ic} size={28} /></div>
                  <span className="svc-detail-tag">{cur.tag}</span>
                </div>
                <h3 className="svc-detail-title">{cur.title}</h3>
                <p className="svc-detail-lead">{cur.lead}</p>
                <p className="svc-detail-desc">{cur.desc}</p>

                <div className="svc-detail-pills">
                  {cur.pills.map((p, i) => <span key={i} className="stack-chip">{p}</span>)}
                </div>

                <div className="svc-detail-foot">
                  <a href="#consult" className="btn btn-blue btn-lg">{cur.cta} <Icon name="arrow" size={14} className="arr" /></a>
                  <span className="svc-detail-meta">
                    <Icon name="clock" size={13} />
                    Avg engagement: 12 weeks · Senior-led
                  </span>
                </div>
              </div>

              <div className="svc-detail-right">
                <div className="svc-detail-stats">
                  {cur.stats.map(([v, l], i) => (
                    <div key={i} className="svc-stat">
                      <div className="svc-stat-v">{v}</div>
                      <div className="svc-stat-l">{l}</div>
                    </div>
                  ))}
                </div>
                <div className="svc-detail-viz">{cur.viz}</div>
                <div className="svc-detail-quote">
                  <div className="svc-detail-quote-stars">
                    {Array.from({length: 5}).map((_, i) => <svg key={i} width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7z" /></svg>)}
                  </div>
                  <p>"JSA's {cur.title.split("&")[0].toLowerCase().split("solutions")[0].trim()} practice is the most senior team we've worked with in 15 years."</p>
                  <div className="svc-detail-quote-foot">
                    <span className="svc-detail-quote-av">RM</span>
                    <div>
                      <strong>Rajesh Menon</strong>
                      <small>CFO · Veera Industries</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ Service-specific Mini-Vizes ============ */
function SupportViz() {
  return (
    <div className="support-viz">
      <div className="support-board">
        <div className="support-board-head">
          <span>Live tickets</span>
          <span className="support-pill">3 open · 0 Sev-1</span>
        </div>
        {[
          { sev: "P2", t: "Email sync delay", st: "ASSIGNED", c: "var(--blue)" },
          { sev: "P3", t: "VPN client update", st: "IN PROGRESS", c: "var(--sky)" },
          { sev: "P4", t: "License audit", st: "QUEUED", c: "var(--ink-3)" },
        ].map((r, i) => (
          <div key={i} className="support-row">
            <span className="support-sev" style={{ background: `color-mix(in oklch, ${r.c} 18%, transparent)`, color: r.c }}>{r.sev}</span>
            <span className="support-t">{r.t}</span>
            <span className="support-st">{r.st}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SecurityViz() {
  return (
    <svg viewBox="0 0 320 130" className="sec-viz" fill="none">
      <defs>
        <linearGradient id="secShield" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--blue)" stopOpacity="0.4" />
          <stop offset="100%" stopColor="var(--blue)" stopOpacity="0.05" />
        </linearGradient>
      </defs>
      <path d="M160 15L210 30v35c0 25-22 40-50 50-28-10-50-25-50-50V30z"
            fill="url(#secShield)" stroke="var(--blue)" strokeWidth="1.5" />
      <path d="M140 65l15 15 30-30" stroke="var(--blue)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      {[["ISO 27001", 40, 28], ["SOC 2", 40, 60], ["HIPAA", 40, 92], ["NESA", 280, 28], ["SAMA", 280, 60], ["PCI DSS", 280, 92]].map(([t, x, y], i) => (
        <g key={i}>
          <rect x={x - 35} y={y - 11} width="70" height="22" rx="11" fill="rgba(0,0,0,0.04)" stroke="var(--line)" />
          <text x={x} y={y + 4} textAnchor="middle" fontSize="10" fill="var(--ink-2)" fontFamily="var(--font-mono)">{t}</text>
        </g>
      ))}
    </svg>
  );
}

function ErpViz() {
  const flows = [
    ["Orders", "Inventory"], ["Inventory", "Finance"],
    ["CRM", "Sales"], ["Sales", "Finance"],
    ["HR", "Payroll"], ["Payroll", "Finance"]
  ];
  const nodes = {
    Orders: [50, 30], CRM: [50, 70], HR: [50, 110],
    Inventory: [170, 30], Sales: [170, 70], Payroll: [170, 110],
    Finance: [280, 70]
  };
  return (
    <svg viewBox="0 0 320 140" className="erp-viz" fill="none">
      {flows.map(([from, to], i) => {
        const [x1, y1] = nodes[from], [x2, y2] = nodes[to];
        return (
          <g key={i}>
            <line x1={x1 + 28} y1={y1} x2={x2 - 28} y2={y2} stroke="var(--line-2)" strokeWidth="1" />
            <line x1={x1 + 28} y1={y1} x2={x2 - 28} y2={y2} stroke="var(--blue)" strokeWidth="1.5" strokeDasharray="3 6" opacity="0.7">
              <animate attributeName="stroke-dashoffset" from="0" to="-18" dur="1.6s" repeatCount="indefinite" />
            </line>
          </g>
        );
      })}
      {Object.entries(nodes).map(([name, [x, y]]) => (
        <g key={name}>
          <rect x={x - 28} y={y - 11} width="56" height="22" rx="11"
                fill={name === "Finance" ? "var(--blue)" : "var(--bg-2)"}
                stroke={name === "Finance" ? "var(--blue)" : "var(--line)"} strokeWidth="1" />
          <text x={x} y={y + 4} textAnchor="middle" fontSize="10"
                fill={name === "Finance" ? "white" : "var(--ink-2)"}
                fontFamily="var(--font-mono)">{name}</text>
        </g>
      ))}
    </svg>
  );
}

function TransformViz() {
  return (
    <div className="trans-viz">
      <div className="trans-step">
        <span className="trans-tag">MANUAL</span>
        <div className="trans-bar">
          <span style={{ width: "85%", background: "var(--line-2)" }} />
        </div>
        <span className="trans-val" style={{ color: "var(--ink-3)" }}>40 hr / week</span>
      </div>
      <div className="trans-arrow"><Icon name="arrow" size={14} /></div>
      <div className="trans-step">
        <span className="trans-tag automated">AUTOMATED</span>
        <div className="trans-bar">
          <span style={{ width: "15%", background: "linear-gradient(90deg, var(--blue), var(--sky))" }} />
        </div>
        <span className="trans-val" style={{ color: "var(--blue)" }}>6 hr / week</span>
      </div>
      <div className="trans-result">−85% time</div>
    </div>
  );
}

function M365Viz() {
  const apps = [
    { n: "Teams", c: "#4b53bc" }, { n: "Outlook", c: "#0078d4" },
    { n: "SharePoint", c: "#038387" }, { n: "OneDrive", c: "#0364b8" },
    { n: "Power BI", c: "#f2c811" }, { n: "Power Apps", c: "#742774" },
    { n: "Word", c: "#185abd" }, { n: "Excel", c: "#107c41" },
  ];
  return (
    <div className="m365-grid">
      {apps.map((a, i) => (
        <div key={i} className="m365-tile" style={{ animationDelay: `${i * 0.08}s` }}>
          <div className="m365-dot" style={{ background: a.c }} />
          <div className="m365-n">{a.n}</div>
        </div>
      ))}
    </div>
  );
}

/* ============ SAP Modules Mini-Viz ============ */
function SapModulesViz() {
  const mods = [
    ["Finance", "FI"], ["Controlling", "CO"], ["Sales", "SD"], ["Materials", "MM"],
    ["Production", "PP"], ["HCM", "HR"], ["Plant Maint.", "PM"], ["Quality", "QM"],
    ["Logistics", "LE"], ["Treasury", "TR"], ["BI", "BW"], ["Analytics", "SAC"],
  ];
  return (
    <div className="sap-grid">
      {mods.map(([n, t], i) => (
        <div key={i} className="sap-mod" style={{ animationDelay: `${i * 0.1}s` }}>
          <div className="sap-mod-tag">{t}</div>
          <div className="sap-mod-name">{n}</div>
        </div>
      ))}
    </div>
  );
}

/* ============ Infrastructure Viz ============ */
function InfraViz() {
  const nodes = [
    { lbl: "DC · Dubai", st: "PRIMARY", load: 88 },
    { lbl: "DC · Riyadh", st: "REPLICA", load: 72 },
    { lbl: "Edge · 12 PoPs", st: "ACTIVE", load: 64 },
    { lbl: "Cloud · 3 regions", st: "HEALTHY", load: 92 },
  ];
  return (
    <div className="infra-viz">
      {nodes.map((n, i) => (
        <div key={i} className="infra-node">
          <div className="infra-row">
            <span className="infra-lbl">{n.lbl}</span>
            <span className="infra-st">{n.st}</span>
          </div>
          <div className="infra-bar"><span style={{ width: `${n.load}%` }} /></div>
        </div>
      ))}
    </div>
  );
}

/* ============ Cloud Flow Mini-Viz ============ */
function CloudFlowViz() {
  return (
    <svg viewBox="0 0 320 120" className="cloud-flow" fill="none">
      <defs>
        <linearGradient id="cfLine" x1="0" x2="1">
          <stop offset="0%" stopColor="var(--sky)" stopOpacity="0" />
          <stop offset="50%" stopColor="var(--sky)" stopOpacity="1" />
          <stop offset="100%" stopColor="var(--sky)" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* on-prem to cloud */}
      <rect x="10" y="40" width="70" height="40" rx="6" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.2)" />
      <text x="45" y="55" textAnchor="middle" fontSize="9" fill="rgba(255,255,255,0.7)" fontFamily="var(--font-mono)">ON-PREM</text>
      <text x="45" y="68" textAnchor="middle" fontSize="8" fill="rgba(255,255,255,0.4)" fontFamily="var(--font-mono)">LEGACY</text>

      <rect x="240" y="20" width="70" height="32" rx="6" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.2)" />
      <text x="275" y="36" textAnchor="middle" fontSize="9" fill="var(--sky)" fontFamily="var(--font-mono)">AWS</text>
      <text x="275" y="46" textAnchor="middle" fontSize="7" fill="rgba(255,255,255,0.4)" fontFamily="var(--font-mono)">EKS · RDS</text>

      <rect x="240" y="60" width="70" height="32" rx="6" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.2)" />
      <text x="275" y="76" textAnchor="middle" fontSize="9" fill="var(--sky)" fontFamily="var(--font-mono)">AZURE</text>
      <text x="275" y="86" textAnchor="middle" fontSize="7" fill="rgba(255,255,255,0.4)" fontFamily="var(--font-mono)">AKS · SQL</text>

      <rect x="240" y="100" width="70" height="24" rx="6" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.2)" />
      <text x="275" y="116" textAnchor="middle" fontSize="9" fill="var(--sky)" fontFamily="var(--font-mono)">GCP · GKE</text>

      {/* hub */}
      <circle cx="160" cy="60" r="18" fill="rgba(255,255,255,0.04)" stroke="var(--sky)" />
      <text x="160" y="58" textAnchor="middle" fontSize="8" fill="white" fontFamily="var(--font-mono)">JSA</text>
      <text x="160" y="68" textAnchor="middle" fontSize="7" fill="rgba(255,255,255,0.6)" fontFamily="var(--font-mono)">MIGRATE</text>

      {/* lines */}
      {[[80, 60, 142, 60], [178, 55, 240, 36], [178, 60, 240, 76], [178, 65, 240, 112]].map(([x1, y1, x2, y2], i) => (
        <g key={i}>
          <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,0.15)" strokeWidth="1" />
          <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="url(#cfLine)" strokeWidth="2" strokeDasharray="6 8">
            <animate attributeName="stroke-dashoffset" from="0" to="-28" dur="1.6s" repeatCount="indefinite" />
          </line>
        </g>
      ))}
    </svg>
  );
}

/* ============ WHY CHOOSE US ============ */
function WhyUs() {
  const features = [
    { i: "users", t: "Senior consultants", d: "12+ year avg tenure across SAP, cloud, and security." },
    { i: "target", t: "Enterprise-grade delivery", d: "Reference architectures and risk-adjusted plans." },
    { i: "rocket", t: "End-to-end ownership", d: "Plan, build, run — no hand-offs that drop the ball." },
    { i: "chart", t: "Outcome-linked pricing", d: "Skin in the game when it makes sense for both sides." },
    { i: "clock", t: "Fast response SLAs", d: "Tier-1 incidents acknowledged in under 15 minutes." },
    { i: "cloud", t: "Scalable infrastructure", d: "From 50-seat office to 10K-user multi-region rollouts." },
    { i: "settings", t: "Custom business solutions", d: "We build what's bought-and-bent, not the other way around." },
    { i: "shield", t: "Dedicated account managers", d: "One name, one number — escalation that actually works." },
  ];
  return (
    <section className="section" id="why">
      <div className="why">
        <div className="why-grid-bg" />
        <div className="why-inner reveal">
          <div className="section-head section-head--row" style={{ marginBottom: 56 }}>
            <div>
              <span className="eyebrow why-eyebrow"><span className="dot" />Why JSA</span>
              <h2 style={{ marginTop: 18, maxWidth: 720 }}>
                Why businesses choose JSA<br />
                <span style={{ color: "color-mix(in oklch, white 50%, transparent)" }}>over the rest.</span>
              </h2>
            </div>
            <p className="lead" style={{ alignSelf: "flex-end" }}>
              We're not a body shop. We're a senior team that ships measurable outcomes —
              and stays around to make sure they hold.
            </p>
          </div>

          <div className="metrics">
            {[
              { v: 98, s: "%", l: "Client satisfaction" },
              { v: 24, s: "/7", l: "Enterprise support" },
              { v: 40, s: "%", l: "Faster operations" },
              { v: 60, s: "%", l: "Reduction in downtime" },
            ].map((m, i) => (
              <div key={i} className="metric">
                <div className="metric-value"><Counter to={m.v} suffix={m.s} /></div>
                <div className="metric-label">{m.l}</div>
              </div>
            ))}
          </div>

          <div className="why-features reveal-stagger">
            {features.map((f, i) => (
              <div key={i} className="why-feat-card">
                <div className="why-feat-ic"><Icon name={f.i} size={18} /></div>
                <div className="why-feat-t">{f.t}</div>
                <div className="why-feat-d">{f.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ Industries ============ */
function Industries() {
  const spotlight = {
    n: "Manufacturing",
    i: "factory",
    tag: "Most rolled-out",
    lead: "SAP S/4HANA + MES + IoT for plant-floor visibility",
    desc: "We've digitized 47 manufacturers across the GCC — F&B, plastics, building materials, and heavy industry — replacing legacy ERP, MES, and PLM silos with one unified, real-time stack.",
    kpis: [["47", "deployments"], ["12", "plants live"], ["35%", "OEE uplift"]],
    stack: ["SAP S/4HANA", "MES integration", "IoT telemetry", "Predictive maint."],
  };
  const inds = [
    { i: "shop", n: "Retail", tone: "amber", kpi: ["210+", "locations"], stack: ["POS · ERP", "Omnichannel", "Loyalty"], note: "Multi-format chains" },
    { i: "health", n: "Healthcare", tone: "rose", kpi: ["HIPAA", "ready"], stack: ["HIS · EMR", "Cloud DR", "Compliance"], note: "Hospital networks" },
    { i: "truck", n: "Logistics", tone: "blue", kpi: ["Fleet", "scale"], stack: ["TMS · WMS", "Fleet IoT", "Live track"], note: "3PL + last-mile" },
    { i: "bank", n: "Finance", tone: "green", kpi: ["CBUAE", "compliant"], stack: ["Core banking", "Risk · AML", "Reconcile"], note: "Banks · NBFI · Exchange" },
    { i: "book", n: "Education", tone: "violet", kpi: ["100K+", "users"], stack: ["LMS · SIS", "M365 · SSO", "Identity"], note: "Universities · GEMS · K-12" },
    { i: "home", n: "Real Estate", tone: "amber", kpi: ["+28%", "conversion"], stack: ["CRM · Marketing", "Automation", "Workflows"], note: "Developers + brokers" },
    { i: "cart", n: "E-commerce", tone: "blue", kpi: ["−62%", "p95 latency"], stack: ["Headless", "Search · CDP", "Personalize"], note: "DTC + marketplaces" },
  ];

  return (
    <section className="section" id="industries">
      <div className="container">
        <div className="section-head section-head--row reveal">
          <div>
            <span className="eyebrow"><span className="dot" />Industries we move</span>
            <h2 style={{ marginTop: 18 }}>Vertical-deep.<br />Technology-agnostic.</h2>
          </div>
          <p className="lead" style={{ alignSelf: "center" }}>
            Eight industries. Hundreds of rollouts. We meet you where the process actually lives —
            not where the slide deck says it should.
          </p>
        </div>

        <div className="ind-layout reveal-stagger">
          {/* Spotlight feature */}
          <article className="ind-spotlight">
            <div className="ind-spotlight-bg" />
            <div className="ind-spotlight-grid" />
            <div className="ind-spotlight-content">
              <div className="ind-spotlight-head">
                <div className="ind-spotlight-ic"><Icon name={spotlight.i} size={28} /></div>
                <span className="ind-spotlight-tag">{spotlight.tag}</span>
              </div>
              <h3 className="ind-spotlight-name">{spotlight.n}</h3>
              <p className="ind-spotlight-lead">{spotlight.lead}</p>
              <p className="ind-spotlight-desc">{spotlight.desc}</p>
              <div className="ind-spotlight-kpis">
                {spotlight.kpis.map(([v, l], i) => (
                  <div key={i} className="ind-kpi">
                    <div className="ind-kpi-v">{v}</div>
                    <div className="ind-kpi-l">{l}</div>
                  </div>
                ))}
              </div>
              <div className="ind-spotlight-stack">
                {spotlight.stack.map((s, i) => <span key={i} className="stack-chip">{s}</span>)}
              </div>
              <a href="#consult" className="btn btn-blue">Manufacturing playbook <Icon name="arrow" size={14} className="arr" /></a>
            </div>
            <div className="ind-spotlight-viz"><FactoryViz /></div>
          </article>

          {/* Industry cards */}
          {inds.map((x, i) => (
            <div key={i} className={`ind-card-v2 tone-${x.tone}`}>
              <div className="ind-card-v2-bg" />
              <div className="ind-card-v2-head">
                <div className="ind-card-v2-ic"><Icon name={x.i} size={22} /></div>
                <span className="ind-card-v2-arr"><Icon name="arrowUp" size={14} /></span>
              </div>
              <div className="ind-card-v2-body">
                <div className="ind-card-v2-name">{x.n}</div>
                <div className="ind-card-v2-note">{x.note}</div>
              </div>
              <div className="ind-card-v2-kpi">
                <span className="ind-card-v2-kpi-v">{x.kpi[0]}</span>
                <span className="ind-card-v2-kpi-l">{x.kpi[1]}</span>
              </div>
              <div className="ind-card-v2-stack">
                {x.stack.map((s, j) => <span key={j} className="ind-card-v2-tag">{s}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FactoryViz() {
  return (
    <svg viewBox="0 0 320 220" className="factory-viz" fill="none">
      <defs>
        <linearGradient id="fvBar" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--sky)" />
          <stop offset="100%" stopColor="var(--blue)" />
        </linearGradient>
      </defs>
      {/* Factory silhouette */}
      <path d="M20 200 L20 130 L60 110 L60 140 L100 120 L100 150 L140 130 L140 200Z M160 200 L160 110 L220 80 L220 200Z M240 200 L240 90 L300 70 L300 200Z"
            fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
      {/* Smoke stacks */}
      <rect x="70" y="80" width="6" height="40" fill="rgba(255,255,255,0.15)" />
      <rect x="180" y="50" width="6" height="40" fill="rgba(255,255,255,0.15)" />
      <rect x="260" y="40" width="6" height="40" fill="rgba(255,255,255,0.15)" />
      {/* Floating data points */}
      {[[90, 50, "OEE 87%"], [200, 30, "Down 2%"], [280, 25, "+12%"]].map(([x, y, t], i) => (
        <g key={i}>
          <rect x={x - 28} y={y - 12} width="56" height="22" rx="11"
                fill="rgba(15, 25, 45, 0.85)" stroke="var(--sky)" strokeOpacity="0.4" />
          <text x={x} y={y + 3} textAnchor="middle" fontSize="9.5" fill="var(--sky)" fontFamily="var(--font-mono)">{t}</text>
        </g>
      ))}
      {/* Bar chart bottom-left */}
      {[[35, 175, 18], [50, 160, 33], [65, 165, 28], [80, 150, 43], [95, 145, 48], [110, 140, 53], [125, 130, 63]].map(([x, y, h], i) => (
        <rect key={i} x={x} y={y} width="10" height={h} fill="url(#fvBar)" rx="1">
          <animate attributeName="height" values={`${h};${h - 15};${h}`} dur="2.4s" begin={`${i * 0.1}s`} repeatCount="indefinite" />
          <animate attributeName="y" values={`${y};${y + 15};${y}`} dur="2.4s" begin={`${i * 0.1}s`} repeatCount="indefinite" />
        </rect>
      ))}
      {/* Connecting line at top */}
      <path d="M62 90 Q140 60 196 60 T298 50" stroke="var(--sky)" strokeWidth="1.5" strokeDasharray="3 5" fill="none" opacity="0.6">
        <animate attributeName="stroke-dashoffset" from="0" to="-16" dur="2s" repeatCount="indefinite" />
      </path>
    </svg>
  );
}

/* ============ PROCESS ============ */
function Process() {
  const steps = [
    { t: "Consultation", d: "Free discovery call to map goals, gaps, and constraints — no slide deck pitch.", dur: "1 week" },
    { t: "Requirement analysis", d: "Deep audit of systems, processes, data flows, and the team that runs them.", dur: "2–3 wk" },
    { t: "Solution design", d: "Reference architecture, ROI projection, and risk-adjusted phased plan, signed off.", dur: "2 weeks" },
    { t: "Implementation", d: "Phased rollout with zero-downtime cutover and dual-run safety nets.", dur: "4–24 wk" },
    { t: "Training & deployment", d: "Team enablement, runbooks, and go-live war-room with senior consultants on site.", dur: "2–4 wk" },
    { t: "Ongoing support", d: "24/7 SLA-backed managed operations, with quarterly business reviews and optimization.", dur: "Ongoing" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-2)", borderBlock: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-head section-head--row reveal">
          <div>
            <span className="eyebrow"><span className="dot" />How we work</span>
            <h2 style={{ marginTop: 18 }}>A six-step process,<br />refined over 500+ rollouts.</h2>
          </div>
          <p className="lead" style={{ alignSelf: "center" }}>
            Predictable, transparent, and outcome-driven. You always know what's happening, when,
            and why.
          </p>
        </div>
        <div className="process reveal-stagger">
          {steps.map((s, i) => (
            <div key={i} className="proc-step">
              <div className="proc-num">0{i + 1}</div>
              <div className="proc-title">{s.t}</div>
              <div className="proc-desc">{s.d}</div>
              <div className="proc-dur">{s.dur}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.JsaLogo = JsaLogo;
window.Nav = Nav;
window.Hero = Hero;
window.TrustBar = TrustBar;
window.PlatformStack = PlatformStack;
window.Services = Services;
window.WhyUs = WhyUs;
window.Industries = Industries;
window.Process = Process;