
import { companyInfo } from "@/lib/mock/company";
import Layout from "@/lib/components/layout/Layout";
import PageHeader from "@/lib/components/common/PageHeader";
import TestimonialsSection from "@/lib/components/sections/TestimonialsSection";
import Image from "next/image";

export const metadata = {
  title: "About Us - Nestbugi Contractors",
  description:
    "Learn more about Nestbugi Contractors, our mission, vision, and the values that drive us to deliver exceptional engineering, architectural, and construction services.",
};

export default function AboutPage() {
  return (
    <Layout>
      <PageHeader title="About Us" bgImage="/images/services/civil-contractors.jpg" />

      <section className="py-16 max-w-6xl mx-auto px-4">
        {/* Top Section with Image */}
        <div className="grid md:grid-cols-2 gap-8 mb-12 items-center">
          <div className="relative w-full h-80 rounded-lg overflow-hidden">
            <Image
              src="/images/logo.png"
              alt={companyInfo.name + "logo"}
              width={300}
              height={300}
              className="object-contain"
            />
          </div>

          <div>
            <h2 className="text-2xl font-semibold mb-4">{companyInfo.name}</h2>
            <p className="text-gray-700 leading-relaxed whitespace-pre-line">
              {companyInfo.description}
            </p>
          </div>
        </div>

        {/* Mission & Vision */}
        <div className="grid md:grid-cols-2 gap-8 mb-12">
          <div>
            <h3 className="text-xl font-semibold mb-3">Our Mission</h3>
            <p className="text-gray-700 whitespace-pre-line">
              {companyInfo.mission}
            </p>
          </div>

          <div>
            <h3 className="text-xl font-semibold mb-3">Our Vision</h3>
            <p className="text-gray-700 whitespace-pre-line">
              {companyInfo.vision}
            </p>
          </div>
        </div>

        {/* Core Values */}
        <div className="mb-12">
          <h3 className="text-xl font-semibold mb-4">Core Values</h3>
          <ul className="list-disc list-inside space-y-2 text-gray-700">
            {companyInfo.values.map((v, idx) => (
              <li key={idx}>{v}</li>
            ))}
          </ul>
        </div>
      </section>
      <TestimonialsSection />
    </Layout>
  );
}
