{% extends 'base.html' %}
{% load static %}

{% block title %}NetCop AI Hub - AI & Cybersecurity Solutions{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'css/homepage.css' %}">
{% endblock %}

{% block content %}
<style>
/* Override main-container for homepage full-width sections */
.main-container {
    max-width: none;
    padding: 0;
}
</style>
<!-- Hero Section -->
<section id="home" class="hero">
    <div class="hero-container">
        <!-- Trust Badge -->
        <div class="trust-badge">
            <span class="trust-badge-emoji">✨</span>
            <span>Trusted by Industry Leaders</span>
        </div>

        <h1 class="hero-title">
            <span class="hero-title-gradient">
                AI & Cybersecurity
            </span>
            <br />
            <span class="hero-title-normal">
                Solutions
            </span>
        </h1>

        <p class="hero-description">
            Secure your digital future with state-of-the-art AI solutions and expert cybersecurity strategies tailored for your business needs.
        </p>

        <!-- CTA Buttons -->
        <div class="hero-buttons">
            {% if user.is_authenticated %}
                <a href="{% url 'core:marketplace' %}" class="btn-primary">
                    Explore AI Hub
                </a>
                <a href="{% url 'core:wallet' %}" class="btn-secondary">
                    Manage Wallet
                </a>
            {% else %}
                <a href="{% url 'authentication:register' %}" class="btn-primary">
                    Get Protected Now
                </a>
                <a href="{% url 'core:marketplace' %}" class="btn-secondary">
                    Explore AI Hub
                </a>
            {% endif %}
        </div>

        <!-- Trust Indicators -->
        <div class="trust-indicators">
            <div class="trust-card">
                <div class="trust-number">
                    18+
                </div>
                <div class="trust-text">
                    Years Experience
                </div>
            </div>
            <div class="trust-card">
                <div class="trust-number">
                    24/7
                </div>
                <div class="trust-text">
                    Rapid Response
                </div>
            </div>
            <div class="trust-card">
                <div class="trust-number">
                    100%
                </div>
                <div class="trust-text">
                    Secure Solutions
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Company Profile Section -->
<section id="about" class="company-profile">
    <div class="company-container">
        <!-- Section Header -->
        <div class="section-header">
            <div class="section-badge">
                <span class="section-badge-icon">🏢</span>
                <span class="section-badge-text">About Netcop Consultancy</span>
            </div>
            <h2 class="section-title">
                Your Trusted Digital Guardian
            </h2>
            <p class="section-subtitle">
                Pioneering the future of cybersecurity with AI-powered solutions
            </p>
        </div>

        <div class="company-grid">
            <!-- Content Side -->
            <div>
                <div class="company-content-card">
                    <!-- Decorative corner -->
                    <div class="decorative-corner">
                        🛡️
                    </div>

                    <h3 class="company-content-title">
                        Defending Digital Frontiers
                    </h3>
                    
                    <p class="company-content-text">
                        At Netcop Consultancy, we provide <strong>state-of-the-art AI & Cybersecurity solutions</strong> tailored to safeguard your business. From advanced AI Agents to robust defense strategies, we empower you to navigate the digital world with confidence.
                    </p>

                    <!-- Enhanced badges -->
                    <div class="company-badges">
                        <div class="company-badge company-badge-primary">
                            <div class="company-badge-icon">📅</div>
                            18+ Years Experience
                        </div>
                        <div class="company-badge company-badge-purple">
                            <div class="company-badge-icon">🏆</div>
                            Top Certifications
                        </div>
                    </div>

                    <div class="company-badge company-badge-orange">
                        <div class="company-badge-icon">⚫</div>
                        Lean Six Sigma Black Belt
                    </div>
                </div>
            </div>

            <!-- Visual Side -->
            <div class="company-visual">
                <!-- Main visual container -->
                <div class="main-visual">
                    <!-- Main icon -->
                    <div class="main-visual-icon">
                        🛡️
                    </div>
                </div>

                <!-- Floating elements around the main visual -->
                <div class="floating-element floating-element-1">
                    🔒
                </div>
                <div class="floating-element floating-element-2">
                    🤖
                </div>
            </div>
        </div>

        <!-- Bottom achievement strip -->
        <div class="achievement-strip">
            <div class="achievement-item">
                <div class="achievement-icon">🎯</div>
                <div class="achievement-title">Mission Critical</div>
                <div class="achievement-text">Zero Compromise</div>
            </div>
            <div class="achievement-item">
                <div class="achievement-icon">⚡</div>
                <div class="achievement-title">Rapid Response</div>
                <div class="achievement-text">24/7 Protection</div>
            </div>
            <div class="achievement-item">
                <div class="achievement-icon">🔬</div>
                <div class="achievement-title">Innovation</div>
                <div class="achievement-text">Cutting Edge Tech</div>
            </div>
            <div class="achievement-item">
                <div class="achievement-icon">🤝</div>
                <div class="achievement-title">Trusted Partner</div>
                <div class="achievement-text">Industry Leaders</div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section id="services" class="services">
    <div class="services-container">
        <h2 class="services-title">
            Our Services
        </h2>
        <p class="services-subtitle">
            Tailored strategies for your business
        </p>
        <div class="services-grid">
            <div class="service-card">
                <div class="service-icon">🛡️</div>
                <h3 class="service-title">Cybersecurity Consultation</h3>
                <p class="service-description">
                    Tailored strategies, advanced threat detection, and comprehensive security frameworks to protect your digital assets and business operations.
                </p>
            </div>
            <div class="service-card">
                <div class="service-icon">🤖</div>
                <h3 class="service-title">AI Based Automation</h3>
                <p class="service-description">
                    Empower your Business with AI. Strategic AI adoption, machine learning solutions, and intelligent automation to transform your processes.
                </p>
            </div>
            <div class="service-card">
                <div class="service-icon">⚡</div>
                <h3 class="service-title">Rapid Response Solutions</h3>
                <p class="service-description">
                    Rapid response to minimize damage. Emergency incident response and real-time threat mitigation to protect your business.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Clients Section -->
