import { useRef, useState } from "react";
import { toast } from "@/hooks/use-toast";

const jobs = [
  { title: "Customer Service Representative", desc: "Email and chat support for customers.", type: "Full-time" },
  { title: "Data Entry Specialist", desc: "Input and maintain company data accurately.", type: "Full-time" },
  { title: "AI Automation Specialist", desc: "Build and manage AI-driven workflows.", type: "Full-time" },
  { title: "Digital Analyst", desc: "Analyze campaigns and website performance.", type: "Contract" },
  { title: "Virtual Assistant", desc: "Support teams with administrative tasks.", type: "Part-time" },
];

const infoItems = [
  { label: "Location", value: "Remote — U.S. residents", icon: "📍" },
  { label: "Schedule", value: "Flexible hours", icon: "🕐" },
  { label: "Pay", value: "Competitive", icon: "💰" },
];

const footerLinks = {
  company: [
    { label: "About", href: "https://www.indeed.com/about" },
    { label: "Careers", href: "#" },
    { label: "Blog", href: "https://www.indeed.com/career-advice" },
  ],
  legal: [
    { label: "Privacy Policy", href: "https://www.indeed.com/legal/privacy-policy" },
    { label: "Terms of Service", href: "https://www.indeed.com/legal/terms-of-service" },
    { label: "Cookie Policy", href: "https://www.indeed.com/legal/cookie-policy" },
  ],
  support: [
    { label: "Help Center", href: "https://support.indeed.com" },
    { label: "Accessibility", href: "https://www.indeed.com/accessibility" },
    { label: "Security", href: "https://www.indeed.com/legal/security" },
  ],
};

