import Image from "next/image";
import { SectionHeading } from "@/components/ui";

export const metadata = { title: "Gallery — UP Parivaar Dallas" };

const stats = [
  { n: "500+", l: "Families Connected" },
  { n: "50+", l: "Community Events" },
  { n: "10,000+", l: "Shared Memories" },
  { n: "20+", l: "Cultural Celebrations" },
];

const filters = ["All Memories", "Festivals", "Family Events", "Community Gatherings", "Kids & Youth", "Food & Traditions", "Dallas Life", "Videos"];

const featured = [
  { img: "/img/gallery_2_.jpg", title: "Diwali Milan 2024", cat: "Festival", h: "tall" },
  { img: "/img/gallery_7_.jpg", title: "Classical Dance Night", cat: "Festival", h: "short" },
  { img: "/img/gallery_12_.jpg", title: "Diwali Evening Puja", cat: "Festival", h: "tall" },
  { img: "/img/gallery_6_.jpg", title: "Holi Utsav 2024", cat: "Festival", h: "tall" },
  { img: "/img/gallery_16_.jpg", title: "Family Celebration", cat: "Family Events", h: "tall" },
  { img: "/img/gallery_8_.jpg", title: "Three Generations", cat: "Family Events", h: "short" },
  { img: "/img/gallery_4_.jpg", title: "Traditional Thali", cat: "Food & Traditions", h: "tall" },
  { img: "/img/gallery_19_.jpg", title: "Community Potluck Night", cat: "Food & Traditions", h: "tall" },
  { img: "/img/gallery_20_.jpg", title: "Generations Together", cat: "Food & Traditions", h: "tall" },
];

const albums = [
  { img: "/img/gallery_15_.jpg", title: "Diwali Milan 2025", sub: "Community Celebration", count: "10 Photos", date: "March 14-15, 2026" },
  { img: "/img/gallery_13_.jpg", title: "Holi Utsav 2025", sub: "Festival of Colors", count: "20 Photos", date: "March 14-15, 2026" },
  { img: "/img/gallery_14_.jpg", title: "Family Picnic Dallas", sub: "Summer Gathering", count: "10 Photos", date: "March 14-15, 2026" },
];

const experiences = [
  { img: "/img/gallery_2_.jpg", title: "Festivals", sub: "Diwali, Holi, Navratri, Janmashtami" },
  { img: "/img/gallery_10_.jpg", title: "Family Moments", sub: "Birthdays, Anniversaries" },
  { img: "/img/gallery_9_.jpg", title: "Food & Culture", sub: "Potlucks, Traditional Cuisine" },
  { img: "/img/gallery_11_.jpg", title: "Community Service", sub: "Volunteer Programs and Charity" },
];

const videos = [
  { img: "/img/gallery_15_.jpg", tag: "Festival Highlights", title: "Diwali Milan 2024 Highlights" },
  { img: "/img/gallery_16_.jpg", tag: "Festival of Colors", title: "Holi Utsav Celebrations" },
  { img: "/img/gallery_17_.jpg", tag: "Cultural Performance", title: "Classical Dance Night" },
  { img: "/img/gallery_18_.jpg", tag: "Community Gathering", title: "Community Family Day" },
  { img: "/img/gallery_14_.jpg", tag: "Picnic", title: "Family Picnic Dallas" },
];

