@extends('layouts.app')

@section('title', 'Resources | Data Intellec')

@section('description', 'Articles, guides and the Data Intellec capability deck — field notes on real-time BI, AI over BI and AI agents for manufacturing, retail and e-commerce teams.')

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

@php
$categories = [
['key' => 'all', 'label' => 'All'],
['key' => 'business-intelligence', 'label' => 'Business Intelligence'],
['key' => 'ai-strategy', 'label' => 'AI Strategy'],
['key' => 'data-analytics', 'label' => 'Data Analytics'],
['key' => 'ecommerce-growth', 'label' => 'E-commerce Growth'],
['key' => 'industry-insights', 'label' => 'Industry Insights'],
];

$featured = [
[
'type' => 'Guide',
'title' => 'Understanding the real-time BI gap',
'image' => '/images/solutions/1.webp',
],
[
'type' => 'Case Study',
'title' => 'How Insight 360X was built for Shopify sellers',
'image' => '/images/products/1.webp',
],
[
'type' => 'Deep Dive',
'title' => 'AI agents in practice',
'image' => '/images/solutions/3.webp',
],
];

$articles = [
[
'category' => 'business-intelligence',
'categoryLabel' => 'Business Intelligence',
'title' => 'Why real-time BI fails without a decision layer',
'image' => '/images/factory-floor.webp',
],
[
'category' => 'ai-strategy',
'categoryLabel' => 'AI Strategy',
'title' => 'AI over BI: where explanation earns more trust than automation',
'image' => '/images/solutions/3.webp',
],
[
'category' => 'data-analytics',
'categoryLabel' => 'Data Analytics',
'title' => 'Unifying ops, commercial and finance data without a data team',
'image' => '/images/work/2.webp',
],
[
'category' => 'ecommerce-growth',
'categoryLabel' => 'E-commerce Growth',
'title' => 'What Shopify dashboards miss after $1M in GMV',
'image' => '/images/products/1.webp',
],
[
'category' => 'industry-insights',
'categoryLabel' => 'Industry Insights',
'title' => 'Manufacturing downtime: the reporting gap nobody prices in',
'image' => '/images/factory-floor-2.webp',
],
[
'category' => 'business-intelligence',
'categoryLabel' => 'Business Intelligence',
'title' => 'Real-time BI for retail: what "real-time" should actually mean',
'image' => '/images/work/1.webp',
],
];

