import {
  BookOpen,
  ChevronRight,
  Code2,
  FileStack,
  FileText,
  FolderOpen,
  GitBranch,
  LayoutTemplate,
  MonitorSmartphone,
  Sparkles,
  TerminalSquare,
  Users,
  Zap,
  type LucideIcon,
} from 'lucide-react';
import React from 'react';

type FeatureCard = {
  title: string;
  copy: string;
  icon: LucideIcon;
};

const PRIMARY_FEATURES: FeatureCard[] = [
  {
    title: 'Privacy First',
    copy: 'Your project works from Browser storage and can optionally synchronize to one Projects Folder.',
    icon: FolderOpen,
  },
  {
    title: 'Local Compilation',
    copy: 'Compile LaTeX on your device without waiting for a server.',
    icon: Zap,
  },
  {
    title: 'Live Collaboration',
    copy: 'Edit Source, comment and review together in a live session.',
    icon: Users,
  },
];

const MORE_FEATURES: FeatureCard[] = [
  {
    title: 'Source and Visual',
    copy: 'Switch between LaTeX source and a manuscript view.',
    icon: MonitorSmartphone,
  },
  {
    title: 'Project Files',
    copy: 'Keep chapters, figures, data and references together.',
    icon: FileStack,
  },
  {
    title: 'Terminal',
    copy: 'Run local tools or open a Pro Linux workspace.',
    icon: TerminalSquare,
  },
  {
    title: 'Git',
    copy: 'Clone repositories and work with Git inside your project.',
    icon: GitBranch,
  },
  {
    title: 'Overleaf Import',
    copy: 'Import an Overleaf ZIP into a local Learnitive project.',
    icon: FileText,
  },
  {
    title: 'Paper Memory',
    copy: 'Keep papers, citations and evidence close to your draft.',
    icon: BookOpen,
  },
  {
    title: 'PDF and SyncTeX',
    copy: 'Move between source and PDF while you write.',
    icon: Code2,
  },
  {
    title: 'Templates',
    copy: 'Start with journal, conference and thesis templates.',
    icon: LayoutTemplate,
  },
  {
    title: 'Unlimited AI',
    copy: 'Unlimited local AI; BYOK usage follows the limits and terms of the provider you connect.',
    icon: Sparkles,
  },
];

function FeatureCardView({ feature, index }: { feature: FeatureCard; index: number }) {
  const Icon = feature.icon;
  return (
    <article className="interactive-why-card" style={{ '--learnitive-why-delay': `${index * 45}ms` } as React.CSSProperties}>
      <div className="interactive-why-card-pin" aria-hidden="true"><Icon className="size-5" /></div>
      <h3>{feature.title}</h3>
      <p>{feature.copy}</p>
    </article>
  );
}

export function HomeFeatureShowcase() {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <section className="interactive-why-section" aria-labelledby="interactive-why-title">
      <div className="interactive-why-heading">
        <span className="interactive-eyebrow">Why Learnitive?</span>
        <h2 id="interactive-why-title">Built Awesome</h2>
      </div>

      <div className="interactive-why-grid" data-interactive-why-primary="true">
        {PRIMARY_FEATURES.map((feature, index) => <FeatureCardView key={feature.title} feature={feature} index={index} />)}
      </div>

      {expanded ? (
        <div id="interactive-why-more" className="interactive-why-grid interactive-why-grid-more" data-interactive-why-more="true">
          {MORE_FEATURES.map((feature, index) => <FeatureCardView key={feature.title} feature={feature} index={index + PRIMARY_FEATURES.length} />)}
        </div>
      ) : null}

      <button
        type="button"
        className="interactive-why-toggle"
        aria-expanded={expanded}
        aria-controls="interactive-why-more"
        onClick={() => setExpanded((value) => !value)}
      >
        <span>{expanded ? 'Show less' : 'Show more'}</span>
        <ChevronRight className="size-4" aria-hidden="true" />
      </button>
    </section>
  );
}