import { FileSpreadsheet, FileText, Presentation } from "lucide-react"

export function HeroSection() {
  return (
    <section className="flex flex-col items-center gap-6 px-6 pt-16 pb-8 text-center md:pt-24 md:pb-12">
      <div className="flex items-center gap-2 rounded-full border border-border bg-card px-4 py-1.5 text-xs font-medium text-muted-foreground shadow-sm">
        <span className="inline-block size-1.5 rounded-full bg-success" />
        Now with Pro LLM Engine
      </div>

      <h1 className="max-w-2xl text-balance text-4xl font-bold leading-tight tracking-tight text-foreground md:text-5xl lg:text-6xl">
        Translate Office Documents. Keep the Format Perfect.
      </h1>

      <p className="max-w-xl text-pretty text-base leading-relaxed text-muted-foreground md:text-lg">
        Upload your Excel, Word, or PowerPoint files and get accurate translations with zero formatting loss.
      </p>

      <div className="flex items-center gap-6 pt-2">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <FileSpreadsheet className="size-4" />
          <span>.xlsx</span>
        </div>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <FileText className="size-4" />
          <span>.docx</span>
        </div>
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Presentation className="size-4" />
          <span>.pptx</span>
        </div>
      </div>
    </section>
  )
}