import React, { useState } from 'react';
import { 
  Menu, X, Phone, Mail, MapPin, Linkedin, Instagram, MessageCircle, 
  TrendingUp, Search, Layout, Code, Award, CheckCircle, Zap, 
  BarChart, Share2, Megaphone, ArrowRight 
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [formStatus, setFormStatus] = useState(null);

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

  const handleFormSubmit = (e) => {
    e.preventDefault();
    setFormStatus('success');
    setTimeout(() => setFormStatus(null), 3000);
    e.target.reset();
  };

  const navLinks = [
    { name: 'Home', href: '#home' },
    { name: 'About', href: '#about' },
    { name: 'Services', href: '#services' },
    { name: 'Features', href: '#features' },
    { name: 'Contact', href: '#contact' },
  ];

  const services = [
    { icon: <Megaphone className="w-8 h-8 text-indigo-600" />, title: 'Digital Marketing', desc: 'Comprehensive digital strategies to boost your brand presence and drive conversions across all channels.' },
    { icon: <Share2 className="w-8 h-8 text-indigo-600" />, title: 'Social Media Marketing', desc: 'Engaging content and targeted campaigns to grow your audience on platforms like Instagram, Facebook, and LinkedIn.' },
    { icon: <Search className="w-8 h-8 text-indigo-600" />, title: 'SEO Services', desc: 'Optimizing your website to rank higher on search engines, driving organic traffic and increasing visibility.' },
    { icon: <BarChart className="w-8 h-8 text-indigo-600" />, title: 'SEO Analyst', desc: 'In-depth website audits, competitor analysis, and keyword research to build data-driven growth strategies.' },
    { icon: <Layout className="w-8 h-8 text-indigo-600" />, title: 'Website Designing', desc: 'Creating stunning, user-friendly, and responsive UI/UX designs that reflect your brand identity.' },
    { icon: <Code className="w-8 h-8 text-indigo-600" />, title: 'Website Making', desc: 'End-to-end web development to bring your designs to life with robust, fast, and scalable code.' },
  ];

  const features = [
    { icon: <Zap />, title: 'Fast Execution', desc: 'Rapid deployment of marketing campaigns.' },
    { icon: <TrendingUp />, title: 'Data-Driven ROI', desc: 'Focus on metrics that actually matter.' },
    { icon: <Award />, title: 'Quality Assurance', desc: 'Premium standard in every project.' },
  ];

  const whyChooseUs = [
    "Proven track record of increasing local and global digital footprint.",
    "Customized strategies tailored to your specific business niche.",
    "Transparent reporting and continuous performance optimization.",
    "Local expertise based right here in Calicut.",
    "End-to-end solutions from web design to marketing execution."
  ];

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 scroll-smooth">
      {/* Navigation */}
      <nav className="fixed w-full bg-white/90 backdrop-blur-md shadow-sm 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-20">
            <div className="flex-shrink-0 flex items-center">
              <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
                Marina Joseph
              </span>
            </div>
            
            {/* Desktop Menu */}
            <div className="hidden md:flex space-x-8 items-center">
              {navLinks.map((link) => (
                <a key={link.name} href={link.href} className="text-slate-600 hover:text-indigo-600 font-medium transition-colors">
                  {link.name}
                </a>
              ))}
              <a href="#contact" className="bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200">
                Hire Me
              </a>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden flex items-center">
              <button onClick={toggleMenu} className="text-slate-600 hover:text-indigo-600 focus:outline-none">
                {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-slate-100 absolute w-full shadow-lg">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              {navLinks.map((link) => (
                <a 
                  key={link.name} 
                  href={link.href} 
                  onClick={toggleMenu}
                  className="block px-3 py-2 rounded-md text-base font-medium text-slate-700 hover:text-indigo-600 hover:bg-indigo-50"
                >
                  {link.name}
                </a>
              ))}
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="pt-32 pb-20 md:pt-40 md:pb-28 px-4 overflow-hidden">
        <div className="max-w-7xl mx-auto flex flex-col-reverse md:flex-row items-center justify-between gap-12">
          <div className="flex-1 text-center md:text-left">
            <div className="inline-flex items-center space-x-2 bg-indigo-50 text-indigo-700 px-4 py-2 rounded-full mb-6 font-medium text-sm">
              <MapPin className="w-4 h-4" />
              <span>Based in Calicut, Kerala</span>
            </div>
            <h1 className="text-4xl md:text-6xl font-extrabold leading-tight mb-6">
              Hi, I'm Marina! <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">
                Digital Marketing Specialist
              </span>
            </h1>
            <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto md:mx-0">
              I help brands grow their digital presence through data-driven SEO, engaging social media strategies, and stunning website designs. Let's turn your clicks into clients.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4">
              <a href="#contact" className="w-full sm:w-auto px-8 py-3.5 bg-indigo-600 text-white rounded-full font-semibold hover:bg-indigo-700 transition-all shadow-xl shadow-indigo-200 flex items-center justify-center gap-2">
                Get a Free Consultation <ArrowRight className="w-5 h-5" />
              </a>
              <a href="#services" className="w-full sm:w-auto px-8 py-3.5 bg-white text-slate-700 border border-slate-200 rounded-full font-semibold hover:bg-slate-50 transition-all text-center">
                Explore Services
              </a>
            </div>
            <div className="mt-8 flex items-center justify-center md:justify-start gap-6 text-slate-400">
              <a href="https://www.linkedin.com/in/josephmarina1/" target="_blank" rel="noreferrer" className="hover:text-indigo-600 transition-colors"><Linkedin className="w-6 h-6" /></a>
              <a href="https://www.instagram.com/josephmarina510/?hl=en" target="_blank" rel="noreferrer" className="hover:text-pink-600 transition-colors"><Instagram className="w-6 h-6" /></a>
              <a href="https://wa.me/919567753842" target="_blank" rel="noreferrer" className="hover:text-green-500 transition-colors"><MessageCircle className="w-6 h-6" /></a>
            </div>
          </div>
          <div className="flex-1 relative">
            <div className="absolute inset-0 bg-gradient-to-tr from-indigo-200 to-purple-200 rounded-full blur-3xl opacity-50 animate-pulse"></div>
            <img 
              src="Screenshot 2026-03-11 112554.png" 
              alt="Marina Joseph - Digital Marketing Specialist" 
              className="relative z-10 w-64 h-64 md:w-96 md:h-96 object-cover rounded-full border-8 border-white shadow-2xl mx-auto"
            />
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">About Me</h2>
            <div className="w-20 h-1 bg-indigo-600 mx-auto rounded-full"></div>
          </div>
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="flex-1">
               <img 
                  src="Screenshot 2026-03-11 112554.png" 
                  alt="Marina Joseph" 
                  className="rounded-2xl shadow-xl w-full max-w-md mx-auto"
                />
            </div>
            <div className="flex-1 space-y-6 text-lg text-slate-600">
              <p>
                Welcome! I am a passionate <strong>Digital Marketing Specialist</strong> and <strong>Web Designer</strong> based in the vibrant city of Calicut. With a deep understanding of the digital landscape, I bridge the gap between technical web design and strategic marketing.
              </p>
              <p>
                My journey involves helping businesses—from local startups to established brands—optimize their online presence. Whether it's ranking higher on Google through meticulous SEO, designing a highly converting website, or running engaging social media campaigns, I handle it all.
              </p>
              <div className="grid grid-cols-2 gap-6 pt-4">
                <div>
                  <h4 className="font-bold text-slate-900 text-xl mb-2">Location</h4>
                  <p className="flex items-center gap-2"><MapPin className="w-5 h-5 text-indigo-600"/> Calicut, Kerala</p>
                </div>
                <div>
                  <h4 className="font-bold text-slate-900 text-xl mb-2">Phone</h4>
                  <p className="flex items-center gap-2"><Phone className="w-5 h-5 text-indigo-600"/> +91 9567753842</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">My Services</h2>
            <p className="text-slate-600 max-w-2xl mx-auto">Comprehensive digital solutions to elevate your brand.</p>
            <div className="w-20 h-1 bg-indigo-600 mx-auto rounded-full mt-4"></div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-white p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-slate-100 group">
                <div className="w-16 h-16 bg-indigo-50 rounded-xl flex items-center justify-center mb-6 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                  {React.cloneElement(service.icon, { className: "w-8 h-8 transition-colors duration-300 group-hover:text-white" })}
                </div>
                <h3 className="text-xl font-bold mb-3 text-slate-900">{service.title}</h3>
                <p className="text-slate-600 leading-relaxed">
                  {service.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features & Why Choose Us Section */}
      <section id="features" className="py-20 bg-indigo-900 text-white relative overflow-hidden">
        <div className="absolute top-0 right-0 -mt-20 -mr-20 w-80 h-80 bg-white opacity-5 rounded-full blur-3xl"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
            
            {/* Why Choose Us */}
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6">Why Choose Us?</h2>
              <div className="w-20 h-1 bg-purple-500 rounded-full mb-8"></div>
              <p className="text-indigo-100 mb-8 text-lg">
                I don't just build websites or run ads; I create digital ecosystems designed to generate real revenue for your business.
              </p>
              <div className="space-y-4">
                {whyChooseUs.map((item, index) => (
                  <div key={index} className="flex items-start gap-3">
                    <CheckCircle className="w-6 h-6 text-purple-400 flex-shrink-0 mt-0.5" />
                    <span className="text-indigo-50">{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Features */}
            <div>
               <h2 className="text-3xl md:text-4xl font-bold mb-6">Core Features</h2>
               <div className="w-20 h-1 bg-purple-500 rounded-full mb-8"></div>
               <div className="grid sm:grid-cols-2 gap-6">
                 {features.map((feat, index) => (
                   <div key={index} className="bg-white/10 backdrop-blur-sm p-6 rounded-xl border border-white/10 hover:bg-white/20 transition-colors">
                     <div className="text-purple-400 mb-4">{React.cloneElement(feat.icon, { className: "w-8 h-8" })}</div>
                     <h4 className="text-xl font-semibold mb-2">{feat.title}</h4>
                     <p className="text-indigo-200 text-sm">{feat.desc}</p>
                   </div>
                 ))}
               </div>
            </div>

          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">Get In Touch</h2>
            <p className="text-slate-600 max-w-2xl mx-auto">Ready to elevate your digital presence? Fill out the form below or reach out directly.</p>
            <div className="w-20 h-1 bg-indigo-600 mx-auto rounded-full mt-4"></div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            
            {/* Contact Info Cards */}
            <div className="lg:col-span-1 space-y-6">
              <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center gap-4">
                <div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center flex-shrink-0">
                  <Phone className="w-6 h-6" />
                </div>
                <div>
                  <p className="text-sm text-slate-500 font-medium">Call/WhatsApp</p>
                  <a href="https://wa.me/919567753842" className="text-lg font-bold text-slate-900 hover:text-indigo-600 transition-colors">
                    +91 9567753842
                  </a>
                </div>
              </div>

              <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center gap-4">
                <div className="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center flex-shrink-0">
                  <MapPin className="w-6 h-6" />
                </div>
                <div>
                  <p className="text-sm text-slate-500 font-medium">Location</p>
                  <p className="text-lg font-bold text-slate-900">
                    Calicut, Kerala, India
                  </p>
                </div>
              </div>

              <div className="bg-gradient-to-br from-indigo-600 to-purple-600 p-8 rounded-2xl shadow-lg text-white text-center">
                <h4 className="text-xl font-bold mb-4">Connect Socially</h4>
                <div className="flex justify-center gap-4">
                  <a href="https://www.linkedin.com/in/josephmarina1/" target="_blank" rel="noreferrer" className="bg-white/20 p-3 rounded-full hover:bg-white hover:text-indigo-600 transition-colors">
                    <Linkedin className="w-6 h-6" />
                  </a>
                  <a href="https://www.instagram.com/josephmarina510/?hl=en" target="_blank" rel="noreferrer" className="bg-white/20 p-3 rounded-full hover:bg-white hover:text-pink-600 transition-colors">
                    <Instagram className="w-6 h-6" />
                  </a>
                  <a href="https://wa.me/919567753842" target="_blank" rel="noreferrer" className="bg-white/20 p-3 rounded-full hover:bg-white hover:text-green-500 transition-colors">
                    <MessageCircle className="w-6 h-6" />
                  </a>
                </div>
              </div>
            </div>

            {/* Contact Form */}
            <div className="lg:col-span-2">
              <div className="bg-white p-8 rounded-2xl shadow-xl border border-slate-100">
                <h3 className="text-2xl font-bold mb-6 text-slate-900">Send a Message</h3>
                
                {formStatus === 'success' && (
                  <div className="mb-6 p-4 bg-green-50 text-green-700 rounded-lg flex items-center gap-2 border border-green-200">
                    <CheckCircle className="w-5 h-5" />
                    Thank you! Your message has been sent successfully. I will contact you soon.
                  </div>
                )}

                <form onSubmit={handleFormSubmit} className="space-y-6">
                  {/* Name and Contact */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-2">Full Name</label>
                      <input required type="text" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-600 focus:border-transparent outline-none transition-all bg-slate-50 focus:bg-white" placeholder="Your Name" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-2">Contact Number</label>
                      <input required type="tel" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-600 focus:border-transparent outline-none transition-all bg-slate-50 focus:bg-white" placeholder="+91 XXXXXXXXXX" />
                    </div>
                  </div>

                  {/* Email and Place */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-2">Email Address</label>
                      <input required type="email" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-600 focus:border-transparent outline-none transition-all bg-slate-50 focus:bg-white" placeholder="your.email@example.com" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-2">Place / Location</label>
                      <input required type="text" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-600 focus:border-transparent outline-none transition-all bg-slate-50 focus:bg-white" placeholder="Your City" />
                    </div>
                  </div>

                  {/* Highest Qualification and Specialization */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-2">Highest Qualification</label>
                      <input required type="text" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-600 focus:border-transparent outline-none transition-all bg-slate-50 focus:bg-white" placeholder="e.g. MBA, B.Tech" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-2">Field / Specialization</label>
                      <input required type="text" className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:ring-2 focus:ring-indigo-600 focus:border-transparent outline-none transition-all bg-slate-50 focus:bg-white" placeholder="e.g. Marketing, IT" />
                    </div>
                  </div>

                  <div>
                    <button type="submit" className="w-full bg-indigo-600 text-white font-bold py-4 px-8 rounded-lg hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-200 flex justify-center items-center gap-2">
                      Submit Message <Zap className="w-5 h-5" />
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-300 py-12 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="text-center md:text-left">
            <span className="text-2xl font-bold text-white tracking-tight">Marina Joseph</span>
            <p className="mt-2 text-sm text-slate-400">Digital Marketing Specialist & Web Designer</p>
          </div>
          
          <div className="flex space-x-6">
            <a href="https://www.linkedin.com/in/josephmarina1/" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-white transition-colors">
              <span className="sr-only">LinkedIn</span>
              <Linkedin className="h-6 w-6" />
            </a>
            <a href="https://www.instagram.com/josephmarina510/?hl=en" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-white transition-colors">
              <span className="sr-only">Instagram</span>
              <Instagram className="h-6 w-6" />
            </a>
            <a href="https://wa.me/919567753842" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-white transition-colors">
              <span className="sr-only">WhatsApp</span>
              <MessageCircle className="h-6 w-6" />
            </a>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 pt-8 border-t border-slate-800 text-center text-sm text-slate-500">
          <p>&copy; {new Date().getFullYear()} Marina Joseph. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;