import LocktelLayout from "@/components/locktel/LocktelLayout";
import LocktelHero from "@/components/locktel/LocktelHero";
import LocktelFeaturedCourses from "@/components/locktel/LocktelFeaturedCourses";
import LocktelTestimonials from "@/components/locktel/LocktelTestimonials";
import { Link } from "@inertiajs/react";
import { useTenantHref } from "@/hooks/useTenantLink";
import { Button } from "@/components/ui/button";
import { Wrench, BookOpen, Clock, ShieldCheck } from "lucide-react";

const LocktelHomePage = () => {
  const tenantHref = useTenantHref();

  return (
    <LocktelLayout>
      <LocktelHero />

      {/* About intro */}
      <section className="container mx-auto px-4 py-20">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-3xl font-bold text-foreground mb-6">
            Expert-Led Courses for Beginners and Professionals
          </h2>
          <p className="text-muted-foreground leading-relaxed">
            Locktel Academy offers a range of accredited courses designed to empower individuals with both
            foundational and advanced skills, whether they are entering the field or enhancing their expertise.
            Specialising in areas such as plant machinery, street works, traffic management, telecom safety,
            and health and safety, the academy's courses are led by experienced professionals who bring
            valuable, up-to-date insights to each program.
          </p>
        </div>
      </section>

      <LocktelFeaturedCourses featuredOnly />

      {/* Industry Training Sections */}
      <section className="bg-muted/30 py-20">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 gap-12 items-start">
            <div>
              <h3 className="text-2xl font-bold text-foreground mb-4">Smart Awards Training</h3>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Our Smart Awards courses are tailored to meet the exacting demands of the telecommunications industry.
                With a focus on fibre optic telecommunications and network access, these accredited programmes ensure
                participants are fully compliant, safety-conscious, and ready to work efficiently.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                By completing these courses, learners gain access to the Smart Awards Network Operative Passport
                Scheme (NOPS) card – an essential certification for telecoms engineers.
              </p>
              <Link href={tenantHref("/courses?cat=smart-awards")} className="inline-block mt-4">
                <Button variant="outline">View Smart Awards Courses</Button>
              </Link>
            </div>
            <div>
              <h3 className="text-2xl font-bold text-foreground mb-4">CABWI NRSWA Training</h3>
              <p className="text-muted-foreground leading-relaxed mb-4">
                For those working in road and street works, our CABWI NRSWA training courses provide the essential
                skills and qualifications to safely and effectively carry out operations on UK highways. From
                excavation and reinstatement to traffic management and signage.
              </p>
              <p className="text-muted-foreground leading-relaxed">
                Successful candidates earn the nationally recognised Street Works Qualification Register (SWQR) card,
                showcasing their expertise and compliance in street works.
              </p>
              <Link href={tenantHref("/courses?cat=nrswa")} className="inline-block mt-4">
                <Button variant="outline">View NRSWA Courses</Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Why Choose Us - 4 pillars */}
      <section className="container mx-auto px-4 py-20">
        <h2 className="text-3xl font-bold text-foreground text-center mb-12">Why Choose Locktel Academy</h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {[
            {
              icon: BookOpen,
              title: "Cutting-Edge Curriculum",
              desc: "Training programs developed by industry experts, incorporating emerging technologies, industry trends, and best practices.",
            },
            {
              icon: Wrench,
              title: "Hands-On Learning",
              desc: "Access to real-world telecom equipment, labs, and simulations, allowing you to apply knowledge in practical scenarios.",
            },
            {
              icon: ShieldCheck,
              title: "Industry Expert Instructors",
              desc: "Seasoned professionals with extensive experience bringing real-world insights and practical knowledge to the classroom.",
            },
            {
              icon: Clock,
              title: "Flexible Learning Options",
              desc: "On-site training, weekend and evening modules, and modular courses that spread over multiple sessions to minimise downtime.",
            },
          ].map(({ icon: Icon, title, desc }) => (
            <div key={title} className="text-center p-6 rounded-lg border border-border bg-card">
              <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <Icon className="w-7 h-7 text-primary" />
              </div>
              <h3 className="font-semibold text-foreground mb-2">{title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">{desc}</p>
            </div>
          ))}
        </div>
      </section>

      <LocktelTestimonials limit={3} />

      {/* CTA */}
      <section className="bg-primary/5 py-20">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold text-foreground mb-4">Ready to Get Started?</h2>
          <p className="text-muted-foreground mb-8 max-w-xl mx-auto">
            Browse our full course catalogue or get in touch to discuss your training requirements.
          </p>
          <div className="flex gap-4 justify-center">
            <Link href={tenantHref("/courses")}>
              <Button size="lg">View All Courses</Button>
            </Link>
            <Link href={tenantHref("/contact")}>
              <Button size="lg" variant="outline">Contact Us</Button>
            </Link>
          </div>
        </div>
      </section>
    </LocktelLayout>
  );
};

export default LocktelHomePage;