@extends('layouts.landing')

@section('content')
    {{-- Hero --}}
    <section class="landing-hero">
        @if($hero?->background_image_url)
            <div class="landing-hero-bg" style="background-image: url('{{ $hero->background_image_url }}');"></div>
        @endif
        <div class="container">
            <div>
                <p class="landing-hero-eyebrow">{{ $hero?->subtitle ?? 'Boundary Commission' }}</p>
                <h1>
                    {{ $hero?->title ?? 'Boundary Commission Digital Archive' }}
                </h1>
                <p class="landing-hero-desc">
                    {{ $hero?->banner_text ?? 'Managing boundaries and disputes with clarity. Access boundary records, dispute information, and documentation in one place.' }}
                </p>
                @auth
                    <a href="{{ route('dashboard') }}" class="btn-hero">Go to Dashboard →</a>
                @else
                    <a href="{{ route('login') }}" class="btn-hero">Login →</a>
                @endif
            </div>
            <div></div>
        </div>
    </section>

    {{-- Action / Service cards --}}
    <section class="landing-section" id="services">
        <p class="landing-section-title">What we offer</p>
        <h2 class="landing-section-heading">Our <span class="hero-highlight">Services</span></h2>
        <div class="landing-cards">
            @if($serviceCards && $serviceCards->isNotEmpty())
                @foreach($serviceCards as $index => $card)
                    @if($card->link_url)
                        <a href="{{ str_starts_with($card->link_url, 'http') ? $card->link_url : url($card->link_url) }}" class="landing-card {{ $index === 1 ? 'featured' : '' }}">
                    @else
                        <div class="landing-card {{ $index === 1 ? 'featured' : '' }}">
                    @endif
                        <div class="landing-card-icon">📋</div>
                        <h3>{{ $card->title }}</h3>
                        <p class="landing-card-desc">{{ $card->description ?? '' }}</p>
                    @if($card->link_url)
                        </a>
                    @else
                        </div>
                    @endif
                @endforeach
            @else
                @auth
                    <a href="{{ route('dashboard', ['section' => 'boundary']) }}" class="landing-card"> <div class="landing-card-icon">🔍</div> <h3>Search Boundaries</h3> <p class="landing-card-desc">Search and view boundary records, types, and status.</p> </a>
                    <a href="{{ route('dashboard', ['section' => 'dispute']) }}" class="landing-card featured"> <div class="landing-card-icon">⚖️</div> <h3>View Disputes</h3> <p class="landing-card-desc">Access dispute information and resolution status.</p> </a>
                    <a href="{{ route('boundary.documents.upload') }}" class="landing-card"> <div class="landing-card-icon">📄</div> <h3>Documents</h3> <p class="landing-card-desc">Boundary and administrative documentation.</p> </a>
                @else
                    <a href="{{ route('login') }}" class="landing-card"> <div class="landing-card-icon">🔍</div> <h3>Search Boundaries</h3> <p class="landing-card-desc">Search and view boundary records, types, and status.</p> </a>
                    <a href="{{ route('login') }}" class="landing-card featured"> <div class="landing-card-icon">⚖️</div> <h3>View Disputes</h3> <p class="landing-card-desc">Access dispute information and resolution status.</p> </a>
                    <a href="{{ route('login') }}" class="landing-card"> <div class="landing-card-icon">📄</div> <h3>Documents</h3> <p class="landing-card-desc">Boundary and administrative documentation.</p> </a>
                @endauth
                <a href="#contact" class="landing-card"> <div class="landing-card-icon">📞</div> <h3>Contact</h3> <p class="landing-card-desc">Get in touch with the Boundary Commission.</p> </a>
            @endif
        </div>
    </section>

    {{-- About / Services block --}}
    @if($servicesBlock && ($servicesBlock->title || $servicesBlock->body_text))
    <section class="landing-section" id="about">
        <div class="landing-about">
        <div>
            @if($servicesBlock->image_url)
                <img src="{{ $servicesBlock->image_url }}" alt="" class="landing-about-image">
            @else
                <div class="landing-about-image" style="background: linear-gradient(135deg, var(--lp-primary) 0%, var(--lp-primary-light) 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 3rem;">🗺️</div>
            @endif
        </div>
        <div class="landing-about-text">
            <p class="landing-section-title">About</p>
            <h2 class="landing-section-heading">{{ $servicesBlock->title ?? 'Boundary Commission Services' }}</h2>
            <p>{{ $servicesBlock->body_text }}</p>
            <div class="landing-btn-group">
                @if($servicesBlock->button_1_label && $servicesBlock->button_1_url)
                    <a href="{{ str_starts_with($servicesBlock->button_1_url, 'http') ? $servicesBlock->button_1_url : url($servicesBlock->button_1_url) }}" class="landing-btn">{{ $servicesBlock->button_1_label }} →</a>
                @endif
                @if($servicesBlock->button_2_label && $servicesBlock->button_2_url)
                    <a href="{{ str_starts_with($servicesBlock->button_2_url, 'http') ? $servicesBlock->button_2_url : url($servicesBlock->button_2_url) }}" class="landing-btn landing-btn-outline">{{ $servicesBlock->button_2_label }}</a>
                @endif
            </div>
        </div>
        </div>
    </section>
    @endif

    {{-- Stats --}}
    @if($stats && $stats->isNotEmpty())
    <section class="landing-stats">
        <div class="container">
            @foreach($stats as $stat)
                <div class="landing-stat">
                    <span class="landing-stat-value">{{ $stat->value }}</span>
                    <span class="landing-stat-label">{{ $stat->label }}</span>
                </div>
            @endforeach
        </div>
    </section>
    @endif

    {{-- Issues / Our responsibility --}}
    <section class="landing-issues">
        <div class="container">
            <div>
                <p class="landing-section-title">The issues</p>
                <h2 class="landing-section-heading">Our <span class="hero-highlight">Responsibility</span> and Accountability</h2>
                <a href="{{ route('login') }}" class="landing-btn" style="background: #fff; color: var(--lp-primary); margin-top: 1rem;">Access portal</a>
            </div>
            <ul class="landing-issues-list">
                <li><span class="landing-issues-icon">⚖️</span> Boundaries &amp; demarcation</li>
                <li><span class="landing-issues-icon">📜</span> Dispute resolution</li>
                <li><span class="landing-issues-icon">📄</span> Documentation &amp; archives</li>
                <li><span class="landing-issues-icon">🗺️</span> Surveys &amp; mapping</li>
                <li><span class="landing-issues-icon">👥</span> Stakeholder engagement</li>
            </ul>
        </div>
    </section>

    {{-- Mission & vision --}}
    <section class="landing-section">
        <p class="landing-section-title">Our priority</p>
        <h2 class="landing-section-heading">Our <span class="hero-highlight">Mission</span> &amp; Vision</h2>
        <p style="color: var(--lp-text-muted); margin-bottom: 2rem; max-width: 640px;">
            Our mission is to maintain clear, accessible records of boundaries and disputes and to support resolution and transparency. We are driven by a shared vision of clarity, accountability, and service to the public.
        </p>
        <div class="landing-priority-cards">
            <div class="landing-priority-card featured">
                <div class="landing-priority-card-head">
                    <div class="landing-card-icon">📊</div>
                    <h3>Transparency</h3>
                </div>
                <div class="landing-priority-card-body">
                    <p>Clear documentation and open access to boundary and dispute information where appropriate.</p>
                </div>
            </div>
            <div class="landing-priority-card">
                <div class="landing-priority-card-head">
                    <div class="landing-card-icon">⚖️</div>
                    <h3>Resolution</h3>
                </div>
                <div class="landing-priority-card-body">
                    <p>Support fair and timely resolution of boundary disputes through evidence and process.</p>
                </div>
            </div>
            <div class="landing-priority-card">
                <div class="landing-priority-card-head">
                    <div class="landing-card-icon">🛡️</div>
                    <h3>Stewardship</h3>
                </div>
                <div class="landing-priority-card-body">
                    <p>Preserve and maintain boundary records and archives for future reference.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- Contact --}}
    @if($contact && ($contact->email || $contact->phone || $contact->address))
    <section class="landing-section landing-contact" id="contact">
        <p class="landing-section-title">Get in touch</p>
        <h2 class="landing-section-heading">Contact</h2>
        <div class="landing-contact-grid">
            @if($contact->phone)
                <div class="landing-contact-item">
                    <strong>Phone</strong>
                    <a href="tel:{{ $contact->phone }}">{{ $contact->phone }}</a>
                </div>
            @endif
            @if($contact->email)
                <div class="landing-contact-item">
                    <strong>Email</strong>
                    <a href="mailto:{{ $contact->email }}">{{ $contact->email }}</a>
                </div>
            @endif
            @if($contact->address)
                <div class="landing-contact-item">
                    <strong>Address</strong>
                    <span>{{ $contact->address }}</span>
                </div>
            @endif
        </div>
    </section>
    @else
    <section class="landing-section landing-contact" id="contact">
        <p class="landing-section-title">Get in touch</p>
        <h2 class="landing-section-heading">Contact</h2>
        <p style="color: var(--lp-text-muted);">Contact details can be updated by administrators in the dashboard.</p>
    </section>
    @endif
@endsection