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

export default function FAATechWebsite() {
  return (
    <div className="min-h-screen bg-white text-gray-800">
      {/* Header */}
      <header className="flex justify-between items-center p-6 shadow-md bg-red-600 text-white">
        <h1 className="text-2xl font-bold">FAA Tech Solutions</h1>
        <nav className="space-x-6">
          <a href="#services" className="hover:underline">Services</a>
          <a href="#clients" className="hover:underline">Clients</a>
          <a href="#contact" className="hover:underline">Contact</a>
        </nav>
      </header>

      {/* Hero Section */}
      <section className="text-center py-20 px-6 bg-red-50">
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-4xl font-bold mb-4 text-red-600"
        >
          Empowering Businesses with Smart Tech Solutions
        </motion.h2>
        <p className="text-lg mb-6">
          We provide high-quality digital and technical services to help companies grow and succeed.
        </p>
        <Button className="bg-red-600 text-white hover:bg-red-700">Get Started</Button>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 px-6">
        <h3 className="text-3xl font-semibold text-center mb-10 text-red-600">Our Services</h3>
        <div className="grid md:grid-cols-3 gap-6">
          {[
            "Website Development",
            "Business Automation",
            "IT Support & Consulting",
            "Digital Marketing",
            "Custom Software Solutions",
            "E-commerce Solutions",
          ].map((service, index) => (
            <Card key={index} className="rounded-2xl shadow-md border border-red-100">
              <CardContent className="p-6 text-center">
                <h4 className="text-xl font-semibold text-red-600">{service}</h4>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Clients Section */}
      <section id="clients" className="py-16 px-6 bg-red-50">
        <h3 className="text-3xl font-semibold text-center mb-10 text-red-600">Our Clients</h3>
        <div className="text-center space-y-4">
          <p>FastLogoWeb.com</p>
          <p>Super Motors Japan</p>
          <p>And many new growing businesses</p>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 px-6">
        <h3 className="text-3xl font-semibold text-center mb-10 text-red-600">Contact Us</h3>
        <div className="max-w-xl mx-auto space-y-4">
          <input