import Image from "next/image";
import Link from "next/link";
import MembershipForm from "@/components/MembershipForm";

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

const interests = [
  "Community Service", "Education", "Entrepreneurship", "Technology", "Real Estate",
  "Cultural Program", "Movies", "Legal Support", "Spiritual", "Gardening", "Youth Activities",
  "Music", "Immigration Guidance", "Networking",
];
const activeInterests = new Set(["Community Service", "Real Estate", "Legal Support"]);

const platformCards = [
  { t: "Culture that feels alive everyday", d: "Festivals, galleries, seva drives, youth activities and family memories are presented beautifully without mixing private member information into public pages." },
  { t: "Newcomers do not start from zero", d: "A public starter guide and private catch-up experience help new families learn the history, admins, events, circles and trusted resources.", active: true },
  { t: "Trusted local discovery platform today", d: "Members can later opt into directory, business cards, volunteer interests and contact preferences — with consent and admin rules." },
  { t: "AI turns messages into usefulness", d: "WhatsApp energy becomes digests, knowledge articles, event pages, FAQ candidates, bulletin items and searchable community memory." },
];

const belong = [
  { t: "Meaningful Connections", d: "Build genuine friendships with people sharing roots, values, experiences.", img: "/img/whyjoin_4_.jpg" },
  { t: "Family & Community Network", d: "Bring your family together, celebrate milestones, strengthen bonds.", icon: true },
  { t: "Professional Growth", d: "Access mentors, collaborators, and opportunities within a trusted network.", img: "/img/whyjoin_2_.jpg" },
  { t: "Business Visibility", d: "Showcase your business and gain trusted community referrals.", icon: true },
  { t: "Volunteer Opportunities", d: "Contribute through mentorship, cultural programs, teaching, and service.", img: "/img/whyjoin_3_.jpg" },
  { t: "Events & Cultural Celebrations", d: "Experience UP's festivals, sports, culture, and traditions together.", icon: true },
];

const journeySteps = [
  { n: 1, t: "Create Your Profile", d: "Share your name, city, hometown, profession, interests, and family details. Your profile powers personalized connections." },
  { n: 2, t: "Discover Your Circles", d: "Join city circles, professional groups, alumni networks, and interest-based communities tailored to who you are.", active: true },
  { n: 3, t: "Engage, Contribute & Grow", d: "Attend events, volunteer, participate in discussions, showcase your business, and build lasting relationships." },
];

const visibility = [
  { t: "Profile Visibility", d: "Choose who can see your full profile", opts: ["Public", "Members Only", "Circles Only"], active: 1 },
  { t: "Contact Visibility", d: "Control who sees your phone & email", opts: ["Hidden", "Connections", "All Members"], active: 1 },
  { t: "Business Visibility", d: "Manage your business page audience", opts: ["Public", "Members Only", "Private"], active: 1 },
  { t: "Messaging Permissions", d: "Decide who can send you messages", opts: ["Anyone", "Connections", "Off"], active: 1 },
  { t: "Circle-Based Access", d: "Grant access per circle membership", opts: ["Custom", "Open", "Closed"], active: 1 },
  { t: "Participation Settings", d: "Control your community visibility", opts: ["Visible", "Limited", "Private"], active: 1 },
];

