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

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

const marquee = [
  "/img/about_8_.jpg", "/img/about_5_.jpg", "/img/about_3_.jpg", "/img/about_22_.jpg",
  "/img/about_7_.jpg", "/img/about_2_.jpg", "/img/about_21_.jpg", "/img/about_24_.jpg",
];

const team = [
  { name: "Pankaj Mishra", role: "Operations Head", img: "/img/Pankaj%20Mishra.png" },
  { name: "Arjun Verma", role: "Chief Engineer", img: "/img/Vikram%20Nair.png" },
  { name: "Rohit Sharma", role: "Project Manager", img: "/img/Venky%20Pandey.png" },
  { name: "Sneha Reddy", role: "Project Manager", img: "/img/Nidhi%20Jain.png" },
  { name: "Vikram Nair", role: "Project Manager", img: "/img/Vikram%20Nair.png" },
  { name: "Amit Joshi", role: "Project Manager", img: "/img/Pankaj%20Mishra.png" },
];

const committee = [
  { name: "Suresh Gupta", role: "Cultural Lead", img: "/img/Venky%20Pandey.png" },
  { name: "Neha Kapoor", role: "Events Lead", img: "/img/Nidhi%20Jain.png" },
  { name: "Deepak Rao", role: "Seva Coordinator", img: "/img/Pankaj%20Mishra.png" },
  { name: "Kavita Menon", role: "Youth Programs", img: "/img/Nidhi%20Jain.png" },
  { name: "Rahul Bose", role: "Finance", img: "/img/Vikram%20Nair.png" },
  { name: "Manish Tyagi", role: "Membership", img: "/img/Venky%20Pandey.png" },
];

const whatWeDo = [
  { t: "Cultural Celebrations", d: "Organizing festivals and events that showcase the traditions and heritage of Uttar Pradesh.", img: "/img/about_19_.jpg" },
  { t: "Family Gatherings", d: "Creating opportunities for families to meet, connect, and build lasting friendships.", img: "/img/about_22_.jpg" },
  { t: "Community Programs", d: "Hosting activities that encourage engagement, learning, and collaboration.", img: "/img/about_21_.jpg" },
  { t: "Youth Engagement", d: "Helping younger generations stay connected to their culture and community.", img: "/img/about_24_.jpg" },
  { t: "Volunteer Initiatives", d: "Supporting charitable and community-focused causes through collective efforts.", img: "/img/about_20_.jpg" },
  { t: "Networking & Support", d: "Providing opportunities for personal, professional, and social connections.", img: "/img/about_23_.jpg" },
];

const stats = [
  { n: "500+", l: "Community Members" },
  { n: "25+", l: "Events Organized" },
  { n: "100+", l: "Volunteer Hours" },
  { n: "20+", l: "Multiple Community" },
];

function PersonCard({ p }: { p: { name: string; role: string; img: string } }) {
  return (
    <div className="person-card">
      <div className="person-card__media">
        <Image src={p.img} alt={p.name} fill className="person-card__img" sizes="220px" />
      </div>
      <div className="person-card__body">
        <p className="person-card__name">{p.name}</p>
        <p className="person-card__role">{p.role}</p>
      </div>
    </div>
  );
}

