"use client";

const reels = [
  { id: 1, url: "https://www.instagram.com/reel/C97iqFqoSyl/embed" },
  { id: 2, url: "https://www.instagram.com/reel/C-slzOcIQB3/embed" },
  { id: 3, url: "https://www.instagram.com/reel/DLM8ng6MOKf/embed" },
  { id: 4, url: "https://www.instagram.com/reel/DX-BDErM5qd/embed" },
];

function InstagramIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} className="w-4 h-4">
      <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.8" fill="currentColor" stroke="none" />
    </svg>
  );
}

export default function InstagramFeed({ dict }: { dict: any }) {
  return (
    <section className="py-24 bg-sand-light text-sea-dark overflow-hidden">
      <div className="container mx-auto px-6 max-w-7xl">

        {/* Header */}
        <div className="text-center mb-14">
          <div className="flex items-center justify-center gap-3 mb-4">
            <span className="w-8 h-px bg-coral" />
            <h2 className="text-sm font-bold tracking-widest uppercase text-coral flex items-center gap-2">
              <InstagramIcon />
              {dict.social.title}
            </h2>
            <span className="w-8 h-px bg-coral" />
          </div>

          <h3 className="text-4xl md:text-5xl font-serif mb-5">{dict.social.heading}</h3>

          <a
            href="https://www.instagram.com/moy_akyaka/"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-sm text-sea-dark/60 hover:text-coral transition-colors tracking-wide"
          >
            <InstagramIcon />
            @moy_akyaka
          </a>
        </div>

        {/* Reels grid */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
          {reels.map((reel) => (
            <div
              key={reel.id}
              className="group relative bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl hover:shadow-sea-dark/10 transition-all duration-500 hover:-translate-y-1"
            >
              {/* Thin coral top border accent */}
              <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-coral/0 via-coral to-coral/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10" />

              <iframe
                src={reel.url}
                className="w-full h-[520px] md:h-[580px]"
                style={{ border: "none", display: "block" }}
                scrolling="no"
                frameBorder="0"
                allow="encrypted-media"
                title={`Instagram Reel ${reel.id}`}
              />
            </div>
          ))}
        </div>

        {/* CTA */}
        <div className="text-center mt-12">
          <a
            href="https://www.instagram.com/moy_akyaka/"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-shimmer inline-flex items-center gap-2.5 bg-sea-dark hover:bg-sea-blue text-white px-8 py-3.5 rounded-full text-sm tracking-widest uppercase font-medium transition-colors shadow-md hover:shadow-lg"
          >
            <InstagramIcon />
            {dict.social.button}
          </a>
        </div>

      </div>
    </section>
  );
}