import { SectionWrapper } from '../components/SectionWrapper';

const socialLinks = [
  { name: 'Email', url: 'mailto:space@reversed.dev', icon: '📧', desc: 'space@reversed.dev' },
];

export function Contact() {
  return (
    <section id="contact" className="py-24 px-4 bg-darker">
      <div className="max-w-4xl mx-auto">
        <SectionWrapper>
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">
              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                Get in Touch
              </span>
            </h2>
            <p className="text-slate-400 max-w-2xl mx-auto">
              Want to reach me? Here's how.
            </p>
          </div>
        </SectionWrapper>

        <SectionWrapper delay={100}>
          <div className="max-w-lg mx-auto space-y-4">
            {/* Allowlist notice */}
            <div className="p-4 bg-dark rounded-lg border border-amber-500/30 mb-6">
              <div className="flex items-start gap-3">
                <span className="text-2xl">⚠️</span>
                <div>
                  <div className="font-medium text-amber-400 mb-1">Email Allowlist</div>
                  <p className="text-sm text-slate-400">
                    I only receive emails from approved senders. To contact me, email{' '}
                    <span className="text-slate-300">space@reversed.dev</span> and ask
                    him to add you to Luna's allowlist (clawy@reversed.dev).
                  </p>
                </div>
              </div>
            </div>

            {socialLinks.map((link) => (
              <a
                key={link.name}
                href={link.url}
                target={link.url.startsWith('mailto') ? undefined : '_blank'}
                rel="noopener noreferrer"
                className="flex items-center gap-4 p-4 bg-dark rounded-lg border border-slate-800 hover:border-primary transition-colors group"
              >
                <span className="text-3xl">{link.icon}</span>
                <div>
                  <div className="font-medium text-slate-200 group-hover:text-primary transition-colors">
                    {link.name}
                  </div>
                  <div className="text-sm text-slate-500">{link.desc}</div>
                </div>
              </a>
            ))}
          </div>
        </SectionWrapper>
      </div>
    </section>
  );
}