"use client"
import { useState } from "react"
import Link from "next/link"

const privatePlans = [
  {
    name: "Free",
    price: "$0",
    period: "forever",
    apps: "5",
    coverLetters: "5",
    badge: "",
    highlight: false,
    features: ["5 AI job applications/month", "5 AI resume customizations", "5 AI cover letters/month", "Application tracker"],
    cta: "Get Started",
    ctaStyle: "bg-white/10 hover:bg-white/20"
  },
  {
    name: "Starter",
    price: "$29",
    period: "/mo",
    apps: "20",
    coverLetters: "20",
    badge: "",
    highlight: false,
    features: ["20 AI job applications/month", "20 AI resume customizations", "20 AI cover letters/month", "Add your own API keys"],
    cta: "Start Now",
    ctaStyle: "bg-blue-500 hover:bg-blue-600"
  },
  {
    name: "Pro",
    price: "$69",
    period: "/mo",
    apps: "100",
    coverLetters: "100",
    badge: "Most Popular",
    highlight: true,
    features: ["100 AI job applications/month", "100 AI resume customizations", "100 AI cover letters/month", "LinkedIn resume import", "Add your own API keys", "Priority support"],
    cta: "Go Pro",
    ctaStyle: "bg-blue-500 hover:bg-blue-600"
  },
  {
    name: "Ultra",
    price: "$149",
    period: "/mo",
    apps: "200",
    coverLetters: "200",
    badge: "",
    highlight: false,
    features: ["200 AI job applications/month", "200 AI resume customizations", "200 AI cover letters/month", "LinkedIn resume import", "Add your own API keys", "SMS notifications"],
    cta: "Go Ultra",
    ctaStyle: "bg-slate-600 hover:bg-slate-500"
  },
  {
    name: "Unlimited",
    price: "$199",
    period: "/mo",
    apps: "Unlimited",
    coverLetters: "Unlimited",
    badge: "Best Value",
    highlight: false,
    features: ["Unlimited AI job applications", "Unlimited AI resume customizations", "Unlimited AI cover letters", "LinkedIn resume import", "Add your own API keys", "24/7 priority support"],
    cta: "Go Unlimited",
    ctaStyle: "bg-green-600 hover:bg-green-500"
  },
]

const agencyPlans = [
  {
    name: "Starter",
    price: "$555",
    period: "/mo",
    submissions: "1,000",
    clients: "10",
    badge: "",
    highlight: false,
    features: ["1,000 job submissions/month", "Up to 10 client profiles", "AI resume tailoring", "White-label dashboard", "API access"],
    cta: "Start Agency",
    ctaStyle: "bg-purple-600 hover:bg-purple-500"
  },
  {
    name: "Growth",
    price: "$999",
    period: "/mo",
    submissions: "3,000",
    clients: "50",
    badge: "Most Popular",
    highlight: true,
    features: ["3,000 job submissions/month", "Up to 50 client profiles", "AI resume tailoring", "White-label dashboard", "Priority support"],
    cta: "Grow Agency",
    ctaStyle: "bg-purple-600 hover:bg-purple-500"
  },
  {
    name: "Scale",
    price: "$1,499",
    period: "/mo",
    submissions: "5,000",
    clients: "150",
    badge: "",
    highlight: false,
    features: ["5,000 job submissions/month", "Up to 150 client profiles", "AI resume tailoring", "White-label dashboard", "Dedicated account manager"],
    cta: "Scale Up",
    ctaStyle: "bg-slate-600 hover:bg-slate-500"
  },
  {
    name: "Enterprise",
    price: "$2,222",
    period: "/mo",
    submissions: "10,000",
    clients: "500",
    badge: "Max Cap",
    highlight: false,
    features: ["10,000 job submissions/month", "Up to 500 client profiles", "AI resume tailoring", "White-label dashboard", "Dedicated account manager", "Custom integrations"],
    cta: "Get Enterprise",
    ctaStyle: "bg-slate-600 hover:bg-slate-500"
  },
]

function PlanCard({ plan, type }: { plan: any, type: string }) {
  const highlightBg = type === "private" 
    ? "bg-gradient-to-br from-blue-600/30 to-purple-600/30 border-blue-500/50" 
    : "bg-gradient-to-br from-purple-600/30 to-pink-600/30 border-purple-500/50"
  
  const checkColor = type === "private" ? "text-green-400" : "text-purple-400"
  const badgeBg = type === "private" ? "bg-blue-500" : "bg-purple-500"
  
  return (
    <div className={`rounded-2xl p-5 border flex flex-col relative ${plan.highlight ? highlightBg : "bg-slate-700/50 border-slate-600"}`}>
      {plan.badge && (
        <div className={`absolute -top-3 left-1/2 -translate-x-1/2 z-10`}>
          <span className={`px-3 py-1 ${badgeBg} text-white text-xs font-bold rounded-full whitespace-nowrap`}>{plan.badge}</span>
        </div>
      )}
      <div className="text-center mb-3">
        <div className="text-sm text-slate-400 font-medium mb-1">{plan.name}</div>
        <div className="flex items-baseline justify-center gap-1 mb-1">
          <span className="text-2xl font-bold text-white">{plan.price}</span>
          <span className="text-slate-400 text-xs">{plan.period}</span>
        </div>
        <div className="text-xs text-blue-400/80">
          {type === "private" 
            ? `${plan.apps} apps • ${plan.coverLetters} letters`
            : `${plan.submissions} submissions • ${plan.clients} clients`
          }
        </div>
      </div>
      <ul className="space-y-1.5 mb-4 flex-grow">
        {plan.features.map((f: string) => (
          <li key={f} className="text-slate-300 text-xs flex items-start gap-2">
            <span className={checkColor}>✓</span> {f}
          </li>
        ))}
      </ul>
      <Link 
        href={`/autojobs/signup?type=${type}`}
        className={`block text-center px-4 py-2.5 rounded-lg font-medium text-white text-sm transition mt-auto ${plan.ctaStyle}`}
      >
        {plan.cta}
      </Link>
    </div>
  )
}

