/**
 * Lumen Management Consultancy - React Core Logic
 * Fully structured React Application with stateful ScrollSpy, mobile responsive menu drawer,
 * validation-backed contact form submission, and premium animated feedback modals.
 */

// Destructure hooks from global React CDN injection
const { useState, useEffect } = React;



/**
 * Sticky Header Navigation with active ScrollSpy indicators and mobile hamburger toggle
 */
const Header = ({
    activeSection,
    isScrolled,
    mobileMenuOpen,
    setMobileMenuOpen,
    onLinkClick
}) => (
    <header className={`header ${isScrolled ? 'scrolled' : ''}`}>
        <div className="container navbar">
            <div className="logo-container">
                <a href="#home" onClick={(e) => onLinkClick(e, 'home')}>
                    <img src="assets/logo.png" alt="Lumen Logo" className="logo" />
                </a>
            </div>

            {/* Slide-out Mobile Navigation Drawer & Desktop Links */}
            <nav className={`nav-links ${mobileMenuOpen ? 'open' : ''}`}>
                <a
                    href="#home"
                    className={activeSection === 'home' ? 'active' : ''}
                    onClick={(e) => onLinkClick(e, 'home')}
                >
                    Home
                </a>
                <a
                    href="#services"
                    className={activeSection === 'services' ? 'active' : ''}
                    onClick={(e) => onLinkClick(e, 'services')}
                >
                    Services
                </a>
                <a
                    href="#about"
                    className={activeSection === 'about' ? 'active' : ''}
                    onClick={(e) => onLinkClick(e, 'about')}
                >
                    About Us
                </a>
                <a
                    href="#why-choose-us"
                    className={activeSection === 'why-choose-us' ? 'active' : ''}
                    onClick={(e) => onLinkClick(e, 'why-choose-us')}
                >
                    Why Choose Us
                </a>

                {/* Mobile Drawer Call-to-Action */}
                <a
                    href="#contact"
                    className="btn btn-primary btn-mobile"
                    onClick={(e) => onLinkClick(e, 'contact')}
                >
                    Get in Touch &rarr;
                </a>
            </nav>

            {/* Desktop Navbar Call-to-Action */}
            <a
                href="#contact"
                className="btn btn-primary"
                onClick={(e) => onLinkClick(e, 'contact')}
            >
                Get in Touch &rarr;
            </a>

            {/* Mobile Hamburger Toggle Trigger */}
            <button
                className={`mobile-menu-toggle ${mobileMenuOpen ? 'open' : ''}`}
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                aria-label="Toggle Navigation Drawer"
                aria-expanded={mobileMenuOpen}
            >
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>
);

/**
 * Hero Section introducing Lumen core proposition and call to actions
 */
const Hero = ({ onLinkClick }) => (
    <section id="home" className="hero">
        <div className="hero-background-shape"></div>
        <div className="container hero-content">
            <div className="hero-text">
                <div className="badge">SMART SOLUTIONS. CLEAR RESULTS.</div>
                <h1 className="hero-title">Smart Solutions for<br />Growing Businesses</h1>
                <p className="hero-description">
                    We help startups, SMEs, and growing businesses simplify operations,
                    ensure compliance, and automate customer engagement so you can focus
                    on what truly matters &ndash; growth.
                </p>
                <div className="hero-buttons">
                    <a href="#services" className="btn btn-primary" onClick={(e) => onLinkClick(e, 'services')}>
                        Our Services &rarr;
                    </a>
                    <a href="#contact" className="btn btn-outline" onClick={(e) => onLinkClick(e, 'contact')}>
                        Contact Us <i className="fa-solid fa-phone"></i>
                    </a>
                </div>
                <div className="hero-features">
                    <div className="feature-item">
                        <i className="fa-solid fa-shield-halved"></i> Trusted by Businesses
                    </div>
                    <div className="feature-item">
                        <i className="fa-solid fa-headset"></i> Fast & Reliable Support
                    </div>
                    <div className="feature-item">
                        <i className="fa-solid fa-chart-column"></i> Scalable Solutions
                    </div>
                </div>
            </div>
            <div className="hero-image-container">
                <img src="assets/hero_image.png" alt="Dashboard on Laptop" className="hero-image" />
            </div>
        </div>
    </section>
);

