---
/**
 * TrustStrip Component
 *
 * A compact, single-row "Trusted by" strip of client / partner logos that sits
 * directly under the homepage hero. Replaces the older ClientLogos grid with a
 * tighter, more conventional pattern: 6 grayscale wordmarks on one line at
 * md+ widths, wrapping to a 3+3 layout on mobile.
 *
 * Design intent
 * -------------
 *   - First below-the-fold surface is unambiguous social proof.
 *   - Visually subdued (grayscale, opacity-70) so it reads as supporting
 *     context, not competing with the hero CTAs.
 *   - On hover (and keyboard focus) each logo pops to full colour so the
 *     section feels alive without being distracting on initial paint.
 *   - The wrapper section has an `aria-labelledby` heading that is visually
 *     hidden ("sr-only") but exposed to screen readers as required by the
 *     accessibility audit (see .agents/security-auditor/THEME_ACCESSIBILITY_AUDIT.md).
 *
 * CLS guard
 * ---------
 *   - Every `<img>` has explicit `width` and `height` attributes (160 × 48)
 *     so the browser reserves the slot before the SVG decodes. No layout
 *     shift on logo load.
 *   - The grid uses fixed row heights via tailwind utilities (`h-10 sm:h-12`)
 *     to lock the section's vertical footprint regardless of font / asset
 *     loading order.
 *
 * Asset notes
 * -----------
 *   - Logo SVGs live in `public/images/logos/<slug>.svg`. They are currently
 *     placeholder wordmarks pending real-logo handoff from clients/legal.
 *     Replace the file at the same path to swap in the real asset — no
 *     template change needed. See the README note in the PR.
 *   - Astro's `astro:assets` `<Image>` component only processes files under
 *     `src/assets/`. Public-folder static SVGs are best served with a plain
 *     `<img>` (no transform pipeline needed for already-vector assets);
 *     this still satisfies the Image-component goals — explicit dimensions,
 *     `loading="lazy"`, `decoding="async"` — which are the real CLS / perf
 *     levers.
 *
 * Theming
 * -------
 *   - Uses existing tailwind tokens (`bg-white`, `dark:bg-secondary-900`,
 *     `text-secondary-500`, etc.) — no new colour primitives introduced.
 *   - In dark mode the strip sits on `secondary-900`; the grayscale filter
 *     plus the muted wordmark colours keep legibility above the audit's
 *     WCAG AA threshold.
 *
 * Props
 * -----
 *   @prop {Array<{ name: string; logo: string; href?: string }>} [clients]
 *           Optional override list. Defaults to the WorkRoot client roster.
 *   @prop {string} [class]   Extra utility classes merged onto the section.
 */

interface LogoEntry {
  name: string;
  logo: string;
  href?: string;
}

interface Props {
  clients?: LogoEntry[];
  class?: string;
}

const { clients, class: extraClass = '' } = Astro.props;

// -----------------------------------------------------------------------------
// Default logo roster. Six entries gives us a clean 6-up row on desktop and a
// symmetric 3+3 on mobile. Names map to placeholder SVGs under public/images/
// logos/<slug>.svg. Drop a real logo at the same path to swap.
// -----------------------------------------------------------------------------
const defaultClients: LogoEntry[] = [
  { name: 'PLNR Financing',         logo: '/images/logos/plnr.svg' },
  { name: 'RENTEC / FPC Cart',      logo: '/images/logos/rentec.svg' },
  { name: 'IIT Patna',              logo: '/images/logos/iit-patna.svg' },
  { name: 'MOC Soft Technologies',  logo: '/images/logos/moc-soft.svg' },
  { name: 'Government of Bihar',    logo: '/images/logos/gov-bihar.svg' },
  { name: 'PSCL Bihar',             logo: '/images/logos/pscl.svg' },
];

const items: LogoEntry[] = clients && clients.length > 0 ? clients : defaultClients;

const sectionClass = [
  'relative bg-white dark:bg-secondary-900 border-y border-secondary-100 dark:border-secondary-800',
  extraClass,
].filter(Boolean).join(' ');
---

<!--
  Trust strip. Anchor `#trust-strip` lets the hero scroll-indicator (and any
  external deep-link) jump straight to the social-proof row.
-->
<section
  id="trust-strip"
  class={sectionClass}
  aria-labelledby="trust-strip-heading"
>
  <div class="container-wrapper py-10 sm:py-12">
    <!--
      Visually hidden but screen-reader announced. The audit calls for every
      labelled landmark to have an accessible name; we don't want a heavy
      visible header competing with the hero, hence sr-only.
    -->
    <h2 id="trust-strip-heading" class="sr-only">Trusted by</h2>

    <!--
      Logo row.
      Mobile (<sm): 3-up grid → wraps to 3+3 with 6 items.
      sm+ : 6-up flex row, evenly spaced.
      Items use min-w-0 + object-contain so wordmarks never overflow.
    -->
    <ul
      class="grid grid-cols-3 sm:grid-cols-6 items-center justify-items-center gap-x-6 gap-y-8 sm:gap-x-8"
      role="list"
      aria-label="Selected clients and partners"
    >
      {items.map((client) => {
        const Wrapper = client.href ? 'a' : 'div';
        const wrapperProps = client.href
          ? { href: client.href, 'aria-label': `Learn more about ${client.name}` }
          : { 'aria-label': client.name, role: 'img' };
        return (
          <li class="flex justify-center w-full">
            <Wrapper
              {...wrapperProps}
              class={`trust-logo group flex items-center justify-center w-full max-w-[160px] h-10 sm:h-12 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-400 ${client.href ? 'cursor-pointer' : ''}`}
            >
              <img
                src={client.logo}
                alt={`${client.name} logo`}
                width="160"
                height="48"
                loading="lazy"
                decoding="async"
                class="max-h-10 sm:max-h-12 w-auto object-contain"
              />
            </Wrapper>
          </li>
        );
      })}
    </ul>
  </div>
</section>

<style>
  /*
    Grayscale → colour transition.
    Default state: full grayscale + slightly reduced opacity so the strip reads
    as a calm, unified band of marks rather than a noisy rainbow of brand
    palettes.
    Hover / focus-within state: drop the filter so the original brand colours
    return, signalling interactivity without being startling.
    Dark mode: invert is applied AFTER grayscale so the (now monochrome) marks
    flip to a light tone that's legible on the dark surface. The invert is
    removed on hover/focus so the original colours are once again visible.
  */
  .trust-logo img {
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 300ms ease, opacity 300ms ease;
  }

  .trust-logo:hover img,
  .trust-logo:focus-visible img {
    filter: grayscale(0%);
    opacity: 1;
  }

  :global(.dark) .trust-logo img {
    /* Invert + slight brightness lift so the (grayscaled) marks read as a
       light-on-dark wordmark group. Tested against secondary-900 surface; the
       resulting luminance comfortably exceeds the WCAG AA 4.5:1 floor for the
       largest text-equivalent (the dominant wordmark glyphs). */
    filter: grayscale(100%) invert(1) brightness(1.1) contrast(0.95);
  }

  :global(.dark) .trust-logo:hover img,
  :global(.dark) .trust-logo:focus-visible img {
    /* Restore original colour on interaction. */
    filter: none;
    opacity: 1;
  }

  /* Honour reduced-motion preference — instant swap, no fade. */
  @media (prefers-reduced-motion: reduce) {
    .trust-logo img {
      transition: none;
    }
  }
</style>
