import { LinkedIn, X, Instagram, YouTube, Figma, Github, Threads, Pinterest } from "@aliimam/logos";
import Link from "next/link";

export function Connect01() {
  return (
    <section className="py-20 flex min-h-screen flex-col items-center justify-center">
      <div className="space-y-6">
        <div className="relative z-10 space-y-3 text-center">
          <h2 className="text-3xl font-medium lg:text-5xl">Connect</h2>
          <p className="text-muted-foreground mx-auto max-w-3xl font-light text-sm md:text-md">
            You can find me on everywhere with handle @aliimam.in Also see all
            social links in here
          </p>
        </div>
        <div className="mx-auto max-w-4xl [mask-image:radial-gradient(ellipse_100%_100%_at_50%_0%,#000_70%,transparent_100%)]">
          <div className="bg-background gap-x-6 grid md:grid-cols-2 dark:bg-muted/50 rounded-xl border px-6 pb-10 pt-3 shadow-xl">
            <Integration
              icon={<X />}
              name="X"
              links="https://x.com/aliimam_in"
              description="Follow me for design insights, tech updates, and creative content."
            />
            <Integration
              icon={<LinkedIn />}
              name="LinkedIn"
              links="https://www.linkedin.com/in/aliimam-in/"
              description="Connect with me professionally and explore my career journey."
            />
            <Integration
              icon={<Instagram />}
              name="Instagram"
              links="https://www.instagram.com/aliimam.in/"
              description="Visual stories, behind-the-scenes, and creative inspiration."
            />
            <Integration
              icon={<Github/>}
              name="Github"
              links="https://github.com/aliimam-in"
              description="Explore my open-source projects and code repositories."
            />
            <Integration
              icon={<YouTube/>}
              name="Youtube"
              links="https://www.youtube.com/@aliimam_in"
              description="Watch tutorials, design processes, and creative content."
            />
            <Integration
              icon={<Figma/>}
              name="Figma"
              links="https://www.figma.com/@aliimam_in"
              description="Check out my design files, UI kits, and design resources."
            /> 
            <Integration
              icon={<Threads/>}
              name="Threads"
              links="https://www.threads.com/@aliimam.in"
              description="Join conversations about design, tech, and creativity."
            />
            <Integration
              icon={<Pinterest/>}
              name="Pinterest"
              links="https://in.pinterest.com/aliimam_in/"
              description="Discover curated design inspiration and creative ideas."
            /> 
          </div>
        </div> 
          <p className="text-muted-foreground max-w-lg mx-auto text-center font-light text-sm md:text-md">
            For partnerships, collaborations, sponsorships, commissions, events,
            you can reach out to me at{" "}
            <Link className="hover:underline text-primary font-semibold" href={""}>contact@aliimam.in</Link>
          </p> 
      </div>
    </section>
  );
}

const Integration = ({
  icon,
  name,
  links,
  description,
}: {
  icon: React.ReactNode;
  name: string;
  links: string;
  description: string;
}) => {
  return (
    <Link
      target="_blank"
      href={links}
      className="grid hover:bg-secondary hover:rounded-xl grid-cols-[auto_1fr_auto] items-center rounded-b-none gap-3 border-b border-dashed p-3 last:border-b-0"
    >
      <div className="bg-muted border-foreground/5 flex size-12 items-center justify-center rounded-lg border">
        {icon}
      </div>
      <div className="space-y-0.5">
        <h3 className="text-sm font-medium">{name}</h3>
        <p className="text-muted-foreground line-clamp-1 text-sm">
          {description}
        </p>
      </div>
    </Link>
  );
};

"use client";

import * as React from "react";
import Link from "next/link";
import { useAnimate } from "framer-motion";
import { Mail } from "@aliimam/icons";

import { cn } from "@/lib/utils";
import { Button, buttonVariants } from "@/components/ui/button";
import { Particles } from "@/components/particle-highlight";
import { WhatsApp } from "@aliimam/logos";

