import React from "react";
import { FaXTwitter, FaLinkedin, FaTelegram, FaTwitch } from "react-icons/fa6";

const sections = [
  "Projects",
  "Blockchain",
  "Hospitality",
  "Agriculture",
  "Finance",
  "HUD (Harmonic Update Daley)",
  "Research",
  "Media",
  "Patrick's Bio"
];

export default function Home() {
  return (
    <div className="min-h-screen bg-black text-white font-sans">
      {/* Header */}
      <header className="flex justify-between items-center px-8 py-4 border-b border-gray-700">
        <h1 className="text-3xl font-bold">PDD</h1>
        <h2 className="text-lg">Patrick Daley DAO</h2>
      </header>
      
      {/* Sections */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-8">
        {sections.map((section, index) => (
          <div key={index} className="p-6 border border-gray-700 rounded-lg text-center hover:bg-gray-800 cursor-pointer">
            <h3 className="text-xl font-semibold">{section}</h3>
          </div>
        ))}
      </div>

      {/* Footer */}
      <footer className="flex flex-col items-center py-6 border-t border-gray-700 mt-8">
        <div className="flex space-x-6 text-2xl">
          <a href="#" className="hover:text-blue-400"><FaXTwitter /></a>
          <a href="#" className="hover:text-blue-400"><FaLinkedin /></a>
          <a href="#" className="hover:text-blue-400"><FaTelegram /></a>
          <a href="#" className="hover:text-purple-400"><FaTwitch /></a>
        </div>
        <p className="mt-4 text-gray-400">&copy; 2025 Patrick Daley DAO</p>
      </footer>
    </div>
  );
}