import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
import { SectionHeading } from "./section-heading";
import type { MarqueeSectionCopy } from "./types";

type MarqueeSectionProps = {
  copy: MarqueeSectionCopy;
  rows: MarqueeRow[];
};

export function MarqueeSection({ copy, rows }: MarqueeSectionProps) {
  return (
    <section className="space-y-8">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      {/* Full-bleed band: breaks out of the centered container to span the
          entire site width instead of sitting inside a card. */}
      <div className="relative left-1/2 w-screen -translate-x-1/2 overflow-hidden border-y border-border/60 bg-background/40 py-8">
        <StackedMarqueeSection rows={rows} className="py-0" />
      </div>
    </section>
  );
}