src/components/homepage/AnnouncementBanner.tsx

import { Badge, Button } from '@/components/base';
import { ChevronDown, Download } from 'lucide-react';
import Image from 'next/image';

export function AnnouncementBanner() {
  return (
    <>
      <div className="container flex flex-col items-center gap-4 text-center">
        <Badge className="rounded-lg" variant="secondary">
          NEW
          {' '}
          <span className="mx-1">+</span>
          {' '}
          v0.5.14 is now live on GitHub. Check it out!
        </Badge>

        <span className="text-4xl">❝</span>

        <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
          Chat with AI
          <br />
          without privacy concerns
        </h1>

        <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
          Jan is an open source ChatGPT-alternative that runs 100% offline.
        </p>

        <div className="space-y-4">
          <Button className="h-11 px-8" size="lg">
            <Download className="mr-2 size-4" />
            Download for Windows
            <ChevronDown className="ml-2 size-4" />
          </Button>
          <p className="text-xs text-muted-foreground">
            <span className="font-semibold text-yellow-500">2.5M+</span>
            {' '}
            downloads | Free & Open Source
          </p>
        </div>
      </div>

      <div className="container">
        <div className="relative mx-auto aspect-video max-w-5xl overflow-hidden rounded-xl border bg-background shadow-xl">
          <Image
            src="https://sjc.microlink.io/-ax0tIqUfnMYpO1Y6sFNuRcGN_Oe6cQwpzrnQR5q5pzkpfA29UGKZ228lDnpeQCpNANORBcNBmQgFoOtLn18vw.jpeg"
            alt="Jan AI Interface"
            fill
            className="object-cover"
            priority
          />
        </div>
      </div>
    </>
  );
}