<?php
$page_title = 'Community & Social';
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;">Social & Community Hub</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Customer stories, installation galleries, forums, and live webinars.</p>
    </div>
</div>

<div class="grid-3" style="margin-bottom:24px;">
    <!-- Customer Stories -->
    <div class="card" style="margin-bottom:0;">
        <div style="height:140px; background:linear-gradient(135deg, #e0f2fe, #dbeafe); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:15px;">
            <i class="fas fa-quote-left" style="font-size:3rem; color:#3b82f6; opacity:0.3;"></i>
        </div>
        <h4 style="margin:0 0 5px; color:#0f172a;">Sharma Kitchens, Mumbai</h4>
        <p style="margin:0 0 10px; font-size:0.85rem; color:#64748b; line-height:1.5;">"The SS-304 sinks have been a game changer for our projects. Zero complaints from any of our 200+ installations."</p>
        <div style="display:flex; align-items:center; gap:5px;">
            <i class="fas fa-star" style="color:#f59e0b; font-size:0.8rem;"></i>
            <i class="fas fa-star" style="color:#f59e0b; font-size:0.8rem;"></i>
            <i class="fas fa-star" style="color:#f59e0b; font-size:0.8rem;"></i>
            <i class="fas fa-star" style="color:#f59e0b; font-size:0.8rem;"></i>
            <i class="fas fa-star" style="color:#f59e0b; font-size:0.8rem;"></i>
        </div>
    </div>

    <!-- Installation Gallery -->
    <div class="card" style="margin-bottom:0;">
        <div style="height:140px; 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:#8b5cf6; opacity:0.3;"></i>
        </div>
        <h4 style="margin:0 0 5px; color:#0f172a;">Installation Gallery</h4>
        <p style="margin:0 0 10px; font-size:0.85rem; color:#64748b;">Browse 450+ real-world kitchen installations by verified architects.</p>
        <a href="#" style="color:#2563eb; font-size:0.85rem; font-weight:600; text-decoration:none;">Browse Gallery →</a>
    </div>

    <!-- Live Webinars -->
    <div class="card" style="margin-bottom:0;">
        <div style="height:140px; background:linear-gradient(135deg, #dcfce7, #d1fae5); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:15px;">
            <i class="fas fa-video" style="font-size:3rem; color:#10b981; opacity:0.3;"></i>
        </div>
        <h4 style="margin:0 0 5px; color:#0f172a;">Live Product Webinar</h4>
        <p style="margin:0 0 10px; font-size:0.85rem; color:#64748b;">Next: "SS 304 vs 202 — Choosing the Right Grade" — 5 May, 3 PM</p>
        <button style="background:#10b981; color:#fff; border:none; padding:6px 14px; border-radius:6px; font-size:0.85rem; cursor:pointer;">Register Free</button>
    </div>
</div>

<div class="grid-2">
    <!-- Community Forum -->
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-comments" style="color:#6366f1; margin-right:8px;"></i> Discussion Board</h3>
        <div style="border-bottom:1px solid #f1f5f9; padding:12px 0;">
            <h4 style="margin:0 0 3px; font-size:0.95rem; color:#2563eb; cursor:pointer;">Best practices for SS sink maintenance?</h4>
            <p style="margin:0; font-size:0.8rem; color:#94a3b8;">12 replies • Last active 2 hrs ago</p>
        </div>
        <div style="border-bottom:1px solid #f1f5f9; padding:12px 0;">
            <h4 style="margin:0 0 3px; font-size:0.95rem; color:#2563eb; cursor:pointer;">PVD finish durability — 5 year review</h4>
            <p style="margin:0; font-size:0.8rem; color:#94a3b8;">8 replies • Last active 1 day ago</p>
        </div>
        <div style="padding:12px 0;">
            <h4 style="margin:0 0 3px; font-size:0.95rem; color:#2563eb; cursor:pointer;">Recommended faucet for hard water regions?</h4>
            <p style="margin:0; font-size:0.8rem; color:#94a3b8;">21 replies • Last active 3 hrs ago</p>
        </div>
    </div>

    <!-- Referral Network -->
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-share-alt" style="color:#ec4899; margin-right:8px;"></i> Referral Network</h3>
        <div style="background:#fdf2f8; padding:20px; border-radius:8px; border:1px solid #fce7f3; text-align:center; margin-bottom:15px;">
            <div style="font-size:2rem; font-weight:bold; color:#be185d;">₹2,400</div>
            <p style="margin:5px 0 0; font-size:0.85rem; color:#9d174d;">Total earnings from 8 successful referrals</p>
        </div>
        <div style="display:flex; gap:10px;">
            <input type="text" value="https://balimeen.com/ref/SHARMA2024" readonly style="flex:1; padding:8px 12px; border:1px solid #e2e8f0; border-radius:6px; font-size:0.85rem; background:#f8fafc; color:#64748b;">
            <button style="background:#2563eb; color:#fff; border:none; padding:8px 14px; border-radius:6px; font-size:0.85rem; cursor:pointer;"><i class="fas fa-copy"></i></button>
        </div>
    </div>
</div>

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