/* global React, ICONS, useReveal, LynxMark */
const { useEffect: useAboutEffect, useRef: useAboutRef, useState: useAboutState } = React;

function About() {
  const headRef = useReveal();
  const imgRef = useReveal({ rootMargin: "0px 0px -10% 0px" });

  return (
    <section id="nosotros" className="section" style={{ background: "var(--navy-850)" }}>
      <div className="container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)",
            gap: "clamp(40px, 6vw, 96px)",
            alignItems: "center",
          }}
          className="about-grid"
        >
          <div ref={headRef} className="reveal reveal-left">
            <span className="eyebrow">
              <span className="dash"></span>
              Nosotros
            </span>
            <h2 className="h-section" style={{ marginTop: 22 }}>
              Nacimos de una <br />
              amistad de 15 años.
            </h2>
            <p className="lead" style={{ marginTop: 28 }}>
              Lyncared nació de la unión de dos mundos: la seguridad ciudadana y la tecnología
              de redes. Dos disciplinas que exigen precisión, serenidad y responsabilidad —
              aplicadas ahora a instalaciones eléctricas en toda España.
            </p>
            <p
              style={{
                marginTop: 18,
                fontSize: 16,
                color: "var(--text-dim)",
                lineHeight: 1.6,
                maxWidth: "56ch",
              }}
            >
              No construimos la empresa para crecer rápido. La construimos para que dure. Cada
              trabajo lleva la firma de quien lo hizo. Cada garantía la honra la persona que te
              dio la mano.
            </p>

            <div
              style={{
                marginTop: 36,
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 16,
                maxWidth: 520,
              }}
            >
              <FounderCard
                role="Cofundador"
                discipline="Seguridad ciudadana"
                bio="Una carrera en ingeniería de seguridad. Tranquilo bajo presión, obsesionado con la redundancia."
              />
              <FounderCard
                role="Cofundador"
                discipline="IT y Redes"
                bio="Década y media en redes IT. Trata el cableado y los racks como si fueran arquitectura."
              />
            </div>
          </div>

          <div
            ref={imgRef}
            className="reveal reveal-right"
            style={{
              position: "relative",
              aspectRatio: "4 / 5",
              maxWidth: 560,
              marginLeft: "auto",
              width: "100%",
            }}
          >
            <AboutVisual />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .about-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function FounderCard({ role, discipline, bio }) {
  return (
    <div
      style={{
        padding: 20,
        borderRadius: 14,
        border: "1px solid rgba(255,255,255,0.08)",
        background: "rgba(255,255,255,0.02)",
      }}
    >
      <div
        style={{
          width: 36,
          height: 4,
          borderRadius: 999,
          background: "var(--cyan)",
          marginBottom: 16,
          opacity: 0.7,
        }}
      />
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 10,
          letterSpacing: "0.16em",
          textTransform: "uppercase",
          color: "var(--text-mute)",
          marginBottom: 4,
        }}
      >
        {role}
      </div>
      <div
        style={{
          fontFamily: "var(--font-display)",
          fontSize: 16,
          fontWeight: 500,
          color: "var(--text)",
          marginBottom: 10,
          letterSpacing: "-0.01em",
        }}
      >
        {discipline}
      </div>
      <p style={{ fontSize: 13.5, color: "var(--text-dim)", lineHeight: 1.5 }}>{bio}</p>
    </div>
  );
}

