@extends('layouts.app')

@section('title', 'Home')

@section('content')
<main>
    <section class="hero" style="background-image: url('{{ asset('images/hero.jpg') }}');">
        <div class="container">
            <p class="eyebrow">Industrial cutting-room machinery</p>
            <h1>One Cutting Room.<br>Complete Harmony.</h1>
            <p class="lead">{{ $settings->hero_subtitle }}</p>
            <div class="hero-ctas">
                <a class="btn primary" href="{{ route('machines.index') }}">Explore Our Machines</a>
                <a class="btn cream" href="{{ route('about') }}">Discover Harmony</a>
            </div>
            @if (!empty($settings->hero_stats))
            <div class="hero-stats">
                @foreach ($settings->hero_stats as $stat)
                    <div><strong>{{ $stat['value'] }}</strong><span>{{ $stat['label'] }}</span></div>
                @endforeach
            </div>
            @endif
        </div>
    </section>

    <section class="block bg-white">
        <div class="container">
            <div class="grid grid-2" style="align-items:center;">
                <div>
                    <p class="eyebrow">Engineered for production</p>
                    <h2 style="color:var(--brown);">A stronger cutting room starts with the right machine.</h2>
                </div>
                <div>
                    <p>{{ $settings->about_intro }}</p>
                    <a class="link-arrow" href="{{ route('about') }}">About Harmony</a>
                </div>
            </div>
        </div>
    </section>

    <section class="block bg-peach">
        <div class="container">
            <div class="section-head">
                <div class="heading-block">
                    <p class="eyebrow">Machine portfolio</p>
                    <h2 class="red">Built around your workflow.</h2>
                </div>
                <a class="link-arrow" href="{{ route('machines.index') }}">View all machines</a>
            </div>
            <div class="grid grid-4">
                <a href="{{ route('machines.index') }}" class="category-card">
                    <img src="{{ asset('images/cat-spreading.jpg') }}" alt="Spreading Machine">
                    <span class="sr-only">Spreading Machine</span>
                </a>
                <a href="{{ route('machines.index') }}" class="category-card">
                    <img src="{{ asset('images/cat-multiply.jpg') }}" alt="Automatic Multiply Cutting Machine">
                    <span class="sr-only">Automatic Multiply Cutting Machine</span>
                </a>
                <a href="{{ route('machines.index') }}" class="category-card">
                    <img src="{{ asset('images/cat-singleply.jpg') }}" alt="Automatic Single-Ply Cutting Machine">
                    <span class="sr-only">Automatic Single-Ply Cutting Machine</span>
                </a>
                <a href="{{ route('machines.index') }}" class="category-card">
                    <img src="{{ asset('images/cat-airblow.jpg') }}" alt="Airblow Table">
                    <span class="sr-only">Airblow Table</span>
                </a>
            </div>
        </div>
    </section>

    <section class="block bg-white">
        <div class="container">
            <div class="section-head">
                <div class="heading-block">
                    <p class="eyebrow">Selected machines</p>
                    <h2 style="color:var(--brown);">Technologies that move production forward.</h2>
                </div>
                <p class="side-text">Explore representative systems from our spreading and cutting range.</p>
            </div>
            <div class="grid grid-3">
                @forelse ($featuredMachines as $machine)
                    <a href="{{ route('machines.show', $machine->slug) }}" class="machine-card">
                        <img src="{{ $machine->image_url ?? asset('images/machine-hrcp.jpg') }}" alt="{{ $machine->name }}">
                        <div class="machine-card-body">
                            <p class="model">{{ $machine->model }}</p>
                            <h3>{{ $machine->name }}</h3>
                        </div>
                    </a>
                @empty
                    <p>Machines will appear here once added in the admin panel.</p>
                @endforelse
            </div>
        </div>
    </section>

    <section class="block bg-peach">
        <div class="container">
            <div class="grid grid-2">
                <div>
                    <p class="eyebrow">Industries</p>
                    <h2 class="red">One workflow.<br>Many applications.</h2>
                    <p>Discover machinery matched to the materials, volumes, and precision your production demands.</p>
                    <a class="btn primary" href="{{ route('industries') }}">Explore Industries</a>
                </div>
                <ul class="industry-rows">
                    @foreach ($industries as $i => $industry)
                        <li><span class="num">0{{ $i + 1 }}</span> {{ $industry->title }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>

    <section class="block bg-white">
        <div class="container">
            <div class="grid grid-2" style="align-items:start;">
                <div class="why-image">
                    <img src="{{ asset('images/machine-hrcp.jpg') }}" alt="Harmony machinery in production">
                </div>
                <div>
                    <p class="eyebrow">Why Harmony</p>
                    <h2 style="color:var(--brown);">Practical expertise behind every installation.</h2>
                    <ul class="feature-rows">
                        <li>
                            <span class="num">01</span>
                            <div>
                                <h3>Complete machine range</h3>
                                <p>Connected equipment for spreading, cutting, and supporting workflows.</p>
                            </div>
                        </li>
                        <li>
                            <span class="num">02</span>
                            <div>
                                <h3>Technical understanding</h3>
                                <p>Solutions shaped by real production requirements — not specifications alone.</p>
                            </div>
                        </li>
                        <li>
                            <span class="num">03</span>
                            <div>
                                <h3>Local support in Indonesia</h3>
                                <p>Installation, training, and after-sales support delivered with Pukka Indonusa.</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="block bg-peach">
        <div class="container">
            <p class="eyebrow">Global presence</p>
            <h2 class="red">{{ $settings->global_presence_heading }}</h2>
            <div class="map-wrap">
                <img src="{{ asset('images/world-map.png') }}" alt="Harmony global presence: {{ implode(', ', $settings->global_presence_countries ?? []) }}">
            </div>
        </div>
    </section>

    <section class="cta-band">
        <div class="container" style="padding-top:64px; padding-bottom:64px;">
            <div class="grid grid-2">
                <div>
                    <p class="eyebrow">Harmony in Indonesia</p>
                    <h2>{{ $settings->contact_cta_heading }}</h2>
                </div>
                <div>
                    <p>{{ $settings->contact_cta_text }}</p>
                    <a class="btn cream" href="{{ route('contact') }}">Contact Pukka Indonusa</a>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection