"use client";
import React, { useEffect, useState, useRef } from "react";
import { motion, useInView } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import {
  MapPin,
  Mail,
  Phone,
  Globe,
  Clock,
  Briefcase,
  Lightbulb,
  User,
  BadgeCheck,
  Volume2,
  Code2,
  Github,
  Twitter,
  Linkedin,
  ArrowUpRight,
  CloudSun,
  FileText,
} from "lucide-react";

export function Hero() {
  const [temperature, setTemperature] = useState<number | null>(null);
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-100px" });

  /* State for managing real-time clock and preventing hydration mismatch */
  const [time, setTime] = useState<string>("");

  useEffect(() => {
    // Function to update time
    const updateTime = () => {
      setTime(
        new Date().toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        }),
      );
    };

    // Set initial time
    updateTime();

    // Update every minute (no performance impact)
    const intervalId = setInterval(updateTime, 1000 * 60);

    // Cleanup on unmount
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    fetch(
      "https://api.open-meteo.com/v1/forecast?latitude=17.3850&longitude=78.4867&current=temperature_2m",
    )
      .then((res) => res.json())
      .then((data) => setTemperature(data.current.temperature_2m))
      .catch((err) => console.error(err));
  }, []);

  return (
    <section
      id="hero"
      className="relative mt-10 overflow-hidden border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950"
    >
      {/* Grid Background Pattern */}

      <motion.div
        ref={ref}
        initial={{ opacity: 0, y: 20 }}
        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
        transition={{ duration: 0.6 }}
        className="flex flex-col md:flex-row"
      >
        {/* Left/Top Section: Profile & Name */}
        <div className="item-start flex w-full flex-col gap-6 border-b border-zinc-200 p-6 md:w-2/5 md:items-center md:border-r md:border-b-0 dark:border-zinc-800">
          <div className="relative">
            {/* Flag Badge Placeholder */}
            <div className="absolute -top-2 -left-2 z-20 flex h-8 w-12 items-center justify-center rounded-sm border border-zinc-100 bg-white text-2xl shadow-sm dark:border-zinc-800 dark:bg-zinc-950">
              🇮🇳
            </div>
            {/* Profile Image Placeholder */}
            <div className="relative h-40 w-40 overflow-hidden rounded-full border-4 border-white bg-zinc-100 shadow-xl dark:border-zinc-900 dark:bg-zinc-800">
              {/* Light Mode Avatar */}
              <div className="relative h-full w-full dark:hidden">
                <Image
                  src="/images/portfolio-avatar-solid.png"
                  alt="Anurag Daliya (Light)"
                  fill
                  className="object-cover"
                  priority
                />
              </div>

              {/* Dark Mode Avatar */}
              <div className="relative hidden h-full w-full dark:block">
                <Image
                  src="/images/portfolio-avatar-solid-dark.png"
                  alt="Anurag Daliya (Dark)"
                  fill
                  className="object-cover"
                  priority
                />
              </div>
            </div>
          </div>

          <div className="flex h-full flex-col justify-center pt-2">
            <div className="mb-1 flex items-center gap-2">
              <h1 className="text-xl font-bold text-zinc-900 dark:text-white">
                Anurag Daliya
              </h1>
              <BadgeCheck className="h-5 w-5 fill-blue-500/10 text-blue-500" />
            </div>
            <p className="text-base font-medium text-zinc-500 dark:text-zinc-400">
              Full Stack Developer
            </p>
            <p className="mt-1.5 max-w-[280px] text-xs leading-relaxed text-zinc-400 dark:text-zinc-500">
              Specializing in React, Next.js &amp; modern web applications.
              Building high-performance SaaS platforms &amp; modern frontend
              systems.
            </p>
          </div>
        </div>

        {/* Right/Bottom Section: Details Grid */}
        <div className="w-full bg-zinc-50/50 p-6 md:w-3/5 dark:bg-zinc-900/50">
          <div className="grid grid-cols-1 gap-3">
            {/* Work */}
            <div className="group flex items-start gap-3">
              <div className="rounded-lg border border-zinc-200 bg-white p-1.5 text-zinc-500 transition-colors group-hover:border-zinc-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:group-hover:border-zinc-600">
                <Code2 className="h-4 w-4" />
              </div>
              <div>
                <p className="text-md font-medium text-zinc-900 dark:text-white">
                  Software Engineer
                </p>
                <p className="text-xs text-zinc-500 dark:text-zinc-400">
                  @ Bizacuity Pvt. Ltd.
                </p>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4 border-t border-zinc-200 pt-3 dark:border-zinc-800">
              {/* Location */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <MapPin className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <span>Hyderabad, India</span>
              </div>

              {/* Time */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <Clock className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                {/* Use state 'time' to avoid hydration mismatch */}
                <span>{time || "--:-- --"} // IST</span>
              </div>

              {/* Temperature */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <CloudSun className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <span>
                  {temperature ? `${temperature}°C` : "Loading..."} // HYD
                </span>
              </div>

              {/* Resume */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <FileText className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <Link
                  href="/resume.pdf"
                  className="hover:underline"
                  target="_blank"
                >
                  Resume
                </Link>
              </div>

              {/* Email */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <Mail className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <Link
                  href="mailto:anurag19.work@gmail.com"
                  className="hover:underline"
                >
                  Email
                </Link>
              </div>

              {/* Github */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <Github className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <Link
                  href="https://github.com/danurag1906"
                  className="hover:underline"
                  target="_blank"
                >
                  Github
                </Link>
              </div>

              {/* Twitter */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <Twitter className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <Link
                  href="https://x.com/anurag19_dev"
                  className="hover:underline"
                  target="_blank"
                >
                  Twitter
                </Link>
              </div>

              {/* LinkedIn */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <Linkedin className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <Link
                  href="https://www.linkedin.com/in/anurag-daliya/"
                  className="hover:underline"
                  target="_blank"
                >
                  LinkedIn
                </Link>
              </div>

              {/* Peerlist */}
              <div className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                <ArrowUpRight className="h-4 w-4 text-zinc-400 transition-colors hover:text-zinc-600 dark:hover:text-zinc-200" />
                <Link
                  href="https://peerlist.io/anurag19_dev"
                  className="hover:underline"
                  target="_blank"
                >
                  Peerlist
                </Link>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </section>
  );
}
Hero Section

Anurag Daliya
