import Image from "next/image";
import { Stars } from "@/components/ui";
import { testimonials } from "@/lib/data";

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

const categories = [
  { img: "/img/knowledge_1_.jpg", title: "Living in Dallas", sub: "Schools, housing, transportation, healthcare" },
  { img: "/img/knowledge_3_.jpg", title: "Career & Business", sub: "Professional growth, networking, entrepreneurship" },
  { img: "/img/knowledge_5_.jpg", title: "Education & Students", sub: "Admissions, scholarships, mentoring" },
  { img: "/img/knowledge_2_.jpg", title: "Legal & Immigration", sub: "Helpful guidance and community resources" },
  { img: "/img/knowledge_4_.jpg", title: "Community & Volunteering", sub: "Events, service opportunities, participation" },
  { img: "/img/knowledge_6_.jpg", title: "Culture & Traditions", sub: "Festivals, heritage, traditions, community stories" },
];

const suggestions = [
  "Which WhatsApp group should I join?",
  "Best school districts for mir kids?",
  "What events are coming up?",
  "Where can I volunteer for seva?",
];

export default function KnowledgePage() {
  return (
    <>
      {/* HERO */}
      <section className="page-glow page-hero--tight">
        <div className="container hero-center">
          <span className="eyebrow">UP Parivar Dallas · Est. 2010</span>
          <h1 className="display-title ts-34-46 knowledge-hero__title">Community Knowledge Hub</h1>
          <p className="knowledge-hero__lead">
            Explore resources, guides, community insights, member expertise, local
            opportunities, and helpful information curated by UP Parivar Dallas.
          </p>
        </div>
        <div className="container">
          <div className="knowledge-hero__photos">
            <div className="knowledge-hero__photo">
              <Image src="/img/about_7_.jpg" alt="" fill className="img-cover" sizes="400px" />
            </div>
            <div className="knowledge-hero__photo">
              <Image src="/img/about_3_.jpg" alt="" fill className="img-cover" sizes="700px" />
            </div>
          </div>
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="section-white knowledge-cats">
        <div className="container">
          <div className="split-head">
            <div className="split-head__col">
              <span className="eyebrow">Knowledge Categories</span>
              <h2 className="display-title ts-30-38 split-head__title">Explore Topics That Matter</h2>
            </div>
            <p className="split-head__aside split-head__text">
              Browse curated resources and community knowledge across the important areas
              of life, work, family, and culture.
            </p>
          </div>

          <div className="knowledge-cats__grid">
            {categories.map((c) => (
              <div key={c.title} className="knowledge-cat">
                <div className="knowledge-cat__media">
                  <Image src={c.img} alt={c.title} fill className="img-cover" sizes="400px" />
                </div>
                <div className="knowledge-cat__body">
                  <h3 className="knowledge-cat__title">{c.title}</h3>
                  <p className="knowledge-cat__sub">{c.sub}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AI MEMORY */}
      <section className="section-cream knowledge-ai">
        <div className="container">
          <div className="split-head">
            <div className="split-head__col">
              <span className="eyebrow">Powered by Community AI</span>
              <h2 className="display-title ts-30-38 split-head__title">
                Years of community wisdom, one question away
              </h2>
            </div>
            <p className="split-head__aside split-head__text">
              No more scrolling through 4,000 WhatsApp messages. Just ask.
            </p>
          </div>

          <div className="knowledge-ai__panel">
            <div className="knowledge-ai__bar">
              <span className="knowledge-ai__dots">
                <span className="knowledge-ai__dot knowledge-ai__dot--red" />
                <span className="knowledge-ai__dot knowledge-ai__dot--yellow" />
                <span className="knowledge-ai__dot knowledge-ai__dot--green" />
              </span>
              <span className="knowledge-ai__bar-label">Insignia TOWER · Community Memory</span>
            </div>
            <div className="knowledge-ai__body">
              <div className="knowledge-ai__q">
                <span className="knowledge-ai__q-emoji">🙋</span>
                <p className="knowledge-ai__q-text">Which WhatsApp group should I join?</p>
              </div>
              <div className="knowledge-ai__a">
                <span className="knowledge-ai__a-badge">AI</span>
                <p className="knowledge-ai__a-text">
                  Start with your city&apos;s welcome circle — if you&apos;re in Frisco,
                  that&apos;s &quot;Frisco Families.&quot; From there most newcomers add the
                  Youth, Seva and Marketplace circles. A volunteer will personally add you
                  within a day.
                </p>
              </div>
              <div className="knowledge-ai__sources">
                {["▤ WhatsApp archive", "▦ Event calendar", "◈ Member directory"].map((t) => (
                  <span key={t} className="knowledge-ai__source">{t}</span>
                ))}
              </div>
            </div>
            <div className="knowledge-ai__suggestions">
              {suggestions.map((s, i) => (
                <span key={s} className={`knowledge-ai__suggestion ${i === 0 ? "knowledge-ai__suggestion--active" : ""}`}>
                  {s}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* COMMUNITY VOICES */}
      <section className="section-white knowledge-voices">
        <div className="container">
          <span className="eyebrow">Community Voices</span>
          <h2 className="display-title ts-30-38 knowledge-voices__title">Loved by families across North Texas</h2>
          <div className="knowledge-voices__grid">
            {testimonials.map((t, i) => {
              const person = (
                <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>
              );
              const quote = (
                <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>
              );
              return (
                <div key={t.name} className="knowledge-voices__col">
                  {i === 1 ? (
                    <>
                      {person}
                      {quote}
                    </>
                  ) : (
                    <>
                      {quote}
                      {person}
                    </>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}