import React from "react";
import { motion } from "framer-motion";
import Link from "next/link";

export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Navbar */}
      <nav className="bg-white shadow-md p-4 flex justify-between items-center">
        <h1 className="text-2xl font-bold">Bytemetrics</h1>
        <div className="space-x-4">
          <Link href="#about" className="hover:text-blue-600">About</Link>
          <Link href="#services" className="hover:text-blue-600">Services</Link>
          <Link href="#projects" className="hover:text-blue-600">Projects</Link>
          <Link href="#AI Models" className="hover:text-blue-600">AI Models</Link>
          <Link href="#contact" className="hover:text-blue-600">Contact</Link>
        </div>
      </nav>
      
      {/* Hero Section */}
      <section className="text-center py-20 bg-blue-500 text-white">
        <motion.h2
          className="text-4xl font-bold"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          Welcome to Bytemetrics
        </motion.h2>
        <p className="mt-4 text-lg">Innovative tech solutions for your business.</p>
      </section>
      
      {/* About Section */}
      <section id="about" className="p-10 bg-white">
        <h2 className="text-3xl font-semibold">About Us</h2>
        <p className="mt-2 text-gray-600">We provide cutting-edge solutions to help your business grow.</p>
      </section>

      {/* Services Section */}
      <section id="services" className="p-10 bg-gray-100">
        <h2 className="text-3xl font-semibold">Our Services</h2>
        <ul className="mt-4 text-gray-600">
          <li>✅ Cloud Data </li>
          <li>✅ Data Analytics</li>
          <li>✅ AI & Machine Learning</li>
        </ul>
      </section>

      {/* Projects Section */}
      <section id="projects" className="p-10 bg-white">
        <h2 className="text-3xl font-semibold">Our Projects</h2>
        <p className="mt-2 text-gray-600">Coming soon...</p>
      </section>

      {/* Contact Section */}
      <section id="contact" className="p-10 bg-gray-100">
        <h2 className="text-3xl font-semibold">Contact Us</h2>
        <p className="mt-2 text-gray-600">Reach out to us for more information.</p>
      </section>

      {/* AI Models Section */}
      <section id="AI Models" className="p-10 bg-gray-100">
        <h2 className="text-3xl font-semibold">AI Models</h2>
        <p className="mt-2 text-gray-600">Reach out to us for more information.</p>
      </section>

      {/* Footer */}
      <footer className="text-center p-4 bg-white shadow-md">
        <p>© 2025 Bytemetrics. All rights reserved.</p>
      </footer>
    </div>
  );
}