<?php 
require_once 'db/config.php';
$pageTitle = "ElderEase: Safety, Comfort, and Independence";
include 'header.php'; 

$products = db()->query("SELECT * FROM products ORDER BY id ASC")->fetchAll();
?>

<!-- Hero Section -->
<section class="hero-section bg-charcoal text-white py-5 position-relative overflow-hidden">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h1 class="display-3 fw-bold mb-4 text-white">Safety Comfort, And independence at every step.</h1>
                <p class="lead mb-5 text-white">ElderEase creates thoughtfully designed essentials that help seniors live confidently at home.</p>
                <div class="d-flex gap-3">
                    <a href="#products" class="btn btn-gold btn-lg px-4">Shop Now</a>
                    <a href="/about.php" class="btn btn-outline-light btn-lg px-4">Our Mission</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="zoom-container shadow-lg">
                    <img src="/assets/pasted-20260129-004647-d9048856.png" alt="Seniors at home" class="img-fluid img-zoom-20">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Trust Pillars -->
<section class="py-5 bg-light">
    <div class="container py-4">
        <div class="row text-center g-4">
            <div class="col-md-4">
                <div class="p-4 border rounded bg-white shadow-sm h-100">
                    <div class="h3 text-gold mb-3"><i class="bi bi-person-check"></i></div>
                    <h5 class="fw-bold">Designed for Seniors</h5>
                    <p class="text-muted small mb-0">Every product is tested for ease of use and maximum safety.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 border rounded bg-white shadow-sm h-100">
                    <div class="h3 text-gold mb-3"><i class="bi bi-shield-lock"></i></div>
                    <h5 class="fw-bold">Simple Solutions</h5>
                    <p class="text-muted small mb-0">No complicated technology — just effective, reliable tools for daily living.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 border rounded bg-white shadow-sm h-100">
                    <div class="h3 text-gold mb-3"><i class="bi bi-heart"></i></div>
                    <h5 class="fw-bold">Focused on Dignity</h5>
                    <p class="text-muted small mb-0">Helping you maintain independence in the comfort of your own home.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Products -->
<section id="products" class="py-5">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Essential Safety Solutions</h2>
            <p class="text-muted">Carefully selected to improve daily life.</p>
        </div>
        <div class="row g-4">
            <?php foreach ($products as $product): ?>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm product-card">
                    <a href="product.php?slug=<?php echo $product['slug']; ?>">
                        <img src="<?php echo htmlspecialchars($product['image_url'] ?: 'https://via.placeholder.com/400x400?text=Product+Image'); ?>" class="card-img-top rounded-top" alt="<?php echo htmlspecialchars($product['name']); ?>">
                    </a>
                    <div class="card-body p-4">
                        <h5 class="card-title fw-bold mb-2"><?php echo htmlspecialchars($product['name']); ?></h5>
                        <p class="text-muted small mb-3"><?php echo htmlspecialchars($product['short_description']); ?></p>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="h5 text-gold mb-0">$<?php echo number_format($product['price'], 2); ?></span>
                            <a href="product.php?slug=<?php echo $product['slug']; ?>" class="btn btn-link text-gold text-decoration-none p-0 small fw-bold">View Story →</a>
                        </div>
                        <button onclick="addToCart(<?php echo $product['id']; ?>, '<?php echo addslashes($product['name']); ?>', <?php echo $product['price']; ?>, '<?php echo $product['image_url']; ?>')" class="btn btn-gold w-100 rounded-pill">Add to Cart</button>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?php include 'footer.php'; ?>