// social-expand-links.jsx — Uiverse Praashoo7 3×3 social hover grid (namespaced CSS)

/** Replace with your profile URLs */
const SOCIAL_URLS = {
  instagram: 'https://www.instagram.com/',
  twitter: 'https://twitter.com/',
  dribbble: 'https://dribbble.com/',
  codepen: 'https://codepen.io/',
  uiverse: 'https://uiverse.io/',
  discord: 'https://discord.com/',
  github: 'https://github.com/',
  telegram: 'https://t.me/',
  reddit: 'https://www.reddit.com/',
};

function IconInstagram() {
  return (
    <svg className="instagram" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
    </svg>
  );
}

function IconTwitter() {
  return (
    <svg className="twitter" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  );
}

function IconDribbble() {
  return (
    <svg className="dribble" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.826c-.167-.39-.348-.762-.545-1.127-.86-1.62-2.021-3.115-3.428-4.452-.952-.902-2.004-1.726-3.133-2.468C15.473 5.882 13.555 4.89 11.537 4.5c-.563-.104-1.131-.156-1.7-.156-.57 0-1.137.052-1.7.156-2.018.39-3.936 1.382-5.477 2.627-1.129.742-2.181 1.566-3.133 2.468-1.407 1.337-2.568 2.832-3.428 4.452-.197.365-.378.737-.545 1.127 2.513 3.93 6.842 6.61 11.786 6.61s9.273-2.68 11.786-6.61zm-9.373-6.714c.092-.064.185-.127.278-.189 1.285-.823 2.662-1.498 4.104-2.012-.553-2.538-1.318-4.97-2.282-7.265-2.003.416-3.835 1.38-5.29 2.765-.093.062-.186.125-.278.189 1.344 2.014 2.42 4.213 3.168 6.512zm1.428-8.132c.964 2.295 1.729 4.727 2.282 7.265 1.442.514 2.819 1.189 4.104 2.012.093.062.186.125.278.189.748-2.299 1.824-4.498 3.168-6.512-.094-.064-.187-.127-.278-.189-1.455-1.385-3.287-2.349-5.29-2.765-.094-.064-.187-.127-.278-.189-.748 2.299-1.824 4.498-3.168 6.512z" />
    </svg>
  );
}

function IconCodepen() {
  return (
    <svg className="codepen" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M16.5 13.5v6l-4.5 3-4.5-3v-6L12 10.5l4.5 3zm0-9v6L12 16.5 7.5 10.5v-6L12 1.5l4.5 3zM7.5 4.5v6L3 13.5v-6l4.5-3zm9 0L21 7.5v6l-4.5-3v-6zM12 4.5L7.5 7.5 12 10.5l4.5-3L12 4.5z" />
    </svg>
  );
}

function IconUiverse() {
  return (
    <svg className="uiverse" viewBox="0 0 64 64" width="28" height="28" aria-hidden="true">
      <defs>
        <linearGradient id="paint0_linear_501_142" x1="8" y1="32" x2="56" y2="32" gradientUnits="userSpaceOnUse">
          <stop stopColor="#6248ff" />
          <stop offset="1" stopColor="#00ddeb" />
        </linearGradient>
        <linearGradient id="paint1_linear_501_142" x1="32" y1="8" x2="32" y2="56" gradientUnits="userSpaceOnUse">
          <stop stopColor="#bf66ff" />
          <stop offset="1" stopColor="#6248ff" />
        </linearGradient>
        <linearGradient id="paint2_linear_501_142" x1="16" y1="16" x2="48" y2="48" gradientUnits="userSpaceOnUse">
          <stop stopColor="#00ddeb" />
          <stop offset="1" stopColor="#bf66ff" />
        </linearGradient>
      </defs>
      <rect x="10" y="14" width="44" height="36" rx="8" fill="url(#paint0_linear_501_142)" />
      <circle cx="32" cy="32" r="10" fill="url(#paint1_linear_501_142)" />
      <path d="M22 42 L46 22 L40 42 Z" fill="url(#paint2_linear_501_142)" />
    </svg>
  );
}

function IconDiscord() {
  return (
    <svg className="discord" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
    </svg>
  );
}

function IconGithub() {
  return (
    <svg className="github" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
    </svg>
  );
}

function IconTelegram() {
  return (
    <svg className="telegram" viewBox="0 0 240 240" aria-hidden="true">
      <path d="M120 10c-60.75 0-110 49.25-110 110s49.25 110 110 110 110-49.25 110-110S180.75 10 120 10z" />
      <path d="M54 118l158-62-131 84-27 78z" />
      <path d="M181 56L81 142l20 56 16-48 64-94z" />
    </svg>
  );
}

function IconReddit() {
  return (
    <svg className="reddit" viewBox="0 0 24 24" aria-hidden="true">
      <g>
        <circle cx="12" cy="12" r="10" />
        <path d="M12 17.5c2.33 0 4.3-1.46 5.11-3.5H6.89c.81 2.04 2.78 3.5 5.11 3.5zm-3.39-5.89c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6.78 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zM12 8.5c-2.42 0-4.38 1.84-4.38 4.12 0 .35.04.68.12 1h8.52c.08-.32.12-.65.12-1 0-2.28-1.96-4.12-4.38-4.12z" />
      </g>
    </svg>
  );
}

const SocialExpandLinks = () => (
  <div className="sl-expand-root">
    <div className="sl-expand-back" aria-hidden="true" />
    <div className="sl-expand">
      <a
        className="sl-card"
        href={SOCIAL_URLS.instagram}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Instagram"
      >
        <IconInstagram />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.twitter} target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
        <IconTwitter />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.dribbble} target="_blank" rel="noopener noreferrer" aria-label="Dribbble">
        <IconDribbble />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.codepen} target="_blank" rel="noopener noreferrer" aria-label="CodePen">
        <IconCodepen />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.uiverse} target="_blank" rel="noopener noreferrer" aria-label="Uiverse">
        <IconUiverse />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.discord} target="_blank" rel="noopener noreferrer" aria-label="Discord">
        <IconDiscord />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.github} target="_blank" rel="noopener noreferrer" aria-label="GitHub">
        <IconGithub />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.telegram} target="_blank" rel="noopener noreferrer" aria-label="Telegram">
        <IconTelegram />
      </a>
      <a className="sl-card" href={SOCIAL_URLS.reddit} target="_blank" rel="noopener noreferrer" aria-label="Reddit">
        <IconReddit />
      </a>
      <div className="sl-label">SOCIALS</div>
    </div>
  </div>
);

window.SocialExpandLinks = SocialExpandLinks;
