/* global React */

/**
 * QuantGlobe — wireframe spinning globe with 3 leader lines.
 * Inspired by quant / data-viz aesthetics: thin lines, monochrome,
 * intentional negative space. No emoji, no gradients.
 *
 * Three labelled leader-lines fan out to the right pointing to:
 *   QUALITY       (top)
 *   SAFETY        (middle)
 *   ENVIRONMENTAL (bottom)
 *
 * The globe sphere itself is labelled "MANAGEMENT SYSTEMS".
 */
const QuantGlobe = () => {
  // SVG viewBox is 1000 x 700 (matches a 50% pane on desktop hero).
  // Globe centre + radius — pulled left so labels have room on the right.
  const cx = 280;
  const cy = 350;
  const r = 190;

  // Generate longitude meridians as ellipses (rotation = false; we tilt via SVG rotate).
  // Using an inclined axis for visual interest.
  const meridians = [-75, -45, -15, 15, 45, 75];

  // Latitude lines — horizontal ellipses, vertical offsets.
  const latitudes = [-0.7, -0.4, 0, 0.4, 0.7];

  // Three leader-lines fan out to the right.
  // Each starts on the globe surface, kinks once, then runs horizontally to a label.
  // Endpoints kept clear of the right edge so labels render inside the pane.
  const leaders = [
    { id: 'q', label: 'QUALITY',       sub: 'ISO 9001',  startA: -42, kink: [600, 130], end: [680, 130] },
    { id: 's', label: 'SAFETY',        sub: 'ISO 45001', startA:   6, kink: [600, 350], end: [680, 350] },
    { id: 'e', label: 'ENVIRONMENTAL', sub: 'ISO 14001', startA:  48, kink: [600, 570], end: [680, 570] },
  ];

  // Convert angle (deg from east, CCW) to a point on the globe surface.
  const onSurface = (angleDeg) => {
    const a = (angleDeg * Math.PI) / 180;
    return [cx + r * Math.cos(a), cy - r * Math.sin(a)];
  };

  return (
    <svg
      className="quant-globe-svg"
      viewBox="0 0 880 700"
      preserveAspectRatio="xMidYMid meet"
      role="img"
      aria-label="Integrated Management System: Quality, Safety, Environmental"
    >
      {/* Background grid — subtle */}
      <defs>
        <pattern id="qg-grid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
        </pattern>
        <radialGradient id="qg-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(245,211,184,0.18)" />
          <stop offset="60%" stopColor="rgba(245,211,184,0.04)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0)" />
        </radialGradient>
      </defs>
      <rect x="0" y="0" width="880" height="700" fill="url(#qg-grid)" />

      {/* Corner crosshairs — quant chart vibe */}
      <g stroke="rgba(255,255,255,0.25)" strokeWidth="1" fill="none">
        <path d="M 24 24 L 24 60 M 24 24 L 60 24" />
        <path d="M 856 24 L 856 60 M 856 24 L 820 24" />
        <path d="M 24 676 L 24 640 M 24 676 L 60 676" />
        <path d="M 856 676 L 856 640 M 856 676 L 820 676" />
      </g>

      {/* Subtle tick marks on left edge */}
      <g stroke="rgba(255,255,255,0.15)" strokeWidth="1">
        {[100, 200, 300, 400, 500, 600].map((y) => (
          <line key={y} x1="24" y1={y} x2="34" y2={y} />
        ))}
      </g>

      {/* Tiny axis labels */}
      <g fill="rgba(255,255,255,0.35)" fontFamily="ui-monospace, Menlo, monospace" fontSize="10" letterSpacing="1">
        <text x="40" y="56">N 00</text>
        <text x="818" y="56" textAnchor="end">N 90</text>
        <text x="40" y="672">S 00</text>
      </g>

      {/* Glow halo behind sphere */}
      <circle cx={cx} cy={cy} r={r * 1.45} fill="url(#qg-glow)" />

      {/* Spinning sphere group (rotates the meridians only — latitudes stay still) */}
      <g className="qg-sphere" stroke="rgba(255,255,255,0.55)" strokeWidth="1" fill="none">
        {/* Outer disc */}
        <circle cx={cx} cy={cy} r={r} stroke="rgba(255,255,255,0.85)" strokeWidth="1.25" />

        {/* Latitudes (static) */}
        {latitudes.map((t, i) => {
          const ry = Math.max(2, r * Math.sqrt(1 - t * t) * 0.18);
          const cyOff = cy + r * t;
          return (
            <ellipse
              key={`lat-${i}`}
              cx={cx} cy={cyOff} rx={r * Math.sqrt(1 - t * t)} ry={ry}
              stroke={t === 0 ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.35)'}
              strokeWidth={t === 0 ? 1.1 : 0.8}
            />
          );
        })}

        {/* Meridians (animated — rotate via inner <g>) */}
        <g className="qg-meridians">
          {meridians.map((deg, i) => {
            // Each meridian is an ellipse rotated about the sphere axis (vertical).
            // We approximate the projected meridian as an ellipse with rx = r * |cos(deg)|, ry = r.
            const rx = Math.max(1.5, Math.abs(r * Math.cos((deg * Math.PI) / 180)));
            const opacity = 0.18 + 0.45 * Math.abs(Math.cos((deg * Math.PI) / 180));
            return (
              <ellipse
                key={`mer-${i}`}
                cx={cx} cy={cy} rx={rx} ry={r}
                stroke={`rgba(255,255,255,${opacity.toFixed(3)})`}
                strokeWidth="0.85"
              />
            );
          })}
          {/* Vertical axis line */}
          <line x1={cx} y1={cy - r} x2={cx} y2={cy + r} stroke="rgba(255,255,255,0.5)" strokeWidth="1" />
          {/* Horizontal equator handle */}
          <line x1={cx - r} y1={cy} x2={cx + r} y2={cy} stroke="rgba(255,255,255,0.5)" strokeWidth="1" />

          {/* Orbiting data points along equator (give it a 'live' feel) */}
          {[0, 60, 120, 180, 240, 300].map((deg) => {
            const a = (deg * Math.PI) / 180;
            const x = cx + r * Math.cos(a);
            const y = cy + r * Math.sin(a) * 0.18; // squashed for equator perspective
            return <circle key={`pt-${deg}`} cx={x} cy={y} r="2" fill="#F5D3B8" />;
          })}
        </g>
      </g>

      {/* Centre label inside sphere */}
      <g textAnchor="middle" fill="#fff">
        <text x={cx} y={cy - 6} fontFamily="var(--font-display, Inter)" fontWeight="900"
              fontSize="22" letterSpacing="0.04em" style={{ textTransform: 'uppercase' }}>
          MANAGEMENT
        </text>
        <text x={cx} y={cy + 22} fontFamily="var(--font-display, Inter)" fontWeight="900"
              fontSize="22" letterSpacing="0.04em" style={{ textTransform: 'uppercase' }}>
          SYSTEMS
        </text>
        <line x1={cx - 60} y1={cy + 36} x2={cx + 60} y2={cy + 36} stroke="rgba(255,255,255,0.6)" strokeWidth="1" />
        <text x={cx} y={cy + 52} fontFamily="ui-monospace, Menlo, monospace" fontSize="10"
              letterSpacing="2" fill="rgba(255,255,255,0.7)">
          IMS · INTEGRATED
        </text>
      </g>

      {/* Leader lines + labels */}
      <g>
        {leaders.map((lead, i) => {
          const [sx, sy] = onSurface(lead.startA);
          const [kx, ky] = lead.kink;
          const [ex, ey] = lead.end;
          return (
            <g key={lead.id} className="qg-leader" style={{ animationDelay: `${i * 220}ms` }}>
              {/* path */}
              <path
                d={`M ${sx} ${sy} L ${kx} ${ky} L ${ex} ${ey}`}
                fill="none"
                stroke="#F5D3B8"
                strokeWidth="1.25"
                strokeLinecap="square"
                strokeLinejoin="miter"
              />
              {/* start dot on globe */}
              <circle cx={sx} cy={sy} r="3.5" fill="#F5D3B8" />
              <circle cx={sx} cy={sy} r="6" fill="none" stroke="#F5D3B8" strokeWidth="0.8" opacity="0.5" />
              {/* end tick */}
              <line x1={ex} y1={ey - 8} x2={ex} y2={ey + 8} stroke="#F5D3B8" strokeWidth="1" />

              {/* label */}
              <text
                x={ex + 12} y={ey - 4}
                fill="#fff"
                fontFamily="var(--font-display, Inter)"
                fontWeight="900"
                fontSize="22"
                letterSpacing="0.02em"
                style={{ textTransform: 'uppercase' }}
              >
                {lead.label}
              </text>
              <text
                x={ex + 12} y={ey + 16}
                fill="rgba(255,255,255,0.6)"
                fontFamily="ui-monospace, Menlo, monospace"
                fontSize="10"
                letterSpacing="2"
              >
                {lead.sub}
              </text>
            </g>
          );
        })}
      </g>
    </svg>
  );
};

window.QuantGlobe = QuantGlobe;