<?php
$page_title = 'Smart Buying Tools';
require_once __DIR__ . '/header.php';
?>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-tools" style="color:#10b981; margin-right:10px;"></i>Smart Buying Tools</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Product configurator, bundle builder, discount calculator, and EMI options.</p>
    </div>
</div>

<div class="grid-2" style="margin-bottom:24px;">
    <!-- Product Configurator -->
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-sliders-h" style="color:#2563eb; margin-right:8px;"></i>Product Configurator</h3>
        <div style="margin-bottom:15px;">
            <label style="font-size:0.85rem; font-weight:600; color:#475569; display:block; margin-bottom:5px;">Size</label>
            <div style="display:flex; gap:8px;">
                <?php foreach (['24×18"','32×20"','37×18"','45×20"'] as $s): ?>
                <button style="padding:8px 14px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.8rem; cursor:pointer; background:<?= $s==='32×20"' ? '#2563eb' : '#fff' ?>; color:<?= $s==='32×20"' ? '#fff' : '#475569' ?>;"><?= $s ?></button>
                <?php endforeach; ?>
            </div>
        </div>
        <div style="margin-bottom:15px;">
            <label style="font-size:0.85rem; font-weight:600; color:#475569; display:block; margin-bottom:5px;">Material</label>
            <div style="display:flex; gap:8px;">
                <button style="padding:8px 14px; border:2px solid #2563eb; border-radius:6px; font-size:0.8rem; cursor:pointer; background:#eff6ff; color:#2563eb; font-weight:600;">SS 304</button>
                <button style="padding:8px 14px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.8rem; cursor:pointer; background:#fff; color:#475569;">SS 202</button>
                <button style="padding:8px 14px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.8rem; cursor:pointer; background:#fff; color:#475569;">SS 316</button>
            </div>
        </div>
        <div style="margin-bottom:15px;">
            <label style="font-size:0.85rem; font-weight:600; color:#475569; display:block; margin-bottom:5px;">Finish</label>
            <div style="display:flex; gap:8px;">
                <button style="padding:8px 14px; border:2px solid #2563eb; border-radius:6px; font-size:0.8rem; cursor:pointer; background:#eff6ff; color:#2563eb; font-weight:600;">Gloss</button>
                <button style="padding:8px 14px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.8rem; cursor:pointer; background:#fff; color:#475569;">Matte</button>
                <button style="padding:8px 14px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.8rem; cursor:pointer; background:#fff; color:#475569;">Black PVD</button>
                <button style="padding:8px 14px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.8rem; cursor:pointer; background:#fff; color:#475569;">Rose Gold</button>
            </div>
        </div>
        <div style="background:#f0fdf4; border:1px solid #bbf7d0; padding:15px; border-radius:8px;">
            <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
                <span style="font-weight:600; color:#166534;">Configured Price</span>
                <span style="font-weight:bold; font-size:1.2rem; color:#166534;">₹8,450</span>
            </div>
            <div style="font-size:0.8rem; color:#64748b;">32×20" · SS 304 · Gloss Finish</div>
        </div>
    </div>

    <!-- Bundle Builder -->
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-boxes" style="color:#ec4899; margin-right:8px;"></i>Bundle Builder</h3>
        <p style="font-size:0.85rem; color:#64748b; margin-bottom:15px;">Build your kitchen package and save up to 15%.</p>
        <?php
        $bundle = [
            ['Double Bowl Sink (SS 304)', '₹8,450', true, '#2563eb'],
            ['Premium Pull-Down Faucet', '₹4,200', true, '#10b981'],
            ['Soap Dispenser', '₹850', true, '#f59e0b'],
            ['Drain Basket Set', '₹1,200', false, '#8b5cf6'],
            ['Under-Sink Organizer', '₹2,400', false, '#ec4899'],
        ];
        foreach ($bundle as $b): ?>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f1f5f9;">
            <div style="display:flex; align-items:center; gap:10px;">
                <input type="checkbox" <?= $b[2] ? 'checked' : '' ?> style="width:18px; height:18px; accent-color:#2563eb;">
                <span style="font-size:0.9rem; font-weight:500;"><?= $b[0] ?></span>
            </div>
            <span style="font-weight:bold; font-size:0.9rem; color:#0f172a;"><?= $b[1] ?></span>
        </div>
        <?php endforeach; ?>
        <div style="background:linear-gradient(135deg,#ec4899,#be185d); color:#fff; padding:15px; border-radius:8px; margin-top:15px;">
            <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
                <span>Bundle Total</span><span style="text-decoration:line-through; opacity:0.7;">₹13,500</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:1.2rem; font-weight:bold;">
                <span>You Pay</span><span>₹11,475 <span style="font-size:0.8rem; font-weight:normal;">(15% off)</span></span>
            </div>
        </div>
    </div>
