@extends('layouts.site')
@section('title', 'VIPO Granite & Marble | Granite, Marble, Terrazzo & Stonework Uganda')
@section('description', 'VIPO Granite Limited: discover granite, marble, terrazzo and stonework for kitchens, flooring, bathrooms, commercial spaces and memorials. Request a quote in Kampala or Juba.')
@section('content')
<section class="hero-v2">
    <div class="hero-v2-copy"><div class="hero-v2-copy-inner">
        <span class="eyebrow">{{ $copy['hero_eyebrow'] }}</span>
        <h1>{{ $settings['headline'] }}</h1>
        <p>{{ $settings['subheadline'] }} {{ $copy['hero_extra'] }}</p>
        <div class="hero-actions"><a class="button button-light" href="{{ route('quote') }}">{{ $copy['hero_primary_button'] }} <span>↗</span></a><a class="button button-outline-light" href="{{ route('materials') }}">{{ $copy['hero_secondary_button'] }} <span>↗</span></a></div>
        <div class="brand-promise">{{ $copy['hero_promise'] }}</div>
        <div class="hero-v2-bottom"><span>01 / PRODUCTS</span><span>02 / SERVICES</span><span>03 / YOUR PROJECT</span></div>
    </div></div>
    <div class="hero-v2-media"><img class="hero-v2-main" src="{{ \App\Models\SiteSetting::mediaUrl($settings['hero_image_path'] ?? null) }}" alt="Stone surfaces and architectural design inspiration" fetchpriority="high">
        <div class="hero-v2-image-note"><span>{{ $copy['hero_note_eyebrow'] }}</span><strong>{{ $copy['hero_note'] }}</strong></div>
        <div class="hero-v2-inset"><img src="{{ \App\Models\SiteSetting::mediaUrl($copy['hero_inset_photo']) }}" alt="Natural stone detail"></div>
        <span class="hero-v2-credit">{{ $copy['hero_main_photo_label'] }}</span>
    </div>
</section>
@if($copy['feature_visible'] === '1')
<div class="feature-bar"><div class="wrap feature-grid">
    @for($i=1;$i<=4;$i++)<div><small>{{ $copy["feature_{$i}_label"] }}</small><strong>{{ $copy["feature_{$i}_value"] }}</strong></div>@endfor
</div></div>
@endif

@if($copy['products_visible'] === '1')
<section class="section section-materials"><div class="wrap">
    <div class="section-heading"><div><span class="eyebrow">{{ $copy['products_eyebrow'] }}</span><h2 class="section-title">{{ $copy['products_heading'] }}</h2><p class="section-copy">{{ $copy['products_intro'] }}</p></div><a href="{{ route('materials') }}" class="text-link">{{ $copy['products_button'] }} ↗</a></div>
    <div class="material-grid">@forelse($materials as $material)
        <a href="{{ route('materials.show',$material->slug) }}" class="material-card"><div class="image img-zoom"><img src="{{ $material->image_url ?: asset('media/stone.jpg') }}" alt="{{ $material->title }} material reference" loading="lazy"><span class="image-number">0{{ $loop->iteration }}</span></div><div class="material-info"><div><small>{{ $material->category ?: 'Stone products' }}</small><h3>{{ $material->title }}</h3><p>{{ $material->summary }}</p></div><span>↗</span></div></a>
    @empty<p>Contact our team to ask about the current stone product selection.</p>@endforelse</div>
    <p class="editorial-note">Photography is for visual guidance. Ask about current materials, formats, colours and finishes.</p>
</div></section>
@endif

@if($copy['story_visible'] === '1')
<section class="section dark-story"><div class="wrap story-grid">
    <div class="story-image"><img src="{{ \App\Models\SiteSetting::mediaUrl($copy['story_image']) }}" alt="Architectural interior with stone surfaces" loading="lazy"><div class="story-quote">{{ $copy['story_image_quote'] }}</div></div>
    <div class="story-text"><span class="eyebrow">{{ $copy['story_eyebrow'] }}</span><h2>{{ $copy['story_heading'] }}</h2><p>{{ $copy['story_paragraph_1'] }}</p><p>{{ $copy['story_paragraph_2'] }}</p><a class="text-link" href="{{ route('about') }}">{{ $copy['story_button'] }} ↗</a>
        <div class="story-subgrid"><div><strong>{{ $copy['story_for_home'] }}</strong>{{ $copy['story_home_text'] }}</div><div><strong>{{ $copy['story_for_pro'] }}</strong>{{ $copy['story_pro_text'] }}</div></div>
    </div>
</div></section>
@endif

@if($copy['services_visible'] === '1')
<section class="section application-showcase"><div class="wrap">
    <div class="section-heading"><div><span class="eyebrow">{{ $copy['services_eyebrow'] }}</span><h2 class="section-title">{{ $copy['services_heading'] }}</h2><p class="section-copy">{{ $copy['services_intro'] }}</p></div><a href="{{ route('services') }}" class="text-link">{{ $copy['services_button'] }} ↗</a></div>
    <div class="application-grid">@forelse($applications as $application)
        <a href="{{ route('services.show',$application->slug) }}" class="application-card"><img src="{{ $application->image_url ?: asset('media/interior.jpg') }}" alt="{{ $application->title }} inspiration" loading="lazy"><div class="application-card-content"><small>{{ $application->category ?: 'STONE SERVICE' }}</small><h3>{{ $application->title }} ↗</h3><p>{{ $application->summary }}</p></div></a>
    @empty<p>Discuss your stonework plans with our team. <a href="{{ route('quote') }}">Send an inquiry</a>.</p>@endforelse</div>
