hanzo.ai/components/about/ZenPrinciples.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import {
  Users, Database, Share2, RefreshCcw, Heart, BookOpen
} from "lucide-react";
import { Box, View, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Line } from '@/components/type'
import { Action, Title } from '@hanzo/ui/marketing'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

/** Every mark on this page is drawn at 40 and takes the page's own ink. */
const MARK = { width: 40, height: 40, color: 'var(--foreground)' }

const principles = [
  {
    title: phrase("Enable the Underdog"),
    description: phrase("Enable others to win. Democratize technology so small businesses and startups can compete with industry giants."),
    icon: <Users {...MARK} />,
  },
  {
    title: phrase("Data-Driven Everything"),
    description: phrase("Let data be your guide. Embrace analytics and AI as the foundation of decision-making."),
    icon: <Database {...MARK} />,
  },
  {
    title: phrase("Open Innovation"),
    description: phrase("Be open, share often. Openness accelerates growth—both for the company and its community."),
    icon: <Share2 {...MARK} />,
  },
  {
    title: phrase("Adaptability"),
    description: phrase("Pivot with purpose. There is no failure, only feedback. Move quickly and strike in new directions when opportunity calls."),
    icon: <RefreshCcw {...MARK} />,
  },
  {
    title: phrase("Customer-Centric Growth"),
    description: phrase("Coach clients like a sensei. Treat each client as a long-term partner and guide them to success."),
    icon: <Heart {...MARK} />,
  },
  {
    title: phrase("First Principles Thinking"),
    description: phrase("See the invisible, do the impossible. Boil problems down to their essence and solve them in fundamentally better ways."),
    icon: <BookOpen {...MARK} />,
  }
];

/** The tile a principle sits in — this page's card ground, not the product one. */
const CARD = {
  display: 'block',
  height: '100%',
  p: 32,
  rounded: 'var(--radius-lg)',
  borderWidth: 1,
  borderColor: 'var(--border)',
  bg: 'var(--card)',
  backdropFilter: 'blur(4px)',
} as const

const ZenPrinciples = () => {
  const { t } = useI18n()
  return (
    <YStack
      render="section"
      py={96}
      px={16}
      $sm={{ px: 24 }}
      $lg={{ px: 32 }}
      bg="$panel"
    >
      <YStack width="100%" maxW={1280} mx="auto">
        <View
          render={<motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}
          display="block"
          mb={64}
          $platform-web={{ textAlign: 'center' }}
        >
          <Title quiet mb={16}>{t('The Zen of Hanzo')}</Title>
          <YStack height={4} width={80} mx="auto" mb={24} bg="var(--primary)" />
          {/* `display="block"` on every one of these: gui's Text is
              `display: inline`, and a measure, a centring margin and a
              marginBottom are all inert on an inline box. */}
          <Line render="p" size="xl" tone="muted" display="block" maxW={768} mx="auto">
            {t('The principles the company argues from when a decision is close.')}
          </Line>
        </View>

        {/*
          One / two / three, as a FLOOR rather than three breakpoints. 280px is
          what reproduces the 1-2-3 the class list drew: below ~344px of row a
          second track cannot fit, and `max: 3` raises the floor to a third of
          the row so a fourth never can.
        */}
        <Grid columns={{ min: 280, max: 3 }} gap={32} mb={48}>
          {principles.map((principle, index) => (
            <View
              key={index}
              render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.1 }} />}
              {...CARD}
            >
              <Box mb={24}>{principle.icon}</Box>
              <Line render="h3" size="xl" weight="600" display="block" marginBottom={12}>{t(principle.title)}</Line>
              <Line render="p" tone="muted" display="block">{t(principle.description)}</Line>
            </View>
          ))}
        </Grid>

        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }} />}
          display="block"
          $platform-web={{ textAlign: 'center' }}
        >
          {/*
            ONE element, not a `<Link>` inside a `<Button>`. Interactive content
            nested in a button is invalid, and it is the same defect
            `HistoryTimeline` already records fixing on this page: the box the
            touch floor grew to 44px navigated nowhere along its top and bottom
            edges, because only the inner anchor was the link.
          */}
          <Action href="/philosophy" fill>
            {t('Explore the full Zen manifesto')}
          </Action>
        </View>
      </YStack>
    </YStack>
  );
};

export default ZenPrinciples;