@extends('layouts.site')

@section('content')
<section class="contact-hero container" aria-labelledby="contact-hero-title">
    <div class="contact-hero-content">
        <p class="eyebrow">Talk to Tashi</p>
        <h1 id="contact-hero-title">Every real estate decision<br><em>starts with a conversation.</em></h1>
        <p class="contact-hero-intro">Buying, investing, finding a business address or managing property from abroad? Share your priorities and we will help you plan the next step.</p>
        <div class="contact-hero-badges">
            <div class="contact-badge-pill">
                <span class="badge-dot"></span>
                <span>Bengaluru On-Ground Advisory</span>
            </div>
            <div class="contact-badge-pill">
                <span class="badge-dot"></span>
                <span>Discreet & Independent</span>
            </div>
            <div class="contact-badge-pill">
                <span class="badge-dot"></span>
                <span>NRI Global Support</span>
            </div>
        </div>
    </div>
    <div class="contact-hero-visual">
        <x-editorial-image name="indian-contact-consultation" alt="Homebuyers reviewing documents with a property advisor" sizes="(max-width: 800px) 100vw, 480px" />
        <div class="contact-hero-badge">
            <span class="badge-title">Bengaluru Headquarters</span>
            <span class="badge-loc">Basavanagudi, India</span>
        </div>
    </div>
</section>
<section class="container contact-layout">
<aside>
<h2>Start with the requirement.<br>
<em>Not the listing.</em>
</h2>
<p>A home. An investment. A business address.<br>You don’t need to have it all figured out.</p>
<div class="contact-details">
<h3>Meet us in Bengaluru.</h3>
<p>{{ config('tashi.contact.address') }}</p>
@if(config('tashi.contact.phone'))
<a href="tel:{{ config('tashi.contact.phone') }}">{{ config('tashi.contact.phone') }}</a>
@endif
@if(config('tashi.contact.email'))
<a href="mailto:{{ config('tashi.contact.email') }}">{{ config('tashi.contact.email') }}</a>
@endif
</div>
<div class="nri-note">
<p class="eyebrow">Connecting from outside India?</p>
<p>You don’t need to be in Bengaluru to begin. Our NRI advisory team can connect with you over WhatsApp, phone or video consultation.</p>
<p>Buying. Selling. Investing. Managing.<br>Your Bengaluru real estate conversation can start from anywhere.</p>
<a class="text-link" href="{{ route('contact', ['requirement' => 'NRI Advisory']) }}#consultation-form">Speak with our NRI team <x-arrow /></a>
</div>
<div class="whatsapp-contact" id="whatsapp-contact">
<p class="eyebrow"><x-whatsapp-icon /> Prefer WhatsApp?</p>
<h3>Start with a message.</h3>
<p>You don’t need to prepare a detailed brief. Simply tell us what you’re considering, and our team can take the conversation forward from there.</p>
@php($whatsappNumber = preg_replace('/\D/', '', config('tashi.contact.whatsapp', '')))
@if($whatsappNumber)
<a class="button" href="https://wa.me/{{ $whatsappNumber }}" target="_blank" rel="noopener noreferrer">Continue on WhatsApp <x-whatsapp-icon /><span class="sr-only"> (opens in a new tab)</span></a>
@if(config('tashi.contact.whatsapp_demo'))
<p class="contact-demo-note">Demo number: +1 202 555 0123. This previews the WhatsApp link; it is not a monitored Tashi contact.</p>
@endif
@else
<p>Our WhatsApp contact details are being updated. You can prepare your requirement using the form.</p>
<a class="text-link" href="#consultation-form">Prepare your requirement <x-arrow /></a>
@endif
</div>
</aside>
<form class="consultation-form" id="consultation-form" aria-labelledby="consultation-title">
<div class="consultation-heading">
<p class="eyebrow">Your next chapter</p>
<h2 id="consultation-title">Tell us what <em>you have in mind.</em></h2>
<p>A few details to give our conversation a starting point.</p>
</div>
<div class="consultation-body">
<p class="form-caption">Your name, phone, email and requirement are required. <span aria-hidden="true">*</span></p>
<div id="requirement-summary" hidden>
</div>
<div class="form-grid">
<label>Your name <span>*</span>
<input name="name" autocomplete="name" required maxlength="100" placeholder="Full name">
</label>
<label>Phone / WhatsApp <span>*</span>
<input type="tel" name="phone" autocomplete="tel" required pattern="[+0-9() .-]{7,25}" title="Enter a phone number with 7 to 25 characters" placeholder="+91 Your phone number">
</label>
<label class="full">Your requirement <span>*</span>
<select name="requirement" required>
<option value="">Select your requirement</option>
<option>Residential Property</option>
<option>Residential Investment</option>
<option>Commercial Property</option>
<option>Commercial Investment</option>
<option>NRI Advisory</option>
<option>Sell a Property</option>
<option>Property Management</option>
<option>Transaction &amp; Documentation Support</option>
<option>Facility Management</option>
<option>Transaction, Documentation & Legal</option>
<option>Property & Facility Management</option>
<option>Interiors & Construction</option>
<option>Taxation Advice & Auditing</option>
<option>International Investments</option>
<option>Vastu</option>
<option>Loans & Funding</option>
<option>Dholera</option>
<option>Other</option>
</select>
</label>
<label>Email <span>*</span><input type="email" name="email" autocomplete="email" required placeholder="you@example.com" maxlength="254">
</label>
<label>Preferred location<input name="location" placeholder="A neighbourhood or area" maxlength="150">
</label>
<label class="full">Approximate budget<input name="budget" placeholder="Your preferred budget range" maxlength="100">
</label>
<label class="full">Anything you’d like us to know?<textarea name="message" rows="4" placeholder="Your objective, timeline, or what matters most to you…" maxlength="4000">
</textarea>
</label>
</div>
<p class="form-notice" id="delivery-notice">Enquiry delivery is not connected yet. You can prepare and download your requirement brief below. Nothing will be sent.</p>
<button type="submit" class="button" id="submit-enquiry">Prepare my requirement <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
<path d="M4 12h15M13 5l7 7-7 7"/>
</svg>
</button>
<div class="form-result" id="form-result" role="status" tabindex="-1" hidden>
</div>
<p class="privacy-note">Your details stay in this browser until you choose to share them. <a href="{{ url('/privacy/') }}">Privacy information</a>
</p>
</div>
</form>
</section>
<section class="section container contact-map" aria-label="Tashi Location Map">
<iframe title="Tashi Properties location in Bengaluru" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.5321216614284!2d77.57443839999999!3d12.937765299999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x480402087147477d%3A0xbadb588e975b4869!2s!5e0!3m2!1sen!2sin!4v1789561948033!5m2!1sen!2sin" width="1200" height="420" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
<div class="map-link-wrap">
<a class="text-link" href="https://www.google.com/maps?cid=13464452880402172009" target="_blank" rel="noopener noreferrer">Open location in Google Maps <x-arrow /><span class="sr-only"> (opens in a new tab)</span></a>
</div>
</section>
</section>
@endsection