<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>

<!-- 1. Page Header / Banner -->
<section style="padding: 180px 0 100px; background: linear-gradient(to right, rgba(10, 25, 47, 0.95) 40%, rgba(10, 25, 47, 0.6) 100%), url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed;">
    <div class="container">
        <div style="max-width: 800px;">
            <span style="color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 20px;" class="animate-up">Connect With Us</span>
            <h1 style="font-size: clamp(3rem, 8vw, 5rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 30px; letter-spacing: -2px;" class="animate-up">Let's <span style="color: var(--accent);">Collaborate</span></h1>
            <p style="font-size: 1.3rem; color: rgba(255,255,255,0.7); line-height: 1.8;" class="animate-up">
                Have a project in mind? Our team of experts is ready to transform your vision into a reality.
            </p>
        </div>
    </div>
</section>

<section class="section" style="padding: 100px 0; background: #ffffff;">
    <div class="container">

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px;">
            <div class="animate-up">
                <h3 style="margin-bottom: 30px; color: var(--text-main);">Contact Information</h3>
                <div style="margin-bottom: 40px;">
                    <div style="display: flex; align-items: center; margin-bottom: 25px;">
                        <div style="width: 55px; height: 55px; background: rgba(0, 188, 212, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; color: var(--primary); font-size: 1.2rem;">
                            <i class="bi bi-geo-alt"></i>
                        </div>

                        <div>
                            <h4 style="color: var(--text-main); margin-bottom: 5px;">Our Office</h4>
                            <p style="color: var(--text-muted); font-size: 0.95rem;"><?= $site_address ?? '123 Construction Ave, NY 10001' ?></p>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; margin-bottom: 25px;">
                        <div style="width: 55px; height: 55px; background: rgba(0, 188, 212, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; color: var(--primary); font-size: 1.2rem;">
                            <i class="bi bi-telephone"></i>
                        </div>

                        <div>
                            <h4 style="color: var(--text-main); margin-bottom: 5px;">Phone Number</h4>
                            <p style="color: var(--text-muted); font-size: 0.95rem;"><?= $contact_phone ?? '+1 (234) 567-890' ?></p>
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; margin-bottom: 25px;">
                        <div style="width: 55px; height: 55px; background: rgba(0, 188, 212, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; color: var(--primary); font-size: 1.2rem;">
                            <i class="bi bi-envelope"></i>
                        </div>

                        <div>
                            <h4 style="color: var(--text-main); margin-bottom: 5px;">Email Address</h4>
                            <p style="color: var(--text-muted); font-size: 0.95rem;"><?= $contact_email ?? 'info@saanviinfratech.com' ?></p>
                        </div>
                    </div>
                </div>
                
                <h3 style="margin-bottom: 20px; color: var(--text-main);">Follow Us</h3>
                <div style="display: flex; gap: 15px;">
                    <a href="<?= $facebook_url ?? '#' ?>" style="width: 45px; height: 45px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #333; transition: all 0.3s;" onmouseover="this.style.background='var(--primary)'; this.style.color='#fff';" onmouseout="this.style.background='#f5f5f5'; this.style.color='#333';"><i class="bi bi-facebook"></i></a>
                    <a href="<?= $twitter_url ?? '#' ?>" style="width: 45px; height: 45px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #333; transition: all 0.3s;" onmouseover="this.style.background='var(--primary)'; this.style.color='#fff';" onmouseout="this.style.background='#f5f5f5'; this.style.color='#333';"><i class="bi bi-twitter-x"></i></a>
                    <a href="<?= $linkedin_url ?? '#' ?>" style="width: 45px; height: 45px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #333; transition: all 0.3s;" onmouseover="this.style.background='var(--primary)'; this.style.color='#fff';" onmouseout="this.style.background='#f5f5f5'; this.style.color='#333';"><i class="bi bi-linkedin"></i></a>
                    <a href="<?= $instagram_url ?? '#' ?>" style="width: 45px; height: 45px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #333; transition: all 0.3s;" onmouseover="this.style.background='var(--primary)'; this.style.color='#fff';" onmouseout="this.style.background='#f5f5f5'; this.style.color='#333';"><i class="bi bi-instagram"></i></a>
                </div>

            </div>

            <div style="padding: 50px; background: #ffffff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.05);">
                <form action="<?= base_url('contact/submit') ?>" method="post">
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 10px; color: var(--text-main); font-weight: 600;">Full Name</label>
                        <input type="text" name="name" style="width: 100%; padding: 15px; background: #fbfbfb; border: 1px solid #eee; border-radius: 10px; color: #333;" placeholder="Enter your name" required>
                    </div>
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 10px; color: var(--text-main); font-weight: 600;">Email Address</label>
                        <input type="email" name="email" style="width: 100%; padding: 15px; background: #fbfbfb; border: 1px solid #eee; border-radius: 10px; color: #333;" placeholder="Enter your email" required>
                    </div>
                    <div style="margin-bottom: 25px;">
                        <label style="display: block; margin-bottom: 10px; color: var(--text-main); font-weight: 600;">Project Type</label>
                        <select name="project_type" style="width: 100%; padding: 15px; background: #fbfbfb; border: 1px solid #eee; border-radius: 10px; color: #333;">
                            <option value="Residential">Residential</option>
                            <option value="Commercial">Commercial</option>
                            <option value="Industrial">Industrial</option>
                            <option value="Renovation">Renovation</option>
                        </select>
                    </div>
                    <div style="margin-bottom: 35px;">
                        <label style="display: block; margin-bottom: 10px; color: var(--text-main); font-weight: 600;">Message</label>
                        <textarea name="message" rows="5" style="width: 100%; padding: 15px; background: #fbfbfb; border: 1px solid #eee; border-radius: 10px; color: #333;" placeholder="Tell us about your project"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: 100%; padding: 18px; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>


<?= $this->endSection() ?>