/**
 * About Us Section detailing Lumen advisory background and structural metrics
 */
const About = () => (
    <section id="about" className="about">
        <div className="container about-grid">
            <div className="about-text">
                <div className="badge">ABOUT LUMEN</div>
                <h2 className="about-title">Smart Operations for Sustainable Business Growth</h2>
                <p className="about-desc">
                    Lumen Management Consultancy is a premium business advisory firm based in Dubai, UAE.
                    We partner with ambitious startups, growing SMEs, and established regional entities to simplify
                    daily administrative operations, streamline compliance tax regimes, and construct interactive
                    digital customer workflows.
                </p>
            </div>

            <div className="about-content-split">
                <div className="about-values">
                    <div className="value-card">
                        <div className="value-icon bg-blue">
                            <i className="fa-solid fa-gem"></i>
                        </div>
                        <div>
                            <h4>Corporate Excellence</h4>
                            <p>We supply rigorous, detail-oriented administrative back-office and PMO services to keep your operations immaculate.</p>
                        </div>
                    </div>
                    <div className="value-card">
                        <div className="value-icon bg-purple">
                            <i className="fa-solid fa-robot"></i>
                        </div>
                        <div>
                            <h4>Smart Digital Automations</h4>
                            <p>We build automated WhatsApp replies and AI-assisted chatbot support channels to engage your clients instantly.</p>
                        </div>
                    </div>
                    <div className="value-card">
                        <div className="value-icon bg-green">
                            <i className="fa-solid fa-hand-holding-dollar"></i>
                        </div>
                        <div>
                            <h4>Cost Effective</h4>
                            <p>We offer tailored, budget-friendly advisory plans without hidden costs, designed specifically to scale with your business.</p>
                        </div>
                    </div>
                </div>

                <div className="about-stats">
                    <div className="stat-box">
                        <div className="stat-number">24/7</div>
                        <div className="stat-label">Client Support</div>
                    </div>
                    <div className="stat-box">
                        <div className="stat-number">100%</div>
                        <div className="stat-label">Tax Compliant</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
);

/**
 * Services Section mapping core competencies in processes, compliance, and automation
 */
const Services = () => (
    <section id="services" className="services">
        <div className="container">
            <div className="section-header">
                <h3 className="section-subtitle">OUR CORE SERVICES</h3>
                <h2 className="section-title">Comprehensive Solutions for Your Business</h2>
            </div>
            <div className="services-grid">
                {/* Service 1 */}
                <div className="service-card">
                    <div className="service-header">
                        <div className="service-icon bg-blue"><i className="fa-solid fa-briefcase"></i></div>
                        <h3 className="service-title">1. Business Process & Administrative Support</h3>
                    </div>
                    <p className="service-desc">Providing essential back-office services that help companies maintain smooth daily operations.</p>
                    <ul className="service-list">
                        <li><i className="fa-solid fa-circle-check text-blue"></i> Bookkeeping & ERP Support</li>
                        <li><i className="fa-solid fa-circle-check text-blue"></i> Payroll Processing</li>
                        <li><i className="fa-solid fa-circle-check text-blue"></i> Admin Outsourcing</li>
                        <li><i className="fa-solid fa-circle-check text-blue"></i> PMO (Project Management Office) Services</li>
                    </ul>
                </div>

                {/* Service 2 */}
                <div className="service-card">
                    <div className="service-header">
                        <div className="service-icon bg-green"><i className="fa-solid fa-file-invoice"></i></div>
                        <h3 className="service-title">2. Tax & Compliance Assistance</h3>
                    </div>
                    <p className="service-desc">Supporting businesses with regulatory and financial compliance requirements.</p>
                    <ul className="service-list">
                        <li><i className="fa-solid fa-circle-check text-green"></i> VAT Registration</li>
                        <li><i className="fa-solid fa-circle-check text-green"></i> VAT Filing Assistance</li>
                        <li><i className="fa-solid fa-circle-check text-green"></i> Corporate Tax Registration</li>
                        <li><i className="fa-solid fa-circle-check text-green"></i> Corporate Tax Filing Assistance</li>
                    </ul>
                </div>

                {/* Service 3 */}
                <div className="service-card">
                    <div className="service-header">
                        <div className="service-icon bg-purple"><i className="fa-solid fa-robot"></i></div>
                        <h3 className="service-title">3. Digital Automation & Customer Engagement</h3>
                    </div>
                    <p className="service-desc">Delivering smart communication and automation solutions that improve response time and efficiency.</p>
                    <ul className="service-list">
                        <li><i className="fa-solid fa-circle-check text-purple"></i> Chatbot Assistance</li>
                        <li><i className="fa-solid fa-circle-check text-purple"></i> WhatsApp Auto-Reply Assistance</li>
                        <li><i className="fa-solid fa-circle-check text-purple"></i> Website Design & Development</li>
                        <li><i className="fa-solid fa-circle-check text-purple"></i> AI Integrated Bookkeeping</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
);

