/* Ecosystem visualization, icons, and reveal hook */

const Icons = {
  idcard: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="2.5" y="5" width="19" height="14" rx="2" />
      <circle cx="8" cy="11" r="2.2" />
      <path d="M5 16 C5.5 14.5 7 14 8 14 C9 14 10.5 14.5 11 16" />
      <path d="M14 9 L19 9 M14 12 L19 12 M14 15 L17 15" />
    </svg>
  ),
  transfer: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="6" cy="7" r="2.5" />
      <circle cx="18" cy="17" r="2.5" />
      <path d="M4 19 L20 5" />
      <path d="M16 5 L20 5 L20 9 M8 19 L4 19 L4 15" />
    </svg>
  ),
  timeline: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M3 12 L21 12" />
      <circle cx="6" cy="12" r="2" />
      <circle cx="12" cy="12" r="2" />
      <circle cx="18" cy="12" r="2" fill="currentColor" />
    </svg>
  ),
  partidos: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <ellipse cx="12" cy="12" rx="9" ry="5" transform="rotate(-30 12 12)" />
      <path d="M5.5 8.5 L18.5 15.5" />
      <path d="M9 7 L9 17" opacity="0.5" />
      <path d="M15 7 L15 17" opacity="0.5" />
      <path d="M12 7 L12 17" opacity="0.7" />
    </svg>
  ),
  cursos: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M2 8 L12 3 L22 8 L12 13 Z" />
      <path d="M6 10.5 L6 16 C6 17.5 9 19 12 19 C15 19 18 17.5 18 16 L18 10.5" />
      <path d="M22 8 L22 14" />
    </svg>
  ),
  rendimiento: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M3 17 L8 11 L13 14 L21 5" />
      <path d="M15 5 L21 5 L21 11" />
      <circle cx="8" cy="11" r="1.2" fill="currentColor" />
      <circle cx="13" cy="14" r="1.2" fill="currentColor" />
    </svg>
  ),
  platform: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="3" y="4" width="18" height="13" rx="2" />
      <path d="M8 21 L16 21 M12 17 L12 21" />
      <path d="M7 9 L10 12 L7 15" />
      <path d="M13 15 L17 15" />
    </svg>
  ),
  network: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="2.5" />
      <circle cx="4" cy="6" r="1.6" />
      <circle cx="20" cy="6" r="1.6" />
      <circle cx="4" cy="18" r="1.6" />
      <circle cx="20" cy="18" r="1.6" />
      <path d="M5.3 6.8 L9.8 11 M18.7 6.8 L14.2 11 M5.3 17.2 L9.8 13 M18.7 17.2 L14.2 13" />
    </svg>
  ),
  exchange: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M4 8 L18 8 L15 5 M20 16 L6 16 L9 19" />
    </svg>
  ),
  arrow: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M5 12 L19 12 M13 6 L19 12 L13 18" />
    </svg>
  ),
  close: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}><path d="M6 6 L18 18 M18 6 L6 18" /></svg>
  ),
  mail: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7 L12 13 L21 7" />
    </svg>
  ),
  pin: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 22 C7 16 4 12 4 9 A8 8 0 0 1 20 9 C20 12 17 16 12 22 Z" /><circle cx="12" cy="9" r="2.5" />
    </svg>
  ),
  globe: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="9" /><path d="M3 12 L21 12 M12 3 C9 7 9 17 12 21 M12 3 C15 7 15 17 12 21" />
    </svg>
  ),
  check: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M5 12 L10 17 L19 7" /></svg>
  ),
  menu: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...props}><path d="M4 7 L20 7 M4 12 L20 12 M4 17 L20 17" /></svg>
  ),
};

/* Reveal-on-scroll — items already in viewport on mount get .in immediately */
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    // Reveal anything already in viewport on first paint (hero, etc.)
    const vh = window.innerHeight;
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < vh && r.bottom > 0) el.classList.add('in');
    });
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => { if (!el.classList.contains('in')) io.observe(el); });
    return () => io.disconnect();
  }, []);
};

/* Ecosystem viz — Conecta at center, 3 apps on orbit */
const Ecosystem = ({ size = 'hero', onAppClick }) => {
  const apps = [
    { id: 'partidos', label: 'Partidos', tag: 'APP 01', icon: Icons.partidos, angle: -90 },
    { id: 'cursos', label: 'Cursos', tag: 'APP 02', icon: Icons.cursos, angle: 30 },
    { id: 'rendimiento', label: 'Alto Rendimiento', tag: 'APP 03', icon: Icons.rendimiento, angle: 150 },
  ];
  const radius = 36; // percent from center
  const cx = 50, cy = 50;
  const nodePositions = apps.map(a => {
    const rad = (a.angle * Math.PI) / 180;
    return { ...a, x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
  });

  return (
    <div className={`ecosystem ${size === 'hero' ? 'ecosystem--hero' : 'eco-big'}`}>
      <svg className="ecosystem__svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
        {/* outer faint ring */}
        <circle cx={cx} cy={cy} r="46" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="0.2" />
        <circle cx={cx} cy={cy} r="36" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="0.15" strokeDasharray="0.8 1.2" />
        <circle cx={cx} cy={cy} r="22" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="0.15" />

        {/* connection lines from core to nodes */}
        {nodePositions.map(n => {
          // line from edge of core (radius 14) to edge of node (radius ~7)
          const dx = n.x - cx, dy = n.y - cy;
          const len = Math.sqrt(dx * dx + dy * dy);
          const ux = dx / len, uy = dy / len;
          const x1 = cx + ux * 14, y1 = cy + uy * 14;
          const x2 = n.x - ux * 7, y2 = n.y - uy * 7;
          return (
            <g key={n.id}>
              <line x1={x1} y1={y1} x2={x2} y2={y2} className="eco-line" />
              {/* small pulse at midpoint */}
              <circle r="0.7" className="eco-pulse">
                <animateMotion dur="3s" repeatCount="indefinite"
                  path={`M ${x1} ${y1} L ${x2} ${y2}`} />
              </circle>
            </g>
          );
        })}

        {/* tiny orbiting particle for atmosphere */}
        <circle r="0.5" fill="rgba(158,197,230,0.6)">
          <animateTransform attributeName="transform" type="rotate"
            from="0 50 50" to="360 50 50" dur="24s" repeatCount="indefinite" />
          <animate attributeName="cx" values="92" dur="0.01s" />
          <animate attributeName="cy" values="50" dur="0.01s" />
        </circle>
      </svg>

      {/* Center core */}
      <div className="ecosystem__core">
        <img className="ecosystem__core-mark" src="assets/conecta-rugby-mark.png" alt="" />
        <div style={{
          marginTop: '6%',
          fontFamily: 'var(--font-mono)',
          fontSize: 'clamp(8px, 0.9vw, 10px)',
          letterSpacing: '0.18em',
          color: 'var(--accent)',
          textTransform: 'uppercase',
        }}>CORE</div>
      </div>

      {/* Nodes */}
      {nodePositions.map(n => {
        const Ico = n.icon;
        return (
          <div
            key={n.id}
            className="ecosystem__node"
            style={{ left: `${n.x}%`, top: `${n.y}%` }}
            onClick={() => onAppClick && onAppClick(n.id)}
          >
            <div className="ecosystem__node-inner">
              <Ico className="ecosystem__node-icon" style={{ width: '26%', height: 'auto' }} />
              <div className="ecosystem__node-label">{n.label}</div>
              <div className="ecosystem__node-tag">{n.tag}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

Object.assign(window, { Icons, Ecosystem, useReveal });