wilddragon-site/src.bright-backup/components/Contact.tsx

import { Mail, MapPin, ArrowRight } from "lucide-react";
import ScrollReveal from "./ScrollReveal";

function LinkedinIcon({ size = 20, className = "" }: { size?: number; className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
      <rect width="4" height="12" x="2" y="9" />
      <circle cx="4" cy="4" r="2" />
    </svg>
  );
}

export default function Contact() {
  return (
    <section id="contact" className="py-28 md:py-36 bg-surface-elevated noise-overlay">
      <div className="relative z-10 max-w-6xl mx-auto px-6">
        <ScrollReveal>
          <div className="max-w-3xl mx-auto text-center mb-16">
            <div className="w-10 h-px bg-accent mx-auto mb-6 glow-accent-sm" />
            <p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
              Contact
            </p>
            <h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight mb-6">
              Let&apos;s build <span className="text-gradient">something.</span>
            </h2>
            <p className="text-white/55 leading-relaxed">
              Whether you&apos;re planning a new broadcast facility, upgrading
              existing infrastructure, or exploring cloud and IP-based production
              workflows, I&apos;d love to discuss your project.
            </p>
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 max-w-3xl mx-auto mb-16">
          <ScrollReveal delay={0}>
            <a
              href="mailto:zgaetano@wilddragon.net"
              className="group flex flex-col items-center p-8 rounded-xl border border-border hover:border-border-hover bg-surface-card transition-all duration-300 border-glow"
            >
              <div className="w-12 h-12 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center mb-4 group-hover:bg-accent/15 transition-all duration-300">
                <Mail
                  size={18}
                  className="text-accent transition-colors duration-300"
                  strokeWidth={1.5}
                />
              </div>
              <span className="text-sm font-medium text-white mb-1">Email</span>
              <span className="text-xs text-white/45">zgaetano@wilddragon.net</span>
            </a>
          </ScrollReveal>

          <ScrollReveal delay={80}>
            <a
              href="https://www.linkedin.com/in/zachary-gaetano-05962386/"
              target="_blank"
              rel="noopener noreferrer"
              className="group flex flex-col items-center p-8 rounded-xl border border-border hover:border-border-hover bg-surface-card transition-all duration-300 border-glow"
            >
              <div className="w-12 h-12 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center mb-4 group-hover:bg-accent/15 transition-all duration-300">
                <LinkedinIcon
                  size={18}
                  className="text-accent transition-colors duration-300"
                />
              </div>
              <span className="text-sm font-medium text-white mb-1">
                LinkedIn
              </span>
              <span className="text-xs text-white/45">Zachary Gaetano</span>
            </a>
          </ScrollReveal>

          <ScrollReveal delay={160}>
            <div className="flex flex-col items-center p-8 rounded-xl border border-border bg-surface-card">
              <div className="w-12 h-12 rounded-full bg-accent/10 border border-accent/20 flex items-center justify-center mb-4">
                <MapPin size={18} className="text-accent" strokeWidth={1.5} />
              </div>
              <span className="text-sm font-medium text-white mb-1">
                Location
              </span>
              <span className="text-xs text-white/45">Washington, DC Area</span>
            </div>
          </ScrollReveal>
        </div>

        {/* CTA Banner */}
        <ScrollReveal delay={200}>
          <div className="relative overflow-hidden rounded-2xl bg-surface-card border border-border p-10 md:p-14 text-center border-glow">
            {/* Radial glow */}
            <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[300px] bg-accent/[0.06] rounded-full blur-[80px]" />

            {/* Subtle pattern */}
            <div className="absolute inset-0 opacity-[0.04]">
              <div
                className="absolute inset-0"
                style={{
                  backgroundImage: `linear-gradient(rgba(59, 130, 246, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.5) 1px, transparent 1px)`,
                  backgroundSize: "60px 60px",
                }}
              />
            </div>
            <div className="relative z-10">
              <h3 className="text-2xl md:text-3xl font-semibold text-white mb-4">
                Ready to start your next project?
              </h3>
              <p className="text-white/55 mb-8 max-w-lg mx-auto">
                From initial concept through commissioning and training, I bring
                a complete lifecycle approach to every facility I design.
              </p>
              <a
                href="mailto:zgaetano@wilddragon.net"
                className="inline-flex items-center gap-2 px-8 py-3.5 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200 hover:shadow-lg hover:shadow-accent/25 group"
              >
                Start a Conversation
                <ArrowRight size={15} className="group-hover:translate-x-1 transition-transform duration-200" />
              </a>
            </div>
          </div>
        </ScrollReveal>
      </div>
    </section>
  );
}