<?php
$page_title = 'Customer Community';
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-users" style="color:#6366f1; margin-right:10px;"></i>Customer Community</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Reviews, ratings, Q&A forum, customer gallery, referrals, and brand ambassadors.</p>
    </div>
</div>
<div class="grid-3" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0;">
        <div style="height:120px; background:linear-gradient(135deg,#e0f2fe,#dbeafe); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:15px;">
            <i class="fas fa-star" style="font-size:3rem; color:#f59e0b; opacity:0.4;"></i>
        </div>
        <h4 style="margin:0 0 5px; color:#0f172a;">Product Reviews</h4>
        <p style="margin:0 0 10px; font-size:0.85rem; color:#64748b;">Share your experience with 2,400+ verified reviews.</p>
        <div style="display:flex; align-items:center; gap:5px; margin-bottom:8px;">
            <span style="font-size:1.5rem; font-weight:bold; color:#0f172a;">4.6</span>
            <div>
                <?php for($i=0;$i<5;$i++): ?><i class="fas fa-star" style="color:#f59e0b; font-size:0.75rem;"></i><?php endfor; ?>
                <div style="font-size:0.7rem; color:#94a3b8;">2,418 reviews</div>
            </div>
        </div>
        <button style="background:#2563eb; color:#fff; border:none; padding:8px 16px; border-radius:6px; font-size:0.85rem; cursor:pointer; width:100%;">Write a Review</button>
    </div>
    <div class="card" style="margin-bottom:0;">
        <div style="height:120px; background:linear-gradient(135deg,#fce7f3,#ede9fe); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:15px;">
            <i class="fas fa-images" style="font-size:3rem; color:#ec4899; opacity:0.4;"></i>
        </div>
        <h4 style="margin:0 0 5px; color:#0f172a;">Customer Gallery</h4>
        <p style="margin:0 0 10px; font-size:0.85rem; color:#64748b;">450+ real kitchen installations by verified customers.</p>
        <a href="#" style="color:#2563eb; font-size:0.85rem; font-weight:600; text-decoration:none;">Browse Gallery →</a>
    </div>
    <div class="card" style="margin-bottom:0;">
        <div style="height:120px; background:linear-gradient(135deg,#dcfce7,#d1fae5); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:15px;">
            <i class="fas fa-medal" style="font-size:3rem; color:#10b981; opacity:0.4;"></i>
        </div>
        <h4 style="margin:0 0 5px; color:#0f172a;">Brand Ambassador</h4>
        <p style="margin:0 0 10px; font-size:0.85rem; color:#64748b;">Join the ambassador program. Earn rewards for every referral.</p>
        <button style="background:#10b981; color:#fff; border:none; padding:8px 16px; border-radius:6px; font-size:0.85rem; cursor:pointer; width:100%;">Apply Now</button>
    </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-question-circle" style="color:#6366f1; margin-right:8px;"></i>Q&A Forum</h3>
        <?php
        $qas = [
            ['What cleaning products work best for PVD Black sinks?', 14, '3 hrs ago'],
            ['SS 304 vs SS 202 — durability in coastal areas?', 22, '1 day ago'],
            ['Can I install a garbage disposer with this sink?', 8, '2 days ago'],
            ['Best faucet height for 24" sinks?', 11, '3 days ago'],
        ];
        foreach ($qas as $q): ?>
        <div style="padding:12px 0; border-bottom:1px solid #f1f5f9;">
            <h4 style="margin:0 0 3px; font-size:0.9rem; color:#2563eb; cursor:pointer;"><?= $q[0] ?></h4>
            <p style="margin:0; font-size:0.75rem; color:#94a3b8;"><?= $q[1] ?> answers · <?= $q[2] ?></p>
        </div>
        <?php endforeach; ?>
        <button style="background:#f8fafc; color:#475569; border:1px solid #e2e8f0; padding:8px 16px; border-radius:6px; font-size:0.85rem; cursor:pointer; width:100%; margin-top:15px;"><i class="fas fa-plus"></i> Ask a Question</button>
    </div>
    <div class="card" style="background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff;">
        <h3 style="margin:0 0 15px; font-size:1.15rem;"><i class="fas fa-gift"></i> Referral Community</h3>
        <div style="background:rgba(255,255,255,0.1); padding:20px; border-radius:8px; text-align:center; margin-bottom:15px;">
            <div style="font-size:2rem; font-weight:bold;">₹2,400</div>
            <p style="margin:5px 0 0; font-size:0.85rem; opacity:0.85;">Earned from 8 successful referrals</p>
        </div>
        <div style="display:flex; gap:10px; margin-bottom:15px;">
            <input type="text" value="https://balimeen.com/ref/SHARMA2024" readonly style="flex:1; padding:8px 12px; border:1px solid rgba(255,255,255,0.2); border-radius:6px; font-size:0.8rem; background:rgba(255,255,255,0.1); color:#fff;">
            <button style="background:#fff; color:#4f46e5; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:bold;"><i class="fas fa-copy"></i></button>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem;">
            <span>Total Referrals</span><span style="font-weight:bold;">12</span>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-top:5px;">
            <span>Converted</span><span style="font-weight:bold;">8 (67%)</span>
        </div>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
