import type { LucideIcon } from "lucide-react";
import { LayoutTemplate, Share2, Wand2 } from "lucide-react";

export interface HowItWorksStepData {
  number: number;
  title: string;
  description: string;
  icon: LucideIcon;
  previewClassName: string;
}

export const HOW_IT_WORKS_STEPS: HowItWorksStepData[] = [
  {
    number: 1,
    title: "Choose a template or start blank",
    description:
      "Browse 1,200+ professional templates or open a blank canvas tailored for video, image, or social formats.",
    icon: LayoutTemplate,
    previewClassName:
      "bg-gradient-to-br from-primary-100 to-primary-50 border-primary-200 text-primary-600",
  },
  {
    number: 2,
    title: "Customize with our AI-powered editor",
    description:
      "Drag, drop, and refine every layer. AI suggests copy, colors, and layouts so you ship polished work faster.",
    icon: Wand2,
    previewClassName:
      "bg-gradient-to-br from-violet-100 to-violet-50 border-violet-200 text-violet-600",
  },
  {
    number: 3,
    title: "Export and share in one click",
    description:
      "Download HD exports or publish directly to social channels, ads, and presentations without leaving the app.",
    icon: Share2,
    previewClassName:
      "bg-gradient-to-br from-neutral-100 to-neutral-50 border-neutral-200 text-neutral-600",
  },
];