const Index = () => {
  const formRef = useRef<HTMLDivElement>(null);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    position: "",
    message: "",
  });

  const handleJobClick = (jobTitle: string) => {
    setFormData((prev) => ({ ...prev, position: jobTitle }));
    formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Let Netlify handle the form — show a toast as confirmation
    toast({
      title: "Application Submitted! ✅",
      description: "We'll review your application and reach out if there's a match.",
    });
    setFormData({ name: "", email: "", phone: "", position: "", message: "" });
  };

  const inputClasses =
    "w-full px-4 py-3 border border-border rounded-lg text-sm bg-card text-card-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow";

  return (
    <div className="min-h-screen bg-background">
      {/* Hidden Netlify form for bot detection */}
      <form enctype='multipart/form-data' hidden method='post' name='application'><input type='hidden' name='form-name' value='application' />
        <input name="name" />
        <input name="email" />
        <input name="phone" />
        <input name="position" />
        <textarea name="message" />
        <input name="resume" type="file" />
      </form>

      {/* Header */}
      <header className="bg-primary sticky top-0 z-50 shadow-md">
        <div className="max-w-[960px] mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Indeed_logo.svg"
              alt="Indeed logo"
              className="h-7 sm:h-8 brightness-0 invert"
            />
            <span className="text-primary-foreground text-lg sm:text-xl font-bold tracking-tight">
              Careers
            </span>
          </div>
          <nav className="hidden sm:flex items-center gap-6 text-primary-foreground/80 text-sm font-medium">
            <a href="#positions" className="hover:text-primary-foreground transition-colors">Positions</a>
            <a href="#apply" className="hover:text-primary-foreground transition-colors">Apply</a>
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="bg-primary pb-16 pt-10 sm:pt-14 px-4">
        <div className="max-w-[960px] mx-auto text-center">
          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-primary-foreground mb-4 leading-tight">
            Find your next remote role
          </h1>
          <p className="text-primary-foreground/75 text-base sm:text-lg max-w-xl mx-auto leading-relaxed">
            Browse open positions below and submit your application in minutes.
            We review applications daily and reach out if there is a match.
          </p>
        </div>
      </section>

      {/* Info Cards */}
      <section className="max-w-[960px] mx-auto px-4 sm:px-6 lg:px-8 -mt-10">
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
          {infoItems.map((item) => (
            <div
              key={item.label}
              className="bg-card rounded-xl border border-border p-5 shadow-sm flex items-center gap-4 hover:shadow-md transition-shadow"
            >
              <span className="text-2xl">{item.icon}</span>
              <div>
                <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                  {item.label}
                </div>
                <div className="text-sm font-semibold text-card-foreground mt-0.5">{item.value}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Job Listings */}
      <section id="positions" className="max-w-[960px] mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-8">
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground">Open Positions</h2>
          <span className="text-sm text-muted-foreground">{jobs.length} jobs</span>
        </div>
        <div className="space-y-3">
          {jobs.map((job) => (
            <div
              key={job.title}
              onClick={() => handleJobClick(job.title)}
              className="bg-card rounded-xl border border-border p-4 sm:p-5 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 hover:border-ring hover:shadow-md transition-all cursor-pointer group"
            >
              <div className="flex-1 min-w-0">
                <div className="font-bold text-base sm:text-lg text-card-foreground group-hover:text-primary transition-colors">
                  {job.title}
                </div>
                <div className="text-muted-foreground text-sm mt-1">{job.desc}</div>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <span className="bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-xs font-semibold">
                  {job.type}
                </span>
                <span className="bg-accent text-accent-foreground px-3 py-1 rounded-full text-xs font-semibold">
                  Remote
                </span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Application Form — Netlify Forms */}
      <section id="apply" className="max-w-[960px] mx-auto px-4 sm:px-6 lg:px-8 pb-16" ref={formRef}>
        <div className="bg-card p-6 sm:p-8 rounded-xl border border-border shadow-sm">
          <h2 className="text-2xl sm:text-3xl font-bold text-card-foreground mb-1">Apply Now</h2>
          <p className="text-muted-foreground text-sm mb-6">Fill out the form and we'll get back to you shortly.</p>
          <form className='space-y-4' enctype='multipart/form-data' method='POST' name='application' onSubmit='{handleSubmit}'>
            <input type="hidden" name="form-name" value="application" />
            <p className="hidden">
              <label>Don't fill this out: <input name="bot-field" /></label>
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <input
                type="text"
                name="name"
                placeholder="Full Name"
                required
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className={inputClasses}
              />
              <input
                type="email"
                name="email"
                placeholder="Email Address"
                required
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className={inputClasses}
              />
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <input
                type="tel"
                name="phone"
                placeholder="Phone Number"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                className={inputClasses}
              />
              <select
                name="position"
                required
                value={formData.position}
                onChange={(e) => setFormData({ ...formData, position: e.target.value })}
                className={inputClasses}
              >
                <option value="">Select Position</option>
                {jobs.map((j) => (
                  <option key={j.title} value={j.title}>{j.title}</option>
                ))}
              </select>
            </div>
            <textarea
              name="message"
              rows={4}
              placeholder="Short Message (Optional)"
              value={formData.message}
              onChange={(e) => setFormData({ ...formData, message: e.target.value })}
              className={`${inputClasses} resize-none`}
            />
            <div className="flex flex-col sm:flex-row sm:items-center gap-4">
              <label className="flex-1 flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-border rounded-lg cursor-pointer hover:border-ring hover:bg-accent/50 transition-colors text-sm text-muted-foreground">
                <span>📎</span>
                <span>Upload Resume (.pdf, .doc, .docx)</span>
                <input type="file" name="resume" accept=".pdf,.doc,.docx" className="hidden" />
              </label>
            </div>
            <button
              type="submit"
              className="w-full py-3.5 bg-primary text-primary-foreground font-semibold rounded-lg hover:opacity-90 active:scale-[0.99] transition-all text-base shadow-sm"
            >
              Submit Application
            </button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border bg-card">
        <div className="max-w-[960px] mx-auto px-4 sm:px-6 lg:px-8 py-10">
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-8 mb-8">
            {/* Brand */}
            <div className="col-span-2 sm:col-span-1">
              <div className="flex items-center gap-2 mb-3">
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Indeed_logo.svg"
                  alt="Indeed logo"
                  className="h-5 opacity-50"
                />
              </div>
              <p className="text-muted-foreground text-xs leading-relaxed">
                Helping people get jobs. One search. All jobs.
              </p>
            </div>
            {/* Company */}
            <div>
              <h4 className="text-sm font-semibold text-foreground mb-3">Company</h4>
              <ul className="space-y-2">
                {footerLinks.company.map((link) => (
                  <li key={link.label}>
                    <a href={link.href} target="_blank" rel="noopener noreferrer" className="text-muted-foreground text-xs hover:text-foreground transition-colors">
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            {/* Legal */}
            <div>
              <h4 className="text-sm font-semibold text-foreground mb-3">Legal</h4>
              <ul className="space-y-2">
                {footerLinks.legal.map((link) => (
                  <li key={link.label}>
                    <a href={link.href} target="_blank" rel="noopener noreferrer" className="text-muted-foreground text-xs hover:text-foreground transition-colors">
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            {/* Support */}
            <div>
              <h4 className="text-sm font-semibold text-foreground mb-3">Support</h4>
              <ul className="space-y-2">
                {footerLinks.support.map((link) => (
                  <li key={link.label}>
                    <a href={link.href} target="_blank" rel="noopener noreferrer" className="text-muted-foreground text-xs hover:text-foreground transition-colors">
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          {/* Bottom bar */}
          <div className="border-t border-border pt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
            <span className="text-muted-foreground text-xs">© 2026 Indeed Inc. All rights reserved.</span>
            <div className="flex gap-4 text-muted-foreground text-xs">
              <a href="https://www.indeed.com/legal/privacy-policy" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">Privacy</a>
              <a href="https://www.indeed.com/legal/terms-of-service" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">Terms</a>
              <a href="https://www.indeed.com/accessibility" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">Accessibility</a>
              <a href="https://www.indeed.com/legal/ccpa-dns" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">Do Not Sell My Info</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Index;