import {
  Bot,
  GitMerge,
  History,
  SearchCheck,
  ShieldCheck,
  TriangleAlert,
} from 'lucide-react';

import { Card, CardContent, CardHeader, CardTitle } from '@spoon/ui';

const maintenance = [
  {
    title: 'Upstream security fixes',
    description:
      'Track the changes that land upstream so important fixes do not disappear into fork drift.',
    icon: ShieldCheck,
  },
  {
    title: 'Conflict detection',
    description:
      'Make update risk visible before a merge request reaches the fork you actually maintain.',
    icon: TriangleAlert,
  },
  {
    title: 'AI-reviewed changes',
    description:
      'Prepare for agent-assisted analysis that explains whether upstream changes affect your custom work.',
    icon: SearchCheck,
  },
  {
    title: 'Merge request history',
    description:
      'Keep a durable timeline of upstream checks, review outcomes, and merge request decisions.',
    icon: History,
  },
];

export const Workflow = () => {
  const steps = [
    'Choose upstream',
    'Create a Spoon',
    'Customize your fork',
    'Track upstream',
    'Review and merge updates',
  ];
  return (
    <section id='workflow' className='border-border/60 bg-muted/30 border-y'>
      <div className='container mx-auto px-4 py-16'>
        <div className='mb-10 max-w-2xl'>
          <h2 className='text-3xl font-semibold tracking-normal'>
            A fork workflow that keeps moving
          </h2>
          <p className='text-muted-foreground mt-3'>
            Spoon starts with a provider-neutral model: upstream project,
            managed fork, update checks, and reviewable merge requests.
          </p>
        </div>
        <div className='grid gap-3 md:grid-cols-5'>
          {steps.map((step, index) => (
            <div key={step} className='border-border bg-card border p-4'>
              <p className='text-primary text-sm font-semibold'>
                {String(index + 1).padStart(2, '0')}
              </p>
              <p className='mt-4 text-sm font-medium'>{step}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export const Features = () => (
  <section id='maintenance' className='container mx-auto px-4 py-20'>
    <div className='mb-10 max-w-2xl'>
      <h2 className='text-3xl font-semibold tracking-normal'>
        Maintenance is the product
      </h2>
      <p className='text-muted-foreground mt-3'>
        The first version establishes the dashboard surfaces and records that
        future Git provider integrations and AI review jobs will use.
      </p>
    </div>
    <div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4'>
      {maintenance.map(({ title, description, icon: Icon }) => (
        <Card key={title} className='border-border/70 shadow-none'>
          <CardHeader>
            <Icon className='text-primary size-5' />
            <CardTitle className='text-base'>{title}</CardTitle>
          </CardHeader>
          <CardContent>
            <p className='text-muted-foreground text-sm leading-6'>
              {description}
            </p>
          </CardContent>
        </Card>
      ))}
    </div>
  </section>
);

export const Agents = () => (
  <section id='agents' className='border-border/60 bg-muted/30 border-y'>
    <div className='container mx-auto grid gap-8 px-4 py-20 lg:grid-cols-2'>
      <div>
        <div className='bg-primary/10 text-primary mb-4 flex size-10 items-center justify-center rounded-md'>
          <Bot className='size-5' />
        </div>
        <h2 className='text-3xl font-semibold tracking-normal'>
          Agent requests belong next to fork maintenance
        </h2>
        <p className='text-muted-foreground mt-4 leading-7'>
          Spoon is being shaped so a user can ask an agent to implement a
          change, open a merge request against the managed fork, and still keep
          upstream updates in view. This pass stores those requests without
          running automation yet.
        </p>
      </div>
      <div className='border-border bg-card border p-5'>
        <div className='mb-4 flex items-center gap-3'>
          <GitMerge className='text-primary size-5' />
          <p className='font-medium'>Queued agent request</p>
        </div>
        <p className='text-muted-foreground text-sm leading-6'>
          “Add a project-specific onboarding flow, open a merge request, and
          flag any upstream files this may affect.”
        </p>
        <div className='mt-5 grid gap-2 text-sm'>
          <div className='flex justify-between'>
            <span className='text-muted-foreground'>Target</span>
            <span>feature/onboarding</span>
          </div>
          <div className='flex justify-between'>
            <span className='text-muted-foreground'>Status</span>
            <span>Queued</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);
