@extends('layouts.app')

@section('title', 'Apex Crop Care Products')
@section('meta_description', 'Explore Apex Crop Care products - advanced fertilizers, pesticides, herbicides, fungicides, and plant growth regulators for modern agriculture.')
@section('og_title', 'Apex Crop Care Products')

@section('content')

<section class="page-hero page-hero-products">
    <div class="page-hero-bg">
        <div class="page-hero-overlay"></div>
    </div>
    <div class="container page-hero-content" data-reveal>
        <span class="page-hero-tag">Product Catalog</span>
        <h1 class="page-hero-title">Our Products</h1>
        <p class="page-hero-subtitle">A comprehensive range of agrochemical solutions for sustainable agriculture.</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="categories-grid categories-grid-products">
            @component('components.category-card', [
                'title' => 'Growth Promoter',
                'count' => 3,
                'route' => route('products.growth-promoter'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><path d="M24 6 Q18 14 18 22 Q18 28 20 32 Q22 34 24 34 Q26 34 28 32 Q30 28 30 22 Q30 14 24 6Z" fill="#16A34A" opacity="0.8"/><path d="M24 34 Q20 40 20 44 Q22 46 24 46 Q26 46 28 44 Q28 40 24 34Z" fill="#006B5B" opacity="0.6"/></svg>',
                'description' => 'Boost crop growth and vitality'
            ])
            @endcomponent

            @component('components.category-card', [
                'title' => 'Insecticide',
                'count' => 4,
                'route' => route('products.insecticide'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><ellipse cx="24" cy="28" rx="10" ry="12" fill="#006B5B" opacity="0.7"/><circle cx="24" cy="16" r="6" fill="#006B5B" opacity="0.8"/></svg>',
                'description' => 'Protect crops from harmful pests'
            ])
            @endcomponent

            @component('components.category-card', [
                'title' => 'Herbicide',
                'count' => 8,
                'route' => route('products.herbicide'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><path d="M24 42 L24 20" stroke="#16A34A" stroke-width="2.5"/><path d="M24 20 Q18 16 16 10 Q20 14 24 16" fill="#4CAF3D" opacity="0.8"/><path d="M24 24 Q30 18 32 12 Q28 18 24 20" fill="#16A34A" opacity="0.8"/></svg>',
                'description' => 'Effective weed management'
            ])
            @endcomponent

            @component('components.category-card', [
                'title' => 'Fungicide',
                'count' => 2,
                'route' => route('products.fungicide'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><circle cx="20" cy="16" r="4" fill="#006B5B" opacity="0.3"/><circle cx="28" cy="14" r="3" fill="#006B5B" opacity="0.25"/><circle cx="24" cy="22" r="3.5" fill="#006B5B" opacity="0.2"/><path d="M24 30 L24 42" stroke="#006B5B" stroke-width="3" opacity="0.5"/></svg>',
                'description' => 'Protection against fungal diseases'
            ])
            @endcomponent
        </div>
    </div>
</section>

@endsection