'use client';

/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useState, useEffect } from "react";
import {
  Users, Mic, Globe, Briefcase, GraduationCap, Target, TrendingUp,
  Award, BookOpen, Video, Building2, Search, DollarSign, Network,
  PenLine,
} from "lucide-react";
import CVHeader from "@/components/layout/CVHeader";
import CVFooter from "@/components/layout/CVFooter";
import { tesolIntroductionData } from "@/data/introduction-class/tesol/pageData";
import { HeroRegistrationSection } from "./sections/HeroRegistrationSection";
import { DiscoverSection } from "./sections/DiscoverSection";
import { AudienceSection } from "./sections/AudienceSection";
import { TrainerSection } from "./sections/TrainerSection";
import { CertificationPathSection } from "./sections/CertificationPathSection";
import { SocialProofSection } from "./sections/SocialProofSection";
import { VideoTestimonialsSection } from "./sections/VideoTestimonialsSection";
import { CareerBenefitsSection } from "./sections/CareerBenefitsSection";
import { UrgencySection } from "./sections/UrgencySection";
import { CertificateSection } from "./sections/CertificateSection";
import { FaqSection } from "./sections/FaqSection";
import { FinalCtaSection } from "./sections/FinalCtaSection";
import TesolInfoSection from "./sections/TesolInfoSection";

const PRIMARY_BTN = "inline-flex items-center justify-center gap-3 px-10 py-5 rounded-2xl font-black text-lg bg-[#8B1C1C] text-white hover:bg-[#6B1010] transition-all duration-300 shadow-lg hover:scale-[1.02]";

