<?php
$pageTitle = 'Contact Us - MeeVakeel | Get in Touch';
$metaDescription = 'Contact MeeVakeel for queries about legal consultations, lawyer registration, or platform support. We are here to help you 24/7.';
require_once '../includes/config.php';

// Handle form submission
$formSuccess = false;
$formError   = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_submit'])) {
    if (!validateCSRF($_POST['csrf_token'] ?? '')) {
        $formError = 'Invalid request. Please try again.';
    } else {
        $name    = sanitize($_POST['name'] ?? '');
        $email   = sanitizeEmail($_POST['email'] ?? '');
        $mobile  = sanitize($_POST['mobile'] ?? '');
        $subject = sanitize($_POST['subject'] ?? '');
        $message = sanitize($_POST['message'] ?? '');

        if (!$name || !$email || !$message) {
            $formError = 'Please fill in all required fields.';
        } elseif (!validateEmail($email)) {
            $formError = 'Please enter a valid email address.';
        } else {
            $db = getDB();
            $stmt = $db->prepare("INSERT INTO contact_messages (name,email,mobile,subject,message) VALUES (?,?,?,?,?)");
            $stmt->execute([$name,$email,$mobile,$subject,$message]);
            $formSuccess = true;
        }
    }
}

require_once '../includes/header.php';
$settings = getSiteSettings();
?>

<!-- Page Hero -->
<section class="page-hero">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-3">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item active">Contact Us</li>
            </ol>
        </nav>
        <h1 class="mb-2">Get in <span style="color:var(--gold);">Touch</span></h1>
        <p style="color:rgba(255,255,255,0.75);max-width:520px;">Have a question, need support, or want to partner with us? We'd love to hear from you.</p>
    </div>
</section>

<!-- ── CONTACT SECTION ── -->
<section class="section">
    <div class="container">
        <div class="row g-5">

            <!-- LEFT — Info Cards -->
            <div class="col-lg-4">
                <h4 style="font-size:1.1rem;margin-bottom:24px;">How Can We Help?</h4>

                <?php
                $contacts = [
                    ['icon'=>'fas fa-phone-alt',      'color'=>'var(--primary)',  'title'=>'Call Us',         'lines'=>[$settings['site_phone'] ?? '+91 9876543210','Mon – Sat, 9 AM – 7 PM']],
                    ['icon'=>'fas fa-envelope',        'color'=>'var(--gold-dark)','title'=>'Email Us',        'lines'=>[$settings['site_email'] ?? 'info@meevakeel.in','We reply within 24 hours']],
                    ['icon'=>'fab fa-whatsapp',        'color'=>'#25D366',         'title'=>'WhatsApp',        'lines'=>['+91 '.($settings['site_whatsapp'] ?? '9876543210'),'Chat anytime, instant response']],
                    ['icon'=>'fas fa-map-marker-alt',  'color'=>'#e74c3c',         'title'=>'Office Address',  'lines'=>['H. No. 8-1-68/3/70/82, Flat No. 402, 4th Floor, Royal Mansion, Jai Hind Nagar, Shaikpet, Hyderabad – 500008, Telangana.']],
                ];
                foreach($contacts as $c): ?>
                <div style="display:flex;gap:16px;padding:20px;background:white;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:16px;transition:var(--transition);"
                     onmouseover="this.style.transform='translateX(4px)';this.style.borderColor='var(--gold)'"
                     onmouseout="this.style.transform='';this.style.borderColor='var(--border)'">
                    <div style="width:48px;height:48px;min-width:48px;background:<?= $c['color'] ?>;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:white;">
                        <i class="<?= $c['icon'] ?>"></i>
                    </div>
                    <div>
                        <div style="font-weight:700;font-size:0.88rem;color:var(--primary);margin-bottom:4px;"><?= $c['title'] ?></div>
                        <?php foreach($c['lines'] as $l): ?>
                        <div style="font-size:0.83rem;color:var(--text-light);"><?= $l ?></div>
                        <?php endforeach; ?>
                    </div>
                </div>
                <?php endforeach; ?>

                <!-- Social -->
                <div style="background:var(--primary);border-radius:16px;padding:24px;margin-top:8px;">
                    <h6 style="color:var(--gold);margin-bottom:16px;font-size:0.9rem;">Follow Us</h6>
                    <div style="display:flex;gap:10px;flex-wrap:wrap;">
                        <?php
                        $socials = [
                            ['icon'=>'fab fa-facebook-f', 'url'=>$settings['facebook_url'] ?? '#', 'bg'=>'#1877F2'],
                            ['icon'=>'fab fa-twitter',    'url'=>$settings['twitter_url'] ?? '#',  'bg'=>'#1DA1F2'],
                            ['icon'=>'fab fa-linkedin-in','url'=>$settings['linkedin_url'] ?? '#', 'bg'=>'#0A66C2'],
                            ['icon'=>'fab fa-youtube',    'url'=>'#',                               'bg'=>'#FF0000'],
                            ['icon'=>'fab fa-instagram',  'url'=>'#',                               'bg'=>'#E4405F'],
                        ];
                        foreach($socials as $s): ?>
                        <a href="<?= $s['url'] ?>" target="_blank"
                           style="width:40px;height:40px;background:<?= $s['bg'] ?>;border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-size:0.9rem;text-decoration:none;transition:var(--transition);"
                           onmouseover="this.style.transform='translateY(-3px)'"
                           onmouseout="this.style.transform=''">
                            <i class="<?= $s['icon'] ?>"></i>
                        </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <!-- RIGHT — Form -->
            <div class="col-lg-8">
                <div style="background:white;border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--border);">
                    <div style="background:linear-gradient(135deg,var(--primary),#1a3a6b);padding:32px 36px;">
                        <h3 style="color:white;margin-bottom:6px;font-size:1.4rem;">Send Us a Message</h3>
                        <p style="color:rgba(255,255,255,0.65);margin:0;font-size:0.88rem;">Fill out the form and our team will get back to you within 24 hours.</p>
                    </div>

                    <div style="padding:36px;">
                        <?php if ($formSuccess): ?>
                        <div style="background:rgba(40,167,69,0.08);border:1px solid rgba(40,167,69,0.3);border-radius:14px;padding:28px;text-align:center;">
                            <div style="width:64px;height:64px;background:rgba(40,167,69,0.12);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.8rem;color:var(--success);">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <h5 style="color:var(--primary);margin-bottom:8px;">Message Sent Successfully!</h5>
                            <p style="color:var(--text-light);font-size:0.9rem;margin:0;">Thank you for contacting us. Our team will respond to your query within 24 hours.</p>
                           <a href="<?= SITE_URL ?>/pages/contact.php" style="display:inline-block;margin-top:18px;background:var(--primary);color:white;padding:10px 28px;border-radius:50px;font-weight:600;font-size:0.88rem;text-decoration:none;">Send Another Message</a>
                        </div>
                        <?php else: ?>
                        <?php if ($formError): ?>
                        <div class="alert alert-danger border-0 rounded-3 mb-4" style="font-size:0.88rem;">
                            <i class="fas fa-exclamation-circle me-2"></i><?= $formError ?>
                        </div>
                        <?php endif; ?>

                        <form method="POST" action="">
                            <input type="hidden" name="csrf_token" value="<?= generateCSRF() ?>">
                            <input type="hidden" name="contact_submit" value="1">

                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label">Full Name <span style="color:red;">*</span></label>
                                    <div style="position:relative;">
                                        <i class="fas fa-user" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:0.85rem;"></i>
                                        <input type="text" name="name" class="form-control" style="padding-left:40px;" placeholder="Your full name" value="<?= htmlspecialchars($_POST['name'] ?? '') ?>" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email Address <span style="color:red;">*</span></label>
                                    <div style="position:relative;">
                                        <i class="fas fa-envelope" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:0.85rem;"></i>
                                        <input type="email" name="email" class="form-control" style="padding-left:40px;" placeholder="your@email.com" value="<?= htmlspecialchars($_POST['email'] ?? '') ?>" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Mobile Number</label>
                                    <div style="position:relative;">
                                        <i class="fas fa-phone" style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:0.85rem;"></i>
                                        <input type="tel" name="mobile" class="form-control" style="padding-left:40px;" placeholder="+91 XXXXX XXXXX" value="<?= htmlspecialchars($_POST['mobile'] ?? '') ?>">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Subject</label>
                                    <select name="subject" class="form-select">
                                        <option value="">Select a subject</option>
                                        <option value="General Enquiry"        <?= (($_POST['subject'] ?? '') === 'General Enquiry') ? 'selected' : '' ?>>General Enquiry</option>
                                        <option value="Lawyer Registration"    <?= (($_POST['subject'] ?? '') === 'Lawyer Registration') ? 'selected' : '' ?>>Lawyer Registration</option>
                                        <option value="Client Support"         <?= (($_POST['subject'] ?? '') === 'Client Support') ? 'selected' : '' ?>>Client Support</option>
                                        <option value="Payment Issue"          <?= (($_POST['subject'] ?? '') === 'Payment Issue') ? 'selected' : '' ?>>Payment Issue</option>
                                        <option value="Technical Issue"        <?= (($_POST['subject'] ?? '') === 'Technical Issue') ? 'selected' : '' ?>>Technical Issue</option>
                                        <option value="Partnership"            <?= (($_POST['subject'] ?? '') === 'Partnership') ? 'selected' : '' ?>>Partnership</option>
                                        <option value="Other"                  <?= (($_POST['subject'] ?? '') === 'Other') ? 'selected' : '' ?>>Other</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Your Message <span style="color:red;">*</span></label>
                                    <textarea name="message" class="form-control" rows="5" placeholder="Describe your query in detail..." required><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea>
                                </div>
                                <div class="col-12">
                                    <div style="background:var(--off-white);border-radius:10px;padding:14px 18px;margin-bottom:4px;font-size:0.82rem;color:var(--text-light);">
                                        <i class="fas fa-shield-alt me-2" style="color:var(--success);"></i>
                                        Your information is secure and will never be shared with third parties.
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-gold btn-lg px-5 w-100" style="border-radius:12px;padding:14px;">
                                        <i class="fas fa-paper-plane me-2"></i>Send Message
                                    </button>
                                </div>
                            </div>
                        </form>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ── QUICK LINKS ── -->
<section class="section-light" style="padding:60px 0;">
    <div class="container">
        <div class="text-center mb-4">
            <h5 style="color:var(--primary);font-size:1.05rem;">Common Questions</h5>
            <p style="color:var(--text-light);font-size:0.88rem;">Not sure what you need? Explore these quick links.</p>
        </div>
        <div class="row g-3 justify-content-center">
            <?php
           $quickLinks = [
    [
        'icon'  => 'fas fa-user-tie',
        'label' => 'Register as Lawyer',
        'url'   => SITE_URL . '/register-lawyer.php',
        'desc'  => 'Join our platform free'
    ],

    [
        'icon'  => 'fas fa-search',
        'label' => 'Find a Lawyer',
        'url'   => SITE_URL . '/lawyers.php',
        'desc'  => 'Browse verified advocates'
    ],

    [
        'icon'  => 'fas fa-question-circle',
        'label' => 'FAQ',
        'url'   => SITE_URL . '/pages/faq.php',
        'desc'  => 'Common questions answered'
    ],

    [
        'icon'  => 'fas fa-file-alt',
        'label' => 'Legal Guide',
        'url'   => SITE_URL . '/blog.php',
        'desc'  => 'Free legal articles'
    ],
];
            foreach($quickLinks as $l): ?>
            <div class="col-6 col-md-3">
                <a href="<?= $l['url'] ?>" style="display:block;background:white;border-radius:16px;padding:24px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);text-decoration:none;transition:var(--transition);"
                   onmouseover="this.style.transform='translateY(-4px)';this.style.borderColor='var(--gold)'"
                   onmouseout="this.style.transform='';this.style.borderColor='var(--border)'">
                    <div style="width:48px;height:48px;background:linear-gradient(135deg,var(--primary),#1a3a6b);border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.1rem;color:var(--gold);">
                        <i class="<?= $l['icon'] ?>"></i>
                    </div>
                    <div style="font-weight:700;font-size:0.9rem;color:var(--primary);margin-bottom:4px;"><?= $l['label'] ?></div>
                    <div style="font-size:0.78rem;color:var(--text-light);"><?= $l['desc'] ?></div>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- ── MAP PLACEHOLDER ── -->
<div style="background:#e8edf2;height:320px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;">
    <div style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,35,66,0.04),rgba(10,35,66,0.08));"></div>
    <div style="text-align:center;position:relative;z-index:1;">
        <i class="fas fa-map-marker-alt" style="font-size:3rem;color:var(--primary);margin-bottom:16px;display:block;"></i>
        <h5 style="color:var(--primary);margin-bottom:6px;">MeeVakeel Headquarters</h5>
        <p style="color:var(--text-light);font-size:0.88rem;">Hyderabad, Telangana, India – 500001</p>
        <a href="https://maps.google.com/?q=Hyderabad+Telangana+India" target="_blank"
           style="background:var(--primary);color:white;padding:10px 24px;border-radius:50px;font-size:0.85rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin-top:10px;">
            <i class="fas fa-external-link-alt"></i>Open in Google Maps
        </a>
    </div>
</div>

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