function AboutVisual() {
  const wrapRef = useAboutRef(null);
  const [active, setActive] = useAboutState(false);

  useAboutEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setActive(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.25 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const W = 400;
  const H = 500;
  const cx = W / 2;
  const cy = H / 2;

  const A = { x: 76, y: 110, label: "Seguridad", sub: "Seguridad ciudadana" };
  const B = { x: 324, y: 390, label: "Redes", sub: "IT · Datos" };

  const pathA = `M ${A.x} ${A.y} C ${A.x + 60} ${A.y + 30}, ${cx - 60} ${cy - 60}, ${cx} ${cy}`;
  const pathB = `M ${B.x} ${B.y} C ${B.x - 60} ${B.y - 30}, ${cx + 60} ${cy + 60}, ${cx} ${cy}`;

  return (
    <div
      ref={wrapRef}
      style={{
        position: "absolute",
        inset: 0,
        borderRadius: 24,
        overflow: "hidden",
        background: "linear-gradient(160deg, #0e2744 0%, #081729 60%, #050f1d 100%)",
        border: "1px solid rgba(255,255,255,0.08)",
      }}
    >
      <svg
        viewBox={`0 0 ${W} ${H}`}
        preserveAspectRatio="xMidYMid slice"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
        aria-hidden="true"
      >
        <defs>
          <pattern id="about-grid" width="32" height="32" patternUnits="userSpaceOnUse">
            <path d="M 32 0 L 0 0 0 32" fill="none" stroke="rgba(255,255,255,0.035)" strokeWidth="1" />
          </pattern>
          <radialGradient id="about-vignette" cx="50%" cy="50%" r="65%">
            <stop offset="0%" stopColor="black" stopOpacity="0" />
            <stop offset="100%" stopColor="black" stopOpacity="0.55" />
          </radialGradient>
          <radialGradient id="core-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#5EE9F2" stopOpacity="0.5" />
            <stop offset="60%" stopColor="#5EE9F2" stopOpacity="0.08" />
            <stop offset="100%" stopColor="#5EE9F2" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="cluster-A-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#5EE9F2" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#5EE9F2" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="cluster-B-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#F5B547" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#F5B547" stopOpacity="0" />
          </radialGradient>
          <linearGradient id="trace-grad-A" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#5EE9F2" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#5EE9F2" stopOpacity="0.4" />
          </linearGradient>
          <linearGradient id="trace-grad-B" x1="1" y1="1" x2="0" y2="0">
            <stop offset="0%" stopColor="#F5B547" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#F5B547" stopOpacity="0.4" />
          </linearGradient>
        </defs>

        <rect width={W} height={H} fill="url(#about-grid)" />
        <circle cx={A.x} cy={A.y} r="80" fill="url(#cluster-A-glow)" />
        <circle cx={B.x} cy={B.y} r="80" fill="url(#cluster-B-glow)" />
        <circle
          cx={cx} cy={cy} r="100"
          fill="url(#core-glow)"
          style={{
            transformOrigin: `${cx}px ${cy}px`,
            animation: active ? "lyn-core-glow 3.5s ease-in-out infinite" : "none",
            opacity: active ? 1 : 0,
            transition: "opacity 800ms ease 800ms",
          }}
        />

        <ClusterA cx={A.x} cy={A.y} active={active} />
        <ClusterB cx={B.x} cy={B.y} active={active} />
        <Trace d={pathA} active={active} delay={600} stroke="url(#trace-grad-A)" />
        <Trace d={pathB} active={active} delay={750} stroke="url(#trace-grad-B)" />

        {active && (
          <>
            <FlowParticle d={pathA} color="#5EE9F2" delay={1400} duration={2.4} />
            <FlowParticle d={pathA} color="#5EE9F2" delay={2000} duration={2.4} />
            <FlowParticle d={pathA} color="#5EE9F2" delay={2600} duration={2.4} />
            <FlowParticle d={pathB} color="#F5B547" delay={1500} duration={2.6} />
            <FlowParticle d={pathB} color="#F5B547" delay={2200} duration={2.6} />
            <FlowParticle d={pathB} color="#F5B547" delay={2900} duration={2.6} />
          </>
        )}

        <g
          style={{
            transformOrigin: `${cx}px ${cy}px`,
            opacity: active ? 1 : 0,
            transform: active ? "scale(1)" : "scale(0.6)",
            transition: "transform 700ms cubic-bezier(.16,.84,.3,1) 900ms, opacity 500ms ease 900ms",
          }}
        >
          <circle cx={cx} cy={cy} r="48" fill="none" stroke="#5EE9F2" strokeWidth="0.8" opacity="0.5"
            style={{ transformOrigin: `${cx}px ${cy}px`, animation: active ? "lyn-ring-breathe 3.2s ease-in-out infinite" : "none" }}
          />
          <circle cx={cx} cy={cy} r="38" fill="none" stroke="#5EE9F2" strokeWidth="0.6" opacity="0.35" strokeDasharray="2 4"
            style={{ transformOrigin: `${cx}px ${cy}px`, animation: active ? "lyn-spin-slow 18s linear infinite" : "none" }}
          />
          <circle cx={cx} cy={cy} r="28" fill="#081729" stroke="rgba(94, 233, 242, 0.6)" strokeWidth="1.2" />
          <circle cx={cx} cy={cy} r="3" fill="#5EE9F2">
            <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" />
            <animate attributeName="opacity" values="1;0.4;1" dur="2s" repeatCount="indefinite" />
          </circle>
        </g>

        <rect width={W} height={H} fill="url(#about-vignette)" pointerEvents="none" />
        <g stroke="rgba(255,255,255,0.35)" strokeWidth="1.4" fill="none">
          <path d="M 18 18 L 18 36 M 18 18 L 36 18" />
          <path d={`M ${W - 18} 18 L ${W - 18} 36 M ${W - 18} 18 L ${W - 36} 18`} />
          <path d={`M 18 ${H - 18} L 18 ${H - 36} M 18 ${H - 18} L 36 ${H - 18}`} />
          <path d={`M ${W - 18} ${H - 18} L ${W - 18} ${H - 36} M ${W - 18} ${H - 18} L ${W - 36} ${H - 18}`} />
        </g>

        <ClusterLabel x={A.x + 4} y={A.y + 44} label="SEGURIDAD" sub="Seguridad ciudadana" delay={1200} active={active} accent="#5EE9F2" anchor="start" />
        <ClusterLabel x={B.x - 4} y={B.y - 44} label="REDES" sub="IT · Datos" delay={1350} active={active} accent="#F5B547" anchor="end" />
      </svg>

      <div
        style={{
          position: "absolute",
          left: "50%",
          top: "50%",
          transform: `translate(-50%, -50%) ${active ? "scale(1)" : "scale(0.7)"}`,
          opacity: active ? 1 : 0,
          transition: "transform 700ms cubic-bezier(.16,.84,.3,1) 1200ms, opacity 500ms ease 1200ms",
        }}
      >
        <LynxMark size={36} />
      </div>

      <div
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 26,
          textAlign: "center",
          opacity: active ? 1 : 0,
          transform: active ? "translateY(0)" : "translateY(10px)",
          transition: "opacity 600ms ease 1600ms, transform 600ms ease 1600ms",
        }}
      >
        <div
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 14,
            padding: "10px 22px",
            borderRadius: 999,
            background: "rgba(8, 23, 41, 0.7)",
            border: "1px solid rgba(255,255,255,0.08)",
            backdropFilter: "blur(8px)",
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.2em",
            textTransform: "uppercase",
            color: "var(--text-dim)",
          }}
        >
          <Dot color="#5EE9F2" />
          Dos mundos
          <span style={{ color: "var(--text-mute)" }}>·</span>
          Una empresa
          <Dot color="#F5B547" />
        </div>
      </div>

      <style>{`
        @keyframes lyn-core-glow { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } }
        @keyframes lyn-ring-breathe { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.12); opacity: 0.2; } }
        @keyframes lyn-spin-slow { to { transform: rotate(360deg); } }
        @keyframes lyn-cluster-orbit { to { transform: rotate(360deg); } }
        @keyframes lyn-trace-draw { to { stroke-dashoffset: 0; } }
        @keyframes lyn-node-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
      `}</style>
    </div>
  );
}

