import Link from "next/link";
import { ArrowRight, FileDown, Sparkles, Wand2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { MarkdownPreview } from "@/components/editor/markdown-preview";

const SAMPLE = `# Hello, Markdown :wave:

A **fast** online editor with a live preview.

- GFM + syntax highlighting
- Math (KaTeX) and Mermaid diagrams
- Export to **HTML**, **PDF**, and **.md**

\`\`\`ts
const greet = (name: string) => \`Hello, \${name}!\`;
\`\`\`

Math: $e^{i\\pi} + 1 = 0$

| Feature      | Status |
| ------------ | :----: |
| Live preview |   ✅   |
| PDF export   |   ✅   |
| Autosave     |   ✅   |
`;

export function Hero() {
  return (
    <section className="relative isolate overflow-hidden border-b">
      <div className="hero-glow absolute inset-0 -z-10" aria-hidden />
      <div className="container grid gap-10 py-16 sm:py-20 lg:grid-cols-12 lg:py-24">
        <div className="lg:col-span-6 lg:pt-6">
          <Badge variant="secondary" className="rounded-full px-3 py-1 text-xs">
            <Sparkles className="mr-1 h-3 w-3" /> Free, open source, no signup
          </Badge>
          <h1 className="mt-4 text-balance text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
            Write Markdown. <span className="text-primary">See it live.</span> Export anywhere.
          </h1>
          <p className="mt-4 max-w-xl text-pretty text-base text-muted-foreground sm:text-lg">
            A fast, distraction-free online editor with live preview, GitHub Flavored Markdown,
            syntax highlighting, math (KaTeX), Mermaid diagrams, find &amp; replace, focus mode,
            and one-click export to <strong>PDF</strong>, HTML, or <code>.md</code>.
          </p>
          <div className="mt-6 flex flex-wrap items-center gap-3">
            <Button asChild size="lg">
              <Link href="/editor">
                Open the editor <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link href="/tools">
                <Wand2 className="h-4 w-4" /> Browse all tools
              </Link>
            </Button>
          </div>

          <dl className="mt-10 grid max-w-md grid-cols-3 gap-6 text-sm">
            <div>
              <dt className="text-muted-foreground">Bundle</dt>
              <dd className="font-semibold">&lt; 80&nbsp;KB</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">Lighthouse</dt>
              <dd className="font-semibold">95+ / 100</dd>
            </div>
            <div>
              <dt className="text-muted-foreground">License</dt>
              <dd className="font-semibold">MIT</dd>
            </div>
          </dl>
        </div>

        <div className="relative lg:col-span-6">
          <div className="relative rounded-xl border bg-background/80 shadow-2xl shadow-primary/5 backdrop-blur">
            <div className="flex items-center gap-2 border-b border-border/60 px-4 py-2">
              <span className="h-2.5 w-2.5 rounded-full bg-red-400" aria-hidden />
              <span className="h-2.5 w-2.5 rounded-full bg-yellow-400" aria-hidden />
              <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" aria-hidden />
              <span className="ml-2 text-xs text-muted-foreground">welcome.md</span>
              <span className="ml-auto inline-flex items-center gap-1 text-xs text-muted-foreground">
                <FileDown className="h-3 w-3" /> Export
              </span>
            </div>
            <div className="grid gap-0 sm:grid-cols-2">
              <pre className="scrollbar-thin max-h-[420px] overflow-auto border-b border-border/60 bg-muted/30 p-4 text-xs sm:max-h-none sm:border-b-0 sm:border-r">
                <code>{SAMPLE}</code>
              </pre>
              <div className="scrollbar-thin max-h-[420px] overflow-auto p-5 sm:max-h-none">
                <MarkdownPreview source={SAMPLE} safeLinks={false} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}