@extends('layouts.app')
@section('title', 'Car Wash & Property Care — Monthly Subscriptions · Befikreyy')
@section('description', 'Befikreyy — Noida\'s Urban Company-style marketplace. Monthly doorstep car wash and property care subscriptions. Auto-renews, cancel anytime.')

@section('content')
@include('partials.public-header')

<!-- HERO -->
<section class="hero">
    <div class="container">
        <div class="hero-grid">
            <div>
                <span class="eyebrow">Handyman · On-demand · Vetted partners</span>
                <h1>Home services, <span class="ink">sorted.</span><br>From the first tap to the last polish.</h1>
                <p class="lead">Book a trusted local partner for cleaning, car wash, repair, painting or pest control. Transparent pricing. Live tracking. Pay only when you're happy.</p>
                <form action="{{ route('services.index') }}" method="GET" class="searchbar">
                    <div class="sb-cell">
                        <label>What do you need?</label>
                        <input name="q" placeholder="e.g. Car wash, AC service…" />
                    </div>
                    <div class="sb-cell">
                        <label>Where?</label>
                        <select name="area_id">
                            <option value="">All areas</option>
                            @foreach(\App\Models\Area::active()->ordered()->get() as $a)
                                <option value="{{ $a->id }}">{{ $a->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button class="btn btn-primary" type="submit">Search →</button>
                </form>
                <div class="hero-actions" style="margin-top: 22px;">
                    <a href="{{ route('services.index') }}" class="btn btn-primary btn-lg">Browse all services</a>
                    <a href="{{ route('become-partner') }}" class="btn btn-outline btn-lg">Become a partner</a>
                </div>
                <div class="hero-stats">
                    <div class="hero-stat"><strong>{{ $stats['partners'] }}+</strong><span>Verified partners</span></div>
                    <div class="hero-stat"><strong>4.8 ★</strong><span>Average rating</span></div>
                    <div class="hero-stat"><strong>1,200+</strong><span>Happy customers</span></div>
                </div>
            </div>
            <div class="hero-visual">
                <div class="hero-card-main">
                    <div class="hc-img" style="background-image: url('/storage/services/car-wash-suv.jpg'); background-size: cover; background-position: center;"></div>
                    <div class="hc-body">
                        <span class="pill pill-gold">⭐ POPULAR</span>
                        <h4 style="margin-top:10px">Car Wash (SUV)</h4>
                        <div class="stars">★ ★ ★ ★ ★ <span class="muted" style="color:#8a8d97; font-size:12.5px; margin-left:6px;">4.9 (210 reviews)</span></div>
                        <div class="price">₹599 <small>₹899</small></div>
                    </div>
                </div>
                <div class="hero-float hf-1">
                    <div class="av">R</div>
                    <div>
                        <div class="lab">Your partner</div>
                        <div class="val">Rajesh · 4.8 ★</div>
                    </div>
                </div>
                <div class="hero-float hf-2">
                    <div>
                        <div class="lab">Today's slot</div>
                        <div class="val">10:00 AM – 11:00 AM</div>
                    </div>
                </div>
                <div class="hero-float hf-3">
                    <div>
                        <div class="lab">Pay after service</div>
                        <div class="val" style="color: var(--bfk-green);">✓ 100% satisfaction</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CATEGORIES -->
<section class="section" id="categories">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow">Browse by category</span>
                <h2>What can we help with today?</h2>
            </div>
            <a href="{{ route('services.index') }}" class="link">View all →</a>
        </div>
        <div class="cat-grid" style="grid-template-columns: repeat(2, 1fr);">
            @foreach($categories as $cat)
                <a href="{{ route('services.index', ['category' => $cat->slug]) }}" class="cat-tile cat-tile-img">
                    @if($cat->image)
                        <div class="cat-bg" style="background-image: url('/{{ $cat->image }}');"></div>
                    @endif
                    <div class="cat-overlay">
                        <div class="nm">{{ $cat->name }}</div>
                        <div class="ct">{{ $cat->services->count() }} monthly plans</div>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

<!-- FEATURED SERVICES -->
<section class="section" id="services" style="background: #fff;">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow">All services · monthly subscriptions</span>
                <h2>Pick a service, get it every month</h2>
            </div>
            <a href="{{ route('services.index') }}" class="link">View all services →</a>
        </div>

        @foreach(\App\Models\ServiceCategory::active()->ordered()->get() as $cat)
            <div class="mt-4">
                <h3 style="margin-bottom: 6px; font-size: 18px;">{{ $cat->icon }} {{ $cat->name }}</h3>
                <p class="muted" style="font-size: 13px; margin-bottom: 18px;">{{ $cat->services->count() }} monthly plans · auto-renews · cancel anytime</p>
                <div class="svc-grid">
                    @foreach($cat->services()->active()->ordered()->get() as $s)
                        <a href="{{ route('services.show', $s->slug) }}" class="svc-card">
                            <div class="media">
                                @if($s->image)
                                    <img src="/{{ $s->image }}" alt="{{ $s->name }}" class="svc-img">
                                @else
                                    <div class="ic-big">{{ $cat->icon }}</div>
                                @endif
                                @if($s->category)<span class="cat-tag">{{ $s->category->name }}</span>@endif
                                @if($s->is_featured)<span class="badge-featured">Popular</span>@endif
                            </div>
                            <div class="body">
                                <h3>{{ $s->name }}</h3>
                                <div class="tg">{{ $s->tagline }}</div>
                                <div class="meta">
                                    <div class="rating"><span class="star">★</span> 4.8 <span class="muted">(120)</span></div>
                                    <div style="margin-left:auto; text-align:right;">
                                        <div class="price">₹{{ number_format($s->price_rupees, 0) }}<small>/mo</small> @if($s->original_price_paise)<small>₹{{ number_format($s->original_rupees, 0) }}</small>@endif</div>
                                        @if($s->discount_percent > 0)<div class="save">{{ $s->discount_percent }}% off</div>@endif
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</section>

<!-- HOW IT WORKS -->
<section class="section">
    <div class="container">
        <div class="section-head" style="text-align:center; display:block; margin-bottom: 40px;">
            <span class="eyebrow" style="justify-content:center;">How it works</span>
            <h2 style="margin: 12px auto 12px; max-width: 700px;">Booking a service takes 60 seconds. We handle the rest.</h2>
        </div>
        <div class="steps">
            <div class="step">
                <div class="num">1</div>
                <h4>Choose a service</h4>
                <p>Browse 30+ services across cleaning, repair, car care and more.</p>
            </div>
            <div class="step">
                <div class="num">2</div>
                <h4>Pick a partner</h4>
                <p>See verified local partners who serve your area, with real ratings.</p>
            </div>
            <div class="step">
                <div class="num">3</div>
                <h4>Pay & schedule</h4>
                <p>Pay online or after service. Choose your slot — today or any day.</p>
            </div>
            <div class="step">
                <div class="num">4</div>
                <h4>Track & rate</h4>
                <p>Partner shares live photos. Confirm with OTP. Rate after service.</p>
            </div>
        </div>
    </div>
</section>

<!-- WHY US -->
<section class="section" style="background: var(--bfk-bg-soft);">
    <div class="container">
        <div class="why-grid">
            <div>
                <span class="eyebrow">Why Befikreyy</span>
                <h2>The Urban Company experience, built for your neighbourhood.</h2>
                <p class="lead" style="margin-top: 14px;">We're not a national chain with random call-centre agents. We're a local team with hand-picked partners from your own sector. Every booking is personal.</p>
                <div style="margin-top: 24px;">
                    <a href="{{ route('services.index') }}" class="btn btn-primary">Explore services</a>
                </div>
            </div>
            <div class="why-points">
                <div class="why-point"><div class="ic">🛡️</div><h4>Verified partners</h4><p>Aadhaar + police verification. No strangers at your door.</p></div>
                <div class="why-point"><div class="ic">📍</div><h4>Area-wise service</h4><p>Pick your sector — we route only the closest verified partner.</p></div>
                <div class="why-point"><div class="ic">📸</div><h4>Live proof</h4><p>Partner clicks photos before, during and after the service.</p></div>
                <div class="why-point"><div class="ic">🔐</div><h4>OTP start</h4><p>Service only starts when you share the OTP. You're always in control.</p></div>
                <div class="why-point"><div class="ic">💸</div><h4>Transparent pricing</h4><p>No hidden fees. What you see is what you pay.</p></div>
                <div class="why-point"><div class="ic">⭐</div><h4>Real ratings</h4><p>Every customer rates. Only the best stay on the platform.</p></div>
            </div>
        </div>
    </div>
</section>

<!-- AREAS -->
<section class="section">
    <div class="container">
        <div class="section-head">
            <div>
                <span class="eyebrow">Service areas</span>
                <h2>We deliver across Noida & nearby</h2>
            </div>
            <a href="{{ route('contact') }}" class="link">Request a new area →</a>
        </div>
        <div class="areas-grid">
            @foreach($areas as $a)
                <a href="{{ route('services.index', ['area_id' => $a->id]) }}" class="area-pill">{{ $a->name }}</a>
            @endforeach
        </div>
    </div>
</section>

<!-- FOUNDER: Your Property. Your Trust. Managed Personally -->
<section class="section founder-section" id="founder" style="background: linear-gradient(135deg, #fff7f3 0%, #ffe7d2 100%);">
    <div class="container">
        <div class="section-head" style="text-align: center; display: block; margin-bottom: 40px;">
            <span class="eyebrow" style="justify-content: center;">Built by one person, not a boardroom</span>
            <h2 style="margin: 14px auto 14px; max-width: 760px; font-family: var(--bfk-serif); font-weight: 700;">
                Your Property. Your Trust.<br><span style="color: var(--bfk-primary);">Managed Personally.</span>
            </h2>
            <p class="lead" style="margin: 0 auto; max-width: 640px;">
                Every booking on Befikreyy is reviewed by a real person who owns this business — not an algorithm, not a call-centre.
            </p>
        </div>

        <div class="founder-card founder-photo-card">
            <div class="founder-photo">
                <img src="/assets/brand/chirag.jpg" alt="Chirag Bartaria, Founder of Befikreyy" class="founder-img">
                <div class="founder-badge">
                    <span class="ic">📍</span>
                    <span>SuperTech Ecociti, Sector 137, Noida</span>
                </div>
            </div>
            <div class="founder-info">
                <div class="founder-name-row">
                    <h2 style="margin: 0;">Chirag Bartaria</h2>
                    <span class="pill pill-primary">Founder</span>
                </div>
                <div class="muted" style="font-size: 13px; margin-top: 4px;">Resident of Noida · Personally managing 100+ properties in the founding phase</div>

                <p style="margin-top: 18px; font-style: italic; color: var(--bfk-text-2); line-height: 1.65; font-size: 15px;">
                    "I started Befikreyy Homes because I saw a genuine gap: owners living far away with no trusted person to look after their flat. Whether it is a vacant property that needs upkeep, or a tenanted flat where the owner needs someone to be their eyes and ears — I take that responsibility personally. This business is built on trust, and I intend to keep it that way as we grow."
                </p>

                <div class="founder-pillars">
                    <div class="pillar">
                        <div class="pillar-ic">🏠</div>
                        <strong>100+ properties</strong>
                        <span>All personally managed by Chirag himself — no middlemen, ever</span>
                    </div>
                    <div class="pillar">
                        <div class="pillar-ic">🛡️</div>
                        <strong>Zero unsupervised access</strong>
                        <span>Partners are Aadhaar + police verified before they enter your home</span>
                    </div>
                    <div class="pillar">
                        <div class="pillar-ic">📸</div>
                        <strong>Live photo proof</strong>
                        <span>Before, during and after photos shared on every visit — you always see what happened</span>
                    </div>
                    <div class="pillar">
                        <div class="pillar-ic">🤝</div>
                        <strong>Direct access to founder</strong>
                        <span>Call, WhatsApp or email Chirag directly. No ticket numbers, no bots.</span>
                    </div>
                </div>

                <div class="founder-cta">
                    <a href="{{ route('about') }}" class="btn btn-primary">Read full story</a>
                    <a href="{{ route('contact') }}" class="btn btn-outline">Talk to Chirag →</a>
                </div>

                <div class="founder-signoff">
                    <span>— Chirag Bartaria, Founder</span>
                    <span class="muted" style="font-size: 12px;">SuperTech Ecociti · Sector 137 · Noida</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- REVIEWS -->
<section class="section" style="background:#fff;">
    <div class="container">
        <div class="section-head" style="text-align:center; display:block; margin-bottom: 40px;">
            <span class="eyebrow" style="justify-content:center;">What customers say</span>
            <h2 style="margin: 12px auto 12px; max-width: 700px;">Trusted by 1,200+ households in Noida</h2>
        </div>
        <div class="review-grid">
            <div class="review">
                <div class="stars">★ ★ ★ ★ ★</div>
                <p>"Booked a deep cleaning for my Sector 137 flat. Partner arrived on time, did a brilliant job and shared photos after. Will book again."</p>
                <div class="who">
                    <div class="av">P</div>
                    <div>
                        <div class="nm">Priyanka S.</div>
                        <div class="ar">Sector 137, Noida</div>
                    </div>
                </div>
            </div>
            <div class="review">
                <div class="stars">★ ★ ★ ★ ★</div>
                <p>"Got my SUV washed at the doorstep. Rajesh was professional and the foam wash was better than my usual service centre. Worth every rupee."</p>
                <div class="who">
                    <div class="av">A</div>
                    <div>
                        <div class="nm">Arjun M.</div>
                        <div class="ar">Sector 142, Noida</div>
                    </div>
                </div>
            </div>
            <div class="review">
                <div class="stars">★ ★ ★ ★ ★</div>
                <p>"AC was leaking. Booked at 9 PM, partner came next morning, fixed in 30 minutes. The OTP confirmation made me feel safe."</p>
                <div class="who">
                    <div class="av">N</div>
                    <div>
                        <div class="nm">Neha T.</div>
                        <div class="ar">Greater Noida West</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="section">
    <div class="container">
        <div class="cta-strip">
            <div>
                <h2>Are you a handyman, technician or service pro?</h2>
                <p>Join Befikreyy as a partner. Get customers in your own area, keep 80%+ of what you earn, and grow your business with our app.</p>
            </div>
            <div class="actions">
                <a href="{{ route('become-partner') }}" class="btn btn-primary btn-lg">Become a partner</a>
                <a href="{{ route('contact') }}" class="btn btn-outline btn-lg" style="background:transparent; color:#fff; border-color:rgba(255,255,255,0.3)">Talk to us</a>
            </div>
        </div>
    </div>
</section>

@include('partials.public-footer')
@endsection
