import React, { useState } from 'react';
import { ChevronDown, ChevronUp, Cpu, Wifi, Bluetooth, Memory, Zap, Clock, Shield, Layers, Radio, Database } from 'lucide-react';

export default function ESP32S3Features() {
  const [expandedFeature, setExpandedFeature] = useState(null);

  const toggleFeature = (index) => {
    if (expandedFeature === index) {
      setExpandedFeature(null);
    } else {
      setExpandedFeature(index);
    }
  };

  const features = [
    {
      title: "Dual-Core Processor",
      description: "ESP32-S3 features a dual-core Xtensa LX7 processor running at up to 240 MHz, allowing for parallel task execution.",
      icon: <Cpu className="h-6 w-6 text-blue-500" />,
      code: `// Example of using both cores of ESP32-S3
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"

// Task to run on core 0
void Task1(void *parameter) {
  while(true) {
    // Task 1 code here (e.g., sensor reading)
    Serial.println("Task 1 running on core 0");
    delay(1000);
  }
}

// Task to run on core 1
void Task2(void *parameter) {
  while(true) {
    // Task 2 code here (e.g., WiFi communication)
    Serial.println("Task 2 running on core 1");
    delay(1000);
  }
}

void setup() {
  Serial.begin(115200);
  
  // Create tasks that will run on specific cores
  xTaskCreatePinnedToCore(
    Task1,    // Function to implement the task
    "Task1",  // Name of the task
    10000,    // Stack size in words
    NULL,     // Task input parameter
    1,        // Priority of the task
    NULL,     // Task handle
    0);       // Core where the task should run
    
  xTaskCreatePinnedToCore(
    Task2,    // Function to implement the task
    "Task2",  // Name of the task
    10000,    // Stack size in words
    NULL,     // Task input parameter
    1,        // Priority of the task
    NULL,     // Task handle
    1);       // Core where the task should run
}`
    },
    {
      title: "Wi-Fi Connectivity",
      description: "Built-in 2.4 GHz Wi-Fi (802.11 b/g/n) with speeds up to 150 Mbps, supporting both station and soft AP modes.",
      icon: <Wifi className="h-6 w-6 text-blue-500" />,
      code: `// Example of connecting ESP32-S3 to WiFi
#include <WiFi.h>

const char* ssid = "YourNetworkName";
const char* password = "YourNetworkPassword";

void setup() {
  Serial.begin(115200);
  delay(1000);
  
  Serial.println("Connecting to WiFi...");
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  // Your code that uses WiFi goes here
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("Still connected to WiFi");
  } else {
    Serial.println("WiFi connection lost");
  }
  delay(5000);
}`
    },
    {
      title: "Bluetooth 5 (LE)",
      description: "Supports Bluetooth 5 and Bluetooth Low Energy (BLE) for energy-efficient communication with mobile devices and other BLE peripherals.",
      icon: <Bluetooth className="h-6 w-6 text-blue-500" />,
      code: `// Example of using BLE on ESP32-S3
#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>

BLEServer* pServer = NULL;
BLECharacteristic* pCharacteristic = NULL;
bool deviceConnected = false;
bool oldDeviceConnected = false;

// See the following for generating UUIDs:
// https://www.uuidgenerator.net/
#define SERVICE_UUID        "4fafc201-1fb5-459e-8fcc-c5c9c331914b"
#define CHARACTERISTIC_UUID "beb5483e-36e1-4688-b7f5-ea07361b26a8"

class MyServerCallbacks: public BLEServerCallbacks {
    void onConnect(BLEServer* pServer) {
      deviceConnected = true;
    };

    void onDisconnect(BLEServer* pServer) {
      deviceConnected = false;
    }
};

void setup() {
  Serial.begin(115200);

  // Create the BLE Device
  BLEDevice::init("ESP32-S3 BLE");

  // Create the BLE Server
  pServer = BLEDevice::createServer();
  pServer->setCallbacks(new MyServerCallbacks());

  // Create the BLE Service
  BLEService *pService = pServer->createService(SERVICE_UUID);

  // Create a BLE Characteristic
  pCharacteristic = pService->createCharacteristic(
                      CHARACTERISTIC_UUID,
                      BLECharacteristic::PROPERTY_READ   |
                      BLECharacteristic::PROPERTY_WRITE  |
                      BLECharacteristic::PROPERTY_NOTIFY
                    );

  // Create a BLE Descriptor
  pCharacteristic->addDescriptor(new BLE2902());

  // Start the service
  pService->start();

  // Start advertising
  BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
  pAdvertising->addServiceUUID(SERVICE_UUID);
  pAdvertising->setScanResponse(false);
  pAdvertising->setMinPreferred(0x0);  // set value to 0x00 to not advertise this parameter
  BLEDevice::startAdvertising();
  Serial.println("BLE device is now advertising!");
}

void loop() {
  // Notify changed value
  if (deviceConnected) {
    // Send a value (e.g., sensor reading)
    int sensorValue = analogRead(A0);
    pCharacteristic->setValue(sensorValue);
    pCharacteristic->notify();
    delay(1000);
  }
  
  // Disconnecting
  if (!deviceConnected && oldDeviceConnected) {
    delay(500); // Give the Bluetooth stack time to get ready
    pServer->startAdvertising(); // Restart advertising
    Serial.println("Started advertising again");
    oldDeviceConnected = deviceConnected;
  }
  
  // Connecting
  if (deviceConnected && !oldDeviceConnected) {
    oldDeviceConnected = deviceConnected;
  }
}`
    },
    {
      title: "PSRAM Support",
      description: "ESP32-S3 supports up to 16MB of external PSRAM (Pseudo Static RAM), greatly expanding memory capacity for demanding applications.",
      icon: <Memory className="h-6 w-6 text-blue-500" />,
      code: `// Example of using PSRAM on ESP32-S3
#include <esp_heap_caps.h>

// Check if PSRAM is available and allocate memory from it
void setup() {
  Serial.begin(115200);
  delay(1000);
  
  // Check if PSRAM is available
  if (esp_spiram_is_initialized()) {
    Serial.println("PSRAM is initialized");
    
    // Get PSRAM size
    size_t psramSize = esp_spiram_get_size();
    Serial.printf("PSRAM size: %d bytes\n", psramSize);
    
    // Allocate a large buffer in PSRAM
    uint8_t* largeBuffer = (uint8_t*)heap_caps_malloc(1000000, MALLOC_CAP_SPIRAM);
    
    if (largeBuffer != NULL) {
      Serial.println("Successfully allocated 1MB buffer in PSRAM");
      
      // Use the buffer
      for (int i = 0; i < 1000000; i++) {
        largeBuffer[i] = i % 256;
      }
      
      // Verify some values
      Serial.printf("Buffer values: %d, %d, %d\n", 
                    largeBuffer[0], largeBuffer[1000], largeBuffer[999999]);
      
      // Free the buffer when done
      heap_caps_free(largeBuffer);
    } else {
      Serial.println("Failed to allocate buffer in PSRAM");
    }
  } else {
    Serial.println("PSRAM is not initialized or not available");
  }
}

void loop() {
  // Nothing to do here
  delay(1000);
}`
    },
    {
      title: "USB OTG Support",
      description: "ESP32-S3 includes USB On-The-Go (OTG) functionality, allowing it to act as either a USB host or device.",
      icon: <Zap className="h-6 w-6 text-blue-500" />,
      code: `// Example of using ESP32-S3 as a USB Serial device
#include "USB.h"
#include "USBCDC.h"

USBCDC USBSerial;

void setup() {
  // Initialize built-in serial for debug output
  Serial.begin(115200);
  delay(1000);
  
  // Initialize USB CDC
  USBSerial.begin();
  USB.begin();
  
  Serial.println("USB CDC initialized. Connect to the ESP32-S3 via USB.");
}

void loop() {
  // Echo data received from USB to Serial and vice versa
  if (USBSerial.available()) {
    Serial.write(USBSerial.read());
  }
  
  if (Serial.available()) {
    USBSerial.write(Serial.read());
  }
  
  // Send some data periodically
  static unsigned long lastTime = 0;
  if (millis() - lastTime > 1000) {
    lastTime = millis();
    USBSerial.println("Hello from ESP32-S3 via USB CDC!");
  }
}`
    },
    {
      title: "Rich Peripheral Set",
      description: "Features numerous peripherals including SPI, I2C, I2S, UART, ADC, DAC, PWM, and more for interfacing with various sensors and devices.",
      icon: <Layers className="h-6 w-6 text-blue-500" />,
      code: `// Example of using multiple peripherals on ESP32-S3
#include <Wire.h>
#include <SPI.h>

// I2C pins
#define I2C_SDA 8
#define I2C_SCL 9

// SPI pins
#define SPI_MOSI 11
#define SPI_MISO 13
#define SPI_CLK 12
#define SPI_CS 10

// UART pins
#define UART_TX 17
#define UART_RX 18

// ADC pin
#define ADC_PIN 1

// PWM pin
#define PWM_PIN 2

// PWM properties
#define PWM_FREQ 5000
#define PWM_CHANNEL 0
#define PWM_RESOLUTION 8

void setup() {
  // Initialize Serial for debugging
  Serial.begin(115200);
  delay(1000);
  Serial.println("ESP32-S3 Peripherals Example");
  
  // Initialize I2C
  Wire.begin(I2C_SDA, I2C_SCL);
  Serial.println("I2C initialized");
  
  // Initialize SPI
  SPI.begin(SPI_CLK, SPI_MISO, SPI_MOSI, SPI_CS);
  Serial.println("SPI initialized");
  
  // Initialize UART2
  Serial2.begin(9600, SERIAL_8N1, UART_RX, UART_TX);
  Serial.println("UART2 initialized");
  
  // Initialize PWM
  ledcSetup(PWM_CHANNEL, PWM_FREQ, PWM_RESOLUTION);
  ledcAttachPin(PWM_PIN, PWM_CHANNEL);
  Serial.println("PWM initialized");
  
  // ADC doesn't need initialization
  Serial.println("All peripherals initialized");
}

void loop() {
  // Read ADC value
  int adcValue = analogRead(ADC_PIN);
  Serial.printf("ADC Value: %d\n", adcValue);
  
  // Set PWM duty cycle based on ADC reading
  int dutyCycle = map(adcValue, 0, 4095, 0, 255);
  ledcWrite(PWM_CHANNEL, dutyCycle);
  Serial.printf("PWM Duty Cycle: %d\n", dutyCycle);
  
  // Send data via UART2
  Serial2.println("Hello from ESP32-S3!");
  
  // I2C scan for devices
  Serial.println("Scanning I2C bus...");
  byte error, address;
  int deviceCount = 0;
  for (address = 1; address < 127; address++) {
    Wire.beginTransmission(address);
    error = Wire.endTransmission();
    if (error == 0) {
      Serial.printf("I2C device found at address 0x%02X\n", address);
      deviceCount++;
    }
  }
  if (deviceCount == 0) {
    Serial.println("No I2C devices found");
  }
  
  delay(5000);
}`
    },
    {
      title: "Hardware Acceleration",
      description: "Includes hardware acceleration for AES, SHA, RSA, and ECC, plus a vector processor for AI and DSP operations.",
      icon: <Clock className="h-6 w-6 text-blue-500" />,
      code: `// Example of using hardware acceleration for AES encryption
#include "mbedtls/aes.h"

void setup() {
  Serial.begin(115200);
  delay(1000);
  
  Serial.println("ESP32-S3 Hardware Acceleration Example");
  
  // Data to encrypt
  unsigned char plaintext[16] = "Hello ESP32-S3!";
  unsigned char ciphertext[16];
  unsigned char decryptedtext[16];
  
  // AES key (128 bits = 16 bytes)
  unsigned char key[16] = {0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07,
                           0x08, 0x09, 0x0a, 0x0b, 0x0c, 0x0d, 0x0e, 0x0f};
  
  // Initialize AES context
  mbedtls_aes_context aes;
  mbedtls_aes_init(&aes);
  
  // Set encryption key
  mbedtls_aes_setkey_enc(&aes, key, 128);
  
  // Measure time for encryption
  unsigned long startTime = micros();
  
  // Encrypt the data (ECB mode for simplicity)
  mbedtls_aes_encrypt(&aes, plaintext, ciphertext);
  
  unsigned long encryptionTime = micros() - startTime;
  
  // Set decryption key
  mbedtls_aes_setkey_dec(&aes, key, 128);
  
  // Measure time for decryption
  startTime = micros();
  
  // Decrypt the data
  mbedtls_aes_decrypt(&aes, ciphertext, decryptedtext);
  
  unsigned long decryptionTime = micros() - startTime;
  
  // Free AES context
  mbedtls_aes_free(&aes);
  
  // Print results
  Serial.println("Original text:");
  Serial.println((char*)plaintext);
  
  Serial.println("Encrypted text (hex):");
  for (int i = 0; i < 16; i++) {
    Serial.printf("%02x", ciphertext[i]);
  }
  Serial.println();
  
  Serial.println("Decrypted text:");
  Serial.println((char*)decryptedtext);
  
  Serial.printf("Encryption time: %lu microseconds\n", encryptionTime);
  Serial.printf("Decryption time: %lu microseconds\n", decryptionTime);
  Serial.println("Hardware acceleration makes these operations very fast!");
}

void loop() {
  delay(5000);
}`
    },
    {
      title: "Security Features",
      description: "Includes secure boot, flash encryption, and a dedicated security subsystem for protecting sensitive data and applications.",
      icon: <Shield className="h-6 w-6 text-blue-500" />,
      code: `// Example of using ESP32-S3 secure storage (NVS encrypted)
#include "nvs_flash.h"
#include "nvs_handle.h"
#include "esp_partition.h"

void setup() {
  Serial.begin(115200);
  delay(1000);
  
  Serial.println("ESP32-S3 Security Features Example");
  
  // Initialize NVS with encryption
  esp_err_t err = nvs_flash_init_partition_ptr(
    esp_partition_find_first(ESP_PARTITION_TYPE_DATA, ESP_PARTITION_SUBTYPE_DATA_NVS, NULL),
    NVS_DEFAULT_PART_SIZE,
    NVS_ENCRYPTION_ON
  );
  
  if (err != ESP_OK) {
    Serial.printf("Error initializing NVS encrypted: %d\n", err);
    return;
  }
  
  Serial.println("NVS with encryption initialized");
  
  // Open NVS namespace
  nvs_handle_t nvs_handle;
  err = nvs_open("storage", NVS_READWRITE, &nvs_handle);
  if (err != ESP_OK) {
    Serial.printf("Error opening NVS handle: %d\n", err);
    return;
  }
  
  // Store a secret value
  const char* secret = "my-super-secret-key";
  err = nvs_set_str(nvs_handle, "secret_key", secret);
  if (err != ESP_OK) {
    Serial.printf("Error storing secret: %d\n", err);
  } else {
    Serial.println("Secret stored successfully");
    
    // Commit changes
    err = nvs_commit(nvs_handle);
    if (err != ESP_OK) {
      Serial.printf("Error committing NVS: %d\n", err);
    }
  }
  
  // Read back the secret
  char retrieved_secret[64];
  size_t length = sizeof(retrieved_secret);
  err = nvs_get_str(nvs_handle, "secret_key", retrieved_secret, &length);
  
  if (err != ESP_OK) {
    Serial.printf("Error retrieving secret: %d\n", err);
  } else {
    Serial.printf("Retrieved secret: %s\n", retrieved_secret);
  }
  
  // Close NVS
  nvs_close(nvs_handle);
  
  Serial.println("Security demo completed");
  Serial.println("In a real application, you would also enable:");
  Serial.println("1. Secure Boot - Verifies bootloader with digital signature");
  Serial.println("2. Flash Encryption - Encrypts code in flash memory");
  Serial.println("3. eFuses - For storing encryption keys and security configurations");
}

void loop() {
  delay(5000);
}`
    },
    {
      title: "Low Power Modes",
      description: "Supports various power-saving modes including Deep Sleep, Light Sleep, and Hibernation for battery-powered applications.",
      icon: <Zap className="h-6 w-6 text-blue-500" />,
      code: `// Example of using ESP32-S3 deep sleep mode
#include "esp_sleep.h"

#define WAKE_PIN GPIO_NUM_0  // Button connected to GPIO0

RTC_DATA_ATTR int bootCount = 0;  // Stored in RTC memory, persists during deep sleep

void setup() {
  Serial.begin(115200);
  delay(1000);
  
  // Increment boot count
  bootCount++;
  
  Serial.println("ESP32-S3 Low Power Modes Example");
  Serial.printf("Boot count: %d\n", bootCount);
  
  // Print wakeup reason
  esp_sleep_wakeup_cause_t wakeup_reason = esp_sleep_get_wakeup_cause();
  
  switch(wakeup_reason) {
    case ESP_SLEEP_WAKEUP_EXT0:
      Serial.println("Wakeup caused by external signal using RTC_IO");
      break;
    case ESP_SLEEP_WAKEUP_EXT1:
      Serial.println("Wakeup caused by external signal using RTC_CNTL");
      break;
    case ESP_SLEEP_WAKEUP_TIMER:
      Serial.println("Wakeup caused by timer");
      break;
    case ESP_SLEEP_WAKEUP_TOUCHPAD:
      Serial.println("Wakeup caused by touchpad");
      break;
    case ESP_SLEEP_WAKEUP_ULP:
      Serial.println("Wakeup caused by ULP program");
      break;
    default:
      Serial.println("Wakeup was not caused by deep sleep");
      break;
  }
  
  // Perform some work
  Serial.println("Doing some work before going to sleep...");
  for (int i = 10; i > 0; i--) {
    Serial.printf("Going to sleep in %d seconds...\n", i);
    delay(1000);
  }
  
  // Configure wake up sources
  
  // 1. Timer wake up after 30 seconds
  esp_sleep_enable_timer_wakeup(30 * 1000000); // 30 seconds in microseconds
  Serial.println("Timer wake up enabled");
  
  // 2. External wake up on pin GPIO0 (usually the BOOT button)
  esp_sleep_enable_ext0_wakeup(WAKE_PIN, 0); // 0 = Low level, 1 = High level
  Serial.println("External wake up enabled on GPIO0");
  
  // Calculate power savings
  float active_current = 50.0;  // mA, typical active current
  float sleep_current = 0.01;   // mA, typical deep sleep current
  float time_awake = 10.0;      // seconds
  float time_asleep = 30.0;     // seconds
  
  float avg_current = (active_current * time_awake + sleep_current * time_asleep) / (time_awake + time_asleep);
  float power_saving = (1 - avg_current / active_current) * 100;
  
  Serial.printf("Estimated power saving: %.1f%%\n", power_saving);
  
  // Enter deep sleep
  Serial.println("Going to deep sleep now");
  Serial.flush();
  esp_deep_sleep_start();
}

void loop() {
  // This will never run as deep sleep restarts the chip
}`
    },
    {
      title: "Wireless Coexistence",
      description: "Advanced coexistence handling allows simultaneous operation of Wi-Fi and Bluetooth without interference.",
      icon: <Radio className="h-6 w-6 text-blue-500" />,
      code: `// Example of using WiFi and Bluetooth simultaneously on ESP32-S3
#include <WiFi.h>
#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>

// WiFi credentials
const char* ssid = "YourNetworkName";
const char* password = "YourNetworkPassword";

// BLE variables
BLEServer* pServer = NULL;
BLECharacteristic* pCharacteristic = NULL;
bool deviceConnected = false;

#define SERVICE_UUID        "4fafc201-1fb5-459e-8fcc-c5c9c331914b"
#define CHARACTERISTIC_UUID "beb5483e-36e1-4688-b7f5-ea07361b26a8"

class MyServerCallbacks: public BLEServerCallbacks {
    void onConnect(BLEServer* pServer) {
      deviceConnected = true;
      Serial.println("BLE Client connected");
    };

    void onDisconnect(BLEServer* pServer) {
      deviceConnected = false;
      Serial.println("BLE Client disconnected");
    }
};

void setup() {
  Serial.begin(115200);
  delay(1000);
  
  Serial.println("ESP32-S3 WiFi and Bluetooth Coexistence Example");
  
  // Initialize WiFi
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  
  // Initialize BLE
  BLEDevice::init("ESP32-S3 Coexistence");
  
  // Create the BLE Server
  pServer = BLEDevice::createServer();
  pServer->setCallbacks(new MyServerCallbacks());
  
  // Create the BLE Service
  BLEService *pService = pServer->createService(SERVICE_UUID);
  
  // Create a BLE Characteristic
  pCharacteristic = pService->createCharacteristic(
                      CHARACTERISTIC_UUID,
                      BLECharacteristic::PROPERTY_READ   |
                      BLECharacteristic::PROPERTY_WRITE  |
                      BLECharacteristic::PROPERTY_NOTIFY
                    );
  
  // Create a BLE Descriptor
  pCharacteristic->addDescriptor(new BLE2902());
  
  // Start the service
  pService->start();
  
  // Start advertising
  BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
  pAdvertising->addServiceUUID(SERVICE_UUID);
  pAdvertising->setScanResponse(false);
  pAdvertising->setMinPreferred(0x0);
  BLEDevice::startAdvertising();
  
  Serial.println("BLE service started and advertising");
  Serial.println("Both WiFi and BLE are now running simultaneously!");
  
  // Configure coexistence parameters (optional, ESP-IDF has good defaults)
  // esp_coex_preference_t preference = ESP_COEX_PREFER_BALANCE;
  // esp_coex_preference_set(preference);
}

void loop() {
  static unsigned long lastWiFiCheck = 0;
  static unsigned long lastBLEUpdate = 0;
  
  // Periodically check WiFi status
  if (millis() - lastWiFiCheck > 5000) {
    lastWiFiCheck = millis();
    
    if (WiFi.status() == WL_CONNECTED) {
      Serial.println("WiFi still connected");
      Serial.print("Signal strength (RSSI): ");
      Serial.println(WiFi.RSSI());
    } else {
      Serial.println("WiFi connection lost, reconnecting...");
      WiFi.reconnect();
    }
  }
  
  // Periodically update BLE characteristic
  if (deviceConnected && millis() - lastBLEUpdate > 2000) {
    lastBLEUpdate = millis();
    
    // Create a status message with WiFi info
    String statusMsg = "WiFi RSSI: " + String(WiFi.RSSI()) + 
                       " dBm, IP: " + WiFi.localIP().toString();
    
    // Update the characteristic
    pCharacteristic->setValue(statusMsg.c_str());
    pCharacteristic->notify();
    
    Serial.println("BLE characteristic updated");
  }
  
  delay(100);
}`
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50 p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        <header className="mb-8 text-center">
          <h1 className="text-3xl font-bold text-gray-800 mb-2">ESP32-S3 Key Features</h1>
          <p className="text-gray-600">Explore 10 powerful features of the ESP32-S3 microcontroller with code examples</p>
        </header>

        <div className="space-y-4">
          {features.map((feature, index) => (
            <div 
              key={index} 
              className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100"
            >
              <div 
                className="p-4 flex justify-between items-center cursor-pointer"
                onClick={() => toggleFeature(index)}
              >
                <div className="flex items-center">
                  {feature.icon}
                  <h2 className="text-xl font-semibold ml-3 text-gray-800">{feature.title}</h2>
                </div>
                {expandedFeature === index ? 
                  <ChevronUp className="h-5 w-5 text-gray-500" /> : 
                  <ChevronDown className="h-5 w-5 text-gray-500" />
                }
              </div>
              
              {expandedFeature === index && (
                <div className="border-t border-gray-100">
                  <div className="p-4 bg-gray-50">
                    <p className="text-gray-700 mb-4">{feature.description}</p>
                    <div className="bg-gray-900 rounded-md overflow-hidden">
                      <div className="flex items-center justify-between px-4 py-2 bg-gray-800">
                        <span className="text-xs text-gray-400">Code Example</span>
                      </div>
                      <pre className="p-4 overflow-x-auto text-sm text-gray-300 font-mono">
                        {feature.code}
                      </pre>
                    </div>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
        
        <footer className="mt-8 text-center text-gray-600 text-sm">
          <p>These examples demonstrate the versatility and power of the ESP32-S3 microcontroller.</p>
          <p className="mt-2">Click on each feature to view the corresponding code example.</p>
        </footer>
      </div>
    </div>
  );
}