{% extends 'portfolio/base.html' %}

{% block title %}ChrisDev - Full Stack Developer & Designer{% endblock %}

{% block content %}

<!-- Hero Section -->
<section class="gradient-animated min-h-screen flex items-center py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Left Content -->
            <div class="text-white space-y-6">
                <h1 class="text-5xl md:text-6xl font-bold leading-tight" data-aos="fade-right" data-aos-duration="1000">
                    Hi, I'm <span class="text-yellow-300">Chris</span>
                </h1>
                <h2 class="text-3xl md:text-4xl font-semibold" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000">
                    {% if about %}{{ about.tagline }}{% else %}Full Stack Developer & Designer{% endif %}
                </h2>
                <p class="text-xl text-gray-200" data-aos="fade-right" data-aos-delay="400" data-aos-duration="1000">
                    {% if about %}{{ about.bio|truncatewords:30 }}{% else %}
                    I build beautiful, functional websites and applications that help businesses grow and succeed in the digital world.
                    {% endif %}
                </p>
                <div class="flex flex-wrap gap-4" data-aos="fade-right" data-aos-delay="600" data-aos-duration="1000">
                    <a href="{% url 'portfolio:projects' %}" class="bg-white text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 hover:scale-110 transition-all duration-300 inline-block">
                        View My Work
                    </a>
                    <a href="{% url 'portfolio:contact' %}" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 hover:scale-110 transition-all duration-300 inline-block">
                        Get In Touch
                    </a>
                </div>
                
                <!-- Stats -->
                <div class="grid grid-cols-3 gap-6 pt-8">
                    <div class="hover:scale-110 transition-transform duration-300" data-aos="zoom-in" data-aos-delay="800">
                        <h3 class="text-4xl font-bold">{% if about %}{{ about.years_experience }}{% else %}5{% endif %}+</h3>
                        <p class="text-gray-200">Years Experience</p>
                    </div>
                    <div class="hover:scale-110 transition-transform duration-300" data-aos="zoom-in" data-aos-delay="900">
                        <h3 class="text-4xl font-bold">{% if about %}{{ about.projects_completed }}{% else %}50{% endif %}+</h3>
                        <p class="text-gray-200">Projects Done</p>
                    </div>
                    <div class="hover:scale-110 transition-transform duration-300" data-aos="zoom-in" data-aos-delay="1000">
                        <h3 class="text-4xl font-bold">{% if about %}{{ about.happy_clients }}{% else %}30{% endif %}+</h3>
                        <p class="text-gray-200">Happy Clients</p>
                    </div>
                </div>
            </div>
            
            <!-- Right Content - Image -->
            <div class="flex justify-center lg:justify-end" data-aos="fade-left" data-aos-duration="1000">
                <div class="relative">
                    {% if about and about.profile_image %}
                    <img src="{{ about.profile_image.url }}" alt="Chris" class="w-80 h-80 rounded-full object-cover border-8 border-white shadow-2xl float-animation hover:scale-105 transition-transform duration-500">
                    {% else %}
                    <div class="w-80 h-80 rounded-full bg-white/20 glass-effect flex items-center justify-center float-animation hover:scale-105 transition-transform duration-500">
                        <i class="fas fa-user text-white text-9xl pulse-slow"></i>
                    </div>
                    {% endif %}
                    <div class="absolute -bottom-4 -right-4 bg-yellow-400 text-purple-900 px-6 py-3 rounded-full font-bold shadow-lg pulse-slow">
                        Available for Work
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="py-20 bg-white" id="services">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4" data-aos="fade-up">What I Do</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                I offer a range of services to help bring your ideas to life
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {% if services %}
                {% for service in services %}
                <div class="bg-gradient-to-br from-purple-50 to-blue-50 p-8 rounded-2xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 group" data-aos="flip-up" data-aos-delay="{% cycle '0' '100' '200' %}">
                    <div class="gradient-bg w-16 h-16 rounded-full flex items-center justify-center mb-6 group-hover:scale-125 transition-transform duration-300 float-animation">
                        <i class="fas fa-{{ service.icon }} text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-purple-600 transition-colors duration-300">{{ service.title }}</h3>
                    <p class="text-gray-600">{{ service.description }}</p>
                </div>
                {% endfor %}
            {% else %}
                <!-- Default Services -->
                <div class="bg-gradient-to-br from-purple-50 to-blue-50 p-8 rounded-2xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 group" data-aos="flip-up">
                    <div class="gradient-bg w-16 h-16 rounded-full flex items-center justify-center mb-6 float-animation">
                        <i class="fas fa-code text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Web Development</h3>
                    <p class="text-gray-600">Building responsive, modern websites using latest technologies like Django, React, and Tailwind CSS.</p>
                </div>
                
                <div class="bg-gradient-to-br from-purple-50 to-blue-50 p-8 rounded-2xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 group" data-aos="flip-up" data-aos-delay="100">
                    <div class="gradient-bg w-16 h-16 rounded-full flex items-center justify-center mb-6 float-animation">
                        <i class="fas fa-mobile-alt text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Mobile Apps</h3>
                    <p class="text-gray-600">Creating beautiful, user-friendly mobile applications for iOS and Android platforms.</p>
                </div>
                
                <div class="bg-gradient-to-br from-purple-50 to-blue-50 p-8 rounded-2xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 group" data-aos="flip-up" data-aos-delay="200">
                    <div class="gradient-bg w-16 h-16 rounded-full flex items-center justify-center mb-6 float-animation">
                        <i class="fas fa-palette text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">UI/UX Design</h3>
                    <p class="text-gray-600">Designing intuitive interfaces that provide excellent user experiences and drive conversions.</p>
                </div>
            {% endif %}
        </div>
        
        <div class="text-center mt-12" data-aos="fade-up" data-aos-delay="300">
            <a href="{% url 'portfolio:services' %}" class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 hover:scale-110 transition-all duration-300 inline-block">
                View All Services
            </a>
        </div>
    </div>
