import LocktelLayout from "@/components/locktel/LocktelLayout";
import { useTenant } from "@/contexts/TenantContext";
import { Award, Target, Eye } from "lucide-react";

const LocktelAboutPage = () => {
  const { companyName } = useTenant();

  return (
    <LocktelLayout>
      <section className="pt-24 pb-16">
        <div className="container mx-auto px-4 max-w-4xl">
          <h1 className="text-4xl font-bold text-foreground mb-6">About {companyName || "Locktel Academy"}</h1>

          <div className="prose prose-lg max-w-none">
            <p className="text-muted-foreground text-lg leading-relaxed mb-8">
              We are a dedicated training provider committed to delivering high-quality, industry-accredited courses.
              Our experienced team of instructors brings real-world expertise to every training session,
              ensuring delegates gain practical skills and recognised qualifications.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 mt-12">
            {[
              { icon: Target, title: "Our Mission", desc: "To provide accessible, high-quality training that empowers individuals and organisations to work safely and effectively." },
              { icon: Eye, title: "Our Vision", desc: "To be the leading provider of vocational training, recognised for excellence in delivery and delegate outcomes." },
              { icon: Award, title: "Our Values", desc: "Safety, quality, integrity, and continuous improvement are at the heart of everything we do." },
            ].map(({ icon: Icon, title, desc }) => (
              <div key={title} className="bg-card border border-border rounded-xl p-6">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <Icon className="w-6 h-6 text-primary" />
                </div>
                <h3 className="font-semibold text-foreground mb-2">{title}</h3>
                <p className="text-sm text-muted-foreground">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </LocktelLayout>
  );
};

export default LocktelAboutPage;