"use client";
import { useState } from "react";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";

// ─── Sales & Business Data ───────────────────────────────────────────────────
const salesJobs = [
  {
    label: "SALES · BUSINESS",
    title: "Channel Sales Partner India",
    location: "Hyderabad, India",
    type: "Full-Time",
    description:
      "Own A Portfolio Of Enterprise Resellers Across West India. Build The GTM Motion, Hit The Number, Repeat.",
    tags: ["B2B SaaS", "Enterprise", "Channel"],
  },
  {
    label: "SALES · BUSINESS",
    title: "Channel Sales Partner UK",
    location: "London, UK",
    type: "Full-Time",
    description:
      "Open And Lead Our EMEA Channel Programme. You've Launched A Region From Zero Before.",
    tags: ["EMEA", "Partnerships", "GTM"],
  },
  {
    label: "SALES · BUSINESS",
    title: "Resale Consultant",
    location: "Delhi NCR, India",
    type: "Full-Time",
    description:
      "Work Alongside Our Partners To Close Mid-Market Deals. Deep Product Chops Faster Than Any AE.",
    tags: ["Mid-Market", "Consultative", "Demos"],
  },
  {
    label: "SALES · BUSINESS",
    title: "Enterprise Account Executive",
    location: "Mumbai, India",
    type: "Full-Time",
    description:
      "Drive Revenue From Fortune-500 Accounts Across BFSI & Manufacturing Verticals. Quota Is Aggressive—So Is The Comp.",
    tags: ["Enterprise", "BFSI", "Revenue"],
  },
  {
    label: "SALES · BUSINESS",
    title: "Pre-Sales Solutions Engineer",
    location: "Bengaluru, India",
    type: "Full-Time",
    description:
      "Bridge Technical Depth And Commercial Savvy. Own The Demo, Own The RFP, Own The Win.",
    tags: ["Pre-Sales", "Solutions", "RFP"],
  },
];

// ─── Internship Data ─────────────────────────────────────────────────────────
const internships = [
  {
    borderClass: "blue-border",
    icon: "bi-bezier",
    title: "Marketing & Sales Intern India",
    location: "Bengaluru, India",
    duration: "6 Months",
  },
  {
    borderClass: "pink-border",
    icon: "bi-palette",
    title: "UI/UX Design Intern",
    location: "Remote, India",
    duration: "4 Months",
  },
  {
    borderClass: "cyan-border",
    icon: "bi-code-slash",
    title: "Frontend Developer Intern",
    location: "Pune, India",
    duration: "6 Months",
  },
  {
    borderClass: "purple-border",
    icon: "bi-graph-up-arrow",
    title: "Data Analytics Intern",
    location: "Hyderabad, India",
    duration: "3 Months",
  },
  {
    borderClass: "violet-border",
    icon: "bi-robot",
    title: "AI/ML Research Intern",
    location: "Bengaluru, India",
    duration: "6 Months",
  },
  {
    borderClass: "blue-border",
    icon: "bi-megaphone",
    title: "Content & Social Media Intern",
    location: "Delhi NCR, India",
    duration: "3 Months",
  },
];

