@extends('layouts.app')

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

@section('description', 'Explore Data Intellec products, including Insight 360X for Shopify analytics and DecisionDesk AI for executive decision intelligence.')

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

@section('content')
      <!-- ============================ HERO ============================
           Same full-bleed-photo-plus-scrim hero pattern as About's, rather
           than the flat navy + dot-grid this page started with. -->
      <section class="relative isolate overflow-hidden bg-(--accent-2) pb-20 pt-[132px] lg:pb-24 lg:pt-[168px]">
        <img
          src="/images/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>
              Products
            </p>

            <h1 class="mt-5 max-w-[24ch] sm:max-w-[26ch] text-[clamp(1.5rem,6vw,3.6rem)] font-semibold leading-[1.2] sm:leading-[1.1] tracking-[-0.02em] text-white text-balance">
              Two product tracks, both built to shorten the time between signal and decision.
            </h1>

            <p class="mt-6 max-w-[56ch] text-base leading-relaxed text-white/70 sm:text-[17px]">
              One is purpose-built for Shopify-first teams. The other is an executive decision intelligence platform, still being expanded with the latest client inputs.
            </p>

            <div class="mt-9 flex flex-wrap items-center gap-5">
              <a
                href="#book-demo"
                class="hero-cta group inline-flex min-h-[54px] items-center gap-2 rounded-[0.75rem] px-7 text-[15px] font-semibold text-(--accent-2) transition-transform duration-300 hover:-translate-y-0.5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white active:translate-y-0">
                Request a Demo

                <svg class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" 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="/solutions"
                class="inline-flex min-h-[54px] items-center gap-2 rounded-[0.75rem] bg-white/10 px-7 text-[15px] font-semibold text-white ring-1 ring-white/15 backdrop-blur transition-colors duration-300 hover:bg-white/15 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-(--accent-1)">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
                </svg>

                Explore solutions
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- ========================= PRODUCT PANELS ======================== -->
      <section class="prod-panel" data-reveal>
        <div class="site_shell px-5 md:px-12 lg:px-16">
          <div class="prod-panel__grid">
            <div class="prod-panel__body">
              <p class="prod-panel__eyebrow">
                <span>01</span>
                Product &middot; Shopify analytics
              </p>

              <h2 class="prod-panel__title">Insight 360X</h2>

              <p class="prod-panel__text">
                A decision-ready Shopify analytics layer that reconciles
                store, channel and finance numbers into one live operating
                view &mdash; the same number your team is still looking
                at by 5pm, not a nightly reprint of the 9am one.
              </p>

              <ul class="prod-panel__tags">
                <li>Real-time dashboards</li>
                <li>One governed source</li>
                <li>Role-based views</li>
              </ul>

              <a href="/products/insight-360x" class="prod-panel__cta">
                Explore Insight 360X
                <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>
            </div>

            <div class="prod-panel__media">
              <img
                src="/images/insight-360.webp"
                width="1680"
                height="945"
                alt="Insight 360X dashboard showing total sales, orders, conversion rate and sales by channel"
                loading="lazy"
              />
            </div>
          </div>
        </div>
      </section>

      <section class="prod-panel prod-panel--alt prod-panel--reverse" data-reveal>
        <div class="site_shell px-5 md:px-12 lg:px-16">
          <div class="prod-panel__grid">
            <div class="prod-panel__body">
              <p class="prod-panel__eyebrow">
                <span>02</span>
                Product &middot; Executive decision intelligence
              </p>

              <h2 class="prod-panel__title">DecisionDesk AI</h2>

              <p class="prod-panel__text">
                An AI-powered executive decision intelligence platform
                for founders, directors, CEOs and leadership teams
                &mdash; unified performance visibility, actionable
                recommendations, and a conversational AI assistant for
                the numbers behind every call.
              </p>

              <ul class="prod-panel__tags">
                <li>AI-powered decision intelligence</li>
                <li>Unified KPI monitoring</li>
                <li>Conversational AI assistant</li>
              </ul>

              <a href="/products/decisiondesk-ai" class="prod-panel__cta">
                Explore DecisionDesk AI
                <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>
            </div>

            <!-- No real product screenshot exists yet for DecisionDesk AI
                 — reusing the same abstract "signals converge into one
                 decision" visual as that product's own hero, rather than
                 inventing a new mockup here. -->
            <div class="prod-panel__media prod-panel__media--visual">
              <div class="dl-hero-visual">
                <p class="dl-hero-visual__eyebrow">Scattered signals</p>

                <div class="dl-hero-visual__signals" aria-hidden="true">
                  <span style="width: 92%; opacity: .5;"></span>
                  <span style="width: 68%; opacity: .35;"></span>
                  <span style="width: 84%; opacity: .55;"></span>
                  <span style="width: 56%; opacity: .3;"></span>
                  <span style="width: 76%; opacity: .45;"></span>
                </div>

                <div class="dl-hero-visual__arrow" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 4v14" />
                    <path d="m6 13 6 6 6-6" />
                  </svg>
                </div>

                <div class="dl-hero-visual__result">
                  <span class="dl-hero-visual__dot" aria-hidden="true"></span>
                  One governed decision
                </div>

                <p class="dl-hero-visual__label">
                  Full product view coming soon &mdash; DecisionDesk AI is
                  still in active development.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- ============================ FINAL CTA ============================
           Bespoke "point of the company" treatment for this page only —
           navy gradient, four corner photos, centered content and a
           minimal transparent-underline form — instead of reusing the
           plain shared .fcta-section (flat cream + faint dot grid) that
           Solutions and the solution sub-pages still use. -->
      <section id="book-demo" class="prod-cta">
        <div class="prod-cta-arc" aria-hidden="true">
          <svg viewBox="0 0 1440 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0,0 L0,55 Q720,-35 1440,55 L1440,0 Z" fill="var(--page-bg)" />
          </svg>
        </div>

        <div class="prod-cta__media" aria-hidden="true">
          <div class="prod-cta__photo prod-cta__photo--tl" style="--img: url('/images/solutions/1.webp');">
            <span class="prod-cta__photo-tint"></span>
          </div>
          <div class="prod-cta__photo prod-cta__photo--tr" style="--img: url('/images/solutions/3.webp');">
            <span class="prod-cta__photo-tint"></span>
          </div>
          <div class="prod-cta__photo prod-cta__photo--bl" style="--img: url('/images/work/1.webp');">
            <span class="prod-cta__photo-tint"></span>
          </div>
          <div class="prod-cta__photo prod-cta__photo--br" style="--img: url('/images/work/4.webp');">
            <span class="prod-cta__photo-tint"></span>
          </div>
        </div>

        <div class="site_shell relative z-10 px-5 md:px-12 lg:px-16">
          <div class="prod-cta__content" data-reveal>
            <p class="prod-cta__eyebrow">
              <span class="prod-cta__eyebrow-icon" aria-hidden="true"></span>
              Request a demo
            </p>

            <h2 class="prod-cta__title">
              Not sure which product fits?
            </h2>

            <p class="prod-cta__lede">
              Thirty minutes, on a call, looking at your own data
              &mdash; not a generic deck. You'll leave with a clear
              view of which product fits, or whether a custom build
              makes more sense.
            </p>

            <div class="prod-cta__card">
              <!-- TODO: wire action= to the real handler. Inert right now,
                   so nothing is submitted anywhere. -->
              <form class="prod-cta__form" action="{{ route('leads.store') }}" method="post">
                @csrf
                <input type="hidden" name="source_page" value="products-index" />
                <input type="hidden" name="source_form" value="products-final-cta" />
                <input type="hidden" name="return_anchor" value="book-demo" />

                <div class="prod-cta__form-row">
                  <label class="prod-cta__field">
                    <span>Full name</span>
                    <input id="prod-name" name="name" type="text" autocomplete="name" required placeholder="Jatin Sharma" />
                  </label>

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

                <div class="prod-cta__form-row">
                  <label class="prod-cta__field prod-cta__field--wide">
                    <span>Which product?</span>
                    <select id="prod-interest" name="interest">
                      <option value="insight-360x">Insight 360X</option>
                      <option value="decisiondesk-ai">DecisionDesk AI</option>
                      <option value="not-sure">Not sure yet</option>
                    </select>
                  </label>
                </div>

                <button type="submit" class="prod-cta__submit">
                  Request a demo
                  <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>

                <ul class="prod-cta__assurances">
                  <li>30-minute call</li>
                  <li>No obligation</li>
                  <li>NDA on request</li>
                </ul>
              </form>
            </div>

            <p class="prod-cta__alt">
              Prefer to see all the ways we build first?
              <a href="/solutions">Browse Solutions</a>.
            </p>
          </div>
        </div>
      </section>
@endsection