'use client';

import { motion } from 'framer-motion';
import { Mail, MapPin, Linkedin, Twitter } from 'lucide-react';

export default function Contact() {
  return (
    <section id="contact" className="py-32 px-6 relative">
      <div className="max-w-4xl mx-auto text-center">
        <motion.h2 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          className="font-serif text-5xl md:text-7xl mb-8"
        >
          Initiate Protocol
        </motion.h2>
        
        <motion.p 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
          className="font-mono text-faint mb-12 max-w-lg mx-auto"
        >
          Open for research collaborations, speaking engagements, and high-impact engineering consulting.
        </motion.p>

        <motion.a
          href="mailto:contact@airesearcher.ai"
          initial={{ scale: 0.9, opacity: 0 }}
          whileInView={{ scale: 1, opacity: 1 }}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          className="liquid-btn inline-block px-12 py-5 text-lg font-serif tracking-wide"
        >
          Establish Connection
        </motion.a>

        <motion.div 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ delay: 0.4 }}
          className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-white/10 pt-12"
        >
          <div className="flex flex-col items-center gap-2 group">
            <Mail className="w-5 h-5 text-faint group-hover:text-white transition-colors" />
            <span className="font-mono text-xs uppercase tracking-widest text-faint group-hover:text-white transition-colors">contact@airesearcher.ai</span>
          </div>
          <div className="flex flex-col items-center gap-2 group">
            <MapPin className="w-5 h-5 text-faint group-hover:text-white transition-colors" />
            <span className="font-mono text-xs uppercase tracking-widest text-faint group-hover:text-white transition-colors">San Francisco, CA</span>
          </div>
          <div className="flex justify-center gap-6">
            <a href="#" className="text-faint hover:text-white transition-colors"><Linkedin size={20} /></a>
            <a href="#" className="text-faint hover:text-white transition-colors"><Twitter size={20} /></a>
          </div>
        </motion.div>

        <div className="mt-20">
          <a 
            href="https://huggingface.co/spaces/akhaliq/anycoder" 
            target="_blank" 
            rel="noopener noreferrer"
            className="font-mono text-[10px] uppercase tracking-widest text-white/30 hover:text-white/60 transition-colors"
          >
            Built with anycoder
          </a>
        </div>
      </div>
    </section>
  );
}