import type { Meta, StoryObj } from '@storybook/react';
import { Sparkles } from 'lucide-react';
import { Hero } from './Hero';
import React from 'react';

const meta: Meta<typeof Hero> = {
  title: 'Blocks/Marketing/Hero',
  component: Hero,
};

export default meta;
type Story = StoryObj<typeof Hero>;

export const Default: Story = {
  args: {
    eyebrow: { label: 'AI Adoption Platform', icon: <Sparkles /> },
    title: 'AI adoption, without the guesswork',
    description:
      'Deploy production-ready assistants across your organization in weeks, not months, with governance built in from day one.',
    primaryCta: { label: 'Book a demo', href: '/demo' },
    secondaryCta: { label: 'See how it works', href: '/how-it-works' },
    decorative: true,
  },
};

export const WithVisual: Story = {
  args: {
    ...Default.args,
    visual: (
      <div className="flex aspect-video items-center justify-center rounded-[var(--radius-card)] border border-border bg-muted text-sm text-muted-foreground">
        Product screenshot
      </div>
    ),
  },
};

export const Centered: Story = {
  args: {
    title: 'The fastest way to bring AI to your team',
    description: 'No visual, no clutter — just a clear message and a single call to action.',
    primaryCta: { label: 'Get started', href: '/start' },
    align: 'center',
  },
};