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

export default function HomePage() {
  return (
    <div className="min-h-screen bg-white text-gray-800">
      {/* Header */}
      <header className="p-6 flex justify-between items-center shadow-md">
        <h1 className="text-2xl font-bold text-blue-600">GMF Medical Systems GmbH</h1>
        <nav className="space-x-4">
          <a href="#about" className="hover:text-blue-600">About</a>
          <a href="#services" className="hover:text-blue-600">Services</a>
          <a href="#products" className="hover:text-blue-600">Products</a>
          <a href="#contact" className="hover:text-blue-600">Contact</a>
        </nav>
      </header>

      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center text-center p-12 bg-gradient-to-r from-blue-50 to-blue-100">
        <motion.h2 className="text-4xl font-semibold mb-4" initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}>
          Smart Solutions for Medical Devices Import & Export
        </motion.h2>
        <p className="max-w-xl text-gray-600 mb-6">
          We simplify global medical trade with AI-powered logistics, compliance, and sourcing solutions.
        </p>
        <Button>Contact Us</Button>
      </section>

      {/* About Section */}
      <section id="about" className="p-12 grid grid-cols-1 md:grid-cols-2 gap-8">
        <div>
          <h3 className="text-2xl font-bold mb-4">About Us</h3>
          <p className="text-gray-700">
            GMF Medical Systems GmbH specializes in the import and export of certified medical devices worldwide. Our AI-driven systems ensure compliance, cost-efficiency, and on-time delivery.
          </p>
        </div>
        <img src="https://images.unsplash.com/photo-1588776814546-ec7d2c88c9db" alt="Medical Devices" className="rounded-2xl shadow-md" />
      </section>

      {/* Services Section */}
      <section id="services" className="p-12 bg-gray-50">
        <h3 className="text-2xl font-bold mb-8 text-center">Our Services</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardContent className="p-6">
              <h4 className="font-semibold mb-2">Import & Export</h4>
              <p className="text-gray-600">Global sourcing and distribution of certified medical devices.</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <h4 className="font-semibold mb-2">Regulatory Assistance</h4>
              <p className="text-gray-600">Navigating international compliance and certifications with ease.</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <h4 className="font-semibold mb-2">AI-Driven Logistics</h4>
              <p className="text-gray-600">Predictive delivery, smart tracking, and efficient shipping solutions.</p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Products Section */}
      <section id="products" className="p-12">
        <h3 className="text-2xl font-bold mb-8 text-center">Our Products</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardContent className="p-6">
              <h4 className="font-semibold mb-2">Surgical Instruments</h4>
              <p className="text-gray-600">High-quality instruments for surgical procedures.</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <h4 className="font-semibold mb-2">Diagnostic Devices</h4>
              <p className="text-gray-600">Certified devices for accurate diagnostics.</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6">
              <h4 className="font-semibold mb-2">Hospital Equipment</h4>
              <p className="text-gray-600">Reliable hospital equipment sourced globally.</p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="p-12 text-center">
        <h3 className="text-2xl font-bold mb-4">Contact Us</h3>
        <p className="mb-2 flex justify-center items-center gap-2"><Mail className="w-5" /> info@gmfmedsystems.com</p>
        <p className="flex justify-center items-center gap-2"><Phone className="w-5" /> +49 (123) 456-7890</p>

        <form className="max-w-xl mx-auto mt-8 grid gap-4 text-left">
          <input type="text" placeholder="Your Name" className="border p-3 rounded-xl" required />
          <input type="email" placeholder="Your Email" className="border p-3 rounded-xl" required />
          <textarea rows="4" placeholder="Your Message" className="border p-3 rounded-xl" required></textarea>
          <Button type="submit">Send Message</Button>
        </form>
      </section>

      {/* Footer */}
      <footer className="text-center p-4 text-gray-500 border-t">© 2025 GMF Medical Systems GmbH. All rights reserved.</footer>
    </div>
  );
}