import type { ReactNode } from "react";
import { RoundedRockVoronoiBackground } from "@/components/brand/RoundedRockVoronoiBackground";
import { TopoCurvyExtend } from "@/components/brand/TopoCurvyExtend";
import { WavyContourLinesBackground } from "@/components/brand/WavyContourLinesBackground";
import { ScrollReveal } from "@/components/motion/ScrollReveal";
import { TopoSectionProvider } from "@/components/layout/TopoSectionContext";
import { toneFromSectionVariant, type TopoPatternId } from "@/content/topo-patterns";
import { cn } from "@/lib/utils";

type Props = {
  id?: string;
  className?: string;
  children: ReactNode;
  /** Override section backdrop (rock on green, contours on white); pass `null` to hide. */
  background?: ReactNode | null;
  variant?: "default" | "muted" | "inverse";
  /** @deprecated Patterns are hero + footer only; kept for API compatibility */
  riftPattern?: TopoPatternId;
  /** @deprecated */
  riftFlow?: boolean;
};

export function Section({
  id,
  className,
  children,
  background,
  variant = "default",
  riftPattern,
  riftFlow,
}: Props) {
  void riftPattern;
  void riftFlow;
  const tone = toneFromSectionVariant(variant);
  const isGreen = tone === "green";

  return (
    <section
      id={id}
      className={cn(
        "group/topo-section relative isolate py-16 md:py-24",
        isGreen && "section-green bg-[#1a5c38]",
        !isGreen && "section-white bg-white text-[#0d3d26]",
        !isGreen && "overflow-x-hidden overflow-y-visible",
        isGreen && "overflow-hidden",
        className
      )}
      data-section-tone={tone}
    >
      {isGreen &&
        (background !== undefined ? (
          background
        ) : (
          <RoundedRockVoronoiBackground
            className="z-0"
            gradient={variant === "inverse"}
          />
        ))}
      {!isGreen &&
        (background !== undefined ? (
          background
        ) : (
          <WavyContourLinesBackground className="z-0" />
        ))}
      {!isGreen && <TopoCurvyExtend />}
      <TopoSectionProvider tone={tone}>
        <ScrollReveal
          variant="section"
          className={cn(
            "topo-content-layer relative z-10 mx-auto max-w-6xl px-4 md:px-6",
            !isGreen && "topo-content-readable"
          )}
        >
          {children}
        </ScrollReveal>
      </TopoSectionProvider>
    </section>
  );
}