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

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

const agencyPlans = [
  {
    id: "agency_starter",
    name: "Starter",
    price: "$555",
    period: "/mo",
    submissions: "1,000",
    clients: "10",
    badge: "",
    highlight: false,
    features: ["1,000 submissions/month", "10 client profiles", "AI resume tailoring", "White-label dashboard"],
    cta: "Start Agency",
    ctaStyle: "bg-purple-600 hover:bg-purple-500"
  },
  {
    id: "agency_growth",
    name: "Growth",
    price: "$999",
    period: "/mo",
    submissions: "3,000",
    clients: "50",
    badge: "Most Popular",
    highlight: true,
    features: ["3,000 submissions/month", "50 client profiles", "AI resume tailoring", "White-label dashboard", "Priority support"],
    cta: "Grow Agency",
    ctaStyle: "bg-purple-600 hover:bg-purple-500"
  },
  {
    id: "agency_scale",
    name: "Scale",
    price: "$1,499",
    period: "/mo",
    submissions: "5,000",
    clients: "150",
    badge: "",
    highlight: false,
    features: ["5,000 submissions/month", "150 client profiles", "AI resume tailoring", "White-label dashboard", "Dedicated manager"],
    cta: "Scale Up",
    ctaStyle: "bg-slate-600 hover:bg-slate-500"
  },
  {
    id: "agency_pro",
    name: "Pro",
    price: "$3,699",
    period: "/mo",
    submissions: "10,000",
    clients: "500",
    badge: "Best Value",
    highlight: false,
    features: ["10,000 submissions/month", "500 client profiles", "AI resume tailoring", "White-label dashboard", "Custom integrations"],
    cta: "Go Pro",
    ctaStyle: "bg-slate-600 hover:bg-slate-500"
  },
  {
    id: "agency_enterprise",
    name: "Enterprise",
    price: "Custom",
    period: "",
    submissions: "Unlimited",
    clients: "Unlimited",
    badge: "",
    highlight: false,
    features: ["Unlimited submissions", "Unlimited clients", "AI resume tailoring", "White-label dashboard", "Dedicated manager", "SLA guarantee"],
    cta: "Contact Us",
    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-4 border flex flex-col relative ${plan.highlight ? highlightBg : "bg-slate-700/50 border-slate-600"}`}>
      {plan.badge && (
        <div className="absolute -top-2.5 left-1/2 -translate-x-1/2 z-10">
          <span className={`px-2.5 py-0.5 ${badgeBg} text-white text-[10px] font-bold rounded-full whitespace-nowrap`}>{plan.badge}</span>
        </div>
      )}
      <div className="text-center mb-2">
        <div className="text-xs text-slate-400 font-medium mb-0.5">{plan.name}</div>
        <div className="flex items-baseline justify-center gap-0.5">
          <span className="text-xl font-bold text-white">{plan.price}</span>
          <span className="text-slate-400 text-[10px]">{plan.period}</span>
        </div>
        <div className="text-[10px] text-blue-400/80 mt-0.5">
          {type === "private" 
            ? `${plan.apps} apps • ${plan.coverLetters} letters`
            : `${plan.submissions} • ${plan.clients} clients`
          }
        </div>
      </div>
      <ul className="space-y-1 mb-3 flex-grow">
        {plan.features.map((f: string) => (
          <li key={f} className="text-slate-300 text-[10px] flex items-start gap-1.5">
            <span className={`${checkColor} flex-shrink-0`}>✓</span> {f}
          </li>
        ))}
      </ul>
      <Link 
        href={plan.id === "agency_enterprise" ? "/autojobs/contact" : `/autojobs/signup?plan=${plan.id}&type=${type}`}
        className={`block text-center px-3 py-2 rounded-lg font-medium text-white text-xs transition mt-auto ${plan.ctaStyle}`}
      >
        {plan.cta}
      </Link>
    </div>
  )
}

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "AutoJobs",
  "alternateName": "AutoJobs AI",
  "url": "https://hostpioneers.com/autojobs",
  "description": "AI-powered job application automation platform. AI finds matching jobs, rewrites resumes, generates cover letters, and applies automatically.",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web",
  "offers": {
    "@type": "AggregateOffer",
    "url": "https://hostpioneers.com/autojobs",
    "priceCurrency": "USD",
    "lowPrice": "0",
    "highPrice": "3699",
    "offerCount": "9"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "127"
  },
  "provider": {
    "@type": "Organization",
    "name": "HostPioneers",
    "url": "https://hostpioneers.com"
  }
}

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />

      {/* Mobile Menu Button */}
      <button 
        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        className="md:hidden fixed top-4 right-4 z-50 p-2 bg-slate-800 rounded-lg border border-slate-700"
        aria-label="Toggle menu"
      >
        <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          {mobileMenuOpen ? (
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          ) : (
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
          )}
        </svg>
      </button>

      {/* Nav */}
      <nav className={`${mobileMenuOpen ? 'flex' : 'hidden'} md:flex fixed inset-0 md:relative md:inset-auto flex-col md:flex-row justify-between items-center px-6 py-4 md:py-5 max-w-6xl mx-auto bg-slate-900 md:bg-transparent z-40 gap-4`}>
        <Link href="/autojobs" className="text-2xl font-bold text-white">
          Auto<span className="text-blue-400">Jobs</span>
        </Link>
        <div className="flex flex-col md:flex-row gap-3 md: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 w-full md:w-auto text-center">
            Get Started
          </Link>
        </div>
      </nav>

      {/* Hero */}
      <header className="pt-12 md:pt-16 pb-8 md:pb-12 px-4 md:px-6 text-center">
        <div className="max-w-4xl mx-auto">
          <div className="inline-block px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-300 text-xs md:text-sm mb-4">
            AI-Powered Job Application Automation
          </div>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4 leading-tight px-2">
            Stop Manually Applying.
            <br />
            <span className="text-blue-400">Let AI Handle It.</span>
          </h1>
          <p className="text-base md:text-lg text-slate-300 mb-6 px-4 max-w-2xl mx-auto">
            Upload your resume. Connect LinkedIn. AI finds matching jobs, rewrites your resume + cover letter, and applies automatically.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center px-4">
            <Link 
              href="/autojobs/signup?plan=free"
              className="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-semibold transition shadow-lg shadow-blue-500/25 text-sm md:text-base"
            >
              Start Free — 5 Applications
            </Link>
            <button className="px-6 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 text-sm md:text-base">
              <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>
      </header>

      {/* How It Works */}
      <section className="py-8 md:py-12 px-4 md:px-6 bg-slate-800/40">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-xl md:text-2xl font-bold text-white text-center mb-4 md:mb-6">How It Works</h2>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {[
              { 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) => (
              <article key={item.step} className="bg-slate-700/50 rounded-xl p-4 md:p-5 border border-slate-600 text-center">
                <div className="text-3xl md:text-4xl font-bold text-blue-500/20 mb-2">{item.step}</div>
                <h3 className="text-base md:text-lg font-semibold text-white mb-1">{item.title}</h3>
                <p className="text-slate-400 text-xs md:text-sm">{item.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

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

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

          {activeTab === "agency" && (
            <div>
              <p className="text-slate-400 mb-4 text-xs md:text-sm">Manage multiple clients. Hard caps — no unlimited.</p>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 max-w-5xl mx-auto">
                {agencyPlans.map((plan) => (
                  <PlanCard key={plan.id} plan={plan} type="agency" />
                ))}
              </div>
              <p className="text-slate-500 text-xs mt-3">All plans have hard submission caps.</p>
            </div>
          )}
        </div>
      </section>

      {/* Features */}
      <section className="py-10 md:py-14 px-4 md:px-6 bg-slate-800/40">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-xl md:text-2xl font-bold text-white text-center mb-4 md:mb-6">Everything You Need</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md: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) => (
              <article key={f.title} className="bg-slate-700/50 rounded-xl p-4 border border-slate-600">
                <div className="text-xl mb-1">{f.icon}</div>
                <h3 className="font-semibold text-white text-sm md:text-base mb-0.5">{f.title}</h3>
                <p className="text-slate-400 text-xs md:text-sm">{f.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>


      {/* FAQ */}
      <section className="py-10 md:py-14 px-4 md:px-6" aria-labelledby="faq-heading">
        <div className="max-w-3xl mx-auto">
          <h2 id="faq-heading" className="text-xl md:text-2xl font-bold text-white text-center mb-6">Frequently Asked Questions</h2>
          <div className="space-y-3">
            {[
              { q: "How does AI resume tailoring work?", a: "Our AI analyzes the job description and rewrites your resume to highlight the skills and experience most relevant to that specific position, increasing your chances of getting noticed." },
              { q: "What job boards does AutoJobs search?", a: "We search across multiple job boards including Jooble, JSearch, and other aggregators, then deduplicate results so you never apply to the same job twice." },
              { q: "Can I use my own API keys?", a: "Yes! On Starter plans and above, you can add your own API keys for AI services, giving you more control over your data and spending." },
              { q: "What happens when I hit my monthly limit?", a: "Your applications are paused until your next billing cycle. You can upgrade at any time for higher limits." },
            ].map((faq, i) => (
              <details key={i} className="bg-slate-700/50 rounded-xl border border-slate-600 p-4 group">
                <summary className="font-semibold text-white cursor-pointer list-none flex justify-between items-center">
                  <span>{faq.q}</span>
                  <span className="text-blue-400 group-open:rotate-180 transition-transform ml-2 flex-shrink-0">▼</span>
                </summary>
                <p className="text-slate-400 text-sm mt-2">{faq.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-6 px-4 md:px-6 border-t border-slate-700">
        <div className="max-w-5xl mx-auto text-center text-slate-500 text-xs md:text-sm">
          <p>© 2026 AutoJobs — Built on <a href="https://hostpioneers.com" className="text-blue-400 hover:underline">HostPioneers</a></p>
          <nav className="mt-3 flex flex-wrap justify-center gap-3 md:gap-4 text-xs">
            <a href="/autojobs/privacy" className="hover:text-white transition">Privacy Policy</a>
            <a href="/autojobs/terms" className="hover:text-white transition">Terms of Service</a>
            <a href="/autojobs/gdpr" className="hover:text-white transition">GDPR</a>
            <a href="/autojobs/contact" className="hover:text-white transition">Contact</a>
          </nav>
        </div>
      </footer>
    </div>
  )
}