import React, { useState, useEffect } from 'react';
import { ChevronDown, TrendingUp, Users, Briefcase, Mail, Phone, MapPin } from 'lucide-react';

const AxisHorizonWebsite = () => {
  const [scrollY, setScrollY] = useState(0);
  const [activeSection, setActiveSection] = useState('home');
  const [showConsultation, setShowConsultation] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    company: '',
    phone: '',
    service: '',
    message: '',
    preferredDate: '',
    preferredTime: ''
  });

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

  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Form submission logic would go here
    alert('Thank you for your consultation request! We will contact you within 24 hours.');
    setShowConsultation(false);
    setFormData({
      name: '',
      email: '',
      company: '',
      phone: '',
      service: '',
      message: '',
      preferredDate: '',
      preferredTime: ''
    });
  };

  const scrollToSection = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
    setActiveSection(id);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 text-slate-800">
      {/* Consultation Modal */}
      {showConsultation && (
        <div 
          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4 animate-fade-in overflow-y-auto"
          onClick={() => setShowConsultation(false)}
        >
          <div 
            className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full my-8"
            style={{ animation: 'slideUp 0.3s ease-out' }}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="sticky top-0 bg-gradient-to-r from-blue-900 to-red-600 text-white p-4 md:p-6 rounded-t-2xl flex justify-between items-center z-10">
              <div>
                <h2 className="text-2xl md:text-3xl font-bold">Schedule a Consultation</h2>
                <p className="text-blue-100 mt-1 text-sm md:text-base">Let's discuss how we can help expand your horizons</p>
              </div>
              <button 
                onClick={() => setShowConsultation(false)}
                className="text-white hover:bg-white/20 rounded-full p-2 transition-all duration-300 flex-shrink-0"
                aria-label="Close"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <form onSubmit={handleSubmit} className="p-4 md:p-8 space-y-4 md:space-y-6">
              <div className="grid md:grid-cols-2 gap-4 md:gap-6">
                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-2">
                    Full Name *
                  </label>
                  <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300"
                    placeholder="John Doe"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-2">
                    Email Address *
                  </label>
                  <input
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300"
                    placeholder="john@company.com"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-2">
                    Company Name
                  </label>
                  <input
                    type="text"
                    name="company"
                    value={formData.company}
                    onChange={handleInputChange}
                    className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300"
                    placeholder="Your Company Ltd."
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-2">
                    Phone Number
                  </label>
                  <input
                    type="tel"
                    name="phone"
                    value={formData.phone}
                    onChange={handleInputChange}
                    className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300"
                    placeholder="+44 20 XXXX XXXX"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-semibold text-slate-700 mb-2">
                  Service Interest *
                </label>
                <select
                  name="service"
                  value={formData.service}
                  onChange={handleInputChange}
                  required
                  className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300 bg-white"
                >
                  <option value="">Select a service</option>
                  <option value="financial">Financial Management</option>
                  <option value="consultancy">Management Consultancy</option>
                  <option value="professional">Professional Services</option>
                  <option value="multiple">Multiple Services</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div className="grid md:grid-cols-2 gap-4 md:gap-6">
                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-2">
                    Preferred Date
                  </label>
                  <input
                    type="date"
                    name="preferredDate"
                    value={formData.preferredDate}
                    onChange={handleInputChange}
                    className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-slate-700 mb-2">
                    Preferred Time
                  </label>
                  <select
                    name="preferredTime"
                    value={formData.preferredTime}
                    onChange={handleInputChange}
                    className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300 bg-white"
                  >
                    <option value="">Select a time</option>
                    <option value="morning">Morning (9am - 12pm)</option>
                    <option value="afternoon">Afternoon (12pm - 5pm)</option>
                    <option value="evening">Evening (5pm - 7pm)</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-sm font-semibold text-slate-700 mb-2">
                  Message / Additional Details
                </label>
                <textarea
                  name="message"
                  value={formData.message}
                  onChange={handleInputChange}
                  rows="3"
                  className="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-blue-900 focus:ring-2 focus:ring-blue-900/20 outline-none transition-all duration-300 resize-none"
                  placeholder="Tell us about your needs and goals..."
                ></textarea>
              </div>

              <div className="bg-gradient-to-br from-slate-50 to-blue-50 p-4 rounded-lg">
                <h3 className="font-semibold text-slate-800 mb-2 text-sm md:text-base">What happens next?</h3>
                <ul className="space-y-1.5 text-xs md:text-sm text-slate-600">
                  <li className="flex items-start">
                    <span className="text-blue-900 mr-2">•</span>
                    <span>We'll review your request within 24 hours</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-red-600 mr-2">•</span>
                    <span>A dedicated consultant will contact you to confirm details</span>
                  </li>
                  <li className="flex items-start">
                    <span className="text-blue-700 mr-2">•</span>
                    <span>We'll schedule a comprehensive consultation at your convenience</span>
                  </li>
                </ul>
              </div>

              <div className="flex flex-col sm:flex-row gap-3 md:gap-4 pt-2">
                <button
                  type="button"
                  onClick={() => setShowConsultation(false)}
                  className="flex-1 px-6 py-3 border-2 border-slate-300 text-slate-700 rounded-full font-semibold hover:bg-slate-50 transition-all duration-300"
                >
                  Back to Website
                </button>
                <button
                  type="submit"
                  className="flex-1 bg-gradient-to-r from-blue-900 to-red-600 text-white px-6 py-3 rounded-full font-semibold hover:shadow-2xl transition-all duration-300 transform hover:scale-105"
                >
                  Submit Request
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Navigation */}
      <nav className="fixed top-0 w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <svg width="40" height="40" viewBox="0 0 530 513" xmlns="http://www.w3.org/2000/svg">
                <g transform="translate(0,513) scale(0.1,-0.1)">
                  <path d="M2470 4433 c-85 -153 -190 -343 -235 -423 -45 -80 -162 -289 -260 -465 -98 -176 -270 -481 -382 -678 l-204 -358 67 -117 c37 -64 102 -175 144 -247 42 -71 116 -199 165 -283 l88 -153 96 173 c94 168 412 734 555 989 73 130 111 188 118 179 3 -3 51 -88 108 -190 57 -102 219 -387 360 -635 142 -247 264 -463 272 -479 l15 -29 16 24 c8 13 55 94 104 179 84 144 135 234 292 514 34 61 60 115 57 122 -5 13 -88 161 -446 794 -228 404 -290 514 -365 645 -161 283 -376 666 -386 689 -7 14 -15 26 -19 26 -4 0 -76 -125 -160 -277z" fill="#1e3a5f"/>
                  <path d="M3892 2388 c-11 -18 -52 -89 -92 -158 -184 -316 -1153 -1936 -1192 -1992 -10 -14 -18 -29 -18 -32 0 -3 580 -6 1290 -6 710 0 1290 2 1290 5 0 8 -109 201 -447 795 -168 294 -319 560 -336 590 -16 30 -85 152 -152 270 -68 118 -166 293 -220 388 -53 94 -98 172 -100 172 -2 0 -12 -15 -23 -32z" fill="#dc2626"/>
                  <path d="M1308 2362 c-9 -15 -45 -79 -80 -142 -36 -63 -114 -203 -175 -310 -242 -428 -509 -902 -576 -1020 -80 -143 -142 -253 -281 -498 -54 -96 -96 -175 -94 -177 2 -2 78 37 168 86 91 49 336 175 545 278 931 463 1301 584 1925 631 80 6 177 8 215 6 64 -5 62 -4 -35 13 -137 25 -420 51 -542 51 -154 0 -480 -34 -828 -85 -34 -5 -34 -5 -15 11 53 43 236 110 390 143 192 42 348 55 620 56 216 0 288 -4 428 -23 93 -13 174 -25 181 -28 12 -5 74 83 64 90 -6 5 -210 35 -323 48 -161 18 -580 15 -744 -6 l-134 -16 -34 26 c-84 64 -278 317 -503 656 l-157 236 -15 -26z" fill="#2563eb"/>
                  <path d="M2805 1033 c-93 -11 -285 -49 -385 -74 -280 -72 -950 -289 -1297 -420 -278 -105 -746 -304 -777 -331 -6 -4 371 -8 837 -8 l847 0 67 105 c273 425 401 549 713 691 97 45 96 50 -5 37z" fill="#1e3a5f"/>
                </g>
              </svg>
              <div className="text-2xl font-bold text-slate-800">
                Axis <span className="text-red-600">Horizon</span>
              </div>
            </div>
            <div className="hidden md:flex space-x-8">
              {['home', 'about', 'services', 'contact'].map((item) => (
                <button
                  key={item}
                  onClick={() => scrollToSection(item)}
                  className={`capitalize transition-all duration-300 hover:text-red-600 ${
                    activeSection === item ? 'text-red-600 font-semibold' : 'text-slate-600'
                  }`}
                >
                  {item}
                </button>
              ))}
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="min-h-screen flex items-center justify-center relative overflow-hidden pt-16">
        <div 
          className="absolute inset-0 opacity-5"
          style={{
            backgroundImage: `linear-gradient(30deg, #1e3a5f 12%, transparent 12.5%, transparent 87%, #1e3a5f 87.5%, #1e3a5f), 
                            linear-gradient(150deg, #1e3a5f 12%, transparent 12.5%, transparent 87%, #1e3a5f 87.5%, #1e3a5f)`,
            backgroundSize: '80px 140px',
            transform: `translateY(${scrollY * 0.3}px)`
          }}
        />
        <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
          <h1 
            className="text-6xl md:text-7xl font-bold mb-6 animate-fade-in"
            style={{ animation: 'fadeInUp 1s ease-out' }}
          >
            Bridging <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-900 to-red-600">Borders</span>
          </h1>
          <h2 
            className="text-5xl md:text-6xl font-bold mb-8 animate-fade-in"
            style={{ animation: 'fadeInUp 1s ease-out 0.2s backwards' }}
          >
            Expanding <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-blue-900">Horizons</span>
          </h2>
          <p 
            className="text-xl text-slate-600 mb-12 max-w-2xl mx-auto"
            style={{ animation: 'fadeInUp 1s ease-out 0.4s backwards' }}
          >
            Expert solutions in financial management, consultancy, and professional services
          </p>
          <button 
            onClick={() => scrollToSection('about')}
            className="bg-gradient-to-r from-blue-900 to-blue-700 text-white px-8 py-4 rounded-full hover:shadow-2xl transition-all duration-300 transform hover:scale-105"
            style={{ animation: 'fadeInUp 1s ease-out 0.6s backwards' }}
          >
            Discover More
          </button>
          <button 
            onClick={() => setShowConsultation(true)}
            className="ml-4 bg-gradient-to-r from-red-600 to-red-500 text-white px-8 py-4 rounded-full hover:shadow-2xl transition-all duration-300 transform hover:scale-105"
            style={{ animation: 'fadeInUp 1s ease-out 0.7s backwards' }}
          >
            Get Started
          </button>
        </div>
        <div 
          className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"
          onClick={() => scrollToSection('about')}
        >
          <ChevronDown className="w-8 h-8 text-slate-400 cursor-pointer" />
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-24 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <h2 className="text-5xl font-bold text-center mb-16 text-slate-800">
            About <span className="text-red-600">Us</span>
          </h2>
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <p className="text-lg text-slate-600 leading-relaxed">
                <span className="font-semibold text-slate-800">Axis Horizon</span> is a dynamic and forward-thinking professional services firm dedicated to delivering expert solutions across financial management, management consultancy, and specialized professional services.
              </p>
              <p className="text-lg text-slate-600 leading-relaxed">
                Our mission is to help businesses and individuals achieve sustainable growth, operational efficiency, and strategic success through innovative, client-centric solutions.
              </p>
              <p className="text-lg text-slate-600 leading-relaxed">
                We combine knowledge, experience, and a practical approach to deliver measurable results and long-term value across diverse sectors.
              </p>
            </div>
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-br from-blue-900 to-red-600 rounded-2xl transform rotate-3 opacity-10"></div>
              <div className="relative bg-gradient-to-br from-slate-50 to-blue-50 p-8 rounded-2xl shadow-xl">
                <div className="space-y-6">
                  <div className="flex items-start space-x-4">
                    <div className="bg-blue-900 p-3 rounded-lg">
                      <TrendingUp className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg text-slate-800">Strategic Growth</h3>
                      <p className="text-slate-600">Sustainable solutions for long-term success</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-4">
                    <div className="bg-red-600 p-3 rounded-lg">
                      <Users className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg text-slate-800">Client-Centric</h3>
                      <p className="text-slate-600">Tailored approaches for unique objectives</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-4">
                    <div className="bg-blue-700 p-3 rounded-lg">
                      <Briefcase className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg text-slate-800">Expert Solutions</h3>
                      <p className="text-slate-600">Comprehensive professional services</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-24 bg-gradient-to-br from-slate-50 to-blue-50">
        <div className="max-w-6xl mx-auto px-6">
          <h2 className="text-5xl font-bold text-center mb-16 text-slate-800">
            Our <span className="text-red-600">Services</span>
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: 'Financial Management',
                description: 'Tailored financial services providing insightful analysis and strategic advice to optimize performance and ensure sound fiscal decisions.',
                color: 'from-blue-900 to-blue-700'
              },
              {
                title: 'Management Consultancy',
                description: 'Supporting organizations across diverse sectors to navigate complex challenges, improve processes, and implement best practices.',
                color: 'from-red-600 to-red-500'
              },
              {
                title: 'Professional Services',
                description: 'Expertise spanning professional, scientific, and technical activities with innovative solutions aligned to your objectives.',
                color: 'from-blue-700 to-blue-600'
              }
            ].map((service, index) => (
              <div 
                key={index}
                className="bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group"
              >
                <div className={`w-16 h-16 bg-gradient-to-br ${service.color} rounded-xl mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-300`}>
                  <div className="w-8 h-8 bg-white/20 rounded-lg"></div>
                </div>
                <h3 className="text-2xl font-bold mb-4 text-slate-800">{service.title}</h3>
                <p className="text-slate-600 leading-relaxed">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6">
          <h2 className="text-5xl font-bold text-center mb-16 text-slate-800">
            Get in <span className="text-red-600">Touch</span>
          </h2>
          <div className="bg-gradient-to-br from-slate-50 to-blue-50 p-12 rounded-2xl shadow-xl">
            <div className="grid md:grid-cols-2 gap-8">
              <div className="space-y-6">
                <div className="flex items-center space-x-4">
                  <div className="bg-blue-900 p-3 rounded-lg">
                    <Mail className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-sm text-slate-500">Email</p>
                    <p className="font-semibold text-slate-800">contact@axishorizon.com</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="bg-red-600 p-3 rounded-lg">
                    <Phone className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-sm text-slate-500">Phone</p>
                    <p className="font-semibold text-slate-800">+44 (0) 20 XXXX XXXX</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <div className="bg-blue-700 p-3 rounded-lg">
                    <MapPin className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-sm text-slate-500">Location</p>
                    <p className="font-semibold text-slate-800">United Kingdom</p>
                  </div>
                </div>
              </div>
              <div className="flex items-center justify-center">
                <div className="text-center">
                  <p className="text-lg text-slate-600 mb-6">Ready to expand your horizons?</p>
                  <button 
                    onClick={() => setShowConsultation(true)}
                    className="bg-gradient-to-r from-blue-900 to-red-600 text-white px-8 py-4 rounded-full hover:shadow-2xl transition-all duration-300 transform hover:scale-105"
                  >
                    Schedule a Consultation
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-white py-12">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <div className="flex items-center justify-center space-x-3 mb-4">
            <svg width="50" height="50" viewBox="0 0 530 513" xmlns="http://www.w3.org/2000/svg">
              <g transform="translate(0,513) scale(0.1,-0.1)">
                <path d="M2470 4433 c-85 -153 -190 -343 -235 -423 -45 -80 -162 -289 -260 -465 -98 -176 -270 -481 -382 -678 l-204 -358 67 -117 c37 -64 102 -175 144 -247 42 -71 116 -199 165 -283 l88 -153 96 173 c94 168 412 734 555 989 73 130 111 188 118 179 3 -3 51 -88 108 -190 57 -102 219 -387 360 -635 142 -247 264 -463 272 -479 l15 -29 16 24 c8 13 55 94 104 179 84 144 135 234 292 514 34 61 60 115 57 122 -5 13 -88 161 -446 794 -228 404 -290 514 -365 645 -161 283 -376 666 -386 689 -7 14 -15 26 -19 26 -4 0 -76 -125 -160 -277z" fill="#3b82f6"/>
                <path d="M3892 2388 c-11 -18 -52 -89 -92 -158 -184 -316 -1153 -1936 -1192 -1992 -10 -14 -18 -29 -18 -32 0 -3 580 -6 1290 -6 710 0 1290 2 1290 5 0 8 -109 201 -447 795 -168 294 -319 560 -336 590 -16 30 -85 152 -152 270 -68 118 -166 293 -220 388 -53 94 -98 172 -100 172 -2 0 -12 -15 -23 -32z" fill="#ef4444"/>
                <path d="M1308 2362 c-9 -15 -45 -79 -80 -142 -36 -63 -114 -203 -175 -310 -242 -428 -509 -902 -576 -1020 -80 -143 -142 -253 -281 -498 -54 -96 -96 -175 -94 -177 2 -2 78 37 168 86 91 49 336 175 545 278 931 463 1301 584 1925 631 80 6 177 8 215 6 64 -5 62 -4 -35 13 -137 25 -420 51 -542 51 -154 0 -480 -34 -828 -85 -34 -5 -34 -5 -15 11 53 43 236 110 390 143 192 42 348 55 620 56 216 0 288 -4 428 -23 93 -13 174 -25 181 -28 12 -5 74 83 64 90 -6 5 -210 35 -323 48 -161 18 -580 15 -744 -6 l-134 -16 -34 26 c-84 64 -278 317 -503 656 l-157 236 -15 -26z" fill="#60a5fa"/>
                <path d="M2805 1033 c-93 -11 -285 -49 -385 -74 -280 -72 -950 -289 -1297 -420 -278 -105 -746 -304 -777 -331 -6 -4 371 -8 837 -8 l847 0 67 105 c273 425 401 549 713 691 97 45 96 50 -5 37z" fill="#3b82f6"/>
              </g>
            </svg>
            <div className="text-3xl font-bold">
              Axis <span className="text-red-500">Horizon</span>
            </div>
          </div>
          <p className="text-slate-400 mb-6">Bridging Borders, Expanding Horizons</p>
          <p className="text-sm text-slate-500">© 2024 Axis Horizon. All rights reserved.</p>
        </div>
      </footer>

      <style>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes slideUp {
          from {
            opacity: 0;
            transform: translateY(50px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .animate-fade-in {
          animation: fadeInUp 0.3s ease-out;
        }
      `}</style>
    </div>
  );
};

export default AxisHorizonWebsite;