@extends('layouts.app')
@section('content')

@include('includes.page_header', [
    'title'   => 'MuveOne Pricer',
    'purpose' => 'Price a European removal between two cities, and manage the routes, ferries, zones and rates that shape every quote.',
])

<style>
    .mo-tile-group-title {
        margin: 1.5rem 0 0.5rem;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--mo-muted);
    }
    .mo-tile {
        /* Flex so the card-panel stretches to the grid cell's height —
           every tile in a row ends up the same height (grid stretch). */
        display: flex;
        color: #fff;
    }
    .mo-tile .card-panel {
        flex: 1 1 auto;
        min-height: 100%;
        width: 100%;
        margin-bottom: 0;
        transition: transform .15s ease;
    }
    .mo-tile:hover .card-panel {
        transform: translateY(-2px);
    }
    .mo-tile-label {
        display: block;
        font-size: 19px;
        font-weight: bold;
        letter-spacing: 1.5px;
    }
    .mo-tile-desc {
        display: block;
        margin-top: .4rem;
        font-size: 13px;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1.35;
        opacity: .92;
    }
    /* Primary "run a quote" tile — larger and distinct */
    .mo-tile--primary .card-panel {
        padding: 2.4rem 1.5rem;
    }
    .mo-tile--primary .mo-tile-label {
        font-size: 26px;
    }
    .mo-tile--primary .mo-tile-desc {
        font-size: 15px;
    }
</style>

<p class="mo-tile-group-title">Quoting</p>
{{-- Full-width feature tile — kept prominent above the pricing-setup grid. --}}
<a href="/map" class="mo-tile mo-tile--primary">
    <div class="card-panel center-align hoverable" style="background:var(--mo-primary);">
        <span class="mo-tile-label white-text">Map</span>
        <span class="mo-tile-desc white-text">Run a removal quote between two cities and see the price breakdown.</span>
    </div>
</a>

<p class="mo-tile-group-title">Pricing setup</p>
{{-- CSS Grid: 1-up mobile, 2-up tablet, 3-up desktop. Tiles are even-height
     (grid stretch) and reflow automatically — no float-based .col markup. --}}
<div class="mo-grid mo-grid--3">
    <!-- menu item -->
    <a href="/waypoint/create" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Waypoints</span>
            <span class="mo-tile-desc white-text">Force routes through set places (like Dover–Calais) to shape the distance a quote uses.</span>
        </div>
    </a>

    <!-- menu item -->
    <a href="/ferry/create" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Ferry</span>
            <span class="mo-tile-desc white-text">Set prices for the water crossings detected on a route.</span>
        </div>
    </a>

    <!-- menu item -->
    <a href="/zone/create" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Zone</span>
            <span class="mo-tile-desc white-text">Draw geographic areas that add a fixed or per-km surcharge to a quote.</span>
        </div>
    </a>

    <!-- menu item -->
    <a href="/exception/create" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Exception</span>
            <span class="mo-tile-desc white-text">Stop a waypoint being applied for a specific from/to country pair.</span>
        </div>
    </a>

    <a href="/formula/pricing-data" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Pricing Data</span>
            <span class="mo-tile-desc white-text">Edit the per-country rate table that drives the core price of every quote.</span>
        </div>
    </a>

    <a href="/customs_price/create" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Customs Charges</span>
            <span class="mo-tile-desc white-text">Set customs clearance prices used for cross-border moves.</span>
        </div>
    </a>

    <!-- menu item: goes straight to the full Pricing Constants editor page -->
    <a href="/constants" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Pricing Constants</span>
            <span class="mo-tile-desc white-text">View the fixed engine values (VAT, minimum charges, markup base) used in the math.</span>
        </div>
    </a>

    <!-- menu item -->
    <a href="/seasonality" class="mo-tile">
        <div class="card-panel cyan darken-1 center-align hoverable">
            <span class="mo-tile-label white-text">Seasonality</span>
            <span class="mo-tile-desc white-text">Adjust route + ferry pricing by month of year for peak and off-season demand.</span>
        </div>
    </a>

    <!-- menu item -->
    <a href="/logs" class="mo-tile">
        <div class="card-panel center-align hoverable" style="background:var(--mo-muted);">
            <span class="mo-tile-label white-text">Logs</span>
            <span class="mo-tile-desc white-text">Review recent quote and pricing-change activity.</span>
        </div>
    </a>

    <!-- menu item -->
    <a href="/revisions" class="mo-tile">
        <div class="card-panel center-align hoverable" style="background:var(--mo-muted);">
            <span class="mo-tile-label white-text">Revision History</span>
            <span class="mo-tile-desc white-text">Every change to the pricing setup, versioned automatically — with rollback coming soon.</span>
        </div>
    </a>

</div>
@endsection