<?php
$page_title = 'Personalization';
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-magic" style="color:#ec4899; margin-right:10px;"></i>Personalization</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Saved designs, favorites, AI shopping assistant, and personalized offers.</p>
    </div>
</div>
<div class="grid-2" style="margin-bottom:24px;">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-palette" style="color:#ec4899; margin-right:8px;"></i>Saved Kitchen Designs</h3>
        <?php
        $designs = [
            ['Modern L-Shape Kitchen', 'SS 304 · Black PVD Finish', 'Apr 15', '#0f172a'],
            ['Classic Straight Kitchen', 'SS 304 · Gloss Finish', 'Mar 28', '#64748b'],
            ['Modular U-Shape (Builder)', 'SS 202 · Matte Finish', 'Mar 10', '#64748b'],
        ];
        foreach ($designs as $d): ?>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:15px; margin-bottom:10px; cursor:pointer; transition:all 0.2s;" onmouseover="this.style.borderColor='#2563eb'" onmouseout="this.style.borderColor='#e2e8f0'">
            <div style="height:80px; background:linear-gradient(135deg,#f8fafc,#e2e8f0); border-radius:6px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;">
                <i class="fas fa-drafting-compass" style="font-size:2rem; color:#94a3b8;"></i>
            </div>
            <div style="font-weight:600; font-size:0.9rem; color:#0f172a;"><?= $d[0] ?></div>
            <div style="font-size:0.75rem; color:#94a3b8;"><?= $d[1] ?> · Saved <?= $d[2] ?></div>
        </div>
        <?php endforeach; ?>
    </div>
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-heart" style="color:#ef4444; margin-right:8px;"></i>Favorite Products</h3>
        <?php
        $favs = [
            ['Double Bowl Sink 32×20"', 'SS 304 · Gloss', '₹8,450', '#2563eb'],
            ['Premium Pull-Down Faucet', 'Chrome Finish', '₹4,200', '#10b981'],
            ['PVD Black Single Bowl', 'SS 304 · 24×18"', '₹12,800', '#0f172a'],
            ['Under-Mount Sink 30×18"', 'SS 304 · Matte', '₹9,200', '#64748b'],
        ];
        foreach ($favs as $f): ?>
        <div style="display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #f1f5f9;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fas fa-heart" style="color:#ef4444;"></i>
                <div>
                    <div style="font-weight:600; font-size:0.85rem;"><?= $f[0] ?></div>
                    <div style="font-size:0.75rem; color:#94a3b8;"><?= $f[1] ?></div>
                </div>
            </div>
            <div style="text-align:right;">
                <div style="font-weight:bold; font-size:0.9rem;"><?= $f[2] ?></div>
                <button style="background:#2563eb; color:#fff; border:none; padding:3px 10px; border-radius:4px; font-size:0.7rem; cursor:pointer; margin-top:3px;">Add to Cart</button>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-brain" style="color:#8b5cf6; margin-right:8px;"></i>Recommended For You</h3>
        <p style="font-size:0.85rem; color:#64748b; margin-bottom:15px;">Based on your purchase history and preferences.</p>
        <?php
        $recs = [
            ['Handmade Farmhouse Sink', 'You bought similar: 3 months ago', '₹14,500', '#10b981'],
            ['Water Filter Attachment', 'Complements your faucet', '₹2,800', '#3b82f6'],
            ['Sink Grid Protector', 'Protects your Double Bowl', '₹1,200', '#f59e0b'],
        ];
        foreach ($recs as $r): ?>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;">
            <div>
                <div style="font-weight:600; font-size:0.85rem;"><?= $r[0] ?></div>
                <div style="font-size:0.75rem; color:#94a3b8;"><?= $r[1] ?></div>
            </div>
            <span style="font-weight:bold; color:<?= $r[3] ?>;"><?= $r[2] ?></span>
        </div>
        <?php endforeach; ?>
    </div>
    <div class="card" style="background:linear-gradient(135deg,#ec4899,#be185d); color:#fff; display:flex; flex-direction:column; justify-content:center;">
        <i class="fas fa-robot" style="font-size:2.5rem; margin-bottom:15px; opacity:0.8;"></i>
        <h3 style="margin:0 0 10px; font-size:1.3rem;">AI Shopping Assistant</h3>
        <p style="margin:0 0 20px; font-size:0.9rem; opacity:0.85;">Tell us what you need and our AI will recommend the perfect products for your kitchen.</p>
        <div style="display:flex; gap:8px;">
            <input type="text" placeholder="I need a sink for a 4-person family..." style="flex:1; padding:10px 15px; border:1px solid rgba(255,255,255,0.3); border-radius:20px; font-size:0.85rem; background:rgba(255,255,255,0.1); color:#fff; outline:none;">
            <button style="width:40px; height:40px; border-radius:50%; background:#fff; color:#be185d; border:none; cursor:pointer;"><i class="fas fa-paper-plane"></i></button>
        </div>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
