import React from 'react';
import FadeIn from '../components/FadeIn.tsx';

interface CoreValue {
    title: string;
    description: string;
    imageUrl: string;
}

const coreValues: CoreValue[] = [
    { 
        title: 'Integrity', 
        description: 'We uphold the highest standards of integrity in all of our actions.',
        imageUrl: 'https://images.unsplash.com/photo-1542362567-b07e54358753?q=80&w=2070&auto=format&fit=crop'
    },
    { 
        title: 'Professionalism', 
        description: 'We provide expert service and conduct ourselves with the utmost professionalism.',
        imageUrl: 'https://images.unsplash.com/photo-1556740738-b6a63e2775d2?q=80&w=2070&auto=format&fit=crop'
    },
    { 
        title: 'Innovation', 
        description: 'We embrace new ideas and technologies to find better solutions for our clients.',
        imageUrl: 'https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=2069&auto=format&fit=crop'
    },
    { 
        title: 'Customer Satisfaction', 
        description: 'Our clients are at the heart of everything we do. Their satisfaction is our success.',
        imageUrl: 'https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?q=80&w=1974&auto=format&fit=crop'
    },
    { 
        title: 'Sustainability', 
        description: 'We are committed to practices that are environmentally sound and economically viable.',
        imageUrl: 'https://images.unsplash.com/photo-1466611653911-95081537e5b7?q=80&w=2070&auto=format&fit=crop'
    },
];

const whyChooseUsPoints = [
    'Experienced Professionals',
    'Timely Delivery of Services',
    'Wide Range of Integrated Services',
    'Strong Client Relationships',
    'Transparent & Honest Communication',
    'Customized Property Solutions'
];

const AboutPage: React.FC = () => {
  return (
    <div className="bg-white">
      {/* Page Header */}
      <div className="relative bg-gray-800 py-32 sm:py-40">
        <img
            src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop"
            alt="Our team working together in a modern office"
            className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-secondary bg-opacity-70"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <FadeIn>
                <h1 className="text-4xl font-bold uppercase text-white">About Next Horizon Realty</h1>
                <p className="mt-4 text-xl text-gray-200">Building trust through excellence in real estate.</p>
            </FadeIn>
        </div>
      </div>

      {/* Company Profile */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <FadeIn>
                <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 className="text-3xl font-bold text-secondary mb-4">Our Company</h2>
                        <p className="text-gray-600 mb-4">
                        Next Horizon Realty Ltd. is a reputable Ghanaian real estate and property management company founded on the principles of transparency, professionalism, and customer-centricity. With years of experience in the Ghanaian property market, we have developed a deep understanding of the unique challenges and opportunities within the sector.
                        </p>
                        <p className="text-gray-600">
                        Our team comprises dedicated professionals from various fields including asset handling, engineering, logistics, and facility management. This multidisciplinary approach allows us to offer comprehensive and integrated solutions that cater to both individual and corporate clients. Our guiding philosophy, "Your Property, Our Priority," is a testament to our commitment to managing every property with the same care and attention we would our own.
                        </p>
                    </div>
                    <div>
                        <img src="https://images.unsplash.com/photo-1556761175-b413da4baf72?q=80&w=1974&auto=format&fit=crop" alt="Professional real estate team in an office" className="rounded-lg shadow-lg w-full h-full object-cover" />
                    </div>
                </div>
            </FadeIn>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="bg-secondary text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <FadeIn>
                <div className="grid md:grid-cols-2 gap-12">
                    <div>
                        <h3 className="text-2xl font-bold text-primary mb-3">Our Mission</h3>
                        <p className="text-lg">“To provide reliable, innovative, and customer-centered real estate and property management services that deliver value and trust.”</p>
                    </div>
                    <div>
                        <h3 className="text-2xl font-bold text-primary mb-3">Our Vision</h3>
                        <p className="text-lg">“To be Ghana’s most trusted partner in real estate, delivering sustainable and world-class solutions.”</p>
                    </div>
                </div>
            </FadeIn>
        </div>
      </section>
      
      {/* Core Values */}
      <section className="py-20 bg-gray-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <FadeIn>
                <div className="text-center mb-12">
                    <h2 className="text-3xl font-bold text-secondary">Our Core Values</h2>
                    <p className="mt-4 text-lg text-gray-600">The principles that guide our every action.</p>
                </div>
              </FadeIn>
              <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-8">
                  {coreValues.map((value, index) => (
                      <FadeIn key={value.title} delay={index * 100}>
                        <div className="bg-white rounded-lg shadow-lg overflow-hidden h-full transform transition-transform duration-300 hover:-translate-y-1">
                            <img src={value.imageUrl} alt={value.title} className="w-full h-40 object-cover" />
                            <div className="p-6 text-center">
                                <h4 className="font-semibold text-secondary text-lg mb-2">{value.title}</h4>
                                <p className="text-gray-600 text-sm">{value.description}</p>
                            </div>
                        </div>
                      </FadeIn>
                  ))}
              </div>
          </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <FadeIn>
                <div className="grid md:grid-cols-2 gap-12 items-center">
                    <div className="order-last md:order-first">
                        <img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=2070&auto=format&fit=crop" alt="Satisfied client shaking hands" className="rounded-lg shadow-lg w-full h-full object-cover" />
                    </div>
                    <div>
                        <h2 className="text-3xl font-bold text-secondary mb-4">Why Choose Us?</h2>
                        <p className="text-gray-600 mb-6">Our strengths lie in our commitment to quality and our comprehensive approach to property services.</p>
                        <ul className="space-y-4">
                            {whyChooseUsPoints.map(point => (
                                <li key={point} className="flex items-start">
                                    <svg className="flex-shrink-0 h-6 w-6 text-primary mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                    <span>{point}</span>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </FadeIn>
        </div>
      </section>
    </div>
  );
};

export default AboutPage;