import { SiteHeader } from "@/components/site-header"
import { HeroSection } from "@/components/hero-section"
import { TranslationCard } from "@/components/translation-card"
import { SocialProofSection } from "@/components/social-proof-section"
import { PricingSection } from "@/components/pricing-section"
import { WaitlistSection } from "@/components/waitlist-section"
import { FaqSection } from "@/components/faq-section"

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />
      <main className="flex flex-1 flex-col">
        <HeroSection />
        <TranslationCard />
        <SocialProofSection />
        <PricingSection />
        <WaitlistSection />
        <FaqSection />
      </main>
      <footer className="border-t border-border py-8 text-center text-xs text-muted-foreground">
        <div className="mx-auto flex max-w-5xl flex-col items-center gap-2 px-6">
          <p>
            Office Translator &middot; Enterprise-grade document translation
          </p>
          <div className="flex items-center gap-4">
            <a href="#pricing" className="hover:text-foreground">
              Pricing
            </a>
            <a href="#faq" className="hover:text-foreground">
              FAQ
            </a>
            <a href="#waitlist" className="hover:text-foreground">
              Waitlist
            </a>
            <a
              href="/docs"
              className="hover:text-foreground"
              target="_blank"
              rel="noreferrer"
            >
              API Docs
            </a>
          </div>
          <p className="text-[11px] text-muted-foreground/70">
            &copy; {new Date().getFullYear()} Wordly.art. Documents are
            auto-deleted after 60 minutes and never used to train models.
          </p>
        </div>
      </footer>
    </div>
  )
}
