'use client';

import Image from 'next/image';
import Link from 'next/link';
import { CommonHeader } from '@/components/layout/CommonHeader';
import { Footer } from '@/components/layout/Footer';

const teamMembers = [
  {
    name: 'Andrew',
    role: 'Founder & CEO',
    image: '/assets/images/professional-1.jpg',
  },
  {
    name: 'Thomas',
    role: 'Co-Founder',
    image: '/assets/images/professional-2.jpg',
  },
  {
    name: 'Darren',
    role: 'Advisor',
    image: '/assets/images/professional-3.jpg',
  },
];

const features = [
  {
    icon: '/assets/icons/verified-badge-orange.svg',
    title: 'Verified Agents',
    description: 'Every agent is vetted and verified for credentials, experience, and customer feedback.',
  },
  {
    icon: '/assets/icons/shield-verified-icon.svg',
    title: 'Total Transparency',
    description: 'Access honest reviews, transaction history, and verified credentials before connecting.',
  },
  {
    icon: '/assets/icons/home-icon.svg',
    title: 'Simple Journey',
    description: 'From search to settlement, we make finding and working with agents effortless.',
  },
];

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-white flex flex-col">
      {/* Header */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
        <CommonHeader />
      </div>

      {/* Main Content */}
      <main className="flex-1 w-full">
        {/* Hero Section */}
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
          <div className="text-center">
            {/* Mission Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-2 border border-[#00293d]/20 rounded-full mb-6">
              <Image
                src="/assets/icons/verified-badge-orange.svg"
                alt=""
                width={19}
                height={19}
              />
              <span className="font-fractul font-medium text-[14px] text-[#00293d]">
                Our Mission
              </span>
            </div>

            {/* Headline */}
            <h1 className="font-fractul font-bold text-[32px] lg:text-[40px] text-[#00293d] leading-tight mb-6">
              Connecting You with Trusted Agents.
            </h1>

            {/* Description */}
            <p className="font-serif text-[14px] text-[#00293d] leading-relaxed mb-8 max-w-[550px] mx-auto">
              We believe finding the right home shouldn't be complicated. Our platform bridges the gap between buyers, sellers, and verified real estate agents for a smooth and transparent experience.
            </p>

            {/* CTA Button */}
            <Link
              href="/agents"
              className="inline-flex items-center justify-center w-[160px] h-[46px] border border-[#00293d] rounded-full font-fractul font-medium text-[14px] text-[#00293d] hover:bg-gray-50 transition-colors"
            >
              Find Your Agent
            </Link>
          </div>
        </section>

        {/* Hero Image with Overlay Text */}
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
          <div className="relative rounded-[20px] overflow-hidden">
            <Image
              src="/assets/images/user_home_top.png"
              alt="City buildings"
              width={1200}
              height={500}
              className="w-full h-auto object-cover"
              priority
            />
            {/* Overlay Text */}
            <div className="absolute bottom-6 left-6 lg:bottom-10 lg:left-10">
              <h2 className="font-fractul font-bold text-[20px] lg:text-[24px] text-[#00293d]">
                Building the future of property.
              </h2>
            </div>
          </div>
        </section>

        {/* Stats Section */}
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="flex items-center justify-center gap-16 lg:gap-32">
            <div className="text-center">
              <p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]">
                15k+
              </p>
              <p className="font-serif text-[14px] text-[#00293d]">
                Verified Agents
              </p>
            </div>
            <div className="text-center">
              <p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]">
                98%
              </p>
              <p className="font-serif text-[14px] text-[#00293d]">
                Customer Satisfaction
              </p>
            </div>
          </div>
        </section>

        {/* Why Choose Us Section */}
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
          {/* Section Header */}
          <div className="text-center mb-12">
            <span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full">
              Why Choose Us
            </span>
          </div>

          {/* Feature Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {features.map((feature, index) => (
              <div
                key={index}
                className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow"
              >
                <div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Image
                    src={feature.icon}
                    alt=""
                    width={28}
                    height={28}
                  />
                </div>
                <h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3">
                  {feature.title}
                </h3>
                <p className="font-serif text-[14px] text-[#00293d] leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* Team Section */}
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 lg:pb-20">
          {/* Section Header */}
          <div className="text-center mb-12">
            <h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3">
              Meet the minds behind the platform.
            </h2>
            <p className="font-serif text-[14px] text-[#00293d] max-w-[500px] mx-auto">
              Our team is passionate about making real estate connections easier and more transparent for everyone.
            </p>
          </div>

          {/* Team Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {teamMembers.map((member, index) => (
              <div
                key={index}
                className="text-center"
              >
                <div className="w-[180px] h-[180px] rounded-full overflow-hidden mx-auto mb-4 border-4 border-[#e58625]/20">
                  <Image
                    src={member.image}
                    alt={member.name}
                    width={180}
                    height={180}
                    className="w-full h-full object-cover"
                  />
                </div>
                <h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-1">
                  {member.name}
                </h3>
                <p className="font-serif text-[14px] text-[#e58625]">
                  {member.role}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* CTA Section */}
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
          <div className="max-w-4xl mx-auto border border-[#00293d]/20 rounded-[15px] p-8 lg:p-10">
            <div className="flex flex-col lg:flex-row items-center justify-between gap-6">
              <div className="lg:max-w-[400px] text-center lg:text-left">
                <h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3">
                  Ready to find an agent?
                </h2>
                <p className="font-serif text-[13px] text-[#00293d] mb-5">
                  Discover trusted agents and start your property journey with confidence.
                </p>
                <Link
                  href="/agents"
                  className="inline-flex items-center gap-2 bg-[#e58625] text-white px-5 py-2.5 rounded-full font-fractul font-medium text-[13px] hover:bg-[#d47720] transition-colors"
                >
                  Start Your Search
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </Link>
              </div>
              <div className="w-[140px] lg:w-[160px]">
                <Image
                  src="/assets/images/agent-illustration.png"
                  alt="Find an agent"
                  width={160}
                  height={160}
                  className="w-full h-auto"
                />
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Footer */}
      <Footer />
    </div>
  );
}
