'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { ChevronDown, ChevronUp, Download, ArrowRight } from 'lucide-react';
import { withBasePath } from '@/lib/basePath';
import { useNavigate } from '@/lib/nextRouterAdapter';
import CVHeader from '@/components/layout/CVHeader';
import CVFooter from '@/components/layout/CVFooter';

// ─── Data ────────────────────────────────────────────────────────────────────

const learningBenefits = [
  {
    title: 'Get plenty of practice',
    image: '/uploads/images/how-it-works/howitwork1.webp',
    text: 'Practise speaking, grammar, vocabulary, and real conversations in a supportive online class environment.',
  },
  {
    title: 'Receive personal feedback',
    image: '/uploads/images/how-it-works/howitwork2.webp',
    text: 'Use teacher feedback to correct mistakes, improve pronunciation, and build confidence lesson by lesson.',
  },
  {
    title: 'Network for success',
    image: '/uploads/images/how-it-works/howitwork3.webp',
    text: 'Learn with motivated peers and join activities that help you use English outside the classroom.',
  },
];

const startSteps = [
  { title: 'Test your level',  text: 'Start with a quick level check so we can guide you toward the right course and learning path.' },
  { title: 'Choose a course',  text: 'Pick a beginner, professional, IELTS, business English, or custom training option based on your goals.' },
  { title: 'Join your class',  text: 'Attend live online sessions, complete guided practice, and use your course resources regularly.' },
  { title: 'Track progress',   text: 'Use feedback, practice tasks, and progress reviews to improve fluency and communication confidence.' },
];

const levels = [
  { code: 'A1', name: 'Beginner',          points: ['Use common expressions', 'Introduce yourself and others', 'Engage in simple conversations'] },
  { code: 'A2', name: 'Elementary',        points: ['Understand everyday topics', 'Communicate routine tasks', 'Describe simple background details'] },
  { code: 'B1', name: 'Intermediate',      points: ['Ask and answer questions', 'Express simple opinions', 'Understand specific information'] },
  { code: 'B2', name: 'Upper intermediate',points: ['Discuss abstract topics', 'Write notes and letters', 'Describe experiences and events'] },
  { code: 'C1', name: 'Advanced',          points: ['Follow complex meaning', 'Write structured arguments', 'Use topic sentences clearly'] },
  { code: 'C2', name: 'Proficient',        points: ['Use sophisticated grammar', 'Use high-level vocabulary', 'Speak with natural rhythm'] },
];

const resources = [
  { title: 'Chemistry',         label: 'Day 4 lesson', image: '/uploads/images/how-it-works/howitwork1.webp', href: '/assets/pdf/Day 4.pdf' },
  { title: 'Are you right for me?', label: 'Day 5 lesson', image: '/uploads/images/how-it-works/howitwork2.webp', href: '/assets/pdf/Day 5.pdf' },
  { title: 'Magical Moment',    label: 'Day 6 lesson', image: '/uploads/images/how-it-works/howitwork3.webp', href: '/assets/pdf/Day 6.pdf' },
];

const faqs = [
  {
    question: 'What is Cambridge Veritas?',
    answer: 'Cambridge Veritas offers a personalized way to learn English online through friendly group classes, trained tutors, and structured practice designed for personal and professional progress.',
  },
  {
    question: 'What types of English classes do you offer?',
    answer: 'We offer beginner English, spoken English for professionals, business English, IELTS preparation, teacher training, and corporate communication programs.',
  },
  {
    question: 'How can I join Cambridge Veritas?',
    answer: 'Take the level test, choose the right course, and submit your enrolment or enquiry. A student advisor will help you start with the right batch and plan.',
  },
  {
    question: 'Do you offer personal online tutoring?',
    answer: 'Yes. Learners can get personal online tutoring, guided practice, course resources, and feedback based on their goals and schedule.',
  },
];

// ─── Small Components ─────────────────────────────────────────────────────────

function SectionLabel({ children }) {
  return (
    <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">
      {children}
    </p>
  );
}

function MediaCard({ image, alt }) {
  return (
    <div className="relative aspect-[4/3] w-full overflow-hidden bg-[#F6EFE9]">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={withBasePath(image)}
        alt={alt}
        className="absolute inset-0 h-full w-full object-cover"
      />
    </div>
  );
}

