mintel.me/apps/web/src/components/Section.tsx

import * as React from "react";
import { Reveal } from "./Reveal";
import { Label } from "./Typography";
import { cn } from "../utils/cn";

interface SectionProps {
  number?: string;
  title?: string;
  children: React.ReactNode;
  className?: string;
  delay?: number;
  variant?: "white" | "gray" | "glass";
  borderTop?: boolean;
  borderBottom?: boolean;
  containerVariant?: "narrow" | "normal" | "wide";
  illustration?: React.ReactNode;
  effects?: React.ReactNode;
}

export const Section: React.FC<SectionProps> = ({
  number,
  title,
  children,
  className = "",
  delay = 0,
  variant = "white",
  borderTop = false,
  borderBottom = false,
  containerVariant = "narrow",
  illustration,
  effects,
}) => {
  const hasSidebar = !!(number || title || illustration);
  const bgClass = {
    white: "bg-white",
    gray: "bg-slate-50/50",
    glass: "glass-subtle",
  }[variant];

  const borderTopClass = borderTop ? "border-t border-slate-100" : "";
  const borderBottomClass = borderBottom ? "border-b border-slate-100" : "";
  const containerClass =
    containerVariant === "wide"
      ? "wide-container"
      : containerVariant === "normal"
        ? "container"
        : "narrow-container";

  return (
    <section
      className={cn(
        "relative py-8 md:py-16 group overflow-hidden",
        bgClass,
        borderTopClass,
        borderBottomClass,
        className,
      )}
    >
      {/* Tech divider with binary accent */}
      {borderTop && (
        <div className="absolute top-0 left-0 right-0 overflow-hidden">
          <div
            className="h-px w-full"
            style={{
              background:
                "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.2) 20%, rgba(191, 206, 228, 0.15) 50%, rgba(148, 163, 184, 0.2) 80%, transparent 100%)",
            }}
          />
          <div className="flex justify-center mt-2">
            <span
              className="text-[7px] font-mono tracking-[0.5em] text-slate-200 select-none"
              aria-hidden="true"
            >
              01001101 01001001 01001110
            </span>
          </div>
        </div>
      )}

      {/* Optional effects layer */}
      {effects}

      <div className={cn("relative z-10", containerClass)}>
        {hasSidebar ? (
          <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-12 lg:gap-24">
            {/* Sidebar: Number & Title */}
            <div className="md:col-span-4 lg:col-span-3">
              <div className="md:sticky md:top-40 flex flex-col gap-4 md:gap-8">
                <div className="flex items-end md:flex-col md:items-start gap-6 md:gap-8">
                  {number && (
                    <Reveal delay={delay}>
                      <span className="block text-4xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
                        {number}
                        <span
                          className="absolute -top-1 md:top-1 left-0 text-[7px] md:text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
                          aria-hidden="true"
                        >
                          {parseInt(number || "0")
                            .toString(2)
                            .padStart(8, "0")}
                        </span>
                      </span>
                    </Reveal>
                  )}
                  {title && (
                    <Reveal delay={delay + 0.1}>
                      <div className="flex items-center gap-3 md:gap-4 mb-2 md:mb-0">
                        <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
                        <Label className="text-slate-900 text-[9px] md:text-[10px] tracking-[0.3em] md:tracking-[0.4em]">
                          {title}
                        </Label>
                      </div>
                    </Reveal>
                  )}
                </div>
                {illustration && (
                  <Reveal delay={delay + 0.2}>
                    <div className="pt-2 md:pt-8 opacity-100 group-hover:scale-105 transition-transform duration-1000 ease-out origin-left grayscale hover:grayscale-0">
                      {illustration}
                    </div>
                  </Reveal>
                )}
              </div>
            </div>

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