function CornerDot({ className }: { className?: string }) {
  return (
    <svg
      width={9}
      height={9}
      viewBox='0 0 9 9'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
      className={className}
    >
      <rect
        width={9}
        height={9}
        rx={2}
        className='fill-bg-white-0 dark:fill-bg-weak-50 stroke-stroke-soft-200'
      />
    </svg>
  );
}

const DASHED_LINE = {
  background:
    'linear-gradient(90deg, var(--color-stroke-sub-300) 4px, transparent 4px) 50% 50% / 8px 1px repeat no-repeat',
} as React.CSSProperties;

function IconWidgets(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 25 24'
      {...props}
    >
      <path
        stroke='currentColor'
        strokeLinecap='square'
        strokeLinejoin='round'
        strokeWidth='1.5'
        d='m8.46 12-4.488 2.234a1.01 1.01 0 0 0 0 1.807l8.249 4.105c.28.139.607.139.886 0l8.25-4.105c.743-.37.743-1.438 0-1.807L16.867 12m-8.406 0L3.97 9.766c-.743-.37-.743-1.437 0-1.807l8.25-4.105a1 1 0 0 1 .886 0l8.25 4.105c.743.37.743 1.437 0 1.807L16.867 12m-8.406 0 3.76 1.871c.28.139.607.139.886 0L16.867 12'
      />
    </svg>
  );
}

function IconComponents(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 24 24'
      {...props}
    >
      <path
        stroke='currentColor'
        strokeLinejoin='round'
        strokeWidth='1.5'
        d='m8.957 5.043 2.336-2.336a1 1 0 0 1 1.414 0l2.336 2.336a1 1 0 0 1 0 1.414l-2.336 2.336a1 1 0 0 1-1.414 0L8.957 6.457a1 1 0 0 1 0-1.414Zm0 12.5 2.336-2.336a1 1 0 0 1 1.414 0l2.336 2.336a1 1 0 0 1 0 1.414l-2.336 2.336a1 1 0 0 1-1.414 0l-2.336-2.336a1 1 0 0 1 0-1.414Zm-6.25-6.25 2.336-2.336a1 1 0 0 1 1.414 0l2.336 2.336a1 1 0 0 1 0 1.414l-2.336 2.336a1 1 0 0 1-1.414 0l-2.336-2.336a1 1 0 0 1 0-1.414Zm12.5 0 2.336-2.336a1 1 0 0 1 1.414 0l2.336 2.336a1 1 0 0 1 0 1.414l-2.336 2.336a1 1 0 0 1-1.414 0l-2.336-2.336a1 1 0 0 1 0-1.414Z'
      />
    </svg>
  );
}

function IconTokens(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      fill='none'
      viewBox='0 0 25 24'
      {...props}
    >
      <path
        stroke='currentColor'
        strokeLinecap='round'
        strokeLinejoin='round'
        strokeWidth='1.5'
        d='M11.329 3.077a2 2 0 0 1 2 0l6.227 3.596a2 2 0 0 1 1 1.732v7.19a2 2 0 0 1-1 1.732l-6.227 3.596a2 2 0 0 1-2 0l-6.227-3.595a2 2 0 0 1-1-1.733v-7.19a2 2 0 0 1 1-1.732z'
      />
      <path
        stroke='currentColor'
        strokeLinecap='round'
        strokeLinejoin='round'
        strokeWidth='1.5'
        d='M11.578 12h1.5m.75 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'
      />
    </svg>
  );
}

const stats = [
  {
    icon: <IconWidgets className='size-6 shrink-0 text-purple-500' />,
    label: 'Widgets & Examples',
    value: '400+',
  },
  {
    icon: <IconComponents className='size-6 shrink-0 text-green-500' />,
    label: 'Components & Variant',
    value: '8000+',
  },
  {
    icon: <IconTokens className='size-6 shrink-0 text-orange-500' />,
    label: 'Styles, Variable & Tokens',
    value: '400+',
  },
];

export default function DesignSystemScaleStats() {
  return (
    <div className='before:bg-stroke-soft-200 after:bg-stroke-soft-200 relative mt-12 flex flex-col justify-center gap-6 before:absolute before:top-0 before:left-0 before:hidden before:h-px before:w-full after:absolute after:bottom-0 after:left-0 after:hidden after:h-px after:w-full md:flex-row md:py-7 md:before:block md:after:block xl:mt-24 xl:gap-8'>
      {/* Corner dots */}
      <CornerDot className='absolute -top-1 -left-px z-30 hidden min-h-[9px] min-w-[9px] md:block' />
      <CornerDot className='absolute -top-1 -right-px z-30 hidden min-h-[9px] min-w-[9px] md:block' />
      <CornerDot className='absolute -bottom-1 -left-px z-30 hidden min-h-[9px] min-w-[9px] md:block' />
      <CornerDot className='absolute -right-px -bottom-1 z-30 hidden min-h-[9px] min-w-[9px] md:block' />

      {stats.map((stat, index) => (
        <div key={stat.label} className='contents'>
          {/* Mobile dashed divider (before each item) */}
          <div
            className='bg-stroke-soft-200 h-px w-full md:hidden'
            style={DASHED_LINE}
          />

          {/* Vertical divider between items (desktop) */}
          {index > 0 && (
            <div className='bg-stroke-soft-200 hidden w-px md:block' />
          )}

          <div className='flex flex-1 items-start gap-4 md:flex-col md:items-center md:gap-0 md:text-center'>
            {stat.icon}
            <div className='md:mt-4'>
              <div className='text-label-md text-text-soft-400'>
                {stat.label}
              </div>
              <div className='text-title-h4 text-text-strong-950 mt-1'>
                {stat.value}
              </div>
            </div>
          </div>
        </div>
      ))}

      {/* Mobile dashed divider (after last item) */}
      <div
        className='bg-stroke-soft-200 h-px w-full md:hidden'
        style={DASHED_LINE}
      />
    </div>
  );
}