import { useState } from 'react';
import { 
  BarChart, Activity, Users, Zap, Clock, Filter, 
  Download, Search, Bell, Home, CreditCard, Settings,
  Plus, Edit, Trash, ChevronDown, Power, History, ExternalLink, HelpCircle, AlertCircle, ChevronRight,
  Tag, Gift, Sparkles, Timer, Shield, Percent
} from 'lucide-react';

export default function UserInterface() {
  const [activeTab, setActiveTab] = useState('home');
  const [activePage, setActivePage] = useState('dashboard');
  const [showCustomerModal, setShowCustomerModal] = useState(false);
  const [showMeterModal, setShowMeterModal] = useState(false);

  const renderPage = () => {
    switch(activePage) {
      case 'dashboard':
        return <DashboardPage />;
      case 'customers':
        return <CustomersPage />;
      case 'meters':
        return <MetersPage />;
      case 'payments':
        return <PaymentsPage />;
      case 'admin':
        return <AdminPage />;
      default:
        return <DashboardPage />;
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Top Navigation */}
      <nav className="bg-white border-b border-gray-200 fixed w-full z-10">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <img 
                src="https://placeholder.com/logo.png" 
                alt="EP Logo" 
                className="h-8 w-auto"
              />
              <h1 className="ml-4 text-xl font-semibold text-green-700">
                EP Power
              </h1>
            </div>
            <div className="flex items-center space-x-4">
              <button className="p-2 rounded-full hover:bg-gray-100 relative">
                <Bell className="h-5 w-5 text-gray-600" />
                <span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full"></span>
              </button>
              <div className="flex items-center space-x-2">
                <img 
                  src="https://placeholder.com/avatar.png"
                  alt="User avatar"
                  className="h-8 w-8 rounded-full"
                />
                <span className="text-sm font-medium text-gray-700">John Doe</span>
              </div>
            </div>
          </div>
        </div>
      </nav>

      {/* Sidebar */}
      <div className="w-64 bg-white border-r border-gray-200 fixed h-full">
        <div className="p-6">
          <div className="flex items-center">
            <img 
              src="https://placeholder.com/logo.png" 
              alt="EP Logo" 
              className="h-8 w-auto"
            />
            <h1 className="ml-2 text-lg font-semibold text-green-700">
              Equatorial Power
            </h1>
          </div>
        </div>
        <nav className="mt-4">
          <NavItem 
            icon={<Home />} 
            text="Dashboard" 
            active={activePage === 'dashboard'}
            onClick={() => setActivePage('dashboard')}
          />
          <NavItem 
            icon={<Users />} 
            text="Customers" 
            active={activePage === 'customers'}
            onClick={() => setActivePage('customers')}
          />
          <NavItem 
            icon={<Zap />} 
            text="Meters" 
            active={activePage === 'meters'}
            onClick={() => setActivePage('meters')}
          />
          <NavItem 
            icon={<CreditCard />} 
            text="Payments" 
            active={activePage === 'payments'}
            onClick={() => setActivePage('payments')}
          />
          <NavItem 
            icon={<Settings />} 
            text="Admin" 
            active={activePage === 'admin'}
            onClick={() => setActivePage('admin')}
          />
        </nav>
      </div>

      {/* Bottom Navigation (Mobile) */}
      <div className="fixed bottom-0 w-full bg-white border-t border-gray-200 md:hidden">
        <div className="flex justify-around">
          <NavButton icon={<Home />} text="Home" active={activeTab === 'home'} onClick={() => setActiveTab('home')} />
          <NavButton icon={<CreditCard />} text="Pay" active={activeTab === 'pay'} onClick={() => setActiveTab('pay')} />
          <NavButton icon={<History />} text="Usage" active={activeTab === 'usage'} onClick={() => setActiveTab('usage')} />
          <NavButton icon={<Settings />} text="Account" active={activeTab === 'account'} onClick={() => setActiveTab('account')} />
        </div>
      </div>

      {/* Main Content */}
      <main className="ml-64 pt-16 pb-16 md:pb-0 max-w-7xl mx-auto px-4">
        {activeTab === 'home' && <HomeView />}
        {activeTab === 'pay' && <PaymentView />}
        {activeTab === 'usage' && <UsageView />}
        {activeTab === 'account' && <AccountView />}
        {renderPage()}
      </main>

      {/* Modals */}
      {showCustomerModal && <CustomerModal onClose={() => setShowCustomerModal(false)} />}
      {showMeterModal && <MeterModal onClose={() => setShowMeterModal(false)} />}
    </div>
  );
}

const NavButton = ({ icon, text, active, onClick }) => (
  <button 
    onClick={onClick}
    className={`flex flex-col items-center py-2 px-4 ${
      active ? 'text-green-600' : 'text-gray-600'
    }`}
  >
    {icon}
    <span className="text-xs mt-1">{text}</span>
  </button>
);

// Navigation Item Component
const NavItem = ({ icon, text, active, onClick }) => (
  <button
    onClick={onClick}
    className={`w-full flex items-center space-x-2 px-6 py-3 text-sm ${
      active 
        ? 'bg-green-50 text-green-700 border-r-4 border-green-700' 
        : 'text-gray-600 hover:bg-gray-50'
    }`}
  >
    {icon}
    <span>{text}</span>
  </button>
);

// Dashboard Page Component
const DashboardPage = () => (
  <div className="space-y-6">
    {/* Stats Grid */}
    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
      <StatCard icon={<Users />} title="Total Customers" value="2,451" color="green" />
      <StatCard icon={<Zap />} title="Active Meters" value="1,987" color="blue" />
      <StatCard icon={<Activity />} title="Energy Usage" value="45.2 kWh" color="yellow" />
      <StatCard icon={<Clock />} title="Pending Tickets" value="12" color="purple" />
    </div>

    {/* Recent Activity */}
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
      <table className="w-full">
        <thead>
          <tr className="text-left text-sm text-gray-500 border-b">
            <th className="pb-3">Customer</th>
            <th className="pb-3">Action</th>
            <th className="pb-3">Status</th>
            <th className="pb-3">Time</th>
          </tr>
        </thead>
        <tbody className="divide-y">
          <tr className="text-sm text-gray-900">
            <td className="py-4">John Doe</td>
            <td className="py-4">Payment Received</td>
            <td className="py-4">
              <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
                Completed
              </span>
            </td>
            <td className="py-4 text-gray-500">2 minutes ago</td>
          </tr>
          <tr className="text-sm text-gray-900">
            <td className="py-4">Sarah Smith</td>
            <td className="py-4">Meter Registration</td>
            <td className="py-4">
              <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
                Pending
              </span>
            </td>
            <td className="py-4 text-gray-500">15 minutes ago</td>
          </tr>
          <tr className="text-sm text-gray-900">
            <td className="py-4">Mike Johnson</td>
            <td className="py-4">Support Ticket</td>
            <td className="py-4">
              <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">
                In Progress
              </span>
            </td>
            <td className="py-4 text-gray-500">1 hour ago</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
);

// Customers Page Component
const CustomersPage = () => (
  <div className="space-y-6">
    <div className="flex justify-between items-center">
      <div className="relative">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
        <input
          type="text"
          placeholder="Search customers..."
          className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
        />
      </div>
      <button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
        Add Customer
      </button>
    </div>

    <div className="bg-white rounded-lg shadow-sm border border-gray-200">
      <table className="w-full">
        <thead>
          <tr className="text-left text-sm text-gray-500 border-b">
            <th className="p-4">Name</th>
            <th className="p-4">ID</th>
            <th className="p-4">Status</th>
            <th className="p-4">Last Payment</th>
            <th className="p-4">Actions</th>
          </tr>
        </thead>
        <tbody>
          {/* Add customer rows here */}
        </tbody>
      </table>
    </div>
  </div>
);

// Meters Page Component
const MetersPage = () => (
  <div className="space-y-6">
    <div className="flex justify-between items-center">
      <div className="relative">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
        <input
          type="text"
          placeholder="Search meters..."
          className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"
        />
      </div>
      <button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
        Add Meter
      </button>
    </div>

    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* Meter Cards */}
      <MeterCard 
        id="M001"
        customer="John Doe"
        status="Active"
        consumption="234 kWh"
      />
      {/* Add more meter cards */}
    </div>
  </div>
);

// Payments Page Component
const PaymentsPage = () => (
  <div className="space-y-6">
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h3 className="text-lg font-semibold mb-4">New Payment</h3>
      <form className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Customer ID
            </label>
            <input
              type="text"
              className="w-full p-2 border border-gray-300 rounded-lg"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Amount
            </label>
            <input
              type="number"
              className="w-full p-2 border border-gray-300 rounded-lg"
            />
          </div>
        </div>
        <button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
          Process Payment
        </button>
      </form>
    </div>

    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h3 className="text-lg font-semibold mb-4">Recent Transactions</h3>
      <table className="w-full">
        <thead>
          <tr className="text-left text-sm text-gray-500 border-b">
            <th className="pb-3">Transaction ID</th>
            <th className="pb-3">Customer</th>
            <th className="pb-3">Amount</th>
            <th className="pb-3">Status</th>
            <th className="pb-3">Date</th>
          </tr>
        </thead>
        <tbody className="divide-y">
          {/* Add transaction rows here */}
        </tbody>
      </table>
    </div>
  </div>
);

// Admin Page Component
const AdminPage = () => (
  <div className="space-y-6">
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 className="text-lg font-semibold mb-4">User Management</h3>
        <div className="space-y-4">
          <button className="w-full text-left p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            Manage System Users
          </button>
          <button className="w-full text-left p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            Role Permissions
          </button>
          <button className="w-full text-left p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            Access Logs
          </button>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h3 className="text-lg font-semibold mb-4">System Settings</h3>
        <div className="space-y-4">
          <button className="w-full text-left p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            Payment Gateway Configuration
          </button>
          <button className="w-full text-left p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            Notification Settings
          </button>
          <button className="w-full text-left p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
            System Backup
          </button>
        </div>
      </div>
    </div>
  </div>
);

// Utility Components
const StatCard = ({ icon, title, value, color }) => (
  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
    <div className="flex items-center">
      <div className={`p-2 bg-${color}-100 rounded-lg`}>
        {icon}
      </div>
      <div className="ml-4">
        <p className="text-sm text-gray-500">{title}</p>
        <p className="text-2xl font-semibold text-gray-900">{value}</p>
      </div>
    </div>
  </div>
);

const MeterCard = ({ id, customer, status, consumption }) => (
  <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
    <div className="flex justify-between items-start mb-4">
      <div>
        <h4 className="font-semibold">Meter {id}</h4>
        <p className="text-sm text-gray-500">{customer}</p>
      </div>
      <span className={`px-2 py-1 rounded-full text-xs ${
        status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
      }`}>
        {status}
      </span>
    </div>
    <div className="space-y-2">
      <p className="text-sm text-gray-600">Consumption: {consumption}</p>
      <div className="flex space-x-2">
        <button className="flex-1 px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200">
          Details
        </button>
        <button className="px-3 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200">
          <Power className="h-4 w-4" />
        </button>
      </div>
    </div>
  </div>
);

