/*
  Stylized SVG visuals of a Milky Way enterprise map.
  Three flavors:
    - HeroMap: medium-density, animated, with customer-journey arm
    - CompactMap: tighter, for the "what is the map" section
    - PerspectiveMap: switches highlight set based on selected lens
*/

const cap = (x, y, w, h, label, tools, opts = {}) => ({ x, y, w, h, label, tools, ...opts });

// Hero map nodes — abstracted, cleaner than the original but recognizable
const HERO_NODES = [
  cap(70,  150, 130, 56, "Marketing",        ["EXCEL", "FILE-SYS"]),
  cap(230, 110, 150, 56, "Campaign & Sales", ["EMAIL", "QLIK"]),
  cap(410, 130, 130, 56, "Search & Find",    ["GOOGLE"]),
  cap(570, 110, 130, 56, "Digital Booking",  ["ADMINWEB"]),
  cap(720, 130, 130, 56, "Payments",         ["VISMA"]),
  cap(870, 100, 150, 56, "Customer Support", ["CRM", "COURSEWEB"]),

  cap(50,  280, 140, 56, "Cost calc.",       ["FINANCE"]),
  cap(210, 300, 140, 56, "Price calc.",      ["EXCEL"]),
  cap(380, 280, 160, 56, "Content prod.",    ["COURSEWEB"]),

  cap(70,  430, 150, 56, "Staff selection",  ["E-LEARN"]),
  cap(240, 450, 150, 56, "Contract mgmt.",   ["FILE-SYS"]),
  cap(420, 430, 150, 56, "Course design",    ["POWERPT"], { partner: true }),

  cap(720, 280, 160, 56, "Course delivery",  ["COURSEWEB"], { partner: true }),
  cap(900, 310, 140, 56, "Evaluation",       ["WEBEVAL"]),
  cap(720, 430, 160, 56, "Sales analysis",   ["QLIK"]),
  cap(900, 450, 140, 56, "Invoicing",        ["DIGI-INV"]),
];

const HUB = { cx: 555, cy: 295, r: 64 };

const STICKIES = [
  { x: HUB.cx - 30, y: HUB.cy - 130, label: "Marketing", color: "#f4a261" },
  { x: HUB.cx + 80, y: HUB.cy - 60,  label: "Deliver",   color: "#7ee787" },
  { x: HUB.cx + 50, y: HUB.cy + 80,  label: "Follow up", color: "#a78bfa" },
  { x: HUB.cx - 110, y: HUB.cy + 60, label: "Plan",      color: "#f472b6" },
  { x: HUB.cx - 130, y: HUB.cy - 40, label: "Productify", color: "#facc15" },
];

function CapBox({ node, dim, highlight }) {
  const cls = highlight ? "cap-box hl" : dim ? "cap-box dim" : "cap-box";
  return (
    <g className={cls} transform={`translate(${node.x}, ${node.y})`}>
      <rect
        width={node.w} height={node.h} rx="6"
        fill={node.partner ? "#19243a" : "#1a1a26"}
        stroke={highlight ? "#7ee787" : node.partner ? "#2a3f5a" : "#262638"}
        strokeWidth={highlight ? "1.5" : "1"}
      />
      <text x="10" y="20" fontSize="11" fill={highlight ? "#f4f4f7" : "#c9c9d3"} fontFamily="Geist, sans-serif" fontWeight="500">
        {node.label}
      </text>
      {node.tools && (
        <g transform="translate(10, 30)">
          {node.tools.map((t, i) => (
            <g key={i} transform={`translate(${i * 56}, 0)`}>
              <rect width="50" height="16" rx="3" fill="#0a0a12" stroke="#2a2a38" />
              <text x="25" y="11" textAnchor="middle" fontSize="8" fill="#7a7a8c" fontFamily="Geist Mono, monospace" letterSpacing="0.06em">
                {t}
              </text>
            </g>
          ))}
        </g>
      )}
    </g>
  );
}

