hanzo.ai/components/analytics/BuildForGrowth.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { TrendingUp, Users, CreditCard, ArrowRight } from "lucide-react";
import { Band, Head } from '@/components/marketing/band'
import { More } from '@hanzo/ui/marketing'
import { Body, Tile, Title, ink } from './kit'
import { Box, Text, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

const DOCS = 'https://docs.hanzo.ai/docs/projects/hanzoai/insights'

const GROUND = 'linear-gradient(to bottom, color-mix(in oklab, var(--muted) 20%, transparent), var(--background))'

const ITEMS = [
  {
    icon: TrendingUp,
    ink: 'var(--foreground)',
    title: phrase("Where they stop"),
    description: phrase("Build the funnel from steps you already track and read the drop between them. The step with the cliff is the one worth a week of work."),
    metrics: phrase("Funnels and goals")
  },
  {
    icon: Users,
    ink: ink(70),
    title: phrase("Whether they return"),
    description: phrase("Retention by the week someone arrived. Growth that comes only from new visitors looks identical to growth that lasts, until you look at this."),
    metrics: phrase("Retention and journeys")
  },
  {
    icon: CreditCard,
    ink: ink(70),
    title: phrase("What it was worth"),
    description: phrase("Send the order value with the event and revenue shows up beside the traffic that produced it, split by channel and campaign."),
    metrics: phrase("Revenue and attribution")
  },
]

const BuildForGrowth = () => {
  const { t } = useI18n()
  return (
    <Band rule={false} pad="$14" measure={1280} ground={GROUND}>
      {/* The head runs a rung LOUDER here than on /enso: these sections carry
          the page's argument rather than sitting under a heading above them. */}
      <Head
        loud
        measure={768}
        title={t('From a visit to a number')}
        lede={t('A pageview is not worth much on its own. It gets interesting once it is joined to the step someone stopped at, the campaign that sent them and the money that followed.')}
      />

      <Grid columns={{ min: 300, max: 3 }} gap={32}>
        {ITEMS.map((item, index) => (
          <motion.div
            key={item.title}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
          >
            <Tile height="100%" p="$6">
              <Box mb={20}>
                <item.icon size={32} color={item.ink} />
              </Box>
              <Title>{t(item.title)}</Title>
              <Body mb={20}>{t(item.description)}</Body>
              {/* The tag under a card — a word in a filled pill. */}
              <Text
                py={4}
                px={12}
                rounded={9999}
                bg="var(--secondary)"
                fontSize="$2"
                lineHeight="1.15rem"
                fontWeight="500"
                $platform-web={{ display: 'inline-block', color: ink(70) }}
              >
                {t(item.metrics)}
              </Text>
            </Tile>
          </motion.div>
        ))}
      </Grid>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5, delay: 0.3 }}
      >
        <XStack mt={64} justify="center">
          <More href={DOCS} color="var(--foreground)">
            {t('Read how reports work')} <ArrowRight size={16} data-i18n-mirror />
          </More>
        </XStack>
      </motion.div>
    </Band>
  );
};

export default BuildForGrowth;