// Reusable SVG/visual fragments for NSS Software

const BrandMark = () => (
  <svg viewBox="0 0 24 24" fill="none" className="brand-mark-svg">
    <rect x="2" y="2" width="20" height="20" rx="1.5" stroke="currentColor" strokeWidth="1.2" className="bm-rect" />
    <path d="M6 18 L6 6 L18 18 L18 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" className="bm-n" />
    <circle cx="12" cy="12" r="1.2" fill="var(--accent)" className="bm-dot" />
  </svg>
);

// Animated HiperFrame — corner brackets + scan line for hero
const HiperFrames = () => (
  <div className="hiper-frames" aria-hidden="true">
    <svg className="hf-corner hf-tl" viewBox="0 0 48 48" fill="none">
      <path d="M0 28 L0 0 L28 0" stroke="var(--accent)" strokeWidth="1.2" className="hf-path" />
      <path d="M0 0 L4 0 M0 0 L0 4" stroke="var(--accent)" strokeWidth="0.6" opacity="0.5" />
    </svg>
    <svg className="hf-corner hf-tr" viewBox="0 0 48 48" fill="none">
      <path d="M48 28 L48 0 L20 0" stroke="var(--accent)" strokeWidth="1.2" className="hf-path" />
    </svg>
    <svg className="hf-corner hf-bl" viewBox="0 0 48 48" fill="none">
      <path d="M0 20 L0 48 L28 48" stroke="var(--accent)" strokeWidth="1.2" className="hf-path" />
    </svg>
    <svg className="hf-corner hf-br" viewBox="0 0 48 48" fill="none">
      <path d="M48 20 L48 48 L20 48" stroke="var(--accent)" strokeWidth="1.2" className="hf-path" />
    </svg>
    <div className="hf-scan" />
    <div className="hf-mid-h" />
  </div>
);

// Architectural hero figure — slow rotating wireframe scaffolding
const HeroFigure = () => {
  const cellLines = [];
  for (let i = 0; i <= 8; i++) {
    cellLines.push(<line key={`h${i}`} x1="0" y1={i * 50} x2="400" y2={i * 50} className="ln" />);
    cellLines.push(<line key={`v${i}`} x1={i * 50} y1="0" x2={i * 50} y2="400" className="ln" />);
  }
  return (
    <svg viewBox="0 0 400 420" preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="hfade" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--fg)" stopOpacity="0.18" />
          <stop offset="100%" stopColor="var(--fg)" stopOpacity="0" />
        </linearGradient>
        <linearGradient id="haccent" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.7" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <g opacity="0.5">{cellLines}</g>
      {/* axonometric tower */}
      <g transform="translate(80 60)">
        {/* base footprint */}
        <polygon points="0,200 120,140 240,200 120,260" fill="none" stroke="var(--fg-2, #ccc)" strokeOpacity="0.5" strokeWidth="1" />
        {/* tower bays */}
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <g key={i} transform={`translate(0 ${-i * 28})`}>
            <polygon points="0,200 120,140 240,200 120,260" fill="none" stroke="var(--fg-2, #ccc)" strokeOpacity={0.25 + i * 0.04} strokeWidth="0.8" />
          </g>
        ))}
        {/* verticals */}
        <line x1="0" y1="200" x2="0" y2="60" stroke="var(--fg-2)" strokeOpacity="0.5" />
        <line x1="120" y1="140" x2="120" y2="0" stroke="var(--fg-2)" strokeOpacity="0.5" />
        <line x1="240" y1="200" x2="240" y2="60" stroke="var(--fg-2)" strokeOpacity="0.5" />
        <line x1="120" y1="260" x2="120" y2="120" stroke="var(--fg-2)" strokeOpacity="0.5" />
        {/* roof */}
        <polygon points="0,60 120,0 240,60 120,120" fill="url(#hfade)" stroke="var(--fg)" strokeOpacity="0.6" strokeWidth="1" />
        {/* accent beam */}
        <line x1="120" y1="0" x2="120" y2="260" stroke="url(#haccent)" strokeWidth="1.4" />
        <circle cx="120" cy="0" r="3" fill="var(--accent)" className="pulse-dot" />
      </g>
      {/* corner ticks */}
      <g stroke="var(--fg-3)" strokeWidth="1">
        <path d="M0 0 L14 0 M0 0 L0 14" />
        <path d="M400 0 L386 0 M400 0 L400 14" />
        <path d="M0 420 L14 420 M0 420 L0 406" />
        <path d="M400 420 L386 420 M400 420 L400 406" />
      </g>
    </svg>
  );
};

