{"path":"src/app/page.tsx","size":10093,"locked":false,"binary":false,"truncated":false,"content":"import Image from \"next/image\";\nimport Link from \"next/link\";\nimport {\n  Mail,\n  Phone,\n  MapPin,\n  Instagram,\n  Facebook,\n  MessageCircle,\n  Send,\n  Headphones,\n  PhoneCall,\n} from \"lucide-react\";\nimport { createClient } from \"@/lib/supabase/server\";\nimport { brandConfig as staticBrand } from \"@/lib/brand\";\nimport { Header } from \"@/components/Header\";\nimport { ProductList } from \"@/components/ProductList\";\n\nexport const revalidate = 60;\nconst ITEMS_PER_PAGE = 5;\n\nexport default async function HomePage({\n  searchParams,\n}: {\n  searchParams: { search?: string; page?: string };\n}) {\n  const searchQuery = searchParams.search?.trim() || \"\";\n  const currentPage = Math.max(1, parseInt(searchParams.page || \"1\", 10) || 1);\n\n  let brand: any = { ...staticBrand };\n  let ratingStats: Record<string, { average: number; count: number }> = {};\n  let initialProducts: any[] = [];\n  let initialTotalPages = 0;\n\n  if (\n    process.env.NEXT_PUBLIC_SUPABASE_URL &&\n    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY\n  ) {\n    const supabase = await createClient();\n\n    if (supabase) {\n      try {\n        // Fetch settings, ratings, and initial products in parallel\n        const [settingsRes, ratingsRes, productsRes] = await Promise.all([\n          supabase.from(\"site_settings\").select(\"*\").single(),\n          supabase\n            .from(\"reviews\")\n            .select(\"product_id, rating\")\n            .eq(\"approved\", true),\n          supabase\n            .from(\"products\")\n            .select(\"*\", { count: \"exact\" })\n            .eq(\"is_active\", true)\n            .order(\"created_at\", { ascending: false })\n            .range(0, ITEMS_PER_PAGE - 1),   // first page only\n        ]);\n\n        if (settingsRes.data) {\n          const s = settingsRes.data;\n          brand = {\n            ...brand,\n            name: s.name ?? brand.name,\n            tagline: s.tagline ?? brand.tagline,\n            colors: s.colors ?? brand.colors,\n            fonts: s.fonts ?? brand.fonts,\n            hero: s.hero ?? brand.hero,\n            about: s.about ?? brand.about,\n            contact: s.contact ?? brand.contact,\n            footer: s.footer ?? brand.footer,\n            nav: s.nav ?? brand.nav,\n            chat: s.chat ?? brand.chat,\n          };\n        }\n\n        if (ratingsRes.data) {\n          const sums: Record<string, number> = {};\n          const counts: Record<string, number> = {};\n          for (const r of ratingsRes.data) {\n            if (!r.product_id) continue;\n            sums[r.product_id] = (sums[r.product_id] || 0) + r.rating;\n            counts[r.product_id] = (counts[r.product_id] || 0) + 1;\n          }\n          for (const productId of Object.keys(sums)) {\n            ratingStats[productId] = {\n              average: sums[productId] / counts[productId],\n              count: counts[productId],\n            };\n          }\n        }\n\n        if (productsRes.data) {\n          initialProducts = productsRes.data;\n          const totalCount = productsRes.count || 0;\n          initialTotalPages = Math.ceil(totalCount / ITEMS_PER_PAGE);\n        }\n      } catch (e) {\n        console.log(\"Supabase not fully configured, using demo data.\");\n      }\n    }\n  }\n\n  const name = brand.name || staticBrand.name;\n  const nav = brand.nav || [];\n  const hero = brand.hero || {};\n  const about = brand.about || {};\n  const contact = brand.contact || {};\n  const footer = brand.footer || {};\n  const chat = brand.chat || {};\n\n  return (\n    <div className=\"min-h-screen bg-[#fafafa] font-sans antialiased text-[#111]\">\n      <Header nav={nav} name={name} />\n\n      {hero && (\n        <section className=\"relative overflow-hidden bg-gradient-to-br from-neutral-100 to-white\">\n          <div className=\"mx-auto max-w-7xl px-4 md:px-6 pt-20 pb-20 md:pt-32 md:pb-32 text-center relative z-10\">\n            <h1 className=\"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-serif font-medium tracking-wide leading-tight\">\n              {(hero as any).title || staticBrand.hero.title}\n            </h1>\n            {(hero as any).subtitle && (\n              <p className=\"mt-4 md:mt-6 max-w-2xl mx-auto text-sm md:text-base text-neutral-600\">\n                {(hero as any).subtitle}\n              </p>\n            )}\n            {(hero as any).cta && (\n              <div className=\"mt-8 md:mt-10\">\n                <Link\n                  href={(hero as any).ctaLink || \"#products\"}\n                  className=\"inline-block rounded-sm bg-black px-6 py-3 md:px-8 md:py-4 text-xs md:text-sm uppercase tracking-[0.15em] font-medium text-white hover:bg-neutral-800 transition-colors\"\n                >\n                  {(hero as any).cta}\n                </Link>\n              </div>\n            )}\n          </div>\n          <div className=\"absolute top-0 right-0 -z-0 h-48 md:h-72 w-48 md:w-72 rounded-full bg-neutral-200 blur-3xl opacity-50\" />\n          <div className=\"absolute bottom-0 left-0 -z-0 h-48 md:h-72 w-48 md:w-72 rounded-full bg-neutral-300 blur-3xl opacity-30\" />\n        </section>\n      )}\n\n      {/* Products – initial data handed over, client handles the rest */}\n      <ProductList\n        chat={chat}\n        ratingStats={ratingStats}\n        initialProducts={initialProducts}\n        initialTotalPages={initialTotalPages}\n      />\n\n      {about && (about as any).content && (\n        <section id=\"about\" className=\"py-12 md:py-20 bg-white border-t border-neutral-100\">\n          <div className=\"mx-auto max-w-7xl px-4 md:px-6 flex flex-col lg:flex-row gap-8 md:gap-12 items-center\">\n            <div className=\"lg:w-1/2\">\n              {(about as any).image ? (\n                <Image\n                  src={(about as any).image}\n                  alt=\"About\"\n                  width={600}\n                  height={400}\n                  className=\"rounded-sm shadow-lg\"\n                />\n              ) : (\n                <div className=\"h-48 md:h-64 bg-gradient-to-br from-neutral-200 to-neutral-300 rounded-sm flex items-center justify-center text-neutral-500 text-sm md:text-base\">\n                  [About Image]\n                </div>\n              )}\n            </div>\n            <div className=\"lg:w-1/2\">\n              <h2 className=\"text-2xl md:text-3xl font-serif font-medium\">\n                {(about as any).title}\n              </h2>\n              <p className=\"mt-4 md:mt-6 text-sm md:text-base text-neutral-600 leading-relaxed\">\n                {(about as any).content}\n              </p>\n            </div>\n          </div>\n        </section>\n      )}\n\n      {contact &&\n        ((contact as any).email ||\n          (contact as any).phone ||\n          (contact as any).address) && (\n          <section className=\"py-12 md:py-20 bg-white border-t border-neutral-100\">\n            <div className=\"mx-auto max-w-7xl px-4 md:px-6 text-center\">\n              <h2 className=\"text-2xl md:text-3xl font-serif font-medium\">\n                Contact Us\n              </h2>\n              <div className=\"mt-8 md:mt-10 flex flex-col md:flex-row justify-center gap-6 md:gap-12 text-sm md:text-base\">\n                {(contact as any).email && (\n                  <a\n                    href={`mailto:${(contact as any).email}`}\n                    className=\"flex items-center justify-center gap-2 text-neutral-600 hover:text-black transition-colors\"\n                  >\n                    <Mail className=\"w-4 h-4\" /> {(contact as any).email}\n                  </a>\n                )}\n                {(contact as any).phone && (\n                  <a\n                    href={`tel:${(contact as any).phone}`}\n                    className=\"flex items-center justify-center gap-2 text-neutral-600 hover:text-black transition-colors\"\n                  >\n                    <Phone className=\"w-4 h-4\" /> {(contact as any).phone}\n                  </a>\n                )}\n                {(contact as any).address && (\n                  <div className=\"flex items-center justify-center gap-2 text-neutral-600\">\n                    <MapPin className=\"w-4 h-4\" /> {(contact as any).address}\n                  </div>\n                )}\n              </div>\n            </div>\n          </section>\n        )}\n\n      <footer className=\"py-8 md:py-12 bg-black text-neutral-400\">\n        <div className=\"mx-auto max-w-7xl px-4 md:px-6 text-center text-xs md:text-sm\">\n          {footer && (footer as any).copyright && (\n            <p>{(footer as any).copyright}</p>\n          )}\n          {footer?.socials && Object.keys(footer.socials).length > 0 && (\n            <div className=\"mt-4 flex justify-center gap-6 flex-wrap\">\n              {Object.entries(footer.socials).map(([platform, url]) =>\n                url ? (\n                  <a\n                    key={platform}\n                    href={url as string}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"hover:text-white transition-colors\"\n                  >\n                    {platform === \"instagram\" ? (\n                      <Instagram className=\"w-4 h-4\" />\n                    ) : platform === \"facebook\" ? (\n                      <Facebook className=\"w-4 h-4\" />\n                    ) : platform === \"x\" ? (\n                      <span className=\"text-xs font-bold\">𝕏</span>\n                    ) : platform === \"youtube\" ? (\n                      <span className=\"text-xs\">▶</span>\n                    ) : platform === \"whatsapp_channel\" ? (\n                      <MessageCircle className=\"w-4 h-4\" />\n                    ) : platform === \"telegram_channel\" ? (\n                      <Send className=\"w-4 h-4\" />\n                    ) : platform === \"discord_channel\" ? (\n                      <Headphones className=\"w-4 h-4\" />\n                    ) : platform === \"viber_channel\" ? (\n                      <PhoneCall className=\"w-4 h-4\" />\n                    ) : (\n                      <span className=\"text-xs uppercase\">{platform}</span>\n                    )}\n                  </a>\n                ) : null\n              )}\n            </div>\n          )}\n        </div>\n      </footer>\n    </div>\n  );\n              }\n"}