import Link from "next/link"

const plans = [
  {
    name: "Free",
    price: "$0",
    period: "forever",
    apps: "5",
    ai: "5",
    badge: "Start Here",
    highlight: false,
    features: ["5 AI job applications/month", "5 AI resume customizations/month", "Application tracker", "Add your own API keys", "Multi-source search"],
    cta: "Get Started Free",
    ctaStyle: "bg-white/10 hover:bg-white/20"
  },
  {
    name: "Starter",
    price: "$9",
    period: "/month",
    apps: "50",
    ai: "50",
    badge: "",
    highlight: false,
    features: ["50 AI job applications/month", "50 AI resume customizations/month", "Application tracker", "Add your own API keys", "Email notifications"],
    cta: "Start Applying",
    ctaStyle: "bg-blue-500 hover:bg-blue-600"
  },
  {
    name: "Pro",
    price: "$39",
    period: "/month",
    apps: "100",
    ai: "100",
    badge: "Most Popular",
    highlight: true,
    features: ["100 AI job applications/month", "100 AI resume customizations/month", "Application tracker", "Add your own API keys", "Email notifications", "Interview prep tips"],
    cta: "Go Pro",
    ctaStyle: "bg-blue-500 hover:bg-blue-600"
  },
  {
    name: "Ultra",
    price: "$69",
    period: "/month",
    apps: "200",
    ai: "200",
    badge: "",
    highlight: false,
    features: ["200 AI job applications/month", "200 AI resume customizations/month", "Priority processing", "Add your own API keys", "Email + SMS notifications"],
    cta: "Go Ultra",
    ctaStyle: "bg-slate-600 hover:bg-slate-500"
  },
]

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900">
      {/* Nav */}
      <nav className="flex justify-between items-center px-8 py-6 max-w-6xl mx-auto">
        <div className="text-2xl font-bold text-white">
          Auto<span className="text-blue-400">Jobs</span>
        </div>
        <div className="flex gap-6">
          <Link href="/autojobs/login" className="text-slate-300 hover:text-white transition">Login</Link>
          <Link href="/autojobs/signup" className="px-5 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition">
            Get Started
          </Link>
        </div>
      </nav>

      {/* Hero */}
      <section className="py-24 px-6 text-center">
        <div className="max-w-4xl mx-auto">
          <div className="inline-block px-4 py-1.5 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-300 text-sm mb-6">
            Your Personal AI Job Agent
          </div>
          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
            Stop Applying to Jobs.
            <br />
            <span className="text-blue-400">Let AI Do It For You.</span>
          </h1>
          <p className="text-xl text-slate-300 mb-10 max-w-2xl mx-auto leading-relaxed">
            Upload your resume once. Set your keywords. Our AI finds every matching job, 
            rewrites your resume + cover letter for each one, and applies automatically — 
            while you sleep.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link 
              href="/autojobs/signup"
              className="px-10 py-4 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-bold text-lg transition shadow-lg shadow-blue-500/25"
            >
              Start Free — 5 Applications
            </Link>
            <Link 
              href="/autojobs/pricing"
              className="px-10 py-4 bg-white/10 hover:bg-white/20 text-white rounded-xl font-semibold text-lg border border-white/20 transition"
            >
              View All Plans
            </Link>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 px-6 bg-slate-800/40">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-3xl font-bold text-white text-center mb-4">How AutoJobs Works</h2>
          <p className="text-slate-400 text-center mb-12 max-w-xl mx-auto">Three steps to never manually applying to a job again.</p>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                step: "01",
                title: "Create Your Profile",
                desc: "Upload your resume. Tell us what jobs you want — keywords, location, salary range. Add your own API keys for job search engines."
              },
              {
                step: "02", 
                title: "AI Finds & Customizes",
                desc: "We search Jooble, JSearch, and more. For each match, AI rewrites your resume and writes a personalized cover letter targeting that company."
              },
              {
                step: "03",
                title: "Apply & Track",
                desc: "Apply with one click. Track every application status — applied, interviewing, offer, rejected. Land more interviews."
              }
            ].map((item) => (
              <div key={item.step} className="relative bg-slate-700/50 rounded-2xl p-8 border border-slate-600 hover:border-blue-500/50 transition">
                <div className="text-5xl font-bold text-blue-500/20 mb-4">{item.step}</div>
                <h3 className="text-xl font-semibold text-white mb-3">{item.title}</h3>
                <p className="text-slate-300 leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="py-20 px-6">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-3xl font-bold text-white text-center mb-12">Everything You Need to Land the Job</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              { icon: "🎯", title: "AI Resume Tailoring", desc: "Every resume is rewritten to match the exact job description and keywords" },
              { icon: "✉️", title: "AI Cover Letters", desc: "Personalized for each company — their mission, news, and your fit" },
              { icon: "🔍", title: "Multi-Source Search", desc: "Jooble, JSearch, and more — aggregated and deduplicated" },
              { icon: "📊", title: "Application Tracker", desc: "Dashboard shows every application, status, interview invites" },
              { icon: "🔑", title: "Your Own API Keys", desc: "Add your own keys — you control your data and spending" },
              { icon: "⚡", title: "Apply While You Sleep", desc: "AI works 24/7. Wake up to new opportunities submitted" },
              { icon: "📱", title: "Mobile Dashboard", desc: "Track your applications from anywhere — phone, tablet, desktop" },
              { icon: "📈", title: "Usage Analytics", desc: "See how many applications you've sent this month" },
              { icon: "🔒", title: "Private & Secure", desc: "Your data stays yours. API keys are encrypted." },
            ].map((f) => (
              <div key={f.title} className="bg-slate-800/50 rounded-xl p-5 border border-slate-700 hover:border-slate-500 transition">
                <div className="text-2xl mb-3">{f.icon}</div>
                <h3 className="text-lg font-semibold text-white mb-1">{f.title}</h3>
                <p className="text-slate-400 text-sm">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section className="py-20 px-6 bg-slate-800/40">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-3xl font-bold text-white mb-4">Simple, Transparent Pricing</h2>
          <p className="text-slate-400 mb-12">Pick the plan that fits your job search. No hidden fees.</p>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto" style={{gridTemplateColumns: 'repeat(4, 1fr)'}}>
            {plans.map((plan) => (
              <div 
                key={plan.name}
                className={`rounded-2xl p-6 border text-left relative ${
                  plan.highlight 
                    ? 'bg-gradient-to-br from-blue-600/30 to-purple-600/30 border-blue-500/50 shadow-lg shadow-blue-500/10' 
                    : 'bg-slate-700/50 border-slate-600'
                }`}
              >
                {plan.badge && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span className="px-3 py-1 bg-blue-500 text-white text-xs font-bold rounded-full">
                      {plan.badge}
                    </span>
                  </div>
                )}
                <div className="text-sm text-slate-400 font-medium mb-1">{plan.name}</div>
                <div className="flex items-baseline gap-1 mb-1">
                  <span className="text-3xl font-bold text-white">{plan.price}</span>
                  <span className="text-slate-400 text-sm">{plan.period}</span>
                </div>
                <div className="text-xs text-slate-500 mb-4">
                  {plan.apps} applications + {plan.ai} AI customizations/month
                </div>
                <ul className="space-y-2 mb-6">
                  {plan.features.map((f) => (
                    <li key={f} className="text-slate-300 text-sm flex items-start gap-2">
                      <span className="text-green-400">✓</span> {f}
                    </li>
                  ))}
                </ul>
                <Link 
                  href="/autojobs/signup"
                  className={`block text-center px-4 py-2.5 rounded-lg font-medium text-white transition ${plan.ctaStyle}`}
                >
                  {plan.cta}
                </Link>
              </div>
            ))}
          </div>

          <div className="mt-8 text-slate-400 text-sm">
            <p>Need more? <span className="text-blue-400">Business</span> (500/mo) = $119 &nbsp;|&nbsp; <span className="text-blue-400">Unlimited</span> = $319/month</p>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-16 px-6">
        <div className="max-w-4xl mx-auto grid grid-cols-3 gap-8 text-center">
          <div>
            <div className="text-3xl font-bold text-white mb-1">5</div>
            <div className="text-slate-400 text-sm">Free applications/month</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-white mb-1">&lt;$0.01</div>
            <div className="text-slate-400 text-sm">Cost per AI customization</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-white mb-1">15-25s</div>
            <div className="text-slate-400 text-sm">AI time per application</div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-6 border-t border-slate-700">
        <div className="max-w-5xl mx-auto text-center text-slate-500 text-sm">
          <p>© 2026 AutoJobs — Built on <a href="https://hostpioneers.com" className="text-blue-400 hover:underline">HostPioneers</a> infrastructure</p>
        </div>
      </footer>
    </div>
  )
}