export default function LandingPage() {
  const [activeTab, setActiveTab] = useState<"private" | "agency">("private")

  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-4 items-center">
          <button className="text-slate-300 hover:text-white transition flex items-center gap-2 text-sm">
            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
            </svg>
            Login with LinkedIn
          </button>
          <Link href="/autojobs/signup" className="px-5 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition text-sm">
            Get Started
          </Link>
        </div>
      </nav>

      {/* Hero */}
      <section className="py-16 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">
            AI-Powered Job Application Automation
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
            Stop Manually Applying.
            <br />
            <span className="text-blue-400">Let AI Handle It.</span>
          </h1>
          <p className="text-lg text-slate-300 mb-8 max-w-2xl mx-auto">
            Upload your resume. Connect LinkedIn. AI finds matching jobs, rewrites your resume + cover letter for each one, and applies automatically.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link 
              href="/autojobs/signup"
              className="px-8 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-semibold transition shadow-lg shadow-blue-500/25"
            >
              Start Free — 5 Applications
            </Link>
            <button className="px-8 py-3 bg-white/10 hover:bg-white/20 text-white rounded-xl font-semibold border border-white/20 transition flex items-center justify-center gap-2">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
              </svg>
              Sign up with LinkedIn
            </button>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-12 px-6 bg-slate-800/40">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl font-bold text-white text-center mb-8">How It Works</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { step: "01", title: "Create Profile", desc: "Upload resume. Connect LinkedIn. Set job preferences." },
              { step: "02", title: "AI Customizes", desc: "AI rewrites your resume + cover letter for each job." },
              { step: "03", title: "Apply & Track", desc: "Apply in one click. Track every application status." }
            ].map((item) => (
              <div key={item.step} className="bg-slate-700/50 rounded-xl p-6 border border-slate-600 text-center">
                <div className="text-4xl font-bold text-blue-500/20 mb-3">{item.step}</div>
                <h3 className="text-lg font-semibold text-white mb-2">{item.title}</h3>
                <p className="text-slate-400 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Toggle + Plans */}
      <section className="py-16 px-6">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-3xl font-bold text-white mb-6">Choose Your Plan</h2>
          
          {/* Toggle Switch */}
          <div className="inline-flex items-center gap-0 bg-slate-800 rounded-full p-1 mb-10 border border-slate-700">
            <button
              onClick={() => setActiveTab("private")}
              className={`px-6 py-2.5 rounded-full font-semibold text-sm transition-all ${
                activeTab === "private"
                  ? "bg-blue-500 text-white shadow-lg"
                  : "text-slate-400 hover:text-white"
              }`}
            >
              👤 Job Seeker
            </button>
            <button
              onClick={() => setActiveTab("agency")}
              className={`px-6 py-2.5 rounded-full font-semibold text-sm transition-all ${
                activeTab === "agency"
                  ? "bg-purple-500 text-white shadow-lg"
                  : "text-slate-400 hover:text-white"
              }`}
            >
              🏢 Recruiting Agency
            </button>
          </div>

          {/* Private Plans */}
          {activeTab === "private" && (
            <div>
              <p className="text-slate-400 mb-6 text-sm">Every plan includes AI resume tailoring + AI cover letter generation</p>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-4 max-w-5xl mx-auto items-stretch">
                {privatePlans.map((plan) => (
                  <PlanCard key={plan.name} plan={plan} type="private" />
                ))}
              </div>
            </div>
          )}

          {/* Agency Plans */}
          {activeTab === "agency" && (
            <div>
              <p className="text-slate-400 mb-6 text-sm">Manage multiple clients. Hard caps — no unlimited.</p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto items-stretch">
                {agencyPlans.map((plan) => (
                  <PlanCard key={plan.name} plan={plan} type="agency" />
                ))}
              </div>
              <p className="text-slate-500 text-sm mt-4">All plans have hard submission caps. No unlimited access for agencies.</p>
            </div>
          )}
        </div>
      </section>

      {/* Features */}
      <section className="py-16 px-6 bg-slate-800/40">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-2xl font-bold text-white text-center mb-8">Everything You Need</h2>
          <div className="grid md:grid-cols-3 gap-4">
            {[
              { icon: "🎯", title: "AI Resume Tailoring", desc: "Every resume rewritten to match job description keywords" },
              { icon: "✉️", title: "AI Cover Letters", desc: "Personalized cover letter for each company" },
              { icon: "🔍", title: "Multi-Source Search", desc: "Jooble, JSearch aggregated and deduplicated" },
              { icon: "📊", title: "Application Tracker", desc: "Dashboard tracks status from applied to offer" },
              { icon: "🔑", title: "Your Own API Keys", desc: "You control your data and spending" },
              { icon: "💼", title: "LinkedIn Import", desc: "Import your saved LinkedIn resumes automatically" },
            ].map((f) => (
              <div key={f.title} className="bg-slate-700/50 rounded-xl p-4 border border-slate-600">
                <div className="text-xl mb-2">{f.icon}</div>
                <h3 className="font-semibold text-white mb-1">{f.title}</h3>
                <p className="text-slate-400 text-sm">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-6 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>
  )
}