<?php
// Initialize SQLite Database
$db_file = __DIR__ . '/koolaphones.db';
$db = new PDO('sqlite:' . $db_file);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// Create products table if it doesn't exist
$db->exec("CREATE TABLE IF NOT EXISTS products (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    brand TEXT NOT NULL,
    price REAL NOT NULL,
    image_url TEXT NOT NULL,
    description TEXT,
    stock INTEGER DEFAULT 0
)");

// Check if we need to seed initial data
$count = $db->query("SELECT COUNT(*) FROM products")->fetchColumn();
if ($count == 0) {
    // Insert sample products
    $stmt = $db->prepare("INSERT INTO products (name, brand, price, image_url, description, stock) VALUES (?, ?, ?, ?, ?, ?)");

    $products = [
        ['iPhone 15 Pro Max', 'Apple', 1199.99, 'https://images.unsplash.com/photo-1696446702094-378e2e960e6e?w=400', 'Latest iPhone with A17 Pro chip, titanium design, and advanced camera system', 15],
        ['Samsung Galaxy S24 Ultra', 'Samsung', 1299.99, 'https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?w=400', 'Premium Android flagship with S Pen, 200MP camera, and AI features', 20],
        ['Google Pixel 8 Pro', 'Google', 999.99, 'https://images.unsplash.com/photo-1598327105666-5b89351aff97?w=400', 'Best Android camera phone with Google AI and Tensor G3 chip', 12],
        ['iPhone 14', 'Apple', 799.99, 'https://images.unsplash.com/photo-1663499482523-1c0c1bae4ce1?w=400', 'Reliable iPhone with great performance and camera quality', 25],
        ['OnePlus 12', 'OnePlus', 799.99, 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400', 'Fast charging flagship with smooth 120Hz display', 18],
        ['Samsung Galaxy Z Flip 5', 'Samsung', 999.99, 'https://images.unsplash.com/photo-1686904423955-b6c2e1a5b0aa?w=400', 'Compact foldable phone with large cover screen', 10]
    ];

    foreach ($products as $product) {
        $stmt->execute($product);
    }
}

// Fetch all products
$products = $db->query("SELECT * FROM products ORDER BY id")->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KoolaPhones - Premium Smartphone Store</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        /* Header Styles */
        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            letter-spacing: -0.5px;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        nav a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }

        nav a:hover {
            opacity: 0.8;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 4rem 20px;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .hero p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Main Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 20px;
        }

        .section-title {
            font-size: 2rem;
            margin-bottom: 2rem;
            text-align: center;
            color: #333;
        }

        /* Product Grid */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .product-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
        }

        .product-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            background-color: #f0f0f0;
        }

        .product-info {
            padding: 1.5rem;
        }

        .product-brand {
            color: #667eea;
            font-size: 0.9rem;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

        .product-name {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .product-description {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            line-height: 1.4;
        }

        .product-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
        }

        .product-price {
            font-size: 1.5rem;
            font-weight: bold;
            color: #667eea;
        }

        .stock-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .in-stock {
            background-color: #d4edda;
            color: #155724;
        }

        .low-stock {
            background-color: #fff3cd;
            color: #856404;
        }

        .buy-button {
            width: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 0.75rem;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.3s;
            margin-top: 1rem;
        }

        .buy-button:hover {
            opacity: 0.9;
        }

        /* Footer */
        footer {
            background-color: #2d3748;
            color: white;
            text-align: center;
            padding: 2rem 20px;
            margin-top: 3rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }

        .footer-links a:hover {
            opacity: 0.7;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }

            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 1.5rem;
            }

            nav ul {
                gap: 1rem;
                font-size: 0.9rem;
            }

            .logo {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .header-container {
                flex-direction: column;
                gap: 1rem;
            }

            .products-grid {
                grid-template-columns: 1fr;
            }

            .hero {
                padding: 2rem 20px;
            }

            .container {
                padding: 2rem 15px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="logo">KoolaPhones</div>
            <nav>
                <ul>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="hero">
        <h1>Premium Smartphones at Great Prices</h1>
        <p>Discover the latest flagship phones from top brands. Quality guaranteed.</p>
    </div>

    <div class="container">
        <h2 class="section-title" id="products">Featured Products</h2>
        <div class="products-grid">
            <?php foreach ($products as $product): ?>
                <div class="product-card">
                    <img src="<?php echo htmlspecialchars($product['image_url']); ?>"
                         alt="<?php echo htmlspecialchars($product['name']); ?>"
                         class="product-image">
                    <div class="product-info">
                        <div class="product-brand"><?php echo htmlspecialchars($product['brand']); ?></div>
                        <h3 class="product-name"><?php echo htmlspecialchars($product['name']); ?></h3>
                        <p class="product-description"><?php echo htmlspecialchars($product['description']); ?></p>
                        <div class="product-footer">
                            <div class="product-price">$<?php echo number_format($product['price'], 2); ?></div>
                            <span class="stock-badge <?php echo $product['stock'] > 15 ? 'in-stock' : 'low-stock'; ?>">
                                <?php echo $product['stock']; ?> in stock
                            </span>
                        </div>
                        <button class="buy-button" onclick="alert('Thank you for your interest! Contact us to purchase.')">
                            Buy Now
                        </button>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-links">
                <a href="#about">About Us</a>
                <a href="#contact">Contact</a>
                <a href="#terms">Terms</a>
                <a href="#privacy">Privacy Policy</a>
            </div>
            <p>&copy; <?php echo date('Y'); ?> KoolaPhones. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
