import * as React from 'react';
import { Reveal } from './Reveal';

interface SectionProps {
  number?: string;
  title?: string;
  children: React.ReactNode;
  className?: string;
  delay?: number;
  variant?: 'white' | 'gray';
  borderTop?: boolean;
  connector?: React.ReactNode;
  containerVariant?: 'narrow' | 'normal' | 'wide';
}

export const Section: React.FC<SectionProps> = ({
  number,
  title,
  children,
  className = "",
  delay = 0,
  variant = 'white',
  borderTop = false,
  connector,
  containerVariant = 'narrow',
}) => {
  const bgClass = variant === 'gray' ? 'bg-slate-50' : 'bg-white';
  const borderClass = borderTop ? 'border-t border-slate-100' : '';
  const containerClass = containerVariant === 'wide' ? 'wide-container' : containerVariant === 'normal' ? 'container' : 'narrow-container';

  // If no number and title, or if we want to force a simple layout, we could add a prop.
  // But let's make it smart: if it's wide, maybe we want the title on top anyway?
  // The user specifically asked to move it above for the configurator.
  
  const isTopTitle = containerVariant === 'wide';

  return (
    <section className={`relative py-24 md:py-32 group ${bgClass} ${borderClass} ${className}`}>
      <div className={containerClass}>
        {isTopTitle ? (
          <div className="space-y-16">
            {(number || title) && (
              <div className="flex flex-col md:flex-row md:items-end gap-6 md:gap-12">
                {number && (
                  <Reveal delay={delay}>
                    <span className="block text-6xl md:text-8xl font-bold text-slate-100 leading-none select-none">
                      {number}
                    </span>
                  </Reveal>
                )}
                {title && (
                  <Reveal delay={delay + 0.1}>
                    <div className="flex items-center gap-3 mb-2 md:mb-4">
                      <div className="h-px w-6 bg-slate-900"></div>
                      <h2 className="text-xs font-bold uppercase tracking-[0.3em] text-slate-900">
                        {title}
                      </h2>
                    </div>
                  </Reveal>
                )}
              </div>
            )}
            <div>{children}</div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-16">
            {/* Sidebar: Number & Title */}
            <div className="md:col-span-3 relative">
              {/* Connector Line */}
              {connector && (
                  <div className="absolute left-[2.5rem] top-0 bottom-0 w-24 hidden md:block -z-10 pointer-events-none">
                      {connector}
                  </div>
              )}

              <div className="md:sticky md:top-32 space-y-6">
                {number && (
                  <Reveal delay={delay}>
                    <span className="block text-6xl md:text-8xl font-bold text-slate-100 leading-none select-none relative bg-white/0 backdrop-blur-[2px]">
                      {number}
                    </span>
                  </Reveal>
                )}
                {title && (
                  <Reveal delay={delay + 0.1}>
                    <div className="flex items-center gap-3">
                      <div className="h-px w-6 bg-slate-900"></div>
                      <h2 className="text-xs font-bold uppercase tracking-[0.3em] text-slate-900">
                        {title}
                      </h2>
                    </div>
                  </Reveal>
                )}
              </div>
            </div>

            {/* Main Content */}
            <div className="md:col-span-9">
              {children}
            </div>
          </div>
        )}
      </div>
    </section>
  );
};