@extends('layouts.site')

@section('loader')
<div class="loader" aria-hidden="true">
    <div class="loader-mark"><div class="emblem-ghost"></div><div class="emblem-grow grow-fast"></div></div>
    <div class="loader-bar"><span></span></div>
    <span class="loader-word">KalpCanvas</span>
</div>
@endsection

@section('content')
<section class="hero">
    <canvas aria-hidden="true"></canvas>
    <div class="wrap hero-grid">
        <div class="stack" style="gap:28px">
            <span class="eyebrow fade-up">Advertising and branding agency · India</span>
            <h1 class="d1" data-rise><span class="line"><span>Imagination,</span></span><span class="line"><span>made real.</span></span></h1>
            <p class="lead fade-up">We turn ambitious ideas into brands people remember: strategy first, then design, technology and campaigns that grow your business.</p>
            <div class="row fade-up-2" style="gap:12px">
                <a href="{{ route('contact') }}" class="btn" data-track="cta_hero">Start a project <span aria-hidden="true">→</span></a>
                <a href="{{ route('work.index') }}" class="btn btn-line">See our work</a>
            </div>
            <div class="hero-meta fade-up-2">
                <div><b>11</b><span class="xs muted">services under one roof</span></div>
                <div><b>1 day</b><span class="xs muted">reply time on enquiries</span></div>
                <div><b>100%</b><span class="xs muted">strategy-led work</span></div>
            </div>
        </div>
        <div class="parallax" style="display:flex;justify-content:flex-end">
            <div class="hero-emblem" aria-hidden="true"><div class="emblem-ghost"></div><div class="emblem-grow"></div></div>
        </div>
    </div>
</section>

<div class="ticker" aria-hidden="true">
    <div class="marquee">
        @foreach([1, 2] as $_)@foreach($services as $s)<span>{{ $s->title }}</span>@endforeach @endforeach
    </div>
</div>

<section class="sec">
    <div class="wrap stack" style="gap:48px">
        <div class="split" style="align-items:end">
            <div class="stack" style="gap:16px"><span class="eyebrow">What we do</span><h2 class="d2">Everything your brand needs, built around one strategy.</h2></div>
            <p class="lead">From the first brand idea to the ads that sell it, one team plans, makes and measures the work. No hand-offs, no mixed messages.</p>
        </div>
        <ul class="idx">
            @foreach($services as $s)
                <li><a href="{{ route('services.show', $s) }}"><span class="t">{{ $s->title }}</span><span class="d muted">{{ $s->summary }}</span><span class="arrow" aria-hidden="true">→</span></a></li>
            @endforeach
        </ul>
    </div>
</section>

@if($work->isNotEmpty())
<section class="sec tint">
    <div class="wrap stack" style="gap:48px">
        <div class="row between" style="gap:16px;align-items:end">
            <div class="stack" style="gap:16px"><span class="eyebrow">Selected work</span><h2 class="d2">Ideas that moved the numbers.</h2></div>
            <a href="{{ route('work.index') }}" class="link">All case studies</a>
        </div>
        <div class="grid g3">@foreach($work as $item)@include('partials.work-card')@endforeach</div>
    </div>
</section>
@endif

<section class="sec">
    <div class="wrap stack" style="gap:48px">
        <div class="stack" style="gap:16px;max-width:760px"><span class="eyebrow">How we work</span><h2 class="d2">Clear steps. No surprises.</h2></div>
        <div class="grid g4">
            @foreach([['01', 'Discover', 'We learn your business, customers and competitors, and agree what success looks like.'], ['02', 'Define', 'Strategy, positioning and a plan with scope, timeline and price you sign off.'], ['03', 'Design and build', 'We make the work and share it for approval in your client portal at every stage.'], ['04', 'Launch and grow', 'We launch, measure and improve, with a plain-English report every month.']] as [$n, $t, $d])
                <div class="box stack" style="gap:14px"><span class="eyebrow">{{ $n }}</span><h3 class="d4">{{ $t }}</h3><p class="muted small">{{ $d }}</p></div>
            @endforeach
        </div>
    </div>
</section>

@if($testimonial)
<section class="sec tint">
    <div class="wrap-n stack" style="gap:24px">
        <span class="eyebrow">Client words</span>
        <blockquote class="quote" style="margin:0">“{{ $testimonial->quote }}”</blockquote>
        <p class="small"><span class="b">{{ $testimonial->name }}</span> <span class="muted">· {{ $testimonial->role }}, {{ $testimonial->company }}</span></p>
    </div>
</section>
@endif

@if($posts->isNotEmpty())
<section class="sec">
    <div class="wrap stack" style="gap:40px">
        <div class="row between" style="gap:16px;align-items:end"><div class="stack" style="gap:16px"><span class="eyebrow">Insights</span><h2 class="d2">Straight answers on growth.</h2></div><a href="{{ route('blog.index') }}" class="link">All articles</a></div>
        <div class="grid g3">
            @foreach($posts as $p)
                <a href="{{ route('blog.show', $p) }}" class="card box"><span class="eyebrow">{{ $p->category }} · {{ $p->read_minutes }} min</span><span class="card-t">{{ $p->title }}</span><span class="small muted">{{ $p->excerpt }}</span></a>
            @endforeach
        </div>
    </div>
</section>
@endif

<section class="sec tint">
    <div class="wrap split">
        <div class="stack" style="gap:16px"><span class="eyebrow">Questions</span><h2 class="d2">Good to know.</h2></div>
        @include('partials.faq', ['faqs' => $faqs])
    </div>
</section>

@include('partials.cta-band')

<button type="button" class="btn btn-xs btn-ghost replay no-print" data-replay>Replay intro</button>
@endsection