@extends('layouts.app')
@section('title', $solution->title . ' — MUVR Labs')
@section('content')

<section class="page-hero-light py-5 px-4 px-lg-5">
    <div class="container-fluid">
        <nav aria-label="breadcrumb" class="mb-2">
            <ol class="breadcrumb" style="font-size:.75rem">
                <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none text-muted">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('solutions') }}" class="text-decoration-none text-muted">Solutions</a></li>
                <li class="breadcrumb-item active">{{ $solution->title }}</li>
            </ol>
        </nav>
        <div class="sol-icon-wrap mb-3" style="width:52px;height:52px">{!! $solution->icon_svg !!}</div>
        <h1 class="fw-800 mb-2" style="font-size:1.5rem;color:var(--brand-dark)">{{ $solution->title }}</h1>
        <p class="sec-intro" style="max-width:500px">{{ $solution->short_description }}</p>
    </div>
</section>

<section class="py-5 px-4 px-lg-5">
    <div class="container-fluid">
        <div class="row g-5">
            <div class="col-lg-8">
                <div style="font-size:.85rem;color:#475569;line-height:1.7">{!! $solution->full_description !!}</div>
            </div>
            <div class="col-lg-4">
                @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
                @endif
                <div class="p-4 rounded-3" style="background:#f8fafc;border:1px solid var(--border-light)">
                    <div class="fw-800 mb-3" style="font-size:.95rem;color:var(--brand-dark)">Discuss This Requirement</div>
                    <form method="POST" action="{{ route('enquiry.store') }}">
                        @csrf
                        <input type="hidden" name="enquiry_type" value="engineering_development">
                        <div class="mb-2">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" class="form-control form-control-sm" required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Email *</label>
                            <input type="email" name="email" class="form-control form-control-sm" required>
                        </div>
                        <div class="mb-2">
                            <label class="form-label">Company</label>
                            <input type="text" name="company" class="form-control form-control-sm">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Requirement</label>
                            <textarea name="message" class="form-control form-control-sm" rows="4" placeholder="Describe your requirement..."></textarea>
                        </div>
                        <button class="btn btn-brand btn-sm w-100">Submit Enquiry</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection