@extends('layouts.subweb')

@section('title', $page->meta_title ?? $brand->name)
@section('meta_description', $page->meta_description ?? $brand->description)

@section('content')

@php
    $s           = $page->sections ?? [];
    $hero        = $s['hero']        ?? [];
    $stats       = $s['stats']       ?? [];
    $solutions   = $s['solutions']   ?? [];
    $why         = $s['why']         ?? [];
    $industries  = $s['industries']  ?? [];
    $cta         = $s['cta']         ?? [];
@endphp

{{-- ── HERO ── --}}
<section class="sub-hero">
    <div class="sub-hero-inner">
        <div class="sub-hero-content">
            @if (!empty($hero['badge']))
                <div class="sub-hero-badge">{{ $hero['badge'] }}</div>
            @endif

            <h1>{!! $hero['headline'] ?? $brand->name !!}</h1>
            <p>{{ $hero['subheadline'] ?? $brand->description }}</p>

            <div class="hero-btns">
                @if (!empty($hero['cta_primary']))
                    <a href="{{ $hero['cta_primary_url'] ?? '#contact' }}" class="btn-primary">
                        {{ $hero['cta_primary'] }} →
                    </a>
                @endif
                @if (!empty($hero['cta_secondary']))
                    <a href="{{ $hero['cta_secondary_url'] ?? '#solutions' }}" class="btn-outline">
                        {{ $hero['cta_secondary'] }}
                    </a>
                @endif
            </div>
        </div>

        @if (!empty($stats))
            <div class="sub-hero-stats">
                @foreach ($stats as $stat)
                    <div class="sub-stat">
                        <div class="sub-stat-num">{{ $stat['value'] }}</div>
                        <div class="sub-stat-label">{{ $stat['label'] }}</div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>

{{-- ── SOLUTIONS ── --}}
@if (!empty($solutions))
<section class="sub-solutions" id="solutions">
    <div class="section-inner">
        <p class="section-label">Solusi Kami</p>
        <h2 class="section-title">{{ $s['solutions_title'] ?? 'Layanan Digital Terintegrasi' }}</h2>
        <p class="section-sub">{{ $s['solutions_sub'] ?? 'End-to-end, dari konsultasi hingga maintenance.' }}</p>

        <div class="solutions-grid">
            @foreach ($solutions as $item)
                <div class="solution-card">
                    <div class="sol-icon">{{ $item['icon'] ?? '⚡' }}</div>
                    <h3>{{ $item['title'] }}</h3>
                    <p>{{ $item['description'] }}</p>
                    @if (!empty($item['tags']))
                        <div class="sol-stack">
                            @foreach ($item['tags'] as $tag)
                                <span class="sol-tag">{{ $tag }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ── WHY US ── --}}
@if (!empty($why))
<section class="sub-why">
    <div class="section-inner">
        <p class="section-label">Mengapa Kami</p>
        <h2 class="section-title">{{ $s['why_title'] ?? 'One Partner, All Solutions.' }}</h2>
        <div class="why-grid">
            @foreach ($why as $item)
                <div class="why-card">
                    <div class="why-icon">{{ $item['icon'] }}</div>
                    <h4>{{ $item['title'] }}</h4>
                    <p>{{ $item['description'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ── INDUSTRIES ── --}}
@if (!empty($industries))
<section class="sub-industries">
    <div class="section-inner">
        <p class="section-label">Industri</p>
        <h2 class="section-title">{{ $s['industries_title'] ?? 'Siapa Klien Kami' }}</h2>
        <div class="industry-grid">
            @foreach ($industries as $item)
                <div class="industry-item">
                    <span class="ind-icon">{{ $item['icon'] }}</span>
                    {{ $item['name'] }}
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ── CTA / CONTACT ── --}}
<section class="sub-contact" id="contact">
    <div class="section-inner">
        <div class="contact-card">
            <h2>{{ $cta['headline'] ?? 'Siap Memulai Transformasi Digital?' }}</h2>
            <p>{{ $cta['subheadline'] ?? 'Konsultasi gratis. Kami rancang solusi yang tepat untuk bisnis Anda.' }}</p>

            <div class="contact-info">
                @php $contactEmail = \App\Models\SiteSetting::get('contact_email', 'info@vestaglobal.co.id', $brand->id); @endphp
                @php $contactPhone = \App\Models\SiteSetting::get('contact_phone', '+62-21-555-7890', $brand->id); @endphp

                <a href="mailto:{{ $contactEmail }}" class="contact-item">
                    ✉ {{ $contactEmail }}
                </a>
                <a href="tel:{{ $contactPhone }}" class="contact-item">
                    📞 {{ $contactPhone }}
                </a>
            </div>

            <a href="mailto:{{ $contactEmail }}" class="btn-primary">
                {{ $cta['btn_label'] ?? 'Hubungi Kami Sekarang' }} →
            </a>
        </div>
    </div>
</section>

@endsection