</div>

<div class="grid-2">
    <!-- Quantity Discount Calculator -->
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-calculator" style="color:#f59e0b; margin-right:8px;"></i>Quantity Discount Calculator</h3>
        <div style="display:flex; gap:10px; margin-bottom:15px;">
            <input type="number" value="25" style="width:80px; padding:8px; border:1px solid #e2e8f0; border-radius:6px; text-align:center; font-size:1rem;">
            <span style="align-self:center; color:#64748b;">units × ₹8,450</span>
        </div>
        <?php
        $tiers = [
            ['1–9 units', '0%', '₹8,450', false],
            ['10–24 units', '5%', '₹8,028', false],
            ['25–49 units', '8%', '₹7,774', true],
            ['50+ units', '12%', '₹7,436', false],
        ];
        foreach ($tiers as $t): ?>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:8px 12px; margin-bottom:5px; border-radius:6px; background:<?= $t[3] ? '#eff6ff' : '#f8fafc' ?>; border:1px solid <?= $t[3] ? '#2563eb' : '#e2e8f0' ?>;">
            <span style="font-size:0.85rem; font-weight:<?= $t[3] ? '700' : '500' ?>; color:<?= $t[3] ? '#2563eb' : '#475569' ?>;"><?= $t[0] ?></span>
            <div><span style="color:#10b981; font-weight:600; font-size:0.85rem;"><?= $t[1] ?> off</span> · <span style="font-weight:bold;"><?= $t[2] ?></span>/unit</div>
        </div>
        <?php endforeach; ?>
    </div>

    <!-- EMI Calculator -->
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-credit-card" style="color:#8b5cf6; margin-right:8px;"></i>EMI Calculator</h3>
        <div style="background:#f8fafc; padding:15px; border-radius:8px; margin-bottom:15px;">
            <div style="font-size:0.85rem; color:#64748b; margin-bottom:5px;">Order Amount</div>
            <div style="font-size:1.5rem; font-weight:700; color:#0f172a;">₹1,94,350</div>
        </div>
        <?php
        $emis = [
            ['3 Months', '₹64,783/mo', '0% Interest', '#10b981'],
            ['6 Months', '₹32,725/mo', '2% Interest', '#3b82f6'],
            ['9 Months', '₹22,150/mo', '4% Interest', '#f59e0b'],
            ['12 Months', '₹16,862/mo', '6% Interest', '#8b5cf6'],
        ];
        foreach ($emis as $e): ?>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:8px; cursor:pointer;" onmouseover="this.style.borderColor='#2563eb'" onmouseout="this.style.borderColor='#e2e8f0'">
            <div>
                <div style="font-weight:600; font-size:0.9rem;"><?= $e[0] ?></div>
                <div style="font-size:0.75rem; color:#94a3b8;"><?= $e[2] ?></div>
            </div>
            <span style="font-weight:bold; color:<?= $e[3] ?>;"><?= $e[1] ?></span>
        </div>
        <?php endforeach; ?>
    </div>
</div>

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