@extends('layouts.app')

@section('title', 'Home')

@section('content')
<style>
.presence-grid{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center}
.presence-text h2{margin-bottom:0}
.presence-grid .map-wrap img{width:100%;display:block;border-radius:var(--radius)}
.cta-band .cta-grid{display:grid;grid-template-columns:.7fr 1.5fr 1fr;gap:40px;align-items:center}
.cta-band .cta-grid .eyebrow{margin:0}
.cta-band .cta-grid h2{margin:0;max-width:640px}
@media (max-width:900px){
.presence-grid{grid-template-columns:1fr;gap:24px}
.cta-band .cta-grid{grid-template-columns:1fr;gap:20px}
}
</style>
<main>
    <section class="hero" style="background-image: url('{{ asset('images/hero.jpg') }}');">
        <div class="container">
            <p class="eyebrow">Industrial cutting-room machinery</p>
            <h1><div style="color: #f9f3ea;">ONE CUTTING ROOM.</div>
COMPLETE HARMONY</h1>
            <p class="lead">From spreading to cutting, engineered to work in harmony.</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<br> starts with the right <br>machine.</h2>
                </div>
                <div>
                    <p>Harmony e-Solution brings decades of practical cutting-room
experience into a focused portfolio of industrial machinery.
From fabric preparation to the final cut, every system is selected
to support stable output and dependable day-to-day operation.</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" style="color: #be2026;">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 moves <br>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">
            <div class="presence-grid">
                <div class="presence-text">
                    <p class="eyebrow">Global presence</p>
                    <h2 class="red">{{ $settings->global_presence_heading }}</h2>
                </div>
                <div class="map-wrap">
                    <img src="{{ asset('images/world-map.png') }}" alt="Harmony global presence: {{ implode(', ', $settings->global_presence_countries ?? []) }}">
                </div>
            </div>
        </div>
    </section>

    <section class="cta-band">
        <div class="container" style="padding-top:64px; padding-bottom:64px;">
            <div class="cta-grid">
                <div>
                    <p class="eyebrow">Harmony in Indonesia</p>
                </div>
                <div>
                    <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