SubscriptionPortal.jsx

import React, { useState, useEffect } from 'react';
import './SubscriptionPortal.css';

// Mock data for demonstration purposes
const mockSubscriptionData = {
  tiers: [
    {
      id: 1,
      name: "FlexRide",
      price: 499,
      description: "Basic access to Unity Fleet vehicles with pay-per-use model",
      features: [
        { name: "24/7 Vehicle Access", included: true },
        { name: "Basic Charging Access", included: true },
        { name: "Vehicle Variety", included: true, details: "Sedans & Compact SUVs" },
        { name: "Monthly Credits", included: true, details: "500 credits" },
        { name: "Reservation Priority", included: false },
        { name: "Premium Charging", included: false },
        { name: "Lounge Access", included: false },
        { name: "Home Charging Setup", included: false },
        { name: "Dedicated Vehicle", included: false },
        { name: "ChainLink Tokens", included: true, details: "5 tokens/month" }
      ],
      popular: false,
      color: "#00E0FF"
    },
    {
      id: 2,
      name: "Take-Home",
      price: 1299,
      description: "Dedicated vehicle for personal use with enhanced benefits",
      features: [
        { name: "24/7 Vehicle Access", included: true },
        { name: "Basic Charging Access", included: true },
        { name: "Vehicle Variety", included: true, details: "All Vehicle Types" },
        { name: "Monthly Credits", included: true, details: "1500 credits" },
        { name: "Reservation Priority", included: true },
        { name: "Premium Charging", included: true },
        { name: "Lounge Access", included: true, details: "Standard Access" },
        { name: "Home Charging Setup", included: true },
        { name: "Dedicated Vehicle", included: true },
        { name: "ChainLink Tokens", included: true, details: "15 tokens/month" }
      ],
      popular: true,
      color: "#35F2DB"
    },
    {
      id: 3,
      name: "All-Access",
      price: 1999,
      description: "Complete mobility solution with premium benefits and maximum flexibility",
      features: [
        { name: "24/7 Vehicle Access", included: true },
        { name: "Basic Charging Access", included: true },
        { name: "Vehicle Variety", included: true, details: "All Vehicle Types + Premium" },
        { name: "Monthly Credits", included: true, details: "Unlimited" },
        { name: "Reservation Priority", included: true },
        { name: "Premium Charging", included: true },
        { name: "Lounge Access", included: true, details: "VIP Access" },
        { name: "Home Charging Setup", included: true },
        { name: "Dedicated Vehicle", included: true, details: "Multiple Vehicles" },
        { name: "ChainLink Tokens", included: true, details: "30 tokens/month" }
      ],
      popular: false,
      color: "#FFC107"
    }
  ],
  addOns: [
    { id: 101, name: "Additional Driver", price: 99, description: "Add an additional authorized driver to your account" },
    { id: 102, name: "Premium Insurance", price: 149, description: "Enhanced insurance coverage with lower deductible" },
    { id: 103, name: "Charging Credit Pack", price: 199, description: "Additional 500 charging credits" },
    { id: 104, name: "Road Trip Package", price: 249, description: "Extended range access and premium roadside assistance" },
    { id: 105, name: "Token Booster", price: 299, description: "Additional 10 ChainLink tokens per month" }
  ],
  userProfile: {
    name: "Matthew Lamb",
    email: "[email protected]",
    currentPlan: "Take-Home",
    memberSince: "January 2025",
    credits: 1250,
    tokens: 45,
    paymentMethod: "Visa ending in 4242",
    nextBillingDate: "May 1, 2025"
  },
  usageHistory: [
    { date: "April 5, 2025", activity: "Vehicle Reservation", vehicle: "Tesla Model 3", credits: 150, location: "Downtown Hub" },
    { date: "April 3, 2025", activity: "Premium Charging", vehicle: "Tesla Model 3", credits: 75, location: "Westside Station" },
    { date: "March 28, 2025", activity: "Lounge Access", vehicle: null, credits: 50, location: "University Hub" },
    { date: "March 25, 2025", activity: "Vehicle Reservation", vehicle: "Tesla Model Y", credits: 200, location: "Downtown Hub" },
    { date: "March 20, 2025", activity: "Token Redemption", vehicle: null, credits: 0, tokens: 10, location: null }
  ]
};