function CustomerJourney({ animated = true }) {
  // Curving "galaxy arm" that wraps the top of the map
  const path = "M 20 60 C 200 -40, 500 30, 760 40 S 1050 60, 1100 180 L 1100 360 C 1080 480, 980 540, 800 540 S 240 520, 100 540";
  return (
    <g className="journey">
      <path
        d={path}
        fill="none"
        stroke="url(#journeyGrad)"
        strokeWidth="2"
        strokeLinecap="round"
        strokeDasharray="6 8"
        style={animated ? { animation: "dash 6s linear infinite" } : {}}
      />
      {/* Touch points */}
      {[0.05, 0.18, 0.32, 0.48, 0.62, 0.78, 0.92].map((t, i) => {
        // Approximate positions along the path
        const positions = [
          [30, 50], [200, 8], [400, 22], [620, 42], [900, 70], [1095, 280], [950, 535]
        ];
        const [x, y] = positions[i] || [0, 0];
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="4" fill="#7ee787" />
            <circle cx={x} cy={y} r="9" fill="none" stroke="#7ee787" strokeOpacity="0.3" style={{ animation: `pulse 2.${i}s ease-in-out infinite` }} />
          </g>
        );
      })}
    </g>
  );
}

function Hub({ stickies = STICKIES, label = "UniBiz" }) {
  return (
    <g transform={`translate(${HUB.cx}, ${HUB.cy})`}>
      {/* outer ring */}
      <circle r="120" fill="none" stroke="#1a1a26" strokeWidth="1" strokeDasharray="2 4" />
      <circle r="90"  fill="none" stroke="#1a1a26" strokeWidth="1" />
      {/* hub disc */}
      <circle r={HUB.r + 4} fill="#0a0a12" stroke="#262638" />
      <circle r={HUB.r}     fill="url(#hubGrad)" stroke="#33334a" />
      <text y="4" textAnchor="middle" fontSize="14" fill="#f4f4f7" fontFamily="Instrument Serif, serif" fontStyle="italic" fontWeight="400">
        {label}
      </text>

      {/* stickies */}
      {stickies.map((s, i) => (
        <g key={i} transform={`translate(${s.x - HUB.cx - 28}, ${s.y - HUB.cy - 12})`}>
          <rect width="56" height="24" rx="3" fill={s.color} opacity="0.9" />
          <text x="28" y="15" textAnchor="middle" fontSize="9" fill="#0a0a12" fontFamily="Geist, sans-serif" fontWeight="600">
            {s.label}
          </text>
        </g>
      ))}
    </g>
  );
}

// Connections from hub to selected capabilities
function HubLinks({ targets, color = "#7ee787", dashed = false }) {
  return (
    <g opacity="0.7">
      {targets.map((t, i) => {
        const tx = t.x + t.w / 2;
        const ty = t.y + t.h / 2;
        return (
          <line key={i} x1={HUB.cx} y1={HUB.cy} x2={tx} y2={ty}
            stroke={color} strokeWidth="0.8" strokeDasharray={dashed ? "3 4" : "0"} />
        );
      })}
    </g>
  );
}

// Inter-capability connection arrows
function Flows({ pairs, color = "#3a3a52" }) {
  return (
    <g>
      {pairs.map(([a, b], i) => {
        const x1 = a.x + a.w; const y1 = a.y + a.h / 2;
        const x2 = b.x;       const y2 = b.y + b.h / 2;
        const mx = (x1 + x2) / 2;
        return (
          <path key={i} d={`M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`}
            stroke={color} strokeWidth="0.8" fill="none" />
        );
      })}
    </g>
  );
}

function MapDefs() {
  return (
    <defs>
      <linearGradient id="journeyGrad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="#7ee787" stopOpacity="0.4" />
        <stop offset="50%" stopColor="#7ee787" stopOpacity="1" />
        <stop offset="100%" stopColor="#7ee787" stopOpacity="0.4" />
      </linearGradient>
      <radialGradient id="hubGrad" cx="50%" cy="40%">
        <stop offset="0%" stopColor="#262638" />
        <stop offset="100%" stopColor="#15151f" />
      </radialGradient>
      <radialGradient id="canvasGlow" cx="50%" cy="50%">
        <stop offset="0%" stopColor="#7ee787" stopOpacity="0.05" />
        <stop offset="100%" stopColor="#7ee787" stopOpacity="0" />
      </radialGradient>
    </defs>
  );
}