/**
 * Why Choose Us Section with responsive grid displaying corporate advantages
 */
const WhyChooseUs = () => (
    <section id="why-choose-us" className="why-choose-us">
        <div className="container">
            <h3 className="why-title">WHY CHOOSE US</h3>
            <div className="features-grid">
                <div className="feature-box">
                    <div className="feature-icon"><i className="fa-solid fa-diagram-project"></i></div>
                    <div className="feature-content">
                        <h4>Integrated Solutions</h4>
                        <p>All-in-one support for operations, compliance and automation.</p>
                    </div>
                </div>
                <div className="feature-box">
                    <div className="feature-icon"><i className="fa-solid fa-gears"></i></div>
                    <div className="feature-content">
                        <h4>Automation Focused</h4>
                        <p>Smart tools and automation to save time and improve productivity.</p>
                    </div>
                </div>
                <div className="feature-box">
                    <div className="feature-icon"><i className="fa-solid fa-bolt-lightning"></i></div>
                    <div className="feature-content">
                        <h4>Fast & Responsive</h4>
                        <p>Quick turnaround and dedicated support whenever you need us.</p>
                    </div>
                </div>
                <div className="feature-box">
                    <div className="feature-icon"><i className="fa-solid fa-user-group"></i></div>
                    <div className="feature-content">
                        <h4>SME-Friendly</h4>
                        <p>Affordable and flexible services designed for startups and SMEs.</p>
                    </div>
                </div>
                <div className="feature-box">
                    <div className="feature-icon"><i className="fa-solid fa-chart-column"></i></div>
                    <div className="feature-content">
                        <h4>Scalable Support</h4>
                        <p>Services that grow with your business needs.</p>
                    </div>
                </div>
                <div className="feature-box">
                    <div className="feature-icon"><i className="fa-solid fa-user-check"></i></div>
                    <div className="feature-content">
                        <h4>Expert Team</h4>
                        <p>Experienced professionals in operations, compliance and digital solutions.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
);

/**
 * Our Clients Section focusing on core industrial verticals serviced by Lumen
 */
