import FeatureGrid from "../../app/components/sections/FeatureGrid";

export default {
  title: "Components/Sections/FeatureGrid",
  component: FeatureGrid,
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component: `
Feature grid for the home marketing section (Figma 18632:10668).

- **Layout**: stacked cards on mobile, 2×2 from tablet, horizontal lockup + grid on desktop
- **Shell**: \`surface/default/secondary\` content block with responsive spacing tokens
- **ContentLockup**: Feature variant — 18/22 title & 14/20 subtitle (mobile), 24/32 title & 16/24 subtitle (640px+), 16/24 link
- **Cards**: Invert-brand surfaces (lavender, lime, rust, teal) with title, description, and 40px icons
        `,
      },
    },
  },
  argTypes: {
    title: {
      control: { type: "text" },
      description: "Main headline text for the ContentLockup",
    },
    subtitle: {
      control: { type: "text" },
      description: "Supporting subtitle text for the ContentLockup",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes for custom styling",
    },
  },
};

export const Default = {
  args: {
    title: "Tools for the parts that get hard",
    subtitle:
      "Every group runs into the same knots. CommunityRule gives you a way through, and a written record of what you decided.",
  },
  parameters: {
    docs: {
      description: {
        story: `
Default FeatureGrid — responsive breakpoint layout with Figma styling (invert-brand cards, secondary surface, updated lockup copy).
        `,
      },
    },
  },
};