"use client";

import { ThemeProvider } from "../contexts/ThemeContext";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Image from "next/image";
import { motion } from "framer-motion";
import { 
  Check, 
  ArrowRight, 
  Users, 
  TrendingUp,
  Shield,
  Zap,
  BarChart3,
  MessageSquare
} from "lucide-react";

export default function CRMPage() {
  const features = [
    "Customer relationship management",
    "Lead tracking and management",
    "Sales pipeline visualization",
    "Contact management system",
    "Task and activity tracking",
    "Reporting and analytics",
    "Email integration",
    "Mobile app access"
  ];

  return (
    <ThemeProvider>
      <main className="min-h-screen" style={{ background: 'var(--background)', transition: 'background 0.3s ease' }}>
        <Navbar />
        <div className="pt-20 pb-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            {/* Header */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-center mb-12"
            >
              <div className="flex justify-center mb-6">
                <Image
                  src="/gallery/category/crm-logo.png"
                  alt="CRM"
                  width={120}
                  height={120}
                  className="object-contain"
                />
              </div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 text-theme-primary">
                CRM System
              </h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                Customer Relationship Management platform to manage your business relationships, 
                track leads, and streamline your sales process.
              </p>
            </motion.div>

            {/* Features */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="glass-card p-6 mb-8"
            >
              <h2 className="text-2xl font-bold text-theme-primary mb-4 flex items-center gap-2">
                <BarChart3 className="w-6 h-6 text-primary-500" />
                Key Features
              </h2>
              <div className="grid md:grid-cols-2 gap-4">
                {features.map((feature, index) => (
                  <div key={index} className="flex items-start gap-3">
                    <Check className="w-5 h-5 text-primary-500 flex-shrink-0 mt-0.5" />
                    <span className="text-theme-secondary">{feature}</span>
                  </div>
                ))}
              </div>
            </motion.div>

            {/* CTA */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="text-center"
            >
              <a
                href="#"
                className="btn-primary inline-flex items-center gap-2 text-lg px-8 py-4"
              >
                Access CRM System
                <ArrowRight className="w-5 h-5" />
              </a>
            </motion.div>
          </div>
        </div>
        <Footer />
      </main>
    </ThemeProvider>
  );
}