@extends('layouts.app')

@section('title', $service['title'])

@section('content')
<section class="svc-hero">
    <div class="container">
        <nav class="svc-breadcrumb" aria-label="Breadcrumb">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <a href="{{ route('services') }}">Services</a>
            <span>/</span>
            <span aria-current="page">{{ $service['title'] }}</span>
        </nav>
        <h1>{{ $service['heading'] }}</h1>
        <p class="svc-intro">{{ $service['intro'] }}</p>
    </div>
</section>

@if(!empty($service['features']))
<section class="section svc-features-section svc-features-section--lead">
    <div class="container">
        <div class="svc-features-grid">
            @foreach($service['features'] as $feature)
            <article class="svc-feature-card reveal">
                <div class="svc-feature-icon"><i class="fas {{ $feature['icon'] }}"></i></div>
                <h2>{{ $feature['title'] }}</h2>
                <p>{{ $feature['text'] }}</p>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

@if(!empty($service['payment_gateways']))
<section class="section svc-payment-gateways" aria-labelledby="svc-payment-gateways-heading">
    <div class="container">
        <h2 id="svc-payment-gateways-heading" class="svc-payment-gateways-title">{{ $service['payment_gateways']['heading'] }}</h2>
        <div class="svc-payment-gateways-row">
            @foreach($service['payment_gateways']['logos'] as $logo)
            <div class="svc-payment-gateway-item reveal">
                <img src="{{ asset('images/' . $logo['file']) }}" alt="{{ $logo['name'] }}" loading="lazy">
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

@if(!empty($service['process_flow']))
<section class="section svc-process-section" aria-labelledby="svc-process-heading">
    <div class="container">
        <h2 id="svc-process-heading" class="svc-process-title">{{ $service['process_flow']['heading'] }}</h2>
        <div class="svc-process-track">
            @foreach($service['process_flow']['steps'] as $index => $step)
            @if($index > 0)
            <div class="svc-process-chevron reveal" aria-hidden="true"><i class="fas fa-angles-right"></i></div>
            @endif
            <article class="svc-process-card svc-process-card--{{ $step['tone'] }} reveal">
                <div class="svc-process-icon">
                    <i class="fas {{ $step['icon'] }}"></i>
                </div>
                <p class="svc-process-step-title">{{ $step['title'] }}</p>
                <ul class="svc-process-bullets">
                    @foreach($step['bullets'] as $bullet)
                    <li>{{ $bullet }}</li>
                    @endforeach
                </ul>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

@if(!empty($service['platform_columns']))
<section class="section svc-platform-section">
    <div class="container svc-platform-grid">
        @foreach($service['platform_columns'] as $col)
        <article id="{{ $col['id'] }}" class="svc-platform-card reveal">
            <header class="svc-platform-card-head">
                <div class="svc-platform-brand-icon" aria-hidden="true">
                    <i class="{{ $col['icon_class'] }}"></i>
                </div>
                <div>
                    <h2 class="svc-platform-card-title">{{ $col['title'] }}</h2>
                    <p class="svc-platform-card-tag">{{ $col['icon_label'] }}</p>
                </div>
            </header>
            <p class="svc-platform-card-body">{{ $col['text'] }}</p>
        </article>
        @endforeach
    </div>
</section>
@endif

@if($slug === 'web-design')
<section class="section svc-mockup-section">
    <div class="container svc-mockup-wrap reveal">
        <img src="{{ asset('images/responsive-web-design1.png') }}" alt="Responsive web design across desktop, tablet and mobile" class="svc-responsive-img">
    </div>
</section>
@endif

@if(!empty($service['why_choose']))
<section class="section svc-why-choose">
    <div class="container">
        <h2 class="svc-why-choose-title">{{ $service['why_choose']['heading'] }}</h2>
        <div class="svc-why-choose-grid">
            @foreach($service['why_choose']['items'] as $item)
            <div class="svc-why-item reveal">
                <div class="svc-why-icon">
                    <i class="fas {{ $item['icon'] }}"></i>
                </div>
                <p>{{ $item['text'] }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<section class="section svc-tech-section" aria-labelledby="svc-tech-heading">
    <div class="container">
        <header class="svc-tech-header reveal">
            <span class="section-label">Our stack</span>
            <h2 id="svc-tech-heading" class="svc-tech-title">Technologies We Work On</h2>
        </header>
        <div class="svc-tech-grid">
            @foreach($technologies as $tech)
            <div class="svc-tech-item reveal" title="{{ $tech['name'] }}">
                <img src="{{ asset('images/' . $tech['file']) }}" alt="{{ $tech['name'] }}" loading="lazy">
            </div>
            @endforeach
        </div>
    </div>
</section>

<section class="section cta-section">
    <div class="container cta-inner reveal">
        <h2>Ready to start your {{ strtolower($service['title']) }} project?</h2>
        <p>Talk to our team in Bangalore — we respond within one business day.</p>
        <a href="{{ route('contact') }}" class="btn btn-light">Contact Us</a>
        <a href="{{ route('quotation') }}" class="btn btn-outline" style="margin-left:0.75rem;border-color:#fff;color:#fff;">Get Quotation</a>
    </div>
</section>
@endsection