import { ReactNode } from 'react';
import Container from '@/components/ui/Container';

interface AlternatingSectionProps {
  heading: string;
  description: string | ReactNode;
  mockup: ReactNode;
  layout: 'text-left' | 'text-right';
  backgroundImage?: string;
}

export default function AlternatingSection({
  heading,
  description,
  mockup,
  layout,
  backgroundImage
}: AlternatingSectionProps) {
  return (
    <section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
      {backgroundImage && (
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{
            backgroundImage: `url(${backgroundImage})`,
            maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)',
            WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)'
          }}
        />
      )}
      <Container size="lg" className="relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {layout === 'text-left' ? (
            <>
              {/* Text Content - Left */}
              <div className="space-y-6">
                <h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
                  {heading}
                </h2>
                <div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
                  {description}
                </div>
              </div>

              {/* Mockup - Right (fade right) */}
              <div className="relative">
                <div
                  className="w-full h-[400px] lg:h-[500px]"
                  style={{
                    maskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
                    WebkitMaskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
                  }}
                >
                  {mockup}
                </div>
              </div>
            </>
          ) : (
            <>
              {/* Mockup - Left (fade left) */}
              <div className="relative order-2 lg:order-1">
                <div
                  className="w-full h-[400px] lg:h-[500px]"
                  style={{
                    maskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
                    WebkitMaskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
                  }}
                >
                  {mockup}
                </div>
              </div>

              {/* Text Content - Right */}
              <div className="space-y-6 order-1 lg:order-2">
                <h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
                  {heading}
                </h2>
                <div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
                  {description}
                </div>
              </div>
            </>
          )}
        </div>
      </Container>
    </section>
  );
}