import { Link } from "@/lib/nextRouterAdapter";

const steps = [
  { n: "01", icon: "🎥", title: "Learn From Recorded Classes", desc: "Each programme has 15–20 recorded classes you can watch anytime, anywhere. Pause, rewind and rewatch until every concept clicks — fully self-paced around your schedule." },
  { n: "02", icon: "🎯", title: "Master Your Specialism", desc: "Go deep on IELTS, Voice & Accent or Business English. Learn the methods, assessment criteria and delivery techniques that real trainers use in live classrooms." },
  { n: "03", icon: "📁", title: "Build Your Teaching Portfolio", desc: "Turn what you learn into proof. Develop a structured teaching portfolio of lesson plans, sample materials and approaches that shows employers you can actually teach." },
  { n: "04", icon: "🎬", title: "Record Microteaching Evidence", desc: "Practise and record short microteaching sessions with guided prompts. These clips become concrete, watchable evidence of your classroom ability." },
  { n: "05", icon: "🎤", title: "Prepare for Interviews & Demo Lessons", desc: "Get ready for the real thing — interview preparation, teacher CV support and demo lesson planning so you walk into any trainer interview confident and ready." },
  { n: "06", icon: "🤝", title: "Access Verified Employment Opportunities", desc: "Get access to verified employment opportunities and practical guidance on how to apply successfully — so your portfolio, certificate and microteaching evidence reach the right recruiters and your profile is less likely to be skipped." },
];

export default function HowItWorksSection() {
  return (
    <section id="how-it-works" className="py-24 px-6 cv-section-dark">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-14">
          <div className="cv-badge-gold inline-block mb-4">How It Works</div>
          <h2 className="text-4xl md:text-5xl font-black tracking-tight mb-4 text-white">
            Six steps from your first class<br/>
            <span style={{ color: "#D4B038" }}>to getting noticed by employers.</span>
          </h2>
          <p className="text-base max-w-lg mx-auto font-medium" style={{ color: "rgba(255,245,230,0.65)" }}>
            This isn&apos;t theory you forget after the exam. Every programme builds something real — a portfolio, a certificate, microteaching evidence and a profile employers can actually see.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          {steps.map((step, i) => (
            <div key={i} className="rounded-2xl p-6 relative transition-all hover:-translate-y-1"
              style={{ backgroundColor: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.10)" }}>
              <div className="flex items-start gap-4">
                <div>
                  <div className="text-[10px] font-black uppercase tracking-widest mb-1" style={{ color: "rgba(212,176,56,0.55)" }}>Step {step.n}</div>
                  <div className="text-2xl mb-2">{step.icon}</div>
                  <h3 className="font-black text-base mb-2 text-white">{step.title}</h3>
                  <p className="text-sm leading-relaxed font-medium" style={{ color: "rgba(255,245,230,0.6)" }}>{step.desc}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="text-center mt-10">
          <Link to="/register" className="cv-btn-primary inline-block text-sm px-8 py-3.5 rounded-2xl font-black">
            Start Your Journey →
          </Link>
          <p className="text-xs mt-3 font-medium" style={{ color: "rgba(255,245,230,0.45)" }}>Free trial · No card required · Cancel anytime</p>
        </div>
      </div>
    </section>
  );
}