function ClusterA({ cx, cy, active }) {
  return (
    <g
      style={{
        transformOrigin: `${cx}px ${cy}px`,
        opacity: active ? 1 : 0,
        transform: active ? "scale(1)" : "scale(0)",
        transition: "transform 700ms cubic-bezier(.16,.84,.3,1) 100ms, opacity 500ms ease 100ms",
      }}
    >
      <circle cx={cx} cy={cy} r="32" fill="none" stroke="rgba(94, 233, 242, 0.18)" strokeWidth="0.8" />
      <circle cx={cx} cy={cy} r="22" fill="none" stroke="rgba(94, 233, 242, 0.3)" strokeWidth="0.8" />
      <circle cx={cx} cy={cy} r="12" fill="rgba(94, 233, 242, 0.08)" stroke="rgba(94, 233, 242, 0.5)" strokeWidth="0.9" />
      <path
        d={`M ${cx} ${cy - 7} L ${cx + 6} ${cy - 4} L ${cx + 6} ${cy + 2} C ${cx + 6} ${cy + 5}, ${cx + 3} ${cy + 7}, ${cx} ${cy + 8} C ${cx - 3} ${cy + 7}, ${cx - 6} ${cy + 5}, ${cx - 6} ${cy + 2} L ${cx - 6} ${cy - 4} Z`}
        fill="none" stroke="#5EE9F2" strokeWidth="1" strokeLinejoin="round"
      />
      <g style={{ transformOrigin: `${cx}px ${cy}px`, animation: active ? "lyn-cluster-orbit 22s linear infinite" : "none" }}>
        {[0, 1, 2, 3].map((i) => {
          const a = (i * Math.PI) / 2;
          const x = cx + Math.cos(a) * 32;
          const y = cy + Math.sin(a) * 32;
          return (
            <circle key={i} cx={x} cy={y} r="2" fill="#5EE9F2">
              <animate attributeName="opacity" values="0.4;1;0.4" dur="2.4s" begin={`${i * 0.4}s`} repeatCount="indefinite" />
            </circle>
          );
        })}
      </g>
    </g>
  );
}

