portifolio-evandrodevbr/app/components/Hero.tsx

"use client";

import { motion } from "motion/react";
import Image from "next/image";
import { AuroraText } from "@/components/magicui/aurora-text";
import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
import { Github, Linkedin, MessageCircle, Mail, MapPin, Terminal } from "lucide-react";
import TextType from "@/components/TextType";

export default function Hero() {
  const getGreetingMessage = () => {
    const hour = new Date().getHours();
    if (hour >= 8 && hour < 12) return "Olá! Vi seu portfólio. Podemos conversar?";
    if (hour >= 13 && hour < 18) return "Boa tarde! Vi seu portfólio. Podemos conversar?";
    return "Olá! Vi seu portfólio. Podemos conversar quando estiver disponível?";
  };

  const generateWhatsAppUrl = () => {
    const message = encodeURIComponent(getGreetingMessage());
    return `https://wa.me/5547992742365?text=${message}`;
  };

  return (
    <section id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#030712] pt-28 md:pt-20">
      {/* 1. Background Engineering: Grid Pattern & Radial Shading */}
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1f2937_1px,transparent_1px),linear-gradient(to_bottom,#1f2937_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-20" />
        <div className="absolute inset-0 bg-radial-at-t from-blue-500/10 via-transparent to-transparent" />
      </div>

      <div className="relative z-10 w-full max-w-6xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
        
        {/* Lado Esquerdo: Conteúdo Textual (80/20 do Impacto) */}
        <div className="lg:col-span-7 text-left">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6 }}
          >
            <AnimatedGradientText className="mb-6 inline-flex items-center gap-2 px-4 py-2 rounded-full border border-blue-500/20 bg-blue-500/5 backdrop-blur-md">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500"></span>
              </span>
              <span className="text-sm font-medium text-cyan-300 tracking-wide uppercase">
                Systems Engineer available
              </span>
            </AnimatedGradientText>

            <h1 className="text-5xl md:text-7xl font-black text-white mb-4 tracking-tight leading-none">
              Evandro <br />
              <AuroraText className="italic">Fonseca Junior</AuroraText>
            </h1>

            <div className="h-10 flex items-center gap-2 mb-6">
              <Terminal className="w-5 h-5 text-blue-400" />
              <TextType
                text={["Full-Stack Engineer", "Cloud Solutions Architect", "AI Integration Specialist"]}
                className="text-2xl font-mono text-slate-400"
                typingSpeed={60}
              />
            </div>

            <p className="text-lg text-slate-400 max-w-xl mb-10 leading-relaxed">
              Desenvolvendo arquiteturas escaláveis com a precisão da <span className="text-white font-medium">Engenharia da Computação</span>. 
              Especialista em transformar requisitos complexos em sistemas de alta disponibilidade.
            </p>

            <div className="flex flex-wrap gap-4 items-center">
              <motion.a
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                href={generateWhatsAppUrl()}
                className="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-600/20 flex items-center gap-2"
              >
                <MessageCircle className="w-5 h-5" />
                Iniciar Projeto
              </motion.a>
              
              <div className="flex gap-4 px-4">
                {[
                  { icon: Github, link: "https://github.com/evandrodevbr", rel: "me" },
                  { icon: Linkedin, link: "https://www.linkedin.com/in/evandro-fonseca-junior-0969aa1b0/", rel: "me" },
                  { icon: Mail, link: "mailto:[email protected]" }
                ].map((social, i) => (
                  <a 
                    key={i} 
                    href={social.link} 
                    rel={social.rel ? `${social.rel} noopener noreferrer` : "noopener noreferrer"}
                    target={social.link.startsWith("mailto:") ? undefined : "_blank"}
                    className="p-3 rounded-lg border border-slate-800 text-slate-400 hover:text-white hover:border-slate-600 transition-all"
                  >
                    <social.icon className="w-5 h-5" />
                  </a>
                ))}
              </div>
            </div>

            <div className="mt-8 flex items-center gap-2 text-slate-500 text-sm">
              <MapPin className="w-4 h-4" />
              <span>Garuva, SC | Remote Worldwide</span>
            </div>
          </motion.div>
        </div>

        {/* Lado Direito: Visual (A "Âncora" do Design) */}
        <div className="lg:col-span-5 relative flex justify-center">
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="relative w-72 h-72 md:w-96 md:h-96"
          >
            {/* Elementos Orbitais (Vibe Engenharia) */}
            <div className="absolute inset-0 rounded-full border border-dashed border-blue-500/30 animate-[spin_20s_linear_infinite]" />
            <div className="absolute inset-10 rounded-full border border-blue-500/10 animate-[spin_15s_linear_infinite_reverse]" />
            
            {/* Foto de Perfil com Masking de Engenharia */}
            <div className="relative z-10 w-full h-full rounded-[2.5rem] overflow-hidden border-2 border-slate-800 shadow-2xl">
              <div className="absolute inset-0 bg-blue-500/10 z-10 hover:opacity-0 transition-opacity duration-500" />
              <Image
                src="/edev.jpeg"
                alt="Evandro Fonseca Junior"
                fill
                className="object-cover grayscale hover:grayscale-0 transition-all duration-700 scale-105 hover:scale-100"
                priority
                fetchPriority="high"
              />
            </div>
            
            {/* Floating Stats Badge */}
            <div className="absolute -bottom-6 -right-6 bg-slate-900 border border-slate-800 p-4 rounded-2xl shadow-2xl z-20 backdrop-blur-xl">
              <p className="text-xs text-slate-500 uppercase font-bold tracking-tighter">Exp. Level</p>
              <p className="text-xl font-mono text-blue-400">Mid-Level Engineer</p>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Scroll Indicator (Refinado) */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
        <span className="text-[10px] text-slate-600 uppercase tracking-[0.2em]">Scroll</span>
        <div className="w-[1px] h-12 bg-gradient-to-b from-blue-500 to-transparent" />
      </div>
    </section>
  );
}