"use client";

import { GradientMesh } from "@/components/gradient-mesh";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export function HeroSection01() {
  return (
    <div className="h-screen flex items-center justify-center relative">
      {/* GradientWave behind the text */}
      <GradientMesh />
      <div className="flex flex-col text-center">
        <img
          src="/ai-logo.png"
          alt="Your Image"
          height={50}
          width={50}
          className="h-30 z-40 w-full object-contain"
        />
        <h2 className="font-extrabold pt-10 text-black mix-blend-overlay tracking-tighter text-7xl md:text-7xl lg:text-9xl">
          Design <br /> without Limits
        </h2>
        <div className="space-y-6 z-10 pt-20 flex justify-center items-center flex-col text-center px-6">
          <p className="text-black w-full  max-w-lg font-light text-sm md:text-xl">
            I create digital experiences that connect and inspire. I build apps,
            websites, brands, and products end-to-end.
          </p>
          <div className="flex gap-3 mt-6 flex-wrap justify-center">
            <Link target="_blank" href="https://cal.com/aliimam-in/30min">
              <Button className="h-12 md:h-14 rounded-full cursor-pointer px-8 md:px-10">
                Book an Intro Call
              </Button>
            </Link>
            <Button
              variant={"secondary"}
              className="h-12 md:h-14 cursor-pointer rounded-full px-8 md:px-10"
            >
              Get Started Explore
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

import { Header } from "@/components/header";

export function Header05() {
  return (
    <div className="flex flex-col min-h-screen w-full">
      <Header /> 
      <main className="flex-1">
        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section> 

        <section className="h-screen flex items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  );
}

import {
  ClaudeAI,
  Cursor,
  Gemini,
  Github,
  Google,
  Grok,
  OpenAI,
  Replicate,
} from "@aliimam/logos";

export function Logos01() {
  return (
    <div className="py-20 flex min-h-screen flex-col items-center justify-center">
      <h1 className="mb-10 px-20 text-muted-foreground text-center text-sm font-medium">
        Trusted by the world’s most creative companies.
      </h1>
      <div className="mx-auto max-w-md">
        <div className="flex px-10 flex-wrap items-center justify-center gap-12">
          <OpenAI size={40} />
          <ClaudeAI size={40} />
          <Replicate size={40} />
          <Cursor size={40} />
          <Gemini size={40} />
          <Github size={40} />
          <Grok size={40} />
          <Google size={40} />
        </div>
      </div>
    </div>
  );
}

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 React, { useState } from "react"; 
import { ChevronRight, MapPin, Speech } from "@aliimam/icons";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Github } from "@aliimam/logos";

import { Marquee } from "@/components/marquee";
import { Blur } from "@/components/blur";

const technologies = [
  { name: "React", color: "bg-blue-500" },
  { name: "Next.js", color: "bg-black" },
  { name: "TypeScript", color: "bg-blue-600" },
  { name: "Tailwind CSS", color: "bg-cyan-500" },
  { name: "Framer Motion", color: "bg-pink-500" },
  { name: "Radix UI", color: "bg-green-500" },
  { name: "Lucide Icons", color: "bg-orange-500" },
  { name: "shadcn/ui", color: "bg-purple-500" },
];

export function HeroSection05() {
  const [selectedDuration, setSelectedDuration] = useState("30m");
  const [selectedDay, setSelectedDay] = useState(9);

  const calendarDays = [
    { date: 1, available: true },
    { date: 2, available: true },
    { date: 5, available: false },
    { date: 6, available: true },
    { date: 7, available: false },
    { date: 8, available: true },
    { date: 9, available: true },
    { date: 12, available: true },
    { date: 13, available: false },
    { date: 14, available: false },
    { date: 15, available: true },
    { date: 16, available: false },
    { date: 19, available: false },
    { date: 20, available: true },
    { date: 21, available: false },
    { date: 22, available: true },
    { date: 23, available: false },
    { date: 26, available: false },
    { date: 27, available: true },
    { date: 28, available: false },
    { date: 29, available: true },
    { date: 30, available: false },
  ];

  const durations = ["15m", "30m", "45m", "1h"];

  return (
    <div className="min-h-screen py-12">
      <div
        className="absolute hidden dark:block inset-0 z-0"
        style={{
          background:
            "radial-gradient(125% 125% at 50% 10%, #000 40%, #6366f1 100%)",
        }}
      />
      <div
        className="absolute dark:hidden inset-0 z-0"
        style={{
          background:
            "radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%)",
        }}
      />
      <div className="max-w-7xl mx-auto z-20 relative border shadow-2xl">
        <div className="p-6 md:p-20 md:pb-0 rounded-md">
          <div className="mb-6">
            <Badge variant="secondary" className="px-4 py-2 rounded-full">
              aliimam.in launches v5
              <ChevronRight className="size-6" />
            </Badge>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 items-start">
            <div>
              <h1 className="text-6xl pt-3 lg:text-7xl font-bold mb-6">
                The smarter way to manage your design.
              </h1>

              <p className="text-md text-muted-foreground mb-8">
                A fully customizable platform for designers, teams, and
                developers to schedule and collaborate seamlessly.
              </p>

              <div className="space-y-3 mb-6">
                <Button className="w-full h-12 text-base" size="lg">
                  <Github />
                  Sign up with Github
                </Button>

                <Button
                  variant="outline"
                  className="w-full h-12 text-base"
                  size="lg"
                >
                  Sign up with email
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Button>
              </div> 
            </div>

            <Card className="shadow-2xl grid gap-6 md:grid-cols-2">
              <div className="flex flex-col space-y-4 p-6">
                <div className="flex items-center gap-3 mb-2">
                  <Avatar>
                    <AvatarImage src="/brand/ai-logo.png" />
                    <AvatarFallback>AI</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-semibold">Ali Imam</p>
                  </div>
                </div>
                <CardTitle className="text-2xl">Design Engineer</CardTitle>
                <CardDescription className="text-base">
                  Discuss your legal matters with our experienced attorneys in a
                  private consultation.
                </CardDescription>
                <div className="flex items-center gap-3">
                  <div className="flex flex-wrap gap-2">
                    {durations.map((duration) => (
                      <Button
                        key={duration}
                        variant={
                          selectedDuration === duration ? "default" : "outline"
                        }
                        size="sm"
                        onClick={() => setSelectedDuration(duration)}
                        className="min-w-[60px]"
                      >
                        {duration}
                      </Button>
                    ))}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Speech className="h-5 w-5 text-primary" />
                  <span className="text-sm text-muted-foreground">Zoom</span>
                </div>

                <div className="flex items-center gap-2">
                  <MapPin className="h-5 w-5 text-muted-foreground" />
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-auto p-1 text-sm hover:bg-transparent"
                  >
                    Europe/London
                    <ChevronRight className="ml-1 h-4 w-4 rotate-90" />
                  </Button>
                </div>
              </div>

              <CardContent className="space-y-6 md:mt-6 overflow-hidden">
                <div className="border rounded-lg w-[500px] p-4">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="font-semibold ">May 2025</h3>
                  </div>

                  <div className="grid grid-cols-7 gap-1 mb-2">
                    {["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map(
                      (day) => (
                        <div
                          key={day}
                          className="text-xs text-gray-500 text-center font-medium py-2"
                        >
                          {day}
                        </div>
                      )
                    )}
                  </div>

                  <div className="grid grid-cols-7 gap-1">
                    {calendarDays.map((day, idx) => (
                      <Button
                        key={idx}
                        variant={
                          selectedDay === day.date
                            ? "default"
                            : day.available
                              ? "secondary"
                              : "ghost"
                        }
                        size="sm"
                        disabled={!day.available}
                        onClick={() =>
                          day.available && setSelectedDay(day.date)
                        }
                        className={`
                        aspect-square p-0 h-auto
                        ${!day.available && "text-muted-foreground hover:bg-transparent"}
                      `}
                      >
                        {day.date}
                      </Button>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
        <div className="relative py-10 w-full">
          <Marquee>
            {technologies.map((tech, index) => (
              <Badge
                key={index}
                className={`${tech.color} rounded-md px-4 py-2 text-sm font-medium text-white`}
              >
                {tech.name}
              </Badge>
            ))}
          </Marquee>
          <div className="bg-linear-to-r from-[oklch(0.141 0.005 285.823)] absolute inset-y-0 left-0 w-40"></div>
          <div className="bg-linear-to-l from-[oklch(0.141 0.005 285.823)] absolute inset-y-0 right-0 w-40"></div>
          <Blur
            className="pointer-events-none absolute left-0 top-0 h-full w-20"
            direction="left"
            blurIntensity={1}
          />
          <Blur
            className="pointer-events-none absolute right-0 top-0 h-full w-20"
            direction="right"
            blurIntensity={1}
          />
        </div>
      </div>
    </div>
  );
}