function ClusterB({ cx, cy, active }) {
  const nodes = [];
  for (let i = -1; i <= 1; i++) {
    for (let j = -1; j <= 1; j++) {
      nodes.push({ x: cx + i * 11, y: cy + j * 11, key: `${i}-${j}` });
    }
  }
  return (
    <g
      style={{
        transformOrigin: `${cx}px ${cy}px`,
        opacity: active ? 1 : 0,
        transform: active ? "scale(1)" : "scale(0)",
        transition: "transform 700ms cubic-bezier(.16,.84,.3,1) 250ms, opacity 500ms ease 250ms",
      }}
    >
      <rect x={cx - 22} y={cy - 22} width="44" height="44" rx="3" fill="rgba(245, 181, 71, 0.05)" stroke="rgba(245, 181, 71, 0.4)" strokeWidth="0.9" />
      <path
        d={`M ${cx - 11} ${cy - 11} L ${cx + 11} ${cy + 11} M ${cx + 11} ${cy - 11} L ${cx - 11} ${cy + 11} M ${cx - 11} ${cy} L ${cx + 11} ${cy} M ${cx} ${cy - 11} L ${cx} ${cy + 11}`}
        stroke="rgba(245, 181, 71, 0.25)" strokeWidth="0.7"
      />
      {nodes.map(({ x, y, key }, i) => (
        <circle key={key} cx={x} cy={y} r="1.6" fill="#F5B547">
          <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" begin={`${(i * 0.15) % 2}s`} repeatCount="indefinite" />
        </circle>
      ))}
      <g stroke="rgba(245, 181, 71, 0.7)" strokeWidth="1" fill="none">
        <path d={`M ${cx - 30} ${cy - 22} L ${cx - 22} ${cy - 22} L ${cx - 22} ${cy - 30}`} />
        <path d={`M ${cx + 30} ${cy - 22} L ${cx + 22} ${cy - 22} L ${cx + 22} ${cy - 30}`} />
        <path d={`M ${cx - 30} ${cy + 22} L ${cx - 22} ${cy + 22} L ${cx - 22} ${cy + 30}`} />
        <path d={`M ${cx + 30} ${cy + 22} L ${cx + 22} ${cy + 22} L ${cx + 22} ${cy + 30}`} />
      </g>
    </g>
  );
}

function Trace({ d, active, delay, stroke }) {
  const len = 420;
  return (
    <>
      <path d={d} fill="none" stroke={stroke} strokeWidth="0.5" opacity="0.18" />
      <path
        d={d} fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round"
        style={{
          strokeDasharray: len,
          strokeDashoffset: active ? 0 : len,
          transition: `stroke-dashoffset 1400ms cubic-bezier(.65, 0, .35, 1) ${delay}ms`,
          filter: "drop-shadow(0 0 4px currentColor)",
        }}
      />
    </>
  );
}

function FlowParticle({ d, color, delay, duration }) {
  return (
    <circle r="2.4" fill={color} style={{ filter: `drop-shadow(0 0 4px ${color})` }}>
      <animateMotion dur={`${duration}s`} repeatCount="indefinite" begin={`${delay}ms`} path={d} rotate="auto" />
      <animate attributeName="opacity" values="0;1;1;0" dur={`${duration}s`} begin={`${delay}ms`} keyTimes="0;0.15;0.85;1" repeatCount="indefinite" />
    </circle>
  );
}

function ClusterLabel({ x, y, label, sub, delay, active, accent, anchor = "middle" }) {
  return (
    <g
      style={{
        opacity: active ? 1 : 0,
        transform: active ? "translateY(0)" : "translateY(6px)",
        transition: `opacity 500ms ease ${delay}ms, transform 500ms ease ${delay}ms`,
      }}
    >
      <text x={x} y={y} textAnchor={anchor} fill={accent} fontFamily="JetBrains Mono, monospace" fontSize="10" letterSpacing="2" style={{ fontWeight: 500 }}>
        {label}
      </text>
      <text x={x} y={y + 14} textAnchor={anchor} fill="rgba(166, 180, 199, 0.85)" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.2">
        {sub}
      </text>
    </g>
  );
}

function Dot({ color }) {
  return (
    <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 999, background: color, boxShadow: `0 0 8px ${color}` }} />
  );
}

window.About = About;