[V0_FILE]typescriptreact:file="app/admin/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/category/[slug]/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Weather Land Groups India Pvt Ltd - Sustainable Business Solutions", description: "Connecting businesses across Real Estate, Recycling, Spices, Beverages, and Construction with nature-conscious solutions and sustainable practices.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]png:file="public/images/wlg-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WLG-removebg-pjXEKassClr7wEpkwQDI7OkBQkbS6J.png" isMerged="true" [V0_FILE]jpg:file="public/images/real-estate.jpg" url="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/scrap-dealers.jpg" url="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/black-pepper.jpg" url="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/tea-coffee.jpg" url="https://images.unsplash.com/photo-1559056199-641a0ac8b55e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/building-contractors.jpg" url="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/real-estate-2.jpg" url="https://images.unsplash.com/photo-1582407947304-fd86f028f716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/scrap-metal.jpg" url="https://images.unsplash.com/photo-1586864387967-d02ef85d93e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/pepper-spices.jpg" url="https://images.unsplash.com/photo-1596040033229-a9821ebd058d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/tea-plantation.jpg" url="https://images.unsplash.com/photo-1563822249548-9a72b6353cd1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]jpg:file="public/images/construction-site.jpg" url="https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" isMerged="true" [V0_FILE]typescriptreact:file="app/admin/content-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Upload, Save, Edit, Trash2, Plus, ImageIcon } from "lucide-react" export default function ContentManagement() { const [selectedSection, setSelectedSection] = useState("hero") const [isEditing, setIsEditing] = useState(false) // Mock content data const [content, setContent] = useState({ hero: { title: "Your Gateway to Sustainable Business", subtitle: "Connecting businesses across Real Estate, Recycling, Spices, Beverages, and Construction with nature-conscious solutions and sustainable practices.", badge: "🌿 Nature-Based Business Solutions", primaryButton: "Explore Categories", secondaryButton: "Join Our Network", backgroundImage: "/placeholder.svg?height=600&width=1200", }, about: { title: "About Weather Land Groups", description: "Weather Land Groups India Pvt Ltd is committed to fostering sustainable business practices across diverse industries. We connect businesses and individuals in real estate, recycling, spices, beverages, and construction sectors.", features: ["Trusted by 500+ businesses", "Eco-friendly business solutions", "24/7 customer support"], image: "/placeholder.svg?height=400&width=600", }, contact: { phone: "+91 98765 43210", email: "info@weatherlandgroups.com", address: "Mumbai, Maharashtra, India", socialMedia: { facebook: "https://facebook.com/weatherlandgroups", twitter: "https://twitter.com/weatherlandgroups", linkedin: "https://linkedin.com/company/weatherlandgroups", }, }, categories: [ { id: 1, title: "Real Estate", description: "Premium properties and land development", image: "/images/real-estate.jpg", count: "150+ Properties", }, { id: 2, title: "Scrap Dealers", description: "Eco-friendly scrap metal and recycling services", image: "/images/scrap-dealers.jpg", count: "50+ Dealers", }, { id: 3, title: "Black Pepper Dealers", description: "Premium quality spices and black pepper", image: "/images/black-pepper.jpg", count: "30+ Suppliers", }, { id: 4, title: "Tea & Coffee Dealers", description: "Fresh tea leaves and coffee beans", image: "/images/tea-coffee.jpg", count: "40+ Dealers", }, { id: 5, title: "Building Contractors", description: "Professional construction and building services", image: "/images/building-contractors.jpg", count: "80+ Contractors", }, ], }) const handleSave = () => { alert("Content saved successfully!") setIsEditing(false) } const handleImageUpload = (section: string, field: string) => { // Simulate image upload const input = document.createElement("input") input.type = "file" input.accept = "image/*" input.onchange = (e) => { const file = (e.target as HTMLInputElement).files?.[0] if (file) { // In real implementation, upload to cloud storage alert(`Image uploaded for ${section} - ${field}`) } } input.click() } return (

Content Management

Manage all website content, images, and text

{isEditing && ( )}

Hero Section About Section Categories Contact Info Hero Section Content Main landing page hero section

Main Title setContent({ ...content, hero: { ...content.hero, title: e.target.value }, }) } disabled={!isEditing} className="border-green-300" />

Subtitle

