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

export default function ProcorWebsite() {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-800">
      {/* Header */}
      <header className="bg-white shadow-md sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-blue-900">PROCOR</h1>
          <nav className="hidden md:flex gap-6 text-sm">
            <a href="#about" className="hover:text-blue-700">À propos</a>
            <a href="#services" className="hover:text-blue-700">Services</a>
            <a href="#contact" className="hover:text-blue-700">Contact</a>
          </nav>
          <Menu className="md:hidden" />
        </div>
      </header>

      {/* Hero Section */}
      <section className="bg-blue-900 text-white py-24">
        <div className="container mx-auto px-4 text-center">
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-4xl font-bold mb-4"
          >
            Solutions aériennes pour la défense et la formation
          </motion.h2>
          <p className="mb-6 max-w-xl mx-auto">
            PROCOR fournit des services spécialisés de soutien aérien aux forces armées, avec professionnalisme et efficacité.
          </p>
          <Button className="bg-white text-blue-900 hover:bg-gray-100">Nous contacter</Button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-gray-100">
        <div className="container mx-auto px-4">
          <h3 className="text-3xl font-semibold mb-8 text-center">Qui sommes-nous ?</h3>
          <p className="max-w-3xl mx-auto text-center text-gray-600">
            PROCOR est une société française spécialisée dans le soutien aérien tactique. Forts de plusieurs années d'expérience, nous intervenons pour l'entraînement des forces armées dans des conditions réelles et maîtrisées.
          </p>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20">
        <div className="container mx-auto px-4">
          <h3 className="text-3xl font-semibold mb-10 text-center">Nos Services</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card>
              <CardContent className="p-6">
                <h4 className="font-bold mb-2">Soutien Aérien Tactique</h4>
                <p className="text-sm text-gray-600">
                  Simulations de combat aérien, escorte, interférences radar, et plus encore.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-6">
                <h4 className="font-bold mb-2">Formation des Forces</h4>
                <p className="text-sm text-gray-600">
                  Programmes personnalisés pour l'entraînement opérationnel des armées.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-6">
                <h4 className="font-bold mb-2">Logistique & Maintenance</h4>
                <p className="text-sm text-gray-600">
                  Gestion de la flotte aérienne, maintenance technique et soutien sur site.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="bg-blue-900 text-white py-20">
        <div className="container mx-auto px-4 text-center">
          <h3 className="text-3xl font-semibold mb-6">Contactez-nous</h3>
          <div className="flex flex-col items-center gap-4">
            <p className="flex items-center gap-2">
              <Mail /> contact@procor.fr
            </p>
            <p className="flex items-center gap-2">
              <Phone /> +33 1 23 45 67 89
            </p>
            <Button className="bg-white text-blue-900 mt-4 hover:bg-gray-200">Envoyer un message</Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-100 py-6 text-center text-sm text-gray-500">
        © {new Date().getFullYear()} PROCOR. Tous droits réservés.
      </footer>
    </div>
  );
}