// Wireframe placed on top of service cards — varies per service
const SvcWire = ({ kind }) => {
  if (kind === "landing") {
    return (
      <svg viewBox="0 0 200 60" preserveAspectRatio="none">
        <rect x="0.5" y="0.5" width="199" height="14" className="ln" />
        <rect x="6" y="22" width="60" height="32" className="ln-strong" />
        <line x1="76" y1="26" x2="180" y2="26" className="ln-strong" />
        <line x1="76" y1="36" x2="160" y2="36" className="ln" />
        <line x1="76" y1="46" x2="140" y2="46" className="ln" />
        <line x1="6" y1="7" x2="20" y2="7" className="accent" />
      </svg>
    );
  }
  if (kind === "gallery") {
    return (
      <svg viewBox="0 0 200 60" preserveAspectRatio="none">
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <rect key={i} x={6 + (i % 6) * 32} y={6} width="28" height="22" className="ln" fill={i === 2 ? "var(--accent)" : "transparent"} fillOpacity={i === 2 ? 0.25 : 0} />
        ))}
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <rect key={`b${i}`} x={6 + (i % 6) * 32} y={32} width="28" height="22" className="ln" />
        ))}
      </svg>
    );
  }
  if (kind === "portfolio") {
    return (
      <svg viewBox="0 0 200 60" preserveAspectRatio="none">
        <rect x="6" y="6" width="44" height="48" className="ln-strong" />
        <rect x="56" y="6" width="44" height="22" className="ln" />
        <rect x="56" y="32" width="44" height="22" className="ln" />
        <rect x="106" y="6" width="88" height="48" className="ln" />
        <line x1="112" y1="14" x2="180" y2="14" className="accent" />
      </svg>
    );
  }
  if (kind === "corp") {
    return (
      <svg viewBox="0 0 200 60" preserveAspectRatio="none">
        <rect x="0.5" y="0.5" width="199" height="10" className="ln" />
        <rect x="6" y="18" width="40" height="36" className="ln-strong" />
        <rect x="52" y="18" width="92" height="16" className="ln" />
        <rect x="52" y="38" width="44" height="16" className="ln" />
        <rect x="100" y="38" width="44" height="16" className="ln" />
        <rect x="150" y="18" width="44" height="36" className="ln" />
        <line x1="6" y1="4" x2="20" y2="4" className="accent" />
      </svg>
    );
  }
  if (kind === "ecom") {
    return (
      <svg viewBox="0 0 200 60" preserveAspectRatio="none">
        <rect x="6" y="6" width="40" height="48" className="ln-strong" />
        <line x1="12" y1="40" x2="40" y2="40" className="accent" />
        {[0, 1, 2, 3].map((i) => (
          <rect key={i} x={52 + i * 36} y={6} width="32" height="32" className="ln" />
        ))}
        {[0, 1, 2, 3].map((i) => (
          <line key={`l${i}`} x1={52 + i * 36} y1="44" x2={68 + i * 36} y2="44" className="ln" />
        ))}
        {[0, 1, 2, 3].map((i) => (
          <line key={`p${i}`} x1={52 + i * 36} y1="50" x2={76 + i * 36} y2="50" className="ln" />
        ))}
      </svg>
    );
  }
  // hosting
  return (
    <svg viewBox="0 0 200 60" preserveAspectRatio="none">
      <polyline points="6,40 30,32 54,38 80,20 106,28 132,16 158,24 188,12" className="accent" />
      <polyline points="6,50 30,46 54,48 80,38 106,42 132,32 158,38 188,28" className="ln-strong" />
      <line x1="6" y1="6" x2="194" y2="6" className="ln" />
      <line x1="6" y1="56" x2="194" y2="56" className="ln" />
      <circle cx="80" cy="20" r="2" fill="var(--accent)" />
    </svg>
  );
};

// AI diagram — node network with central agent
const AiDiagram = () => {
  const nodes = [
    { x: 50, y: 50, label: "WEB", main: false },
    { x: 50, y: 250, label: "WHATSAPP", main: false },
    { x: 50, y: 450, label: "TELEGRAM", main: false },
    { x: 250, y: 250, label: "NSS AGENT", main: true },
    { x: 450, y: 80, label: "ORDERS" },
    { x: 450, y: 180, label: "INVENTORY" },
    { x: 450, y: 280, label: "CRM" },
    { x: 450, y: 380, label: "NOTIFY" },
    { x: 450, y: 480, label: "ESCALATE" },
  ];
  const edges = [
    [0, 3], [1, 3], [2, 3],
    [3, 4], [3, 5], [3, 6], [3, 7], [3, 8],
  ];
  return (
    <svg viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
      <defs>
        <radialGradient id="agentGlow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* faint grid */}
      <g stroke="var(--line)" strokeWidth="0.5">
        {[1, 2, 3, 4].map((i) => <line key={`gh${i}`} x1="0" y1={i * 100} x2="500" y2={i * 100} />)}
        {[1, 2, 3, 4].map((i) => <line key={`gv${i}`} x1={i * 100} y1="0" x2={i * 100} y2="500" />)}
      </g>
      <circle cx="250" cy="250" r="100" fill="url(#agentGlow)" />
      {edges.map(([a, b], i) => (
        <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y}
          stroke="var(--fg-3)" strokeWidth="0.8" strokeDasharray="2 4" />
      ))}
      {nodes.map((n, i) => (
        <g key={i} transform={`translate(${n.x} ${n.y})`}>
          {n.main ? (
            <>
              <circle r="36" fill="var(--bg-2)" stroke="var(--accent)" strokeWidth="1.2" />
              <circle r="6" fill="var(--accent)" className="pulse-dot" />
              <text y="56" textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fill="var(--fg)" letterSpacing="1.4">{n.label}</text>
            </>
          ) : (
            <>
              <rect x="-30" y="-12" width="60" height="24" fill="var(--bg-2)" stroke="var(--fg-3)" strokeWidth="0.8" />
              <text textAnchor="middle" dy="4" fontFamily="var(--mono)" fontSize="9" fill="var(--fg-2)" letterSpacing="1.2">{n.label}</text>
            </>
          )}
        </g>
      ))}
    </svg>
  );
};

// Asymmetric placeholder slot (used in case studies, etc.)
const Slot = ({ label, style }) => (
  <div className="slot" style={style}>
    <div className="slot-label">{label}</div>
  </div>
);

Object.assign(window, { BrandMark, HeroFigure, SvcWire, AiDiagram, Slot, HiperFrames });
