<?php
require __DIR__ . '/includes/functions.php';

$products = products();
$collections = collections();
$currentPage = 'home';
$pageTitle = 'Furnify | Premium Sofa Store, Re-Up & AR Preview';

require __DIR__ . '/includes/header.php';
?>

<section class="hero-section">
    <picture>
        <source srcset="assets/images/hero-sofa.webp" type="image/webp">
        <img src="assets/images/hero-sofa.png" alt="Modern premium living room with a modular sofa" class="hero-image" loading="eager" fetchpriority="high">
    </picture>
    <div class="hero-overlay" aria-hidden="true"></div>
    <div class="container hero-content">
        <div class="hero-kicker"><span></span> Furnify sofa showroom</div>
        <h1>Premium sofas, custom designs, Re-Up makeovers, and live selling in one store.</h1>
        <p class="hero-copy">Shop new sofas with AR preview, request a custom sofa made for your space, send Re-Up repair requests for old sofas, and follow our live selling drops on Facebook and TikTok.</p>
        <div class="hero-actions">
            <a href="#catalog" class="btn btn-primary btn-lg">
                <i class="bi bi-grid-3x3-gap" aria-hidden="true"></i>
                Shop New Sofas
            </a>
            <a href="custom-sofa.php" class="btn btn-glass btn-lg">
                <i class="bi bi-pencil-square" aria-hidden="true"></i>
                Custom Sofa Quote
            </a>
            <a href="reup.php" class="btn btn-glass btn-lg">
                <i class="bi bi-magic" aria-hidden="true"></i>
                Try Re-Up Estimate
            </a>
        </div>
        <div class="hero-trust">
            <span><i class="bi bi-shield-check" aria-hidden="true"></i> Warranty-ready</span>
            <span><i class="bi bi-pencil-square" aria-hidden="true"></i> Custom sofa quote</span>
            <span><i class="bi bi-magic" aria-hidden="true"></i> Re-Up estimate</span>
            <span><i class="bi bi-badge-ar" aria-hidden="true"></i> 3D AR preview</span>
        </div>
    </div>
</section>