function SubscriptionPortal() {
  const [activeTab, setActiveTab] = useState('plans');
  const [loading, setLoading] = useState(true);
  const [selectedTier, setSelectedTier] = useState(null);
  const [selectedAddOns, setSelectedAddOns] = useState([]);
  const [billingCycle, setBillingCycle] = useState('monthly');
  const [showConfirmation, setShowConfirmation] = useState(false);

  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
      setLoading(false);
      // Set the user's current plan as selected
      const currentPlan = mockSubscriptionData.tiers.find(
        tier => tier.name === mockSubscriptionData.userProfile.currentPlan
      );
      setSelectedTier(currentPlan);
    }, 1500);
    
    return () => clearTimeout(timer);
  }, []);

  const handleTierSelect = (tier) => {
    setSelectedTier(tier);
    setShowConfirmation(false);
  };

  const handleAddOnToggle = (addOn) => {
    if (selectedAddOns.some(item => item.id === addOn.id)) {
      setSelectedAddOns(selectedAddOns.filter(item => item.id !== addOn.id));
    } else {
      setSelectedAddOns([...selectedAddOns, addOn]);
    }
    setShowConfirmation(false);
  };

  const handleBillingCycleChange = (cycle) => {
    setBillingCycle(cycle);
    setShowConfirmation(false);
  };

  const calculateTotalPrice = () => {
    if (!selectedTier) return 0;
    
    let basePrice = selectedTier.price;
    if (billingCycle === 'annual') {
      basePrice = basePrice * 10; // 2 months free for annual billing
    }
    
    const addOnsTotal = selectedAddOns.reduce((sum, addOn) => {
      let addOnPrice = addOn.price;
      if (billingCycle === 'annual') {
        addOnPrice = addOnPrice * 10; // 2 months free for annual billing
      }
      return sum + addOnPrice;
    }, 0);
    
    return basePrice + addOnsTotal;
  };

  const handleSubscribe = () => {
    setShowConfirmation(true);
  };

  const renderFeatureComparison = () => {
    // Get all unique features across all tiers
    const allFeatures = Array.from(
      new Set(
        mockSubscriptionData.tiers.flatMap(tier => 
          tier.features.map(feature => feature.name)
        )
      )
    );
    
    return (
      <div className="feature-comparison">
        <h3>Feature Comparison</h3>
        <div className="comparison-table">
          <div className="comparison-header">
            <div className="feature-name">Feature</div>
            {mockSubscriptionData.tiers.map(tier => (
              <div key={tier.id} className="tier-column">
                {tier.name}
              </div>
            ))}
          </div>
          
          {allFeatures.map((featureName, index) => (
            <div key={index} className="comparison-row">
              <div className="feature-name">{featureName}</div>
              {mockSubscriptionData.tiers.map(tier => {
                const feature = tier.features.find(f => f.name === featureName);
                return (
                  <div key={tier.id} className="tier-column">
                    {feature && feature.included ? (
                      <div className="feature-included">
                        <span className="check-icon">✓</span>
                        {feature.details && <span className="feature-details">{feature.details}</span>}
                      </div>
                    ) : (
                      <div className="feature-excluded">—</div>
                    )}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    );
  };

  if (loading) {
    return (
      <div className="subscription-portal loading">
        <div className="loading-logo">
          <img src="/images/unity_fleet_logo.png" alt="Unity Fleet" />
          <div className="loading-pulse"></div>
        </div>
        <p>Loading Subscription Portal...</p>
      </div>
    );
  }

  return (
    <div className="subscription-portal">
      <header className="portal-header">
        <div className="portal-title">
          <h1>Subscription Portal</h1>
          <span className="portal-subtitle">Unity Fleet Membership</span>
        </div>
        
        <div className="user-profile">
          <div className="profile-avatar">
            <img src="/images/profile_avatar.png" alt="Profile" />
          </div>
          <div className="profile-info">
            <div className="profile-name">{mockSubscriptionData.userProfile.name}</div>
            <div className="profile-plan">{mockSubscriptionData.userProfile.currentPlan} Member</div>
          </div>
        </div>
      </header>
      
      <div className="portal-navigation">
        <button 
          className={`nav-button ${activeTab === 'plans' ? 'active' : ''}`}
          onClick={() => setActiveTab('plans')}
        >
          Subscription Plans
        </button>
        <button 
          className={`nav-button ${activeTab === 'account' ? 'active' : ''}`}
          onClick={() => setActiveTab('account')}
        >
          My Account
        </button>
        <button 
          className={`nav-button ${activeTab === 'usage' ? 'active' : ''}`}
          onClick={() => setActiveTab('usage')}
        >
          Usage History
        </button>
        <button 
          className={`nav-button ${activeTab === 'compare' ? 'active' : ''}`}
          onClick={() => setActiveTab('compare')}
        >
          Plan Comparison
        </button>
      </div>
      
      <main className="portal-content">
        {activeTab === 'plans' && (
          <div className="plans-tab">
            <div className="current-plan-banner">
              <div className="banner-content">
                <h3>Your Current Plan: {mockSubscriptionData.userProfile.currentPlan}</h3>
                <p>Member since {mockSubscriptionData.userProfile.memberSince} • Next billing date: {mockSubscriptionData.userProfile.nextBillingDate}</p>
              </div>
              <div className="banner-actions">
                <button className="banner-button">Manage Payment</button>
              </div>
            </div>
            
            <div className="billing-toggle">
              <span className={`billing-option ${billingCycle === 'monthly' ? 'active' : ''}`}>Monthly</span>
              <label className="toggle-switch">
                <input 
                  type="checkbox" 
                  checked={billingCycle === 'annual'} 
                  onChange={() => handleBillingCycleChange(billingCycle === 'monthly' ? 'annual' : 'monthly')}
                />
                <span className="toggle-slider"></span>
              </label>
              <span className={`billing-option ${billingCycle === 'annual' ? 'active' : ''}`}>
                Annual
                <span className="discount-badge">Save 16%</span>
              </span>
            </div>
            
            <div className="subscription-tiers">
              {mockSubscriptionData.tiers.map(tier => (
                <div 
                  key={tier.id} 
                  className={`tier-card ${selectedTier && selectedTier.id === tier.id ? 'selected' : ''} ${tier.popular ? 'popular' : ''}`}
                  onClick={() => handleTierSelect(tier)}
                >
                  {tier.popular && <div className="popular-badge">Most Popular</div>}
                  <div className="tier-header" style={{ background: `linear-gradient(135deg, ${tier.color}22, ${tier.color}11)` }}>
                    <h3 className="tier-name">{tier.name}</h3>
                    <div className="tier-price">
                      <span className="price-amount">${tier.price}</span>
                      <span className="price-period">/{billingCycle === 'monthly' ? 'mo' : 'yr'}</span>
                    </div>
                    {billingCycle === 'annual' && (
                      <div className="annual-savings">
                        Save ${tier.price * 2} with annual billing
                      </div>
                    )}
                  </div>
                  
                  <div className="tier-description">{tier.description}</div>
                  
                  <ul className="tier-features">
                    {tier.features.slice(0, 5).map((feature, index) => (
                      <li key={index} className={feature.included ? 'included' : 'excluded'}>
                        <span className="feature-icon">{feature.included ? '✓' : '—'}</span>
                        <span className="feature-text">
                          {feature.name}
                          {feature.included && feature.details && (
                            <span className="feature-details"> ({feature.details})</span>
                          )}
                        </span>
                      </li>
                    ))}
                  </ul>
                  
                  <div className="tier-action">
                    {mockSubscriptionData.userProfile.currentPlan === tier.name ? (
                      <button className="current-plan-button">Current Plan</button>
                    ) : (
                      <button 
                        className="select-plan-button"
                        style={{ background: `linear-gradient(90deg, ${tier.color}, ${tier.color}AA)` }}
                      >
                        Select Plan
                      </button>
                    )}
                  </div>
                </div>
              ))}
            </div>
            
            {selectedTier && (
              <div className="add-ons-section">
                <h3>Available Add-Ons</h3>
                <div className="add-ons-grid">
                  {mockSubscriptionData.addOns.map(addOn => (
                    <div 
                      key={addOn.id} 
                      className={`add-on-card ${selectedAddOns.some(item => item.id === addOn.id) ? 'selected' : ''}`}
                      onClick={() => handleAddOnToggle(addOn)}
                    >
                      <div className="add-on-checkbox">
                        <div className="checkbox-inner"></div>
                      </div>
                      <div className="add-on-details">
                        <h4 className="add-on-name">{addOn.name}</h4>
                        <p className="add-on-description">{addOn.description}</p>
                      </div>
                      <div className="add-on-price">
                        ${addOn.price}/{billingCycle === 'monthly' ? 'mo' : 'yr'}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
            
            {selectedTier && (
              <div className="subscription-summary">
                <h3>Subscription Summary</h3>
                <div className="summary-details">
                  <div className="summary-item">
                    <span className="item-name">{selectedTier.name} Plan</span>
                    <span className="item-price">
                      ${billingCycle === 'monthly' ? selectedTier.price : selectedTier.price * 10}/
                      {billingCycle === 'monthly' ? 'mo' : 'yr'}
                    </span>
                  </div>
                  
                  {selectedAddOns.map(addOn => (
                    <div key={addOn.id} className="summary-item">
                      <span className="item-name">{addOn.name}</span>
                      <span className="item-price">
                        ${billingCycle === 'monthly' ? addOn.price : addOn.price * 10}/
                        {billingCycle === 'monthly' ? 'mo' : 'yr'}
                      </span>
                    </div>
                  ))}
                  
                  <div className="summary-total">
                    <span className="total-label">Total</span>
                    <span className="total-price">
                      ${calculateTotalPrice()}/{billingCycle === 'monthly' ? 'mo' : 'yr'}
                    </span>
                  </div>
                </div>
                
                <div className="summary-action">
                  <button 
                    className="subscribe-button"
                    onClick={handleSubscribe}
                    disabled={selectedTier.name === mockSubscriptionData.userProfile.currentPlan && selectedAddOns.length === 0}
                  >
                    {selectedTier.name === mockSubscriptionData.userProfile.currentPlan ? 'Update Subscription' : 'Subscribe Now'}
                  </button>
                </div>
              </div>
            )}
            
            {showConfirmation && (
              <div className="confirmation-modal">
                <div className="modal-content">
                  <h3>Confirm Your Subscription</h3>
                  
                  <div className="confirmation-details">
                    <div className="confirmation-item">
                      <span className="item-label">Selected Plan:</span>
                      <span className="item-value">{selectedTier.name}</span>
                    </div>
                    <div className="confirmation-item">
                      <span className="item-label">Billing Cycle:</span>
                      <span className="item-value">{billingCycle === 'monthly' ? 'Monthly' : 'Annual'}</span>
                    </div>
                    {selectedAddOns.length > 0 && (
                      <div className="confirmation-item">
                        <span className="item-label">Add-Ons:</span>
                        <span className="item-value">{selectedAddOns.map(addOn => addOn.name).join(', ')}</span>
                      </div>
                    )}
                    <div className="confirmation-item total">
                      <span className="item-label">Total Price:</span>
                      <span className="item-value">${calculateTotalPrice()}/{billingCycle === 'monthly' ? 'mo' : 'yr'}</span>
                    </div>
                  </div>
                  
                  <div className="payment-method">
                    <span className="payment-label">Payment Method:</span>
                    <span className="payment-value">{mockSubscriptionData.userProfile.paymentMethod}</span>
                    <button className="change-payment">Change</button>
                  </div>
                  
                  <div className="confirmation-actions">
                    <button className="cancel-button" onClick={() => setShowConfirmation(false)}>Cancel</button>
                    <button className="confirm-button">Confirm Subscription</button>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
        
        {activeTab === 'account' && (
          <div className="account-tab">
            <div className="account-overview">
              <div className="account-card profile">
                <h3>Profile Information</h3>
                <div className="profile-details">
                  <div className="profile-item">
                    <span className="item-label">Name:</span>
                    <span className="item-value">{mockSubscriptionData.userProfile.name}</span>
                  </div>
                  <div className="profile-item">
                    <span className="item-label">Email:</span>
                    <span className="item-value">{mockSubscriptionData.userProfile.email}</span>
                  </div>
                  <div className="profile-item">
                    <span className="item-label">Member Since:</span>
                    <span className="item-value">{mockSubscriptionData.userProfile.memberSince}</span>
                  </div>
                  <div className="profile-item">
                    <span className="item-label">Current Plan:</span>
                    <span className="item-value">{mockSubscriptionData.userProfile.currentPlan}</span>
                  </div>
                </div>
                <button className="edit-profile-button">Edit Profile</button>
              </div>
              
              <div className="account-card balance">
                <h3>Account Balance</h3>
                <div className="balance-items">
                  <div className="balance-item credits">
                    <div className="balance-icon">🔋</div>
                    <div className="balance-amount">{mockSubscriptionData.userProfile.credits}</div>
                    <div className="balance-label">Available Credits</div>
                  </div>
                  <div className="balance-item tokens">
                    <div className="balance-icon">⬡</div>
                    <div className="balance-amount">{mockSubscriptionData.userProfile.tokens}</div>
                    <div className="balance-label">ChainLink Tokens</div>
                  </div>
                </div>
                <div className="balance-actions">
                  <button className="balance-action">Purchase Credits</button>
                  <button className="balance-action">Manage Tokens</button>
                </div>
              </div>
            </div>
            
            <div className="account-card payment">
              <h3>Payment Information</h3>
              <div className="payment-details">
                <div className="payment-method-item">
                  <div className="card-icon">💳</div>
                  <div className="card-details">
                    <div className="card-type">{mockSubscriptionData.userProfile.paymentMethod}</div>
                    <div className="billing-date">Next billing: {mockSubscriptionData.userProfile.nextBillingDate}</div>
                  </div>
                  <button className="edit-payment-button">Edit</button>
                </div>
              </div>
              <div className="payment-history">
                <h4>Recent Payments</h4>
                <div className="payment-history-item">
                  <div className="payment-date">April 1, 2025</div>
                  <div className="payment-description">Monthly Subscription - {mockSubscriptionData.userProfile.currentPlan}</div>
                  <div className="payment-amount">$1,299.00</div>
                </div>
                <div className="payment-history-item">
                  <div className="payment-date">March 1, 2025</div>
                  <div className="payment-description">Monthly Subscription - {mockSubscriptionData.userProfile.currentPlan}</div>
                  <div className="payment-amount">$1,299.00</div>
                </div>
                <div className="payment-history-item">
                  <div className="payment-date">February 1, 2025</div>
                  <div className="payment-description">Monthly Subscription - {mockSubscriptionData.userProfile.currentPlan}</div>
                  <div className="payment-amount">$1,299.00</div>
                </div>
              </div>
              <button className="view-all-button">View All Payments</button>
            </div>
            
            <div className="account-card preferences">
              <h3>Account Preferences</h3>
              <div className="preferences-list">
                <div className="preference-item">
                  <div className="preference-label">Email Notifications</div>
                  <label className="toggle-switch">
                    <input type="checkbox" defaultChecked />
                    <span className="toggle-slider"></span>
                  </label>
                </div>
                <div className="preference-item">
                  <div className="preference-label">SMS Alerts</div>
                  <label className="toggle-switch">
                    <input type="checkbox" defaultChecked />
                    <span className="toggle-slider"></span>
                  </label>
                </div>
                <div className="preference-item">
                  <div className="preference-label">Reservation Reminders</div>
                  <label className="toggle-switch">
                    <input type="checkbox" defaultChecked />
                    <span className="toggle-slider"></span>
                  </label>
                </div>
                <div className="preference-item">
                  <div className="preference-label">Special Offers</div>
                  <label className="toggle-switch">
                    <input type="checkbox" />
                    <span className="toggle-slider"></span>
                  </label>
                </div>
              </div>
              <button className="save-preferences-button">Save Preferences</button>
            </div>
          </div>
        )}
        
        {activeTab === 'usage' && (
          <div className="usage-tab">
            <div className="usage-overview">
              <div className="usage-card credits">
                <h3>Credit Usage</h3>
                <div className="usage-chart">
                  <div className="chart-placeholder">
                    <div className="bar-chart">
                      <div className="chart-bar" style={{ height: '60%' }}>
                        <div className="bar-label">Jan</div>
                      </div>
                      <div className="chart-bar" style={{ height: '75%' }}>
                        <div className="bar-label">Feb</div>
                      </div>
                      <div className="chart-bar" style={{ height: '45%' }}>
                        <div className="bar-label">Mar</div>
                      </div>
                      <div className="chart-bar current" style={{ height: '30%' }}>
                        <div className="bar-label">Apr</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="usage-summary">
                  <div className="summary-item">
                    <div className="summary-label">Monthly Allocation</div>
                    <div className="summary-value">1,500 credits</div>
                  </div>
                  <div className="summary-item">
                    <div className="summary-label">Used This Month</div>
                    <div className="summary-value">250 credits</div>
                  </div>
                  <div className="summary-item">
                    <div className="summary-label">Remaining</div>
                    <div className="summary-value">1,250 credits</div>
                  </div>
                </div>
              </div>
              
              <div className="usage-card tokens">
                <h3>Token Balance</h3>
                <div className="token-balance">
                  <div className="token-icon">⬡</div>
                  <div className="token-amount">{mockSubscriptionData.userProfile.tokens}</div>
                  <div className="token-label">ChainLink Tokens</div>
                </div>
                <div className="token-details">
                  <div className="token-detail">
                    <span className="detail-label">Monthly Accrual:</span>
                    <span className="detail-value">15 tokens</span>
                  </div>
                  <div className="token-detail">
                    <span className="detail-label">Next Distribution:</span>
                    <span className="detail-value">May 1, 2025</span>
                  </div>
                  <div className="token-detail">
                    <span className="detail-label">Lifetime Earned:</span>
                    <span className="detail-value">60 tokens</span>
                  </div>
                </div>
                <div className="token-actions">
                  <button className="token-action">View Token Details</button>
                  <button className="token-action">Redeem Tokens</button>
                </div>
              </div>
            </div>
            
            <div className="usage-history-section">
              <h3>Recent Activity</h3>
              <div className="activity-list">
                {mockSubscriptionData.usageHistory.map((activity, index) => (
                  <div key={index} className="activity-item">
                    <div className="activity-date">{activity.date}</div>
                    <div className="activity-details">
                      <div className="activity-type">{activity.activity}</div>
                      {activity.vehicle && <div className="activity-vehicle">{activity.vehicle}</div>}
                      {activity.location && <div className="activity-location">{activity.location}</div>}
                    </div>
                    <div className="activity-cost">
                      {activity.credits > 0 && <div className="credit-cost">-{activity.credits} credits</div>}
                      {activity.tokens > 0 && <div className="token-cost">-{activity.tokens} tokens</div>}
                    </div>
                  </div>
                ))}
              </div>
              <button className="view-all-activity">View All Activity</button>
            </div>
            
            <div className="usage-insights">
              <h3>Usage Insights</h3>
              <div className="insights-grid">
                <div className="insight-card">
                  <div className="insight-icon">🚗</div>
                  <div className="insight-title">Most Used Vehicle</div>
                  <div className="insight-value">Tesla Model 3</div>
                  <div className="insight-detail">8 reservations this month</div>
                </div>
                <div className="insight-card">
                  <div className="insight-icon">⚡</div>
                  <div className="insight-title">Favorite Charging Location</div>
                  <div className="insight-value">Downtown Hub</div>
                  <div className="insight-detail">12 charging sessions</div>
                </div>
                <div className="insight-card">
                  <div className="insight-icon">📊</div>
                  <div className="insight-title">Average Trip Length</div>
                  <div className="insight-value">42 miles</div>
                  <div className="insight-detail">Based on last 20 trips</div>
                </div>
                <div className="insight-card">
                  <div className="insight-icon">💰</div>
                  <div className="insight-title">Estimated Savings</div>
                  <div className="insight-value">$345</div>
                  <div className="insight-detail">Compared to traditional ownership</div>
                </div>
              </div>
            </div>
          </div>
        )}
        
        {activeTab === 'compare' && (
          <div className="compare-tab">
            {renderFeatureComparison()}
            
            <div className="plan-benefits">
              <h3>Membership Benefits</h3>
              <div className="benefits-grid">
                <div className="benefit-card">
                  <div className="benefit-icon">🔄</div>
                  <h4>Flexibility</h4>
                  <p>Change or upgrade your plan at any time to match your evolving mobility needs.</p>
                </div>
                <div className="benefit-card">
                  <div className="benefit-icon">💰</div>
                  <h4>Cost Savings</h4>
                  <p>Save on insurance, maintenance, and depreciation costs compared to traditional ownership.</p>
                </div>
                <div className="benefit-card">
                  <div className="benefit-icon">⚡</div>
                  <h4>Charging Network</h4>
                  <p>Access to The Link's growing network of premium charging stations across Illinois.</p>
                </div>
                <div className="benefit-card">
                  <div className="benefit-icon">⬡</div>
                  <h4>Token Ownership</h4>
                  <p>Earn ChainLink tokens with every subscription payment, building equity in the network.</p>
                </div>
              </div>
            </div>
            
            <div className="faq-section">
              <h3>Frequently Asked Questions</h3>
              <div className="faq-list">
                <div className="faq-item">
                  <div className="faq-question">How do subscription credits work?</div>
                  <div className="faq-answer">
                    <p>Subscription credits are allocated monthly based on your plan tier. These credits can be used for vehicle reservations, charging sessions, and lounge access. Unused credits roll over for up to 3 months.</p>
                  </div>
                </div>
                <div className="faq-item">
                  <div className="faq-question">Can I change my plan?</div>
                  <div className="faq-answer">
                    <p>Yes, you can upgrade or downgrade your plan at any time. Changes take effect at the start of your next billing cycle. Upgrades may be applied immediately upon request.</p>
                  </div>
                </div>
                <div className="faq-item">
                  <div className="faq-question">What are ChainLink tokens?</div>
                  <div className="faq-answer">
                    <p>ChainLink tokens represent fractional ownership in The Link charging infrastructure. Tokens are earned monthly with your subscription and can be redeemed for charging credits, subscription discounts, or held as an appreciating asset.</p>
                  </div>
                </div>
                <div className="faq-item">
                  <div className="faq-question">How does the home charging setup work?</div>
                  <div className="faq-answer">
                    <p>Take-Home and All-Access plans include installation of a Level 2 home charger at your residence. Our team will coordinate installation with a certified electrician. Installation costs are covered up to $1,000.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>
      
      <footer className="portal-footer">
        <div className="footer-info">
          <span>Unity Fleet Subscription Portal</span>
          <span>Powered by Atlas Intelligence</span>
        </div>
        <div className="footer-links">
          <a href="#" className="footer-link">Terms & Conditions</a>
          <a href="#" className="footer-link">Privacy Policy</a>
          <a href="#" className="footer-link">Contact Support</a>
        </div>
      </footer>
    </div>
  );
}

export default SubscriptionPortal;