export function Connect() {
  const [scope, animate] = useAnimate();

  React.useEffect(() => {
    animate(
      [
        ["#pointer", { left: 200, top: 60 }, { duration: 0 }],
        ["#javascript", { opacity: 1 }, { duration: 0.3 }],
        [
          "#pointer",
          { left: 50, top: 102 },
          { at: "+0.5", duration: 0.5, ease: "easeInOut" },
        ],
        ["#javascript", { opacity: 0.4 }, { at: "-0.3", duration: 0.1 }],
        ["#react-js", { opacity: 1 }, { duration: 0.3 }],
        [
          "#pointer",
          { left: 224, top: 170 },
          { at: "+0.5", duration: 0.5, ease: "easeInOut" },
        ],
        ["#react-js", { opacity: 0.4 }, { at: "-0.3", duration: 0.1 }],
        ["#typescript", { opacity: 1 }, { duration: 0.3 }],
        [
          "#pointer",
          { left: 88, top: 198 },
          { at: "+0.5", duration: 0.5, ease: "easeInOut" },
        ],
        ["#typescript", { opacity: 0.4 }, { at: "-0.3", duration: 0.1 }],
        ["#next-js", { opacity: 1 }, { duration: 0.3 }],
        [
          "#pointer",
          { left: 200, top: 60 },
          { at: "+0.5", duration: 0.5, ease: "easeInOut" },
        ],
        ["#next-js", { opacity: 0.5 }, { at: "-0.3", duration: 0.1 }],
      ],
      {
        repeat: Number.POSITIVE_INFINITY,
      }
    );
  }, [animate]);
  return (
    <section className="relative mx-auto flex justify-center items-center min-h-screen max-w-5xl">
      <div className="group h-full">
        <div
          className="group/item h-full md:col-span-6 lg:col-span-12"
          data-aos="fade-down"
        >
          <div className="rounded-3xl p-6">
            <div className="relative z-20 h-full overflow-hidden rounded-xl border">
              <Particles
                className="absolute inset-0 -z-10 opacity-10 transition-opacity duration-1000 ease-in-out group-hover/item:opacity-100"
                quantity={200}
                color={"#d946ef"}
                vy={-0.2}
              />
              <div className="flex justify-center">
                <div className="flex h-full flex-col justify-center gap-10 p-4 md:h-[300px] md:flex-row">
                  <div
                    className="relative mx-auto h-[270px] w-[300px] md:h-[270px] md:w-[300px]"
                    ref={scope}
                  >
                    <div className="absolute top-1/2 left-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2">
                      <a
                        href="#"
                        aria-label="home"
                        className="flex gap-2 items-center"
                      >
                        <img
                          src="/ai-logo-white.png"
                          alt="Your Image"
                          height={50}
                          width={50}
                          className="h-14 z-10 w-full hidden dark:block object-contain"
                        />
                        <img
                          src="/ai-logo-black.png"
                          alt="Your Image"
                          height={50}
                          width={50}
                          className="h-14 z-10 w-full dark:hidden block object-contain"
                        />
                      </a>
                    </div>
                    <div
                      id="next-js"
                      className="absolute bottom-12 left-14 rounded-sm border border-slate-400 bg-slate-200 px-2 py-1.5 text-xs opacity-50 dark:border-slate-600 dark:bg-slate-800"
                    >
                      UI-UX
                    </div>
                    <div
                      id="react-js"
                      className="absolute top-20 left-2 rounded-sm border border-slate-400 bg-slate-200 px-2 py-1.5 text-xs opacity-50 dark:border-slate-600 dark:bg-slate-800"
                    >
                      Graphic Design
                    </div>
                    <div
                      id="typescript"
                      className="absolute right-1 bottom-20 rounded-sm border border-slate-400 bg-slate-200 px-2 py-1.5 text-xs opacity-50 dark:border-slate-600 dark:bg-slate-800"
                    >
                      Web Application
                    </div>
                    <div
                      id="javascript"
                      className="absolute top-10 right-12 rounded-sm border border-slate-400 bg-slate-200 px-2 py-1.5 text-xs opacity-50 dark:border-slate-600 dark:bg-slate-800"
                    >
                      Branding
                    </div>

                    <div id="pointer" className="absolute">
                      <svg
                        width="16.8"
                        height="18.2"
                        viewBox="0 0 12 13"
                        className="fill-brand"
                        stroke="white"
                        strokeWidth="1"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          fillRule="evenodd"
                          clipRule="evenodd"
                          d="M12 5.50676L0 0L2.83818 13L6.30623 7.86537L12 5.50676V5.50676Z"
                        />
                      </svg>
                      <span className="bg-primary relative -top-1 left-3 rounded-3xl px-2 py-1 text-xs text-primary-foreground">
                        Ali
                      </span>
                    </div>
                  </div>

                  <div className="-mt-20 flex h-full flex-col justify-center p-2 md:-mt-4 md:ml-10 md:w-[400px]">
                    <div className="flex flex-col items-center">
                      <h3 className="mt-6 pb-1 font-bold">
                        <span className="text-2xl md:text-4xl">
                          Any questions about Design?
                        </span>
                      </h3>
                    </div>
                    <p className="mb-4 text-slate-400">
                      Feel free to reach out to me!
                    </p>
                    <div className="flex flex-wrap gap-2">
                      <Link
                        href={"https://cal.com/dalim/15min"}
                        target="_blank"
                      >
                        <Button>Book a call</Button>
                      </Link>
                      <Link
                        href="mailto:contact@dalim.in"
                        target="_blank"
                        className={cn(
                          buttonVariants({
                            variant: "outline",
                            size: "icon",
                          })
                        )}
                      >
                        <span className="flex items-center gap-1">
                          <Mail strokeWidth={1} className="h-5 w-5" />
                        </span>
                      </Link>
                      <Link
                        href="https://wa.me/917678432186"
                        target="_blank"
                        className={cn(
                          buttonVariants({
                            variant: "outline",
                            size: "icon",
                          })
                        )}
                      >
                        <span className="flex items-center gap-1">
                          <WhatsApp />
                        </span>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}