export default function TESOLIntroClass({ initialSessions = null }) {
  const hydratedSessions = Array.isArray(initialSessions) ? initialSessions : null;

  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    email: "",
    countryCode: "+91",
    phone: "",
    profession: "",
    session: hydratedSessions?.[0]?.value || "",
    interest: "",
  });
  const [sessions, setSessions] = useState(hydratedSessions);
  const [submitting, setSubmitting] = useState(false);
  const [formError, setFormError] = useState("");

  useEffect(() => {
    let cancelled = false;

    fetch(tesolIntroductionData.apiPath)
      .then((response) => {
        if (!response.ok) throw new Error("Unable to load sessions.");
        return response.json();
      })
      .then((data) => {
        if (cancelled) return;
        const list = Array.isArray(data?.sessions) ? data.sessions : [];
        setSessions(list);
        setForm((current) => ({ ...current, session: list[0]?.value || "" }));
      })
      .catch(() => {
        if (cancelled) return;
        setSessions([]);
        setForm((current) => ({ ...current, session: "" }));
      });

    return () => { cancelled = true; };
  }, []);

  const selectedSessionLabel = sessions?.find(o => o.value === form.session)?.label || "";
  const hasSessions = Array.isArray(sessions) && sessions.length > 0;
  const [expanded, setExpanded] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.session) {
      setFormError("No upcoming sessions are available right now. Please check back soon.");
      return;
    }
    setSubmitting(true); setFormError("");
    const response = await fetch(tesolIntroductionData.apiPath, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...form, webinarId: form.session }) });
    const data = await response.json(); setSubmitting(false);
    if (!response.ok) return setFormError(data.message || "Unable to register.");
    window.location.assign(`${tesolIntroductionData.confirmationPath}/${data.webinarId}/${data.token}/confermation`);
  };

  const benefits = [
    { icon: Target, text: "Understand what TESOL teachers actually do" },
    { icon: PenLine, text: "Experience a live teaching-methodology demo" },
    { icon: BookOpen, text: "Explore lesson planning and language analysis" },
    { icon: TrendingUp, text: "Ask questions about the CVTE\u00ae teacher-training pathway" },
  ];

  const audience = [
    { icon: GraduationCap, label: "Aspiring English Teachers" },
    { icon: Users, label: "Existing School Teachers" },
    { icon: Briefcase, label: "Corporate Trainers & L&D Professionals" },
    { icon: Award, label: "IELTS, OET & Voice Accent Trainers" },
    { icon: Globe, label: "Career Changers Exploring Teaching" },
    { icon: Mic, label: "Graduates New to Teacher Training" },
  ];

  const legacyVideoTestimonials = [
    {
      name: "Shivanshi Diwan",
      outcome: "Young Learner Teacher from Punjab → CVTE Certified TESOL Trainer",
      youtubeId: "H88YYNelpuI",
      thumb: "https://img.youtube.com/vi/H88YYNelpuI/hqdefault.jpg",
    },
    {
      name: "Jasbir Reid",
      outcome: "School Owner from Vishakapatnam → CVTE Certified TESOL Leader",
      youtubeId: "lQIuypsznbA",
      thumb: "https://img.youtube.com/vi/lQIuypsznbA/hqdefault.jpg",
    },
  ];

  const videoTestimonials = [
    {
      name: "Shivanshi Diwan",
      outcome: "Young learner teacher -> CVTE\u00ae TESOL training story",
      youtubeId: "H88YYNelpuI",
      thumb: "https://img.youtube.com/vi/H88YYNelpuI/hqdefault.jpg",
      alt: "Shivanshi Diwan sharing her CVTE TESOL teacher-training experience",
    },
    {
      name: "Jasbir Reid",
      outcome: "School owner -> CVTE\u00ae professional-development story",
      youtubeId: "lQIuypsznbA",
      thumb: "https://img.youtube.com/vi/lQIuypsznbA/hqdefault.jpg",
      alt: "Jasbir Reid sharing her CVTE TESOL professional-development experience",
    },
  ];

  const legacyCertPath = [
    {
      step: "01",
      icon: BookOpen,
      title: "Attend the Introduction Session",
      desc: "Attend this free live session to understand the CVTE programme structure, career outcomes, and what the 120-hour TESOL certification entails."
    },
    {
      step: "02",
      icon: Video,
      title: "Enrol in the CVTE Programme",
      desc: "Complete 120 hours of structured training — lesson planning, grammar methodology, teaching practice, and portfolio development — all led by Krishnatrya."
    },
    {
      step: "03",
      icon: Award,
      title: "Earn Your CVTE Level 5 Credential",
      desc: "Receive your Cambridge Veritas Level 5 TESOL certificate — UK-regulated, globally recognised, and permanently on record."
    },
  ];

  const certPath = [
    {
      step: "01",
      icon: BookOpen,
      title: "Attend the Free TESOL Class",
      desc: "Experience what professional English teacher training feels like through methodology, lesson planning, language awareness and live discussion.",
    },
    {
      step: "02",
      icon: Video,
      title: "Explore the CVTE\u00ae Pathway",
      desc: "Understand how the full CVTE\u00ae programme develops TESOL methodology, lesson planning, teaching practice and portfolio evidence.",
    },
    {
      step: "03",
      icon: Target,
      title: "Practise and Reflect",
      desc: "Professional teacher training asks you to plan, teach, receive feedback, reflect and improve through guided tasks.",
    },
    {
      step: "04",
      icon: Award,
      title: "Complete the Full Programme",
      desc: "The CVTE\u00ae credential is awarded after completing the full programme requirements, not after the free introduction class.",
    },
  ];

  const legacyEmploymentBenefits = [
    { icon: DollarSign,  title: "Command Premium Rates",        desc: "CVTE graduates charge significantly higher rates than uncertified teachers — typically 3–5× more." },
    { icon: Building2,   title: "Institutional Client Access",  desc: "Your Level 5 credential opens doors to universities, language academies, and corporate training contracts." },
    { icon: Search,      title: "Stand Out in the Job Market",  desc: "A UK-regulated Level 5 TESOL qualification is immediately visible and verifiable on LinkedIn." },
    { icon: Globe,       title: "Teach Anywhere in the World",  desc: "Recognised in 50+ countries — teach online, relocate, or consult internationally with ease." },
    { icon: Network,     title: "Join the Alumni Network",      desc: "Access a global community of 25,000+ certified professionals for referrals and collaboration." },
    { icon: TrendingUp,  title: "Measurable Career Growth",     desc: "Graduates consistently report promotion or income increases within 6 months of certification." },
  ];

  const employmentBenefits = [
    { icon: Building2, title: "School and Language-Centre Roles", desc: "Use TESOL training to understand the planning, learner support and classroom skills expected in English-teaching settings." },
    { icon: Globe, title: "Teach English Online", desc: "Explore how lesson structure, interaction, feedback and digital delivery affect online English teaching." },
    { icon: Briefcase, title: "Adult and Corporate English", desc: "See how TESOL methodology supports workplace English, spoken fluency and professional communication classes." },
    { icon: Network, title: "Build Specialist Pathways", desc: "Use TESOL foundations before specialising in IELTS, pronunciation, young learners, business English or ESP." },
  ];

  const legacyFaqs = [
    { q: "Do I need prior teaching experience to attend?",    a: "Not at all. This introduction session is open to any professional or graduate who wants to understand the CVTE Certification programme and whether it's right for them." },
    { q: "Is this session really free?",                      a: "Yes, 100% free. No hidden charges, no obligations. This is a live introduction to the Cambridge Veritas 120-Hour TESOL certification pathway." },
    { q: "Will there be live interaction?",                   a: "Absolutely — fully live and interactive. You can ask questions and receive direct guidance from Krishnatrya in real time." },
    { q: "How long is the introduction class?",               a: "Approximately 90 minutes, including a live Q&A and personalised next-step guidance." },
    { q: "What happens after the session?",                   a: "You'll receive a personalised recommendation. Our team will follow up to help you take the next steps toward enrolling in the full CVTE programme." },
    { q: "What is the difference between TESOL and TEFL?",    a: "TESOL (Teaching English to Speakers of Other Languages) is a broader and more internationally recognised qualification. CVTE is a Level 5 programme specifically designed for professional-level English teaching contexts." },
  ];

  const faqs = [
    { q: "What is TESOL?", a: "TESOL stands for Teaching English to Speakers of Other Languages. TESOL teacher training prepares teachers to plan lessons, teach language skills, manage learners, assess progress and reflect on teaching." },
    { q: "What is the difference between TESOL and TEFL?", a: "TESOL and TEFL are closely related labels for English-language teacher education. Employers usually also consider course hours, training quality, teaching practice, assessment and provider recognition." },
    { q: "Is the TESOL introduction class really free?", a: "Yes. The live TESOL introduction class is free to attend and lasts approximately 90 minutes." },
    { q: "Do I need previous teaching experience?", a: "No previous teaching experience is required to attend the introduction class. It is designed for beginners, career changers and existing educators exploring TESOL." },
    { q: "Do I need a university degree to attend?", a: "A degree is not required for the free introduction class. Some employers or countries may set their own degree requirements for teaching roles." },
    { q: "Can non-native English speakers become TESOL teachers?", a: "Yes. Non-native English speakers can become TESOL teachers when they have strong English proficiency, teaching skill, language awareness and the ability to support learners clearly." },
    { q: "What English level should a TESOL teacher have?", a: "TESOL teachers should have strong command of spoken and written English. Professional roles may ask for proof of English proficiency depending on the employer and country." },
    { q: "Will I practise teaching in the introduction class?", a: "The free class includes demonstration and discussion rather than assessed teaching practice. Teaching practice belongs to the full CVTE\u00ae programme pathway." },
    { q: "Does the free class give me a TESOL certificate?", a: "No. The free class introduces professional TESOL teacher training and the CVTE\u00ae pathway. The CVTE\u00ae credential requires successful completion of the full programme requirements." },
    { q: "What happens after the free class?", a: "You can decide whether to continue into the full CVTE\u00ae programme, where teacher-training work, practice tasks and completion requirements are explained in detail." },
    { q: "Is CVTE\u00ae the same as CELTA or Trinity CertTESOL?", a: "No. CVTE\u00ae, CELTA and Trinity CertTESOL are distinct teacher-training pathways from different providers. Compare purpose, teaching practice, recognition, assessment and entry requirements before choosing." },
    { q: "Can TESOL help me teach English online?", a: "TESOL training can support online English teaching by developing lesson planning, language awareness, feedback, classroom management and digital teaching skills." },
    { q: "Can TESOL help me teach abroad?", a: "TESOL training can support international teaching applications, but requirements vary by country, employer, visa rules, degree expectations and experience." },
    { q: "Does a TESOL certificate expire?", a: "Many TESOL certificates do not have a fixed expiry date, but teachers should keep developing through practice, observation, feedback and continuing professional development." },
    { q: "What is a 120-hour TESOL course?", a: "A 120-hour TESOL course is a common professional training format that usually includes methodology, lesson planning, language awareness, teaching skills and assessed or guided tasks." },
  ];

  const sectionContext = { PRIMARY_BTN, form, setForm, sessions, selectedSessionLabel, hasSessions, expanded, setExpanded, submitting, formError, handleSubmit, benefits, audience, videoTestimonials, certPath, employmentBenefits, faqs };

  return (
    <div className="cv-intro-page min-h-screen bg-white">
      <CVHeader />

      {/* ══════════════════════════════════════════════════
          1. HERO + FORM (split layout)
      ══════════════════════════════════════════════════ */}
      <HeroRegistrationSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          2. WHAT YOU'LL DISCOVER
      ══════════════════════════════════════════════════ */}
      <DiscoverSection course="tesol" context={sectionContext} />
      <TesolInfoSection />

      {/* ══════════════════════════════════════════════════
          3. WHO IT IS FOR
      ══════════════════════════════════════════════════ */}
      <AudienceSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          4. TRAINER AUTHORITY
      ══════════════════════════════════════════════════ */}
      <TrainerSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          5. CERTIFICATION PATH
      ══════════════════════════════════════════════════ */}
      <CertificationPathSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          6. SOCIAL PROOF STRIP
      ══════════════════════════════════════════════════ */}
      <SocialProofSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          7. VIDEO TESTIMONIALS
      ══════════════════════════════════════════════════ */}
      <VideoTestimonialsSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          8. EMPLOYMENT & CAREER CREDIBILITY
      ══════════════════════════════════════════════════ */}
      <CareerBenefitsSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          9. URGENCY BLOCK
      ══════════════════════════════════════════════════ */}
      <UrgencySection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          10. CERTIFICATE VISUAL BLOCK
      ══════════════════════════════════════════════════ */}
      <CertificateSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          11. FAQ
      ══════════════════════════════════════════════════ */}
      <FaqSection course="tesol" context={sectionContext} />

      {/* ══════════════════════════════════════════════════
          12. FINAL CTA
      ══════════════════════════════════════════════════ */}
      <FinalCtaSection course="tesol" context={sectionContext} />

      <CVFooter />
    </div>
  );
}