@extends('layouts.app')

@section('title', 'Use Cases | Data Intellec')

@section('description', 'Anonymized BI and AI use cases across manufacturing, FMCG, financial services and enterprise operations — real delivery patterns, organized by solution type and industry.')

@push('styles')
<link rel="stylesheet" href="/src/stylesheet/use-cases.css" />
@endpush

@php
// Real content sourced from the client's own pitch deck (DataIntellec -
// 2026.pdf, 2026-08-27) — nine real delivery patterns, condensed from
// each case's Pain Points / Solution / Business Outcome bullets. No
// client names, industries or metrics were invented: the deck names an
// industry for the three Real-time BI cases only, so the other six
// (which the deck describes without a named vertical) are tagged
// "Enterprise" rather than forced into a fabricated industry. There are
// no real White-label case studies yet, so that solution filter was
// dropped rather than left pointing at an always-empty result.
$solutionFilters = [
['key' => 'all', 'label' => 'All solutions'],
['key' => 'real-time-bi', 'label' => 'Real-time BI'],
['key' => 'ai-over-bi', 'label' => 'AI over BI'],
['key' => 'ai-agents', 'label' => 'AI Agents'],
];

$industryFilters = [
['key' => 'all', 'label' => 'All industries'],
['key' => 'manufacturing', 'label' => 'Manufacturing'],
['key' => 'fmcg', 'label' => 'FMCG'],
['key' => 'financial-services', 'label' => 'Financial Services'],
['key' => 'enterprise', 'label' => 'Enterprise'],
];

$useCases = [
[
'solution' => 'real-time-bi',
'solutionLabel' => 'Real-time BI',
'industry' => 'manufacturing',
'industryLabel' => 'Manufacturing',
'title' => 'Manufacturing Command Center',
'pain' => 'Production data was spread across ERP, MES, IoT devices and Excel reports, leaving plant managers without real-time visibility into machine performance and downtime.',
'outcome' => 'Single operational view across all manufacturing plants',
],
[
'solution' => 'real-time-bi',
'solutionLabel' => 'Real-time BI',
'industry' => 'fmcg',
'industryLabel' => 'FMCG',
'title' => 'FMCG Sales Intelligence Hub',
'pain' => 'Sales data was distributed across distributors, ERP, CRM and retailer systems, with no visibility into primary vs. secondary sales until stock-outs were already late.',
'outcome' => 'Improved sales visibility across all regions',
],
[
'solution' => 'real-time-bi',
'solutionLabel' => 'Real-time BI',
'industry' => 'financial-services',
'industryLabel' => 'Financial Services',
'title' => 'NBFC Executive Risk Dashboard',
'pain' => 'Lending, collections and portfolio reports were generated manually, with credit risk monitored using delayed spreadsheets.',
'outcome' => 'Faster executive reporting and improved portfolio risk monitoring',
],
[
'solution' => 'ai-over-bi',
'solutionLabel' => 'AI over BI',
'industry' => 'enterprise',
'industryLabel' => 'Enterprise',
'title' => 'AI-Powered Executive Summaries',
'pain' => 'Leadership teams spent hours interpreting dashboards, and weekly management summaries required significant manual effort.',
'outcome' => 'Significant reduction in reporting effort',
],
[
'solution' => 'ai-over-bi',
'solutionLabel' => 'AI over BI',
'industry' => 'enterprise',
'industryLabel' => 'Enterprise',
'title' => 'Demand Forecasting Engine',
'pain' => 'Forecasts relied heavily on historical averages and manual planning, causing overstocking and stock shortages.',
'outcome' => 'Improved forecast accuracy and optimized inventory planning',
],
[
'solution' => 'ai-over-bi',
'solutionLabel' => 'AI over BI',
'industry' => 'enterprise',
'industryLabel' => 'Enterprise',
'title' => 'AI Risk & Opportunity Detection',
'pain' => 'Business risks were discovered only after affecting operations, with no automated way to identify anomalies or revenue leakage.',
'outcome' => 'Early risk detection and increased revenue opportunities',
],
[
'solution' => 'ai-agents',
'solutionLabel' => 'AI Agents',
'industry' => 'enterprise',
'industryLabel' => 'Enterprise',
'title' => 'Executive AI Copilot',
'pain' => 'Executives depended on analysts for reports, and business questions required manual dashboard exploration.',
'outcome' => 'Instant business insights and reduced dependency on analysts',
],
[
'solution' => 'ai-agents',
'solutionLabel' => 'AI Agents',
'industry' => 'enterprise',
'industryLabel' => 'Enterprise',
'title' => 'Business Intake & BCD Agent',
'pain' => 'Business requirement gathering was manual and inconsistent, and project approvals were delayed by documentation effort.',
'outcome' => 'Faster project initiation and standardized documentation',
],
[
'solution' => 'ai-agents',
'solutionLabel' => 'AI Agents',
'industry' => 'enterprise',
'industryLabel' => 'Enterprise',
'title' => 'Enterprise Knowledge Agent',
'pain' => 'Employees spent excessive time searching for policies, SOPs and project documents scattered across SharePoint and file servers.',
'outcome' => 'Faster knowledge discovery and reduced support workload',
],
];

