hanzo.ai/components/payments/Compliance.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { ShieldCheck, AlertTriangle } from "lucide-react";
import { Band, Disc, FADE, Head } from '@/components/marketing/band'
import { Body, Bullet, Heading, LIST, Tile } from './kit'
import { XStack, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'

const AREAS = [
  {
    icon: ShieldCheck,
    title: 'Automated Tax Management',
    body: 'Automatically handle VAT, GST, and regional taxes (including sales tax).',
    points: ['Real-time tax rate calculation', 'Tax exemption handling', 'Automated tax reporting'],
    delay: 0,
  },
  {
    icon: AlertTriangle,
    title: 'Fraud Protection',
    body: 'Automatic fraud detection and prevention built-in to protect your business.',
    points: ['Machine learning fraud detection', 'Adaptive risk rules', 'Chargeback protection'],
    delay: 0.2,
  },
]

const Compliance = () => {
  return (
    <Band rule={false} pad="$11" measure={1152} ground={FADE}>
      <Head
        title="Automatic Global Tax Compliance"
        lede="Focus on your business while Hanzo handles the complexity of global tax regulations and compliance."
      />

      <Grid columns={{ min: 300, max: 3 }} gap={32}>
        {AREAS.map((area) => (
          <XStack
            key={area.title}
            render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: area.delay }} />}
          >
            <Tile flex={1}>
              <Disc>
                <area.icon size={24} />
              </Disc>
              <Heading>{area.title}</Heading>
              <Body mb={16}>{area.body}</Body>
              {/* A `YStack`, never a `Box`: a Box is `display: block`, and a
                  gap on a block reaches nothing — which is the `space-y-2` this
                  list is replacing, silently lost. */}
              <YStack render="ul" gap="$2" $platform-web={LIST}>
                {area.points.map((p) => (
                  <Bullet key={p}>{p}</Bullet>
                ))}
              </YStack>
            </Tile>
          </XStack>
        ))}
      </Grid>
    </Band>
  );
};

export default Compliance;