@extends('layouts.app')

@section('title', 'ShrimpHut | Freshwater Shrimp, Plants & Aquascaping')

@push('styles')
<style>
    .home-product-card .card-body,
    .home-guide-card,
    .home-newsletter-card .card-body,
    .home-category-card .card-body {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .home-product-card h5,
    .home-guide-card h5,
    .home-category-card h5 {
        margin-bottom: .75rem;
    }

    .home-product-card .product-summary,
    .home-guide-card .guide-summary {
        flex-grow: 1;
    }

    .home-product-card .product-price-row,
    .home-guide-card .btn-row {
        margin-top: auto;
    }

    .hero-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-stat,
    .trust-card {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 1.25rem;
        padding: 1rem 1.1rem;
    }

    .hero-stat strong {
        display: block;
        font-size: 1.2rem;
        margin-bottom: .2rem;
    }

    .signal-card {
        border: 1px solid rgba(4,39,58,.08);
        border-radius: 1.25rem;
        padding: 1.1rem;
        background: #fff;
        height: 100%;
    }

    @media (max-width: 767.98px) {
        .hero-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<section class="container py-4">
    <div class="hero-shell p-4 p-lg-5">
        <div class="row align-items-center g-4">
            <div class="col-lg-7">
                <span class="badge badge-soft rounded-pill mb-3">ShrimpHut | shrimphut.co.uk</span>
                <h1 class="display-5 mb-3">Freshwater shrimp, planted tank essentials, and clear advice for UK hobbyists.</h1>
                <p class="lead text-white-50 mb-4">Shop carefully selected shrimp, nerite snails, practical aquascaping materials, and easy-to-choose plants and feeds without the filler.</p>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('shop.index') }}" class="btn btn-light btn-lg">Shop all products</a>
                    <a href="{{ route('guides.index') }}" class="btn btn-outline-light btn-lg">Read guides</a>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="hero-grid">
                    <div class="hero-stat">
                        <strong>Freshwater focus</strong>
                        <span class="small text-white-50">Built around shrimp, nerites, plants, and planted aquascapes.</span>
                    </div>
                    <div class="hero-stat">
                        <strong>Cleaner catalogue</strong>
                        <span class="small text-white-50">Straightforward product ranges without bloated filler categories.</span>
                    </div>
                    <div class="hero-stat">
                        <strong>Useful guidance</strong>
                        <span class="small text-white-50">Compatibility, parameter, and care information where it actually helps.</span>
                    </div>
                    <div class="hero-stat">
                        <strong>UK store</strong>
                        <span class="small text-white-50">Shipping, support, and content written for UK aquarium keepers.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="container py-4">
    <div class="row g-3">
        <div class="col-md-4">
            <div class="signal-card">
                <div class="small text-uppercase text-muted mb-2">Shrimp</div>
                <h2 class="h4 mb-2">Focused livestock range</h2>
                <p class="text-muted mb-0">A tighter shrimp range keeps the store easier to browse and simpler to maintain accurately.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="signal-card">
                <div class="small text-uppercase text-muted mb-2">Plants</div>
                <h2 class="h4 mb-2">Reliable planted tank staples</h2>
                <p class="text-muted mb-0">Java fern, anubias, mosses, Monte Carlo, and vallisneria for real-world shrimp setups.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="signal-card">
                <div class="small text-uppercase text-muted mb-2">Aquascaping</div>
                <h2 class="h4 mb-2">Hardscape that makes sense</h2>
                <p class="text-muted mb-0">Scissors, rocks, spider wood, and driftwood in practical size options for smaller and larger layouts.</p>
            </div>
        </div>
    </div>
</section>

@if($featuredCategories->isNotEmpty())
<section class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">Shop by category</h2>
        <a href="{{ route('shop.index') }}" class="text-decoration-none">View all</a>
    </div>
    <div class="row g-3">
        @foreach ($featuredCategories as $category)
            <div class="col-6 col-lg-4">
                <a class="card section-card text-decoration-none h-100 home-category-card" href="{{ route('shop.category', $category) }}">
                    @if($category->imageUrl())
                        <img src="{{ $category->imageUrl() }}" alt="{{ $category->name }}" class="category-media">
                    @endif
                    <div class="card-body">
                        <h5>{{ $category->name }}</h5>
                        <p class="text-muted small mb-0">{{ $category->description }}</p>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
</section>
@endif

@if($featuredProducts->isNotEmpty())
<section class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">Featured products</h2>
        <a href="{{ route('shop.index') }}" class="text-decoration-none">Browse shop</a>
    </div>
    <div class="row g-3">
        @foreach ($featuredProducts as $product)
            <div class="col-6 col-lg-3">
                <div class="card card-product h-100 home-product-card">
                    <img src="{{ $product->primaryImageUrl() }}" alt="{{ $product->name }}" class="product-media">
                    <div class="card-body d-flex flex-column">
                        <span class="badge badge-soft mb-2">{{ $product->category?->name }}</span>
                        <h5>{{ $product->name }}</h5>
                        <p class="small text-muted product-summary">{{ $product->short_description }}</p>
                        <div class="fw-bold mb-3 product-price-row">@money($product->current_price)</div>
                        <div class="btn-row">
                            <a href="{{ route('products.show', $product) }}" class="btn btn-primary flex-grow-1">View product</a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endif

<section class="container py-4">
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card section-card h-100">
                <div class="card-body p-4 p-lg-5">
                    <span class="text-uppercase small fw-semibold text-brand">Why ShrimpHut</span>
                    <h2 class="mt-2 mb-3">Built to be clear, usable, and accurate.</h2>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="border rounded-4 p-3 h-100 bg-white">
                                <strong class="d-block mb-2">Cleaner product setup</strong>
                                <p class="small text-muted mb-0">Focused ranges make the storefront faster to browse and easier to keep up to date.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="border rounded-4 p-3 h-100 bg-white">
                                <strong class="d-block mb-2">Useful compatibility tools</strong>
                                <p class="small text-muted mb-0">Compatibility and parameter checks are available where they add real decision-making value.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="border rounded-4 p-3 h-100 bg-white">
                                <strong class="d-block mb-2">Practical UK guidance</strong>
                                <p class="small text-muted mb-0">Pages, policies, and guides are written for UK customers and everyday freshwater setups.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card section-card home-newsletter-card h-100">
                <div class="card-body p-4">
                    <h2 class="h3 mb-3">Newsletter</h2>
                    <p class="text-muted newsletter-copy">Get stock updates, guide releases, and occasional product news from ShrimpHut.</p>
                    <form method="post" action="{{ route('newsletter.subscribe') }}">
                        @csrf
                        <div class="mb-2">
                            <input type="text" name="name" class="form-control" placeholder="Your name">
                        </div>
                        <div class="mb-3">
                            <input type="email" name="email" class="form-control" placeholder="Email address">
                        </div>
                        @include('partials.recaptcha')
                        <button class="btn btn-primary w-100">Subscribe</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@if($guides->isNotEmpty())
<section class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">Guides</h2>
        <a href="{{ route('guides.index') }}" class="text-decoration-none">View all guides</a>
    </div>
    <div class="row g-3">
        @foreach ($guides as $guide)
            <div class="col-md-4">
                <div class="border rounded-4 p-3 h-100 home-guide-card bg-white">
                    <h5>{{ $guide->title }}</h5>
                    <p class="small text-muted guide-summary">{{ $guide->excerpt }}</p>
                    <div class="btn-row">
                        <a href="{{ route('guides.show', $guide) }}">Read guide</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endif
@endsection