// hero.jsx — Nexus landing hero with animated architecture constellation

const NEXUS_LOGO = (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontFamily: "'Public Sans', system-ui, sans-serif",
    fontWeight: 700,
    fontSize: 24,
    letterSpacing: '-0.01em',
    lineHeight: 1,
    color: 'currentColor',
  }} aria-label="Nexus">
    <span style={{
      width: 18, height: 18,
      background: '#a1f75e',
      display: 'inline-block',
      position: 'relative',
    }}>
      <span style={{
        position: 'absolute', inset: '4px',
        background: '#0d0d0d',
      }}/>
      <span style={{
        position: 'absolute', top: '50%', left: '50%',
        width: 4, height: 4, background: '#a1f75e',
        transform: 'translate(-50%, -50%)',
      }}/>
    </span>
    <span>NEXUS</span>
  </div>
);

// ── Constellation: animated architecture nodes + edges behind hero ──
const HeroConstellation = () => {
  const canvasRef = React.useRef(null);
  const [t, setT] = React.useState(0);

  useRaf((sec) => setT(sec), true);

  // Nodes laid out across a virtual 1200x700 field. Positions are percentages.
  const nodes = [
    { id: 'payload',   x: 18, y: 30, label: 'PAYLOAD', r: 7 },
    { id: 'keycloak',  x: 14, y: 68, label: 'KEYCLOAK', r: 6 },
    { id: 'postgres',  x: 32, y: 80, label: 'POSTGRES', r: 5 },
    { id: 'typesense', x: 50, y: 22, label: 'TYPESENSE', r: 6 },
    { id: 'rag',       x: 48, y: 58, label: 'RAG',       r: 5 },
    { id: 'mcp',       x: 72, y: 38, label: 'MCP',       r: 9, hub: true },
    { id: 'claude',    x: 90, y: 20, label: 'CLAUDE',    r: 5, agent: true },
    { id: 'cursor',    x: 92, y: 50, label: 'CURSOR',    r: 5, agent: true },
    { id: 'agent',     x: 88, y: 78, label: 'AGENT',     r: 5, agent: true },
  ];

  const edges = [
    ['payload', 'typesense'],
    ['payload', 'postgres'],
    ['payload', 'keycloak'],
    ['typesense', 'rag'],
    ['rag', 'mcp'],
    ['typesense', 'mcp'],
    ['mcp', 'claude'],
    ['mcp', 'cursor'],
    ['mcp', 'agent'],
  ];

  const find = (id) => nodes.find(n => n.id === id);

  return (
    <div
      ref={canvasRef}
      style={{
        position: 'absolute', inset: 0,
        overflow: 'hidden',
        pointerEvents: 'none',
      }}
    >
      <svg
        viewBox="0 0 1200 700"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      >
        <defs>
          <linearGradient id="edgeGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#a1f75e" stopOpacity="0"/>
            <stop offset="50%" stopColor="#a1f75e" stopOpacity="0.9"/>
            <stop offset="100%" stopColor="#a1f75e" stopOpacity="0"/>
          </linearGradient>
          <filter id="glow">
            <feGaussianBlur stdDeviation="2.5" result="blur"/>
            <feMerge>
              <feMergeNode in="blur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
        </defs>

        {/* Grid */}
        <g stroke="rgba(255,255,255,0.04)" strokeWidth="1">
          {Array.from({ length: 13 }).map((_, i) => (
            <line key={`v${i}`} x1={i * 100} y1={0} x2={i * 100} y2={700} />
          ))}
          {Array.from({ length: 8 }).map((_, i) => (
            <line key={`h${i}`} x1={0} y1={i * 100} x2={1200} y2={i * 100} />
          ))}
        </g>

        {/* Static edges */}
        {edges.map(([a, b], i) => {
          const na = find(a), nb = find(b);
          const x1 = na.x * 12, y1 = na.y * 7;
          const x2 = nb.x * 12, y2 = nb.y * 7;
          return (
            <line
              key={`e${i}`}
              x1={x1} y1={y1} x2={x2} y2={y2}
              stroke="rgba(161, 247, 94, 0.22)"
              strokeWidth="1"
            />
          );
        })}

        {/* Flowing packets along edges */}
        {edges.map(([a, b], i) => {
          const na = find(a), nb = find(b);
          const x1 = na.x * 12, y1 = na.y * 7;
          const x2 = nb.x * 12, y2 = nb.y * 7;
          const phase = ((t * 0.25 + i * 0.13) % 1);
          const px = x1 + (x2 - x1) * phase;
          const py = y1 + (y2 - y1) * phase;
          return (
            <g key={`p${i}`}>
              <circle cx={px} cy={py} r="4" fill="#a1f75e" filter="url(#glow)" opacity="0.9"/>
              <circle cx={px} cy={py} r="2" fill="#fff"/>
            </g>
          );
        })}

        {/* Nodes */}
        {nodes.map((n) => {
          const cx = n.x * 12, cy = n.y * 7;
          const pulse = n.hub ? 1 + Math.sin(t * 2) * 0.08 : 1;
          const r = n.r * pulse;
          const fill = n.hub ? '#a1f75e' : n.agent ? '#0d0d0d' : '#0d0d0d';
          const stroke = n.hub ? '#0d0d0d' : '#a1f75e';
          return (
            <g key={n.id}>
              {n.hub && (
                <circle cx={cx} cy={cy} r={r * 2.5}
                        fill="none" stroke="#a1f75e"
                        strokeWidth="1"
                        opacity={0.3 + Math.sin(t * 2) * 0.2}/>
              )}
              <circle cx={cx} cy={cy} r={r} fill={fill} stroke={stroke} strokeWidth="1.5"/>
              <text
                x={cx} y={cy + n.r + 18}
                fill="rgba(255,255,255,0.55)"
                fontFamily="'JetBrains Mono', ui-monospace, monospace"
                fontSize="10"
                textAnchor="middle"
                letterSpacing="0.1em"
              >
                {n.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

const Hero = () => {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => { setMounted(true); }, []);

  const enter = (d = 0) => ({
    opacity: mounted ? 1 : 0,
    transform: mounted ? 'translateY(0)' : 'translateY(20px)',
    transition: `opacity 900ms cubic-bezier(.2,.7,.2,1) ${d}ms, transform 900ms cubic-bezier(.2,.7,.2,1) ${d}ms`,
  });

  return (
    <section
      data-screen-label="01 Hero"
      style={{
        position: 'relative',
        minHeight: '100vh',
        background: '#0d0d0d',
        color: '#f9f9f9',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {/* Constellation pushed to right half with mask + reduced opacity */}
      <div style={{
        position: 'absolute', inset: 0,
        opacity: 0.55,
        WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, transparent 38%, #000 62%, #000 100%)',
        maskImage: 'linear-gradient(90deg, transparent 0%, transparent 38%, #000 62%, #000 100%)',
        pointerEvents: 'none',
      }}>
        <HeroConstellation />
      </div>

      {/* Left-side darkening for text legibility */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.6) 35%, rgba(13,13,13,0) 65%)',
        pointerEvents: 'none',
      }} />

      {/* Bottom fade */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, transparent 60%, rgba(13,13,13,0.7) 100%)',
        pointerEvents: 'none',
      }} />

      {/* Nav */}
      <header style={{
        position: 'relative', zIndex: 10,
        padding: '32px clamp(24px, 5vw, 60px)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        ...enter(0),
      }}>
        <div style={{ color: '#f9f9f9', display: 'flex', alignItems: 'center', gap: 14 }}>
          {NEXUS_LOGO}
          <span style={{
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: '#a1f75e', borderLeft: '1px solid rgba(255,255,255,0.18)', paddingLeft: 14,
          }}>
            by Irontec
          </span>
        </div>
        <nav style={{
          display: 'flex', gap: 28,
          fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase',
          fontWeight: 600,
        }}>
          <a href="#architecture" style={{ color: '#f9f9f9', textDecoration: 'none' }}>Arquitectura</a>
          <a href="#mcp" style={{ color: '#f9f9f9', textDecoration: 'none' }}>MCP</a>
          <a href="#agno" style={{ color: '#a1f75e', textDecoration: 'none' }}>Agentes →</a>
        </nav>
      </header>

      {/* Main content */}
      <div style={{
        position: 'relative', zIndex: 10, flex: 1,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        padding: '0 clamp(24px, 5vw, 60px)',
        maxWidth: 1400, width: '100%', margin: '0 auto',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
          color: '#a1f75e', fontWeight: 600,
          marginBottom: 32,
          ...enter(200),
        }}>
          <span style={{ width: 9, height: 9, background: '#a1f75e', display: 'inline-block' }} />
          Conocimiento corporativo, al alcance de tus agentes
        </div>

        <h1 style={{
          fontSize: 'clamp(56px, 9vw, 132px)',
          lineHeight: 0.95,
          fontWeight: 600,
          letterSpacing: '-0.03em',
          maxWidth: '18ch',
          margin: 0,
          ...enter(400),
        }}>
          Tu empresa sabe mucho.<br/>
          <span style={{ color: '#a1f75e' }}>Haz que la IA</span><br/>
          lo sepa también.
        </h1>

        <p style={{
          marginTop: 36,
          fontSize: 'clamp(16px, 1.4vw, 20px)',
          lineHeight: 1.5,
          maxWidth: '56ch',
          color: 'rgba(249,249,249,0.7)',
          ...enter(600),
        }}>
          Nexus centraliza la información y el conocimiento de tu organización — documentos, artículos, libros, taxonomías — los indexa, los estructura y los expone vía <strong style={{ color: '#f9f9f9' }}>MCP</strong> a los agentes de IA que tu empresa ya usa.
        </p>

        <div style={{
          marginTop: 48,
          display: 'flex', gap: 16, flexWrap: 'wrap',
          ...enter(800),
        }}>
          <a href="#cta" className="nx-btn nx-btn--primary">Empezar con Nexus</a>
          <a href="#architecture" className="nx-btn nx-btn--ghost">Ver arquitectura</a>
        </div>
      </div>

      {/* Bottom strip — live stats */}
      <div style={{
        position: 'relative', zIndex: 10,
        borderTop: '1px solid rgba(255,255,255,0.08)',
        padding: '24px clamp(24px, 5vw, 60px)',
        display: 'flex', gap: 48, flexWrap: 'wrap',
        fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'rgba(249,249,249,0.6)',
        ...enter(1000),
      }}>
        <div><span style={{ color: '#a1f75e' }}>●</span>&nbsp;&nbsp;Multi-tenant</div>
        <div><span style={{ color: '#a1f75e' }}>●</span>&nbsp;&nbsp;OIDC / Keycloak</div>
        <div><span style={{ color: '#a1f75e' }}>●</span>&nbsp;&nbsp;Hybrid search + RAG</div>
        <div><span style={{ color: '#a1f75e' }}>●</span>&nbsp;&nbsp;MCP native</div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span>Scroll</span>
          <div style={{
            width: 1, height: 32,
            background: 'linear-gradient(180deg, #a1f75e, transparent)',
            animation: 'nx-scroll 1.6s ease-in-out infinite',
          }} />
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero, NEXUS_LOGO });