function HeroMap({ animated = true }) {
  const flows = [
    [HERO_NODES[0], HERO_NODES[1]],
    [HERO_NODES[1], HERO_NODES[2]],
    [HERO_NODES[2], HERO_NODES[3]],
    [HERO_NODES[3], HERO_NODES[4]],
    [HERO_NODES[4], HERO_NODES[5]],
    [HERO_NODES[6], HERO_NODES[7]],
    [HERO_NODES[7], HERO_NODES[8]],
    [HERO_NODES[9], HERO_NODES[10]],
    [HERO_NODES[10], HERO_NODES[11]],
    [HERO_NODES[12], HERO_NODES[13]],
    [HERO_NODES[14], HERO_NODES[15]],
  ];
  return (
    <svg viewBox="0 0 1120 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Milky Way enterprise map">
      <MapDefs />
      <rect width="1120" height="600" fill="url(#canvasGlow)" />
      <Flows pairs={flows} />
      <HubLinks targets={[HERO_NODES[1], HERO_NODES[8], HERO_NODES[10], HERO_NODES[12], HERO_NODES[14]]} color="#7ee787" dashed />
      <CustomerJourney animated={animated} />
      {HERO_NODES.map((n, i) => <CapBox key={i} node={n} />)}
      <Hub />

      {/* Title corner */}
      <g transform="translate(20, 24)">
        <text fontSize="11" fill="#7a7a8c" fontFamily="Geist Mono, monospace" letterSpacing="0.1em">
          MILKY WAY v1.2 · UniBiz · 2026
        </text>
      </g>

      {/* Legend */}
      <g transform="translate(900, 560)">
        <rect width="12" height="12" rx="2" fill="#1a1a26" stroke="#262638" />
        <text x="18" y="10" fontSize="9" fill="#7a7a8c" fontFamily="Geist Mono, monospace">OWN</text>
        <rect x="60" width="12" height="12" rx="2" fill="#19243a" stroke="#2a3f5a" />
        <text x="78" y="10" fontSize="9" fill="#7a7a8c" fontFamily="Geist Mono, monospace">PARTNER</text>
        <line x1="135" y1="6" x2="160" y2="6" stroke="#7ee787" strokeWidth="2" strokeDasharray="3 3" />
        <text x="166" y="10" fontSize="9" fill="#7a7a8c" fontFamily="Geist Mono, monospace">JOURNEY</text>
      </g>
    </svg>
  );
}

// --- Compact map (used in "what is" section) ---

const COMPACT_NODES = [
  cap(60,  60,  120, 50, "Acquire",   ["CRM"]),
  cap(210, 80,  120, 50, "Onboard",   ["FORM"]),
  cap(360, 60,  120, 50, "Activate",  ["APP"]),
  cap(510, 80,  120, 50, "Bill",      ["STRIPE"]),
  cap(60,  220, 120, 50, "Support",   ["DESK"]),
  cap(210, 240, 120, 50, "Retain",    ["EMAIL"]),
  cap(510, 240, 120, 50, "Expand",    ["DATA"]),
];

