hanzo.ai/components/payments/TrustedBy.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { Band, FADE, Head, Words } from '@/components/marketing/band'
import { Tile } from './kit'
import { testimonials } from '@/lib/data/testimonials'
import { Box, XStack } from '@hanzo/ui'

const clients = [
  { name: "Damon", delay: 0 },
  { name: "Triller", delay: 0.1 },
  { name: "Zoo", delay: 0.2 },
  { name: "Skully", delay: 0.3 },
  { name: "Bellabeat", delay: 0.4 },
  { name: "Karma", delay: 0.5 }
];

/* One quote per person, from the one copy — this file carried its own wording
   for someone `lib/data/testimonials.ts` already quotes. */
const testimonial = testimonials[0];

/**
 * A client's name, set in the page's grey-to-grey wash. gui carries
 * `backgroundClip` but not its `-webkit-` twin, which is the half Safari reads
 * for clipping a gradient to text, so that one rides the web platform style.
 */
const NAME = {
  fontSize: '$7',
  lineHeight: 'calc(2 / 1.5)',
  fontWeight: '700',
  backgroundImage: 'linear-gradient(to right, var(--neutral-400), var(--neutral-300))',
  backgroundClip: 'text',
  color: 'transparent',
  '$platform-web': { WebkitBackgroundClip: 'text' },
} as const

const TrustedBy = () => {
  return (
    <Band rule={false} pad="$11" measure={1152} ground={FADE}>
      <Head
        title="Trusted Globally"
        lede="Industry leaders trust Hanzo Payments to manage their complex financial operations."
      />

      <XStack
        flexWrap="wrap"
        justify="center"
        items="center"
        gap="$5"
        px="$4"
        mb="$10"
        $sm={{ gap: '$7' }}
      >
        {clients.map((client) => (
          <Words
            key={client.name}
            render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: client.delay }} />}
            {...NAME}
          >
            {client.name}
          </Words>
        ))}
      </XStack>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
      >
        <Tile p="$6" maxW={768} mx="auto">
          <Box display="flex" flexDirection="column" items="center" $platform-web={{ textAlign: 'center' }}>
            <Words render="div" fontSize="$11" lineHeight="1" mb={16} color="var(--foreground)">&quot;</Words>
            <Words render="p" mb={24} fontSize="$6" lineHeight="var(--leading-xl)" fontStyle="italic" color="var(--text-secondary)">
              {testimonial.quote}
            </Words>
            <Box mt="$4">
              <Words render="p" fontWeight="600">{testimonial.author}</Words>
              <Words render="p" fontSize="$2" lineHeight="var(--leading-sm)" color="var(--muted-foreground)">{testimonial.role}</Words>
            </Box>
          </Box>
        </Tile>
      </motion.div>
    </Band>
  );
};

export default TrustedBy;