$industryIcons = [
'manufacturing' => '<path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6M9 11h.01M15 11h.01M9 7h.01M15 7h.01" />',
'fmcg' => '<path d="M3 7h18l-1.4 12.2A2 2 0 0 1 17.6 21H6.4a2 2 0 0 1-2-1.8L3 7Z" /><path d="M8 7V5a4 4 0 0 1 8 0v2" />',
'financial-services' => '<path d="M3 21h18M4 21V10l8-6 8 6v11M9 21v-6h6v6" />',
'enterprise' => '<path d="M4 21V6a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v15M13 21h7v-9a1 1 0 0 0-1-1h-6M8 8h.01M8 12h.01M8 16h.01" />',
];

$industryImages = [
'manufacturing' => '/images/factory-floor.webp',
'fmcg' => '/images/products/1.webp',
'financial-services' => '/images/why-2.webp',
'enterprise' => '/images/we-turn.webp',
];

$solutionIcons = [
'all' => '<path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" />',
'real-time-bi' => '<path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />',
'ai-over-bi' => '<path d="M12 3v3M12 18v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" /><circle cx="12" cy="12" r="3" />',
'ai-agents' => '<rect x="4" y="8" width="16" height="12" rx="2" /><path d="M12 8V4M8 4h8" /><circle cx="9" cy="14" r="1" /><circle cx="15" cy="14" r="1" />',
];
@endphp

