import React from "react"; import { motion } from "motion/react"; import { Mail, MapPin, Phone, Send, Github, Twitter, Linkedin, Globe, MessageSquare, ArrowUpRight } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Label } from "@/components/ui/label"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { Container } from "@/components/ui/container"; export default function ContactSection() { return (

{/* Left Column: The Hook & Form */}

Available for New Missions

LET'S BUILD
THE FUTURE.

Whether you're looking to scale your engineering team or build a high-fidelity interface from zero, I'm locked in.

e.preventDefault()}>

Full Name

Email Address

Message

</div>

<Button size="lg" className="w-full md:w-auto px-8 py-6 text-sm uppercase tracking-widest group relative overflow-hidden">
                <span className="relative z-10 flex items-center gap-2">
                  Initialize Transmission <Send className="w-4 h-4 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
                </span>
                <motion.div 
                  className="absolute inset-0 bg-primary-foreground/10"
                  initial={{ x: "-100%" }}
                  whileHover={{ x: "0%" }}
                  transition={{ duration: 0.3 }}
                />
              </Button>
            </form>
          </motion.div>

{/* Right Column: Info Panel */}
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="lg:col-span-5"
          >
            <Card className="relative overflow-hidden border-border bg-card/50 backdrop-blur-xl p-8 md:p-10 space-y-10 h-full">
              {/* Decorative background element */}
              <div className="absolute top-0 right-0 w-32 h-32 bg-primary/5 blur-3xl -mr-16 -mt-16" />
              
              <div className="space-y-8">
                <div>
                  <h3 className="text-xs uppercase tracking-widest text-primary font-bold mb-6">Contact Intel</h3>
                  <div className="space-y-6">
                    <ContactItem icon={<Mail className="w-5 h-5" />} label="Email" value="hello@shadway.dev" />
                    <ContactItem icon={<Phone className="w-5 h-5" />} label="Encrypted Line" value="+1 (555) 012-3456" />
                    <ContactItem icon={<MapPin className="w-5 h-5" />} label="HQ" value="Neo-Tokyo, Sector 7" />
                  </div>
                </div>

<div>
                  <h3 className="text-xs uppercase tracking-widest text-primary font-bold mb-6">Digital Footprint</h3>
                  <div className="grid grid-cols-2 gap-4">
                    <SocialLink icon={<Github className="w-4 h-4" />} name="GitHub" />
                    <SocialLink icon={<Twitter className="w-4 h-4" />} name="Twitter/X" />
                    <SocialLink icon={<Linkedin className="w-4 h-4" />} name="LinkedIn" />
                    <SocialLink icon={<Globe className="w-4 h-4" />} name="Dribbble" />
                  </div>
                </div>
              </div>

<div className="pt-8 mt-auto">
                <div className="p-6 rounded-2xl bg-muted/30 border border-border/50 space-y-3">
                  <div className="flex items-center gap-2 text-primary">
                    <MessageSquare className="w-4 h-4" />
                    <span className="text-xs font-bold uppercase tracking-tighter">Live Support</span>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Current response latency: <span className="text-foreground font-mono">~2 hours</span>
                  </p>
                </div>
              </div>
            </Card>
          </motion.div>
        </div>
      </Container>
    </div>
  );
}

function ContactItem({ icon, label, value }: { icon: React.ReactNode, label: string, value: string }) {
  return (
    <div className="flex items-start gap-4 group cursor-pointer">
      <div className="p-2.5 rounded-xl bg-primary/10 text-primary border border-primary/20 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-300">
        {icon}
      </div>
      <div>
        <p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-1">{label}</p>
        <p className="text-sm font-medium group-hover:text-primary transition-colors">{value}</p>
      </div>
    </div>
  );
}

function SocialLink({ icon, name }: { icon: React.ReactNode, name: string }) {
  return (
    <a 
      href="#" 
      className="flex items-center justify-between p-3 rounded-lg border border-border/50 hover:border-primary/50 hover:bg-primary/5 transition-all group"
    >
      <div className="flex items-center gap-3">
        <span className="text-muted-foreground group-hover:text-primary transition-colors">{icon}</span>
        <span className="text-xs font-medium">{name}</span>
      </div>
      <ArrowUpRight className="w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all" />
    </a>
  );
}</article></body></html>

LET'S BUILD THE FUTURE.

LET'S BUILD
THE FUTURE.

Contact Section with Form and Info Panel