setContent({
                          ...content,
                          hero: { ...content.hero, subtitle: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                      rows={3}
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">Badge Text</Label>
                    <Input
                      value={content.hero.badge}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          hero: { ...content.hero, badge: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label className="text-green-900">Primary Button Text</Label>
                    <Input
                      value={content.hero.primaryButton}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          hero: { ...content.hero, primaryButton: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">Secondary Button Text</Label>
                    <Input
                      value={content.hero.secondaryButton}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          hero: { ...content.hero, secondaryButton: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">Background Image</Label>
                    <div className="flex space-x-2">
                      <Input value={content.hero.backgroundImage} disabled className="border-green-300" />
                      <Button
                        onClick={() => handleImageUpload("hero", "background")}
                        disabled={!isEditing}
                        variant="outline"
                        className="border-green-600 text-green-600"
                      >
                        <Upload className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="about" className="space-y-6">
          <Card className="border-green-200">
            <CardHeader>
              <CardTitle className="text-green-900">About Section Content</CardTitle>
              <CardDescription>Company information and features</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label className="text-green-900">Section Title</Label>
                    <Input
                      value={content.about.title}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          about: { ...content.about, title: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">Description</Label>
                    <Textarea
                      value={content.about.description}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          about: { ...content.about, description: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                      rows={4}
                    />
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label className="text-green-900">Features (one per line)</Label>
                    <Textarea
                      value={content.about.features.join("\n")}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          about: { ...content.about, features: e.target.value.split("\n") },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                      rows={4}
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">About Image</Label>
                    <div className="flex space-x-2">
                      <Input value={content.about.image} disabled className="border-green-300" />
                      <Button
                        onClick={() => handleImageUpload("about", "image")}
                        disabled={!isEditing}
                        variant="outline"
                        className="border-green-600 text-green-600"
                      >
                        <Upload className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="categories" className="space-y-6">
          <Card className="border-green-200">
            <CardHeader>
              <div className="flex items-center justify-between">
                <div>
                  <CardTitle className="text-green-900">Business Categories</CardTitle>
                  <CardDescription>Manage business category information</CardDescription>
                </div>
                <Button disabled={!isEditing} className="bg-green-600 hover:bg-green-700">
                  <Plus className="h-4 w-4 mr-2" />
                  Add Category
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {content.categories.map((category, index) => (
                  <Card key={category.id} className="border-green-100">
                    <CardContent className="p-4">
                      <div className="grid md:grid-cols-3 gap-4">
                        <div>
                          <Label className="text-green-900">Category Title</Label>
                          <Input
                            value={category.title}
                            onChange={(e) => {
                              const newCategories = [...content.categories]
                              newCategories[index].title = e.target.value
                              setContent({ ...content, categories: newCategories })
                            }}
                            disabled={!isEditing}
                            className="border-green-300"
                          />
                        </div>
                        <div>
                          <Label className="text-green-900">Description</Label>
                          <Input
                            value={category.description}
                            onChange={(e) => {
                              const newCategories = [...content.categories]
                              newCategories[index].description = e.target.value
                              setContent({ ...content, categories: newCategories })
                            }}
                            disabled={!isEditing}
                            className="border-green-300"
                          />
                        </div>
                        <div>
                          <Label className="text-green-900">Count Display</Label>
                          <Input
                            value={category.count}
                            onChange={(e) => {
                              const newCategories = [...content.categories]
                              newCategories[index].count = e.target.value
                              setContent({ ...content, categories: newCategories })
                            }}
                            disabled={!isEditing}
                            className="border-green-300"
                          />
                        </div>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <div className="flex space-x-2">
                          <Button
                            onClick={() => handleImageUpload("category", category.id.toString())}
                            disabled={!isEditing}
                            variant="outline"
                            size="sm"
                            className="border-green-600 text-green-600"
                          >
                            <ImageIcon className="h-4 w-4 mr-2" />
                            Change Image
                          </Button>
                        </div>
                        <Button
                          disabled={!isEditing}
                          variant="outline"
                          size="sm"
                          className="text-red-600 border-red-300"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="contact" className="space-y-6">
          <Card className="border-green-200">
            <CardHeader>
              <CardTitle className="text-green-900">Contact Information</CardTitle>
              <CardDescription>Update company contact details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label className="text-green-900">Phone Number</Label>
                    <Input
                      value={content.contact.phone}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          contact: { ...content.contact, phone: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">Email Address</Label>
                    <Input
                      value={content.contact.email}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          contact: { ...content.contact, email: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">Address</Label>
                    <Textarea
                      value={content.contact.address}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          contact: { ...content.contact, address: e.target.value },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                      rows={2}
                    />
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label className="text-green-900">Facebook URL</Label>
                    <Input
                      value={content.contact.socialMedia.facebook}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          contact: {
                            ...content.contact,
                            socialMedia: { ...content.contact.socialMedia, facebook: e.target.value },
                          },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">Twitter URL</Label>
                    <Input
                      value={content.contact.socialMedia.twitter}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          contact: {
                            ...content.contact,
                            socialMedia: { ...content.contact.socialMedia, twitter: e.target.value },
                          },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                  <div>
                    <Label className="text-green-900">LinkedIn URL</Label>
                    <Input
                      value={content.contact.socialMedia.linkedin}
                      onChange={(e) =>
                        setContent({
                          ...content,
                          contact: {
                            ...content.contact,
                            socialMedia: { ...content.contact.socialMedia, linkedin: e.target.value },
                          },
                        })
                      }
                      disabled={!isEditing}
                      className="border-green-300"
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Upload, Download, Trash2, Eye, Search, ImageIcon, File, Video } from "lucide-react"
import Image from "next/image"

export default function MediaManagement() {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchTerm, setSearchTerm] = useState("")

// Mock media data
  const mediaFiles = [
    {
      id: 1,
      name: "wlg-logo.png",
      type: "image",
      size: "45 KB",
      url: "/images/wlg-logo.png",
      category: "logos",
      uploadDate: "2024-01-15",
      usedIn: ["Header", "Footer", "Auth Page"],
    },
    {
      id: 2,
      name: "real-estate.jpg",
      type: "image",
      size: "2.3 MB",
      url: "/images/real-estate.jpg",
      category: "listings",
      uploadDate: "2024-01-14",
      usedIn: ["Real Estate Category", "Homepage"],
    },
    {
      id: 3,
      name: "scrap-dealers.jpg",
      type: "image",
      size: "1.8 MB",
      url: "/images/scrap-dealers.jpg",
      category: "listings",
      uploadDate: "2024-01-13",
      usedIn: ["Scrap Dealers Category"],
    },
    {
      id: 4,
      name: "black-pepper.jpg",
      type: "image",
      size: "1.9 MB",
      url: "/images/black-pepper.jpg",
      category: "listings",
      uploadDate: "2024-01-12",
      usedIn: ["Black Pepper Category"],
    },
    {
      id: 5,
      name: "tea-coffee.jpg",
      type: "image",
      size: "2.1 MB",
      url: "/images/tea-coffee.jpg",
      category: "listings",
      uploadDate: "2024-01-11",
      usedIn: ["Tea & Coffee Category"],
    },
    {
      id: 6,
      name: "building-contractors.jpg",
      type: "image",
      size: "2.4 MB",
      url: "/images/building-contractors.jpg",
      category: "listings",
      uploadDate: "2024-01-10",
      usedIn: ["Building Contractors Category"],
    },
    {
      id: 7,
      name: "company-video.mp4",
      type: "video",
      size: "15.2 MB",
      url: "/placeholder-video.mp4",
      category: "videos",
      uploadDate: "2024-01-09",
      usedIn: ["About Page"],
    },
    {
      id: 8,
      name: "brochure.pdf",
      type: "document",
      size: "3.4 MB",
      url: "/placeholder-document.pdf",
      category: "documents",
      uploadDate: "2024-01-08",
      usedIn: ["Downloads"],
    },
  ]

const handleFileUpload = () => {
    const input = document.createElement("input")
    input.type = "file"
    input.multiple = true
    input.accept = "image/*,video/*,.pdf,.doc,.docx"
    input.onchange = (e) => {
      const files = (e.target as HTMLInputElement).files
      if (files) {
        Array.from(files).forEach((file) => {
          console.log("Uploading:", file.name)
          // In real implementation, upload to cloud storage
        })
        alert(`${files.length} file(s) uploaded successfully!`)
      }
    }
    input.click()
  }

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this file?")) {
      alert("File deleted successfully!")
    }
  }

const getFileIcon = (type: string) => {
    switch (type) {
      case "image":
        return <ImageIcon className="h-5 w-5 text-blue-600" />
      case "video":
        return <Video className="h-5 w-5 text-purple-600" />
      case "document":
        return <File className="h-5 w-5 text-red-600" />
      default:
        return <File className="h-5 w-5 text-gray-600" />
    }
  }

const filteredFiles = mediaFiles.filter((file) => {
    const matchesCategory = selectedCategory === "all" || file.category === selectedCategory
    const matchesSearch = file.name.toLowerCase().includes(searchTerm.toLowerCase())
    return matchesCategory && matchesSearch
  })

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-green-900">Media Management</h2>
          <p className="text-green-700">Upload and manage images, videos, and documents</p>
        </div>
        <Button onClick={handleFileUpload} className="bg-green-600 hover:bg-green-700">
          <Upload className="h-4 w-4 mr-2" />
          Upload Files
        </Button>
      </div>

{/* Filters */}
      <Card className="border-green-200">
        <CardContent className="p-4">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1">
              <div className="relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-green-500" />
                <Input
                  placeholder="Search files..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 border-green-300"
                />
              </div>
            </div>
            <Select value={selectedCategory} onValueChange={setSelectedCategory}>
              <SelectTrigger className="w-48 border-green-300">
                <SelectValue placeholder="Filter by category" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Categories</SelectItem>
                <SelectItem value="logos">Logos</SelectItem>
                <SelectItem value="backgrounds">Backgrounds</SelectItem>
                <SelectItem value="listings">Listings</SelectItem>
                <SelectItem value="videos">Videos</SelectItem>
                <SelectItem value="documents">Documents</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

{/* Media Grid */}
      <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {filteredFiles.map((file) => (
          <Card key={file.id} className="border-green-200 hover:shadow-lg transition-shadow">
            <CardContent className="p-4">
              <div className="space-y-3">
                {/* File Preview */}
                <div className="relative h-32 bg-green-50 rounded-lg flex items-center justify-center overflow-hidden">
                  {file.type === "image" ? (
                    <Image src={file.url || "/placeholder.svg"} alt={file.name} fill className="object-cover" />
                  ) : (
                    <div className="flex flex-col items-center space-y-2">
                      {getFileIcon(file.type)}
                      <span className="text-xs text-green-600 font-medium">{file.type.toUpperCase()}</span>
                    </div>
                  )}
                </div>

{/* File Info */}
                <div>
                  <h3 className="font-medium text-green-900 truncate" title={file.name}>
                    {file.name}
                  </h3>
                  <div className="flex items-center justify-between text-xs text-green-600 mt-1">
                    <span>{file.size}</span>
                    <Badge variant="secondary" className="bg-green-100 text-green-800">
                      {file.category}
                    </Badge>
                  </div>
                  <p className="text-xs text-green-500 mt-1">Uploaded: {file.uploadDate}</p>
                </div>

{/* Usage Info */}
                <div>
                  <p className="text-xs text-green-600 mb-1">Used in:</p>
                  <div className="flex flex-wrap gap-1">
                    {file.usedIn.map((usage, index) => (
                      <Badge key={index} variant="outline" className="text-xs border-green-300 text-green-700">
                        {usage}
                      </Badge>
                    ))}
                  </div>
                </div>

{/* Actions */}
                <div className="flex space-x-2 pt-2">
                  <Button size="sm" variant="outline" className="flex-1 border-green-300 text-green-700">
                    <Eye className="h-3 w-3 mr-1" />
                    View
                  </Button>
                  <Button size="sm" variant="outline" className="border-green-300 text-green-700">
                    <Download className="h-3 w-3" />
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="border-red-300 text-red-600"
                    onClick={() => handleDelete(file.id)}
                  >
                    <Trash2 className="h-3 w-3" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

{/* Upload Zone */}
      <Card className="border-green-200 border-dashed">
        <CardContent className="p-8">
          <div
            className="text-center cursor-pointer hover:bg-green-50 transition-colors rounded-lg p-8"
            onClick={handleFileUpload}
          >
            <Upload className="h-12 w-12 text-green-600 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-green-900 mb-2">Upload Media Files</h3>
            <p className="text-green-700 mb-4">Drag and drop files here, or click to browse</p>
            <p className="text-sm text-green-600">
              Supports: Images (JPG, PNG, GIF), Videos (MP4, MOV), Documents (PDF, DOC)
            </p>
          </div>
        </CardContent>
      </Card>

{/* Storage Info */}
      <Card className="border-green-200">
        <CardHeader>
          <CardTitle className="text-green-900">Storage Usage</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex justify-between text-sm">
              <span className="text-green-700">Used Storage</span>
              <span className="text-green-900 font-medium">2.4 GB / 10 GB</span>
            </div>
            <div className="w-full bg-green-100 rounded-full h-2">
              <div className="bg-green-600 h-2 rounded-full" style={{ width: "24%" }}></div>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
              <div className="text-center">
                <p className="text-green-900 font-medium">156</p>
                <p className="text-green-600">Images</p>
              </div>
              <div className="text-center">
                <p className="text-green-900 font-medium">12</p>
                <p className="text-green-600">Videos</p>
              </div>
              <div className="text-center">
                <p className="text-green-900 font-medium">34</p>
                <p className="text-green-600">Documents</p>
              </div>
              <div className="text-center">
                <p className="text-green-900 font-medium">7.6 GB</p>
                <p className="text-green-600">Available</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/product-management.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Upload, Save, Edit, Trash2, Plus, Eye, Search, Filter } from "lucide-react"
import Image from "next/image"

export default function ProductManagement() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [editingProduct, setEditingProduct] = useState<any>(null)

// Mock product data
  const [products, setProducts] = useState([
    {
      id: 1,
      name: "Premium Office Space in Bandra",
      category: "Real Estate",
      price: "₹50,000",
      unit: "per month",
      quantity: "5 units",
      description: "Modern office space with all amenities in prime location",
      image: "/images/real-estate.jpg",
      contact: "+91 98765 43210",
      email: "contact@property1.com",
      address: "Bandra West, Mumbai",
      status: "Active",
      featured: true,
    },
    {
      id: 2,
      name: "Organic Black Pepper",
      category: "Black Pepper Dealers",
      price: "₹800",
      unit: "per kg",
      quantity: "500 kg",
      description: "Premium quality organic black pepper from Kerala farms",
      image: "/images/black-pepper.jpg",
      contact: "+91 98765 43213",
      email: "kerala@spicetraders.com",
      address: "Kochi, Kerala",
      status: "Active",
      featured: false,
    },
    {
      id: 3,
      name: "Metal Scrap Collection",
      category: "Scrap Dealers",
      price: "₹45",
      unit: "per kg",
      quantity: "Unlimited",
      description: "Best rates for all types of metal scrap collection",
      image: "/images/scrap-dealers.jpg",
      contact: "+91 98765 43212",
      email: "mumbai@metalrecycle.com",
      address: "Dharavi, Mumbai",
      status: "Active",
      featured: false,
    },
    {
      id: 4,
      name: "Darjeeling Tea Premium",
      category: "Tea & Coffee Dealers",
      price: "₹1,200",
      unit: "per kg",
      quantity: "200 kg",
      description: "Premium Darjeeling tea direct from gardens",
      image: "/images/tea-coffee.jpg",
      contact: "+91 98765 43215",
      email: "sales@darjeelingtea.com",
      address: "Darjeeling, West Bengal",
      status: "Active",
      featured: true,
    },
    {
      id: 5,
      name: "Construction Services",
      category: "Building Contractors",
      price: "₹2,00,000",
      unit: "per project",
      quantity: "Available",
      description: "Complete building construction services with modern techniques",
      image: "/images/building-contractors.jpg",
      contact: "+91 98765 43217",
      email: "projects@mumbaiconst.com",
      address: "Mumbai, Maharashtra",
      status: "Active",
      featured: false,
    },
  ])

const categories = [
    "Real Estate",
    "Scrap Dealers",
    "Black Pepper Dealers",
    "Tea & Coffee Dealers",
    "Building Contractors",
  ]

const handleEdit = (product: any) => {
    setEditingProduct(product)
    setIsEditDialogOpen(true)
  }

const handleSave = () => {
    if (editingProduct) {
      setProducts(products.map((p) => (p.id === editingProduct.id ? editingProduct : p)))
      setIsEditDialogOpen(false)
      setEditingProduct(null)
      alert("Product updated successfully!")
    }
  }

const handleDelete = (id: number) => {
    if (confirm("Are you sure you want to delete this product?")) {
      setProducts(products.filter((p) => p.id !== id))
      alert("Product deleted successfully!")
    }
  }

const handleImageUpload = () => {
    const input = document.createElement("input")
    input.type = "file"
    input.accept = "image/*"
    input.onchange = (e) => {
      const file = (e.target as HTMLInputElement).files?.[0]
      if (file) {
        alert("Image uploaded successfully!")
      }
    }
    input.click()
  }

const filteredProducts = products.filter((product) => {
    const matchesSearch =
      product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      product.description.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "all" || product.category === selectedCategory
    return matchesSearch && matchesCategory
  })

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold gradient-text">Product Management</h2>
          <p className="text-muted-foreground">Manage products, prices, quantities, and details</p>
        </div>
        <Button className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700">
          <Plus className="h-4 w-4 mr-2" />
          Add New Product
        </Button>
      </div>

{/* Filters */}
      <Card className="glass-effect border-0 shadow-xl">
        <CardContent className="p-6">
          <div className="grid md:grid-cols-3 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search products..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <Select value={selectedCategory} onValueChange={setSelectedCategory}>
              <SelectTrigger>
                <SelectValue placeholder="Filter by category" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Categories</SelectItem>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button variant="outline" className="w-full">
              <Filter className="h-4 w-4 mr-2" />
              Advanced Filters
            </Button>
          </div>
        </CardContent>
      </Card>

{/* Products Table */}
      <Card className="glass-effect border-0 shadow-xl">
        <CardHeader>
          <CardTitle>Products ({filteredProducts.length})</CardTitle>
          <CardDescription>Manage your product listings, prices, and inventory</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Product</TableHead>
                <TableHead>Category</TableHead>
                <TableHead>Price</TableHead>
                <TableHead>Quantity</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredProducts.map((product) => (
                <TableRow key={product.id}>
                  <TableCell>
                    <div className="flex items-center space-x-3">
                      <div className="relative w-12 h-12 rounded-lg overflow-hidden">
                        <Image
                          src={product.image || "/placeholder.svg"}
                          alt={product.name}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-medium">{product.name}</p>
                        <p className="text-sm text-muted-foreground">{product.description.substring(0, 50)}...</p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary">{product.category}</Badge>
                  </TableCell>
                  <TableCell>
                    <div>
                      <p className="font-medium">{product.price}</p>
                      <p className="text-sm text-muted-foreground">{product.unit}</p>
                    </div>
                  </TableCell>
                  <TableCell>{product.quantity}</TableCell>
                  <TableCell>
                    <Badge variant={product.status === "Active" ? "default" : "secondary"}>{product.status}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex space-x-2">
                      <Button size="sm" variant="outline" onClick={() => handleEdit(product)}>
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="outline">
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => handleDelete(product.id)}>
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

{/* Edit Product Dialog */}
      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Edit Product</DialogTitle>
            <DialogDescription>Update product information, pricing, and details</DialogDescription>
          </DialogHeader>

{editingProduct && (
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-4">
                <div>
                  <Label>Product Name</Label>
                  <Input
                    value={editingProduct.name}
                    onChange={(e) => setEditingProduct({ ...editingProduct, name: e.target.value })}
                  />
                </div>

<div>
                  <Label>Category</Label>
                  <Select
                    value={editingProduct.category}
                    onValueChange={(value) => setEditingProduct({ ...editingProduct, category: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((category) => (
                        <SelectItem key={category} value={category}>
                          {category}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label>Price</Label>
                    <Input
                      value={editingProduct.price}
                      onChange={(e) => setEditingProduct({ ...editingProduct, price: e.target.value })}
                    />
                  </div>
                  <div>
                    <Label>Unit</Label>
                    <Input
                      value={editingProduct.unit}
                      onChange={(e) => setEditingProduct({ ...editingProduct, unit: e.target.value })}
                    />
                  </div>
                </div>

<div>
                  <Label>Quantity Available</Label>
                  <Input
                    value={editingProduct.quantity}
                    onChange={(e) => setEditingProduct({ ...editingProduct, quantity: e.target.value })}
                  />
                </div>

<div>
                  <Label>Description</Label>
                  <Textarea
                    value={editingProduct.description}
                    onChange={(e) => setEditingProduct({ ...editingProduct, description: e.target.value })}
                    rows={3}
                  />
                </div>
              </div>

<div className="space-y-4">
                <div>
                  <Label>Product Image</Label>
                  <div className="relative h-48 border-2 border-dashed border-muted rounded-lg overflow-hidden">
                    <Image
                      src={editingProduct.image || "/placeholder.svg"}
                      alt={editingProduct.name}
                      fill
                      className="object-cover"
                    />
                    <div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                      <Button onClick={handleImageUpload} variant="secondary">
                        <Upload className="h-4 w-4 mr-2" />
                        Change Image
                      </Button>
                    </div>
                  </div>
                </div>

<div>
                  <Label>Contact Phone</Label>
                  <Input
                    value={editingProduct.contact}
                    onChange={(e) => setEditingProduct({ ...editingProduct, contact: e.target.value })}
                  />
                </div>

<div>
                  <Label>Email</Label>
                  <Input
                    value={editingProduct.email}
                    onChange={(e) => setEditingProduct({ ...editingProduct, email: e.target.value })}
                  />
                </div>

<div>
                  <Label>Address</Label>
                  <Textarea
                    value={editingProduct.address}
                    onChange={(e) => setEditingProduct({ ...editingProduct, address: e.target.value })}
                    rows={2}
                  />
                </div>

<div>
                  <Label>Status</Label>
                  <Select
                    value={editingProduct.status}
                    onValueChange={(value) => setEditingProduct({ ...editingProduct, status: value })}
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Active">Active</SelectItem>
                      <SelectItem value="Inactive">Inactive</SelectItem>
                      <SelectItem value="Out of Stock">Out of Stock</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
          )}

<div className="flex justify-end space-x-2 pt-4">
            <Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleSave} className="bg-gradient-to-r from-green-500 to-emerald-600">
              <Save className="h-4 w-4 mr-2" />
              Save Changes
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/advanced-settings.tsx" isMerged="true"
"use client"

export default function AdvancedSettings() {
  const [settings, setSettings] = useState({
    site: {
      name: "Weather Land Groups India Pvt Ltd",
      tagline: "Sustainable Business Solutions",
      description:
        "Connecting businesses across Real Estate, Recycling, Spices, Beverages, and Construction with nature-conscious solutions and sustainable practices.",
      logo: "/images/wlg-logo.png",
      favicon: "/favicon.ico",
      language: "en",
      timezone: "Asia/Kolkata",
    },
    theme: {
      primaryColor: "#059669",
      secondaryColor: "#10b981",
      accentColor: "#34d399",
      darkMode: false,
      customCSS: "",
    },
    contact: {
      primaryPhone: "+91 98765 43210",
      secondaryPhone: "+91 98765 43211",
      primaryEmail: "info@weatherlandgroups.com",
      supportEmail: "support@weatherlandgroups.com",
      address: "Weather Land Groups India Pvt Ltd\nMumbai, Maharashtra, India",
      socialMedia: {
        facebook: "https://facebook.com/weatherlandgroups",
        twitter: "https://twitter.com/weatherlandgroups",
        linkedin: "https://linkedin.com/company/weatherlandgroups",
        instagram: "https://instagram.com/weatherlandgroups",
      },
    },
    business: {
      gstNumber: "27AAAAA0000A1Z5",
      panNumber: "AAAAA0000A",
      businessHours: "Monday - Friday: 9:00 AM - 6:00 PM",
      emergencyContact: "+91 98765 43299",
      businessType: "Private Limited Company",
      yearEstablished: "2017",
    },
    notifications: {
      emailNotifications: true,
      smsNotifications: true,
      pushNotifications: false,
      marketingEmails: true,
    },
    security: {
      twoFactorAuth: true,
      sessionTimeout: "30",
      passwordPolicy: "strong",
      ipWhitelist: "",
    },
  })

const handleSave = () => {
    alert("Settings saved successfully!")
  }

const handleImageUpload = (type: string) => {
    const input = document.createElement("input")
    input.type = "file"
    input.accept = "image/*"
    input.onchange = (e) => {
      const file = (e.target as HTMLInputElement).files?.[0]
      if (file) {
        alert(`${type} uploaded successfully!`)
      }
    }
    input.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold gradient-text">Advanced Settings</h2>
          <p className="text-muted-foreground">Configure all aspects of your website</p>
        </div>
        <Button
          onClick={handleSave}
          className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700"
        >
          <Save className="h-4 w-4 mr-2" />
          Save All Settings
        </Button>
      </div>

<Tabs defaultValue="site" className="space-y-6">
        <TabsList className="grid w-full grid-cols-6 bg-white/80 border">
          <TabsTrigger
            value="site"
            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Globe className="h-4 w-4 mr-2" />
            Site
          </TabsTrigger>
          <TabsTrigger
            value="theme"
            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Palette className="h-4 w-4 mr-2" />
            Theme
          </TabsTrigger>
          <TabsTrigger
            value="contact"
            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            Contact
          </TabsTrigger>
          <TabsTrigger
            value="business"
            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            Business
          </TabsTrigger>
          <TabsTrigger
            value="notifications"
            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Bell className="h-4 w-4 mr-2" />
            Alerts
          </TabsTrigger>
          <TabsTrigger
            value="security"
            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Shield className="h-4 w-4 mr-2" />
            Security
          </TabsTrigger>
        </TabsList>

<TabsContent value="site" className="space-y-6">
          <Card className="glass-effect border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Site Configuration</CardTitle>
              <CardDescription>Basic website information and branding</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label>Site Name</Label>
                    <Input
                      value={settings.site.name}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          site: { ...settings.site, name: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Tagline</Label>
                    <Input
                      value={settings.site.tagline}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          site: { ...settings.site, tagline: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Description</Label>
                    <Textarea
                      value={settings.site.description}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          site: { ...settings.site, description: e.target.value },
                        })
                      }
                      rows={4}
                    />
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label>Site Logo</Label>
                    <div className="flex items-center space-x-4">
                      <Image
                        src={settings.site.logo || "/placeholder.svg"}
                        alt="Site Logo"
                        width={60}
                        height={60}
                        className="rounded-full border shadow-lg"
                      />
                      <Button onClick={() => handleImageUpload("Logo")} variant="outline">
                        <Upload className="h-4 w-4 mr-2" />
                        Change Logo
                      </Button>
                    </div>
                  </div>
                  <div>
                    <Label>Language</Label>
                    <Select
                      value={settings.site.language}
                      onValueChange={(value) =>
                        setSettings({
                          ...settings,
                          site: { ...settings.site, language: value },
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="en">English</SelectItem>
                        <SelectItem value="hi">Hindi</SelectItem>
                        <SelectItem value="mr">Marathi</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label>Timezone</Label>
                    <Select
                      value={settings.site.timezone}
                      onValueChange={(value) =>
                        setSettings({
                          ...settings,
                          site: { ...settings.site, timezone: value },
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Asia/Kolkata">Asia/Kolkata (IST)</SelectItem>
                        <SelectItem value="UTC">UTC</SelectItem>
                        <SelectItem value="America/New_York">America/New_York (EST)</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="theme" className="space-y-6">
          <Card className="glass-effect border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Theme Customization</CardTitle>
              <CardDescription>Customize colors, fonts, and appearance</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label>Primary Color</Label>
                    <div className="flex space-x-2">
                      <Input
                        type="color"
                        value={settings.theme.primaryColor}
                        onChange={(e) =>
                          setSettings({
                            ...settings,
                            theme: { ...settings.theme, primaryColor: e.target.value },
                          })
                        }
                        className="w-16 h-10"
                      />
                      <Input
                        value={settings.theme.primaryColor}
                        onChange={(e) =>
                          setSettings({
                            ...settings,
                            theme: { ...settings.theme, primaryColor: e.target.value },
                          })
                        }
                        className="flex-1"
                      />
                    </div>
                  </div>
                  <div>
                    <Label>Secondary Color</Label>
                    <div className="flex space-x-2">
                      <Input
                        type="color"
                        value={settings.theme.secondaryColor}
                        onChange={(e) =>
                          setSettings({
                            ...settings,
                            theme: { ...settings.theme, secondaryColor: e.target.value },
                          })
                        }
                        className="w-16 h-10"
                      />
                      <Input
                        value={settings.theme.secondaryColor}
                        onChange={(e) =>
                          setSettings({
                            ...settings,
                            theme: { ...settings.theme, secondaryColor: e.target.value },
                          })
                        }
                        className="flex-1"
                      />
                    </div>
                  </div>
                  <div>
                    <Label>Accent Color</Label>
                    <div className="flex space-x-2">
                      <Input
                        type="color"
                        value={settings.theme.accentColor}
                        onChange={(e) =>
                          setSettings({
                            ...settings,
                            theme: { ...settings.theme, accentColor: e.target.value },
                          })
                        }
                        className="w-16 h-10"
                      />
                      <Input
                        value={settings.theme.accentColor}
                        onChange={(e) =>
                          setSettings({
                            ...settings,
                            theme: { ...settings.theme, accentColor: e.target.value },
                          })
                        }
                        className="flex-1"
                      />
                    </div>
                  </div>
                </div>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <Label>Dark Mode</Label>
                    <Switch
                      checked={settings.theme.darkMode}
                      onCheckedChange={(checked) =>
                        setSettings({
                          ...settings,
                          theme: { ...settings.theme, darkMode: checked },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Custom CSS</Label>
                    <Textarea
                      value={settings.theme.customCSS}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          theme: { ...settings.theme, customCSS: e.target.value },
                        })
                      }
                      rows={6}
                      placeholder="/* Add your custom CSS here */"
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="contact" className="space-y-6">
          <Card className="glass-effect border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Contact Information</CardTitle>
              <CardDescription>Update all contact details and social media</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label>Primary Phone</Label>
                    <Input
                      value={settings.contact.primaryPhone}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          contact: { ...settings.contact, primaryPhone: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Secondary Phone</Label>
                    <Input
                      value={settings.contact.secondaryPhone}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          contact: { ...settings.contact, secondaryPhone: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Primary Email</Label>
                    <Input
                      value={settings.contact.primaryEmail}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          contact: { ...settings.contact, primaryEmail: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Support Email</Label>
                    <Input
                      value={settings.contact.supportEmail}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          contact: { ...settings.contact, supportEmail: e.target.value },
                        })
                      }
                    />
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label>Business Address</Label>
                    <Textarea
                      value={settings.contact.address}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          contact: { ...settings.contact, address: e.target.value },
                        })
                      }
                      rows={3}
                    />
                  </div>
                  <div>
                    <Label>Facebook URL</Label>
                    <Input
                      value={settings.contact.socialMedia.facebook}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          contact: {
                            ...settings.contact,
                            socialMedia: { ...settings.contact.socialMedia, facebook: e.target.value },
                          },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>LinkedIn URL</Label>
                    <Input
                      value={settings.contact.socialMedia.linkedin}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          contact: {
                            ...settings.contact,
                            socialMedia: { ...settings.contact.socialMedia, linkedin: e.target.value },
                          },
                        })
                      }
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="business" className="space-y-6">
          <Card className="glass-effect border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Business Information</CardTitle>
              <CardDescription>Legal and operational business details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div>
                    <Label>GST Number</Label>
                    <Input
                      value={settings.business.gstNumber}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          business: { ...settings.business, gstNumber: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>PAN Number</Label>
                    <Input
                      value={settings.business.panNumber}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          business: { ...settings.business, panNumber: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Business Type</Label>
                    <Select
                      value={settings.business.businessType}
                      onValueChange={(value) =>
                        setSettings({
                          ...settings,
                          business: { ...settings.business, businessType: value },
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Private Limited Company">Private Limited Company</SelectItem>
                        <SelectItem value="Public Limited Company">Public Limited Company</SelectItem>
                        <SelectItem value="Partnership">Partnership</SelectItem>
                        <SelectItem value="Sole Proprietorship">Sole Proprietorship</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                <div className="space-y-4">
                  <div>
                    <Label>Year Established</Label>
                    <Input
                      value={settings.business.yearEstablished}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          business: { ...settings.business, yearEstablished: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Business Hours</Label>
                    <Input
                      value={settings.business.businessHours}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          business: { ...settings.business, businessHours: e.target.value },
                        })
                      }
                    />
                  </div>
                  <div>
                    <Label>Emergency Contact</Label>
                    <Input
                      value={settings.business.emergencyContact}
                      onChange={(e) =>
                        setSettings({
                          ...settings,
                          business: { ...settings.business, emergencyContact: e.target.value },
                        })
                      }
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notifications" className="space-y-6">
          <Card className="glass-effect border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Notification Settings</CardTitle>
              <CardDescription>Configure how you receive alerts and updates</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label>Email Notifications</Label>
                    <p className="text-sm text-muted-foreground">Receive notifications via email</p>
                  </div>
                  <Switch
                    checked={settings.notifications.emailNotifications}
                    onCheckedChange={(checked) =>
                      setSettings({
                        ...settings,
                        notifications: { ...settings.notifications, emailNotifications: checked },
                      })
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <Label>SMS Notifications</Label>
                    <p className="text-sm text-muted-foreground">Receive notifications via SMS</p>
                  </div>
                  <Switch
                    checked={settings.notifications.smsNotifications}
                    onCheckedChange={(checked) =>
                      setSettings({
                        ...settings,
                        notifications: { ...settings.notifications, smsNotifications: checked },
                      })
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <Label>Push Notifications</Label>
                    <p className="text-sm text-muted-foreground">Receive browser push notifications</p>
                  </div>
                  <Switch
                    checked={settings.notifications.pushNotifications}
                    onCheckedChange={(checked) =>
                      setSettings({
                        ...settings,
                        notifications: { ...settings.notifications, pushNotifications: checked },
                      })
                    }
                  />
                </div>
                <div className="flex items-center justify-between">
                  <div>
                    <Label>Marketing Emails</Label>
                    <p className="text-sm text-muted-foreground">Receive promotional and marketing emails</p>
                  </div>
                  <Switch
                    checked={settings.notifications.marketingEmails}
                    onCheckedChange={(checked) =>
                      setSettings({
                        ...settings,
                        notifications: { ...settings.notifications, marketingEmails: checked },
                      })
                    }
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="security" className="space-y-6">
          <Card className="glass-effect border-0 shadow-xl">
            <CardHeader>
              <CardTitle>Security Settings</CardTitle>
              <CardDescription>Configure security and access controls</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <Label>Two-Factor Authentication</Label>
                    <p className="text-sm text-muted-foreground">Add an extra layer of security to your account</p>
                  </div>
                  <Switch
                    checked={settings.security.twoFactorAuth}
                    onCheckedChange={(checked) =>
                      setSettings({
                        ...settings,
                        security: { ...settings.security, twoFactorAuth: checked },
                      })
                    }
                  />
                </div>
                <div>
                  <Label>Session Timeout (minutes)</Label>
                  <Select
                    value={settings.security.sessionTimeout}
                    onValueChange={(value) =>
                      setSettings({
                        ...settings,
                        security: { ...settings.security, sessionTimeout: value },
                      })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="15">15 minutes</SelectItem>
                      <SelectItem value="30">30 minutes</SelectItem>
                      <SelectItem value="60">1 hour</SelectItem>
                      <SelectItem value="120">2 hours</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Password Policy</Label>
                  <Select
                    value={settings.security.passwordPolicy}
                    onValueChange={(value) =>
                      setSettings({
                        ...settings,
                        security: { ...settings.security, passwordPolicy: value },
                      })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="basic">Basic (8+ characters)</SelectItem>
                      <SelectItem value="strong">Strong (8+ chars, numbers, symbols)</SelectItem>
                      <SelectItem value="very-strong">Very Strong (12+ chars, mixed case, numbers, symbols)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>IP Whitelist</Label>
                  <Textarea
                    value={settings.security.ipWhitelist}
                    onChange={(e) =>
                      setSettings({
                        ...settings,
                        security: { ...settings.security, ipWhitelist: e.target.value },
                      })
                    }
                    placeholder="Enter IP addresses (one per line)"
                    rows={3}
                  />
                  <p className="text-sm text-muted-foreground mt-1">Leave empty to allow all IPs</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]png:file="public/images/wlg-tree-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WLG_Logo-removebg-preview%20%281%29-ZZqVTY8L3zJhQLxpHyDap3qSK2dW8o.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Users, Building2, DollarSign, TrendingUp, Plus, Edit, Trash2, Eye, Search, Upload, Save } from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import ContentManagement from "./content-management"
import MediaManagement from "./media-management"
import ProductManagement from "./product-management"
import AdvancedSettings from "./advanced-settings"

export default function AdminDashboard() {
  const [activeTab, setActiveTab] = useState("overview")
  const [searchTerm, setSearchTerm] = useState("")

// Mock data
  const stats = [
    { title: "Total Users", value: "1,234", icon: Users, change: "+12%" },
    { title: "Active Listings", value: "856", icon: Building2, change: "+8%" },
    { title: "Revenue", value: "₹2,45,000", icon: DollarSign, change: "+15%" },
    { title: "Growth Rate", value: "23%", icon: TrendingUp, change: "+5%" },
  ]

const recentUsers = [
    { id: 1, name: "Rajesh Kumar", email: "rajesh@email.com", type: "Real Estate", status: "Active" },
    { id: 2, name: "Priya Sharma", email: "priya@email.com", type: "Tea Dealer", status: "Pending" },
    { id: 3, name: "Amit Singh", email: "amit@email.com", type: "Contractor", status: "Active" },
    { id: 4, name: "Sunita Devi", email: "sunita@email.com", type: "Scrap Dealer", status: "Active" },
  ]

const listings = [
    { id: 1, title: "Premium Office Space", category: "Real Estate", price: "₹50,000/month", status: "Active" },
    { id: 2, title: "Organic Black Pepper", category: "Spices", price: "₹800/kg", status: "Active" },
    { id: 3, title: "Construction Services", category: "Contractor", price: "₹2,00,000", status: "Pending" },
    { id: 4, title: "Metal Scrap Collection", category: "Scrap", price: "₹45/kg", status: "Active" },
  ]

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image
                src="/images/wlg-tree-logo.png"
                alt="Weather Land Groups Logo"
                width={50}
                height={50}
                className="rounded-full"
              />
              <div>
                <h1 className="text-xl font-bold text-gray-900">Admin Dashboard</h1>
                <p className="text-sm text-gray-600">Weather Land Groups</p>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <Badge className="bg-green-100 text-green-800">Admin Panel</Badge>
              <Link href="/">
                <Button variant="outline" className="border-green-600 text-green-600">
                  Back to Site
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-9 bg-white border border-gray-200">
            <TabsTrigger value="overview" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Overview
            </TabsTrigger>
            <TabsTrigger value="users" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Users
            </TabsTrigger>
            <TabsTrigger value="listings" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Listings
            </TabsTrigger>
            <TabsTrigger value="products" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Products
            </TabsTrigger>
            <TabsTrigger value="content" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Content
            </TabsTrigger>
            <TabsTrigger value="media" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Media
            </TabsTrigger>
            <TabsTrigger value="payments" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Payments
            </TabsTrigger>
            <TabsTrigger value="settings" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Settings
            </TabsTrigger>
            <TabsTrigger value="advanced" className="data-[state=active]:bg-green-600 data-[state=active]:text-white">
              Advanced
            </TabsTrigger>
          </TabsList>

<TabsContent value="overview" className="space-y-6">
            {/* Stats Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {stats.map((stat, index) => (
                <Card key={index} className="border-gray-200 bg-white">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-green-600 font-medium">{stat.title}</p>
                        <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                        <p className="text-sm text-green-500">{stat.change} from last month</p>
                      </div>
                      <div className="bg-green-100 p-3 rounded-full">
                        <stat.icon className="h-6 w-6 text-green-600" />
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

{/* Recent Activity */}
            <div className="grid md:grid-cols-2 gap-6">
              <Card className="border-gray-200 bg-white">
                <CardHeader>
                  <CardTitle className="text-gray-900">Recent Users</CardTitle>
                  <CardDescription>Latest user registrations</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {recentUsers.slice(0, 4).map((user) => (
                      <div key={user.id} className="flex items-center justify-between">
                        <div>
                          <p className="font-medium text-gray-900">{user.name}</p>
                          <p className="text-sm text-gray-600">{user.type}</p>
                        </div>
                        <Badge
                          variant={user.status === "Active" ? "default" : "secondary"}
                          className={user.status === "Active" ? "bg-green-600" : ""}
                        >
                          {user.status}
                        </Badge>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

<Card className="border-gray-200 bg-white">
                <CardHeader>
                  <CardTitle className="text-gray-900">Recent Listings</CardTitle>
                  <CardDescription>Latest business listings</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {listings.slice(0, 4).map((listing) => (
                      <div key={listing.id} className="flex items-center justify-between">
                        <div>
                          <p className="font-medium text-gray-900">{listing.title}</p>
                          <p className="text-sm text-gray-600">{listing.category}</p>
                        </div>
                        <div className="text-right">
                          <p className="font-medium text-gray-900">{listing.price}</p>
                          <Badge
                            variant={listing.status === "Active" ? "default" : "secondary"}
                            className={listing.status === "Active" ? "bg-green-600" : ""}
                          >
                            {listing.status}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

<TabsContent value="users" className="space-y-6">
            <Card className="border-gray-200 bg-white">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-gray-900">User Management</CardTitle>
                    <CardDescription>Manage registered users and their permissions</CardDescription>
                  </div>
                  <Button className="bg-green-600 hover:bg-green-700">
                    <Plus className="h-4 w-4 mr-2" />
                    Add User
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <div className="flex items-center space-x-4 mb-6">
                  <div className="relative flex-1">
                    <Search className="absolute left-3 top-3 h-4 w-4 text-gray-500" />
                    <Input
                      placeholder="Search users..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                      className="pl-10 border-gray-300"
                    />
                  </div>
                  <Select>
                    <SelectTrigger className="w-48 border-gray-300">
                      <SelectValue placeholder="Filter by type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Types</SelectItem>
                      <SelectItem value="real-estate">Real Estate</SelectItem>
                      <SelectItem value="scrap">Scrap Dealers</SelectItem>
                      <SelectItem value="spices">Spice Dealers</SelectItem>
                      <SelectItem value="contractor">Contractors</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Name</TableHead>
                      <TableHead>Email</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {recentUsers.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell className="font-medium">{user.name}</TableCell>
                        <TableCell>{user.email}</TableCell>
                        <TableCell>{user.type}</TableCell>
                        <TableCell>
                          <Badge
                            variant={user.status === "Active" ? "default" : "secondary"}
                            className={user.status === "Active" ? "bg-green-600" : ""}
                          >
                            {user.status}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex space-x-2">
                            <Button size="sm" variant="outline">
                              <Eye className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="outline">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="outline" className="text-red-600">
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="listings" className="space-y-6">
            <Card className="border-gray-200 bg-white">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <div>
                    <CardTitle className="text-gray-900">Listing Management</CardTitle>
                    <CardDescription>Manage business listings and categories</CardDescription>
                  </div>
                  <Button className="bg-green-600 hover:bg-green-700">
                    <Plus className="h-4 w-4 mr-2" />
                    Add Listing
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Title</TableHead>
                      <TableHead>Category</TableHead>
                      <TableHead>Price</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Actions</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {listings.map((listing) => (
                      <TableRow key={listing.id}>
                        <TableCell className="font-medium">{listing.title}</TableCell>
                        <TableCell>{listing.category}</TableCell>
                        <TableCell>{listing.price}</TableCell>
                        <TableCell>
                          <Badge
                            variant={listing.status === "Active" ? "default" : "secondary"}
                            className={listing.status === "Active" ? "bg-green-600" : ""}
                          >
                            {listing.status}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex space-x-2">
                            <Button size="sm" variant="outline">
                              <Eye className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="outline">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="outline" className="text-red-600">
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="payments" className="space-y-6">
            <Card className="border-gray-200 bg-white">
              <CardHeader>
                <CardTitle className="text-gray-900">Payment Management</CardTitle>
                <CardDescription>Monitor transactions and payment methods</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid md:grid-cols-3 gap-6 mb-6">
                  <Card className="border-gray-200">
                    <CardContent className="p-4 text-center">
                      <DollarSign className="h-8 w-8 text-green-600 mx-auto mb-2" />
                      <p className="text-2xl font-bold text-gray-900">₹2,45,000</p>
                      <p className="text-sm text-gray-600">Total Revenue</p>
                    </CardContent>
                  </Card>
                  <Card className="border-gray-200">
                    <CardContent className="p-4 text-center">
                      <TrendingUp className="h-8 w-8 text-green-600 mx-auto mb-2" />
                      <p className="text-2xl font-bold text-gray-900">156</p>
                      <p className="text-sm text-gray-600">Transactions</p>
                    </CardContent>
                  </Card>
                  <Card className="border-gray-200">
                    <CardContent className="p-4 text-center">
                      <Building2 className="h-8 w-8 text-green-600 mx-auto mb-2" />
                      <p className="text-2xl font-bold text-gray-900">98%</p>
                      <p className="text-sm text-gray-600">Success Rate</p>
                    </CardContent>
                  </Card>
                </div>
                <p className="text-gray-700">
                  Payment gateway integration and transaction monitoring will be displayed here.
                </p>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="settings" className="space-y-6">
            <div className="grid md:grid-cols-2 gap-6">
              <Card className="border-gray-200 bg-white">
                <CardHeader>
                  <CardTitle className="text-gray-900">Site Configuration</CardTitle>
                  <CardDescription>Basic site settings and information</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label className="text-gray-900">Site Name</Label>
                    <Input defaultValue="Weather Land Groups India Pvt Ltd" className="border-gray-300" />
                  </div>
                  <div>
                    <Label className="text-gray-900">Site Tagline</Label>
                    <Input defaultValue="Sustainable Business Solutions" className="border-gray-300" />
                  </div>
                  <div>
                    <Label className="text-gray-900">Site Description</Label>
                    <Textarea
                      defaultValue="Connecting businesses across Real Estate, Recycling, Spices, Beverages, and Construction with nature-conscious solutions and sustainable practices."
                      className="border-gray-300"
                      rows={3}
                    />
                  </div>
                  <div>
                    <Label className="text-gray-900">Site Logo</Label>
                    <div className="flex items-center space-x-4">
                      <Image
                        src="/images/wlg-tree-logo.png"
                        alt="Current Logo"
                        width={50}
                        height={50}
                        className="rounded-full border border-gray-300"
                      />
                      <Button variant="outline" className="border-green-600 text-green-600">
                        <Upload className="h-4 w-4 mr-2" />
                        Change Logo
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card className="border-gray-200 bg-white">
                <CardHeader>
                  <CardTitle className="text-gray-900">Contact Settings</CardTitle>
                  <CardDescription>Update contact information</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label className="text-gray-900">Primary Phone</Label>
                    <Input defaultValue="+91 98765 43210" className="border-gray-300" />
                  </div>
                  <div>
                    <Label className="text-gray-900">Primary Email</Label>
                    <Input defaultValue="info@weatherlandgroups.com" className="border-gray-300" />
                  </div>
                  <div>
                    <Label className="text-gray-900">Support Email</Label>
                    <Input defaultValue="support@weatherlandgroups.com" className="border-gray-300" />
                  </div>
                  <div>
                    <Label className="text-gray-900">Business Address</Label>
                    <Textarea
                      defaultValue="Weather Land Groups India Pvt Ltd
Mumbai, Maharashtra, India"
                      className="border-gray-300"
                      rows={3}
                    />
                  </div>
                </CardContent>
              </Card>

<Card className="border-gray-200 bg-white">
                <CardHeader>
                  <CardTitle className="text-gray-900">SEO Settings</CardTitle>
                  <CardDescription>Search engine optimization</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label className="text-gray-900">Meta Title</Label>
                    <Input
                      defaultValue="Weather Land Groups India Pvt Ltd - Sustainable Business Solutions"
                      className="border-gray-300"
                    />
                  </div>
                  <div>
                    <Label className="text-gray-900">Meta Description</Label>
                    <Textarea
                      defaultValue="Connecting businesses across Real Estate, Recycling, Spices, Beverages, and Construction with nature-conscious solutions."
                      className="border-gray-300"
                      rows={2}
                    />
                  </div>
                  <div>
                    <Label className="text-gray-900">Keywords</Label>
                    <Input
                      defaultValue="real estate, scrap dealers, spices, tea, coffee, construction, sustainable business"
                      className="border-gray-300"
                    />
                  </div>
                </CardContent>
              </Card>

<Card className="border-gray-200 bg-white">
                <CardHeader>
                  <CardTitle className="text-gray-900">Business Categories</CardTitle>
                  <CardDescription>Manage available business categories</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    {[
                      "Real Estate",
                      "Scrap Dealers",
                      "Black Pepper Dealers",
                      "Tea & Coffee Dealers",
                      "Building Contractors",
                    ].map((category, index) => (
                      <div key={index} className="flex items-center justify-between p-2 border border-gray-200 rounded">
                        <span className="text-gray-900">{category}</span>
                        <div className="flex space-x-2">
                          <Button size="sm" variant="outline" className="border-green-600 text-green-600">
                            <Edit className="h-3 w-3" />
                          </Button>
                          <Button size="sm" variant="outline" className="border-red-300 text-red-600">
                            <Trash2 className="h-3 w-3" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                  <Button className="w-full bg-green-600 hover:bg-green-700">
                    <Plus className="h-4 w-4 mr-2" />
                    Add New Category
                  </Button>
                </CardContent>
              </Card>
            </div>

<div className="flex justify-end">
              <Button className="bg-green-600 hover:bg-green-700">
                <Save className="h-4 w-4 mr-2" />
                Save All Settings
              </Button>
            </div>
          </TabsContent>

<TabsContent value="advanced" className="space-y-6">
            <AdvancedSettings />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/category/[slug]/page.tsx" isEdit="true" isMerged="true"
"use client"

export default function CategoryPage({ params }: { params: { slug: string } }) {
  const [searchTerm, setSearchTerm] = useState("")
  const [sortBy, setSortBy] = useState("relevance")
  const [priceRange, setPriceRange] = useState("all")

// Enhanced mock data with detailed fields for each category
  const getCategoryData = (slug: string) => {
    const categories: Record<string, any> = {
      "real-estate": {
        title: "Real Estate",
        description: "Premium properties and land development opportunities",
        listings: [
          {
            id: 1,
            title: "Premium Office Space in Bandra",
            description: "Modern office space with all amenities in prime location",
            price: "₹50,000",
            priceUnit: "per month",
            location: "Bandra West, Mumbai",
            rating: 4.8,
            image: "/images/real-estate.jpg",
            contact: "+91 98765 43210",
            email: "contact@property1.com",
            area: "2,500 sq ft",
            bedrooms: "N/A",
            bathrooms: "4",
            parking: "Yes",
            furnished: "Semi-furnished",
            amenities: ["AC", "Elevator", "Security", "Power Backup"],
            propertyType: "Commercial",
            availableFrom: "Immediate",
            deposit: "₹2,00,000",
          },
          {
            id: 2,
            title: "Luxury Apartment Complex",
            description: "3BHK apartments with garden view and modern amenities",
            price: "₹1,20,000",
            priceUnit: "per month",
            location: "Powai, Mumbai",
            rating: 4.9,
            image: "/images/real-estate-2.jpg",
            contact: "+91 98765 43211",
            email: "info@luxury.com",
            area: "1,800 sq ft",
            bedrooms: "3",
            bathrooms: "3",
            parking: "Yes",
            furnished: "Fully furnished",
            amenities: ["Swimming Pool", "Gym", "Garden", "Club House"],
            propertyType: "Residential",
            availableFrom: "15th Jan 2024",
            deposit: "₹3,60,000",
          },
        ],
      },
      "scrap-dealers": {
        title: "Scrap Dealers",
        description: "Eco-friendly scrap metal and recycling services",
        listings: [
          {
            id: 1,
            title: "Mumbai Metal Recyclers",
            description: "Best rates for all types of metal scrap with doorstep pickup",
            price: "₹45",
            priceUnit: "per kg",
            location: "Dharavi, Mumbai",
            rating: 4.6,
            image: "/images/scrap-dealers.jpg",
            contact: "+91 98765 43212",
            email: "mumbai@metalrecycle.com",
            scrapTypes: ["Iron", "Steel", "Aluminum", "Copper", "Brass"],
            minQuantity: "50 kg",
            pickupService: "Yes",
            paymentModes: ["Cash", "Bank Transfer", "UPI"],
            workingHours: "9 AM - 6 PM",
            certifications: ["ISO 14001", "Pollution Control Board"],
            serviceArea: "Mumbai, Thane, Navi Mumbai",
          },
          {
            id: 2,
            title: "Green Scrap Solutions",
            description: "Eco-friendly metal recycling and waste management services",
            price: "₹50",
            priceUnit: "per kg",
            location: "Andheri, Mumbai",
            rating: 4.7,
            image: "/images/scrap-metal.jpg",
            contact: "+91 98765 43219",
            email: "green@scrapsolutions.com",
            scrapTypes: ["Electronic Waste", "Plastic", "Paper", "Metal"],
            minQuantity: "25 kg",
            pickupService: "Yes",
            paymentModes: ["Cash", "Cheque", "Online Transfer"],
            workingHours: "8 AM - 7 PM",
            certifications: ["Green Certification", "E-Waste Authorization"],
            serviceArea: "Western Mumbai",
          },
        ],
      },
      "black-pepper-dealers": {
        title: "Black Pepper Dealers",
        description: "Premium quality spices and black pepper suppliers",
        listings: [
          {
            id: 1,
            title: "Kerala Spice Traders",
            description: "Authentic Kerala black pepper, direct from farms",
            price: "₹800",
            priceUnit: "per kg",
            location: "Kochi, Kerala",
            rating: 4.7,
            image: "/images/black-pepper.jpg",
            contact: "+91 98765 43213",
            email: "kerala@spicetraders.com",
            origin: "Wayanad, Kerala",
            quality: "Premium Grade A",
            packaging: "Vacuum Sealed",
            minOrder: "10 kg",
            shelfLife: "24 months",
            certifications: ["Organic", "FSSAI", "Spices Board"],
            varieties: ["Malabar Black Pepper", "Tellicherry", "Wayanad Special"],
            moisture: "12% max",
            piperine: "5.5% min",
          },
          {
            id: 2,
            title: "Malabar Pepper Co.",
            description: "Organic black pepper with international certifications",
            price: "₹950",
            priceUnit: "per kg",
            location: "Kozhikode, Kerala",
            rating: 4.8,
            image: "/images/pepper-spices.jpg",
            contact: "+91 98765 43214",
            email: "info@malabarpepperco.com",
            origin: "Malabar Coast, Kerala",
            quality: "Export Quality",
            packaging: "Food Grade Bags",
            minOrder: "5 kg",
            shelfLife: "36 months",
            certifications: ["Organic", "Fair Trade", "USDA Organic"],
            varieties: ["Black Pepper Whole", "Cracked Pepper", "Pepper Powder"],
            moisture: "10% max",
            piperine: "6% min",
          },
        ],
      },
      "tea-coffee-dealers": {
        title: "Tea & Coffee Dealers",
        description: "Fresh tea leaves and premium coffee beans",
        listings: [
          {
            id: 1,
            title: "Darjeeling Tea Gardens",
            description: "Premium Darjeeling tea direct from gardens",
            price: "₹1,200",
            priceUnit: "per kg",
            location: "Darjeeling, West Bengal",
            rating: 4.9,
            image: "/images/tea-coffee.jpg",
            contact: "+91 98765 43215",
            email: "sales@darjeelingtea.com",
            teaType: "Black Tea",
            grade: "FTGFOP1",
            harvest: "Second Flush 2024",
            estate: "Makaibari Tea Estate",
            altitude: "6,000 feet",
            processing: "Orthodox",
            packaging: "Aluminum Foil Lined",
            minOrder: "2 kg",
            certifications: ["Organic", "Fair Trade", "Darjeeling Logo"],
            brewingTime: "3-5 minutes",
          },
          {
            id: 2,
            title: "Coorg Coffee Estates",
            description: "Arabica coffee beans from Coorg plantations",
            price: "₹1,500",
            priceUnit: "per kg",
            location: "Coorg, Karnataka",
            rating: 4.8,
            image: "/images/tea-plantation.jpg",
            contact: "+91 98765 43216",
            email: "info@coorgcoffee.com",
            coffeeType: "Arabica",
            roastLevel: "Medium Roast",
            processing: "Washed",
            altitude: "4,000-5,000 feet",
            harvest: "December 2023",
            cupping: "85+ Score",
            packaging: "Valve Bags",
            minOrder: "5 kg",
            certifications: ["Rainforest Alliance", "UTZ", "Organic"],
            grindOptions: ["Whole Bean", "Coarse", "Medium", "Fine"],
          },
        ],
      },
      "building-contractors": {
        title: "Building Contractors",
        description: "Professional construction and building services",
        listings: [
          {
            id: 1,
            title: "Mumbai Construction Co.",
            description: "Complete building construction services with modern techniques",
            price: "₹2,00,000",
            priceUnit: "per project",
            location: "Mumbai, Maharashtra",
            rating: 4.7,
            image: "/images/building-contractors.jpg",
            contact: "+91 98765 43217",
            email: "projects@mumbaiconst.com",
            services: ["Residential", "Commercial", "Industrial", "Renovation"],
            experience: "15 years",
            teamSize: "50+ workers",
            licenses: ["PWD License", "Municipal Corporation", "Labor License"],
            specialization: ["High-rise Buildings", "Luxury Homes", "Office Complexes"],
            materials: ["RCC", "Steel Structure", "Precast"],
            warranty: "5 years structural",
            timeline: "As per project scope",
            paymentTerms: "30% advance, 40% during work, 30% completion",
          },
          {
            id: 2,
            title: "Green Build Solutions",
            description: "Eco-friendly construction with sustainable materials",
            price: "₹2,50,000",
            priceUnit: "per project",
            location: "Pune, Maharashtra",
            rating: 4.9,
            image: "/images/construction-site.jpg",
            contact: "+91 98765 43218",
            email: "info@greenbuild.com",
            services: ["Green Buildings", "Solar Installation", "Rainwater Harvesting"],
            experience: "12 years",
            teamSize: "35+ workers",
            licenses: ["Green Building Certification", "Solar Installation License"],
            specialization: ["LEED Buildings", "Net Zero Homes", "Sustainable Design"],
            materials: ["Recycled Materials", "Bamboo", "Solar Panels"],
            warranty: "7 years structural + 5 years green systems",
            timeline: "20% longer for sustainable practices",
            paymentTerms: "25% advance, 50% milestones, 25% completion",
          },
        ],
      },
    }

return (
      categories[slug] || {
        title: "Category Not Found",
        description: "The requested category could not be found",
        listings: [],
      }
    )
  }

const categoryData = getCategoryData(params.slug)

const renderListingDetails = (listing: any) => {
    switch (params.slug) {
      case "real-estate":
        return (
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium text-gray-700">Area:</span> {listing.area}
            </div>
            <div>
              <span className="font-medium text-gray-700">Bedrooms:</span> {listing.bedrooms}
            </div>
            <div>
              <span className="font-medium text-gray-700">Bathrooms:</span> {listing.bathrooms}
            </div>
            <div>
              <span className="font-medium text-gray-700">Parking:</span> {listing.parking}
            </div>
            <div>
              <span className="font-medium text-gray-700">Furnished:</span> {listing.furnished}
            </div>
            <div>
              <span className="font-medium text-gray-700">Type:</span> {listing.propertyType}
            </div>
            <div className="col-span-2">
              <span className="font-medium text-gray-700">Amenities:</span> {listing.amenities.join(", ")}
            </div>
          </div>
        )
      case "scrap-dealers":
        return (
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium text-gray-700">Min Quantity:</span> {listing.minQuantity}
            </div>
            <div>
              <span className="font-medium text-gray-700">Pickup:</span> {listing.pickupService}
            </div>
            <div>
              <span className="font-medium text-gray-700">Working Hours:</span> {listing.workingHours}
            </div>
            <div>
              <span className="font-medium text-gray-700">Service Area:</span> {listing.serviceArea}
            </div>
            <div className="col-span-2">
              <span className="font-medium text-gray-700">Scrap Types:</span> {listing.scrapTypes.join(", ")}
            </div>
          </div>
        )
      case "black-pepper-dealers":
        return (
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium text-gray-700">Origin:</span> {listing.origin}
            </div>
            <div>
              <span className="font-medium text-gray-700">Quality:</span> {listing.quality}
            </div>
            <div>
              <span className="font-medium text-gray-700">Min Order:</span> {listing.minOrder}
            </div>
            <div>
              <span className="font-medium text-gray-700">Shelf Life:</span> {listing.shelfLife}
            </div>
            <div>
              <span className="font-medium text-gray-700">Moisture:</span> {listing.moisture}
            </div>
            <div>
              <span className="font-medium text-gray-700">Piperine:</span> {listing.piperine}
            </div>
          </div>
        )
      case "tea-coffee-dealers":
        return (
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium text-gray-700">Type:</span> {listing.teaType || listing.coffeeType}
            </div>
            <div>
              <span className="font-medium text-gray-700">Grade/Roast:</span> {listing.grade || listing.roastLevel}
            </div>
            <div>
              <span className="font-medium text-gray-700">Origin:</span> {listing.estate || listing.altitude}
            </div>
            <div>
              <span className="font-medium text-gray-700">Min Order:</span> {listing.minOrder}
            </div>
            <div>
              <span className="font-medium text-gray-700">Processing:</span> {listing.processing}
            </div>
            <div>
              <span className="font-medium text-gray-700">Harvest:</span> {listing.harvest}
            </div>
          </div>
        )
      case "building-contractors":
        return (
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div>
              <span className="font-medium text-gray-700">Experience:</span> {listing.experience}
            </div>
            <div>
              <span className="font-medium text-gray-700">Team Size:</span> {listing.teamSize}
            </div>
            <div>
              <span className="font-medium text-gray-700">Warranty:</span> {listing.warranty}
            </div>
            <div>
              <span className="font-medium text-gray-700">Timeline:</span> {listing.timeline}
            </div>
            <div className="col-span-2">
              <span className="font-medium text-gray-700">Services:</span> {listing.services.join(", ")}
            </div>
            <div className="col-span-2">
              <span className="font-medium text-gray-700">Specialization:</span> {listing.specialization.join(", ")}
            </div>
          </div>
        )
      default:
        return null
    }
  }

return (
    <div className="min-h-screen cream-bg">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image
                src="/images/wlg-tree-logo.png"
                alt="Weather Land Groups Logo"
                width={50}
                height={50}
                className="rounded-full"
              />
              <div>
                <h1 className="text-xl font-bold text-gray-900">{categoryData.title}</h1>
                <p className="text-sm text-gray-600">Weather Land Groups</p>
              </div>
            </div>
            <Link href="/">
              <Button variant="outline" className="border-green-600 text-green-600">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        {/* Category Header */}
        <div className="text-center mb-8">
          <h2 className="text-4xl font-bold text-gray-900 mb-4">{categoryData.title}</h2>
          <p className="text-xl text-gray-700 max-w-2xl mx-auto">{categoryData.description}</p>
          <Badge className="mt-4 bg-green-100 text-green-800">{categoryData.listings.length} Active Listings</Badge>
        </div>

{/* Search and Filters */}
        <Card className="mb-8 border-gray-200 cream-card">
          <CardContent className="p-6">
            <div className="grid md:grid-cols-4 gap-4">
              <div className="relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-green-500" />
                <Input
                  placeholder="Search listings..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 border-gray-300"
                />
              </div>
              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="border-gray-300">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="relevance">Relevance</SelectItem>
                  <SelectItem value="price-low">Price: Low to High</SelectItem>
                  <SelectItem value="price-high">Price: High to Low</SelectItem>
                  <SelectItem value="rating">Highest Rated</SelectItem>
                  <SelectItem value="newest">Newest First</SelectItem>
                </SelectContent>
              </Select>
              <Select value={priceRange} onValueChange={setPriceRange}>
                <SelectTrigger className="border-gray-300">
                  <SelectValue placeholder="Price Range" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Prices</SelectItem>
                  <SelectItem value="0-1000">₹0 - ₹1,000</SelectItem>
                  <SelectItem value="1000-5000">₹1,000 - ₹5,000</SelectItem>
                  <SelectItem value="5000-10000">₹5,000 - ₹10,000</SelectItem>
                  <SelectItem value="10000+">₹10,000+</SelectItem>
                </SelectContent>
              </Select>
              <Button className="bg-green-600 hover:bg-green-700">
                <Filter className="h-4 w-4 mr-2" />
                Apply Filters
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Listings Grid */}
        <div className="grid md:grid-cols-1 lg:grid-cols-2 gap-8">
          {categoryData.listings.map((listing: any) => (
            <Card
              key={listing.id}
              className="group hover:shadow-xl transition-all duration-300 border-gray-200 hover:border-green-400 cream-card"
            >
              <CardHeader className="pb-4">
                <div className="relative h-64 mb-4 rounded-lg overflow-hidden">
                  <Image
                    src={listing.image || "/placeholder.svg"}
                    alt={listing.title}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute top-4 right-4 flex space-x-2">
                    <Button size="sm" variant="secondary" className="bg-white/80 hover:bg-white">
                      <Heart className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="secondary" className="bg-white/80 hover:bg-white">
                      <Share2 className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="secondary" className="bg-white/80 hover:bg-white">
                      <Edit className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="absolute bottom-4 left-4">
                    <Badge className="bg-green-600 text-white">
                      {listing.price} {listing.priceUnit}
                    </Badge>
                  </div>
                </div>
                <CardTitle className="text-gray-900 group-hover:text-green-600 transition-colors">
                  {listing.title}
                </CardTitle>
                <CardDescription className="text-gray-700">{listing.description}</CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center space-x-2">
                  <MapPin className="h-4 w-4 text-green-600" />
                  <span className="text-sm text-gray-700">{listing.location}</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Star className="h-4 w-4 text-yellow-500 fill-current" />
                  <span className="text-sm font-medium text-gray-900">{listing.rating}</span>
                  <span className="text-sm text-gray-600">(4.8/5)</span>
                </div>

{/* Category-specific details */}
                <div className="bg-gray-50 p-4 rounded-lg">{renderListingDetails(listing)}</div>

<div className="flex items-center justify-between pt-4">
                  <div className="flex space-x-2">
                    <Button size="sm" variant="outline" className="border-green-600 text-green-600">
                      <Phone className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="outline" className="border-green-600 text-green-600">
                      <Mail className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="flex space-x-2">
                    <Button size="sm" className="bg-green-600 hover:bg-green-700">
                      View Details
                    </Button>
                    <Link href="/payment">
                      <Button size="sm" variant="outline" className="border-green-600 text-green-600">
                        Book Now
                      </Button>
                    </Link>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Load More */}
        <div className="text-center mt-12">
          <Button variant="outline" className="border-green-600 text-green-600 hover:bg-green-50">
            Load More Listings
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/page.tsx" isEdit="true" isMerged="true"
"use client"

export default function AuthPage() {
  const [phoneNumber, setPhoneNumber] = useState("")
  const [otp, setOtp] = useState("")
  const [showOtp, setShowOtp] = useState(false)
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [userType, setUserType] = useState("user")
  const [isRegister, setIsRegister] = useState(false)
  const [fullName, setFullName] = useState("")
  const [businessCategory, setBusinessCategory] = useState("")

const handleSendOtp = () => {
    if (phoneNumber.length === 10) {
      setShowOtp(true)
      alert("OTP sent to your mobile number!")
    }
  }

const handleVerifyOtp = () => {
    if (otp.length === 6) {
      if (userType === "admin") {
        window.location.href = "/admin"
      } else {
        alert("Login successful!")
        window.location.href = "/"
      }
    }
  }

const handleGmailLogin = () => {
    alert("Redirecting to Gmail login...")
    // In real implementation, this would redirect to Google OAuth
  }

const handleEmailLogin = () => {
    if (email && password) {
      if (userType === "admin") {
        window.location.href = "/admin"
      } else {
        alert("Login successful!")
        window.location.href = "/"
      }
    }
  }

const handleRegister = () => {
    if (fullName && email && password && businessCategory) {
      alert("Registration successful! Please login.")
      setIsRegister(false)
    }
  }

return (
    <div className="min-h-screen cream-bg">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 rounded-full flex items-center justify-center">
                <Image
                  src="/images/wlg-tree-logo.png"
                  alt="Weather Land Groups Logo"
                  width={40}
                  height={40}
                  className="rounded-full"
                />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">Weather Land Groups</h1>
                <p className="text-sm text-gray-600">India Pvt Ltd</p>
              </div>
            </div>
            <Link href="/">
              <Button variant="outline" className="border-gray-300 text-gray-700 hover:bg-gray-50">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
      </header>

<div className="flex items-center justify-center min-h-[calc(100vh-80px)] p-4">
        <div className="w-full max-w-md">
          <Card className="bg-white shadow-lg">
            <CardHeader className="text-center">
              <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Image
                  src="/images/wlg-tree-logo.png"
                  alt="Weather Land Groups Logo"
                  width={64}
                  height={64}
                  className="rounded-full"
                />
              </div>
              <CardTitle className="text-2xl text-gray-900">{isRegister ? "Create Account" : "Welcome Back"}</CardTitle>
              <CardDescription className="text-gray-600">
                {isRegister ? "Join Weather Land Groups today" : "Choose your preferred login method"}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {!isRegister ? (
                <Tabs defaultValue="mobile" className="space-y-4">
                  <TabsList className="grid w-full grid-cols-2 bg-gray-100">
                    <TabsTrigger
                      value="mobile"
                      className="data-[state=active]:bg-green-600 data-[state=active]:text-white"
                    >
                      <Phone className="h-4 w-4 mr-2" />
                      Mobile
                    </TabsTrigger>
                    <TabsTrigger
                      value="email"
                      className="data-[state=active]:bg-green-600 data-[state=active]:text-white"
                    >
                      <Mail className="h-4 w-4 mr-2" />
                      Email
                    </TabsTrigger>
                  </TabsList>

{/* User Type Selection */}
                  <div className="space-y-2">
                    <Label className="text-gray-900">Login as:</Label>
                    <div className="flex space-x-2">
                      <Button
                        variant={userType === "user" ? "default" : "outline"}
                        size="sm"
                        onClick={() => setUserType("user")}
                        className={
                          userType === "user" ? "bg-green-600 hover:bg-green-700" : "border-gray-300 text-gray-700"
                        }
                      >
                        <User className="h-4 w-4 mr-1" />
                        User
                      </Button>
                      <Button
                        variant={userType === "admin" ? "default" : "outline"}
                        size="sm"
                        onClick={() => setUserType("admin")}
                        className={
                          userType === "admin" ? "bg-green-600 hover:bg-green-700" : "border-gray-300 text-gray-700"
                        }
                      >
                        <Building className="h-4 w-4 mr-1" />
                        Admin
                      </Button>
                    </div>
                  </div>

<TabsContent value="mobile" className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="phone" className="text-gray-900">
                        Mobile Number
                      </Label>
                      <div className="flex space-x-2">
                        <Input
                          id="phone"
                          type="tel"
                          placeholder="Enter 10-digit mobile number"
                          value={phoneNumber}
                          onChange={(e) => setPhoneNumber(e.target.value)}
                          className="border-gray-300 focus:border-green-500"
                          maxLength={10}
                        />
                        <Button
                          onClick={handleSendOtp}
                          disabled={phoneNumber.length !== 10}
                          className="bg-green-600 hover:bg-green-700"
                        >
                          Send OTP
                        </Button>
                      </div>
                    </div>

{showOtp && (
                      <div className="space-y-2">
                        <Label htmlFor="otp" className="text-gray-900">
                          Enter OTP
                        </Label>
                        <div className="flex space-x-2">
                          <Input
                            id="otp"
                            type="text"
                            placeholder="6-digit OTP"
                            value={otp}
                            onChange={(e) => setOtp(e.target.value)}
                            className="border-gray-300 focus:border-green-500"
                            maxLength={6}
                          />
                          <Button
                            onClick={handleVerifyOtp}
                            disabled={otp.length !== 6}
                            className="bg-green-600 hover:bg-green-700"
                          >
                            Verify
                          </Button>
                        </div>
                        <p className="text-sm text-gray-600">OTP sent to +91 {phoneNumber}</p>
                      </div>
                    )}
                  </TabsContent>

<TabsContent value="email" className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="email" className="text-gray-900">
                        Email Address
                      </Label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="Enter your email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        className="border-gray-300 focus:border-green-500"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="password" className="text-gray-900">
                        Password
                      </Label>
                      <div className="relative">
                        <Input
                          id="password"
                          type={showPassword ? "text" : "password"}
                          placeholder="Enter your password"
                          value={password}
                          onChange={(e) => setPassword(e.target.value)}
                          className="border-gray-300 focus:border-green-500 pr-10"
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                          onClick={() => setShowPassword(!showPassword)}
                        >
                          {showPassword ? (
                            <EyeOff className="h-4 w-4 text-gray-400" />
                          ) : (
                            <Eye className="h-4 w-4 text-gray-400" />
                          )}
                        </Button>
                      </div>
                    </div>
                    <Button onClick={handleEmailLogin} className="w-full bg-green-600 hover:bg-green-700">
                      Sign In
                    </Button>
                  </TabsContent>

{/* Gmail Login */}
                  <div className="relative">
                    <div className="absolute inset-0 flex items-center">
                      <span className="w-full border-t border-gray-200" />
                    </div>
                    <div className="relative flex justify-center text-xs uppercase">
                      <span className="bg-white px-2 text-gray-600">Or continue with</span>
                    </div>
                  </div>

<Button
                    variant="outline"
                    className="w-full border-gray-300 text-gray-700 hover:bg-gray-50"
                    onClick={handleGmailLogin}
                  >
                    <Mail className="h-4 w-4 mr-2" />
                    Continue with Gmail
                  </Button>

{/* Security Badge */}
                  <div className="flex items-center justify-center space-x-2 pt-4">
                    <Shield className="h-4 w-4 text-green-600" />
                    <Badge variant="secondary" className="bg-green-100 text-green-800">
                      Secure Login
                    </Badge>
                  </div>
                </Tabs>
              ) : (
                /* Registration Form */
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="fullName" className="text-gray-900">
                      Full Name
                    </Label>
                    <Input
                      id="fullName"
                      type="text"
                      placeholder="Enter your full name"
                      value={fullName}
                      onChange={(e) => setFullName(e.target.value)}
                      className="border-gray-300 focus:border-green-500"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="regEmail" className="text-gray-900">
                      Email Address
                    </Label>
                    <Input
                      id="regEmail"
                      type="email"
                      placeholder="Enter your email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="border-gray-300 focus:border-green-500"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="regPassword" className="text-gray-900">
                      Password
                    </Label>
                    <div className="relative">
                      <Input
                        id="regPassword"
                        type={showPassword ? "text" : "password"}
                        placeholder="Create a password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        className="border-gray-300 focus:border-green-500 pr-10"
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
                        onClick={() => setShowPassword(!showPassword)}
                      >
                        {showPassword ? (
                          <EyeOff className="h-4 w-4 text-gray-400" />
                        ) : (
                          <Eye className="h-4 w-4 text-gray-400" />
                        )}
                      </Button>
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="businessCategory" className="text-gray-900">
                      Business Category
                    </Label>
                    <Select value={businessCategory} onValueChange={setBusinessCategory}>
                      <SelectTrigger className="border-gray-300 focus:border-green-500">
                        <SelectValue placeholder="Select your business category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="real-estate">Real Estate</SelectItem>
                        <SelectItem value="scrap-dealers">Scrap Dealers</SelectItem>
                        <SelectItem value="black-pepper">Black Pepper Dealers</SelectItem>
                        <SelectItem value="tea-coffee">Tea & Coffee Dealers</SelectItem>
                        <SelectItem value="building-contractors">Building Contractors</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<Button onClick={handleRegister} className="w-full bg-green-600 hover:bg-green-700">
                    Create Account
                  </Button>
                </div>
              )}

<div className="mt-6 text-center">
                <p className="text-sm text-gray-700">
                  {isRegister ? "Already have an account?" : "Don't have an account?"}{" "}
                  <button
                    onClick={() => setIsRegister(!isRegister)}
                    className="text-green-600 hover:text-green-800 font-medium"
                  >
                    {isRegister ? "Sign in here" : "Register here"}
                  </button>
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/payment/page.tsx" isEdit="true" isMerged="true"
"use client"

export default function PaymentPage() {
  const [paymentMethod, setPaymentMethod] = useState("card")
  const [selectedPlan, setSelectedPlan] = useState("premium")

const plans = [
    {
      id: "basic",
      name: "Basic Plan",
      price: "₹999",
      period: "/month",
      features: ["5 Listings", "Basic Support", "Standard Analytics", "Email Support"],
      popular: false,
      description: "Perfect for small businesses getting started",
    },
    {
      id: "premium",
      name: "Premium Plan",
      price: "₹1,999",
      period: "/month",
      features: [
        "20 Listings",
        "Priority Support",
        "Advanced Analytics",
        "Featured Listings",
        "Phone Support",
        "Custom Branding",
      ],
      popular: true,
      description: "Most popular choice for growing businesses",
    },
    {
      id: "enterprise",
      name: "Enterprise Plan",
      price: "₹4,999",
      period: "/month",
      features: [
        "Unlimited Listings",
        "24/7 Support",
        "Custom Analytics",
        "API Access",
        "White Label",
        "Dedicated Manager",
        "Custom Integration",
      ],
      popular: false,
      description: "Complete solution for large enterprises",
    },
  ]

const handlePayment = () => {
    alert("Payment processing... This would integrate with Razorpay/Stripe payment gateway.")
    // In real implementation, this would process the payment
  }

return (
    <div className="min-h-screen cream-bg">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <Image
                src="/images/wlg-tree-logo.png"
                alt="Weather Land Groups Logo"
                width={50}
                height={50}
                className="rounded-full"
              />
              <div>
                <h1 className="text-xl font-bold text-gray-900">Payment Gateway</h1>
                <p className="text-sm text-gray-600">Weather Land Groups</p>
              </div>
            </div>
            <Link href="/">
              <Button variant="outline" className="border-green-600 text-green-600">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Home
              </Button>
            </Link>
          </div>
        </div>
      </header>

<div className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Choose Your Business Plan</h2>
            <p className="text-gray-700 text-lg">Select the perfect plan for your business needs and growth</p>
          </div>

<div className="grid lg:grid-cols-3 gap-8 mb-12">
            {/* Plan Selection */}
            <div className="lg:col-span-2">
              <div className="grid md:grid-cols-3 gap-6 mb-8">
                {plans.map((plan) => (
                  <Card
                    key={plan.id}
                    className={`relative cursor-pointer transition-all duration-300 cream-card ${
                      selectedPlan === plan.id
                        ? "border-green-500 shadow-lg bg-green-50"
                        : "border-gray-200 hover:border-green-300"
                    }`}
                    onClick={() => setSelectedPlan(plan.id)}
                  >
                    {plan.popular && (
                      <Badge className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-600">
                        <Star className="h-3 w-3 mr-1" />
                        Most Popular
                      </Badge>
                    )}
                    <CardHeader className="text-center">
                      <CardTitle className="text-gray-900">{plan.name}</CardTitle>
                      <div className="text-3xl font-bold text-green-600">
                        {plan.price}
                        <span className="text-sm text-gray-500">{plan.period}</span>
                      </div>
                      <p className="text-sm text-gray-600">{plan.description}</p>
                    </CardHeader>
                    <CardContent>
                      <ul className="space-y-2">
                        {plan.features.map((feature, index) => (
                          <li key={index} className="flex items-center space-x-2">
                            <CheckCircle className="h-4 w-4 text-green-600" />
                            <span className="text-sm text-gray-700">{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </CardContent>
                  </Card>
                ))}
              </div>

{/* Payment Methods */}
              <Card className="border-gray-200 cream-card">
                <CardHeader>
                  <CardTitle className="text-gray-900">Payment Method</CardTitle>
                  <CardDescription>Choose your preferred payment option</CardDescription>
                </CardHeader>
                <CardContent>
                  <RadioGroup value={paymentMethod} onValueChange={setPaymentMethod} className="space-y-4">
                    <div className="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg">
                      <RadioGroupItem value="card" id="card" />
                      <CreditCard className="h-5 w-5 text-green-600" />
                      <Label htmlFor="card" className="flex-1 cursor-pointer">
                        <div>
                          <p className="font-medium text-gray-900">Credit/Debit Card</p>
                          <p className="text-sm text-gray-600">Visa, Mastercard, RuPay</p>
                        </div>
                      </Label>
                    </div>

<div className="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg">
                      <RadioGroupItem value="upi" id="upi" />
                      <Smartphone className="h-5 w-5 text-green-600" />
                      <Label htmlFor="upi" className="flex-1 cursor-pointer">
                        <div>
                          <p className="font-medium text-gray-900">UPI Payment</p>
                          <p className="text-sm text-gray-600">PhonePe, Google Pay, Paytm</p>
                        </div>
                      </Label>
                    </div>

<div className="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg">
                      <RadioGroupItem value="netbanking" id="netbanking" />
                      <Building className="h-5 w-5 text-green-600" />
                      <Label htmlFor="netbanking" className="flex-1 cursor-pointer">
                        <div>
                          <p className="font-medium text-gray-900">Net Banking</p>
                          <p className="text-sm text-gray-600">All major banks supported</p>
                        </div>
                      </Label>
                    </div>
                  </RadioGroup>

{paymentMethod === "card" && (
                    <div className="mt-6 space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="cardNumber" className="text-gray-900">
                            Card Number
                          </Label>
                          <Input id="cardNumber" placeholder="1234 5678 9012 3456" className="border-gray-300" />
                        </div>
                        <div>
                          <Label htmlFor="cardName" className="text-gray-900">
                            Cardholder Name
                          </Label>
                          <Input id="cardName" placeholder="John Doe" className="border-gray-300" />
                        </div>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="expiry" className="text-gray-900">
                            Expiry Date
                          </Label>
                          <Input id="expiry" placeholder="MM/YY" className="border-gray-300" />
                        </div>
                        <div>
                          <Label htmlFor="cvv" className="text-gray-900">
                            CVV
                          </Label>
                          <Input id="cvv" placeholder="123" className="border-gray-300" />
                        </div>
                      </div>
                    </div>
                  )}

{paymentMethod === "upi" && (
                    <div className="mt-6">
                      <Label htmlFor="upiId" className="text-gray-900">
                        UPI ID
                      </Label>
                      <Input id="upiId" placeholder="yourname@paytm" className="border-gray-300" />
                    </div>
                  )}

{paymentMethod === "netbanking" && (
                    <div className="mt-6">
                      <Label htmlFor="bank" className="text-gray-900">
                        Select Bank
                      </Label>
                      <Select>
                        <SelectTrigger className="border-gray-300">
                          <SelectValue placeholder="Choose your bank" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="sbi">State Bank of India</SelectItem>
                          <SelectItem value="hdfc">HDFC Bank</SelectItem>
                          <SelectItem value="icici">ICICI Bank</SelectItem>
                          <SelectItem value="axis">Axis Bank</SelectItem>
                          <SelectItem value="pnb">Punjab National Bank</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>

{/* Order Summary */}
            <div className="lg:col-span-1">
              <Card className="border-gray-200 cream-card sticky top-4">
                <CardHeader>
                  <CardTitle className="text-gray-900">Order Summary</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex justify-between">
                    <span className="text-gray-700">Plan</span>
                    <span className="font-medium text-gray-900">{plans.find((p) => p.id === selectedPlan)?.name}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-700">Price</span>
                    <span className="font-medium text-gray-900">
                      {plans.find((p) => p.id === selectedPlan)?.price}/month
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-700">GST (18%)</span>
                    <span className="font-medium text-gray-900">
                      ₹
                      {Math.round(
                        Number.parseInt(plans.find((p) => p.id === selectedPlan)?.price.replace("₹", "") || "0") * 0.18,
                      )}
                    </span>
                  </div>
                  <Separator className="bg-gray-200" />
                  <div className="flex justify-between text-lg font-bold">
                    <span className="text-gray-900">Total</span>
                    <span className="text-green-600">
                      ₹
                      {Math.round(
                        Number.parseInt(plans.find((p) => p.id === selectedPlan)?.price.replace("₹", "") || "0") * 1.18,
                      )}
                    </span>
                  </div>

<Button className="w-full bg-green-600 hover:bg-green-700 text-lg py-6" onClick={handlePayment}>
                    Complete Payment
                  </Button>

<div className="flex items-center justify-center space-x-2 text-sm text-green-600">
                    <Shield className="h-4 w-4" />
                    <span>Secure payment powered by Razorpay</span>
                  </div>

<div className="text-xs text-gray-600 text-center">
                    By proceeding, you agree to our Terms of Service and Privacy Policy
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 45 23% 97%;
    --foreground: 222.2 84% 4.9%;
    --card: 45 23% 97%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 45 23% 97%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 158 64% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 23% 95%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 45 23% 95%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 45 23% 95%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 158 64% 52%;
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    background-color: #faf8f5; /* Light cream background */
  }
}

/* Search container styling */
.search-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Service card styling */
.service-card {
  transition: all 0.3s ease;
  background-color: white;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

/* Button styles to match Nanga Market */
.btn-primary {
  background: #10b981;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: #059669;
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Logo circle styling */
.logo-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #92400e, #78350f);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 4px solid rgba(255, 215, 0, 0.3);
}

@media (min-width: 768px) {
  .logo-circle {
    width: 120px;
    height: 120px;
  }
}

/* Service icon circles */
.service-icon-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: all 0.3s ease;
}

.service-icon-circle:hover {
  transform: scale(1.1);
}

/* Light cream backgrounds for cards */
.cream-bg {
  background-color: #faf8f5;
}

.cream-card {
  background-color: white;
  border: 1px solid #f0ede6;
}

/* Admin panel styling */
.glass-effect {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gradient-text {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-primary-brown {
  background: #92400e;
  color: #fbbf24;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary-brown:hover {
  background: #78350f;
  transform: translateY(-1px);
}

.btn-secondary-brown {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-secondary-brown:hover {
  background: rgba(251, 191, 36, 0.3);
  border-color: rgba(251, 191, 36, 0.5);
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

.search-container {
    margin-left: 1rem;
    margin-right: 1rem;
  }

.service-icon-circle {
    margin-bottom: 12px;
  }
}

/* Ensure proper mobile spacing */
@media (max-width: 640px) {
  .hero-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

.section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Recycle, Coffee, Hammer, Building, Phone, Mail, MapPin, User, HomeIcon } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function HomePage() {
  const services = [
    {
      title: "Real Estate",
      icon: Building,
      description: "Houses, Rentals, Commercial",
      color: "bg-pink-100",
      iconColor: "text-pink-600",
      slug: "real-estate",
    },
    {
      title: "Scrap Services",
      icon: Recycle,
      description: "Metal, Plastic, Electronics",
      color: "bg-yellow-100",
      iconColor: "text-yellow-600",
      slug: "scrap-dealers",
    },
    {
      title: "Black Pepper",
      icon: Coffee,
      description: "Premium Quality Spices",
      color: "bg-green-100",
      iconColor: "text-green-600",
      slug: "black-pepper-dealers",
    },
    {
      title: "Tea & Coffee",
      icon: Coffee,
      description: "Fresh Tea & Coffee Beans",
      color: "bg-blue-100",
      iconColor: "text-blue-600",
      slug: "tea-coffee-dealers",
    },
    {
      title: "Construction",
      icon: Hammer,
      description: "Building & Contractor Services",
      color: "bg-purple-100",
      iconColor: "text-purple-600",
      slug: "building-contractors",
    },
  ]

return (
    <div className="min-h-screen cream-bg">
      {/* Header */}
      <header className="bg-gray-900 border-b border-gray-700 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* Logo and Brand */}
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 rounded-full flex items-center justify-center">
                <Image
                  src="/images/wlg-tree-logo.png"
                  alt="Weather Land Groups Logo"
                  width={40}
                  height={40}
                  className="rounded-full"
                />
              </div>
              <div>
                <h1 className="text-lg md:text-xl font-bold text-white">Weather Land Groups</h1>
                <p className="text-xs text-gray-300 hidden sm:block">India Pvt Ltd</p>
              </div>
            </div>

{/* Desktop Navigation */}
            <nav className="hidden lg:flex items-center space-x-8">
              <Link href="/" className="text-white hover:text-amber-400 font-medium">
                Home
              </Link>
              <Link href="#services" className="text-gray-300 hover:text-amber-400">
                Products
              </Link>
              <Link href="#services" className="text-gray-300 hover:text-amber-400">
                Services
              </Link>
              <Link href="#contact" className="text-gray-300 hover:text-amber-400">
                Rent & Sales
              </Link>
              <Link href="#about" className="text-gray-300 hover:text-amber-400">
                About
              </Link>
              <Link href="#contact" className="text-gray-300 hover:text-amber-400">
                Contact
              </Link>
            </nav>

{/* Desktop Right side icons and Sign In */}
            <div className="hidden lg:flex items-center space-x-4">
              <HomeIcon className="h-5 w-5 text-gray-300" />
              <span className="text-sm text-gray-300">Rent & Sales</span>
              <div className="h-5 w-5 text-gray-300">☀️</div>
              <User className="h-5 w-5 text-gray-300" />
              <Link href="/auth">
                <Button className="bg-amber-600 hover:bg-amber-700 text-white px-6">Sign In</Button>
              </Link>
            </div>

{/* Mobile Home Button */}
            <div className="flex lg:hidden items-center space-x-2">
              <Link href="/">
                <Button size="sm" className="bg-amber-600 hover:bg-amber-700 text-white">
                  <HomeIcon className="h-4 w-4 mr-1" />
                  Home
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </header>

{/* Hero Section */}
      <section className="bg-amber-900 text-white py-12 md:py-20">
        <div className="container mx-auto px-4 text-center">
          <div className="max-w-4xl mx-auto">
            {/* Large Logo Circle */}
            <div className="logo-circle mb-6 md:mb-8">
              <Image
                src="/images/wlg-tree-logo.png"
                alt="Weather Land Groups Logo"
                width={80}
                height={80}
                className="md:w-[100px] md:h-[100px] rounded-full"
              />
            </div>

<h1 className="text-3xl md:text-5xl lg:text-6xl font-bold mb-4 md:mb-6 text-yellow-100 px-2">
              Welcome to Weather Land Groups
            </h1>
            <p className="text-base md:text-xl text-yellow-200 mb-8 md:mb-12 max-w-3xl mx-auto px-4">
              Your one-stop destination for Real Estate, Scrap Services, Premium Spices, Tea & Coffee, and Construction
              Services with sustainable business solutions
            </p>

{/* Search Interface */}
            <div className="search-container max-w-4xl mx-auto mb-6 md:mb-8">
              <div className="flex flex-col md:flex-row">
                <Select>
                  <SelectTrigger className="w-full md:w-48 border-0 rounded-b-none md:rounded-b md:rounded-r-none bg-white mb-0 h-12 md:h-auto">
                    <SelectValue placeholder="All Categories" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Categories</SelectItem>
                    <SelectItem value="real-estate">Real Estate</SelectItem>
                    <SelectItem value="scrap">Scrap Services</SelectItem>
                    <SelectItem value="black-pepper">Black Pepper</SelectItem>
                    <SelectItem value="tea-coffee">Tea & Coffee</SelectItem>
                    <SelectItem value="construction">Construction</SelectItem>
                  </SelectContent>
                </Select>
                <Input
                  placeholder="Search for properties, services, spices..."
                  className="flex-1 border-0 rounded-none focus:ring-0 text-sm md:text-base h-12 md:h-auto"
                />
                <Button className="bg-amber-800 hover:bg-amber-900 rounded-t-none md:rounded-t md:rounded-l-none px-4 md:px-8 h-12 md:h-auto">
                  Search
                </Button>
              </div>
            </div>

{/* Action Buttons */}
            <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-3 md:gap-4 px-4">
              <Link href="/category/real-estate">
                <Button className="btn-secondary w-full sm:w-auto">
                  <Building className="h-4 w-4 mr-2" />
                  Browse Properties
                </Button>
              </Link>
              <Link href="/category/scrap-dealers">
                <Button className="btn-secondary w-full sm:w-auto">
                  <Recycle className="h-4 w-4 mr-2" />
                  Scrap Services
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Our Services Section */}
      <section className="py-12 md:py-16 px-4 cream-bg">
        <div className="container mx-auto">
          <div className="text-center mb-8 md:mb-12">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Our Business Categories</h2>
            <p className="text-base md:text-lg text-gray-600 max-w-3xl mx-auto px-4">
              Discover everything Weather Land Groups has to offer - from premium real estate to sustainable scrap
              services, quality spices, and professional construction solutions.
            </p>
          </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-8 max-w-5xl mx-auto">
            {services.map((service, index) => (
              <Link key={index} href={`/category/${service.slug}`}>
                <div className="text-center service-card p-4 md:p-6 rounded-lg cursor-pointer">
                  <div className={`service-icon-circle ${service.color} w-16 h-16 md:w-20 md:h-20`}>
                    <service.icon className={`h-6 w-6 md:h-8 md:w-8 ${service.iconColor}`} />
                  </div>
                  <h3 className="font-semibold text-gray-900 mb-2 text-sm md:text-base">{service.title}</h3>
                  <p className="text-xs md:text-sm text-gray-600 hidden md:block">{service.description}</p>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

{/* Featured Categories */}
      <section className="py-12 md:py-16 px-4 cream-bg">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
            <Card className="bg-gradient-to-br from-blue-500 to-blue-600 text-white service-card">
              <CardContent className="p-6 md:p-8">
                <Building className="h-10 w-10 md:h-12 md:w-12 mb-4 opacity-80" />
                <h3 className="text-lg md:text-xl font-bold mb-2">Premium Properties</h3>
                <p className="text-blue-100 mb-4 text-sm md:text-base">
                  Residential, commercial, and rental properties with detailed specifications and pricing
                </p>
                <Link href="/category/real-estate">
                  <Button variant="secondary" className="bg-white text-blue-600 hover:bg-gray-100 w-full md:w-auto">
                    Explore Properties
                  </Button>
                </Link>
              </CardContent>
            </Card>

<Card className="bg-gradient-to-br from-green-500 to-green-600 text-white service-card">
              <CardContent className="p-6 md:p-8">
                <Recycle className="h-10 w-10 md:h-12 md:w-12 mb-4 opacity-80" />
                <h3 className="text-lg md:text-xl font-bold mb-2">Eco Solutions</h3>
                <p className="text-green-100 mb-4 text-sm md:text-base">
                  Sustainable scrap collection and recycling services with competitive pricing
                </p>
                <Link href="/category/scrap-dealers">
                  <Button variant="secondary" className="bg-white text-green-600 hover:bg-gray-100 w-full md:w-auto">
                    Go Green
                  </Button>
                </Link>
              </CardContent>
            </Card>

<Card className="bg-gradient-to-br from-orange-500 to-orange-600 text-white service-card">
              <CardContent className="p-6 md:p-8">
                <Coffee className="h-10 w-10 md:h-12 md:w-12 mb-4 opacity-80" />
                <h3 className="text-lg md:text-xl font-bold mb-2">Premium Spices</h3>
                <p className="text-orange-100 mb-4 text-sm md:text-base">
                  Fresh black pepper, tea, and coffee directly from certified farms and gardens
                </p>
                <Link href="/category/black-pepper-dealers">
                  <Button variant="secondary" className="bg-white text-orange-600 hover:bg-gray-100 w-full md:w-auto">
                    Shop Spices
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="py-12 md:py-16 px-4 bg-amber-900 text-white">
        <div className="container mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-center">
            <div>
              <div className="text-2xl md:text-4xl font-bold text-yellow-300 mb-2">500+</div>
              <div className="text-yellow-200 text-sm md:text-base">Trusted Businesses</div>
            </div>
            <div>
              <div className="text-2xl md:text-4xl font-bold text-yellow-300 mb-2">1000+</div>
              <div className="text-yellow-200 text-sm md:text-base">Active Listings</div>
            </div>
            <div>
              <div className="text-2xl md:text-4xl font-bold text-yellow-300 mb-2">50+</div>
              <div className="text-yellow-200 text-sm md:text-base">Cities Covered</div>
            </div>
            <div>
              <div className="text-2xl md:text-4xl font-bold text-yellow-300 mb-2">24/7</div>
              <div className="text-yellow-200 text-sm md:text-base">Customer Support</div>
            </div>
          </div>
        </div>
      </section>

{/* Contact Section */}
      <section id="contact" className="py-12 md:py-16 px-4 cream-bg">
        <div className="container mx-auto">
          <div className="text-center mb-8 md:mb-12">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Get In Touch</h2>
            <p className="text-lg md:text-xl text-gray-600">Ready to grow your business with us?</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 max-w-4xl mx-auto">
            <Card className="text-center service-card">
              <CardContent className="p-6 md:p-8">
                <div className="w-12 h-12 md:w-16 md:h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Phone className="h-6 w-6 md:h-8 md:w-8 text-pink-600" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">Phone</h3>
                <p className="text-gray-600 text-sm md:text-base">+91 98765 43210</p>
              </CardContent>
            </Card>

<Card className="text-center service-card">
              <CardContent className="p-6 md:p-8">
                <div className="w-12 h-12 md:w-16 md:h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Mail className="h-6 w-6 md:h-8 md:w-8 text-green-600" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">Email</h3>
                <p className="text-gray-600 text-sm md:text-base">info@weatherlandgroups.com</p>
              </CardContent>
            </Card>

<Card className="text-center service-card">
              <CardContent className="p-6 md:p-8">
                <div className="w-12 h-12 md:w-16 md:h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <MapPin className="h-6 w-6 md:h-8 md:w-8 text-blue-600" />
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">Address</h3>
                <p className="text-gray-600 text-sm md:text-base">Mumbai, Maharashtra, India</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 border-t border-gray-700 py-8 md:py-12 px-4">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 md:gap-8">
            <div>
              <div className="flex items-center space-x-3 mb-4">
                <div className="w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center">
                  <Image
                    src="/images/wlg-tree-logo.png"
                    alt="Weather Land Groups Logo"
                    width={32}
                    height={32}
                    className="md:w-[40px] md:h-[40px] rounded-full"
                  />
                </div>
                <div>
                  <h3 className="font-bold text-white text-sm md:text-base">Weather Land Groups</h3>
                  <p className="text-xs md:text-sm text-gray-400">India Pvt Ltd</p>
                </div>
              </div>
              <p className="text-gray-400 text-xs md:text-sm">Sustainable business solutions for a greener tomorrow.</p>
            </div>

<div>
              <h4 className="font-semibold mb-4 text-white text-sm md:text-base">Services</h4>
              <ul className="space-y-2 text-gray-400 text-xs md:text-sm">
                <li>
                  <Link href="/category/real-estate" className="hover:text-amber-400 transition-colors">
                    Real Estate
                  </Link>
                </li>
                <li>
                  <Link href="/category/scrap-dealers" className="hover:text-amber-400 transition-colors">
                    Scrap Services
                  </Link>
                </li>
                <li>
                  <Link href="/category/black-pepper-dealers" className="hover:text-amber-400 transition-colors">
                    Black Pepper
                  </Link>
                </li>
                <li>
                  <Link href="/category/tea-coffee-dealers" className="hover:text-amber-400 transition-colors">
                    Tea & Coffee
                  </Link>
                </li>
                <li>
                  <Link href="/category/building-contractors" className="hover:text-amber-400 transition-colors">
                    Construction
                  </Link>
                </li>
              </ul>
            </div>

<div>
              <h4 className="font-semibold mb-4 text-white text-sm md:text-base">Quick Links</h4>
              <ul className="space-y-2 text-gray-400 text-xs md:text-sm">
                <li>
                  <Link href="/auth" className="hover:text-amber-400 transition-colors">
                    Sign In
                  </Link>
                </li>
                <li>
                  <Link href="/auth?mode=register" className="hover:text-amber-400 transition-colors">
                    Register
                  </Link>
                </li>
                <li>
                  <Link href="/admin" className="hover:text-amber-400 transition-colors">
                    Admin Panel
                  </Link>
                </li>
                <li>
                  <Link href="/payment" className="hover:text-amber-400 transition-colors">
                    Payment Plans
                  </Link>
                </li>
              </ul>
            </div>

<div>
              <h4 className="font-semibold mb-4 text-white text-sm md:text-base">Support</h4>
              <ul className="space-y-2 text-gray-400 text-xs md:text-sm">
                <li>
                  <Link href="/help" className="hover:text-amber-400 transition-colors">
                    Help Center
                  </Link>
                </li>
                <li>
                  <Link href="/privacy" className="hover:text-amber-400 transition-colors">
                    Privacy Policy
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="border-t border-gray-700 mt-6 md:mt-8 pt-6 md:pt-8 text-center text-gray-400 text-xs md:text-sm">
          <p>© 2024 Weather Land Groups India Pvt Ltd. All rights reserved.</p>
          <p className="mt-1">Owned by - Praneeth Gowda</p>
        </div>
      </footer>
    </div>
  )
}</article></body></html>