hanzo.ai/components/about/SenseiMethod.tsx

'use client'

import React from "react";
import type { ReactNode } from "react";
import { motion } from "@/components/motion";
import { ArrowRight, Target, BarChart3, Zap, Users } from "lucide-react";
import { View, YStack, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Line } from '@/components/type'
import { Action, Chip, Eyebrow, Title } from '@hanzo/ui/marketing'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

/**
 * The label above the heading. `Chip` carries the shape — inline-flex, the
 * hairline, the pill corner, the small rung — and only what this one page draws
 * differently is stated here: a tinted ground, a brighter edge and the page's
 * own ink.
 */
const BADGE = { mb: 16, px: 16, py: 4, fontWeight: "500", bg: "color-mix(in oklab, var(--primary) 10%, transparent)", borderColor: "color-mix(in oklab, var(--pure-white) 30%, transparent)", color: "var(--foreground)" } as const

const TINT = 'color-mix(in oklab, var(--primary) 10%, transparent)'

/** The framed shot's lit edge, drawn as 4px of gradient around the card, and its head's wash. */
const FRAME = 'linear-gradient(to bottom right, color-mix(in oklab, var(--pure-white) 20%, transparent), transparent)'
const HEAD = 'linear-gradient(to bottom right, color-mix(in oklab, var(--pure-white) 25%, transparent), color-mix(in oklab, var(--background) 40%, transparent), color-mix(in oklab, var(--pure-white) 10%, transparent))'

const MARK = { width: 24, height: 24, color: 'var(--foreground)' }

/** One of the four steps: a mark on its disc, then the step and what it means. */
function Step({ mark, title, children }: { mark: ReactNode; title: string; children: ReactNode }) {
  return (
    <XStack items="flex-start">
      <YStack p={8} mr={16} rounded="var(--radius-lg)" background={TINT}>{mark}</YStack>
      <YStack flex={1} minW={0}>
        <Line render="h3" size="xl" weight="600" display="block" marginBottom={4}>{title}</Line>
        <Line render="p" tone="muted" display="block">{children}</Line>
      </YStack>
    </XStack>
  )
}

/** One of the three figures under the claim. */
function Figure({ value, label }: { value: string; label: string }) {
  const { t } = useI18n()
  return (
    <YStack px={16} py={8} rounded="var(--radius-lg)" background={TINT}>
      <Line size="x2" weight="700" display="block">{value}</Line>
      <Line render="p" size="sm" tone="muted" display="block">{t(label)}</Line>
    </YStack>
  )
}

const SenseiMethod = () => {
  const { t } = useI18n()
  return (
    <YStack
      render="section"
      py={96}
      px={16}
      $sm={{ px: 24 }}
      $lg={{ px: 32 }}
    >
      <YStack width="100%" maxW={1280} mx="auto">
        {/*
          One column, then two from 1024. 400px is the floor that reproduces
          that: below ~464px of row a second track cannot fit, and `max: 2`
          raises the floor to half the row so a third never can.
        */}
        <Grid columns={{ min: 400, max: 2 }} gap={64} items="center">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <Chip {...BADGE}>
              {t('Principles in Practice')}
            </Chip>
            <Title quiet mb={24}>
              {t('The Sensei Method')}
            </Title>
            <Line render="p" size="xl" tone="muted" display="block" marginBottom={32}>
              {t('The Zen of Hanzo is what we believe. The Sensei Method is what an engagement looks like — Sensei Group sits with your team and works the problem alongside them.')}
            </Line>

            <YStack gap={24} mb={32}>
              <Step mark={<Target {...MARK} />} title={t('Identify First-Principle Goals')}>
                {t('Drill down to the fundamental objectives that drive real value.')}
              </Step>
              <Step mark={<Zap {...MARK} />} title={t('Rapid Prototyping')}>
                {t('Build quickly, test assumptions, and iterate with purpose.')}
              </Step>
              <Step mark={<BarChart3 {...MARK} />} title={t('Data-Driven Decisions')}>
                {t('Measure impact, analyze patterns, and let insights guide strategy.')}
              </Step>
              <Step mark={<Users {...MARK} />} title={t('Sensei Mentorship')}>
                {t('Work directly with expert “senseis” to implement and refine your approach.')}
              </Step>
            </YStack>

            {/*
              ONE element. It was an `<a>` inside a `<Button>` — interactive
              content nested in a button, which is invalid and which leaves the
              top and bottom of the control navigating nowhere. `HistoryTimeline`
              on this same page already records the identical fix.
            */}
            <Action href="https://sensei.group" target="_blank" rel="noopener noreferrer" fill>
              {t('Visit Sensei Group')}
              <ArrowRight width={20} height={20} data-i18n-mirror />
            </Action>
          </motion.div>

          <View
            render={<motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.6, delay: 0.2 }} />}
            display="block"
            position="relative"
          >
            <YStack p={4} rounded="var(--radius-2xl)" background={FRAME}>
              <YStack overflow="hidden" rounded="var(--radius-xl)" borderWidth={1} borderColor="var(--border)" bg="var(--card)" backdropFilter="blur(4px)">
                <XStack
                  width="100%"
                  height={224}
                  items="center"
                  justify="center"
                  borderTopLeftRadius="var(--radius-xl)"
                  borderTopRightRadius="var(--radius-xl)"
                  borderBottomWidth={1}
                  borderColor="var(--border)"
                  background={HEAD}
                >
                  <YStack items="center">
                    <Eyebrow render="span">{t('Sensei Method')}</Eyebrow>
                    <Line size="xl" weight="600" display="block" marginTop={8} color="var(--foreground)">{t('Strategy → Execution')}</Line>
                  </YStack>
                </XStack>
                <YStack p={32}>
                  <Line render="h3" size="x2" weight="600" display="block" marginBottom={16}>{t('The Impact of Sensei')}</Line>
                  <Line render="p" tone="muted" display="block" marginBottom={24}>
                    {t("Through the Sensei Method and Hanzo engineering, our team has built and invested in over 100 startups, generating over $1B in revenue, 9 unicorns, and 2 IPO exits.")}
                  </Line>
                  <XStack flexWrap="wrap" gap={12}>
                    <Figure value="$1B+" label={phrase("Revenue Generated")} />
                    <Figure value="100+" label={phrase("Startups Built")} />
                    <Figure value="9" label={phrase("Unicorns")} />
                    <Figure value="2" label={phrase("IPO Exits")} />
                  </XStack>
                </YStack>
              </YStack>
            </YStack>
          </View>
        </Grid>
      </YStack>
    </YStack>
  );
};

export default SenseiMethod;