import { Mail, MessageCircle, ArrowUpRight } from "lucide-react";
import { GithubIcon, LinkedinIcon, InstagramIcon } from "../components/BrandIcons";
import { profile } from "../data/profile";
import SectionHeading from "../components/SectionHeading";
import Reveal from "../components/Reveal";

const channels = [
  { icon: Mail, label: "Email", value: profile.social.email, href: `mailto:${profile.social.email}` },
  { icon: GithubIcon, label: "GitHub", value: profile.social.github, href: profile.social.github },
  { icon: LinkedinIcon, label: "LinkedIn", value: profile.social.linkedin, href: profile.social.linkedin },
  { icon: MessageCircle, label: "WhatsApp", value: profile.social.whatsapp, href: profile.social.whatsapp },
  { icon: InstagramIcon, label: "Instagram", value: profile.social.instagram, href: profile.social.instagram },
];

export default function Contact() {
  return (
    <section id="contacto" className="container-px py-28 md:py-36">
      <div className="mx-auto max-w-6xl">
        <div className="glow-border rounded-3xl">
          <div className="glass grain rounded-3xl p-8 sm:p-14 flex flex-col gap-10">
            <SectionHeading
              eyebrow="Contacto"
              title="¿Tienes una idea? Hagámosla realidad."
              subtitle="Si tienes un proyecto, una idea o simplemente quieres hablar sobre tecnología, estoy abierto a nuevas oportunidades y desafíos."
            />

            <Reveal delay={0.1}>
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {channels.map(({ icon: Icon, label, value, href }) => (
                  <a
                    key={label}
                    href={href}
                    target="_blank"
                    rel="noreferrer"
                    className="group flex items-center gap-4 rounded-2xl border border-[color:var(--color-border)] p-4 hover:border-[color:var(--color-accent)] transition-colors"
                  >
                    <span className="grid place-items-center h-11 w-11 shrink-0 rounded-xl bg-[color:var(--color-accent)]/10 text-[color:var(--color-accent)]">
                      <Icon size={19} />
                    </span>
                    <div className="min-w-0">
                      <p className="text-xs text-[color:var(--color-muted)]">{label}</p>
                      <p className="text-sm truncate group-hover:text-[color:var(--color-accent)] transition-colors">
                        {value}
                      </p>
                    </div>
                    <ArrowUpRight
                      size={16}
                      className="ml-auto shrink-0 text-[color:var(--color-muted)] group-hover:text-[color:var(--color-accent)] transition-colors"
                    />
                  </a>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}
