import type { Metadata } from 'next';
import { Navbar, PageHero, Clients, CtaBand, Footer } from '@/components/landing';

const SEGMENTS = [
  { t: 'Generics manufacturers', d: 'High-volume deviation and CAPA tracking across multiple plants with tenant isolation per site.' },
  { t: 'Injectables & sterile facilities', d: 'Environmental monitoring schedules, sterility test evidence and expiry control.' },
  { t: 'Biologics & R&D', d: 'Stability programs, method transfers and recurring analytical schedules with full history.' },
  { t: 'Multi-site groups', d: 'White-label logins per site, consolidated SLA reporting and group-wide audit trails.' },
];

export const metadata: Metadata = { title: 'Clients — Qtrial', description: 'Who uses Qtrial: generics, injectables, biologics and multi-site pharma groups.' };

export default function ClientsPage() {
  return (
    <div>
      <a href="#page-main" className="skip-link">Skip to content</a>
      <Navbar />
      <main id="page-main" tabIndex={-1} className="outline-none">
        <PageHero kicker="Clients" title="Built with quality-driven teams"
          sub="From single-plant generics makers to multi-site groups, Qtrial fits how regulated manufacturing actually runs." />
        <Clients />
        <section aria-labelledby="seg-h" className="py-14">
          <div className="max-w-6xl mx-auto px-4">
            <h2 id="seg-h" className="page-title">Who Qtrial serves</h2>
            <div className="grid sm:grid-cols-2 gap-4 mt-6">
              {SEGMENTS.map((s) => (
                <div key={s.t} className="card">
                  <p className="font-semibold">{s.t}</p>
                  <p className="hint mt-1">{s.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
        <CtaBand />
      </main>
      <Footer />
    </div>
  );
}