import {
  Mail,
  BellRing,
  CircleHelp,
  Award,
  CreditCard,
  Images,
  LayoutGrid,
  Building2,
  Sparkles,
} from 'lucide-react'
import { SectionCard } from '../components/SectionCard'
import { Breadcrumbs } from '../components/Breadcrumbs'
import styles from '../components/PageContent.module.css'

const websiteSections = [
  {
    icon: Images,
    title: 'Sliders',
    description: 'Manage homepage banner sliders and promotional image carousels.',
    linkText: 'Manage sliders',
    href: '/website/sliders',
  },
  {
    icon: LayoutGrid,
    title: 'Special Categories',
    description: 'Highlight selected product categories on your website homepage.',
    linkText: 'Manage categories',
    href: '/website/special-categories',
  },
  {
    icon: Building2,
    title: 'Special Brands',
    description: 'Showcase partner or featured brands on your website homepage.',
    linkText: 'Manage brands',
    href: '/website/special-brands',
  },
  {
    icon: Sparkles,
    title: 'Special Items',
    description: 'Curate featured store items into categories for your website carousels.',
    linkText: 'Manage special items',
    href: '/website/special-items',
  },
  {
    icon: Mail,
    title: 'Contact Us Form',
    description: 'View submissions from your website contact form.',
    linkText: 'View submissions',
    href: '/website/contact',
  },
  {
    icon: BellRing,
    title: 'Subscriptions',
    description: 'Manage newsletter sign-ups and subscription options for visitors.',
    linkText: 'Manage subscriptions',
    href: '/website/subscriptions',
  },
  {
    icon: CircleHelp,
    title: 'FAQ',
    description: 'Create and organize frequently asked questions for your website.',
    linkText: 'Manage FAQ',
    href: '/website/faq',
  },
  {
    icon: Award,
    title: 'Badges',
    description: 'Show trust badges, certifications, and highlights on your website.',
    linkText: 'Manage badges',
    href: '/website/badges',
  },
  {
    icon: CreditCard,
    title: 'E-Payment',
    description: 'Configure online payment gateways and checkout payment options.',
    linkText: 'Manage e-payment',
    href: '/website/e-payment',
  },
]

export function WebsitePage() {
  return (
    <main className={styles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Website' },
        ]}
      />
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.pageTitle}>Website</h2>
          <p className={styles.pageSubtitle}>
            Manage public website content, forms, and customer-facing settings.
          </p>
        </div>
      </div>

      <div className={styles.gridHome}>
        {websiteSections.map((section) => (
          <SectionCard key={section.title} {...section} />
        ))}
      </div>
    </main>
  )
}
