import Image from "next/image";
import Link from "next/link";
import { SectionHeading, Stars, Arrow } from "@/components/ui";
import { FeaturedEventCard } from "@/components/EventCard";
import Faq from "@/components/Faq";
import HomeJourney from "@/components/HomeJourney";
import JourneyBanner from "@/components/JourneyBanner";
import { featuredEvents, testimonials, faqs } from "@/lib/data";

const pillars = [
  { t: "Cultural Celebrations", d: "Celebrate Holi, Diwali, Janmashtami and more." },
  { t: "Family Gatherings", d: "Meet families and build lasting friendships." },
  { t: "Seva & Volunteering", d: "Give back through community initiatives." },
  { t: "Stay Connected Roots", d: "Keep UP traditions alive in Dallas." },
];

export default function Home() {
  return (
    <>
      {/* HERO */}
      <section className="home-hero">
        <Image
          src="/img/home.png"
          alt="Bringing Uttar Pradesh families together in Dallas"
          fill
          priority
          className="img-cover"
          sizes="100vw"
        />
        <div className="home-hero__overlay" />
        <div className="container home-hero__inner">
          <span className="home-hero__eyebrow">UP Parivar Dallas</span>
          <h1 className="home-hero__title">
            Bringing Uttar Pradesh Families
            <br className="home-hero__break" /> Together in Dallas
          </h1>
          <div className="home-hero__cta">
            <Link href="/why-join" className="btn-primary btn-primary--lg">
              Join Community <Arrow />
            </Link>
          </div>
        </div>
      </section>

      {/* ABOUT INTRO */}
      <section className="section-cream">
        <div className="container home-about">
          <div>
            <span className="eyebrow">About Us</span>
            <div className="home-about__badge">
          <img src="aboutvectore.png" alt="" />
            </div>
            <p className="home-about__stat">10+</p>
            <p className="home-about__stat-label">Years Of Creative Excellence</p>
          </div>

          <div>
            <p className="home-about__lead">
              UP Parivar Dallas connects families, culture, seva, events and trusted
              local help across North Texas. The portal keeps public information{" "}
              <span className="home-about__lead-accent">
                easy to find and gives members a private, consent-led way to discover
                what matters.
              </span>
            </p>
            <div className="home-about__row">
              <div className="home-about__photo">
                <Image src="/img/home_2_.jpg" alt="Family gathering" fill className="img-cover" sizes="320px" />
              </div>
              <div className="home-about__note">
                <h3 className="home-about__note-title">From roots to North Texas</h3>
                <p className="home-about__note-text">
                  A public face for culture; a private portal for trusted member life.
                </p>
                <Link href="/about" className="btn-primary btn-primary--compact home-about__more">
                  More About
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* JOURNEY TIMELINE (scroll-driven) */}
      <HomeJourney />

      {/* UPCOMING GATHERINGS */}
      <section className="section-white home-upcoming">
        <div className="container">
          <SectionHeading
            eyebrow="Next Gathering"
            title={<>Upcoming Community Gatherings</>}
            desc="A family evening with devotional music, kids activities, volunteer desks and newcomer welcome."
            cta={{ label: "Subscribe Calendar", href: "/events" }}
            align="split"
          />
          <div className="home-upcoming__list">
            {featuredEvents.map((e) => (
              <FeaturedEventCard key={e.title} e={e} />
            ))}
          </div>
        </div>
      </section>

      {/* OUR JOURNEY BANNER (full-screen scroll) */}
      <JourneyBanner />

      {/* GALLERY PREVIEW */}
      <section className="section-white home-gallery">
        <div className="container">
          <SectionHeading
            eyebrow="Gallery"
            title={<>A thousand moments, one family album</>}
            desc="Festivals, seva, youth and family, the memories we've made together. Drop your own photos in; the archive grows with every gathering."
            cta={{ label: "More Explore Gallery", href: "/gallery" }}
            align="split"
          />
          <div className="home-gallery__grid">
            <div className="home-gallery__tile-lg">
              <Image src="/img/home_9_.jpg" alt="" fill className="img-cover" sizes="380px" />
            </div>
            <div className="home-gallery__col">
              <div className="home-gallery__tile-md">
                <Image src="/img/home_6_.jpg" alt="" fill className="img-cover" sizes="380px" />
              </div>
              <div className="home-gallery__pair">
                <div className="home-gallery__tile-md">
                  <Image src="/img/home_7_.jpg" alt="" fill className="img-cover" sizes="190px" />
                </div>
                <div className="home-gallery__tile-md">
                  <Image src="/img/home_2_.jpg" alt="" fill className="img-cover" sizes="190px" />
                </div>
              </div>
            </div>
            <div className="home-gallery__tile-lg">
              <Image src="/img/home_5_.jpg" alt="" fill className="img-cover" sizes="380px" />
            </div>
          </div>
        </div>
      </section>

      {/* CULTURE BANNER */}
      <section className="banner">
        <Image src="/img/home_3_.jpg" alt="" fill className="img-cover" sizes="100vw" />
        <div className="banner__overlay home-culture__overlay" />
        <div className="container banner-pad-24 banner__content">
          <div className="home-culture__card">
            <h2 className="home-culture__title">
              A Community Built Around
              <br /> Culture & Connection
            </h2>
            <div className="home-culture__grid">
              {pillars.map((p) => (
                <div key={p.t} className="home-culture__pillar">
                  <div className="home-culture__pillar-icon">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 0v20M2 12h20" strokeLinecap="round" />
                    </svg>
                  </div>
                  <h3 className="home-culture__pillar-title">{p.t}</h3>
                  <p className="home-culture__pillar-desc">{p.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section-white home-testimonials">
        <div className="container">
          <SectionHeading
            eyebrow="Community Voices"
            title={<>Loved by families across North Texas</>}
            cta={{ label: "View All", href: "/about" }}
            align="split"
          />
          <div className="home-testimonials__grid">
            {testimonials.map((t, i) => (
              <div
                key={t.name}
                className={`home-testimonials__col ${i === 1 ? "home-testimonials__col--offset" : ""}`}
              >
                {i === 1 && (
                  <div className="testimonial-person">
                    <div className="testimonial-person__avatar">
                      <Image src={t.avatar} alt={t.name} fill className="img-cover" sizes="44px" />
                    </div>
                    <div>
                      <p className="testimonial-person__name">{t.name}</p>
                      <p className="testimonial-person__role">{t.role}</p>
                    </div>
                  </div>
                )}
                <div className="testimonial-quote">
                  <img src="/img/quotes.svg" alt="" className="testimonial-quote__mark" />
                  <Stars n={t.stars} />
                  <p className="testimonial-quote__text">{t.quote}</p>
                </div>
                {i !== 1 && (
                  <div className="testimonial-person">
                    <div className="testimonial-person__avatar">
                      <Image src={t.avatar} alt={t.name} fill className="img-cover" sizes="44px" />
                    </div>
                    <div>
                      <p className="testimonial-person__name">{t.name}</p>
                      <p className="testimonial-person__role">{t.role}</p>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section-cream">
        <div className="container home-faq">
          <div>
            <span className="eyebrow">FAQ&apos;s</span>
            <h2 className="display-title ts-32-40 home-faq__title">Frequently Asked Questions</h2>
            <p className="home-faq__lead">
              Everything you need to know about UP Parivar Dallas, our community, events,
              membership, and ways to get involved.
            </p>
            <div className="home-faq__list">
              <Faq items={faqs} />
            </div>
          </div>
          <div className="home-faq__art">
            <svg width="260" height="260" viewBox="0 0 100 100">
              {[
                { a: -90, c: "#2530C4" },
                { a: -30, c: "#F7A400" },
                { a: 30, c: "#FF8001" },
                { a: 90, c: "#F45700" },
                { a: 150, c: "#7ECA4F" },
                { a: 210, c: "#3FB27A" },
              ].map((p, i) => {
                const rad = (p.a * Math.PI) / 180;
                const cx = 50 + Math.cos(rad) * 30;
                const cy = 50 + Math.sin(rad) * 30;
                return (
                  <g key={i} transform={`rotate(${p.a + 90} ${cx} ${cy})`}>
                    <circle cx={cx} cy={cy - 9} r="7" fill={p.c} />
                    <path d={`M ${cx - 10} ${cy + 13} Q ${cx} ${cy - 4} ${cx + 10} ${cy + 13} Z`} fill={p.c} />
                  </g>
                );
              })}
              <circle cx="50" cy="50" r="15" fill="#fff" />
            </svg>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="banner">
        <Image src="/img/home_4_.jpg" alt="" fill className="img-cover" sizes="100vw" />
        <div className="banner__overlay home-cta__overlay" />
        <div className="container banner-pad-28 banner__content">
          <div className="home-cta__box">
            <span className="eyebrow-light">◉ Get Your Portal</span>
            <h2 className="home-cta__title">
              Keeping the roots of Uttar Pradesh alive through family, culture,
              traditions, and community in Dallas.
            </h2>
            <p className="home-cta__text">
              Celebrate festivals, build lifelong friendships, and pass on the values,
              culture, and traditions of Uttar Pradesh to the next generation in Dallas.
            </p>
            <div className="home-cta__actions">
              <Link href="/why-join" className="btn-primary">
                Request A Community Portal <Arrow />
              </Link>
              <Link href="/why-join" className="btn-ghost">
                Preview Member Portal <Arrow />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}