const HomeView = () => (
  <div className="py-6 space-y-6">
    {/* Current Usage Card */}
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <div className="flex justify-between items-start mb-4">
        <div>
          <h2 className="text-lg font-semibold text-gray-900">Current Usage</h2>
          <p className="text-sm text-gray-500">This Month</p>
        </div>
        <span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
          Active
        </span>
      </div>
      <div className="flex items-center justify-between">
        <div>
          <p className="text-3xl font-bold text-gray-900">245 kWh</p>
          <p className="text-sm text-gray-500 mt-1">Last updated: 2 mins ago</p>
        </div>
        <Zap className="h-12 w-12 text-green-600" />
      </div>
    </div>

    {/* New Special Offers Section */}
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-lg font-semibold text-gray-900">Special Offers</h2>
        <button className="text-sm text-green-600 hover:text-green-700 flex items-center">
          View All <ChevronRight className="h-4 w-4 ml-1" />
        </button>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Early Payment Discount Offer */}
        <div className="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl p-6 text-white">
          <div className="flex justify-between items-start">
            <div>
              <div className="flex items-center">
                <Timer className="h-5 w-5 mr-2" />
                <span className="text-sm font-medium">Limited Time Offer</span>
              </div>
              <h3 className="text-xl font-bold mt-2">Early Payment Discount</h3>
              <p className="text-sm mt-2 opacity-90">Pay before the 15th and get 10% off your bill</p>
            </div>
            <Percent className="h-8 w-8 opacity-80" />
          </div>
          <button className="mt-4 bg-white text-purple-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-opacity-90">
            Learn More
          </button>
        </div>

        {/* Referral Bonus Offer */}
        <div className="bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl p-6 text-white">
          <div className="flex justify-between items-start">
            <div>
              <div className="flex items-center">
                <Gift className="h-5 w-5 mr-2" />
                <span className="text-sm font-medium">Referral Program</span>
              </div>
              <h3 className="text-xl font-bold mt-2">Refer & Earn</h3>
              <p className="text-sm mt-2 opacity-90">Get $20 credit for each new customer referral</p>
            </div>
            <Users className="h-8 w-8 opacity-80" />
          </div>
          <button className="mt-4 bg-white text-green-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-opacity-90">
            Invite Friends
          </button>
        </div>
      </div>

      {/* Loyalty Program Card */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div className="flex items-start space-x-4">
          <div className="p-3 bg-yellow-100 rounded-lg">
            <Sparkles className="h-6 w-6 text-yellow-600" />
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-semibold text-gray-900">EP Rewards Program</h3>
            <p className="text-sm text-gray-500 mt-1">Earn points with every payment</p>
            <div className="mt-3 bg-gray-100 rounded-full h-2.5">
              <div className="bg-yellow-500 h-2.5 rounded-full" style={{ width: '70%' }}></div>
            </div>
            <div className="flex justify-between mt-2">
              <span className="text-sm text-gray-500">700 points</span>
              <span className="text-sm text-gray-500">1000 points for next reward</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    {/* Quick Actions */}
    <div className="grid grid-cols-2 gap-4">
      <button className="bg-green-600 text-white p-4 rounded-xl hover:bg-green-700 transition-colors">
        <div className="flex flex-col items-center">
          <CreditCard className="h-6 w-6 mb-2" />
          <span className="text-sm font-medium">Quick Pay</span>
        </div>
      </button>
      <button className="bg-blue-600 text-white p-4 rounded-xl hover:bg-blue-700 transition-colors">
        <div className="flex flex-col items-center">
          <HelpCircle className="h-6 w-6 mb-2" />
          <span className="text-sm font-medium">Get Support</span>
        </div>
      </button>
    </div>

    {/* Special Benefits Section */}
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <BenefitCard 
        icon={<Shield />}
        title="Protected Rate"
        description="Lock in your current rate for 6 months"
      />
      <BenefitCard 
        icon={<Tag />}
        title="Bundle Discount"
        description="Save 15% with our service bundle"
      />
      <BenefitCard 
        icon={<Activity />}
        title="Peak Hours Savings"
        description="50% off during off-peak hours"
      />
      <BenefitCard 
        icon={<Gift />}
        title="Welcome Bonus"
        description="$30 credit for new customers"
      />
    </div>

    {/* Recent Transactions and Alerts remain the same */}
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Transactions</h3>
      <div className="space-y-4">
        <TransactionItem 
          date="Today"
          amount="$25.00"
          type="Payment"
          status="success"
        />
        <TransactionItem 
          date="Yesterday"
          amount="$30.00"
          type="Payment"
          status="success"
        />
        <TransactionItem 
          date="3 days ago"
          amount="$20.00"
          type="Payment"
          status="failed"
        />
      </div>
    </div>

    <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
      <div className="flex items-start">
        <AlertCircle className="h-5 w-5 text-yellow-600 mt-0.5" />
        <div className="ml-3">
          <h4 className="text-sm font-medium text-yellow-800">Usage Alert</h4>
          <p className="text-sm text-yellow-700 mt-1">
            Your usage is 15% higher than last month. Click here for energy-saving tips.
          </p>
        </div>
      </div>
    </div>
  </div>
);

const PaymentView = () => (
  <div className="py-6 space-y-6">
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h2 className="text-lg font-semibold text-gray-900 mb-4">Make a Payment</h2>
      <form className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Amount (USD)
          </label>
          <input
            type="number"
            className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
            placeholder="Enter amount"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Payment Method
          </label>
          <select className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
            <option>Mobile Money</option>
            <option>Credit Card</option>
            <option>Bank Transfer</option>
          </select>
        </div>
        <button className="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">
          Proceed to Payment
        </button>
      </form>
    </div>

    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Payment History</h3>
      <div className="space-y-4">
        {/* Add payment history items here */}
      </div>
    </div>
  </div>
);

const UsageView = () => (
  <div className="py-6 space-y-6">
    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold text-gray-900">Usage History</h2>
        <button className="flex items-center text-sm text-green-600">
          <Download className="h-4 w-4 mr-1" />
          Download Report
        </button>
      </div>
      {/* Add usage graph here */}
      <div className="h-64 bg-gray-100 rounded-lg mb-4">
        {/* Placeholder for usage graph */}
      </div>
      <div className="flex justify-between text-sm text-gray-500">
        <span>Last 7 Days</span>
        <span>Total: 245 kWh</span>
      </div>
    </div>
  </div>
);

