import {
  BarChart3,
  Code2,
  Download,
  Eye,
  FileText,
  Focus,
  Keyboard,
  ListTree,
  Lock,
  Search,
  Sigma,
  Sparkles,
  Wand2,
  Workflow,
} from "lucide-react";

const FEATURES = [
  {
    icon: Eye,
    title: "Live split preview",
    description:
      "Type on the left, see the rendered HTML on the right. Synced scroll keeps both panes aligned.",
  },
  {
    icon: Code2,
    title: "GFM + syntax highlighting",
    description:
      "GitHub Flavored Markdown — tables, task lists, strikethrough, autolinks, footnotes, and 150+ language code highlighting.",
  },
  {
    icon: Sigma,
    title: "Math (KaTeX)",
    description:
      "Write inline `$a^2+b^2=c^2$` and block math. KaTeX styles load lazily — only on documents that need them.",
  },
  {
    icon: Workflow,
    title: "Mermaid diagrams",
    description:
      "Use ```mermaid fences to render flowcharts, sequence diagrams, and class diagrams as live SVG.",
  },
  {
    icon: Wand2,
    title: "Beautifier & linter",
    description:
      "One-click formatter normalizes whitespace, headings, and list markers. The lint panel flags issues with auto-fix.",
  },
  {
    icon: Search,
    title: "Find & replace",
    description:
      "Ctrl/⌘+F opens a regex-capable find & replace popup — match case, navigate matches, replace one or all.",
  },
  {
    icon: ListTree,
    title: "Outline & TOC",
    description:
      "Jump between headings instantly, or insert an auto-generated table of contents with one click.",
  },
  {
    icon: BarChart3,
    title: "Readability stats",
    description:
      "Sentence count, average sentence length, longest word, and a live Flesch reading-ease score for your document.",
  },
  {
    icon: Focus,
    title: "Focus mode",
    description:
      "Ctrl/⌘+. hides every UI chrome — drafts, toolbar, sidebar — for distraction-free, full-width writing.",
  },
  {
    icon: Download,
    title: "PDF / HTML / Markdown export",
    description:
      "Download `.md`, sanitized HTML, or a real PDF (no browser print dialog, no upload, no watermark).",
  },
  {
    icon: FileText,
    title: "Drafts & autosave",
    description:
      "Multiple tabbed drafts persist to your browser. Recover sessions on reload — no account required.",
  },
  {
    icon: Keyboard,
    title: "Keyboard shortcuts",
    description:
      "Bold, italic, link, find, format, focus, fullscreen — every shortcut you'd expect from a serious editor.",
  },
  {
    icon: Lock,
    title: "Private by default",
    description:
      "Everything runs in your browser. We don't upload your drafts, we don't profile you, we don't sell ads.",
  },
  {
    icon: Sparkles,
    title: "Built for the web",
    description:
      "Server-rendered with Next.js for blazing-fast loads. Dark and light themes follow your system.",
  },
];

export function Features() {
  return (
    <section className="container py-16 sm:py-20" aria-labelledby="features-title">
      <div className="mx-auto max-w-2xl text-center">
        <h2 id="features-title" className="text-3xl font-semibold tracking-tight sm:text-4xl">
          Everything you need to write Markdown well
        </h2>
        <p className="mt-3 text-muted-foreground">
          Markdown Viewer is built for fast, focused writing — with the developer-friendly tools you
          actually use every day.
        </p>
      </div>

      <ul className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {FEATURES.map((feature) => (
          <li
            key={feature.title}
            className="rounded-xl border bg-card p-5 transition-colors hover:bg-accent/40"
          >
            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
              <feature.icon className="h-4 w-4" />
            </div>
            <h3 className="mt-4 text-base font-semibold">{feature.title}</h3>
            <p className="mt-1.5 text-sm text-muted-foreground">{feature.description}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}