import Image from "next/image";
import Link from "next/link";

import { GlassCard } from "@/components/shared/glass-card";
import { InstagramProfilePhoto } from "@/components/social/instagram-profile-photo";
import { instagramNetwork } from "@/lib/constants/instagram";
import { cn } from "@/lib/utils";

type Props = {
  id?: string;
  className?: string;
  moodTiles?: readonly string[];
};

export function InstagramNetworkSection({
  id = "instagram-network",
  className,
  moodTiles,
}: Props) {
  const tiles =
    moodTiles ??
    ([
      "/site-media/uploads/bbb-20260513-0018.jpeg",
      "/site-media/uploads/bbb-20260513-0035.jpeg",
      "/site-media/uploads/bbb-20260513-0061.jpeg",
      "/site-media/uploads/bbb-20260513-0082.jpeg",
    ] as const);

  return (
    <section id={id} className={cn("ds-section scroll-mt-24 border-border/40 border-y", className)}>
      <div className="ds-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-primary text-xs font-semibold uppercase tracking-widest">Instagram</p>
          <h2 className="font-display mt-3 text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
            Follow the network
          </h2>
          <p className="text-muted-foreground mt-3 text-base sm:text-lg">
            Tap a card to open each profile on Instagram.
          </p>
        </div>

        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {instagramNetwork.map((profile) => (
            <Link
              key={profile.handle}
              href={profile.url}
              target="_blank"
              rel="noopener noreferrer"
              className="group block h-full"
            >
              <GlassCard className="flex h-full flex-col overflow-hidden p-0 transition-shadow duration-300 hover:shadow-lg">
                <div className="relative h-36 shrink-0 overflow-hidden sm:h-40">
                  <InstagramProfilePhoto
                    handle={profile.handle}
                    coverImage={profile.coverImage}
                    className="transition-transform duration-500 group-hover:scale-[1.02]"
                  />
                </div>
                <div className="flex flex-1 flex-col border-t border-border/60 bg-card/40 px-4 py-3 sm:px-4 sm:py-4">
                  <p className="font-mono text-[11px] font-semibold uppercase tracking-wide text-primary">
                    @{profile.handle}
                  </p>
                  <p className="mt-1.5 text-sm font-semibold leading-snug text-foreground">
                    {profile.displayName}
                  </p>
                  <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                    {profile.role}
                  </p>
                </div>
              </GlassCard>
            </Link>
          ))}
        </div>

        <p className="mx-auto mt-8 max-w-2xl text-center text-xs text-muted-foreground">
          Live post grids need an Instagram API. These cards use your site photography for a
          consistent look; the link always opens the real Instagram profile.
        </p>

        <div className="mt-14">
          <p className="text-center text-xs font-semibold uppercase tracking-widest text-muted-foreground">
            From the feed · site imagery
          </p>
          <div className="mt-4 grid grid-cols-2 gap-3 md:grid-cols-4">
            {tiles.map((src, i) => (
              <div
                key={`${src}-${i}`}
                className="relative aspect-[9/14] overflow-hidden rounded-2xl border border-border/80 bg-muted"
              >
                <Image
                  src={src}
                  alt=""
                  fill
                  className="object-cover opacity-90 transition hover:opacity-100"
                  sizes="(max-width:768px) 50vw, 25vw"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}