export default function CareerPage() {
  const [showModal, setShowModal] = useState(false);
  const [step, setStep] = useState(1);

  // ── helper function — ek jagah se sab buttons yahi call karenge
  const openModal = () => {
    setStep(1);
    setShowModal(true);
  };

  return (
    <>
      <Header />

      {/* ── HERO ─────────────────────────────────────────────────────────── */}
      <section
        className="ux-project-hero"
        style={{
          backgroundImage: "url('/assets/contactback.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
        }}
      >
        <div className="container">
          <div className="ux-project-content text-center">
            <h1 className="ux-project-title" data-aos="fade-up" data-aos-delay="100">Why Join Us</h1>
            <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200">
              Grow with innovation and meaningful technology solutions.
            </p>
          </div>

          <div className="ux-joined-box" data-aos="zoom-in" data-aos-delay="300">
            <div className="ux-avatar-group">
              <img src="/assets/user1.png" alt="User" />
              <img src="/assets/user2.png" alt="User" />
              <img src="/assets/user3.png" alt="User" />
            </div>
            <p>
              100+ people already joined <br />
              the AAideA
            </p>
          </div>
        </div>
      </section>

      {/* ── ENGINEERING & TECHNOLOGY ─────────────────────────────────────── */}
      <section className="career-openings-section">
        <div className="container">

          <div className="row align-items-start mb-5">
            <div className="col-lg-3">
              <span className="section-mini-title" data-aos="fade-down" data-aos-duration="700">CURRENT OPENINGS</span>
              <h2 className="career-main-title" data-aos="fade-up" data-aos-delay="100">
                14 ways to join.
                <br />
                Find yours.
              </h2>
            </div>
            <div className="col-lg-6">
              <p className="career-top-text" data-aos="fade-up" data-aos-delay="200">
                Engineering Roles Lead, The Rest Of The Org Is Hiring Fast Right
                Behind Them. Filter, Scan, And Apply In Under Three Minutes.
              </p>
            </div>
          </div>

          <h3 className="career-category-title mb-4" data-aos="fade-up">
            Engineering & Technology
          </h3>

          <div className="row g-4">
            {/* Card 1 */}
            <div className="col-lg-6" data-aos="fade-up" data-aos-delay="0">
              <div className="job-card blue-card">
                <div className="job-card-inner">
                  <div className="job-top">
                    <div className="job-icon"><img src="/assets/icons/Python.svg" alt="" /></div>
                    <div>
                      <span className="job-label">APPLIED ML</span>
                      <h4>Python AI Engineer</h4>
                    </div>
                  </div>
                  <div className="job-meta">
                    <span><img src="/assets/icons/Bengalurulocation.svg" alt="" /> Bengaluru, India</span>
                    <span><img src="/assets/icons/fulltime.svg" alt="" /> Full-Time</span>
                  </div>
                  <p className="job-description">
                    Own End-To-End ML Pipelines, From Data Prep Through Fine-Tuning
                    Llama-Class Models For Our Agent Platform.
                  </p>
                  <div className="job-tags">
                    <span>Python</span><span>PyTorch</span><span>LangGraph</span>
                    <span>Rag</span><span>FastAPI</span>
                  </div>
                </div>
                <div className="job-footer">
                  <div className="job-info">
                    <div><small>Experience</small><h6>3–6 Yrs</h6></div>
                    <div><small>Salary Band</small><h6>₹28–42 LPA</h6></div>
                  </div>
                  <button className="career-apply-btn apply-btn" onClick={openModal}>Apply</button>
                </div>
              </div>
            </div>

            {/* Card 2 */}
            <div className="col-lg-6" data-aos="fade-up" data-aos-delay="100">
              <div className="job-card purple-card">
                <div className="job-card-inner">
                  <div className="job-top">
                    <div className="job-icon"><img src="/assets/icons/Python.svg" alt="" /></div>
                    <div>
                      <span className="job-label">PLATFORM</span>
                      <h4>Python Developer</h4>
                    </div>
                  </div>
                  <div className="job-meta">
                    <span><img src="/assets/icons/Bengalurulocation.svg" alt="" /> Bengaluru, India</span>
                    <span><img src="/assets/icons/fulltime.svg" alt="" /> Full-Time</span>
                  </div>
                  <p className="job-description">
                    Build The Async Backbone That Serves 200M+ Inference Calls A
                    Month. FastAPI, Postgres, Redis, And A Lot Of Telemetry.
                  </p>
                  <div className="job-tags">
                    <span>Python</span><span>FastAPI</span><span>Postgres</span>
                    <span>Redis</span><span>Docker</span>
                  </div>
                </div>
                <div className="job-footer">
                  <div className="job-info">
                    <div><small>Experience</small><h6>2–4 Yrs</h6></div>
                    <div><small>Salary Band</small><h6>₹18–28 LPA</h6></div>
                  </div>
                  <button className="career-apply-btn apply-btn" onClick={openModal}>Apply</button>
                </div>
              </div>
            </div>

            {/* Card 3 */}
            <div className="col-lg-6" data-aos="fade-up" data-aos-delay="0">
              <div className="job-card pink-card">
                <div className="job-card-inner">
                  <div className="job-top">
                    <div className="job-icon"><img src="/assets/icons/Python.svg" alt="" /></div>
                    <div>
                      <span className="job-label">IOS</span>
                      <h4>Swift Mobile Developer</h4>
                    </div>
                  </div>
                  <div className="job-meta">
                    <span><img src="/assets/icons/Bengalurulocation.svg" alt="" /> Bengaluru, India</span>
                    <span><img src="/assets/icons/fulltime.svg" alt="" /> Full-Time</span>
                  </div>
                  <p className="job-description">
                    Lead Swift / SwiftUI Work On Our Flagship IOS App. You'll Own
                    Architecture, Performance, And The App Store Story.
                  </p>
                  <div className="job-tags">
                    <span>Swift</span><span>SwiftUI</span><span>Combine</span>
                    <span>Core ML</span><span>TestFlight</span>
                  </div>
                </div>
                <div className="job-footer">
                  <div className="job-info">
                    <div><small>Experience</small><h6>3–5 Yrs</h6></div>
                    <div><small>Salary Band</small><h6>₹22–34 LPA</h6></div>
                  </div>
                  <button className="career-apply-btn apply-btn" onClick={openModal}>Apply</button>
                </div>
              </div>
            </div>

            {/* Card 4 */}
            <div className="col-lg-6" data-aos="fade-up" data-aos-delay="100">
              <div className="job-card cyan-card">
                <div className="job-card-inner">
                  <div className="job-top">
                    <div className="job-icon"><img src="/assets/icons/Python.svg" alt="" /></div>
                    <div>
                      <span className="job-label">ANDROID</span>
                      <h4>Android Native Developer</h4>
                    </div>
                  </div>
                  <div className="job-meta">
                    <span><img src="/assets/icons/Bengalurulocation.svg" alt="" /> Bengaluru, India</span>
                    <span><img src="/assets/icons/fulltime.svg" alt="" /> Full-Time</span>
                  </div>
                  <p className="job-description">
                    Kotlin + Jetpack Compose, Shipping To 4M+ DAU. Help Us Hit A 60fps
                    Bar Across Every Supported Device.
                  </p>
                  <div className="job-tags">
                    <span>Kotlin</span><span>Jetpack Compose</span><span>MVVM</span>
                    <span>Room</span><span>Retrofit</span>
                  </div>
                </div>
                <div className="job-footer">
                  <div className="job-info">
                    <div><small>Experience</small><h6>3–6 Yrs</h6></div>
                    <div><small>Salary Band</small><h6>₹28–42 LPA</h6></div>
                  </div>
                  <button className="career-apply-btn apply-btn" onClick={openModal}>Apply</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── SALES & BUSINESS (AUTO SLIDER) ───────────────────────────────── */}
      <section className="career-category-section pt-5">
        <div className="container">

          <div className="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <h3 className="career-category-title-sm mb-0" data-aos="fade-up">Sales & Business</h3>
            <div className="slider-arrows d-flex gap-2">
              <button className="arrow-btn sales-prev">
                <img src="/assets/icons/prev.svg" alt="" />
              </button>
              <button className="arrow-btn active sales-next">
                <img src="/assets/icons/next.svg" alt="" />
              </button>
            </div>
          </div>

          <Swiper
            modules={[Navigation, Autoplay]}
            spaceBetween={24}
            slidesPerView={3}
            loop={true}
            autoplay={{ delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true }}
            navigation={{ prevEl: ".sales-prev", nextEl: ".sales-next" }}
            breakpoints={{
              0:    { slidesPerView: 1 },
              768:  { slidesPerView: 2 },
              1200: { slidesPerView: 3 },
            }}
          >
            {salesJobs.map((job, idx) => (
              <SwiperSlide key={idx}>
                <div className="mini-job-card h-100">
                  <div className="mini-job-top d-flex gap-3">
                    <div className="mini-job-icon">
                      <img src="/assets/icons/Python.svg" alt="" />
                    </div>
                    <div>
                      <span className="job-label">{job.label}</span>
                      <h4>{job.title}</h4>
                    </div>
                  </div>
                  <div className="mini-job-meta d-flex flex-wrap gap-3">
                    <span><img src="/assets/icons/Bengalurulocation.svg" alt="" /> {job.location}</span>
                    <span><img src="/assets/icons/fulltime.svg" alt="" /> {job.type}</span>
                  </div>
                  <p>{job.description}</p>
                  <div className="mini-job-tags d-flex flex-wrap gap-2">
                    {job.tags.map((tag, i) => (
                      <span key={i}>{tag}</span>
                    ))}
                  </div>
                  <div className="mini-job-btn mt-4">
                    {/* ✅ Sales slider Apply */}
                    <a href="#" onClick={(e) => { e.preventDefault(); openModal(); }}>Apply</a>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </section>

      {/* ── VOICE & OPERATIONS ───────────────────────────────────────────── */}
      <section className="career-category-section">
        <div className="container">

          <h3 className="career-category-title-sm mb-4" data-aos="fade-up">Voice & Operations</h3>

          <div className="voice-job-card d-flex align-items-center justify-content-between flex-wrap gap-4 mb-4" data-aos="fade-up" data-aos-delay="0">
            <div className="voice-job-left d-flex gap-3">
              <div className="voice-icon"><img src="/assets/icons/voice.svg" alt="" /></div>
              <div>
                <span className="job-label">VOICE</span>
                <h4>Voice Services Specialist India</h4>
                <div className="voice-meta d-flex flex-wrap gap-3">
                  <span><img src="/assets/icons/Bengalurulocation.svg" alt="" /> Bengaluru, India</span>
                  <span><img src="/assets/icons/fulltime.svg" alt="" /> Full-Time</span>
                  <span><img src="/assets/icons/fulltime.svg" alt="" /> 0–2 Yrs</span>
                </div>
                <p>
                  Run Inbound & Outbound Voice Workflows For Our SMB Customer Base.
                  English + Hindi Fluency Required.
                </p>
              </div>
            </div>
            {/* ✅ Voice Apply */}
            <a href="#" className="apply-btn-sm" onClick={(e) => { e.preventDefault(); openModal(); }}>Apply</a>
          </div>

          <div className="voice-job-card d-flex align-items-center justify-content-between flex-wrap gap-4" data-aos="fade-up" data-aos-delay="100">
            <div className="voice-job-left d-flex gap-3">
              <div className="voice-icon"><img src="/assets/icons/voice.svg" alt="" /></div>
              <div>
                <span className="job-label">VOICE</span>
                <h4>Voice Process Female India</h4>
                <div className="voice-meta d-flex flex-wrap gap-3">
                  <span><img src="/assets/icons/Bengalurulocation.svg" alt="" /> Bengaluru, India</span>
                  <span><img src="/assets/icons/fulltime.svg" alt="" /> Full-Time</span>
                  <span><img src="/assets/icons/fulltime.svg" alt="" /> 0–2 Yrs</span>
                </div>
                <p>
                  Customer Success Voice Role On Our Women-Led Team. Strong
                  Communication, Structured Note-Taking, Calm Under Pressure.
                </p>
              </div>
            </div>
            {/* ✅ Voice Apply */}
            <a href="#" className="apply-btn-sm" onClick={(e) => { e.preventDefault(); openModal(); }}>Apply</a>
          </div>

        </div>
      </section>

      {/* ── INTERNSHIP OPPORTUNITIES (AUTO SLIDER) ───────────────────────── */}
      <section className="career-category-section">
        <div className="container">

          <div className="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
            <h3 className="career-category-title-sm mb-0" data-aos="fade-up">
              Internship Opportunities
            </h3>
            <div className="slider-arrows d-flex gap-2">
              <button className="arrow-btn intern-prev">
                <img src="/assets/icons/prev.svg" alt="" />
              </button>
              <button className="arrow-btn active intern-next">
                <img src="/assets/icons/next.svg" alt="" />
              </button>
            </div>
          </div>

          <Swiper
            modules={[Navigation, Autoplay]}
            spaceBetween={20}
            slidesPerView={5}
            loop={true}
            autoplay={{ delay: 2500, disableOnInteraction: false, pauseOnMouseEnter: true }}
            navigation={{ prevEl: ".intern-prev", nextEl: ".intern-next" }}
            breakpoints={{
              0:    { slidesPerView: 1 },
              480:  { slidesPerView: 2 },
              768:  { slidesPerView: 3 },
              1024: { slidesPerView: 4 },
              1280: { slidesPerView: 5 },
            }}
          >
            {internships.map((intern, idx) => (
              <SwiperSlide key={idx}>
                <div className={`intern-card ${intern.borderClass} h-100`}>
                  <div className="intern-icon">
                    <div className="voice-icon"><img src="/assets/icons/INTERN.svg" alt="" /></div>
                    <span>INTERN</span>
                  </div>
                  <h4>{intern.title}</h4>
                  <p><img src="/assets/icons/Bengalurulocation.svg" alt="" /> {intern.location}</p>
                  <div className="intern-bottom d-flex align-items-center justify-content-between">
                    <small>{intern.duration}</small>
                    {/* ✅ Intern Apply */}
                    <a href="#" onClick={(e) => { e.preventDefault(); openModal(); }}>Apply</a>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>

        </div>
      </section>

      {/* ── POPUP MODAL (same for all) ────────────────────────────────────── */}
      {showModal && (
        <div className="career-popup-overlay">
          <div className="career-popup-modal">

            <button className="career-popup-close" onClick={() => setShowModal(false)}>×</button>

            {/* STEP 1 */}
            {step === 1 && (
              <div>
                <span className="career-popup-tag">OPEN APPLICATION</span>
                <h2 className="career-popup-title">Apply for Marketing & Sales Intern</h2>
                <p className="career-popup-meta">India · Remote · Full-time</p>
                <div className="career-progress">
                  <div className="career-progress-fill"></div>
                </div>
                <div className="career-form-group">
                  <label>Name</label>
                  <input type="text" placeholder="John" className="career-popup-input" />
                </div>
                <div className="career-form-group">
                  <label>Email Address</label>
                  <input type="email" placeholder="enter email address" className="career-popup-input" />
                </div>
                <div className="career-form-group">
                  <label>LinkedIn or portfolio (optional)</label>
                  <input type="text" placeholder="linkedin.com/in/you" className="career-popup-input" />
                </div>
                <div className="text-end mt-4">
                  <button className="career-next-btn" onClick={() => setStep(2)}>Continue</button>
                </div>
              </div>
            )}

            {/* STEP 2 */}
            {step === 2 && (
              <div>
                <span className="career-popup-tag">OPEN APPLICATION</span>
                <h2 className="career-popup-title">Apply for Marketing & Sales Intern</h2>
                <p className="career-popup-meta">India · Remote · Full-time</p>
                <div className="career-progress">
                  <div className="career-progress-fill" style={{ width: "100%" }}></div>
                </div>
                <div className="career-form-group">
                  <label>Why this role? (one paragraph)</label>
                  <textarea
                    rows={4}
                    placeholder="Tell us what excites you about this team and a single project you're proud of."
                    className="career-popup-textarea"
                  ></textarea>
                </div>
                <div className="career-upload-box">
                  <div className="d-flex align-items-center gap-3">
                    <div className="career-upload-icon">
                      <img src="/assets/dropresume.svg" alt="" />
                    </div>
                    <div>
                      <h6>Drop your resume</h6>
                      <span>PDF or DOC, up to 8MB</span>
                    </div>
                  </div>
                  <input type="file" />
                </div>
                <div className="d-flex justify-content-between gap-3 mt-4">
                  <button className="career-back-btn" onClick={() => setStep(1)}>Back</button>
                  <button className="career-submit-btn" onClick={() => setStep(3)}>Submit Application</button>
                </div>
              </div>
            )}

            {/* STEP 3 */}
            {step === 3 && (
              <div className="career-success-box">
                <div className="career-success-icon">
                  <img src="/assets/sucess.svg" alt="" />
                </div>
                <h2>Application Received</h2>
                <p>
                  We just sent a confirmation to you.
                  A recruiter will reach out within 72 hours.
                </p>
                <button className="career-done-btn" onClick={() => setShowModal(false)}>Done</button>
              </div>
            )}

          </div>
        </div>
      )}

      <Footer />
    </>
  );
}