'use client';

import React from 'react';
import { Panel } from '@/ui/Panel';
import { Glow } from '@/ui/Glow';
import { Stack } from '@/ui/primitives/Stack';
import { Grid } from '@/ui/primitives/Grid';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Section } from '@/ui/Section';

interface HomeFeatureSectionProps {
  heading: string;
  description: React.ReactNode;
  mockup: React.ReactNode;
  layout: 'text-left' | 'text-right';
  accentColor?: 'primary' | 'aqua' | 'amber';
}

/**
 * HomeFeatureSection - A semantic section highlighting a feature.
 * Refactored to use semantic HTML and Tailwind.
 */
export function HomeFeatureSection({
  heading,
  description,
  mockup,
  layout,
  accentColor = 'primary',
}: HomeFeatureSectionProps) {
  const accentBorderColor = {
    primary: 'border-primary-accent/40',
    aqua: 'border-telemetry-aqua/40',
    amber: 'border-warning-amber/40',
  }[accentColor];

  const accentBgColor = {
    primary: 'primary-accent',
    aqua: 'telemetry-aqua',
    amber: 'warning-amber',
  }[accentColor];

  const glowColor = ({
    primary: 'primary',
    aqua: 'aqua',
    amber: 'amber',
  }[accentColor] || 'primary') as 'primary' | 'aqua' | 'amber' | 'purple';

  return (
    <Section variant="dark" py={24} borderBottom borderColor="border-gray" overflow="hidden" position="relative">
      <Glow 
        color={glowColor} 
        size="lg" 
        position={layout === 'text-left' ? 'bottom-left' : 'top-right'} 
        opacity={0.02} 
      />
      
      <Container>
        <Grid cols={1} lgCols={2} gap={12} alignItems="center">
          {/* Text Content */}
          <Stack gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
            <Stack gap={4}>
              <Stack w="12" h="1" bg={accentBgColor}>{null}</Stack>
              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
                {heading}
              </Heading>
            </Stack>
            <Stack color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
              {description}
            </Stack>
          </Stack>

          {/* Mockup Panel */}
          <Stack order={{ lg: layout === 'text-right' ? 1 : 2 }}>
            <Panel padding={1} variant="dark" border={true} position="relative" group overflow="hidden">
              <Stack bg="graphite-black" minHeight="300px" align="center" justify="center">
                {mockup}
              </Stack>
              {/* Decorative corner accents */}
              <Stack position="absolute" top="0" left="0" w="4" h="4" borderTop borderLeft borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
              <Stack position="absolute" bottom="0" right="0" w="4" h="4" borderBottom borderRight borderColor={accentBorderColor} opacity={0.4}>{null}</Stack>
            </Panel>
          </Stack>
        </Grid>
      </Container>
    </Section>
  );
}