export default function GalleryPage() {
  return (
    <>
      {/* HERO */}
      <section className="page-glow page-hero">
        <div className="container hero-center">
          <span className="eyebrow">Gallery</span>
          <h1 className="display-title ts-34-46 gallery-hero__title">
            Memories That Keep Uttar Pradesh Close to Home
          </h1>
          <p className="gallery-hero__lead">
            Every festival, gathering and celebration strengthens the bond between UP
            families across Dallas.
          </p>
          <div className="gallery-hero__stats">
            {stats.map((s) => (
              <div key={s.l}>
                <p className="gallery-stat__num">{s.n}</p>
                <p className="gallery-stat__label">{s.l}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FILTERS + FEATURED */}
      <section className="section-white gallery-featured">
        <div className="container">
          <div className="gallery-filters no-scrollbar">
            {filters.map((f, i) => (
              <span key={f} className={`chip chip--shrink0 ${i === 0 ? "chip--active" : ""}`}>
                {f}
              </span>
            ))}
          </div>

          <div className="gallery-featured__head">
            <span className="eyebrow">Featured</span>
            <h2 className="display-title ts-30-36 gallery-featured__title">Community Moments</h2>
          </div>

          <div className="gallery-masonry">
            {featured.map((f) => (
              <div
                key={f.title}
                className={`gallery-tile ${f.h === "tall" ? "gallery-tile--tall" : "gallery-tile--short"}`}
              >
                <Image src={f.img} alt={f.title} fill className="gallery-tile__img" sizes="400px" />
                <div className="gallery-tile__overlay" />
                <div className="gallery-tile__caption">
                  <p className="gallery-tile__title">{f.title}</p>
                  <p className="gallery-tile__cat">{f.cat}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ALBUMS */}
      <section className="section-cream gallery-albums">
        <div className="container">
          <span className="eyebrow">Collections</span>
          <h2 className="display-title ts-30-36 gallery-albums__title">Explore Event Albums</h2>
          <div className="gallery-albums__grid">
            {albums.map((a) => (
              <div key={a.title} className="album-card">
                <div className="album-card__media">
                  <Image src={a.img} alt={a.title} fill className="img-cover" sizes="400px" />
                  <span className="album-card__count">▤ {a.count}</span>
                </div>
                <div className="album-card__body">
                  <h3 className="album-card__title">{a.title}</h3>
                  <div className="album-card__meta">
                    <span>{a.sub}</span>
                    <span className="album-card__date">▦ {a.date}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* EXPERIENCES */}
      <section className="section-white gallery-experiences">
        <div className="container">
          <span className="eyebrow">Explore</span>
          <h2 className="display-title ts-30-36 gallery-experiences__title">Memories by Experience</h2>
          <div className="gallery-experiences__grid">
            {experiences.map((e) => (
              <div key={e.title} className="experience-tile">
                <Image src={e.img} alt={e.title} fill className="img-cover" sizes="300px" />
                <div className="experience-tile__overlay" />
                <div className="experience-tile__caption">
                  <p className="experience-tile__title">{e.title}</p>
                  <p className="experience-tile__sub">{e.sub}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VIDEOS */}
      <section className="section-white gallery-videos">
        <div className="container">
          <SectionHeading
            eyebrow="Video Gallery"
            title={<>Relive the Celebrations</>}
            desc="Cinematic highlights from our most beloved community events"
            align="split"
          />
          <div className="gallery-videos__grid">
            {videos.map((v) => (
              <div key={v.title} className="video-card">
                <div className="video-card__media">
                  <Image src={v.img} alt={v.title} fill className="img-cover" sizes="400px" />
                  <div className="video-card__play-layer">
                    <span className="video-card__play">▶</span>
                  </div>
                  <span className="video-card__duration">4:32</span>
                </div>
                <div className="video-card__body">
                  <p className="video-card__tag">{v.tag}</p>
                  <p className="video-card__title">{v.title}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="banner">
        <Image src="/img/gallery_21_.jpg" alt="" fill className="img-cover" sizes="100vw" />
        <div className="banner__overlay gallery-cta__overlay" />
        <div className="container banner-pad-24 banner__content">
          <div className="gallery-cta__box">
            <h2 className="gallery-cta__title">
              Every Memory Becomes Part of Our Story
            </h2>
            <p className="gallery-cta__text">
              Join events, celebrate traditions, and create lasting memories with the UP
              Parivaar Dallas community. Your family&apos;s story is waiting to be written
              here.
            </p>
          </div>
        </div>
      </section>
    </>
  );
}