"use client";

import { useMemo } from "react";
import { useTranslations } from "next-intl";
import Image from "next/image";
import Link from "next/link";
import React from "react";

import inesta from "@/public/assets/icons/inesta.svg";
import inestaicon from "@/public/assets/icons/inestaicon.svg";
import insta from "@/public/assets/inesta1.webp";
import insta2 from "@/public/assets/inesta2.webp";
import insta3 from "@/public/assets/inesta3.webp";
import insta4 from "@/public/assets/inesta4.webp";

import SectionTitle from "../sectionTitle/SectionTitle";

/* -------------------- Reusable Instagram Post -------------------- */
const InstagramPost = React.memo(function InstagramPost({
  href,
  img,
  priority = false,
}: {
  href: string;
  img: any;
  priority?: boolean;
}) {
  return (
    <Link
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="group cursor-pointer"
    >
      <Image
        src={img}
        alt="Instagram Post"
        width={300}
        height={300}
        loading="lazy"
        sizes="(max-width: 768px) 50vw, (max-width: 1200px) 25vw, 300px"
        className="aspect-square object-cover transition-transform duration-300 group-hover:scale-105"
      />
    </Link>
  );
});

const JoinSection = () => {
  const t = useTranslations("JoinSection");

  const instagramPosts = useMemo(
    () => [
      {
        id: 1,
        href: "https://www.instagram.com/r.hcapitalrealestate/p/DGsT8nhNRmi/",
        img: insta,
      },
      {
        id: 2,
        href: "https://www.instagram.com/r.hcapitalrealestate/p/DGsS1F5tzFQ/",
        img: insta2,
      },
      {
        id: 3,
        href: "https://www.instagram.com/r.hcapitalrealestate/p/DGsTOhUtcKH/",
        img: insta3,
      },
      {
        id: 4,
        href: "https://www.instagram.com/r.hcapitalrealestate/p/DGsT8nhNRmi/",
        img: insta4,
      },
    ],
    []
  );

  return (
    <div
      id="joinus"
      className="container mx-auto flex flex-col gap-12 px-2 sm:px-4 md:px-4 lg:px-[50px] xl:!px-[120px] 2xl:px-0"
    >
      <SectionTitle title={t("Join")} description={t("Discover")} />

      <div
        className="flex flex-col gap-8"
        data-aos="fade-up"
        data-aos-duration="1500"
        data-aos-delay="200"
      >
        {/* ---------------- Instagram Grid ---------------- */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {/* 
            <InstaUrl url="https://www.instagram.com/r.hcapitalrealestate/p/DGsT8nhNRmi/" />
            <InstaUrl url="https://www.instagram.com/r.hcapitalrealestate/p/DGsS1F5tzFQ/" />
            <InstaUrl url="https://www.instagram.com/r.hcapitalrealestate/p/DGsTOhUtcKH/" />
            <InstaUrl url="https://www.instagram.com/r.hcapitalrealestate/p/DGsTOhUtcKH/" />
          */}

          {instagramPosts.map((post, index) => (
            <InstagramPost
              key={post.id}
              href={post.href}
              img={post.img}
              priority={index === 0} // preload أول صورة بس
            />
          ))}

          {/*
            {inestaPic.map((item) => (
              <div key={item.id} className="relative w-full h-full">
                <Image src={item.img} alt="img1" className="w-full h-full " />
                <div className="absolute top-[16px] right-[16px] ">
                  <Image src={openz} alt="openz" />
                </div>
              </div>
            ))}
          */}
        </div>

        {/* ---------------- Join Button ---------------- */}
        <div className="flex justify-center items-center">
          <Link
            href="https://www.instagram.com/r.hcapitalrealestate/"
            target="_blank"
            rel="noopener noreferrer"
            className="relative w-[179px] h-[53px]"
          >
            <Image src={inesta} alt="inesta" className="w-full h-full" />
            <div className="absolute inset-0 flex gap-2 items-center justify-center">
              <Image src={inestaicon} alt="inestaicon" />
              <span className="text-white text-[18px] font-medium">
                {t("Join Us")}
              </span>
            </div>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default JoinSection;