export default function AboutPage() {
  return (
    <>
      {/* HERO */}
      <section className="page-glow page-hero">
        <div className="container hero-center">
          <span className="eyebrow">About UP Parivaar Dallas</span>
          <h1 className="display-title ts-36-48 about-hero__title">
            Bringing Uttar Pradesh&apos;s Roots, Culture &amp; Traditions to Dallas
          </h1>
          <p className="about-hero__lead">
            A nonprofit community organization connecting families, celebrating
            heritage, and strengthening community bonds.
          </p>
        </div>
        <div className="about-hero__marquee no-scrollbar">
          {marquee.map((src, i) => {
            const variant = ["about-hero__marquee-item--wide", "about-hero__marquee-item--narrow", ""][i % 3];
            return (
              <div key={i} className={`about-hero__marquee-item ${variant}`.trim()}>
                <Image src={src} alt="" fill className="img-cover" sizes="380px" />
              </div>
            );
          })}
        </div>
      </section>

      {/* FOUNDERS */}
      <section className="section-white about-founders">
        <div className="container">
          <SectionHeading
            eyebrow="The Volunteers Behind It All"
            title={<>Led by the community, for the community</>}
            desc="Not a company. A volunteer-run family — powered by people who simply care."
            align="split"
          />
          <div className="about-founders__grid">
            <div className="founder-card">
              <div className="founder-card__media">
                <Image src="/img/Venky%20Pandey.png" alt="Venky Pandey" fill className="img-cover-top" sizes="380px" />
              </div>
              <div className="founder-card__body">
                <div>
                  <p className="founder-card__name">Venky Pandey</p>
                  <p className="founder-card__role">Founder</p>
                </div>
                <p className="founder-card__email">venkeypj@upparivaar.com</p>
              </div>
            </div>
            <div className="founder-card--logo">
            <img src="/img/logoaboutteam.png" alt="" />
            </div>
            <div className="founder-card">
              <div className="founder-card__media">
                <Image src="/img/Nidhi%20Jain.png" alt="Nidhi Jain" fill className="img-cover-top" sizes="380px" />
              </div>
              <div className="founder-card__body">
                <div>
                  <p className="founder-card__name">Nidhi Jain</p>
                  <p className="founder-card__role">Co-Founder</p>
                </div>
                <p className="founder-card__email">nidhij@upparivaar.com</p>
              </div>
            </div>
          </div>

          <div className="about-founders__carousels">
            <Carousel title="Volunteer Team" subtitle="Visionary leaders driving innovation and excellence">
              {team.map((p) => (
                <PersonCard key={p.name + p.role} p={p} />
              ))}
            </Carousel>
            <Carousel title="Core Committee Members" subtitle="Visionary leaders driving innovation and excellence">
              {committee.map((p) => (
                <PersonCard key={p.name + p.role} p={p} />
              ))}
            </Carousel>
          </div>
        </div>
      </section>

      {/* MISSION / VISION */}
      <section className="section-cream about-mission">
        <div className="container">
          <Tabs
            tabs={[
              {
                label: "Our Mission",
                content: (
                  <div className="about-mission__panel">
                    <div className="about-mission__grid">
                      <div>
                        <h3 className="about-mission__title">Our Mission</h3>
                        <p className="about-mission__text">
                          Our mission is to strengthen the Uttar Pradesh community in Dallas
                          by fostering cultural pride, encouraging community engagement, and
                          creating opportunities for families to connect, celebrate, and
                          support one another.
                        </p>
                        <h4 className="about-mission__subtitle">Mission Pillars</h4>
                        <ul className="about-mission__list">
                          {["Preserve our cultural heritage", "Strengthen family and community bonds", "Support community service initiatives", "Inspire future generations", "Promote unity and belonging"].map((m) => (
                            <li key={m}>
                              <span className="about-mission__bullet">•</span> {m}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="about-mission__media">
                        <Image src="/img/about_18_.jpg" alt="Mission" fill className="img-cover" sizes="500px" />
                      </div>
                    </div>
                  </div>
                ),
              },
              {
                label: "Our Vision",
                content: (
                  <div className="about-mission__panel">
                    <div className="about-mission__grid">
                      <div>
                        <h3 className="about-mission__title">Our Vision</h3>
                        <p className="about-mission__text">
                          We envision a thriving, connected Uttar Pradesh community across
                          North Texas — where every family feels at home, every tradition is
                          celebrated, and every generation carries our culture forward with
                          pride.
                        </p>
                        <h4 className="about-mission__subtitle">Vision Pillars</h4>
                        <ul className="about-mission__list">
                          {["A borderless cultural network", "Trusted member-led community", "Opportunities for every generation", "A living archive of our stories", "Seva at the heart of everything"].map((m) => (
                            <li key={m}>
                              <span className="about-mission__bullet">•</span> {m}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div className="about-mission__media">
                        <Image src="/img/about_3_.jpg" alt="Vision" fill className="img-cover" sizes="500px" />
                      </div>
                    </div>
                  </div>
                ),
              },
            ]}
          />

          <div className="about-stats">
            {stats.map((s) => (
              <div key={s.l} className="about-stat">
                <div>
                  <p className="about-stat__num">{s.n}</p>
                  <p className="about-stat__label">{s.l}</p>
                </div>
                <span className="about-stat__icon">◈</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHAT WE DO */}
      <section className="section-white about-do">
        <div className="container">
          <div className="about-do__head">
            <h2 className="display-title ts-34-42">What We Do</h2>
            <p className="about-do__lead">
              Building connections through meaningful experiences that bring families,
              friends, and communities together, creating lasting relationships, trust,
              and belonging.
            </p>
          </div>
          <div className="about-do__grid">
            {whatWeDo.map((w) => (
              <div key={w.t} className="about-do__card">
                <div className="about-do__media">
                  <Image src={w.img} alt={w.t} fill className="img-cover" sizes="400px" />
                </div>
                <div className="about-do__body">
                  <h3 className="about-do__title">{w.t}</h3>
                  <p className="about-do__desc">{w.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}