'use client';

import React from 'react';
import { Panel } from '@/ui/Panel';
import { Glow } from '@/ui/Glow';
import { Box } from '@/ui/Box';
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: 'primary-accent/40',
    aqua: 'telemetry-aqua/40',
    amber: '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>
        <Box display="grid" gridCols={{ base: 1, lg: 2 }} gap={{ base: 12, lg: 20 }} alignItems="center">
          {/* Text Content */}
          <Box display="flex" flexDirection="col" gap={8} order={{ lg: layout === 'text-right' ? 2 : 1 }}>
            <Box display="flex" flexDirection="col" gap={4}>
              <Box w="12" h="1" bg={accentBgColor} />
              <Heading level={2} fontSize={{ base: '3xl', md: '5xl' }} weight="bold" letterSpacing="tighter" lineHeight="none" color="text-white">
                {heading}
              </Heading>
            </Box>
            <Box color="text-gray-500" borderLeft borderStyle="solid" borderColor="border-gray/20" pl={6}>
              {description}
            </Box>
          </Box>

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