@extends('layouts.site')

@section('content')
<section class="hero hero-editorial" aria-labelledby="hero-title">
    <video class="hero-image" data-src="{{ asset('assets/this_my_home_for_a_real_estate.mp4') }}" poster="{{ asset('assets/hero-dusk.jpg') }}" width="1536" height="1024" muted loop playsinline preload="none" aria-hidden="true"></video>
    <div class="hero-shade" aria-hidden="true"></div>
    <div class="hero-content container">
        <div class="hero-heading">
            <p class="eyebrow">Bengaluru real estate · A considered perspective</p>
            <h1 id="hero-title">Real estate decisions.<br><em>Expertly advised.</em></h1>
        </div>
        <div class="hero-story">
            <p>Real estate consulting &amp; advisory for<br>homebuyers, investors, businesses and NRIs.</p>
            <a class="hero-link" href="#introduction">Discover the Tashi perspective <x-arrow /></a>
        </div>
        <div class="hero-footer">
            <a class="hero-scroll" href="#introduction"><span aria-hidden="true">↓</span> Scroll to explore</a>
            <nav class="hero-services" aria-label="Explore our advisory services">
                <a href="{{ route('residential') }}">Residential</a>
                <a href="{{ route('commercial') }}">Commercial</a>
                <a href="{{ route('nri-advisory') }}">NRI advisory</a>
            </nav>
            <span class="hero-location">Bengaluru, India</span>
        </div>
    </div>
</section>
<section class="section introduction container" id="introduction">
<div class="intro-grid">
<div class="intro-story">
<p class="eyebrow">Advice before property</p>
<h2>Finding property is easy.<br>Choosing well<br>
<em>takes perspective.</em>
</h2>
<div class="intro-copy">
<p>In a city full of property choices, know what deserves your attention. We bring market understanding, thoughtful evaluation and on-ground expertise to your decision.</p>
<p class="statement">We don’t begin with what’s available.<br>We begin with what makes sense for you.</p>
<a class="text-link" href="{{ url('/about/') }}">Get to know Tashi<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>
</a>
</div>
</div>
<figure class="intro-visual">
<x-editorial-image name="luxury-residence" alt="Refined architectural luxury residence elevation at dusk in Bengaluru" />
<figcaption><span>A considered place to call home</span><span>Bengaluru / India</span></figcaption>
</figure>
</div>
<div class="stats">
<div>
<strong>5+</strong>
<span>Years of real estate experience</span>
</div>
<div>
<strong>150+</strong>
<span>Clients advised</span>
</div>
<div>
<strong>₹270 Cr+</strong>
<span>Transactions facilitated</span>
</div>
<div>
<strong>15+</strong>
<span>Bengaluru micro-markets</span>
</div>
</div>
</section>
<section class="section expertise-section" id="expertise">
<div class="container">
<div class="section-heading">
<div>
<p class="eyebrow">Our expertise</p>
<h2>Different real estate needs.<br>
<em>One advisory relationship.</em>
</h2>
</div>
<p>From your first home to your next business address. Perspective for every kind of property decision.</p>
</div>
<div class="expertise-controls" hidden>
    <span>Swipe to explore</span>
    <div class="slider-pagination">
        <button type="button" data-slider-prev aria-label="Previous service" aria-controls="expertise-slides">&larr;</button>
        <span data-slider-count aria-live="polite" aria-atomic="true">01 / 03</span>
        <button type="button" data-slider-next aria-label="Next service" aria-controls="expertise-slides">&rarr;</button>
    </div>
</div>
<div class="service-grid" id="expertise-slides" aria-label="Our expertise">
<a class="service-card" href="{{ url('/residential/') }}">
<div class="service-image">
<x-editorial-image name="premium-apartments" alt="Contemporary apartments with stone-clad exteriors and spacious balconies" sizes="(max-width: 800px) 80vw, 30vw" />
<span class="image-index">01 /</span>
<span class="round-arrow">
<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>
</span>
</div>
<div class="service-meta">
<h3>Residential Consulting</h3>
<span>For homebuyers, investors &amp; property owners.</span>
</div>
</a>
<a class="service-card" href="{{ url('/commercial/') }}">
<div class="service-image">
<x-editorial-image name="office-building" alt="Exterior of a commercial office building in Bengaluru" sizes="(max-width: 800px) 80vw, 30vw" />
<span class="image-index">02 /</span>
<span class="round-arrow">
<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>
</span>
</div>
<div class="service-meta">
<h3>Commercial Consulting</h3>
<span>For businesses, entrepreneurs &amp; investors.</span>
</div>
</a>
<a class="service-card" href="{{ url('/nri-advisory/') }}">
<div class="service-image">
<x-editorial-image name="property-discussion" alt="Two people discussing a property floor plan together" sizes="(max-width: 800px) 80vw, 30vw" />
<span class="image-index">03 /</span>
<span class="round-arrow">
<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>
</span>
</div>
<div class="service-meta">
<h3>NRI Advisory</h3>
<span>Your interests in Bengaluru. Wherever you are.</span>
</div>
</a>
</div>
</div>
</section>
@include('partials.filter')

@include('partials.markets')
<section class="allied-section section">
<div class="container allied-layout">
<div class="allied-photo">
<x-editorial-image name="residential" alt="Balconies and architectural details of a Bengaluru apartment building" />
<span>Beyond the transaction</span>
</div>
<div>
<p class="eyebrow">Tashi Allied Services</p>
<h2>The transaction may end.<br>
<em>Property ownership doesn’t.</em>
</h2>
<p>From documentation to day-to-day care, specialist support for every stage of property ownership.</p>
<div class="allied-links">
@foreach(config('tashi.allied') as $alliedService)
<a href="{{ route('allied-services') }}#service-{{ $loop->index }}"><span class="allied-number" aria-hidden="true">{{ sprintf('%02d', $loop->iteration) }}</span><span>{{ $alliedService[0] }}</span><x-arrow />
</a>
@endforeach
</div>
<a class="button allied-explore" href="{{ url('/allied-services/') }}">Explore all allied services<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>
</a>
</div>
</div>
</section>
@include('partials.testimonials')
<section class="perspective-section section" aria-labelledby="perspective-title">
    <div class="container">
        <div class="perspective-editorial-split">
            <div class="perspective-editorial-main">
                <p class="eyebrow">The Tashi perspective</p>
                <h2 id="perspective-title">The confidence<br>to <em>choose well.</em></h2>
                <p class="perspective-editorial-lead">In a city filled with property choices, finding options is easy. Knowing what deserves your attention takes true market perspective.</p>
                <a class="text-link" href="{{ url('/about/') }}">More about Tashi <x-arrow /></a>
            </div>

            <div class="perspective-editorial-rows">
                <article class="perspective-editorial-row">
                    <span class="perspective-row-index">01 / EVALUATION</span>
                    <div class="perspective-row-body">
                        <h3>Priorities before inventory</h3>
                        <p>We begin with your objective, budget, and non-negotiables — never with pre-selected property listings.</p>
                    </div>
                </article>

                <article class="perspective-editorial-row">
                    <span class="perspective-row-index">02 / CONTEXT</span>
                    <div class="perspective-row-body">
                        <h3>True market context</h3>
                        <p>We evaluate micro-market dynamics, location trade-offs, and commercial terms so you see the complete picture.</p>
                    </div>
                </article>

                <article class="perspective-editorial-row">
                    <span class="perspective-row-index">03 / DECISION</span>
                    <div class="perspective-row-body">
                        <h3>Informed confidence</h3>
                        <p>Independent advisory built around your long-term interests from initial search to final transaction.</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>
@include('partials.closing')

@endsection