import { FaGithub, FaInstagram, FaYoutube, FaLinkedin, FaSteam, FaXTwitter } from "react-icons/fa6";

export default function Footer() {
  return (
    <footer id="contacts" className="mt-12 bg-[var(--c-background-light)]">
      <div className="container py-8 grid gap-6 md:grid-cols-3">
        <div>
          <h3 className="text-xl font-semibold text-rainbow">vontor.cz</h3>
          <p className="text-sm text-[var(--c-lines)] mt-2">© 2025 Vontor.cz</p>
        </div>

        <address className="not-italic text-sm">
          <div><b>David Bruno Vontor</b></div>
          <div className="mt-2">Tel.: <a className="hover:text-[var(--c-other)]" href="tel:+420605512624">+420 605 512 624</a></div>
          <div>E-mail: <a className="hover:text-[var(--c-other)]" href="mailto:brunovontor@gmail.com">brunovontor@gmail.com</a></div>
          <div className="mt-1">IČO: <a className="hover:text-[var(--c-other)]" href="https://www.rzp.cz/verejne-udaje/cs/udaje/vyber-subjektu;ico=21613109;" target="_blank" rel="noopener noreferrer">21613109</a></div>
        </address>

        <div className="flex items-center gap-4 text-2xl justify-start md:justify-end">
          <Social href="https://github.com/Brunobrno" label="GitHub"><FaGithub /></Social>
          <Social href="https://www.instagram.com/brunovontor/" label="Instagram"><FaInstagram /></Social>
          <Social href="https://twitter.com/BVontor" label="X / Twitter"><FaXTwitter /></Social>
          <Social href="https://www.youtube.com/@brunovontor" label="YouTube"><FaYoutube /></Social>
          <Social href="https://www.linkedin.com/in/brunovontor/" label="LinkedIn"><FaLinkedin /></Social>
          <Social href="https://steamcommunity.com/id/Brunobrno/" label="Steam"><FaSteam /></Social>
        </div>
      </div>
    </footer>
  );
}

function Social({ href, label, children }: { href: string; label: string; children: React.ReactNode }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferrer"
      aria-label={label}
      className="group relative inline-flex items-center justify-center w-12 h-12 rounded-xl bg-brandGradient text-white shadow-glow transition-transform duration-200 hover:scale-110"
    >
      <span className="text-xl group-hover:scale-110 transition-transform">{children}</span>
    </a>
  );
}