</section>

<!-- Featured Projects -->
<section class="py-20 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-gray-900 mb-4" data-aos="fade-up">Featured Projects</h2>
      <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
        Some of my recent work that I'm proud of
      </p>
    </div>

    <!-- Featured Projects Carousel -->
    <div id="projectCarousel" class="relative w-full max-w-4xl mx-auto h-96 flex items-center justify-center overflow-hidden">
    {% for project in featured_projects %}
    <div class="project-card absolute w-80 md:w-96 lg:w-[360px] h-80 md:h-96 lg:h-[380px] rounded-2xl shadow-lg overflow-hidden transition-all duration-700 transform scale-90 opacity-50 cursor-pointer">
        {% if project.image %}
        <img src="{{ project.image.url }}" alt="{{ project.title }}" class="w-full h-full object-cover">
        {% else %}
        <div class="w-full h-full bg-gradient-to-br from-purple-400 to-blue-400 flex items-center justify-center">
        <i class="fas fa-image text-white text-6xl"></i>
        </div>
        {% endif %}
        <div class="absolute bottom-4 left-4 bg-white/90 px-4 py-2 rounded-lg shadow-lg">
        <h3 class="font-bold text-gray-900">{{ project.title }}</h3>
        {% if project.live_url %}
        <a href="{{ project.live_url }}" target="_blank" class="text-purple-600 hover:underline text-sm">Live</a>
        {% endif %}
        </div>
    </div>
    {% endfor %}
    </div>

  </div>
</section>


