import React, { useState } from 'react';
import { Menu, X, Mail, Phone, MapPin, ArrowRight, Users, Target, Zap, Shield, ChevronDown } from 'lucide-react';

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    company: '',
    message: ''
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission here
    console.log('Form submitted:', formData);
    alert('Thank you for your message! We\'ll get back to you soon.');
    setFormData({ name: '', email: '', company: '', message: '' });
  };

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    element?.scrollIntoView({ behavior: 'smooth' });
    setIsMenuOpen(false);
  };

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="bg-white shadow-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex-shrink-0">
              <div className="flex items-center space-x-3">
                <img 
                  src="/sauti4brands1.png" 
                  alt="Sauti4Brands Logo" 
                  className="h-10 w-auto"
                />
                <h1 className="text-2xl font-bold text-blue-600">Sauti4Brands</h1>
                <h1 className="text-2xl font-bold text-orange-600">Sauti4Brands</h1>
              </div>
            </div>

            {/* Desktop Navigation */}
            <div className="hidden md:block">
              <div className="ml-10 flex items-baseline space-x-8">
                <button onClick={() => scrollToSection('home')} className="text-gray-700 hover:text-blue-600 transition-colors duration-200">Home</button>
                <button onClick={() => scrollToSection('home')} className="text-gray-700 hover:text-orange-600 transition-colors duration-200">Home</button>
                <button onClick={() => scrollToSection('about')} className="text-gray-700 hover:text-blue-600 transition-colors duration-200">About</button>
                <button onClick={() => scrollToSection('about')} className="text-gray-700 hover:text-orange-600 transition-colors duration-200">About</button>
                <button onClick={() => scrollToSection('services')} className="text-gray-700 hover:text-blue-600 transition-colors duration-200">Services</button>
                <button onClick={() => scrollToSection('services')} className="text-gray-700 hover:text-orange-600 transition-colors duration-200">Services</button>
                <button onClick={() => scrollToSection('contact')} className="text-gray-700 hover:text-blue-600 transition-colors duration-200">Contact</button>
                <button onClick={() => scrollToSection('contact')} className="text-gray-700 hover:text-orange-600 transition-colors duration-200">Contact</button>
              </div>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-700 hover:text-orange-600 transition-colors duration-200"
              >
                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t">
            <div className="px-2 pt-2 pb-3 space-y-1">
              <button onClick={() => scrollToSection('home')} className="block w-full text-left px-3 py-2 text-gray-700 hover:text-orange-600 transition-colors duration-200">Home</button>
              <button onClick={() => scrollToSection('about')} className="block w-full text-left px-3 py-2 text-gray-700 hover:text-blue-600 transition-colors duration-200">About</button>
              <button onClick={() => scrollToSection('about')} className="block w-full text-left px-3 py-2 text-gray-700 hover:text-orange-600 transition-colors duration-200">About</button>
              <button onClick={() => scrollToSection('services')} className="block w-full text-left px-3 py-2 text-gray-700 hover:text-blue-600 transition-colors duration-200">Services</button>
              <button onClick={() => scrollToSection('services')} className="block w-full text-left px-3 py-2 text-gray-700 hover:text-orange-600 transition-colors duration-200">Services</button>
              <button onClick={() => scrollToSection('contact')} className="block w-full text-left px-3 py-2 text-gray-700 hover:text-blue-600 transition-colors duration-200">Contact</button>
              <button onClick={() => scrollToSection('contact')} className="block w-full text-left px-3 py-2 text-gray-700 hover:text-orange-600 transition-colors duration-200">Contact</button>
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="bg-gradient-to-br from-orange-500 via-red-600 to-purple-700 text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <div className="relative mb-6">
              <div 
                className="absolute inset-0 bg-contain bg-center bg-no-repeat opacity-20"
                style={{ backgroundImage: 'url(/sauti4brands1.png)' }}
              ></div>
              <h2 className="relative text-4xl md:text-6xl font-bold animate-fade-in">
                Amplify Your Brand's
                <span className="text-orange-200"> Voice</span>
              </h2>
            </div>
            <p className="text-xl md:text-2xl mb-8 text-orange-100 max-w-3xl mx-auto leading-relaxed">
              We help businesses create powerful brand narratives that resonate with their audience and drive meaningful engagement
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <button 
                onClick={() => scrollToSection('services')}
                className="bg-white text-orange-600 px-8 py-3 rounded-lg font-semibold hover:bg-orange-50 transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
              >
                Our Services
                <ArrowRight size={20} />
              </button>
              <button 
                onClick={() => scrollToSection('contact')}
                className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-orange-600 transition-all duration-200"
              >
                Get In Touch
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-gradient-to-br from-orange-50 via-red-50 to-purple-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">About Sauti4Brands</h3>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              We are a dynamic team of brand strategists, creative professionals, and digital experts dedicated to helping businesses find and amplify their unique voice in the marketplace.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
              <div className="bg-orange-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
                <Users className="text-orange-600" size={32} />
              </div>
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Expert Team</h4>
              <p className="text-gray-600">
                Our diverse team brings together years of experience in branding, marketing, and digital strategy to deliver exceptional results.
              </p>
            </div>

            <div className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
              <div className="bg-red-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
                <Target className="text-red-600" size={32} />
              </div>
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Strategic Approach</h4>
              <p className="text-gray-600">
                We develop comprehensive brand strategies that align with your business objectives and resonate with your target audience.
              </p>
            </div>

            <div className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
              <div className="bg-purple-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6">
                <Zap className="text-purple-600" size={32} />
              </div>
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Innovation</h4>
              <p className="text-gray-600">
                We stay ahead of industry trends and leverage cutting-edge tools and technologies to keep your brand relevant and competitive.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 bg-gradient-to-br from-purple-50 via-orange-50 to-red-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Services</h3>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Comprehensive brand solutions tailored to help your business stand out and succeed in today's competitive marketplace.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="group bg-gradient-to-br from-orange-50 to-orange-100 p-8 rounded-xl hover:from-orange-100 hover:to-orange-200 transition-all duration-300 border border-orange-200">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Brand Strategy</h4>
              <p className="text-gray-600 mb-4">
                Develop comprehensive brand positioning, messaging, and identity strategies that differentiate your business.
              </p>
              <ul className="text-sm text-gray-500 space-y-2">
                <li>• Brand positioning & messaging</li>
                <li>• Competitor analysis</li>
                <li>• Target audience research</li>
                <li>• Brand guidelines</li>
              </ul>
            </div>

            <div className="group bg-gradient-to-br from-red-50 to-red-100 p-8 rounded-xl hover:from-red-100 hover:to-red-200 transition-all duration-300 border border-red-200">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Digital Marketing</h4>
              <p className="text-gray-600 mb-4">
                Comprehensive digital marketing solutions to increase your online presence and drive engagement.
              </p>
              <ul className="text-sm text-gray-500 space-y-2">
                <li>• Social media management</li>
                <li>• Content marketing</li>
                <li>• SEO optimization</li>
                <li>• PPC advertising</li>
              </ul>
            </div>

            <div className="group bg-gradient-to-br from-purple-50 to-purple-100 p-8 rounded-xl hover:from-purple-100 hover:to-purple-200 transition-all duration-300 border border-purple-200">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Creative Design</h4>
              <p className="text-gray-600 mb-4">
                Professional design services that bring your brand vision to life across all touchpoints.
              </p>
              <ul className="text-sm text-gray-500 space-y-2">
                <li>• Logo & visual identity</li>
                <li>• Website design</li>
                <li>• Print materials</li>
                <li>• Packaging design</li>
              </ul>
            </div>

            <div className="group bg-gradient-to-br from-purple-50 to-purple-100 p-8 rounded-xl hover:from-purple-100 hover:to-purple-200 transition-all duration-300 border border-purple-200">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Brand Consulting</h4>
              <p className="text-gray-600 mb-4">
                Expert consultation to help you navigate brand challenges and opportunities.
              </p>
              <ul className="text-sm text-gray-500 space-y-2">
                <li>• Brand audits</li>
                <li>• Market research</li>
                <li>• Strategic planning</li>
                <li>• Brand optimization</li>
              </ul>
            </div>

            <div className="group bg-gradient-to-br from-orange-50 to-red-100 p-8 rounded-xl hover:from-orange-100 hover:to-red-200 transition-all duration-300 border border-orange-200">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Content Creation</h4>
              <p className="text-gray-600 mb-4">
                High-quality content that tells your brand story and engages your audience effectively.
              </p>
              <ul className="text-sm text-gray-500 space-y-2">
                <li>• Copywriting</li>
                <li>• Video production</li>
                <li>• Photography</li>
                <li>• Content strategy</li>
              </ul>
            </div>

            <div className="group bg-gradient-to-br from-red-50 to-purple-100 p-8 rounded-xl hover:from-red-100 hover:to-purple-200 transition-all duration-300 border border-red-200">
              <h4 className="text-xl font-semibold text-gray-900 mb-4">Brand Training</h4>
              <p className="text-gray-600 mb-4">
                Empower your team with brand knowledge and skills to maintain consistency across all interactions.
              </p>
              <ul className="text-sm text-gray-500 space-y-2">
                <li>• Brand workshops</li>
                <li>• Team training</li>
                <li>• Brand ambassadorship</li>
                <li>• Internal communications</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-gradient-to-br from-red-50 via-purple-50 to-orange-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Get In Touch</h3>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Ready to amplify your brand's voice? Let's discuss how we can help your business stand out and succeed.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {/* Contact Information */}
            <div className="space-y-8">
              <div className="bg-white p-8 rounded-xl shadow-lg">
                <h4 className="text-2xl font-semibold text-gray-900 mb-6">Contact Information</h4>
                
                <div className="space-y-6">
                  <div className="flex items-start space-x-4">
                    <div className="bg-orange-100 p-3 rounded-lg">
                      <Mail className="text-orange-600" size={24} />
                    </div>
                    <div>
                      <h5 className="font-semibold text-gray-900">Email</h5>
                      <p className="text-gray-600">hello@sauti4brands.com</p>
                      <p className="text-gray-600">yassinsenyonga1@gmail.com</p>
                    </div>
                  </div>

                  <div className="flex items-start space-x-4">
                    <div className="bg-red-100 p-3 rounded-lg">
                      <Phone className="text-red-600" size={24} />
                    </div>
                    <div>
                      <h5 className="font-semibold text-gray-900">Phone</h5>
                      <p className="text-gray-600">+256770383290</p>
                      <p className="text-gray-600">+256727175417</p>
                    </div>
                  </div>

                  <div className="flex items-start space-x-4">
                    <div className="bg-purple-100 p-3 rounded-lg">
                      <MapPin className="text-purple-600" size={24} />
                    </div>
                    <div>
                      <h5 className="font-semibold text-gray-900">Location</h5>
                      <p className="text-gray-600">Kayunga, Kampala</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-gradient-to-br from-orange-600 to-red-600 text-white p-8 rounded-xl">
                <h4 className="text-xl font-semibold mb-4">Why Choose Sauti4Brands?</h4>
                <ul className="space-y-3">
                  <li className="flex items-center space-x-3">
                    <Shield size={20} className="text-orange-200" />
                    <span>Proven track record of success</span>
                  </li>
                  <li className="flex items-center space-x-3">
                    <Users size={20} className="text-orange-200" />
                    <span>Dedicated team of experts</span>
                  </li>
                  <li className="flex items-center space-x-3">
                    <Target size={20} className="text-orange-200" />
                    <span>Customized solutions for your needs</span>
                  </li>
                  <li className="flex items-center space-x-3">
                    <Zap size={20} className="text-orange-200" />
                    <span>Fast turnaround times</span>
                  </li>
                </ul>
              </div>
            </div>

            {/* Contact Form */}
            <div className="bg-white p-8 rounded-xl shadow-lg">
              <h4 className="text-2xl font-semibold text-gray-900 mb-6">Send us a Message</h4>
              
              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
                    Full Name *
                  </label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="Your full name"
                  />
                </div>

                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
                    Email Address *
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="your@email.com"
                  />
                </div>

                <div>
                  <label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-2">
                    Company Name
                  </label>
                  <input
                    type="text"
                    id="company"
                    name="company"
                    value={formData.company}
                    onChange={handleInputChange}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="Your company name"
                  />
                </div>

                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
                    Message *
                  </label>
                  <textarea
                    id="message"
                    name="message"
                    value={formData.message}
                    onChange={handleInputChange}
                    required
                    rows={5}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                    placeholder="Tell us about your project or how we can help you..."
                  />
                </div>

                <button
                  type="submit"
                  className="w-full bg-gradient-to-r from-orange-600 to-red-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-orange-700 hover:to-red-700 transition-colors duration-200 flex items-center justify-center space-x-2"
                >
                  <span>Send Message</span>
                  <ArrowRight size={20} />
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="col-span-1 md:col-span-2">
              <h4 className="text-2xl font-bold text-orange-400 mb-4">Sauti4Brands</h4>
              <p className="text-gray-300 mb-4 max-w-md">
                Amplifying your brand's voice through strategic thinking, creative excellence, and digital innovation.
              </p>
              <div className="flex space-x-4">
                <div className="bg-orange-600 p-2 rounded-lg">
                  <Mail size={20} />
                </div>
                <div className="bg-red-600 p-2 rounded-lg">
                  <Phone size={20} />
                </div>
                <div className="bg-purple-600 p-2 rounded-lg">
                  <MapPin size={20} />
                </div>
              </div>
            </div>

            <div>
              <h5 className="text-lg font-semibold mb-4">Services</h5>
              <ul className="space-y-2 text-gray-300">
                <li>Brand Strategy</li>
                <li>Digital Marketing</li>
                <li>Creative Design</li>
                <li>Content Creation</li>
              </ul>
            </div>

            <div>
              <h5 className="text-lg font-semibold mb-4">Company</h5>
              <ul className="space-y-2 text-gray-300">
                <li>About Us</li>
                <li>Our Team</li>
                <li>Careers</li>
                <li>Contact</li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2025 Sauti4Brands. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;