<section class="store-strip" id="why-us">
    <div class="container">
        <div class="row g-3">
            <div class="col-6 col-lg-3">
                <div class="metric">
                    <span>3D</span>
                    <p>True-size AR preview for selected sofas</p>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="metric">
                    <span>Custom</span>
                    <p>Personalized sofa quotation for exact sizes</p>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="metric">
                    <span>Re-Up</span>
                    <p>Photo and dimension based makeover request</p>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="metric">
                    <span>Live</span>
                    <p>Facebook and TikTok selling-ready workflow</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="category-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <p class="eyebrow">Shop by lifestyle</p>
                <h2>Curated sofa categories</h2>
            </div>
            <a href="#catalog" class="text-link">See all products <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
        </div>
        <div class="category-grid">
            <?php foreach ($collections as $collection): ?>
                <?php
                    $count = count(array_filter($products, function ($product) use ($collection) {
                        return isset($product['collection']) && $product['collection'] === $collection;
                    }));
                ?>
                <a href="#catalog" class="category-card" data-jump-category="<?= e($collection) ?>">
                    <span><?= e($collection) ?></span>
                    <strong><?= $count ?> design<?= $count > 1 ? 's' : '' ?></strong>
                    <i class="bi bi-arrow-up-right" aria-hidden="true"></i>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section id="catalog" class="catalog-section">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <p class="eyebrow">Premium collection</p>
                <h2>Choose your perfect fit</h2>
            </div>
            <div class="catalog-count"><span id="catalog-count"><?= count($products) ?></span> products found</div>
        </div>

        <div class="catalog-toolbar" aria-label="Product filters">
            <div class="search-field">
                <i class="bi bi-search" aria-hidden="true"></i>
                <input type="search" class="form-control" placeholder="Search sofa, size, color, badge..." data-catalog-search>
            </div>
            <select class="form-select" data-catalog-category aria-label="Filter by category">
                <option value="all">All categories</option>
                <?php foreach ($collections as $collection): ?>
                    <option value="<?= e($collection) ?>"><?= e($collection) ?></option>
                <?php endforeach; ?>
            </select>
            <select class="form-select" data-catalog-sort aria-label="Sort products">
                <option value="featured">Featured</option>
                <option value="price-asc">Price: low to high</option>
                <option value="price-desc">Price: high to low</option>
                <option value="rating-desc">Highest rated</option>
            </select>
        </div>

        <div class="row g-4 product-grid" data-product-grid>
            <?php foreach ($products as $index => $product): ?>
                <?php
                    $searchBlob = strtolower(implode(' ', [
                        $product['name'],
                        $product['tagline'],
                        $product['collection'],
                        $product['room'],
                        $product['color'],
                        $product['dimensions'],
                        implode(' ', $product['badges']),
                    ]));
                ?>
                <div class="col-md-6 col-xl-4 product-column"
                     data-product-card
                     data-index="<?= $index ?>"
                     data-name="<?= e($product['name']) ?>"
                     data-category="<?= e($product['collection']) ?>"
                     data-price="<?= e($product['price']) ?>"
                     data-rating="<?= e($product['rating']) ?>"
                     data-search="<?= e($searchBlob) ?>">
                    <article class="product-card h-100">
                        <a href="product.php?id=<?= e($product['id']) ?>" class="product-image-link" aria-label="View <?= e($product['name']) ?>">
                            <?= product_image($product) ?>
                            <span class="product-status"><?= e($product['stock_status']) ?></span>
                        </a>
                        <div class="product-body">
                            <div class="d-flex justify-content-between align-items-start gap-3">
                                <div>
                                    <p class="product-collection"><?= e($product['collection']) ?></p>
                                    <h3><?= e($product['name']) ?></h3>
                                    <div class="rating-line" aria-label="Rating <?= e($product['rating']) ?> out of 5">
                                        <i class="bi bi-star-fill" aria-hidden="true"></i>
                                        <span><?= e($product['rating']) ?></span>
                                        <small>(<?= e($product['reviews']) ?>)</small>
                                    </div>
                                </div>
                                <div class="price-stack">
                                    <span class="price"><?= money($product['price']) ?></span>
                                    <del><?= money($product['compare_at']) ?></del>
                                </div>
                            </div>
                            <p class="product-tagline"><?= e($product['tagline']) ?></p>
                            <div class="badge-row">
                                <?php foreach ($product['badges'] as $badge): ?>
                                    <span><?= e($badge) ?></span>
                                <?php endforeach; ?>
                            </div>
                            <dl class="spec-list">
                                <div><dt>Seats</dt><dd><?= e($product['seats']) ?></dd></div>
                                <div><dt>Size</dt><dd><?= e($product['dimensions']) ?></dd></div>
                                <div><dt>Lead time</dt><dd><?= e($product['lead_time']) ?></dd></div>
                            </dl>
                            <div class="product-actions">
                                <a href="product.php?id=<?= e($product['id']) ?>" class="btn btn-outline-primary">
                                    <i class="bi bi-box" aria-hidden="true"></i>
                                    Details
                                </a>
                                <button class="btn btn-primary" type="button"
                                        data-add-to-cart
                                        data-id="<?= e($product['id']) ?>"
                                        data-name="<?= e($product['name']) ?>"
                                        data-price="<?= e((string) $product['price']) ?>"
                                        data-image="<?= e($product['image']) ?>"
                                        data-dimensions="<?= e($product['dimensions']) ?>">
                                    <i class="bi bi-bag-plus" aria-hidden="true"></i>
                                    Add
                                </button>
                            </div>
                        </div>
                    </article>
                </div>
            <?php endforeach; ?>
        </div>

        <div class="empty-state d-none" id="catalog-empty">
            <i class="bi bi-search" aria-hidden="true"></i>
            <h2>No products found.</h2>
            <p>Try another keyword or select all categories.</p>
        </div>
    </div>
</section>



