"use client"

import { motion } from "framer-motion"
import { Mail, MessageCircle, ArrowRight } from "lucide-react"
import Link from "next/link"

export function ContactPreview() {
  return (
    <section className="px-6 md:px-12 lg:px-24 py-24">
      <div className="max-w-4xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center p-12 md:p-16 rounded-3xl border border-border bg-gradient-to-b from-card to-background relative overflow-hidden"
        >
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[400px] h-[400px] bg-gradient-to-b from-primary/20 to-transparent rounded-full blur-3xl -z-10" />
          
          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-primary text-sm tracking-widest mb-4"
          >
            GET IN TOUCH
          </motion.p>
          
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-3xl md:text-5xl font-bold text-foreground mb-4"
          >
            Let&apos;s Build{" "}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">
              Together
            </span>
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-muted-foreground mb-8 max-w-lg mx-auto"
          >
            Have a project in mind? Need help with web development, AI automation, or digital marketing?
            I&apos;m always open to new opportunities.
          </motion.p>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3 }}
            className="flex flex-wrap justify-center gap-4"
          >
            <a
              href="mailto:webtechiewhyte@gmail.com"
              className="bg-primary text-primary-foreground px-8 py-4 rounded-full font-semibold tracking-wider hover:bg-primary/90 transition-colors flex items-center gap-2"
            >
              <Mail className="w-4 h-4" />
              SEND EMAIL
            </a>
            <a
              href="http://bit.ly/2PS9xY3"
              target="_blank"
              rel="noopener noreferrer"
              className="border border-border text-foreground px-8 py-4 rounded-full font-semibold tracking-wider hover:bg-secondary transition-colors flex items-center gap-2"
            >
              <MessageCircle className="w-4 h-4" />
              WHATSAPP
            </a>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.4 }}
            className="mt-8"
          >
            <Link
              href="/contact"
              className="inline-flex items-center gap-2 text-muted-foreground hover:text-primary transition-colors group"
            >
              <span>View all contact options</span>
              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </Link>
          </motion.div>
        </motion.div>
      </div>
    </section>
  )
}