@extends('layouts.app')
@section('title', $title . ' - Blackberry Farm')
@section('content')

<div class="page-header">
    <h1>{{ $icon }} {{ $title }}</h1>
    <p>{{ $description }}</p>
    <div class="future-notice">
        <span class="future-badge">🚧 FUTURE FEATURE</span>
        <p>This functionality is planned for future development.</p>
    </div>
</div>

<div class="mobile-card">
    <h3>{{ $icon }} Coming Soon: {{ $title }}</h3>
    
    <div style="padding: 30px; text-align: center; background: rgba(106, 27, 154, 0.05); border-radius: 12px; margin: 20px 0;">
        <div style="font-size: 64px; margin-bottom: 20px;">🚧</div>
        <h4 style="color: var(--blackberry-purple); margin-bottom: 15px;">Feature In Development</h4>
        <p style="color: var(--soil-brown); margin-bottom: 20px; line-height: 1.6;">
            {{ $description }}
        </p>
        <p style="font-size: 14px; color: var(--medium-gray);">
            This feature will be available in a future update to enhance your farm management capabilities.
        </p>
    </div>

    <div class="responsive-grid cols-2" style="margin-top: 30px;">
        <a href="/" class="touch-btn touch-btn-primary">
            <span class="nav-icon">🏠</span>
            Back to Dashboard
        </a>
        <a href="/analytics" class="touch-btn touch-btn-success">
            <span class="nav-icon">📊</span>
            View Analytics
        </a>
    </div>
</div>

<style>
.future-notice {
    background: linear-gradient(135deg, rgba(255, 143, 0, 0.1), rgba(255, 193, 7, 0.05));
    border-left: 4px solid #FF8F00;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.future-badge {
    background: linear-gradient(135deg, #FF8F00, #FFA000);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.future-notice p {
    margin: 10px 0 0 0;
    color: var(--soil-brown);
    font-weight: 500;
}
</style>

@endsection