<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="contact_page" inherit_id="website.contactus" name="Shivasakthi Contact Page" priority="1000">
            <xpath expr="//div[@id='wrap']" position="replace">
                <div id="wrap" class="oe_structure">
                    
                    <!-- 1. HERO BANNER -->
                    <section class="s_page_title o_colored_level position-relative" style="background-color: #04121D; background-image: url('/dine360_theme_shivasakthi/static/src/img/contact-banner-bg.png'); background-size: cover; background-position: center; padding: 160px 0 120px 0;">
                         <div class="position-absolute w-100 h-100" style="top: 0; left: 0; background-color: rgba(0,0,0,0.6); z-index: 1;"></div>
                         <div class="container text-center text-white position-relative" style="z-index: 2;">
                            <h1 class="display-3 fw-bold mb-3 text-uppercase" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 2px;">Contact</h1>
                            <nav aria-label="breadcrumb" class="d-flex justify-content-center">
                                <ol class="breadcrumb mb-0" style="background: transparent; font-size: 14px; text-transform: uppercase; font-weight: 500;">
                                    <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none hover-yellow">Home</a></li>
                                    <li class="breadcrumb-item active" style="color: #e5b945;" aria-current="page">Contact</li>
                                </ol>
                            </nav>
                         </div>
                    </section>

                    <!-- 2. GET IN TOUCH WITH US + DARK CARDS -->
                    <section class="s_contact_get_in_touch pt-5 pb-5 bg-white position-relative" style="z-index: 10;">
                        <div class="container pt-5 pb-5">
                            <div class="text-center mb-5">
                                <h6 style="color: #e5b945; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin-bottom: 15px;">Contact Us</h6>
                                <h2 class="display-5 fw-bold text-uppercase mb-4" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #111;">Get In Touch With Us</h2>
                                <p class="text-muted" style="max-width: 900px; margin: 0 auto; font-size: 15px; line-height: 1.8;">
                                    We're always happy to connect with you at Shiva Sakthi Restaurant. Conveniently located in a prime and easily accessible area, our restaurant welcomes guests who are looking for fresh, authentic South Indian meals served with care. Whether you want to make a reservation, check our menu, place a takeaway order, or inquire about catering services, our team is ready to assist you. Visitors can reach us by phone, email, or through the contact form on this page. We aim to respond quickly to all inquiries and ensure every guest enjoys a smooth experience. Drop by, get in touch, or simply say hello - we look forward to serving you.
                                </p>
                            </div>

                            <div class="row g-4 justify-content-center mt-4">
                                <!-- Call Us -->
                                <div class="col-lg-4 col-md-6">
                                    <div class="contact-dark-card d-flex align-items-center p-4 h-100">
                                        <div class="icon-box bg-white d-flex align-items-center justify-content-center me-4">
                                            <i class="fa fa-phone" style="color: #e5b945; font-size: 20px;"></i>
                                        </div>
                                        <div>
                                            <h6 class="text-white fw-bold mb-1" style="font-size: 16px;">Call Us</h6>
                                            <p class="text-white-50 mb-0" style="font-size: 14px;">905-677-3555</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- Email Address -->
                                <div class="col-lg-4 col-md-6">
                                    <div class="contact-dark-card d-flex align-items-center p-4 h-100">
                                        <div class="icon-box bg-white d-flex align-items-center justify-content-center me-4">
                                            <i class="fa fa-envelope-o" style="color: #e5b945; font-size: 20px;"></i>
                                        </div>
                                        <div>
                                            <h6 class="text-white fw-bold mb-1" style="font-size: 16px;">Email Address</h6>
                                            <p class="text-white-50 mb-0" style="font-size: 14px;">info@shivasakthi.ca</p>
                                        </div>
                                    </div>
                                </div>
                                <!-- Location -->
                                <div class="col-lg-4 col-md-6">
                                    <div class="contact-dark-card d-flex align-items-center p-4 h-100">
                                        <div class="icon-box bg-white d-flex align-items-center justify-content-center me-4">
                                            <i class="fa fa-map-marker" style="color: #e5b945; font-size: 20px;"></i>
                                        </div>
                                        <div>
                                            <h6 class="text-white fw-bold mb-1" style="font-size: 16px;">Location</h6>
                                            <p class="text-white-50 mb-0" style="font-size: 14px;">7166 Airport Road, Mississauga,<br/>Ontario L4T 2H2, Canada.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 3. FORM & IMAGE SECTION (Dark wrapper, Light inner) -->
                    <section class="s_contact_form_split pt-5 pb-5" style="background-color: #111;">
                        <div class="container pt-5 pb-5">
                            <div class="row g-0">
                                <!-- Left Image -->
                                <div class="col-lg-6">
                                    <img src="/dine360_theme_shivasakthi/static/src/img/contact_v2/interior.png" class="img-fluid w-100 h-100" style="object-fit: cover; min-height: 500px;" alt="Interior"/>
                                </div>

                                <!-- Right Form (Cream Background) -->
                                <div class="col-lg-6" style="background-color: #F6F4EB; padding: 60px;">
                                    <h2 class="fw-bold text-uppercase mb-3" style="font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; color: #111; font-size: 32px;">Send Us Message</h2>
                                    <p class="text-muted mb-4" style="font-size: 14px; line-height: 1.6;">
                                        Have a question or need assistance? Fill out the form below and our team will get back to you as soon as possible. *
                                    </p>
                                    
                                    <!-- Standard HTML Form -->
                                    <form action="/contactus/submit" method="post" enctype="multipart/form-data">
                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                        <div class="row g-3">
                                            
                                            <!-- Full Name -->
                                            <div class="col-md-6">
                                                <input type="text" class="form-control bg-white contact-input" name="name" required="1" placeholder="Full Name"/>
                                            </div>

                                            <!-- Email Address -->
                                            <div class="col-md-6">
                                                <input type="email" class="form-control bg-white contact-input" name="email_from" required="1" placeholder="Email Address"/>
                                            </div>

                                            <!-- Phone Number -->
                                            <div class="col-md-6">
                                                <input type="tel" class="form-control bg-white contact-input" name="phone" required="1" placeholder="Phone"/>
                                            </div>

                                            <!-- Subject -->
                                            <div class="col-md-6">
                                                <input type="text" class="form-control bg-white contact-input" name="subject" required="1" placeholder="Subject"/>
                                            </div>

                                            <!-- Message -->
                                            <div class="col-12">
                                                <textarea class="form-control bg-white contact-input" name="description" required="1" placeholder="Write Message" rows="5"></textarea>
                                            </div>

                                            <!-- Submit Button -->
                                            <div class="col-12 mt-4">
                                                <button type="submit" class="btn fw-bold text-white px-4 py-3 text-uppercase" style="background-color: #e5b945; border: none; font-size: 14px; letter-spacing: 1px; border-radius: 2px;">
                                                    Send Message Us <i class="fa fa-paper-plane ms-2"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 4. MAP SECTION -->
                    <section class="s_map" data-snippet="s_map" data-name="Map">
                        <div class="map_container o_not_editable" style="height: 500px !important; width: 100%;">
                             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2882.023604364022!2d-79.69973268450123!3d43.79155297911666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b3d8f3b1b3b1b%3A0x1b3b1b3b1b3b1b3b!2s11665%20McVean%20Dr%2C%20Mississauga%2C%20ON%20L6P%201J7%2C%20Canada!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" 
                                width="100%" height="500" style="border:0; height: 500px !important; width: 100%;" allowfullscreen="" loading="lazy"></iframe>
                        </div>
                    </section>

                </div>
            </xpath>
        </template>

        <template id="contact_thank_you" name="Contact Thank You">
            <t t-call="website.layout">
                <div id="wrap">
                    <section class="pt120 pb120" style="background-color: #F9F6F0;">
                        <div class="container text-center">
                            <div class="mb-4">
                                <i class="fa fa-check-circle-o fa-5x" style="color: #e5b945;"></i>
                            </div>
                            <h1 class="display-3 fw-bold mb-3" style="color: #04121D;">Thank You!</h1>
                            <p class="lead text-muted mb-5">Your message has been successfully sent to us.<br/>We will get back to you as soon as possible.</p>
                            <a href="/" class="btn btn-lg flat" style="background-color: #e5b945; color: #04121D; font-weight: 700; padding: 15px 40px; border-radius: 4px; text-transform: uppercase;">Back to Home</a>
                        </div>
                    </section>
                </div>
            </t>
        </template>

    </data>
</odoo>
