import type { ReactNode } from "react";

/** Shared page rhythm so blocks stack consistently regardless of author order. */
export function StorefrontSection({
  children,
  id,
  surface = false,
}: {
  children: ReactNode;
  id?: string;
  surface?: boolean;
}) {
  return (
    <section
      id={id}
      className="px-6 py-14"
      style={surface ? { backgroundColor: "var(--sf-surface)" } : undefined}
    >
      <div className="mx-auto max-w-6xl">{children}</div>
    </section>
  );
}

export function SectionHeading({
  children,
  centered = false,
}: {
  children: ReactNode;
  centered?: boolean;
}) {
  return (
    <h2
      className={`mb-6 text-2xl font-semibold tracking-tight ${centered ? "text-center" : ""}`}
      style={{ color: "var(--sf-text)" }}
    >
      {children}
    </h2>
  );
}