function FaqItem({ question, answer, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div
      className={`rounded-2xl border bg-white transition-colors ${open ? 'border-[#D4AF37]' : 'border-[#E6D3B1]/80'}`}
    >
      <button
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-sm font-black text-[#4A141E]"
        aria-expanded={open}
      >
        {question}
        {open
          ? <ChevronUp className="w-4 h-4 text-[#8B1C1C] flex-shrink-0" />
          : <ChevronDown className="w-4 h-4 text-[#8B1C1C] flex-shrink-0" />
        }
      </button>
      {open && (
        <p className="px-5 pb-5 text-sm leading-relaxed text-[#4A141E]/70">
          {answer}
        </p>
      )}
    </div>
  );
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export default function HowToStartPage() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-[#FDFAF7]">
      <CVHeader />

      <main className="overflow-x-hidden bg-[#FDFAF7] text-[#4A141E]">

      {/* ── Hero ─────────────────────────────────────────────────────── */}
      <header className="border-b-4 border-[#D4AF37] bg-gradient-to-r from-[#4A141E] via-[#3B0F18] to-[#4A141E]">
        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-10 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8 lg:py-16">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full border border-[#D4AF37]/35 bg-[#D4AF37]/8 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-[#E6D3B1]">
              <span className="h-2 w-2 rounded-full bg-[#D4AF37]" />
              How to start
            </div>
            <h1 className="mt-5 text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">
              Cambridge Veritas was created with your progress in mind
            </h1>
            <p className="mt-5 max-w-2xl text-base leading-relaxed text-[#E6D3B1]/80 sm:text-lg">
              Learn what happens during lessons, how to get started, and how Cambridge Veritas helps you speak confidently.
            </p>
            <div className="mt-7 flex flex-col gap-3 sm:flex-row">
              <button
                onClick={() => navigate('/level-test')}
                className="inline-flex items-center justify-center rounded-2xl bg-[#D4AF37] px-6 py-4 text-sm font-black text-[#3B0F18] shadow-lg transition hover:bg-[#E6D3B1]"
              >
                Test my level
              </button>
              <Link
                href="/courses"
                className="inline-flex items-center justify-center rounded-2xl border border-[#D4AF37]/50 bg-white/10 px-6 py-4 text-sm font-black text-[#E6D3B1] transition hover:bg-white/15"
              >
                Explore courses
              </Link>
            </div>
          </div>
          <div className="overflow-hidden rounded-2xl shadow-2xl">
            <MediaCard image="/uploads/images/how-it-works/dashboard.webp" alt="Start learning English online with Cambridge Veritas" />
          </div>
        </div>
      </header>

      {/* ── Develop confidence ───────────────────────────────────────── */}
      <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-16">
        <div className="mb-10 text-center">
          <SectionLabel>Cambridge Veritas</SectionLabel>
          <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Develop confidence online</h2>
          <p className="mx-auto mt-3 max-w-3xl text-base leading-relaxed text-[#4A141E]/65">
            Every lesson is designed to move you from passive learning to active, confident communication.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {learningBenefits.map((benefit) => (
            <article key={benefit.title} className="overflow-hidden rounded-2xl border border-[#E6D3B1] bg-white shadow-sm">
              <MediaCard image={benefit.image} alt={benefit.title} />
              <div className="p-5">
                <h3 className="text-xl font-black text-[#4A141E]">{benefit.title}</h3>
                <p className="mt-3 text-sm leading-relaxed text-[#4A141E]/65">{benefit.text}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ── Four simple steps ────────────────────────────────────────── */}
      <section className="border-y border-[#E6D3B1]/60 bg-white">
        <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-16">
          <div className="mb-10 max-w-3xl">
            <SectionLabel>Start process</SectionLabel>
            <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Four simple steps to begin</h2>
            <p className="mt-3 text-base leading-relaxed text-[#4A141E]/65">
              Start with your current level, then build a practical routine with live teaching and feedback.
            </p>
          </div>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {startSteps.map((step, i) => (
              <div key={step.title} className="rounded-2xl border border-[#E6D3B1] bg-[#FDFAF7] p-5">
                <span className="flex h-11 w-11 items-center justify-center rounded-full bg-[#D4AF37] text-sm font-black text-[#3B0F18]">
                  {i + 1}
                </span>
                <h3 className="mt-4 text-lg font-black text-[#4A141E]">{step.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-[#4A141E]/65">{step.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CEFR levels ──────────────────────────────────────────────── */}
      <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-16">
        <div className="mb-10 text-center">
          <SectionLabel>Beginner to advanced</SectionLabel>
          <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">CEFR levels explained</h2>
          <p className="mx-auto mt-3 max-w-3xl text-base leading-relaxed text-[#4A141E]/65">
            Use these level descriptors as a quick guide before choosing your course.
          </p>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {levels.map((level) => (
            <article key={level.code} className="rounded-2xl border border-[#E6D3B1] bg-white p-5 shadow-sm">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <h3 className="text-3xl font-black text-[#4A141E]">{level.code}</h3>
                  <p className="mt-1 text-sm font-black uppercase tracking-wide text-[#8B1C1C]">{level.name}</p>
                </div>
                <span className="rounded-full bg-[#F6EFE9] px-3 py-1 text-xs font-black text-[#8B1C1C]">CEFR</span>
              </div>
              <ul className="mt-5 grid gap-2">
                {level.points.map((point) => (
                  <li key={point} className="flex gap-3 text-sm leading-relaxed text-[#4A141E]/70">
                    <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#D4AF37] text-xs font-black text-[#3B0F18]">
                      ✓
                    </span>
                    {point}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </section>

      {/* ── Download resources ───────────────────────────────────────── */}
      <section className="border-y border-[#E6D3B1]/60 bg-white">
        <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-16">
          <div className="mb-10 max-w-3xl">
            <SectionLabel>Sample lessons</SectionLabel>
            <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Download practice resources</h2>
            <p className="mt-3 text-base leading-relaxed text-[#4A141E]/65">
              Use sample resources to understand lesson flow and practise between live sessions.
            </p>
          </div>
          <div className="grid gap-6 md:grid-cols-3">
            {resources.map((resource) => (
              <article key={resource.title} className="overflow-hidden rounded-2xl border border-[#E6D3B1] bg-[#FDFAF7] shadow-sm">
                <MediaCard image={resource.image} alt={resource.title} />
                <div className="p-5">
                  <div className="mb-3 inline-flex rounded-full bg-white px-3 py-1 text-xs font-black uppercase tracking-wide text-[#8B1C1C] border border-[#E6D3B1]">
                    {resource.label}
                  </div>
                  <h3 className="text-xl font-black text-[#4A141E]">{resource.title}</h3>
                  <a
                    href={withBasePath(resource.href)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-5 inline-flex items-center gap-2 rounded-2xl bg-[#4A141E] px-5 py-3 text-sm font-black text-white transition hover:bg-[#8B1C1C]"
                  >
                    <Download className="w-4 h-4" />
                    Download lesson
                  </a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ── FAQ ──────────────────────────────────────────────────────── */}
      <section className="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-16">
        <div className="text-center">
          <SectionLabel>FAQ</SectionLabel>
          <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">How Cambridge Veritas works</h2>
          <p className="mx-auto mt-3 max-w-3xl text-base leading-relaxed text-[#4A141E]/65">
            Quick answers about classes, enrolment, benefits, and support.
          </p>
        </div>
        <div className="mt-8 grid gap-3">
          {faqs.map((faq, i) => (
            <FaqItem key={faq.question} question={faq.question} answer={faq.answer} defaultOpen={i === 0} />
          ))}
        </div>
        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <button
            onClick={() => navigate('/level-test')}
            className="inline-flex items-center gap-2 rounded-2xl bg-[#4A141E] px-6 py-4 text-sm font-black text-white transition hover:bg-[#8B1C1C]"
          >
            Start with level test
            <ArrowRight className="w-4 h-4" />
          </button>
          <button
            onClick={() => navigate('/contact-us')}
            className="inline-flex items-center gap-2 rounded-2xl border border-[#D4AF37] bg-white px-6 py-4 text-sm font-black text-[#8B1C1C] transition hover:border-[#8B1C1C]"
          >
            Contact counsellor
          </button>
        </div>
      </section>

      </main>

      <CVFooter />
    </div>
  );
}