<section class="clients">
    <div class="clients-container">
        <h2 class="clients-title">
            Our Clients
        </h2>
        <div class="clients-grid">
            <div class="client-card">
                <div class="client-icon">🏭</div>
                <h3 class="client-name">MTSV Foods Industries Pvt Ltd</h3>
                <p class="client-industry">Food & Beverage Industry</p>
            </div>
            <div class="client-card">
                <div class="client-icon">🏗️</div>
                <h3 class="client-name">Apple Tree Industries</h3>
                <p class="client-industry">Manufacturing & Processing</p>
            </div>
            <div class="client-card">
                <div class="client-icon">💻</div>
                <h3 class="client-name">TechStart Solutions</h3>
                <p class="client-industry">Technology Consulting</p>
            </div>
            <div class="client-card">
                <div class="client-icon">🚚</div>
                <h3 class="client-name">Global Logistics Corp</h3>
                <p class="client-industry">Supply Chain Management</p>
            </div>
        </div>
    </div>
</section>

<!-- Founder Section -->
<section class="founder">
    <div class="founder-container">
        <h2 class="founder-title">
            Our Founder
        </h2>
        <div class="founder-grid">
            <div class="founder-card-container">
                <div class="founder-card">
                    <div class="founder-avatar">👨‍💼</div>
                    <h3 class="founder-name">Abhay Pal Chauhan</h3>
                    <p class="founder-role">
                        Founder & Principal Consultant
                    </p>
                    <div class="founder-badges">
                        <div class="founder-badge">
                            18+ Years Experience
                        </div>
                        <div class="founder-badge">
                            Cybersecurity Expert
                        </div>
                        <div class="founder-badge">
                            Six Sigma Black Belt
                        </div>
                    </div>
                </div>
            </div>
            <div class="founder-content">
                <p class="founder-text">
                    Our Founder leverages over <strong>18 years of expertise</strong> in cybersecurity and process automation and optimization, backed by top certifications in Cybersecurity and <strong>Black Belt in Lean Six Sigma</strong>.
                </p>
                <p class="founder-text">
                    His unique blend of technical knowledge and operational excellence ensures <strong>tailored, secure, and efficient solutions</strong> for our clients, driving business resilience and maximizing value in every engagement.
                </p>
                <div class="founder-quote">
                    <p class="founder-quote-text">
                        "Delivering top-tier solutions that combine cutting-edge technology with proven operational methodologies to secure and optimize your business operations."
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="contact">
    <div class="contact-container">
        <h2 class="contact-title">
            Get In Touch
        </h2>
        <div class="contact-grid">
            <!-- Contact Form -->
            <form class="contact-form" method="post" action="#">
                {% csrf_token %}
                <h3 class="form-title">Send us a Message</h3>
                <div class="form-group">
                    <label for="name" class="form-label">Full Name</label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        required
                        class="form-input"
                    />
                </div>
                <div class="form-group">
                    <label for="email" class="form-label">Email Address</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        class="form-input"
                    />
                </div>
                <div class="form-group">
                    <label for="company" class="form-label">Company</label>
                    <input
                        type="text"
                        id="company"
                        name="company"
                        class="form-input"
                    />
                </div>
                <div class="form-group">
                    <label for="message" class="form-label">Message</label>
                    <textarea
                        id="message"
                        name="message"
                        required
                        class="form-textarea"
                    ></textarea>
                </div>
                <button type="submit" class="form-submit">
                    Send Message
                </button>
            </form>

            <!-- Contact Information -->
            <div class="contact-info">
                <h3 class="contact-info-title">Contact Information</h3>
                
                <!-- Mailing Address -->
                <div class="contact-item">
                    <div class="contact-icon">
                        📍
                    </div>
                    <div class="contact-details">
                        <h4>Mailing Address</h4>
                        <p>
                            Meydan Grandstand, 6th floor<br />
                            Meydan Road, Nad Al Sheba<br />
                            Dubai, U.A.E.
                        </p>
                    </div>
                </div>

                <!-- Email Address -->
                <div class="contact-item">
                    <div class="contact-icon">
                        ✉️
                    </div>
                    <div class="contact-details">
                        <h4>Email Address</h4>
                        <p>
                            <a href="mailto:abhay@netcopconsultancy.com" class="contact-email">
                                abhay@netcopconsultancy.com
                            </a>
                        </p>
                    </div>
                </div>

                <!-- Commitment Statement -->
                <div class="commitment-statement">
                    <p class="commitment-text">
                        We are committed to deliver top-tier AI & Cybersecurity solutions for businesses of all sizes.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
    // Contact form submission
    document.addEventListener('DOMContentLoaded', function() {
        const contactForm = document.querySelector('.contact-form');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                alert('Thank you for your message! We will get back to you within 24 hours.');
                this.reset();
            });
        }
    });
</script>
{% endblock %}