const AccountView = () => (
  <div className="py-6 space-y-6">
    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
      <div className="p-6 border-b border-gray-200">
        <div className="flex items-center">
          <img 
            src="https://placeholder.com/avatar.png"
            alt="User avatar"
            className="h-16 w-16 rounded-full"
          />
          <div className="ml-4">
            <h2 className="text-lg font-semibold text-gray-900">John Doe</h2>
            <p className="text-sm text-gray-500">Account #: EP-12345</p>
          </div>
        </div>
      </div>
      <div className="divide-y divide-gray-200">
        <AccountMenuItem 
          icon={<Settings />}
          title="Account Settings"
          subtitle="Update your personal information"
        />
        <AccountMenuItem 
          icon={<Bell />}
          title="Notifications"
          subtitle="Manage your notification preferences"
        />
        <AccountMenuItem 
          icon={<HelpCircle />}
          title="Help & Support"
          subtitle="Get help with your account"
        />
        <AccountMenuItem 
          icon={<ExternalLink />}
          title="Sign Out"
          subtitle="Log out of your account"
        />
      </div>
    </div>
  </div>
);

const TransactionItem = ({ date, amount, type, status }) => (
  <div className="flex items-center justify-between">
    <div className="flex items-center">
      <div className={`p-2 rounded-full ${
        status === 'success' ? 'bg-green-100' : 'bg-red-100'
      }`}>
        <CreditCard className={`h-4 w-4 ${
          status === 'success' ? 'text-green-600' : 'text-red-600'
        }`} />
      </div>
      <div className="ml-3">
        <p className="text-sm font-medium text-gray-900">{type}</p>
        <p className="text-xs text-gray-500">{date}</p>
      </div>
    </div>
    <div className="text-right">
      <p className="text-sm font-medium text-gray-900">{amount}</p>
      <p className={`text-xs ${
        status === 'success' ? 'text-green-600' : 'text-red-600'
      }`}>
        {status === 'success' ? 'Successful' : 'Failed'}
      </p>
    </div>
  </div>
);

const AccountMenuItem = ({ icon, title, subtitle }) => (
  <button className="w-full p-4 flex items-center justify-between hover:bg-gray-50">
    <div className="flex items-center">
      <div className="p-2 bg-gray-100 rounded-lg">
        {icon}
      </div>
      <div className="ml-3 text-left">
        <p className="text-sm font-medium text-gray-900">{title}</p>
        <p className="text-xs text-gray-500">{subtitle}</p>
      </div>
    </div>
    <ChevronRight className="h-5 w-5 text-gray-400" />
  </button>
);

// Benefits Card Component
const BenefitCard = ({ icon, title, description }) => (
  <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
    <div className="flex flex-col items-center text-center">
      <div className="p-2 bg-gray-100 rounded-lg mb-3">
        {React.cloneElement(icon, { className: "h-5 w-5 text-gray-600" })}
      </div>
      <h4 className="text-sm font-medium text-gray-900">{title}</h4>
      <p className="text-xs text-gray-500 mt-1">{description}</p>
    </div>
  </div>
);

// Promotion Card Component
const PromotionCard = ({ title, description, validUntil, discount, bgColor }) => (
  <div className={`bg-gradient-to-r ${bgColor} rounded-xl p-6 text-white`}>
    <div className="flex justify-between items-start">
      <div>
        <h3 className="text-xl font-bold">{title}</h3>
        <p className="text-sm mt-2 opacity-90">{description}</p>
        <p className="text-sm mt-4">Valid until: {validUntil}</p>
      </div>
      <div className="text-2xl font-bold">{discount}</div>
    </div>
    <button className="mt-4 bg-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-opacity-90"
            style={{ color: 'inherit' }}>
      Claim Offer
    </button>
  </div>
);

// Promotions Page Component
const PromotionsPage = () => (
  <div className="py-6 space-y-6">
    <h2 className="text-2xl font-bold text-gray-900">Current Promotions</h2>
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <PromotionCard 
        title="Summer Savings"
        description="Get 20% off your bill when you use our energy-efficient appliances program"
        validUntil="2024-08-31"
        discount="20%"
        bgColor="from-orange-500 to-pink-500"
      />
      <PromotionCard 
        title="Green Energy Bonus"
        description="Switch to our solar plan and receive $100 credit on your first bill"
        validUntil="2024-07-15"
        discount="$100"
        bgColor="from-green-500 to-teal-500"
      />
    </div>
  </div>
);