/* global React */
/*
  HeroPuzzleLabels — overlays four labels with leader lines on top of the
  puzzle hero image. Each label fades in sequentially after page load.

  Coordinates are expressed as percentages of the puzzle image (1856×2304),
  so they scale with the image regardless of its rendered width.
*/

const { useEffect: hpl_useEffect, useState: hpl_useState } = React;

function HeroPuzzleLabels() {
  const [shown, setShown] = hpl_useState(false);
  hpl_useEffect(() => {
    const t = setTimeout(() => setShown(true), 350);
    return () => clearTimeout(t);
  }, []);

  // Label positions:
  //   anchor: dot on the puzzle tile (% of image)
  //   text:   label position (% of image)
  // The leader line runs from anchor to text.
  // Coordinates tuned to screens/hero-puzzle.png (1299×1613).
  // Variant A: labels sit close to their anchor points — short leader lines,
  // tight composition.
  const labels = [
    {
      key: 'seo',
      anchorX: 38, anchorY: 18,
      textX: 26,   textY: 11,
      title: 'SEO',
      sub: 'AI search',
      align: 'right',
      delay: 0,
    },
    {
      key: 'plan',
      anchorX: 76, anchorY: 32,
      textX: 88,   textY: 26,
      title: 'Patient intent',
      sub: '90-day plan',
      align: 'left',
      delay: 220,
    },
    {
      key: 'review',
      anchorX: 28, anchorY: 52,
      textX: 16,   textY: 46,
      title: 'Doctor-reviewed',
      sub: 'FTC-aware claims',
      align: 'right',
      delay: 440,
    },
    {
      key: 'wins',
      anchorX: 72, anchorY: 76,
      textX: 84,   textY: 70,
      title: 'Quick wins',
      sub: 'Patient-ready article',
      align: 'left',
      delay: 660,
    },
  ];

  const ACCENT = 'var(--accent-500, #14a098)';
  const INK = 'var(--neutral-fg, #0f2832)';
  const INK_SOFT = 'var(--neutral-fg-soft, #5a6b73)';

  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        pointerEvents: 'none',
      }}
      aria-hidden="false"
    >
      {/* SVG layer for leader lines */}
      <svg
        width="100%" height="100%"
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, overflow: 'visible' }}
      >
        {labels.map((l) => {
          // Path: from anchor → horizontal leg → up/down to text vertical
          const sameSide = l.align === 'left' ? l.textX < l.anchorX : l.textX > l.anchorX;
          const elbowX = l.align === 'left' ? l.textX + 1 : l.textX - 1;
          const elbowY = l.textY + 4; // sits just below the text block
          const d = `M ${l.anchorX} ${l.anchorY} L ${elbowX} ${l.anchorY} L ${elbowX} ${elbowY}`;
          return (
            <g key={l.key} style={{
              opacity: shown ? 1 : 0,
              transition: `opacity 600ms ease ${l.delay}ms`,
            }}>
              <path
                d={d}
                fill="none"
                stroke={ACCENT}
                strokeWidth="0.18"
                vectorEffect="non-scaling-stroke"
                style={{
                  strokeDasharray: 200,
                  strokeDashoffset: shown ? 0 : 200,
                  transition: `stroke-dashoffset 700ms cubic-bezier(0.22,0.61,0.36,1) ${l.delay + 100}ms`,
                }}
              />
              <circle
                cx={l.anchorX} cy={l.anchorY}
                r="0.5"
                fill={ACCENT}
                vectorEffect="non-scaling-stroke"
              />
            </g>
          );
        })}
      </svg>

      {/* HTML labels */}
      {labels.map((l) => (
        <div
          key={l.key}
          style={{
            position: 'absolute',
            left: `${l.textX}%`,
            top: `${l.textY}%`,
            textAlign: l.align,
            fontFamily: 'var(--font-body, "Inter", system-ui, sans-serif)',
            opacity: shown ? 1 : 0,
            transform: shown
              ? (l.align === 'right' ? 'translate(-100%, -100%)' : 'translate(0, -100%)')
              : (l.align === 'right' ? 'translate(-100%, calc(-100% + 6px))' : 'translate(0, calc(-100% + 6px))'),
            transition: `opacity 700ms ease ${l.delay + 350}ms, transform 700ms ease ${l.delay + 350}ms`,
            whiteSpace: 'nowrap',
          }}
        >
          <div style={{
            fontSize: 14,
            fontWeight: 600,
            color: INK,
            letterSpacing: '-0.005em',
            lineHeight: 1.2,
          }}>
            {l.title}
          </div>
          <div style={{
            fontSize: 13,
            color: INK_SOFT,
            marginTop: 4,
            lineHeight: 1.2,
          }}>
            {l.sub}
          </div>
        </div>
      ))}
    </div>
  );
}

window.HeroPuzzleLabels = HeroPuzzleLabels;