---
/**
 * ClientLogos Component
 *
 * Social-proof strip of client/partner logos shown beneath the hero on the
 * homepage. Renders as a grayscale, lazy-loaded grid that pops to full colour
 * on hover so the section stays subtle but credible.
 *
 * The component accepts an optional `clients` prop. Each entry can carry:
 *   - name:      display name and accessible alt text (required)
 *   - logo:      path to a logo image asset (optional). When provided the
 *                image is lazy-loaded and rendered grayscale; otherwise the
 *                name is rendered as a typographic wordmark fallback so the
 *                strip still renders intentionally while real assets are
 *                being collected.
 *   - href:      optional outbound URL or internal anchor (e.g. a portfolio
 *                case study). Omitted entries render as non-interactive items.
 *   - subtitle:  optional one-liner under the wordmark (e.g. "11 districts").
 *
 * If no `clients` prop is supplied the component uses a sensible default set
 * sourced from the active WorkRoot portfolio (PLNR, RENTEC, IIT Patna, MOC
 * Soft Technologies, Government of Bihar). When the real logo assets land
 * in `public/images/clients/<slug>.svg` simply add the `logo` field to the
 * matching entry (see TODO block in this file) and the component will swap
 * the wordmark for the image automatically.
 *
 * @prop {Array<{ name: string; logo?: string; href?: string; subtitle?: string }>} [clients]
 * @prop {string} [heading] - Eyebrow text rendered above the strip
 * @prop {'light' | 'dark'} [theme] - 'light' for white sections, 'dark' for
 *                                    dark/hero adjacent placement
 * @prop {string} [class] - Extra classes merged onto the wrapper section
 */

interface ClientEntry {
  name: string;
  logo?: string;
  href?: string;
  subtitle?: string;
}

interface Props {
  clients?: ClientEntry[];
  heading?: string;
  theme?: 'light' | 'dark';
  class?: string;
}

const {
  clients,
  heading = 'Trusted by teams shipping production software',
  theme = 'light',
  class: extraClass = '',
} = Astro.props;

// -----------------------------------------------------------------------------
// Default client roster — sourced from the live portfolio and testimonials.
// TODO(frontend-specialist): drop real SVG/PNG wordmarks into
//   public/images/clients/<slug>.svg
// and populate the `logo` field below. Required asset slugs:
//   - plnr.svg        (PLNR Financing platform)
//   - rentec.svg      (RENTEC / FPC Cart)
//   - iit-patna.svg   (IIT Patna University Management)
//   - moc-soft.svg    (MOC Soft Technologies)
//   - gov-bihar.svg   (Government of Bihar — Police Management / SCMS)
// Logos should be supplied as monochrome SVG on a transparent background and
// sized roughly 160 × 48 — the grayscale filter handles the rest.
// -----------------------------------------------------------------------------
const defaultClients: ClientEntry[] = [
  { name: 'PLNR',                      subtitle: 'Financing Platform' },
  { name: 'RENTEC',                    subtitle: 'FPC Cart' },
  { name: 'IIT Patna',                 subtitle: 'University System' },
  { name: 'MOC Soft Technologies',     subtitle: 'Enterprise Partner' },
  { name: 'Govt. of Bihar',            subtitle: '11 Districts' },
];

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

const isDark = theme === 'dark';

const sectionClass = [
  'relative',
  isDark
    ? 'bg-secondary-900'
    : 'bg-white dark:bg-secondary-900',
  extraClass,
].filter(Boolean).join(' ');

const eyebrowClass = isDark
  ? 'text-xs sm:text-sm uppercase tracking-[0.2em] text-secondary-400 font-semibold'
  : 'text-xs sm:text-sm uppercase tracking-[0.2em] text-secondary-500 dark:text-secondary-400 font-semibold';

const wordmarkClass = isDark
  ? 'text-lg sm:text-xl font-bold text-white/80 group-hover:text-white transition-colors'
  : 'text-lg sm:text-xl font-bold text-secondary-700 dark:text-secondary-200 group-hover:text-secondary-900 dark:group-hover:text-white transition-colors';

const subtitleClass = isDark
  ? 'block text-[11px] uppercase tracking-wider text-secondary-500 mt-1'
  : 'block text-[11px] uppercase tracking-wider text-secondary-400 dark:text-secondary-500 mt-1';

const imageFilter = 'grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-300';
---

<section class={sectionClass} aria-label="Clients and partners">
  <div class="container-wrapper py-12 sm:py-16">
    <p class={`text-center mb-8 ${eyebrowClass}`}>{heading}</p>

    <ul
      class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-x-8 gap-y-10 items-center justify-items-center"
      role="list"
    >
      {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 };
        return (
          <li class="w-full flex justify-center">
            <Wrapper
              {...wrapperProps}
              class={`group flex flex-col items-center justify-center text-center w-full max-w-[180px] min-h-[64px] focus:outline-none focus:ring-2 focus:ring-primary-400 rounded-md ${client.href ? 'cursor-pointer' : ''}`}
            >
              {client.logo ? (
                <img
                  src={client.logo}
                  alt={`${client.name} logo`}
                  loading="lazy"
                  decoding="async"
                  width="160"
                  height="48"
                  class={`h-10 sm:h-12 w-auto object-contain ${imageFilter}`}
                />
              ) : (
                <span class={wordmarkClass}>{client.name}</span>
              )}
              {client.subtitle && (
                <span class={subtitleClass}>{client.subtitle}</span>
              )}
            </Wrapper>
          </li>
        );
      })}
    </ul>
  </div>
</section>