<!-- Testimonials -->
{% if testimonials %}
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4" data-aos="fade-up">What Clients Say</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                Don't just take my word for it
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {% for testimonial in testimonials %}
            <div class="bg-gradient-to-br from-purple-50 to-blue-50 p-8 rounded-2xl hover:shadow-xl transition-all duration-500 hover:-translate-y-2" data-aos="fade-up" data-aos-delay="{% cycle '0' '100' '200' %}">
                <div class="flex items-center mb-6">
                    {% if testimonial.client_image %}
                    <img src="{{ testimonial.client_image.url }}" alt="{{ testimonial.client_name }}" class="w-16 h-16 rounded-full object-cover mr-4 hover:scale-110 transition-transform duration-300">
                    {% else %}
                    <div class="w-16 h-16 rounded-full bg-purple-200 flex items-center justify-center mr-4 hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-user text-purple-600 text-2xl"></i>
                    </div>
                    {% endif %}
                    <div>
                        <h4 class="font-bold text-gray-900">{{ testimonial.client_name }}</h4>
                        <p class="text-sm text-gray-600">{{ testimonial.client_position }}</p>
                    </div>
                </div>
                <div class="flex mb-4">
                    {% for i in "12345"|make_list %}
                        <i class="fas fa-star {% if forloop.counter <= testimonial.rating %}text-yellow-400{% else %}text-gray-300{% endif %} transition-all duration-300 hover:scale-125"></i>
                    {% endfor %}
                </div>
                <p class="text-gray-700 italic">"{{ testimonial.testimonial }}"</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Latest Blog Posts -->
{% if blog_posts %}
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-gray-900 mb-4" data-aos="fade-up">Latest from Blog</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                Insights, tutorials, and stories from my journey
            </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {% for post in blog_posts %}
            <article class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 group" data-aos="fade-up" data-aos-delay="{% cycle '0' '100' '200' %}">
                <a href="{% url 'portfolio:blog_detail' post.slug %}">
                    {% if post.featured_image %}
                    <img src="{{ post.featured_image.url }}" alt="{{ post.title }}" class="w-full h-56 object-cover group-hover:scale-110 transition-transform duration-500">
                    {% else %}
                    <div class="w-full h-56 bg-gradient-to-br from-purple-400 to-blue-400 flex items-center justify-center">
                        <i class="fas fa-file-alt text-white text-6xl float-animation"></i>
                    </div>
                    {% endif %}
                </a>
                <div class="p-6">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-sm text-purple-600 font-semibold">{{ post.category.name }}</span>
                        <span class="text-sm text-gray-500">{{ post.read_time }} min read</span>
                    </div>
                    <a href="{% url 'portfolio:blog_detail' post.slug %}">
                        <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-purple-600 transition-colors duration-300">{{ post.title }}</h3>
                    </a>
                    <p class="text-gray-600 mb-4">{{ post.excerpt|truncatewords:15 }}</p>
                    <div class="flex items-center justify-between text-sm text-gray-500">
                        <span><i class="far fa-calendar mr-2"></i>{{ post.published_date|date:"M d, Y" }}</span>
                        <span><i class="far fa-eye mr-2"></i>{{ post.views }} views</span>
                    </div>
                    <div class="mt-4">
                        <a href="{% url 'portfolio:blog_detail' post.slug %}" class="text-purple-600 font-semibold hover:text-purple-700 transition-all duration-300 inline-flex items-center group">
                            Read More
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform duration-300"></i>
                        </a>
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
        
        <div class="text-center mt-12" data-aos="fade-up">
            <a href="{% url 'portfolio:blog_list' %}" class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 hover:scale-110 transition-all duration-300 inline-block">
                View All Posts
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- CTA Section -->
<section class="gradient-animated py-20">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
        <h2 class="text-4xl font-bold mb-6" data-aos="zoom-in">Ready to Start Your Project?</h2>
        <p class="text-xl mb-8 text-gray-200" data-aos="zoom-in" data-aos-delay="100">
            Let's work together to bring your ideas to life
        </p>
        <a href="{% url 'portfolio:contact' %}" class="bg-white text-purple-600 px-10 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 hover:scale-110 transition-all duration-300 inline-block" data-aos="zoom-in" data-aos-delay="200">
            Get Started Today
        </a>
    </div>
</section>

<script>
  const cards = document.querySelectorAll('#projectCarousel .project-card');
  let current = 0;

  function updateCarousel() {
    cards.forEach((card, i) => {
      const pos = (i - current + cards.length) % cards.length;
      if (pos === 0) {
        card.style.transform = 'translateX(0) scale(1)';
        card.style.opacity = '1';
        card.style.zIndex = '10';
      } else if (pos === 1 || pos === cards.length - 1) {
        const offset = pos === 1 ? 220 : -220; // spacing for side cards
        card.style.transform = `translateX(${offset}px) scale(0.85) rotateY(${pos === 1 ? -10 : 10}deg)`;
        card.style.opacity = '0.6';
        card.style.zIndex = '5';
      } else {
        card.style.transform = 'translateX(0) scale-90';
        card.style.opacity = '0';
        card.style.zIndex = '1';
      }
    });
  }

  updateCarousel();
  setInterval(() => {
    current = (current + 1) % cards.length;
    updateCarousel();
  }, 3000);
</script>

{% endblock %}