// Card.jsx — SpiderNet identity card matching the production card-preview.ejs aesthetic.
function Card({ tilt = true }) {
  const wrapRef = React.useRef(null);
  const cardRef = React.useRef(null);

  React.useEffect(() => {
    if (!tilt) return;
    const wrap = wrapRef.current;
    const card = cardRef.current;
    if (!wrap || !card) return;
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      const rx = (((e.clientY - r.top) - r.height / 2) / (r.height / 2)) * -3;
      const ry = (((e.clientX - r.left) - r.width / 2) / (r.width / 2)) * 3;
      card.style.transform = `perspective(1100px) rotateX(${rx}deg) rotateY(${ry}deg)`;
    };
    const onLeave = () => { card.style.transform = "perspective(1100px) rotateX(0) rotateY(0)"; };
    wrap.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    return () => {
      wrap.removeEventListener("mousemove", onMove);
      wrap.removeEventListener("mouseleave", onLeave);
    };
  }, [tilt]);

  const links = [
    { label: "Instagram",  url: "instagram.com/ana.ruiz",    Icon: Icon.Instagram },
    { label: "LinkedIn",   url: "linkedin.com/in/ana-ruiz",  Icon: Icon.LinkedIn },
    { label: "GitHub",     url: "github.com/anaruiz",        Icon: Icon.Github },
    { label: "Portfolio",  url: "ana.studio",                Icon: Icon.Globe },
  ];

  return (
    <div className="sn-pcard-scene" ref={wrapRef}>
      {/* Planet orb backdrop */}
      <div className="sn-planet" aria-hidden="true">
        <div className="sn-planet-surface"></div>
      </div>
      <div className="sn-planet-ring" aria-hidden="true"></div>

      {/* Card body */}
      <div className="sn-pcard" ref={cardRef}>
        {/* Header */}
        <div className="sn-pcard-head">
          <div className="sn-pcard-avatar">
            <span>AR</span>
          </div>
          <p className="sn-pcard-kicker">PRODUCT DESIGNER</p>
          <h3 className="sn-pcard-name">Ana Ruiz</h3>
          <p className="sn-pcard-company">Studio Nimbus · Madrid</p>
          <p className="sn-pcard-bio">
            Diseñando experiencias que conectan personas, productos y ciudades.
          </p>
        </div>

        {/* Metrics */}
        <div className="sn-pcard-metrics">
          <div className="sn-pcard-metric">
            <p className="sn-pcard-metric-lbl">Veces compartida</p>
            <p className="sn-pcard-metric-val">248</p>
          </div>
          <div className="sn-pcard-metric">
            <p className="sn-pcard-metric-lbl">Clicks en enlaces</p>
            <p className="sn-pcard-metric-val">1.2K</p>
          </div>
        </div>

        {/* CTAs */}
        <div className="sn-pcard-ctas">
          <button className="sn-pcard-btn-primary" type="button">
            Copiar enlace <span aria-hidden="true">→</span>
          </button>
          <button className="sn-pcard-btn-ghost" type="button">
            Guardar contacto
          </button>
        </div>

        {/* Direct links */}
        <p className="sn-pcard-section-lbl">ENLACES DIRECTOS</p>
        <div className="sn-pcard-links">
          {links.map((l, i) => (
            <a
              key={l.label}
              href="#"
              onClick={(e) => e.preventDefault()}
              className="sn-pcard-link"
              style={{ "--delay": `${0.08 * i}s` }}
            >
              <span className="sn-pcard-link-icon">
                <l.Icon size={14} />
              </span>
              <span className="sn-pcard-link-text">
                <span className="sn-pcard-link-label">{l.label}</span>
                <span className="sn-pcard-link-url">{l.url}</span>
              </span>
              <span className="sn-pcard-link-arrow" aria-hidden="true">→</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Card = Card;