"use client";

import { ApiServerBaseUrl } from "@/utils/baseurl.utils";
import React from "react";

const SocialMediaConnect = () => {
  const handleConnect = () => {
    window.location.href = `${ApiServerBaseUrl}/social/auth/login?`;
  };

  return (
    <div
      className="
        min-h-[83vh] flex items-center justify-center px-4
        bg-gradient-to-br
        from-[#0073C6]/30
        via-[#5BBE5B]/30
        via-[#E44DB3]/25
        to-[#0047A3]/30
      "
    >
      <div
        className="
          w-full max-w-md p-10 rounded-3xl text-center
          bg-white/40 backdrop-blur-xl
          border border-white/50 shadow-xl
        "
      >
        {/* Title */}
        <h1
          className="
            text-4xl font-extrabold mb-6 tracking-wide
            bg-gradient-to-r from-[#0073C6] to-[#E44DB3]
            bg-clip-text text-transparent
          "
        >
          Social Buddy
        </h1>

        {/* Subtitle */}
        <p className="text-gray-700 text-lg mb-10">
          Connect & manage your social accounts securely.
        </p>

        {/* Connect Button */}
       <button
  onClick={handleConnect}
  className="
    w-full py-4 text-lg font-semibold rounded-full
    bg-gradient-to-r
    from-[#5BBE5B]/80 via-[#E44DB3]/80 via-[#0073C6]/80 to-[#0047A3]/80
    hover:from-[#5BBE5B] hover:via-[#E44DB3] hover:to-[#0047A3]
    text-white shadow-md hover:shadow-xl
    transition-all duration-300 ease-out
  "
>
  Connect with Facebook
</button>

      </div>
    </div>
  );
};

export default SocialMediaConnect;