<section class="custom-promo-section">
    <div class="container">
        <div class="row g-4 align-items-center">
            <div class="col-lg-6 order-lg-2">
                <p class="eyebrow">Furnify Custom Sofa</p>
                <h2>May dream sofa ka? Ipa-personalized quote mo muna.</h2>
                <p>Customers can send their preferred size, style, material, color, add-ons, reference photo, and room photo. The system gives a preliminary quote range, then admin confirms the final price after design review.</p>
                <a href="custom-sofa.php" class="btn btn-primary btn-lg"><i class="bi bi-pencil-square" aria-hidden="true"></i> Request Custom Sofa Quote</a>
            </div>
            <div class="col-lg-6 order-lg-1">
                <div class="premium-mini-grid">
                    <div><i class="bi bi-rulers" aria-hidden="true"></i><strong>Exact dimensions</strong><span>Width, depth, height, seats</span></div>
                    <div><i class="bi bi-palette" aria-hidden="true"></i><strong>Style and material</strong><span>Fabric, color, firmness, design</span></div>
                    <div><i class="bi bi-image" aria-hidden="true"></i><strong>Reference photo</strong><span>Upload inspiration and room photo</span></div>
                    <div><i class="bi bi-cash-coin" aria-hidden="true"></i><strong>Quote range</strong><span>Preliminary estimate before final approval</span></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="reup-promo-section">
    <div class="container">
        <div class="row g-4 align-items-center">
            <div class="col-lg-6">
                <p class="eyebrow">Furnify Re-Up</p>
                <h2>May lumang sofa? Ipa-Re-Up instead of buying new.</h2>
                <p>Customers can upload a sofa photo, enter dimensions, choose the type of repair, and receive a preliminary estimate range. Admin still confirms the final quote after checking the actual condition.</p>
                <a href="reup.php" class="btn btn-primary btn-lg"><i class="bi bi-magic" aria-hidden="true"></i> Get Re-Up Estimate</a>
            </div>
            <div class="col-lg-6">
                <div class="premium-mini-grid">
                    <div><i class="bi bi-camera" aria-hidden="true"></i><strong>Photo upload</strong><span>Clear sofa image for review</span></div>
                    <div><i class="bi bi-rulers" aria-hidden="true"></i><strong>Dimensions</strong><span>Width, depth, height, seats</span></div>
                    <div><i class="bi bi-calculator" aria-hidden="true"></i><strong>Estimate range</strong><span>Preliminary price guidance</span></div>
                    <div><i class="bi bi-person-check" aria-hidden="true"></i><strong>Admin review</strong><span>Final quotation approval</span></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="live-selling-section" id="live-selling">
    <div class="container">
        <div class="live-selling-card">
            <div>
                <p class="eyebrow">Furnify Live Selling</p>
                <h2>Ready for Facebook Live, TikTok Live, and social selling.</h2>
                <p>Best setup: every live item should have a product code, price, stock/reservation status, and direct website link. For custom sofas, ask viewers to send the product code or design idea through the Custom Sofa form. For Re-Up, show before/after makeovers and send viewers to the Re-Up form.</p>
            </div>
            <div class="live-selling-actions">
                <a href="#catalog" class="btn btn-light"><i class="bi bi-box-seam" aria-hidden="true"></i> Pick Live Products</a>
                <a href="custom-sofa.php" class="btn btn-outline-light"><i class="bi bi-pencil-square" aria-hidden="true"></i> Custom Sofa Leads</a>
                <a href="reup.php" class="btn btn-outline-light"><i class="bi bi-magic" aria-hidden="true"></i> Promote Re-Up</a>
            </div>
        </div>
    </div>
</section>

<section class="experience-section" id="experience">
    <div class="container">
        <div class="experience-card">
            <div>
                <p class="eyebrow">Premium buying flow</p>
                <h2>From sofa browsing to quote request in minutes.</h2>
                <p>Customers can search, compare, preview in AR, add to cart, and send a quote inquiry. The PHP backend recalculates totals from the server product list for safer submissions.</p>
            </div>
            <div class="experience-steps">
                <div><span>01</span><strong>Browse</strong><p>Search and filter sofa styles.</p></div>
                <div><span>02</span><strong>Preview</strong><p>Open AR on supported phones.</p></div>
                <div><span>03</span><strong>Send</strong><p>Submit inquiry with validated totals.</p></div>
            </div>
        </div>
    </div>
</section>

<section class="reviews-section">
    <div class="container">
        <div class="section-heading">
            <p class="eyebrow">Buyer confidence</p>
            <h2>Premium details that help conversion</h2>
        </div>
        <div class="row g-3">
            <div class="col-md-4"><div class="review-card"><i class="bi bi-rulers" aria-hidden="true"></i><h3>Size-first shopping</h3><p>Dimensions are shown upfront so buyers can compare what fits their space.</p></div></div>
            <div class="col-md-4"><div class="review-card"><i class="bi bi-palette" aria-hidden="true"></i><h3>Color guidance</h3><p>Swatches and material notes make the sofa feel more premium and custom-ready.</p></div></div>
            <div class="col-md-4"><div class="review-card"><i class="bi bi-lock" aria-hidden="true"></i><h3>Safer checkout</h3><p>Inquiry totals are recalculated server-side instead of trusting browser prices.</p></div></div>
        </div>
    </div>
</section>

<?php require __DIR__ . '/includes/footer.php'; ?>