export default function WhyJoinPage() {
  return (
    <>
      {/* HERO */}
      <section className="page-glow page-hero">
        <div className="container hero-center">
          <span className="eyebrow">UP Parivar Dallas</span>
          <h1 className="display-title ts-34-46 why-hero__title">
            Join a Community That Feels Like Family
          </h1>
          <p className="why-hero__lead">
            Connect through culture, friendship, family, professional networks, shared
            interests, and meaningful community engagement.
          </p>
        </div>
        <div className="container why-hero__photos">
          <div className="why-hero__photo">
            <Image src="/img/whyjoin_1_.jpg" alt="" fill className="img-cover" sizes="600px" />
          </div>
          <div className="why-hero__photo">
            <Image src="/img/gallery_1_.jpg" alt="" fill className="img-cover" sizes="600px" />
          </div>
        </div>
      </section>

      {/* PROFILE */}
      <section className="section-white">
        <div className="container why-profile">
          <div>
            <span className="eyebrow">Member Profile</span>
            <h2 className="display-title ts-30-38 why-profile__title">Build Your Community Profile</h2>
            <p className="why-profile__text">
              Your profile is the foundation of your UP Parivar experience. It powers
              personalized connections, curated event invitations, and smart
              recommendations across the platform.
            </p>
            <ul className="why-profile__list">
              {["Be discovered by people from your hometown", "Get matched with members in your profession", "Receive invitations to relevant circles and events", "Connect your family and build a shared network"].map((b) => (
                <li key={b}>
                  <span className="why-bullet">•</span> {b}
                </li>
              ))}
            </ul>
            <div className="why-profile__photo">
              <Image src="/img/about_24_.jpg" alt="" fill className="img-cover" sizes="256px" />
            </div>
          </div>

          {/* Profile card */}
          <div className="profile-card">
            <div className="profile-card__banner">
              <div className="profile-card__badge-row">
                <span className="profile-card__badge">BUSINESS</span>
              </div>
              <div className="profile-card__head">
                <div className="profile-card__avatar">
                  <Image src="/img/about_13_.jpg" alt="Amit Sharma" fill className="img-cover-top" sizes="96px" />
                </div>
                <h3 className="profile-card__name">Amit Sharma</h3>
                <p className="profile-card__location">
                  <span className="profile-card__pin">◉</span> Dallas, TX · From Lucknow, UP
                </p>
              </div>
            </div>
            <div className="profile-card__rows">
              {[
                "Software Engineer · Microsoft",
                "IIT Kanpur · UT Dallas",
                "Cricket, Music, Community Service",
                "Family of 4 · Spouse: Priya",
              ].map((r) => (
                <div key={r} className="profile-card__row">
                  <span className="profile-card__dot" /> {r}
                </div>
              ))}
              <div className="profile-card__tags">
                {["Dallas Circle", "IT Professionals", "IIT Alumni"].map((t) => (
                  <span key={t} className="profile-card__tag">{t}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* INTERESTS */}
      <section className="section-white why-interests">
        <div className="container">
          <span className="eyebrow">Personalization</span>
          <h2 className="display-title ts-30-38 why-interests__title">Tell Us What Interests You</h2>
          <p className="why-interests__lead">
            Your interests help us recommend people, circles, events, discussions, and
            volunteer opportunities.
          </p>
          <div className="why-interests__chips">
            {interests.map((i) => (
              <span key={i} className={`chip ${activeInterests.has(i) ? "chip--active" : ""}`}>{i}</span>
            ))}
          </div>
        </div>
      </section>

      {/* PLATFORM WEDGE */}
      <section className="section-white why-wedge">
        <div className="container">
          <div className="split-head">
            <div className="split-head__col">
              <span className="eyebrow">Why Members Care</span>
              <h2 className="display-title ts-30-36 split-head__title">More useful than a page. Less noisy than a group.</h2>
            </div>
            <div className="split-head__aside">
              <p className="split-head__text">
                The site attracts visitors; the portal keeps members connected. WhatsApp
                remains the daily habit, while TOWER organizes what should not disappear.
              </p>
              <Link href="#belong" className="link-arrow link-arrow--spaced">See Platform Wedge</Link>
            </div>
          </div>
          <div className="why-wedge__grid">
            {platformCards.map((c) => (
              <div key={c.t} className={`wedge-card ${c.active ? "wedge-card--active" : ""}`}>
                <h3 className="wedge-card__title">{c.t}</h3>
                <p className="wedge-card__desc">{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BELONG BENTO */}
      <section id="belong" className="section-cream why-belong">
        <div className="container">
          <div className="split-head">
            <div className="split-head__col">
              <span className="eyebrow">Why Members Care</span>
              <h2 className="display-title ts-30-38 split-head__title">Everything You Need to Belong</h2>
            </div>
            <p className="split-head__aside split-head__text">
              UP Parivar is more than a membership — it&apos;s an extended family,
              professional network, and community ecosystem.
            </p>
          </div>
          <div className="why-belong__grid">
            {belong.map((b) => (
              <div key={b.t} className="belong-card">
                <div className="belong-card__icon">◈</div>
                <h3 className="belong-card__title">{b.t}</h3>
                <p className="belong-card__desc">{b.d}</p>
                {b.img && (
                  <div className="belong-card__media">
                    <Image src={b.img} alt="" fill className="img-cover" sizes="380px" />
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* JOURNEY STEPS */}
      <section className="why-steps">
        <div className="container">
          <span className="eyebrow-light">◉ How It Works</span>
          <h2 className="why-steps__title">Your Journey Starts Here</h2>
          <p className="why-steps__lead">Three simple steps to becoming part of the UP Parivar family.</p>
          <div className="why-steps__grid">
            {journeySteps.map((s) => (
              <div key={s.n} className={`step-card ${s.active ? "step-card--active" : ""}`}>
                <div className="step-card__icon">✦</div>
                <h3 className="step-card__title">{s.t}</h3>
                <p className="step-card__desc">{s.d}</p>
                <span className="step-card__num">{s.n}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VISIBILITY */}
      <section className="section-white why-visibility">
        <div className="container">
          <div className="split-head">
            <div className="split-head__col">
              <span className="eyebrow">Privacy</span>
              <h2 className="display-title ts-30-38 split-head__title">You Control Your Visibility</h2>
            </div>
            <p className="split-head__aside split-head__text">
              Choose exactly who can view your profile, contact information, business
              details, and community activity.
            </p>
          </div>
          <div className="why-visibility__grid">
            {visibility.map((v) => (
              <div key={v.t} className="visibility-card">
                <div className="visibility-card__head">
                  <span className="visibility-card__icon">◈</span>
                  <div>
                    <h3 className="visibility-card__title">{v.t}</h3>
                    <p className="visibility-card__desc">{v.d}</p>
                  </div>
                </div>
                <div className="visibility-card__opts">
                  {v.opts.map((o, i) => (
                    <span key={o} className={`visibility-opt ${i === v.active ? "visibility-opt--active" : ""}`}>{o}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MEMBERSHIP FORM */}
      <section className="section-cream why-form">
        <div className="container">
          <h2 className="display-title ts-32-40 why-form__title">Membership Application</h2>
          <div className="why-form__body">
            <MembershipForm />
          </div>
        </div>
      </section>
    </>
  );
}