function CompactMap() {
  const hubCx = 410, hubCy = 165, hubR = 40;
  return (
    <svg viewBox="0 0 680 320" xmlns="http://www.w3.org/2000/svg">
      <MapDefs />
      <rect width="680" height="320" fill="url(#canvasGlow)" />

      {/* journey */}
      <path d="M 20 30 C 200 -10, 480 0, 640 30 L 640 280 C 480 320, 200 320, 20 280 Z"
        fill="none" stroke="#7ee787" strokeWidth="1.5" strokeDasharray="4 6" opacity="0.6" />

      {/* connections from hub */}
      {COMPACT_NODES.map((n, i) => (
        <line key={i} x1={hubCx} y1={hubCy} x2={n.x + n.w/2} y2={n.y + n.h/2}
          stroke="#262638" strokeWidth="0.8" />
      ))}

      {COMPACT_NODES.map((n, i) => <CapBox key={i} node={n} />)}

      <g transform={`translate(${hubCx}, ${hubCy})`}>
        <circle r={hubR + 3} fill="#0a0a12" stroke="#262638" />
        <circle r={hubR} fill="url(#hubGrad)" stroke="#33334a" />
        <text y="5" textAnchor="middle" fontSize="13" fill="#f4f4f7" fontFamily="Instrument Serif, serif" fontStyle="italic">
          Your co.
        </text>
      </g>
    </svg>
  );
}

// --- Perspective map: same map, different lens ---

const PERSP_HIGHLIGHTS = {
  operations: [1, 2, 3, 4, 5, 12, 13],     // customer-facing flow
  tactics:    [0, 6, 7, 8, 9, 10, 14],      // capabilities + planning
  strategy:   [11, 12, 13, 14, 15],         // delivery + analysis
};

function PerspectiveMap({ lens = "operations" }) {
  const highlights = new Set(PERSP_HIGHLIGHTS[lens] || []);
  const color = lens === "operations" ? "#7ee787" : lens === "tactics" ? "#a78bfa" : "#facc15";
  return (
    <svg viewBox="0 0 1120 600" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="journeyGrad2" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.3" />
          <stop offset="50%" stopColor={color} stopOpacity="0.9" />
          <stop offset="100%" stopColor={color} stopOpacity="0.3" />
        </linearGradient>
        <radialGradient id="hubGrad2" cx="50%" cy="40%">
          <stop offset="0%" stopColor="#262638" />
          <stop offset="100%" stopColor="#15151f" />
        </radialGradient>
      </defs>

      <Flows pairs={[
        [HERO_NODES[0], HERO_NODES[1]],
        [HERO_NODES[1], HERO_NODES[2]],
        [HERO_NODES[2], HERO_NODES[3]],
        [HERO_NODES[3], HERO_NODES[4]],
        [HERO_NODES[4], HERO_NODES[5]],
        [HERO_NODES[6], HERO_NODES[7]],
        [HERO_NODES[9], HERO_NODES[10]],
        [HERO_NODES[12], HERO_NODES[13]],
        [HERO_NODES[14], HERO_NODES[15]],
      ]} />

      {/* lens-specific journey only for operations */}
      {lens === "operations" && (
        <path d="M 20 60 C 200 -40, 500 30, 760 40 S 1050 60, 1100 180 L 1100 360 C 1080 480, 980 540, 800 540 S 240 520, 100 540"
          fill="none" stroke="url(#journeyGrad2)" strokeWidth="2" strokeDasharray="6 8"
          style={{ animation: "dash 6s linear infinite" }} />
      )}

      {HERO_NODES.map((n, i) => (
        <CapBox key={i} node={n} dim={!highlights.has(i)} highlight={highlights.has(i)} />
      ))}

      <g transform={`translate(${HUB.cx}, ${HUB.cy})`}>
        <circle r="120" fill="none" stroke="#1a1a26" strokeWidth="1" strokeDasharray="2 4" />
        <circle r="90"  fill="none" stroke="#1a1a26" strokeWidth="1" />
        <circle r={HUB.r + 4} fill="#0a0a12" stroke={color} strokeOpacity="0.3" />
        <circle r={HUB.r}     fill="url(#hubGrad2)" stroke="#33334a" />
        <text y="4" textAnchor="middle" fontSize="14" fill="#f4f4f7" fontFamily="Instrument Serif, serif" fontStyle="italic">
          UniBiz
        </text>
      </g>
    </svg>
  );
}

Object.assign(window, { HeroMap, CompactMap, PerspectiveMap });