'use client'

import Link from 'next/link'

const socialLinks = [
  { name: 'FACEBOOK', href: 'https://facebook.com' },
  { name: 'INSTAGRAM', href: 'https://instagram.com' },
  { name: 'LINKEDIN', href: 'https://linkedin.com' },
  { name: '***', href: '**' },
]

const offices = [
  {
    num: '01',
    name: 'Fethiye | Merkez Ofis',
    address: 'Karagözler, 48300 Fethiye/Muğla',
    phone: '0553 093 72 25'
  }
]

export default function ContactPage() {

  return (
    <main className="relative min-h-screen bg-[#111111] text-white flex flex-col selection:bg-white selection:text-black">

      <div className="flex-1 flex flex-col justify-center items-end px-10 pt-40">
        <div className="flex flex-wrap justify-end gap-4">
          {socialLinks.map((link) => (
            <Link
              key={link.name}
              href={link.href}
              className="border border-white/20 px-4 py-2 text-[10px] font-extrabold tracking-widest hover:bg-white hover:text-black transition-all duration-300 rounded-[1px]"
            >
              {link.name}
            </Link>
          ))}
        </div>
      </div>

      <div className="w-full px-10 pb-40">
        <div className="border-t border-white/20">
          {offices.map((office) => (
            <div
              key={office.num}
              className="grid grid-cols-1 md:grid-cols-[60px_1fr_1fr_1fr] gap-8 py-10 border-b border-white/20 items-start hover:bg-white hover:text-black px-6 -mx-6 transition-all duration-300 group cursor-default"
            >
              <div className="text-[12px] font-bold text-white/40 group-hover:text-black/40">
                {office.num}
              </div>
              <div className="text-[20px] md:text-[24px] font-normal tracking-tight">
                {office.name}
              </div>
              <div className="text-[12px] leading-relaxed text-zinc-400 group-hover:text-black whitespace-pre-line">
                {office.address}
              </div>
              <div className="text-[12px] font-bold text-right group-hover:text-black">
                {office.phone}
              </div>
            </div>
          ))}
        </div>
      </div>



    </main>
  )
}