import React, { useState, useEffect } from 'react';
import { Menu, X, ChevronRight, CheckCircle, Users, TrendingUp, Target, MessageSquare, Send } from 'lucide-react';

export default function OnlyFansAIMarketingAgency() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTestimonial, setActiveTestimonial] = useState(0);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
    accountSize: 'small'
  });
  
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveTestimonial((prev) => (prev + 1) % testimonials.length);
    }, 5000);
    return () => clearInterval(interval);
  }, []);
  
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    // In a real implementation, this would send data to the API
    try {
      // Simulating API call
      console.log('Submitting form data:', formData);
      alert('Thanks for your submission! We will contact you shortly.');
      setFormData({
        name: '',
        email: '',
        message: '',
        accountSize: 'small'
      });
    } catch (error) {
      console.error('Error submitting form:', error);
    }
  };
  
  const testimonials = [
    {
      name: "Jessica M.",
      handle: "@jessica_creates",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80",
      text: "AudienceAI transformed my OnlyFans business. Their AI targeting helped me grow from 200 to 3,500 subscribers in just 3 months!",
      stats: "1,650% growth in 90 days"
    },
    {
      name: "Marcus T.",
      handle: "@marcus_fitness",
      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80",
      text: "The AI-driven content strategy they developed for me was a game-changer. My engagement rates tripled and my income has never been better.",
      stats: "300% increase in engagement"
    },
    {
      name: "Sophia L.",
      handle: "@sophia_art",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80",
      text: "Their AI audience analysis found niches I never would have considered. Now I'm earning 5x more with less work by creating exactly what my audience wants.",
      stats: "500% revenue increase"
    }
  ];
  
  const services = [
    {
      icon: <Target className="w-12 h-12 text-teal-600" />,
      title: "AI Audience Targeting",
      description: "Our proprietary AI analyzes millions of data points to identify your ideal subscribers and where to find them."
    },
    {
      icon: <TrendingUp className="w-12 h-12 text-teal-600" />,
      title: "Growth Strategy",
      description: "Data-driven content and promotion strategies customized to your unique brand and target audience."
    },
    {
      icon: <Users className="w-12 h-12 text-teal-600" />,
      title: "Subscriber Retention",
      description: "AI-powered engagement analysis to keep subscribers happy and reduce churn rate."
    },
    {
      icon: <MessageSquare className="w-12 h-12 text-teal-600" />,
      title: "Content Optimization",
      description: "Our AI identifies what content performs best with your specific audience to maximize engagement and revenue."
    }
  ];
  
  return (
    <div className="font-['Inter'] text-gray-800 bg-gray-50">
      {/* Navigation */}
      <nav className="bg-white shadow-md fixed w-full z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <span className="text-2xl font-bold bg-gradient-to-r from-purple-800 to-teal-600 bg-clip-text text-transparent">AudienceAI</span>
            </div>
            
            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#services" className="text-gray-700 hover:text-teal-600 transition-colors">Services</a>
              <a href="#how-it-works" className="text-gray-700 hover:text-teal-600 transition-colors">How It Works</a>
              <a href="#results" className="text-gray-700 hover:text-teal-600 transition-colors">Results</a>
              <a href="#contact" className="bg-gradient-to-r from-purple-700 to-teal-600 text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-opacity">Get Started</a>
            </div>
            
            {/* Mobile menu button */}
            <div className="md:hidden flex items-center">
              <button onClick={toggleMenu} className="text-gray-700">
                {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden bg-white shadow-lg">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <a href="#services" className="block px-3 py-2 text-gray-700 hover:text-teal-600" onClick={toggleMenu}>Services</a>
              <a href="#how-it-works" className="block px-3 py-2 text-gray-700 hover:text-teal-600" onClick={toggleMenu}>How It Works</a>
              <a href="#results" className="block px-3 py-2 text-gray-700 hover:text-teal-600" onClick={toggleMenu}>Results</a>
              <a href="#contact" className="block px-3 py-2 bg-gradient-to-r from-purple-700 to-teal-600 text-white rounded-md font-medium mt-2" onClick={toggleMenu}>Get Started</a>
            </div>
          </div>
        )}
      </nav>
      
      {/* Hero Section */}
      <section className="pt-24 pb-16 md:pt-32 md:pb-24 px-4 bg-gradient-to-br from-purple-900 via-purple-800 to-teal-700 text-white">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                AI-Powered Marketing for OnlyFans Creators
              </h1>
              <p className="text-xl md:text-2xl mb-8 text-gray-200">
                Our advanced AI technology identifies and targets your ideal subscribers, growing your audience and maximizing your revenue.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <a href="#contact" className="bg-white text-purple-900 px-8 py-3 rounded-full font-medium text-center hover:bg-gray-100 transition-colors">
                  Get Started
                </a>
                <a href="#how-it-works" className="border border-white text-white px-8 py-3 rounded-full font-medium text-center hover:bg-white/10 transition-colors">
                  Learn How It Works
                </a>
              </div>
            </div>
            <div className="relative">
              <div className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl shadow-xl">
                <div className="bg-gradient-to-br from-purple-700 to-teal-600 p-1 rounded-xl mb-4">
                  <div className="bg-white/5 backdrop-blur-sm rounded-lg p-4">
                    <h3 className="text-xl font-semibold mb-2">AI Audience Analysis</h3>
                    <div className="space-y-3">
                      <div className="flex items-center gap-2">
                        <div className="w-2 h-2 rounded-full bg-teal-400"></div>
                        <div className="text-sm">Identified 3 untapped niches</div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="w-2 h-2 rounded-full bg-purple-400"></div>
                        <div className="text-sm">Content optimization score: 87%</div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="w-2 h-2 rounded-full bg-teal-400"></div>
                        <div className="text-sm">Projected growth: +215% in 60 days</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="bg-white/5 backdrop-blur-sm p-4 rounded-xl">
                    <h4 className="font-medium mb-1">Subscriber Growth</h4>
                    <p className="text-3xl font-bold">+1,240%</p>
                    <p className="text-xs text-gray-300">Average client growth</p>
                  </div>
                  <div className="bg-white/5 backdrop-blur-sm p-4 rounded-xl">
                    <h4 className="font-medium mb-1">Revenue Increase</h4>
                    <p className="text-3xl font-bold">+860%</p>
                    <p className="text-xs text-gray-300">Average monthly revenue</p>
                  </div>
                </div>
              </div>
              <div className="absolute -bottom-6 -right-6 bg-teal-600 text-white p-3 rounded-full shadow-lg hidden md:block">
                <span className="text-sm font-medium">AI-Powered</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Stats Section */}
      <section className="py-12 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
            <div className="p-6">
              <p className="text-4xl font-bold text-purple-800 mb-2">1,240%</p>
              <p className="text-gray-600">Average Growth</p>
            </div>
            <div className="p-6">
              <p className="text-4xl font-bold text-teal-600 mb-2">300+</p>
              <p className="text-gray-600">Creators Helped</p>
            </div>
            <div className="p-6">
              <p className="text-4xl font-bold text-purple-800 mb-2">$12M+</p>
              <p className="text-gray-600">Additional Revenue</p>
            </div>
            <div className="p-6">
              <p className="text-4xl font-bold text-teal-600 mb-2">98%</p>
              <p className="text-gray-600">Client Satisfaction</p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Services Section */}
      <section id="services" className="py-16 px-4 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Our AI-Powered Services</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              We leverage cutting-edge artificial intelligence to analyze, target, and grow your OnlyFans audience with precision.
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                <div className="mb-4">{service.icon}</div>
                <h3 className="text-xl font-semibold mb-3">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      
      {/* How It Works Section */}
      <section id="how-it-works" className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">How Our AI Marketing Works</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Our proprietary AI technology analyzes millions of data points to create a customized growth strategy for your OnlyFans account.
            </p>
          </div>
          
          <div className="relative">
            <div className="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gradient-to-r from-purple-600 to-teal-500 transform -translate-y-1/2 z-0"></div>
            
            <div className="grid md:grid-cols-4 gap-8 relative z-10">
              <div className="bg-white p-6 rounded-xl shadow-md">
                <div className="w-12 h-12 flex items-center justify-center bg-gradient-to-r from-purple-600 to-purple-800 text-white rounded-full mb-6 mx-auto md:mx-0">1</div>
                <h3 className="text-xl font-semibold mb-3 text-center md:text-left">AI Analysis</h3>
                <p className="text-gray-600">Our AI analyzes your content, audience, and competitors to identify growth opportunities.</p>
              </div>
              
              <div className="bg-white p-6 rounded-xl shadow-md">
                <div className="w-12 h-12 flex items-center justify-center bg-gradient-to-r from-purple-700 to-teal-600 text-white rounded-full mb-6 mx-auto md:mx-0">2</div>
                <h3 className="text-xl font-semibold mb-3 text-center md:text-left">Strategy Development</h3>
                <p className="text-gray-600">We create a customized marketing strategy based on AI insights and proven techniques.</p>
              </div>
              
              <div className="bg-white p-6 rounded-xl shadow-md">
                <div className="w-12 h-12 flex items-center justify-center bg-gradient-to-r from-teal-600 to-teal-800 text-white rounded-full mb-6 mx-auto md:mx-0">3</div>
                <h3 className="text-xl font-semibold mb-3 text-center md:text-left">Implementation</h3>
                <p className="text-gray-600">Our team executes the strategy, handling targeting, promotion, and optimization.</p>
              </div>
              
              <div className="bg-white p-6 rounded-xl shadow-md">
                <div className="w-12 h-12 flex items-center justify-center bg-gradient-to-r from-teal-500 to-teal-700 text-white rounded-full mb-6 mx-auto md:mx-0">4</div>
                <h3 className="text-xl font-semibold mb-3 text-center md:text-left">Growth & Refinement</h3>
                <p className="text-gray-600">Continuous AI monitoring adjusts your strategy for optimal results and sustained growth.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Results/Testimonials Section */}
      <section id="results" className="py-16 px-4 bg-gradient-to-br from-purple-900 via-purple-800 to-teal-700 text-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Real Results from Real Creators</h2>
            <p className="text-xl text-gray-200 max-w-3xl mx-auto">
              See how our AI-powered marketing strategies have transformed OnlyFans businesses.
            </p>
          </div>
          
          <div className="bg-white/10 backdrop-blur-sm p-8 rounded-2xl shadow-xl">
            <div className="grid md:grid-cols-3 gap-4 mb-8">
              {testimonials.map((testimonial, index) => (
                <button 
                  key={index}
                  onClick={() => setActiveTestimonial(index)}
                  className={`flex items-center gap-4 p-4 rounded-xl transition-colors ${
                    activeTestimonial === index 
                      ? 'bg-white/20' 
                      : 'hover:bg-white/5'
                  }`}
                >
                  <img 
                    src={testimonial.image} 
                    alt={testimonial.name} 
                    className="w-12 h-12 rounded-full object-cover"
                  />
                  <div className="text-left">
                    <p className="font-medium">{testimonial.name}</p>
                    <p className="text-sm text-gray-300">{testimonial.handle}</p>
                  </div>
                </button>
              ))}
            </div>
            
            <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl">
              <div className="flex items-start gap-6">
                <img 
                  src={testimonials[activeTestimonial].image} 
                  alt={testimonials[activeTestimonial].name}
                  className="w-20 h-20 rounded-full object-cover hidden md:block"
                />
                <div>
                  <p className="text-xl md:text-2xl mb-4">"{testimonials[activeTestimonial].text}"</p>
                  <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-6">
                    <div>
                      <p className="font-medium">{testimonials[activeTestimonial].name}</p>
                      <p className="text-sm text-gray-300">{testimonials[activeTestimonial].handle}</p>
                    </div>
                    <div className="md:border-l md:border-white/20 md:pl-6">
                      <p className="font-bold text-teal-400">{testimonials[activeTestimonial].stats}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Pricing/Contact Section */}
      <section id="contact" className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Grow Your OnlyFans with AI?</h2>
              <p className="text-xl text-gray-600 mb-8">
                Fill out the form to get a free AI audience analysis and see how our technology can transform your OnlyFans business.
              </p>
              
              <div className="bg-gray-50 p-6 rounded-xl mb-8">
                <h3 className="text-xl font-semibold mb-4">What You'll Get:</h3>
                <ul className="space-y-3">
                  {[
                    "Free AI audience analysis",
                    "Customized growth strategy",
                    "Content optimization recommendations",
                    "Projected growth timeline",
                    "Pricing options tailored to your goals"
                  ].map((item, index) => (
                    <li key={index} className="flex items-start gap-3">
                      <CheckCircle className="w-5 h-5 text-teal-600 flex-shrink-0 mt-0.5" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            
            <div className="bg-gray-50 p-8 rounded-xl shadow-md">
              <h3 className="text-2xl font-semibold mb-6">Get Your Free AI Analysis</h3>
              
              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Name</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-transparent outline-none transition-all"
                    placeholder="Your name"
                  />
                </div>
                
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    required
                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-transparent outline-none transition-all"
                    placeholder="your@email.com"
                  />
                </div>
                
                <div>
                  <label htmlFor="accountSize" className="block text-sm font-medium text-gray-700 mb-1">Current Account Size</label>
                  <select
                    id="accountSize"
                    name="accountSize"
                    value={formData.accountSize}
                    onChange={handleInputChange}
                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-transparent outline-none transition-all"
                  >
                    <option value="small">Just starting (0-100 subscribers)</option>
                    <option value="medium">Growing (100-1,000 subscribers)</option>
                    <option value="large">Established (1,000-10,000 subscribers)</option>
                    <option value="xlarge">Advanced (10,000+ subscribers)</option>
                  </select>
                </div>
                
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Your Goals</label>
                  <textarea
                    id="message"
                    name="message"
                    value={formData.message}
                    onChange={handleInputChange}
                    rows={4}
                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-transparent outline-none transition-all"
                    placeholder="Tell us about your goals and challenges"
                  ></textarea>
                </div>
                
                <button
                  type="submit"
                  className="w-full bg-gradient-to-r from-purple-700 to-teal-600 text-white py-3 px-6 rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
                >
                  <span>Get Free AI Analysis</span>
                  <Send className="w-4 h-4" />
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>
      
      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-2xl font-bold bg-gradient-to-r from-purple-400 to-teal-400 bg-clip-text text-transparent mb-4">AudienceAI</h3>
              <p className="text-gray-400">
                AI-powered marketing solutions for OnlyFans creators looking to grow their audience and maximize revenue.
              </p>
            </div>
            
            <div>
              <h4 className="font-semibold text-lg mb-4">Services</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-teal-400 transition-colors">AI Audience Targeting</a></li>
                <li><a href="#" className="hover:text-teal-400 transition-colors">Growth Strategy</a></li>
                <li><a href="#" className="hover:text-teal-400 transition-colors">Subscriber Retention</a></li>
                <li><a href="#" className="hover:text-teal-400 transition-colors">Content Optimization</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-semibold text-lg mb-4">Company</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-teal-400 transition-colors">About Us</a></li>
                <li><a href="#" className="hover:text-teal-400 transition-colors">Case Studies</a></li>
                <li><a href="#" className="hover:text-teal-400 transition-colors">Blog</a></li>
                <li><a href="#contact" className="hover:text-teal-400 transition-colors">Contact</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-semibold text-lg mb-4">Legal</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-teal-400 transition-colors">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-teal-400 transition-colors">Terms of Service</a></li>
                <li><a href="#" className="hover:text-teal-400 transition-colors">Cookie Policy</a></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
            <p>© {new Date().getFullYear()} AudienceAI. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}