/* Industries — 5 verticals with feathered abstract SVG visualizations */

function IndustryViz({ kind }) {
  // All viz are pure-greyscale, feather-masked into white
  const styleWrap = {
    position: "absolute",
    inset: 0,
    WebkitMaskImage:
      "radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0) 100%)",
    maskImage:
      "radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0) 100%)",
  };

  if (kind === "finserv") {
    // Candlestick-meets-network
    return (
      <div style={styleWrap}>
        <svg viewBox="0 0 200 120" width="100%" height="100%" preserveAspectRatio="none">
          {Array.from({ length: 22 }).map((_, i) => {
            const x = 10 + i * 8.5;
            const h = 18 + Math.abs(Math.sin(i * 1.3)) * 50;
            const y = 60 - h / 2 + Math.sin(i * 0.6) * 10;
            return (
              <g key={i}>
                <line x1={x} y1={y - 4} x2={x} y2={y + h + 4} stroke="#0a0a0a" strokeWidth="0.5" />
                <rect x={x - 2} y={y} width="4" height={h} fill={i % 5 === 0 ? "var(--acc)" : "#0a0a0a"} />
              </g>
            );
          })}
          <path
            d="M0,80 Q40,55 80,68 T160,50 T200,38"
            stroke="#0a0a0a"
            strokeWidth="0.6"
            fill="none"
            strokeDasharray="2 2"
          />
        </svg>
      </div>
    );
  }
  if (kind === "health") {
    // ECG / molecular structure
    return (
      <div style={styleWrap}>
        <svg viewBox="0 0 200 120" width="100%" height="100%" preserveAspectRatio="none">
          <path
            d="M0,70 L40,70 L48,40 L56,95 L64,55 L72,70 L120,70 L128,30 L136,95 L144,60 L152,70 L200,70"
            stroke="#0a0a0a"
            strokeWidth="1"
            fill="none"
          />
          {/* Helix dots */}
          {Array.from({ length: 18 }).map((_, i) => {
            const x = i * 12;
            const y1 = 30 + Math.sin(i * 0.7) * 12;
            const y2 = 30 + Math.sin(i * 0.7 + Math.PI) * 12;
            return (
              <g key={i} opacity="0.5">
                <circle cx={x} cy={y1} r="1.2" fill="#0a0a0a" />
                <circle cx={x} cy={y2} r="1.2" fill="#0a0a0a" />
                <line x1={x} y1={y1} x2={x} y2={y2} stroke="#0a0a0a" strokeWidth="0.3" />
              </g>
            );
          })}
        </svg>
      </div>
    );
  }
  if (kind === "mfg") {
    // Wireframe gear / isometric
    return (
      <div style={styleWrap}>
        <svg viewBox="0 0 200 120" width="100%" height="100%" preserveAspectRatio="none">
          <g transform="translate(100,60)">
            {Array.from({ length: 12 }).map((_, i) => {
              const a = (i / 12) * Math.PI * 2;
              return (
                <line
                  key={i}
                  x1={Math.cos(a) * 18}
                  y1={Math.sin(a) * 18}
                  x2={Math.cos(a) * 48}
                  y2={Math.sin(a) * 48}
                  stroke="#0a0a0a"
                  strokeWidth="0.7"
                />
              );
            })}
            <circle cx="0" cy="0" r="42" stroke="#0a0a0a" strokeWidth="0.8" fill="none" />
            <circle cx="0" cy="0" r="22" stroke="#0a0a0a" strokeWidth="0.8" fill="none" />
            <circle cx="0" cy="0" r="3" fill="var(--acc)" />
          </g>
          {/* Iso grid */}
          {Array.from({ length: 8 }).map((_, i) => (
            <line
              key={i}
              x1={-20 + i * 30}
              y1="120"
              x2={20 + i * 30}
              y2="60"
              stroke="#0a0a0a"
              strokeWidth="0.3"
              opacity="0.3"
            />
          ))}
        </svg>
      </div>
    );
  }
  if (kind === "energy") {
    // Grid / load curve
    return (
      <div style={styleWrap}>
        <svg viewBox="0 0 200 120" width="100%" height="100%" preserveAspectRatio="none">
          {/* Grid */}
          {Array.from({ length: 8 }).map((_, i) => (
            <line key={`h${i}`} x1="0" y1={i * 15} x2="200" y2={i * 15} stroke="#0a0a0a" strokeWidth="0.25" opacity="0.4" />
          ))}
          {Array.from({ length: 14 }).map((_, i) => (
            <line key={`v${i}`} x1={i * 15} y1="0" x2={i * 15} y2="120" stroke="#0a0a0a" strokeWidth="0.25" opacity="0.4" />
          ))}
          {/* Two curves */}
          <path d="M0,90 Q40,30 80,60 T160,40 T200,55" stroke="#0a0a0a" strokeWidth="1.2" fill="none" />
          <path d="M0,95 Q40,80 80,72 T160,68 T200,72" stroke="var(--acc)" strokeWidth="1" fill="none" strokeDasharray="3 2" />
          {/* Nodes */}
          {[20, 60, 100, 140, 180].map((x, i) => (
            <circle key={i} cx={x} cy={50 + Math.sin(i) * 20} r="2" fill="#0a0a0a" />
          ))}
        </svg>
      </div>
    );
  }
  if (kind === "logistics") {
    // Network / route map
    return (
      <div style={styleWrap}>
        <svg viewBox="0 0 200 120" width="100%" height="100%" preserveAspectRatio="none">
          {(() => {
            const nodes = [
              [20, 30], [60, 20], [100, 50], [140, 25], [180, 60],
              [40, 80], [90, 95], [130, 80], [170, 95],
            ];
            const edges = [
              [0, 1], [1, 2], [2, 3], [3, 4],
              [0, 5], [5, 6], [6, 7], [7, 8],
              [2, 6], [3, 7], [1, 5], [4, 8],
            ];
            return (
              <g>
                {edges.map(([a, b], i) => (
                  <line
                    key={i}
                    x1={nodes[a][0]}
                    y1={nodes[a][1]}
                    x2={nodes[b][0]}
                    y2={nodes[b][1]}
                    stroke="#0a0a0a"
                    strokeWidth="0.5"
                    opacity="0.5"
                  />
                ))}
                {nodes.map(([x, y], i) => (
                  <g key={i}>
                    <circle cx={x} cy={y} r={i === 2 ? 4 : 2.5} fill={i === 2 ? "var(--acc)" : "#0a0a0a"} />
                    {i === 2 && <circle cx={x} cy={y} r="8" stroke="#0a0a0a" strokeWidth="0.4" fill="none" />}
                  </g>
                ))}
              </g>
            );
          })()}
        </svg>
      </div>
    );
  }
  return null;
}