@section('content')
      <!-- ============================ HERO ============================ -->
      <section class="relative isolate overflow-hidden bg-(--accent-2) pb-20 pt-[132px] lg:pb-24 lg:pt-[168px]">
        <img
          src="/images/factory-floor-2.webp"
          alt=""
          aria-hidden="true"
          class="pointer-events-none absolute inset-0 -z-20 h-full w-full object-cover" />

        <div
          aria-hidden="true"
          class="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(100deg,rgba(6,19,31,0.92)_0%,rgba(6,19,31,0.74)_38%,rgba(6,19,31,0.32)_68%,rgba(6,19,31,0.2)_100%),linear-gradient(0deg,rgba(6,19,31,0.55)_0%,rgba(6,19,31,0)_38%)]"
        ></div>

        <div class="site_shell px-5 md:px-12 lg:px-16">
          <div class="max-w-3xl" data-reveal>
            <p class="flex items-center gap-3 text-[11px] font-semibold uppercase tracking-[0.18em] text-(--accent-1)">
              <span class="h-px w-8 bg-(--accent-1)"></span>
              Use cases
            </p>

            <h1 class="mt-5 max-w-[20ch] text-[clamp(2.2rem,4.5vw,3.5rem)] font-semibold leading-[1.06] tracking-[-0.02em] text-white">
              Our track record of success.
            </h1>

            <p class="mt-5 max-w-[52ch] text-[15px] leading-relaxed text-white/70">
              Nine delivery patterns across real-time BI, AI over BI and
              AI agents — anonymized because the real ones are under
              NDA, specific because that's the point.
            </p>
          </div>
        </div>
      </section>

      <!-- ==================== FILTERS + USE CASE GRID =================== -->
      <section class="bg-white py-24 lg:py-28" data-uc-section>
        <div class="site_shell px-5 md:px-12 lg:px-16">
          <div class="uc-filters" data-reveal>
            <div class="uc-filter-group">
              <span class="uc-filter-group__label">Solution type</span>
              <div class="uc-filter-row">
                @foreach ($solutionFilters as $index => $filter)
                <button
                  type="button"
                  class="uc-filter{{ $index === 0 ? ' uc-filter--active' : '' }}"
                  data-uc-filter="solution"
                  data-uc-value="{{ $filter['key'] }}">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    {!! $solutionIcons[$filter['key']] !!}
                  </svg>
                  {{ $filter['label'] }}
                </button>
                @endforeach
              </div>
            </div>

            <div class="uc-filter-group">
              <span class="uc-filter-group__label">Industry</span>
              <div class="uc-filter-row">
                @foreach ($industryFilters as $index => $filter)
                <button
                  type="button"
                  class="uc-filter{{ $index === 0 ? ' uc-filter--active' : '' }}"
                  data-uc-filter="industry"
                  data-uc-value="{{ $filter['key'] }}">
                  @if ($filter['key'] !== 'all')
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    {!! $industryIcons[$filter['key']] !!}
                  </svg>
                  @else
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    {!! $solutionIcons['all'] !!}
                  </svg>
                  @endif
                  {{ $filter['label'] }}
                </button>
                @endforeach
              </div>
            </div>
          </div>

          <div class="uc-grid mt-10 lg:mt-12" data-uc-grid>
            @foreach ($useCases as $case)
            <article
              class="uc-card"
              data-uc-solution="{{ $case['solution'] }}"
              data-uc-industry="{{ $case['industry'] }}"
              data-reveal>
              <img src="{{ $industryImages[$case['industry']] }}" alt="" class="uc-card__image" />
              <div class="uc-card__scrim" aria-hidden="true"></div>

              <div class="uc-card__body">
                <div class="uc-card__top">
                  <span class="uc-card__industry">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      {!! $industryIcons[$case['industry']] !!}
                    </svg>
                    {{ $case['industryLabel'] }}
                  </span>
                  <span class="uc-card__solution">{{ $case['solutionLabel'] }}</span>
                </div>

                <div class="uc-card__spacer"></div>

                <h2 class="uc-card__title">{{ $case['title'] }}</h2>
                <p class="uc-card__pain">{{ $case['pain'] }}</p>

                <div class="uc-card__outcome">
                  <span class="uc-card__outcome-label">Outcome</span>
                  <span class="uc-card__outcome-text">{{ $case['outcome'] }}</span>
                </div>
              </div>
            </article>
            @endforeach
          </div>

          <p class="uc-empty" data-uc-empty hidden>
            No use cases match that combination yet — try a different filter.
          </p>
        </div>
      </section>

      <!-- ============ WANT THE FULL STORY? + KEEP READING (merged) ============ -->
      <section class="uc-point">
        <div class="uc-point__media" aria-hidden="true">
          <div class="uc-point__photo uc-point__photo--tl" style="--img: url('/images/we-turn.webp');">
            <span class="uc-point__photo-tint"></span>
          </div>
          <div class="uc-point__photo uc-point__photo--tr" style="--img: url('/images/signal.webp');">
            <span class="uc-point__photo-tint"></span>
          </div>
          <div class="uc-point__photo uc-point__photo--bl" style="--img: url('/images/action.webp');">
            <span class="uc-point__photo-tint"></span>
          </div>
          <div class="uc-point__photo uc-point__photo--br" style="--img: url('/images/why-4.webp');">
            <span class="uc-point__photo-tint"></span>
          </div>
        </div>

        <div class="site_shell relative z-10 px-5 md:px-12 lg:px-16">
          <div class="uc-point__content" data-reveal>
            <p class="uc-point__eyebrow">
              <span class="uc-point__eyebrow-icon" aria-hidden="true"></span>
              Want the full story?
            </p>

            <h2 class="uc-point__title">
              We're bound by NDAs. You can still get the detail — and keep reading after.
            </h2>

            <p class="uc-point__lede">
              Leave your details for a detailed, still-anonymized overview of
              the use case closest to your industry — problem, approach and
              the metrics that moved.
            </p>

            <div class="uc-point__card">
              <form class="uc-point__form" action="{{ route('leads.store') }}" method="post" novalidate>
                @csrf
                <input type="hidden" name="source_page" value="use-cases" />
                <input type="hidden" name="source_form" value="use-cases-gated-overview" />
                <input type="hidden" name="return_anchor" value="top" />

                <div class="uc-point__form-row">
                  <label class="uc-point__field">
                    <span>Full name</span>
                    <input type="text" name="name" autocomplete="name" placeholder="Your name" required />
                  </label>

                  <label class="uc-point__field">
                    <span>Work email</span>
                    <input type="email" name="email" autocomplete="email" placeholder="you@company.com" required />
                  </label>
                </div>

                <div class="uc-point__form-row">
                  <label class="uc-point__field">
                    <span>Industry</span>
                    <input type="text" name="interest" autocomplete="organization-title" placeholder="e.g. Manufacturing, Financial Services" />
                  </label>

                  <label class="uc-point__field">
                    <span>Designation</span>
                    <input type="text" name="description" placeholder="e.g. COO, Head of Sales" />
                  </label>
                </div>

                <button type="submit" class="uc-point__submit">
                  Send me the overview

                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M5 12h14" />
                    <path d="m12 5 7 7-7 7" />
                  </svg>
                </button>

                <p class="uc-point__privacy">
                  No spam, NDA-respecting, always. We'll follow up with the
                  detail closest to your industry within one business day.
                </p>
              </form>
            </div>

            <div class="uc-point__keep-reading">
              <span>Or keep reading</span>

              <div class="uc-point__actions">
                <a href="{{ route('resources') }}" class="uc-point__cta uc-point__cta--outline">
                  Browse resources
                </a>

                <a href="{{ route('contact') }}" class="uc-point__cta uc-point__cta--outline">
                  Talk to us
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
@endsection

@push('scripts')
<script src="/src/scripts/use-cases-filter.js"></script>
@endpush