turash/bugulma/frontend/components/landing/HowItWorksSection.tsx

import SectionHeader from '@/components/layout/SectionHeader';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { Container, Flex, Grid, Stack } from '@/components/ui/layout';
import { useTranslation } from '@/hooks/useI18n';
import { themeColors } from '@/lib/theme';
import { Building2, TrendingUp, Users } from 'lucide-react';
import React from 'react';

const StepIcon = React.memo(({ icon }: { icon: React.ReactNode }) => (
  <div className="relative">
    <div
      className={`h-20 w-20 rounded-full flex items-center justify-center ${themeColors.background.card} ${themeColors.text.primary} ring-4 ring-background shadow-lg`}
      aria-hidden="true"
    >
      <div className="h-14 w-14 rounded-full flex items-center justify-center bg-primary/10">
        <div className="text-primary">{icon}</div>
      </div>
    </div>
  </div>
));
StepIcon.displayName = 'StepIcon';

const BenefitCard = React.memo(({ title, desc }: { title: string; desc: string }) => (
  <Card className={`${themeColors.background.card} ${themeColors.text.default} shadow-md border h-full transition-all hover:shadow-lg hover:-translate-y-1`}>
    <CardHeader className="pb-3">
      <CardTitle className={`font-serif text-lg ${themeColors.text.primary} leading-tight`}>
        {title}
      </CardTitle>
    </CardHeader>
    <CardContent className="pt-0">
      <div className={`prose prose-sm max-w-none ${themeColors.text.muted}`}>
        <p className="mb-0 leading-relaxed">{desc}</p>
      </div>
    </CardContent>
  </Card>
));
BenefitCard.displayName = 'BenefitCard';

const Step = React.memo(
  ({
    icon,
    title,
    text,
    children,
    isLast = false,
  }: {
    icon: React.ReactNode;
    title: string;
    text: string;
    children?: React.ReactNode;
    isLast?: boolean;
  }) => (
    <Flex direction="row" gap="xl" align="start" className="relative">
      {/* Left column: Step icon */}
      <div className="flex-shrink-0 relative">
        <StepIcon icon={icon} />
        {/* Vertical connecting line */}
        {!isLast && (
          <div
            className={`absolute left-1/2 top-20 bottom-0 w-0.5 ${themeColors.border.default} opacity-60 -translate-x-1/2`}
            style={{ height: 'calc(100% + 2rem)' }}
            aria-hidden="true"
          />
        )}
      </div>

      {/* Right column: Content */}
      <Stack spacing="md" className="flex-1 min-w-0">
        <div>
          <h3 className="font-serif text-2xl md:text-3xl font-semibold text-foreground mb-4 leading-tight">
            {title}
          </h3>
          <div className={`prose prose-lg max-w-none ${themeColors.text.muted}`}>
            <p className="mb-0 leading-relaxed">{text}</p>
          </div>
        </div>
        {children && <div className="mt-4">{children}</div>}
      </Stack>
    </Flex>
  )
);
Step.displayName = 'Step';

const HowItWorksSection = () => {
  const { t } = useTranslation();

  const stepData = [
    {
      icon: <Building2 className="h-6 w-6 text-primary" />,
      title: t('howItWorksNew.step1.title'),
      text: t('howItWorksNew.step1.text'),
    },
    {
      icon: <Users className="h-6 w-6 text-primary" />,
      title: t('howItWorksNew.step2.title'),
      text: t('howItWorksNew.step2.text'),
    },
    {
      icon: <TrendingUp className="h-6 w-6 text-primary" />,
      title: t('howItWorksNew.step3.title'),
      text: t('howItWorksNew.step3.text'),
      children: (
        <Grid cols={{ sm: 1, md: 2, lg: 3 }} gap="lg" className="mt-8">
          <BenefitCard
            title={t('howItWorksNew.step3.benefit1.title')}
            desc={t('howItWorksNew.step3.benefit1.desc')}
          />
          <BenefitCard
            title={t('howItWorksNew.step3.benefit2.title')}
            desc={t('howItWorksNew.step3.benefit2.desc')}
          />
          <BenefitCard
            title={t('howItWorksNew.step3.benefit3.title')}
            desc={t('howItWorksNew.step3.benefit3.desc')}
          />
        </Grid>
      ),
    },
  ];

  return (
    <section
      className={`${themeColors.background.muted} min-h-screen flex items-center scroll-snap-align-start`}
      aria-labelledby="how-it-works-title"
    >
      <Container className="py-16 sm:py-24 lg:py-32 w-full">
        <SectionHeader
          id="how-it-works-title"
          title={t('howItWorksNew.title')}
          subtitle={t('howItWorksNew.subtitle')}
          className="mb-16 sm:mb-20 lg:mb-24"
        />

        <Stack spacing="3xl" className="max-w-6xl mx-auto" role="list" aria-label={t('howItWorksNew.title')}>
          {stepData.map((step, index) => (
            <li key={index} className="list-none">
              <Step
                icon={step.icon}
                title={step.title}
                text={step.text}
                isLast={index === stepData.length - 1}
              >
                {step.children}
              </Step>
            </li>
          ))}
        </Stack>
      </Container>
    </section>
  );
};

export default React.memo(HowItWorksSection);