"use client";

const socials = [
  {
    label: "Instagram",
    href: "https://instagram.com/moybeachakyaka",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-5 h-5">
        <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
        <circle cx="12" cy="12" r="4" />
        <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" stroke="none" />
      </svg>
    ),
  },
  {
    label: "Facebook",
    href: "https://facebook.com/moybeachakyaka",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
      </svg>
    ),
  },
  {
    label: "YouTube",
    href: "https://youtube.com/@moybeach",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
        <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.96-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
        <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="white" />
      </svg>
    ),
  },
];

export default function Footer({ dict }: { dict: any }) {
  const links = [
    { label: dict.nav.about, href: "#about" },
    { label: dict.nav.services, href: "#services" },
    { label: dict.nav.gallery, href: "#gallery" },
    { label: dict.nav.contact, href: "#contact" },
  ];

  return (
    <footer className="relative bg-sea-dark text-sand-light overflow-hidden">

      {/* Large decorative brand name — background texture */}
      <div className="absolute inset-x-0 top-0 flex items-start justify-center pointer-events-none select-none overflow-hidden">
        <span className="text-[clamp(6rem,20vw,18rem)] font-serif text-white/[0.03] leading-none tracking-tight whitespace-nowrap">
          MOY BEACH
        </span>
      </div>

      <div className="relative z-10">

        {/* Top section */}
        <div className="container mx-auto px-6 max-w-6xl pt-20 pb-14">
          <div className="grid md:grid-cols-3 gap-12 items-start">

            {/* Brand column */}
            <div className="md:col-span-1">
              <p className="text-2xl md:text-3xl font-serif text-white tracking-wide mb-3">MOY BEACH</p>
              <p className="text-xs uppercase tracking-[0.3em] text-coral mb-6">Akyaka · Muğla</p>
              <p className="text-sm text-sand-light/60 leading-relaxed mb-8">
                {dict.footer.desc}
              </p>

              {/* Social icons */}
              <div className="flex gap-3">
                {socials.map((s) => (
                  <a
                    key={s.label}
                    href={s.href}
                    target="_blank"
                    rel="noreferrer"
                    aria-label={s.label}
                    className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-sand-light/60 hover:text-white hover:border-coral hover:bg-coral/10 transition-all duration-300"
                  >
                    {s.icon}
                  </a>
                ))}
              </div>
            </div>

            {/* Navigation column */}
            <div>
              <h4 className="text-[11px] uppercase tracking-[0.25em] text-sand-dark mb-5">{dict.footer.pages}</h4>
              <ul className="space-y-3">
                {links.map((l) => (
                  <li key={l.label}>
                    <a
                      href={l.href}
                      className="text-sm text-sand-light/65 hover:text-white transition-colors duration-200 flex items-center gap-2 group"
                    >
                      <span className="w-0 group-hover:w-3 h-px bg-coral transition-all duration-300 shrink-0" />
                      {l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

            {/* Contact column */}
            <div>
              <h4 className="text-[11px] uppercase tracking-[0.25em] text-sand-dark mb-5">{dict.footer.contact}</h4>
              <ul className="space-y-4 text-sm text-sand-light/65">
                <li className="leading-relaxed">
                  {dict.contact.address.text1}<br />
                  {dict.contact.address.text2}
                </li>
                <li>
                  <a href="tel:+905344656235" className="hover:text-white transition-colors">
                    +90 534 465 62 35
                  </a>
                </li>
                <li>
                  <a href="mailto:info@moybeachakyaka.com" className="hover:text-white transition-colors">
                    info@moybeachakyaka.com
                  </a>
                </li>
                <li className="text-sand-light/45">{dict.contact.hours.text}</li>
              </ul>
            </div>

          </div>
        </div>

        {/* Divider */}
        <div className="border-t border-white/[0.07]" />

        {/* Bottom bar */}
        <div className="container mx-auto px-6 max-w-6xl py-6 flex flex-col sm:flex-row justify-between items-center gap-3 text-[11px] text-sand-light/35">
          <p>&copy; {new Date().getFullYear()} {dict.footer.rights}</p>
          <div className="flex items-center gap-4">
            <span>{dict.footer.created_by}</span>
            <a
              href="https://ayris.tech"
              target="_blank"
              rel="noreferrer"
              className="hover:text-sand-light/70 transition-colors underline underline-offset-4"
            >
              ayris.tech
            </a>
          </div>
        </div>

      </div>

      {/* Floating WhatsApp Button */}
      <a
        href="https://wa.me/905344656235"
        target="_blank"
        rel="noreferrer"
        className="fixed bottom-6 right-6 z-50 bg-[#25D366] text-white p-3.5 rounded-full shadow-xl hover:scale-110 transition-transform"
        aria-label="WhatsApp ile iletişime geçin"
      >
        <svg viewBox="0 0 24 24" className="w-6 h-6 fill-current">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" />
        </svg>
      </a>
    </footer>
  );
}