import React, { useState, useEffect } from 'react';
import { 
  Building2, 
  Ruler, 
  Hammer, 
  Lightbulb, 
  Phone, 
  Mail, 
  MapPin, 
  ChevronRight, 
  Menu, 
  X, 
  ArrowRight,
  ShieldCheck,
  Zap,
  Users,
  Award,
  ExternalLink,
  Cpu,
  Facebook,
  Instagram,
  Youtube,
  Music2
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('all');
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const services = [
    {
      title: "Architectural Design",
      icon: <Building2 className="w-8 h-8" />,
      desc: "Comprehensive conceptualization to detailed design for residential and commercial spaces."
    },
    {
      title: "Structural Engineering",
      icon: <Cpu className="w-8 h-8" />,
      desc: "Advanced load analysis and structural integrity planning using industry-leading software."
    },
    {
      title: "Interior Design",
      icon: <Lightbulb className="w-8 h-8" />,
      desc: "Turnkey interior solutions that balance aesthetics with functional spatial efficiency."
    },
    {
      title: "Project Management",
      icon: <Users className="w-8 h-8" />,
      desc: "End-to-end supervision ensuring timelines, budgets, and quality standards are met."
    },
    {
      title: "Electrical & Plumbing",
      icon: <Zap className="w-8 h-8" />,
      desc: "Efficient MEP systems design including load calculation and safety distribution."
    },
    {
      title: "Cost Estimation",
      icon: <Ruler className="w-8 h-8" />,
      desc: "Detailed BOQ and financial planning to keep project costs under strict control."
    }
  ];

  const projects = [
    {
      id: 1,
      title: "Station Library Savar Cantonment",
      category: "Public",
      image: "https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&q=80&w=800",
      desc: "Modern interior design with specialized zones for reading, E-books, and children."
    },
    {
      id: 2,
      title: "Savar Cantonment Public School",
      category: "Institutional",
      image: "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&q=80&w=800",
      desc: "Functional floor layout featuring integrated canteen and teacher lounge concepts."
    },
    {
      id: 3,
      title: "Bashundhara B-Block Project",
      category: "Residential",
      image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=800",
      desc: "High-end residential apartment design focusing on modern aesthetics and ergonomics."
    },
    {
      id: 4,
      title: "Azmain Showroom",
      category: "Commercial",
      image: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&q=80&w=800",
      desc: "Retail space design optimized for clothing display and customer flow."
    },
    {
      id: 5,
      title: "Showpno Chaya 2",
      category: "Residential",
      image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=800",
      desc: "Comprehensive 8th-floor furniture and layout planning for luxury living."
    }
  ];

  const filteredProjects = activeTab === 'all' 
    ? projects 
    : projects.filter(p => p.category.toLowerCase() === activeTab.toLowerCase());

  const leaders = [
    {
      name: "Tusar Ahmed",
      title: "Managing Director",
      bio: "Visionary leader with a focus on integrating complex architectural concepts into buildable reality.",
      email: "rootspacebd@gmail.com",
      web: "www.tusharahmed.com"
    },
    {
      name: "Khaleed Ul Haque",
      title: "Chief Operating Officer",
      bio: "Operational strategist ensuring project efficiency, technical accuracy, and seamless execution.",
      email: "rootspacebd@gmail.com",
      web: "www.rootspacebd.com"
    }
  ];

  const socialLinks = [
    { name: 'Facebook', icon: <Facebook className="w-5 h-5" />, url: 'https://facebook.com/Rootspacebd' },
    { name: 'Instagram', icon: <Instagram className="w-5 h-5" />, url: 'https://instagram.com/Rootspacebd' },
    { name: 'Youtube', icon: <Youtube className="w-5 h-5" />, url: 'https://youtube.com/@Rootspacebd' },
    { name: 'Tiktok', icon: <Music2 className="w-5 h-5" />, url: 'https://tiktok.com/@Rootspacebd' },
  ];

  const scrollToSection = (id) => {
    setIsMenuOpen(false);
    const element = document.getElementById(id);
    if (element) {
      const offset = 80;
      const bodyRect = document.body.getBoundingClientRect().top;
      const elementRect = element.getBoundingClientRect().top;
      const elementPosition = elementRect - bodyRect;
      const offsetPosition = elementPosition - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      });
    }
  };

  return (
    <div className="min-h-screen bg-white text-slate-900 font-sans selection:bg-red-100 selection:text-red-900">
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white shadow-md py-3' : 'bg-transparent py-5'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
            <div className="w-12 h-12 flex items-center justify-center overflow-hidden">
               <img src="root-logo1.png" alt="RootSpace Logo" className="w-full h-full object-contain" />
            </div>
            <div>
              <h1 className={`font-black text-xl tracking-tight leading-none ${!scrolled && 'text-slate-900'}`}>ROOT SPACE</h1>
              <p className={`text-[10px] tracking-[0.2em] font-medium uppercase ${!scrolled ? 'text-slate-600' : 'text-slate-500'}`}>Architects & Engineers</p>
            </div>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center gap-8">
            {['Services', 'Projects', 'Leadership', 'Contact'].map((item) => (
              <button 
                key={item}
                onClick={() => scrollToSection(item.toLowerCase())}
                className="text-sm font-semibold uppercase tracking-wider hover:text-red-600 transition-colors"
              >
                {item}
              </button>
            ))}
            <button 
              onClick={() => scrollToSection('contact')}
              className="bg-slate-900 text-white px-6 py-2 rounded-full text-sm font-bold hover:bg-red-600 transition-all transform hover:-translate-y-0.5 active:translate-y-0"
            >
              Get a Quote
            </button>
          </div>

          {/* Mobile Toggle */}
          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X /> : <Menu />}
          </button>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden absolute top-full left-0 w-full bg-white border-t border-slate-100 shadow-xl py-6 flex flex-col items-center gap-6 animate-in slide-in-from-top duration-300">
            {['Services', 'Projects', 'Leadership', 'Contact'].map((item) => (
              <button 
                key={item}
                onClick={() => scrollToSection(item.toLowerCase())}
                className="text-lg font-bold"
              >
                {item}
              </button>
            ))}
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <header className="relative min-h-[90vh] flex items-center pt-20 overflow-hidden bg-slate-50">
        <div className="absolute right-0 top-0 w-1/2 h-full opacity-5 hidden lg:block">
           <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
             <path d="M0,0 L100,0 L100,100 Z" fill="currentColor" className="text-red-900" />
           </svg>
        </div>
        
        <div className="container mx-auto px-6 relative z-10 grid lg:grid-cols-2 gap-12 items-center">
          <div className="space-y-8">
            <div className="inline-flex items-center gap-2 px-4 py-2 bg-red-50 text-red-700 rounded-full text-sm font-bold uppercase tracking-widest border border-red-100">
              <Award className="w-4 h-4" /> 8+ Years of Design Excellence
            </div>
            <h1 className="text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.1]">
              Rooting <span className="text-red-600">Innovation</span> in Every Space.
            </h1>
            <p className="text-xl text-slate-600 max-w-xl leading-relaxed">
              Full-service architecture and engineering firm delivering integrated design, structural strength, and turnkey project execution for modern living.
            </p>
            <div className="flex flex-wrap gap-4">
              <button 
                onClick={() => scrollToSection('projects')}
                className="bg-slate-900 text-white px-8 py-4 rounded-lg font-bold flex items-center gap-2 hover:bg-red-600 transition-all group shadow-lg"
              >
                Explore Projects <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </button>
              <button 
                onClick={() => scrollToSection('services')}
                className="border-2 border-slate-200 px-8 py-4 rounded-lg font-bold hover:bg-white hover:border-red-600 hover:text-red-600 transition-all"
              >
                Our Services
              </button>
            </div>
          </div>
          <div className="relative group">
            <div className="absolute -inset-4 bg-red-500/10 rounded-2xl blur-2xl group-hover:bg-red-500/20 transition-all duration-500"></div>
            <img 
              src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=1200" 
              alt="Architecture Concept" 
              className="relative rounded-2xl shadow-2xl w-full h-[500px] object-cover"
            />
            <div className="absolute -bottom-6 -left-6 bg-white p-6 rounded-xl shadow-xl hidden sm:block border border-slate-100">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-red-50 rounded-lg text-red-600">
                  <ShieldCheck className="w-8 h-8" />
                </div>
                <div>
                  <p className="text-sm font-bold uppercase text-slate-500">Safety First</p>
                  <p className="text-lg font-bold">100% Secure Engineering</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Stats Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {[
              { label: "Active Practice", val: "8+", sub: "Years" },
              { label: "Design Experience", val: "2008", sub: "Since" },
              { label: "Project Variety", val: "50+", sub: "Delivered" },
              { label: "Client Satisfaction", val: "100%", sub: "Rating" }
            ].map((stat, i) => (
              <div key={i} className="text-center p-6 border-r border-slate-100 last:border-0">
                <p className="text-4xl font-black text-slate-900 mb-1">{stat.val}</p>
                <p className="text-xs font-bold uppercase tracking-widest text-slate-500">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-24 bg-slate-50">
        <div className="container mx-auto px-6">
          <div className="max-w-3xl mb-16">
            <h2 className="text-4xl font-bold mb-6">Expertise That Matters</h2>
            <p className="text-lg text-slate-600">
              Modern construction often fails due to poor coordination between design and execution. RootSpace solves this with a single-team model where architecture and engineering work in sync.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((s, i) => (
              <div key={i} className="bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all border border-slate-100 group">
                <div className="w-16 h-16 bg-slate-50 rounded-xl flex items-center justify-center text-slate-900 group-hover:bg-red-600 group-hover:text-white transition-all duration-300 mb-6">
                  {s.icon}
                </div>
                <h3 className="text-xl font-bold mb-3">{s.title}</h3>
                <p className="text-slate-600 mb-6 leading-relaxed">{s.desc}</p>
                <button className="text-red-600 font-bold text-sm flex items-center gap-1 group-hover:gap-2 transition-all">
                  LEARN MORE <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Projects Portfolio */}
      <section id="projects" className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-end gap-6 mb-16">
            <div>
              <h2 className="text-4xl font-bold mb-4">Our Portfolio</h2>
              <p className="text-slate-600 max-w-xl">
                Turning complex ideas into practical, buildable spaces with controlled cost.
              </p>
            </div>
            <div className="flex bg-slate-100 p-1 rounded-lg">
              {['All', 'Residential', 'Public', 'Commercial'].map((cat) => (
                <button
                  key={cat}
                  onClick={() => setActiveTab(cat)}
                  className={`px-6 py-2 rounded-md text-sm font-bold transition-all ${activeTab === cat ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-900'}`}
                >
                  {cat}
                </button>
              ))}
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredProjects.map((project) => (
              <div key={project.id} className="group cursor-pointer">
                <div className="relative overflow-hidden rounded-2xl mb-4 aspect-[4/3]">
                  <img 
                    src={project.image} 
                    alt={project.title} 
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-8">
                    <button className="bg-white text-slate-900 px-6 py-2 rounded-full font-bold text-sm flex items-center gap-2">
                      View Project <ExternalLink className="w-4 h-4" />
                    </button>
                  </div>
                  <div className="absolute top-4 left-4">
                    <span className="px-3 py-1 bg-white/90 backdrop-blur text-slate-900 text-[10px] font-bold uppercase tracking-widest rounded-full">
                      {project.category}
                    </span>
                  </div>
                </div>
                <h3 className="text-xl font-bold group-hover:text-red-600 transition-colors">{project.title}</h3>
                <p className="text-slate-500 text-sm mt-1">{project.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Leadership Section */}
      <section id="leadership" className="py-24 bg-slate-900 text-white overflow-hidden relative">
        <div className="absolute top-0 right-0 w-64 h-64 bg-red-600 opacity-20 blur-[100px] -mr-32 -mt-32"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-blue-600 opacity-20 blur-[100px] -ml-32 -mb-32"></div>
        
        <div className="container mx-auto px-6 relative z-10">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">Executive Leadership</h2>
            <p className="text-slate-400 max-w-2xl mx-auto">
              Our team consists of professionals across architecture, engineering, and project management dedicated to updated construction methods and technical strength.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
            {leaders.map((leader, i) => (
              <div key={i} className="bg-slate-800/50 backdrop-blur-sm p-10 rounded-3xl border border-slate-700 hover:border-red-500/50 transition-all group">
                <div className="flex flex-col md:flex-row gap-8 items-center md:items-start text-center md:text-left">
                  <div className="w-32 h-32 bg-slate-700 rounded-2xl flex items-center justify-center overflow-hidden shrink-0 border-2 border-slate-600 group-hover:border-red-500 transition-colors">
                    <Users className="w-16 h-16 text-slate-500" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold mb-1">{leader.name}</h3>
                    <p className="text-red-500 font-bold uppercase text-xs tracking-[0.2em] mb-4">{leader.title}</p>
                    <p className="text-slate-400 mb-6 leading-relaxed">
                      {leader.bio}
                    </p>
                    <div className="space-y-2">
                      <div className="flex items-center gap-3 text-sm text-slate-300">
                        <Mail className="w-4 h-4 text-red-500" /> {leader.email}
                      </div>
                      <div className="flex items-center gap-3 text-sm text-slate-300">
                        <ExternalLink className="w-4 h-4 text-red-500" /> {leader.web}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Social Pages Section */}
      <section className="py-20 bg-slate-50 border-y border-slate-200">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
            <div>
              <h2 className="text-2xl font-bold mb-2">Connect With RootSpace</h2>
              <p className="text-slate-500">Stay updated with our latest architectural masterpieces.</p>
            </div>
            <div className="flex flex-wrap gap-4">
              {socialLinks.map((social) => (
                <a 
                  key={social.name}
                  href={social.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-3 px-6 py-3 bg-white border border-slate-200 rounded-xl hover:border-red-600 hover:text-red-600 hover:shadow-md transition-all group"
                >
                  <span className="text-slate-400 group-hover:text-red-600 transition-colors">{social.icon}</span>
                  <span className="font-bold text-sm uppercase tracking-wider">{social.name}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-24 bg-white">
        <div className="container mx-auto px-6">
          <div className="bg-slate-50 rounded-[3rem] overflow-hidden shadow-sm">
            <div className="grid lg:grid-cols-2">
              <div className="p-12 lg:p-20 space-y-12 bg-slate-900 text-white">
                <div>
                  <h2 className="text-4xl font-bold mb-6">Let's Secure Your Next Development</h2>
                  <p className="text-slate-400 text-lg">
                    Whether it's a private home or large-scale infrastructure, we bring global design excellence to your local project.
                  </p>
                </div>

                <div className="space-y-6">
                  <div className="flex items-start gap-5">
                    <div className="w-12 h-12 bg-slate-800 rounded-xl flex items-center justify-center shrink-0">
                      <MapPin className="w-6 h-6 text-red-500" />
                    </div>
                    <div>
                      <p className="font-bold text-lg">Our Office</p>
                      <p className="text-slate-400">Expo Tower, 1st Floor, 28 Mymensingh Lane, Bangla Motor, Dhaka-1000</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-5">
                    <div className="w-12 h-12 bg-slate-800 rounded-xl flex items-center justify-center shrink-0">
                      <Phone className="w-6 h-6 text-red-500" />
                    </div>
                    <div>
                      <p className="font-bold text-lg">Contact</p>
                      <p className="text-slate-400">+880 1869-523030 / +880 1712-599550</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-5">
                    <div className="w-12 h-12 bg-slate-800 rounded-xl flex items-center justify-center shrink-0">
                      <Mail className="w-6 h-6 text-red-500" />
                    </div>
                    <div>
                      <p className="font-bold text-lg">Email</p>
                      <p className="text-slate-400">rootspacebd@gmail.com</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="p-12 lg:p-20">
                <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-xs font-bold uppercase text-slate-500">Full Name</label>
                      <input type="text" className="w-full px-6 py-4 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-red-500 outline-none transition-all" placeholder="John Doe" />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs font-bold uppercase text-slate-500">Email Address</label>
                      <input type="email" className="w-full px-6 py-4 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-red-500 outline-none transition-all" placeholder="john@example.com" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs font-bold uppercase text-slate-500">Project Type</label>
                    <select className="w-full px-6 py-4 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-red-500 outline-none transition-all">
                      <option>Architectural Design</option>
                      <option>Interior Design</option>
                      <option>Structural Engineering</option>
                      <option>Full Turnkey Project</option>
                    </select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs font-bold uppercase text-slate-500">Message</label>
                    <textarea rows="4" className="w-full px-6 py-4 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-red-500 outline-none transition-all" placeholder="Tell us about your project..."></textarea>
                  </div>
                  <button className="w-full py-5 bg-red-600 text-white font-bold rounded-xl shadow-lg shadow-red-600/20 hover:bg-red-700 transition-all">
                    Send Inquiry
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-50 pt-20 pb-10 border-t border-slate-100">
        <div className="container mx-auto px-6">
          <div className="grid md:grid-cols-4 gap-12 mb-16">
            <div className="col-span-2">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 flex items-center justify-center overflow-hidden">
                   <img src="root-logo1.png" alt="RootSpace Logo" className="w-full h-full object-contain" />
                </div>
                <div>
                  <h2 className="font-black text-xl tracking-tight leading-none">ROOT SPACE</h2>
                  <p className="text-[10px] tracking-[0.2em] font-medium uppercase text-slate-500">Architects & Engineers</p>
                </div>
              </div>
              <p className="text-slate-500 max-w-sm mb-8 leading-relaxed">
                Building the foundations of tomorrow with precision engineering and visionary architecture. We transform complex ideas into buildable realities.
              </p>
              <div className="flex gap-4">
                {socialLinks.map((social) => (
                  <a key={social.name} href={social.url} target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white border border-slate-200 rounded-lg flex items-center justify-center text-slate-400 hover:text-red-600 hover:border-red-600 transition-all">
                    {social.icon}
                  </a>
                ))}
              </div>
            </div>
            
            <div>
              <h4 className="font-bold mb-6">Quick Links</h4>
              <ul className="space-y-4 text-slate-500 text-sm">
                <li><button onClick={() => scrollToSection('services')} className="hover:text-red-600 transition-colors">Services</button></li>
                <li><button onClick={() => scrollToSection('projects')} className="hover:text-red-600 transition-colors">Portfolio</button></li>
                <li><button onClick={() => scrollToSection('leadership')} className="hover:text-red-600 transition-colors">Leadership</button></li>
                <li><button onClick={() => scrollToSection('contact')} className="hover:text-red-600 transition-colors">Contact</button></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-6">Sectors</h4>
              <ul className="space-y-4 text-slate-500 text-sm">
                <li className="flex items-center gap-2"><div className="w-1 h-1 bg-red-500 rounded-full"></div> Residential</li>
                <li className="flex items-center gap-2"><div className="w-1 h-1 bg-red-500 rounded-full"></div> Commercial</li>
                <li className="flex items-center gap-2"><div className="w-1 h-1 bg-red-500 rounded-full"></div> Industrial</li>
                <li className="flex items-center gap-2"><div className="w-1 h-1 bg-red-500 rounded-full"></div> Institutional</li>
              </ul>
            </div>
          </div>

          <div className="pt-10 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-6 text-center">
            <p className="text-slate-500 text-sm">© 2026 RootSpace Architects & Engineers. All rights reserved.</p>
            <div className="flex gap-6 text-slate-400">
               <span className="text-sm cursor-pointer hover:text-slate-900 transition-colors">Privacy Policy</span>
               <span className="text-sm cursor-pointer hover:text-slate-900 transition-colors">Terms of Service</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;