import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Home",
  description: "Home — SaaS Landing Page",
  openGraph: {
    title: "Home",
    description: "Home — SaaS Landing Page",
  },
}

export default function Page() {
  return (
  <div className="min-w-0 min-h-screen bg-white">
    <section className="w-full py-28 px-6 text-center bg-gradient-to-br from-indigo-50 via-white to-blue-50">
      <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current inline-block bg-indigo-100 text-indigo-700 text-sm font-medium px-4 py-1.5 rounded-full mb-6">Now in Public Beta</span>
      <h1 className="text-4xl font-bold text-5xl font-extrabold text-gray-900 mb-6 max-w-3xl mx-auto leading-tight">The Smarter Way to Manage Your Workflow</h1>
      <p className="text-base text-xl text-gray-600 mb-10 max-w-2xl mx-auto">Automate repetitive tasks, collaborate in real time, and ship products faster with our intelligent project management platform.</p>
      <div className="flex flex-row flex-wrap items-start flex gap-4 justify-center mb-8">
        <button className="inline-flex items-center justify-center font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 bg-indigo-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">Start for Free</button>
        <button className="inline-flex items-center justify-center font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 border border-gray-300 text-gray-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-50 transition">Book a Demo</button>
      </div>
      <p className="text-base text-sm text-gray-400">No credit card required. Free for teams up to 5.</p>
    </section>
    <section className="w-full py-12 px-6 border-y border-gray-100">
      <p className="text-base text-center text-sm text-gray-400 mb-6 uppercase tracking-wider font-medium">Trusted by teams at</p>
      <div className="flex flex-row flex-wrap flex items-center justify-center gap-10">
        <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current text-gray-400 font-semibold text-lg">Vercel</span>
        <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current text-gray-400 font-semibold text-lg">Stripe</span>
        <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current text-gray-400 font-semibold text-lg">Notion</span>
        <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current text-gray-400 font-semibold text-lg">Linear</span>
        <span className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-current/10 text-current text-gray-400 font-semibold text-lg">Figma</span>
      </div>
    </section>
    <section className="w-full py-24 px-6 max-w-6xl mx-auto">
      <h2 className="text-3xl font-bold text-3xl font-bold text-gray-900 text-center mb-4">Powerful Features for Modern Teams</h2>
      <p className="text-base text-gray-500 text-center mb-16 max-w-lg mx-auto">Everything you need to plan, track, and deliver projects on time.</p>
      <div className="grid min-w-0 grid grid-cols-3 gap-10">
        <div className="min-w-0 text-center">
          <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Smart Automation</h3>
          <p className="text-base text-gray-500 text-sm">Automate status updates, assignments, and notifications with rule-based triggers.</p>
        </div>
        <div className="min-w-0 text-center">
          <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Real-Time Sync</h3>
          <p className="text-base text-gray-500 text-sm">Every change syncs instantly across all devices. Never lose context switching between desktop and mobile.</p>
        </div>
        <div className="min-w-0 text-center">
          <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-2">Built-in Analytics</h3>
          <p className="text-base text-gray-500 text-sm">Track velocity, cycle time, and bottlenecks with dashboards that update in real time.</p>
        </div>
      </div>
    </section>
    <section className="w-full py-24 px-6 bg-gray-50">
      <h2 className="text-3xl font-bold text-3xl font-bold text-gray-900 text-center mb-12">Plans & Pricing</h2>
      <div className="grid min-w-0 grid grid-cols-3 gap-8 max-w-5xl mx-auto">
        <div className="bg-white p-8 rounded-2xl border border-gray-200">
          <h3 className="text-2xl font-semibold text-lg font-semibold text-gray-900 mb-1">Starter</h3>
          <p className="text-base text-3xl font-bold text-gray-900 mb-4">$0 / month</p>
          <ul className="list-disc pl-5 space-y-2 space-y-2 text-sm text-gray-600 mb-6">
            <li>Up to 5 users</li>