$categoryIcons = [
'all' => '<path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" />',
'business-intelligence' => '<path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />',
'ai-strategy' => '<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" />',
'data-analytics' => '<path d="M3 3v18h18" /><path d="M7 15l3-4 3 3 5-7" />',
'ecommerce-growth' => '<circle cx="9" cy="21" r="1" /><circle cx="19" cy="21" r="1" /><path d="M2.5 3h2l2.4 12.4a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L21 7H6" />',
'industry-insights' => '<path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6M9 11h.01M15 11h.01M9 7h.01M15 7h.01" />',
];
@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/about-banner.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>
              Resources
            </p>

            <h1 class="mt-5 max-w-[18ch] text-[clamp(2.2rem,4.5vw,3.5rem)] font-semibold leading-[1.06] tracking-[-0.02em] text-white">
              Field notes for teams evaluating BI and AI delivery.
            </h1>

            <p class="mt-5 max-w-[52ch] text-[15px] leading-relaxed text-white/70">
              Short, practical reading on real-time BI, AI over BI and AI agents —
              organized by the problem it solves, not the technology behind it.
            </p>
          </div>
        </div>
      </section>

      <!-- ======================= FEATURED STRIP ======================== -->
      <section class="bg-white pb-4 pt-24 lg:pt-28">
        <div class="site_shell px-5 md:px-12 lg:px-16">
          <div class="res-featured-grid" data-reveal>
            @foreach ($featured as $item)
            <article class="res-feature-card">
              <img src="{{ $item['image'] }}" alt="" class="res-feature-card__image" />
              <div class="res-feature-card__scrim" aria-hidden="true"></div>

              <div class="res-feature-card__body">
                <span class="res-feature-card__type">{{ $item['type'] }}</span>
                <h2 class="res-feature-card__title">{{ $item['title'] }}</h2>
                <span class="res-feature-card__pill">Coming soon</span>
              </div>
            </article>
            @endforeach
          </div>
        </div>
      </section>

      <!-- ==================== FILTER + ARTICLE GRID ==================== -->
      <section class="bg-white pb-24 pt-10 lg:pb-28 lg:pt-14" data-res-section>
        <div class="site_shell px-5 md:px-12 lg:px-16">
          <div class="res-tab-bar" data-reveal>
            @foreach ($categories as $index => $category)
            <button
              type="button"
              class="res-tab{{ $index === 0 ? ' res-tab--active' : '' }}"
              data-res-filter="{{ $category['key'] }}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                {!! $categoryIcons[$category['key']] !!}
              </svg>
              {{ $category['label'] }}
            </button>
            @endforeach
          </div>

          <div class="res-grid mt-10 lg:mt-12" data-res-grid>
            @foreach ($articles as $article)
            <article class="res-card" data-res-category="{{ $article['category'] }}" data-reveal>
              <img src="{{ $article['image'] }}" alt="" class="res-card__image" />
              <div class="res-card__scrim" aria-hidden="true"></div>

              <div class="res-card__body">
                <span class="res-card__category">{{ $article['categoryLabel'] }}</span>
                <h2 class="res-card__title">{{ $article['title'] }}</h2>
                <span class="res-card__pill">Coming soon</span>
              </div>
            </article>
            @endforeach
          </div>

          <p class="res-empty" data-res-empty hidden>
            No resources in this category yet — check back soon.
          </p>
        </div>
      </section>

      <!-- ======================= CAPABILITY DECK ======================= -->
      <section class="res-deck">
        <div class="res-deck-grid">
          <div class="res-deck-copy-col">
            <div class="res-deck-copy" 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>
                Capability deck
              </p>

              <h2 class="mt-4 max-w-[16ch] text-[clamp(1.9rem,2.8vw,2.6rem)] font-semibold leading-[1.12] tracking-[-0.02em] text-(--accent-2)">
                Let's get you the deck.
              </h2>

              <p class="mt-4 max-w-[42ch] text-[15px] leading-relaxed text-(--accent-2)/65">
                Solutions, products and our delivery approach — sent to your
                inbox within one business day.
              </p>

              <form class="res-deck-form" action="{{ route('leads.store') }}" method="post" novalidate>
                @csrf
                <input type="hidden" name="source_page" value="resources" />
                <input type="hidden" name="source_form" value="resources-deck-download" />
                <input type="hidden" name="return_anchor" value="top" />

                <div class="res-deck-form-row">
                  <label class="res-deck-field">
                    <span>Full name*</span>
                    <input type="text" name="name" autocomplete="name" placeholder="John Smith" required />
                  </label>

                  <label class="res-deck-field">
                    <span>Work email*</span>
                    <input type="email" name="email" autocomplete="email" placeholder="you@company.com" required />
                  </label>
                </div>

                <div class="res-deck-form-row">
                  <label class="res-deck-field">
                    <span>Industry</span>
                    <input type="text" name="interest" autocomplete="organization-title" placeholder="e.g. Manufacturing, Retail" />
                  </label>

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

                <div class="res-deck-form-actions">
                  <button type="submit" class="res-deck-submit">
                    Request the deck
                  </button>

                  <span class="res-deck-submit-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M7 17 17 7" />
                      <path d="M7 7h10v10" />
                    </svg>
                  </span>
                </div>

                <p class="res-deck-form__privacy">
                  No spam. The deck asset is still pending from the client —
                  your request is logged and actioned either way.
                </p>
              </form>
            </div>
          </div>

          <div class="res-deck-media">
            <img
              src="/images/why-3.webp"
              alt=""
              class="res-deck-media__image"
              data-res-parallax-image />
          </div>
        </div>
      </section>

      <!-- ============================ CLOSING CTA ======================= -->
      <section class="res-point">
        <div class="res-point__media" aria-hidden="true">
          <div class="res-point__photo res-point__photo--tl" style="--img: url('/images/factory-floor-2.webp');">
            <span class="res-point__photo-tint"></span>
          </div>
          <div class="res-point__photo res-point__photo--tr" style="--img: url('/images/why-1.webp');">
            <span class="res-point__photo-tint"></span>
          </div>
          <div class="res-point__photo res-point__photo--bl" style="--img: url('/images/2.webp');">
            <span class="res-point__photo-tint"></span>
          </div>
          <div class="res-point__photo res-point__photo--br" style="--img: url('/images/right.webp');">
            <span class="res-point__photo-tint"></span>
          </div>
        </div>

        <div class="site_shell relative z-10 px-5 md:px-12 lg:px-16">
          <div class="res-point__content" data-reveal>
            <p class="res-point__eyebrow">
              <span class="res-point__eyebrow-icon" aria-hidden="true"></span>
              Proof, not just reading
            </p>

            <h2 class="res-point__title">
              Want proof before the reading list? See how these ideas play out in real delivery.
            </h2>

            <p class="res-point__lede">
              Nine anonymized use cases across manufacturing, retail and
              e-commerce — organized by the solution that actually shipped.
            </p>

            <div class="res-point__actions">
              <a href="{{ route('use-cases') }}" class="res-point__cta res-point__cta--solid">
                View use cases
                <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>
              </a>

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

@push('scripts')
<script src="/src/scripts/resources-filter.js"></script>
<script src="/src/scripts/resources-deck-parallax.js"></script>
@endpush