HBCUHomes

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";
import { motion } from "framer-motion";

const HomePage = () => {
  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-indigo-600 text-white py-6 shadow-lg">
        <div className="container mx-auto flex justify-between items-center px-4">
          <h1 className="text-2xl font-bold">HBCUHomes.com</h1>
          <nav>
            <ul className="flex space-x-4">
              <li>
                <a href="#about" className="hover:underline">About</a>
              </li>
              <li>
                <a href="#listings" className="hover:underline">Listings</a>
              </li>
              <li>
                <a href="#contact" className="hover:underline">Contact</a>
              </li>
            </ul>
          </nav>
        </div>
      </header>

      <main className="container mx-auto px-4 py-10">
        {/* Hero Section */}
        <section className="text-center py-16 bg-white rounded-xl shadow-md">
          <h2 className="text-4xl font-bold mb-4 text-gray-800">
            Empowering Generational Wealth, One Home at a Time
          </h2>
          <p className="text-gray-600 mb-8">
            Find your dream home, connect with trusted real estate professionals,
            and start building a legacy.
          </p>
          <div className="flex justify-center">
            <Input
              type="text"
              placeholder="Search for homes, neighborhoods, or cities..."
              className="mr-2 w-96"
            />
            <Button size="lg">
              <Search className="mr-2" /> Search
            </Button>
          </div>
        </section>

        {/* About Section */}
        <section id="about" className="mt-16">
          <motion.div
            className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center"
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <div>
              <h3 className="text-3xl font-bold text-gray-800 mb-4">
                Why Choose HBCUHomes.com?
              </h3>
              <p className="text-gray-600">
                We focus on addressing systemic barriers to homeownership while
                celebrating and empowering Black communities. Our platform
                connects users with resources, experts, and listings tailored
                to their unique needs.
              </p>
            </div>
            <img
              src="/images/community.jpg"
              alt="Community"
              className="rounded-lg shadow-md"
            />
          </motion.div>
        </section>

        {/* Listings Section */}
        <section id="listings" className="mt-16">
          <h3 className="text-3xl font-bold text-gray-800 mb-8 text-center">
            Featured Listings
          </h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array(6)
              .fill(0)
              .map((_, index) => (
                <Card key={index}>
                  <img
                    src={`/images/house-${index + 1}.jpg`}
                    alt="House"
                    className="rounded-t-lg"
                  />
                  <CardContent className="p-4">
                    <h4 className="text-lg font-bold text-gray-800 mb-2">
                      Beautiful 3-Bedroom Home
                    </h4>
                    <p className="text-gray-600">
                      Located near [HBCU campus], this stunning home features
                      modern amenities and a spacious yard.
                    </p>
                  </CardContent>
                </Card>
              ))}
          </div>
        </section>
      </main>

      <footer id="contact" className="bg-gray-800 text-white py-8">
        <div className="container mx-auto text-center">
          <p>&copy; 2025 HBCUHomes.com. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;