const INDUSTRIES = [
  {
    sector: "Sector 01",
    title: "Financial\nServices",
    viz: "finserv",
    items: [
      ["Use-case", "Surveillance / risk"],
      ["Regulatory", "EU AI Act · MiFID II"],
      ["Stack", "RAG / LLM / Graph"],
    ],
  },
  {
    sector: "Sector 02",
    title: "Healthcare\n& Life Sciences",
    viz: "health",
    items: [
      ["Use-case", "Clinical decision support"],
      ["Regulatory", "MHRA · MDR · HIPAA"],
      ["Stack", "Multimodal / Edge"],
    ],
  },
  {
    sector: "Sector 03",
    title: "Manufacturing\n& Industrial",
    viz: "mfg",
    items: [
      ["Use-case", "Predictive maintenance"],
      ["Regulatory", "ISO 9001 · IEC 62443"],
      ["Stack", "ESP32 · Edge · CV"],
    ],
  },
  {
    sector: "Sector 04",
    title: "Energy\n& Utilities",
    viz: "energy",
    items: [
      ["Use-case", "Grid optimisation"],
      ["Regulatory", "Ofgem · NIS2"],
      ["Stack", "Time-series / Forecast"],
    ],
  },
  {
    sector: "Sector 05",
    title: "Logistics\n& Supply Chain",
    viz: "logistics",
    items: [
      ["Use-case", "Route &amp; demand"],
      ["Regulatory", "GDPR · Customs"],
      ["Stack", "Graph · IoT · Agentic"],
    ],
  },
];

function Industries() {
  return (
    <section id="industries">
      <div className="page">
        <div className="section-head">
          <div className="index">
            <span className="dot"></span>05 / Industries
          </div>
          <div>
            <h2>Sector practice. Five core&nbsp;verticals.</h2>
            <p className="lede">
              ROZUMCODE engages across five core verticals. Each carries
              distinct regulatory requirements, data structures, and
              operational risk profiles. Engagement teams are staffed for
              domain experience as well as technical specialism.
            </p>
          </div>
        </div>

        <div className="industries-grid">
          {INDUSTRIES.map((ind) => (
            <article className="industry" key={ind.sector}>
              <div className="sector">{ind.sector}</div>
              <h3 style={{ whiteSpace: "pre-line" }}>{ind.title}</h3>
              <div className="industry-viz">
                <IndustryViz kind={ind.viz} />
              </div>
              <ul>
                {ind.items.map(([k, v]) => (
                  <li key={k}>
                    <span>{k}</span>
                    <span dangerouslySetInnerHTML={{ __html: v }} />
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Industries });