"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,
  FileText,
  TrendingUp,
  Shield,
  Zap,
  Briefcase,
  Award
} from "lucide-react";

export default function TenderPage() {
  const features = [
    "Government tender notifications",
    "Private sector project tenders",
    "Solar project bidding opportunities",
    "Tender document downloads",
    "Submission deadline tracking",
    "Eligibility criteria information",
    "Bid preparation assistance",
    "Tender status updates"
  ];

  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/tender.png"
                  alt="Tender"
                  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">
                Tender Portal
              </h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                Access solar energy project tenders from government and private sectors.
                Stay updated with bidding opportunities and submit your proposals.
              </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">
                <Briefcase className="w-6 h-6 text-primary-500" />
                Tender 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="https://www.solartender.in"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-primary inline-flex items-center gap-2 text-lg px-8 py-4"
              >
                View Tenders
                <ArrowRight className="w-5 h-5" />
              </a>
            </motion.div>
          </div>
        </div>
        <Footer />
      </main>
    </ThemeProvider>
  );
}