@extends('layouts.app')

@section('title', $machine->model.' '.$machine->name)
@section('description', $machine->description)

@section('content')
<main>
    <section style="border-bottom:1px solid var(--line); padding:48px 0;">
        <div class="container product-hero">
            <div>
                <p class="eyebrow">{{ $machine->category }}</p>
                <p style="color:var(--muted); font-weight:600; margin-bottom:4px;">Harmony {{ $machine->model }}</p>
                <h1>{{ $machine->name }}</h1>
                <p>{{ $machine->description }}</p>
                <a class="btn primary" href="{{ route('contact') }}">Request information &nearr;</a>
            </div>
            <div>
                <img src="{{ $machine->image_url ?? 'https://placehold.co/900x600?text=Harmony' }}" alt="{{ $machine->name }}">
            </div>
        </div>
    </section>

    @if (!empty($machine->features))
    <section class="block">
        <div class="container">
            <p class="eyebrow">Overview</p>
            <h2>Production-focused performance.</h2>
            <div class="feature-list" style="margin-top:20px;">
                @foreach ($machine->features as $i => $feature)
                    <div>
                        <span>0{{ $i + 1 }}</span>
                        <strong>{{ $feature }}</strong>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <section class="block" style="border-bottom:none;">
        <div class="container">
            <p class="eyebrow">At a glance</p>
            <h2>Technical profile</h2>
            <div class="spec-grid" style="margin-top:20px;">
                @foreach ($machine->specs ?? [] as $spec)
                    <div>
                        <span>{{ $spec['label'] }}</span>
                        <strong>{{ $spec['value'] }}</strong>
                    </div>
                @endforeach
                <div><span>Model</span><strong>{{ $machine->model }}</strong></div>
                <div><span>Category</span><strong>{{ $machine->category }}</strong></div>
            </div>
        </div>
    </section>
</main>
@endsection