@extends('layouts.dynamic-megamenu-test')

@php
    $homeText = function (string $key, array $replace = []) use ($homeContent) {
        $value = data_get($homeContent, $key, data_get($homeContent, 'copy.' . $key, ''));
        foreach ($replace as $placeholder => $replacement) {
            $value = str_replace(':' . $placeholder, $replacement, (string) $value);
        }
        return $value;
    };
@endphp

@section('title', 'Dynamic Nav Megamenu Test — Home')
@section('meta_description', 'Hidden test page for Dynamic Navigation with reimagined megamenu.')

@section('page-content')
<div class="dn-page">
    <section class="dn-page-hero" aria-labelledby="dmm-hero-heading">
        <div class="site-container pb-20 lg:pb-28">
            <div class="max-w-3xl">
                <span class="dn-page-eyebrow">Megamenu prototype</span>
                <h1 id="dmm-hero-heading" class="dn-page-title">
                    <span class="text-criazo-primary">{{ $homeText('hero.headline_1') }}</span><br>
                    {{ $homeText('hero.headline_2') }}
                </h1>
                <p class="dn-page-lead">{{ $homeText('hero.subheadline') }}</p>
                <div class="flex flex-wrap gap-4 mt-10">
                    <a href="/contact" class="dn-page-btn dn-page-btn--primary">
                        {{ $homeText('cta.primary') }}
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                    <a href="#portfolio" class="dn-page-btn dn-page-btn--ghost">View portfolio</a>
                </div>
            </div>
        </div>
    </section>

    <section id="industries" class="dn-page-section dn-page-section--muted" aria-labelledby="dmm-industries-heading">
        <div class="site-container py-20 lg:py-28">
            <div class="max-w-2xl mb-14">
                <span class="dn-page-eyebrow">Industries</span>
                <h2 id="dmm-industries-heading" class="dn-page-section-title">
                    {{ $homeText('industries.title_1') }} {{ $homeText('industries.title_2') }}
                </h2>
                <p class="dn-page-lead">{{ $homeText('industries.description') }}</p>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
                @foreach(array_slice($homeContent['industry_names'] ?? [], 0, 6) as $label)
                <article class="dn-card">
                    <h3 class="dn-card__title">{{ $label }}</h3>
                    <p class="dn-card__text">{{ $homeText('industries.for_industry', ['industry' => $label]) }}</p>
                </article>
                @endforeach
            </div>
        </div>
    </section>

    @if(isset($projects) && count($projects))
    <section id="portfolio" class="dn-page-section" aria-labelledby="dmm-portfolio-heading">
        <div class="site-container py-20 lg:py-28">
            <div class="max-w-2xl mb-14">
                <span class="dn-page-eyebrow">{{ $homeText('portfolio.badge') }}</span>
                <h2 id="dmm-portfolio-heading" class="dn-page-section-title">
                    {{ $homeText('portfolio.title_1') }} {{ $homeText('portfolio.title_2') }}
                </h2>
                <p class="dn-page-lead">{{ $homeText('portfolio.description') }}</p>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($projects as $project)
                <article class="dn-card dn-card--media group">
                    <div class="dn-card__media">
                        <img src="{{ asset($project['hero']['image'] ?? $project['listingImage'] ?? 'images/og-default.jpg') }}"
                             alt="{{ $project['title'] ?? 'Project' }}"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                             loading="lazy">
                    </div>
                    <div class="p-6">
                        <p class="text-xs font-semibold uppercase tracking-wider text-criazo-primary mb-2">{{ $project['category'] ?? 'Case study' }}</p>
                        <h3 class="dn-card__title">{{ $project['title'] ?? '' }}</h3>
                    </div>
                </article>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    @if(isset($aboutUs))
    <section id="about" class="dn-page-section dn-page-section--muted" aria-labelledby="dmm-about-heading">
        <div class="site-container py-20 lg:py-28">
            <div class="grid lg:grid-cols-2 gap-16 items-start">
                <div>
                    <span class="dn-page-eyebrow">{{ $homeText('why.badge') }}</span>
                    <h2 id="dmm-about-heading" class="dn-page-section-title">
                        {{ $homeText('why.title_1') }} {{ $homeText('why.title_2') }}
                    </h2>
                    <p class="dn-page-lead mb-6">
                        {{ $homeText('why.description_1') }}
                        <strong class="text-neutral-900">{{ $homeText('why.highlight_1') }}</strong>
                        {{ $homeText('why.description_2') }}
                    </p>
                    <p class="dn-page-lead">{{ $homeText('why.description_3') }}</p>
                </div>
                @if(isset($aboutUs['values']))
                <div class="grid gap-4">
                    @foreach($aboutUs['values'] as $value)
                    <article class="dn-card">
                        <div class="flex items-start gap-4">
                            <span class="text-2xl" aria-hidden="true">{{ $value['icon'] }}</span>
                            <div>
                                <h3 class="dn-card__title">{{ $value['title'] }}</h3>
                                <p class="dn-card__text">{{ $value['description'] }}</p>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </section>
    @endif

    <section id="contact" class="dn-page-section" aria-labelledby="dmm-contact-heading">
        <div class="site-container py-20 lg:py-28">
            <div class="dn-cta-panel">
                <h2 id="dmm-contact-heading" class="dn-page-section-title text-white mb-4">
                    {{ $homeText('cta.title') }}
                </h2>
                <p class="text-white/85 text-lg max-w-xl mb-8 leading-relaxed">
                    {{ $homeText('cta.description_1') }}
                </p>
                <a href="/contact" class="dn-page-btn dn-page-btn--white">
                    {{ $homeText('cta.primary') }}
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
            </div>
        </div>
    </section>
</div>
@endsection