@extends('layouts.app')

@section('title', 'Contact Apex Crop Care')
@section('meta_description', 'Contact Apex Crop Care. Plot No. 3, Rameshwar Nagar, Gokhlana Road, Jasdan, Rajkot, Gujarat-360050. Email: Info@apexcropcare.com, Phone: +91 96956 35566.')
@section('og_title', 'Contact Apex Crop Care')

@section('content')

<section class="page-hero page-hero-contact">
    <div class="page-hero-bg">
        <div class="page-hero-overlay"></div>
    </div>
    <div class="container page-hero-content" data-reveal>
        <span class="page-hero-tag">Get in Touch</span>
        <h1 class="page-hero-title">Contact Us</h1>
        <p class="page-hero-subtitle">We're here to assist with your agricultural needs.</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="contact-grid">
            <div class="contact-info" data-reveal>
                <div class="contact-heading">
                    <h2 class="section-title">Apex Crop Care</h2>
                </div>
                <div class="contact-cards">
                    <div class="contact-card">
                        <div class="contact-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        </div>
                        <div class="contact-card-content">
                            <h4>Address</h4>
                            <p>Plot No. 3, Rameshwar Nagar,<br>Gokhlana Road,<br>Jasdan, Rajkot,<br>Gujarat-360050</p>
                        </div>
                    </div>
                    <div class="contact-card">
                        <div class="contact-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                        </div>
                        <div class="contact-card-content">
                            <h4>Email</h4>
                            <a href="mailto:Info@apexcropcare.com">Info@apexcropcare.com</a>
                        </div>
                    </div>
                    <div class="contact-card">
                        <div class="contact-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                        </div>
                        <div class="contact-card-content">
                            <h4>Phone</h4>
                            <a href="tel:+919695635566">+91 96956 35566</a>
                        </div>
                    </div>
                    <div class="contact-card">
                        <div class="contact-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
                        </div>
                        <div class="contact-card-content">
                            <h4>Website</h4>
                            <a href="http://www.apexcropcare.com" target="_blank" rel="noopener">www.apexcropcare.com</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contact-actions" data-reveal>
                <h2 class="section-title">Reach Out</h2>
                <p class="contact-actions-text">Contact us for more information about our products and agricultural solutions.</p>
                <div class="contact-action-buttons">
                    <a href="mailto:Info@apexcropcare.com" class="btn btn-primary btn-block">
                        Send an Email
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    </a>
                    <a href="tel:+919695635566" class="btn btn-secondary btn-block">
                        Call Us
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                    </a>
                    <a href="http://www.apexcropcare.com" target="_blank" rel="noopener" class="btn btn-outline btn-block">
                        Visit Website
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section section-map">
    <div class="container">
        <div class="map-placeholder" data-reveal>

            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14793.32317912679!2d71.20505069997965!3d22.036938178025753!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3958f7ca11c34509%3A0x48ce7d6a0a7b1b35!2sRameswara%20Nagar%2C%20Jasdan%2C%20Gujarat%20360050!5e0!3m2!1sen!2sin!4v1788358610710!5m2!1sen!2sin"
                width="100%"
                height="450"
                style="border:0;"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="strict-origin-when-cross-origin">
            </iframe>

            <div class="map-overlay-card">
                <h4>Apex Crop Care</h4>
                <p>
                    Plot No. 3, Rameshwar Nagar,<br>
                    Gokhlana Road, Jasdan,<br>
                    Rajkot, Gujarat-360050
                </p>
            </div>

        </div>
    </div>
</section>


<style>
    .map-placeholder {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.map-placeholder iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-overlay-card {
    position: absolute;
    left: 30px;
    bottom: 30px;
    max-width: 330px;
    padding: 22px 26px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.map-overlay-card h4 {
    margin: 0 0 8px;
    color: #006B5B;
    font-size: 20px;
    font-weight: 700;
}

.map-overlay-card p {
    margin: 0;
    color: #374151;
    font-size: 14px;
    line-height: 1.7;
}
</style>

@endsection