<?php
// Fetch quote from API
function fetchQuote() {
    $apiKey = "test"; // Replace with your actual API key
    $url = "https://quotes.miragek.com/api?rand=1&api_key=" . $apiKey;

    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);

    if (curl_errno($ch)) {
        return ["error" => "Failed to fetch quote. Please try again."];
    }

    curl_close($ch);
    $data = json_decode($response, true);

    if (isset($data['success']) && $data['success'] && !empty($data['data'])) {
        return $data['data'][0];
    } else {
        return ["error" => "Invalid data received from API."];
    }
}

$quote = fetchQuote();
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inspirational Quotes</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            background-image: url('https://picsum.photos/1920/1080?v=1');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .content {
            flex: 1 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .quote-card {
            max-width: 600px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .quote-text {
            font-size: 1.25rem;
            font-style: italic;
        }
        .quote-author {
            font-size: 1rem;
            font-weight: bold;
        }
        .header, .footer {
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 1rem 0;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <h1 class="text-center">Inspirational Quotes</h1>
        </div>
    </header>

    <div class="content container my-5">
        <div class="quote-card p-4">
            <blockquote class="blockquote mb-0">
                <p class="quote-text mb-3">
                    <?php echo isset($quote['error']) ? $quote['error'] : $quote['quote']; ?>
                </p>
                <?php if (!isset($quote['error'])): ?>
                    <footer class="blockquote-footer quote-author">
                        <?php echo $quote['author']; ?>
                    </footer>
                <?php endif; ?>
            </blockquote>
            <div class="text-center mt-4">
                <button id="refreshQuote" class="btn btn-primary">
                    <i class="fas fa-sync-alt me-2"></i>New Quote
                </button>
            </div>
        </div>
    </div>

    <footer class="footer mt-auto">
        <div class="container">
            <div class="row">
                <div class="col-md-6 text-center text-md-start">
                    <p>&copy; 2024 Inspirational Quotes</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <a href="#" class="text-white me-2"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="text-white me-2"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-white"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('refreshQuote').addEventListener('click', function() {
            location.reload();
        });
    </script>
</body>
</html>