const Clients = () => {
    const sectors = [
        { icon: "fa-solid fa-cart-shopping", name: "E-Commerce & Retail", desc: "Automated cash flows, bookkeeping reconciliations, and responsive sales engagement." },
        { icon: "fa-solid fa-laptop-code", name: "Tech Startups & SaaS", desc: "Efficient local corporate tax frameworks and structured back-office setups." },
        { icon: "fa-solid fa-user-tie", name: "Professional Services", desc: "Agile PMO services, administrative consulting, and corporate secretary coordination." },
        { icon: "fa-solid fa-truck-moving", name: "Logistics & Trade", desc: "VAT optimization, import-export compliance checks, and regulatory support." },
        { icon: "fa-solid fa-stethoscope", name: "Healthcare & Clinics", desc: "Strict records management, staff payroll, and simplified compliance assistance." }
    ];

    return (
        <section id="clients" className="clients">
            <div className="container">
                <div className="section-header">
                    <h3 className="section-subtitle">INDUSTRIES WE SERVE</h3>
                    <h2 className="section-title">Empowering Forward-Thinking Businesses</h2>
                </div>
                <div className="clients-grid">
                    {sectors.map((sec, index) => (
                        <div className="client-card" key={index}>
                            <div className="client-card-icon">
                                <i className={sec.icon}></i>
                            </div>
                            <h4>{sec.name}</h4>
                            <p>{sec.desc}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

/**
 * Contact Us Section with fully interactive form and validations
 */
const Contact = ({
    formData,
    formErrors,
    onInputChange,
    onSubmit,
    isSubmitting,
    submitSuccess,
    onReset
}) => {
    const serviceOptions = [
        "Business Process & Administrative Support",
        "Tax & Compliance Assistance",
        "Digital Automation & Customer Engagement",
        "Other Corporate Advisory Services"
    ];

    return (
        <section id="contact" className="contact">
            <div className="container contact-grid">
                <div className="contact-info">
                    <div>
                        <div className="badge">GET IN TOUCH</div>
                        <h2 className="contact-title">Let's Streamline Your Operations</h2>
                        <p className="contact-subtitle">
                            Have questions or want to partner with us? Leave a message or connect directly
                            using our corporate email, WhatsApp, or telephone.
                        </p>
                    </div>

                    <div className="contact-card">
                        <div className="contact-card-icon">
                            <i className="fa-solid fa-envelope"></i>
                        </div>
                        <div className="contact-card-content">
                            <h4>Direct Email Inquiry</h4>
                            <p>
                                <a href="mailto:lumenconsultancy.ae@gmail.com">
                                    lumenconsultancy.ae@gmail.com
                                </a>
                            </p>
                        </div>
                    </div>

                    <div className="contact-card">
                        <div className="contact-card-icon">
                            <i className="fa-brands fa-whatsapp"></i>
                        </div>
                        <div className="contact-card-content">
                            <h4>Direct WhatsApp / Call</h4>
                            <p>
                                <a href="https://wa.me/971564718587" target="_blank" rel="noopener noreferrer">
                                    +971 56 471 8587
                                </a>
                            </p>
                        </div>
                    </div>

                    <div className="contact-card">
                        <div className="contact-card-icon">
                            <i className="fa-solid fa-location-dot"></i>
                        </div>
                        <div className="contact-card-content">
                            <h4>Corporate Head Office</h4>
                            <p>Dubai, United Arab Emirates</p>
                        </div>
                    </div>
                </div>

                {/* Contact Form with Custom Inputs */}
                <div className="contact-form-container">
                    {submitSuccess ? (
                        <div className="contact-success-inline">
                            <div className="success-icon-circle">
                                <i className="fa-solid fa-circle-check"></i>
                            </div>
                            <h3>Message Sent!</h3>
                            <p className="contact-success-message">
                                Thank you for contacting Lumen. Your consultation request has been received.
                                A senior business advisory consultant will review your inquiry and reach out
                                within 2 business hours.
                            </p>
                            <button className="btn btn-outline" style={{ width: '100%', marginTop: '20px' }} onClick={onReset}>
                                Send Another Message
                            </button>
                        </div>
                    ) : (
                        <form className="contact-form" onSubmit={onSubmit} noValidate>
                            <div className="form-group">
                                <label htmlFor="name">Full Name *</label>
                                <input
                                    type="text"
                                    id="name"
                                    name="name"
                                    className={`form-control ${formErrors.name ? 'error' : ''}`}
                                    placeholder="Enter your full name"
                                    value={formData.name}
                                    onChange={onInputChange}
                                    disabled={isSubmitting}
                                />
                                {formErrors.name && <span className="error-text">{formErrors.name}</span>}
                            </div>

                            <div className="form-group">
                                <label htmlFor="email">Email Address *</label>
                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    className={`form-control ${formErrors.email ? 'error' : ''}`}
                                    placeholder="name@company.com"
                                    value={formData.email}
                                    onChange={onInputChange}
                                    disabled={isSubmitting}
                                />
                                {formErrors.email && <span className="error-text">{formErrors.email}</span>}
                            </div>

                            <div className="form-group">
                                <label htmlFor="phone">Phone Number (Optional)</label>
                                <input
                                    type="tel"
                                    id="phone"
                                    name="phone"
                                    className="form-control"
                                    placeholder="+971 ** *** ****"
                                    value={formData.phone}
                                    onChange={onInputChange}
                                    disabled={isSubmitting}
                                />
                            </div>

                            <div className="form-group">
                                <label htmlFor="service">Required Consultation Service *</label>
                                <select
                                    id="service"
                                    name="service"
                                    className={`form-control ${formErrors.service ? 'error' : ''}`}
                                    value={formData.service}
                                    onChange={onInputChange}
                                    disabled={isSubmitting}
                                >
                                    <option value="">Select a service category...</option>
                                    {serviceOptions.map((srv, idx) => (
                                        <option key={idx} value={srv}>{srv}</option>
                                    ))}
                                </select>
                                {formErrors.service && <span className="error-text">{formErrors.service}</span>}
                            </div>

                            <div className="form-group">
                                <label htmlFor="message">Message Details *</label>
                                <textarea
                                    id="message"
                                    name="message"
                                    rows="4"
                                    className={`form-control ${formErrors.message ? 'error' : ''}`}
                                    placeholder="Please describe how we can support your business requirements..."
                                    value={formData.message}
                                    onChange={onInputChange}
                                    disabled={isSubmitting}
                                ></textarea>
                                {formErrors.message && <span className="error-text">{formErrors.message}</span>}
                            </div>

                            <button type="submit" className="btn btn-primary" disabled={isSubmitting}>
                                {isSubmitting ? 'Sending Request...' : 'Send Message \u2192'}
                            </button>
                        </form>
                    )}
                </div>
            </div>
        </section>
    );
};

/**
 * Standardized Footer containing details and smooth anchors
 */
const Footer = ({ onLinkClick }) => (
    <footer className="footer">
        <div className="container footer-content">
            <div className="footer-item">
                <i className="fa-solid fa-location-dot footer-icon"></i>
                <div className="footer-text">
                    <h4>Dubai, UAE</h4>
                    <p>Proudly serving businesses across the UAE<br />and beyond.</p>
                </div>
            </div>
            <div className="footer-divider"></div>
            <div className="footer-item">
                <i className="fa-regular fa-envelope footer-icon"></i>
                <div className="footer-text">
                    <h4>Email Us</h4>
                    <p>
                        <a href="mailto:lumenconsultancy.ae@gmail.com" style={{ color: 'white', textDecoration: 'none' }}>
                            lumenconsultancy.ae@gmail.com
                        </a>
                    </p>
                </div>
            </div>
            <div className="footer-divider"></div>
            <div className="footer-item">
                <i className="fa-brands fa-whatsapp footer-icon"></i>
                <div className="footer-text">
                    <h4>Call / WhatsApp</h4>
                    <p>
                        <a href="https://wa.me/971564718587" target="_blank" rel="noopener noreferrer" style={{ color: 'white', textDecoration: 'none' }}>
                            +971 56 471 8587
                        </a>
                    </p>
                </div>
            </div>
            <div className="footer-action">
                <a href="#contact" className="btn btn-white" onClick={(e) => onLinkClick(e, 'contact')}>
                    Let's Grow Together &rarr;
                </a>
            </div>
        </div>
    </footer>
);

/**
 * Master Application Coordinator Component
 */
const App = () => {
    // Navigation & Layout Scrollspy States
    const [activeSection, setActiveSection] = useState('home');
    const [isScrolled, setIsScrolled] = useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    // Contact Form States
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        phone: '',
        service: '',
        message: ''
    });
    const [formErrors, setFormErrors] = useState({});
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitSuccess, setSubmitSuccess] = useState(false);

    // ScrollSpy & Sticky Header Scroll Listeners
    useEffect(() => {
        const handleScroll = () => {
            // Apply header scrolled modifier
            if (window.scrollY > 30) {
                setIsScrolled(true);
            } else {
                setIsScrolled(false);
            }

            // Detect visible viewport sections on the single page layout
            const sections = ['home', 'services', 'about', 'why-choose-us', 'clients', 'contact'];
            const scrollPosition = window.scrollY + 100; // sticky header buffer offset

            for (const section of sections) {
                const el = document.getElementById(section);
                if (el) {
                    const top = el.offsetTop;
                    const height = el.offsetHeight;
                    if (scrollPosition >= top && scrollPosition < top + height) {
                        setActiveSection(section);
                        break;
                    }
                }
            }
        };

        window.addEventListener('scroll', handleScroll);
        handleScroll(); // Trigger initially on page load
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // Smooth scroll navigator callback & modal router
    const handleNavLinkClick = (e, targetId) => {
        if (e) e.preventDefault();
        setMobileMenuOpen(false); // Auto close mobile nav drawer

        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            const headerOffset = 75; // Sticky header padding compensation
            const elementPosition = targetElement.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });

            // Fast transition active link status
            setActiveSection(targetId);
        }
    };

    // Text & Input changes handler
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));

        // Dynamic clear warning errors on typing
        if (formErrors[name]) {
            setFormErrors(prev => ({
                ...prev,
                [name]: ''
            }));
        }
    };

    // Strict validation parameters
    const validateForm = () => {
        const errors = {};

        if (!formData.name.trim()) {
            errors.name = 'Full name is required.';
        }

        if (!formData.email.trim()) {
            errors.email = 'Email address is required.';
        } else {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(formData.email)) {
                errors.email = 'Please enter a valid email address.';
            }
        }

        if (!formData.service) {
            errors.service = 'Please choose a consultation category.';
        }

        if (!formData.message.trim()) {
            errors.message = 'Message details are required.';
        }

        setFormErrors(errors);
        return Object.keys(errors).length === 0;
    };

    // Submit simulator
    const handleFormSubmit = (e) => {
        e.preventDefault();

        if (!validateForm()) {
            return;
        }

        setIsSubmitting(true);

        // Mimic API post roundtrip latency
        setTimeout(() => {
            setIsSubmitting(false);
            setSubmitSuccess(true);

            // Clear input metrics
            setFormData({
                name: '',
                email: '',
                phone: '',
                service: '',
                message: ''
            });
        }, 1200);
    };

    const handleResetForm = () => {
        setSubmitSuccess(false);
    };

    return (
        <React.Fragment>
            <div className="app-container">
                <Header
                    activeSection={activeSection}
                    isScrolled={isScrolled}
                    mobileMenuOpen={mobileMenuOpen}
                    setMobileMenuOpen={setMobileMenuOpen}
                    onLinkClick={handleNavLinkClick}
                />
                <Hero onLinkClick={handleNavLinkClick} />
                <Services />
                <WhyChooseUs />
                <About />
                <Clients />
                <Contact
                    formData={formData}
                    formErrors={formErrors}
                    onInputChange={handleInputChange}
                    onSubmit={handleFormSubmit}
                    isSubmitting={isSubmitting}
                    submitSuccess={submitSuccess}
                    onReset={handleResetForm}
                />
                <Footer onLinkClick={handleNavLinkClick} />
            </div>
        </React.Fragment>
    );
};

// Instantiate and Mount React 18 Application Root
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);