Landing page

import Link from 'next/link'

export default function HomePage() {
  return (
    <>
      <section className="py-24 text-center">
        <h1 className="text-5xl font-bold tracking-tight max-w-2xl mx-auto">
          Run your retail business from one place
        </h1>
        <p className="mt-4 text-lg text-muted-foreground max-w-xl mx-auto">
          POS, inventory, reports — built for shops with 1 to 50 outlets.
        </p>
        <div className="mt-8 flex justify-center gap-3">
          <Link href="/signup" className="rounded-full bg-primary px-6 py-2.5 text-primary-foreground">
            Start free trial
          </Link>
          <Link href="/demo" className="rounded-full border px-6 py-2.5">
            See a demo
          </Link>
        </div>
      </section>

      <FeaturesGrid />
      <SocialProof />
      <FinalCTA />
    </>
  )
}

function FeaturesGrid() {
  return (
    <section className="py-20 grid grid-cols-1 md:grid-cols-3 gap-8">
      {FEATURES.map((f) => (
        <div key={f.title} className="rounded-xl border p-6">
          <f.icon className="h-6 w-6 text-primary" />
          <h3 className="mt-3 text-lg font-semibold">{f.title}</h3>
          <p className="mt-1 text-muted-foreground">{f.body}</p>
        </div>
      ))}
    </section>
  )
}

const FEATURES = [
  { icon: Zap, title: 'POS in 5 seconds', body: 'Scan, total, print receipt. No training needed.' },
  { icon: Box, title: 'Inventory that just works', body: 'Re-order alerts, multi-location, batch tracking.' },
  { icon: BarChart, title: 'Reports out of the box', body: 'Daily, weekly, year-over-year. Export to Excel.' },
]