</div></section>
@endif

@if($copy['gallery_visible'] === '1' && $galleryItems->isNotEmpty())
<section class="section home-gallery-section"><div class="wrap">
    <div class="section-heading"><div><span class="eyebrow">{{ $copy['gallery_eyebrow'] }}</span><h2 class="section-title">{{ $copy['gallery_heading'] }}</h2><p class="section-copy">{{ $copy['gallery_intro'] }}</p></div><a class="text-link" href="{{ route('gallery') }}">{{ $copy['gallery_button'] }} ↗</a></div>
    <div class="home-gallery-grid">@foreach($galleryItems as $item)
        <a href="{{ route('gallery', $item->product ? ['product'=>$item->product->slug] : []) }}" class="home-gallery-tile">
            @if($item->media_type === 'image')<img src="{{ $item->media_url }}" alt="{{ $item->alt_text ?: $item->title }}" loading="lazy">@else<div class="home-gallery-video">▶ <small>WATCH VIDEO</small></div>@endif
            <span>{{ $item->title }}</span>
        </a>
    @endforeach</div>
</div></section>
@endif

@if($copy['showcase_visible'] === '1')
<section class="showcase-band"><div class="wrap showcase-grid">
    <div class="showcase-copy"><span class="eyebrow">{{ $copy['showcase_eyebrow'] }}</span><h2>{{ $copy['showcase_heading'] }}</h2><p>{{ $copy['showcase_intro'] }}</p><div class="showcase-actions"><a href="{{ route('projects') }}" class="button button-dark">{{ $copy['showcase_button'] }} <span>↗</span></a></div></div>
    <div class="showcase-photo"><img src="{{ \App\Models\SiteSetting::mediaUrl($copy['showcase_image']) }}" alt="Stone in a contemporary interior" loading="lazy"><span>{{ $copy['showcase_photo_label'] }}</span></div>
</div></section>
@endif

@if($copy['steps_visible'] === '1')
<section class="section steps-section"><div class="wrap">
    <div class="section-heading"><div><span class="eyebrow">{{ $copy['steps_eyebrow'] }}</span><h2 class="section-title">{{ $copy['steps_heading'] }}</h2></div><a href="{{ route('quote') }}" class="text-link">Start a quote ↗</a></div>
    <div class="steps-grid">@for($i=1;$i<=3;$i++)<div class="step"><span class="number">0{{ $i }}</span><h3>{{ $copy["step_{$i}_heading"] }}</h3><p>{{ $copy["step_{$i}_text"] }}</p></div>@endfor</div>
</div></section>
@endif

@if($copy['faq_visible'] === '1')
<section class="section faq-section"><div class="wrap faq-grid">
    <div><span class="eyebrow">{{ $copy['faq_eyebrow'] }}</span><h2 class="section-title">{{ $copy['faq_heading'] }}</h2><p class="section-copy">{{ $copy['faq_intro'] }}</p></div>
    <div>@for($i=1;$i<=4;$i++)<details><summary>{{ $copy["faq_{$i}_question"] }}</summary><p>{{ $copy["faq_{$i}_answer"] }}</p></details>@endfor</div>
</div></section>
@endif

@if($copy['testimonials_visible'] === '1' && $testimonials->isNotEmpty())
<section class="section testimonial-section" aria-labelledby="testimonial-title"><div class="wrap">
    <div class="section-heading"><div><span class="eyebrow">{{ $copy['testimonials_eyebrow'] }}</span><h2 class="section-title" id="testimonial-title">{{ $copy['testimonials_heading'] }}</h2><p class="section-copy">{{ $copy['testimonials_intro'] }}</p></div></div>
    <div class="testimonial-grid">@foreach($testimonials as $testimonial)
        <figure class="testimonial-card"><div class="testimonial-mark" aria-hidden="true">“</div><blockquote>{{ $testimonial->quote }}</blockquote><figcaption><strong>{{ $testimonial->client_name }}</strong>@if($testimonial->client_context)<span>{{ $testimonial->client_context }}</span>@endif @if($testimonial->location)<small>{{ $testimonial->location }}</small>@endif</figcaption></figure>
    @endforeach</div>
</div></section>
@endif

@if($copy['blog_visible'] === '1')
<section class="section home-blog-section"><div class="wrap">
    <div class="section-heading"><div><span class="eyebrow">{{ $copy['blog_eyebrow'] }}</span><h2 class="section-title">{{ $copy['blog_heading'] }}</h2><p class="section-copy">{{ $copy['blog_intro'] }}</p></div><a href="{{ route('journal') }}" class="text-link">{{ $copy['blog_button'] }} ↗</a></div>
    <div class="article-grid">@foreach($articles as $article)
        <article class="article-card"><a href="{{ route('journal.show',$article->slug) }}" class="image img-zoom"><img class="image-cover" src="{{ $article->image_url ?: asset('media/stone.jpg') }}" alt="{{ $article->title }}" loading="lazy"></a><span class="card-kicker">{{ $article->category }}</span><h3><a href="{{ route('journal.show',$article->slug) }}">{{ $article->title }}</a></h3><p>{{ $article->summary }}</p><a class="text-link" href="{{ route('journal.show',$article->slug) }}">Read article ↗</a></article>
    @endforeach</div>
</div></section>
@endif
@include('site.partials.cta')
@endsection