{% extends 'base.html' %}

{% block title %}Portfolio - DevCraft Studios{% endblock %}

{% block content %}
<!-- Page Header -->
<section class="page-header">
    <div class="container">
        <h1 class="page-title glow-text">Our <span class="highlight-text">Portfolio</span></h1>
        <div class="page-breadcrumb">
            <a href="{{ url_for('index') }}">Home</a> / Portfolio
        </div>
    </div>
</section>

<!-- Portfolio Gallery Section -->
<section class="portfolio-section">
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title">Our Latest <span class="highlight-text">Projects</span></h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">Showcasing our best work across various industries</p>
        </div>
        
        <div class="portfolio-filter text-center">
            <ul class="portfolio-filter-menu">
                <li class="filter-item active" data-filter="all">All</li>
                <li class="filter-item" data-filter="ecommerce">E-Commerce</li>
                <li class="filter-item" data-filter="business">Business</li>
                <li class="filter-item" data-filter="portfolio">Portfolio</li>
                <li class="filter-item" data-filter="blog">Blog</li>
            </ul>
        </div>
        
        <div class="row g-4 mt-4 portfolio-gallery">
            <!-- E-Commerce Project -->
            <div class="col-md-6 col-lg-4 portfolio-item ecommerce">
                <div class="portfolio-card">
                    <div class="portfolio-image">
                        <div class="portfolio-placeholder">
                            <i class="fas fa-store"></i>
                            <span>E-Commerce</span>
                        </div>
                    </div>
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3 class="portfolio-title">TechGear Shop</h3>
                            <p class="portfolio-category">E-Commerce</p>
                            <div class="portfolio-description">
                                Modern e-commerce platform with seamless checkout experience and product management system.
                            </div>
                            <div class="portfolio-technologies">
                                <span class="tech-tag">HTML5</span>
                                <span class="tech-tag">CSS3</span>
                                <span class="tech-tag">JavaScript</span>
                                <span class="tech-tag">PHP</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Business Website -->
            <div class="col-md-6 col-lg-4 portfolio-item business">
                <div class="portfolio-card">
                    <div class="portfolio-image">
                        <div class="portfolio-placeholder">
                            <i class="fas fa-building"></i>
                            <span>Corporate Site</span>
                        </div>
                    </div>
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3 class="portfolio-title">InnovateGroup</h3>
                            <p class="portfolio-category">Business</p>
                            <div class="portfolio-description">
                                Professional corporate website with service showcases and team profiles for a consulting firm.
                            </div>
                            <div class="portfolio-technologies">
                                <span class="tech-tag">HTML5</span>
                                <span class="tech-tag">CSS3</span>
                                <span class="tech-tag">JavaScript</span>
                                <span class="tech-tag">Bootstrap</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Restaurant Website -->
            <div class="col-md-6 col-lg-4 portfolio-item business">
                <div class="portfolio-card">
                    <div class="portfolio-image">
                        <div class="portfolio-placeholder">
                            <i class="fas fa-utensils"></i>
                            <span>Restaurant</span>
                        </div>
                    </div>
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3 class="portfolio-title">Gourmet Bistro</h3>
                            <p class="portfolio-category">Business</p>
                            <div class="portfolio-description">
                                Elegant restaurant website with online reservation system and digital menu.
                            </div>
                            <div class="portfolio-technologies">
                                <span class="tech-tag">HTML5</span>
                                <span class="tech-tag">CSS3</span>
                                <span class="tech-tag">JavaScript</span>
                                <span class="tech-tag">Flask</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Photography Portfolio -->
            <div class="col-md-6 col-lg-4 portfolio-item portfolio">
                <div class="portfolio-card">
                    <div class="portfolio-image">
                        <div class="portfolio-placeholder">
                            <i class="fas fa-camera"></i>
                            <span>Photography</span>
                        </div>
                    </div>
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3 class="portfolio-title">LensCraft</h3>
                            <p class="portfolio-category">Portfolio</p>
                            <div class="portfolio-description">
                                Minimalist photography portfolio with gallery views and client booking system.
                            </div>
                            <div class="portfolio-technologies">
                                <span class="tech-tag">HTML5</span>
                                <span class="tech-tag">CSS3</span>
                                <span class="tech-tag">JavaScript</span>
                                <span class="tech-tag">jQuery</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Personal Blog -->
            <div class="col-md-6 col-lg-4 portfolio-item blog">
                <div class="portfolio-card">
                    <div class="portfolio-image">
                        <div class="portfolio-placeholder">
                            <i class="fas fa-blog"></i>
                            <span>Blog</span>
                        </div>
                    </div>
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3 class="portfolio-title">TravelTales</h3>
                            <p class="portfolio-category">Blog</p>
                            <div class="portfolio-description">
                                Travel blog with content management system and social sharing features.
                            </div>
                            <div class="portfolio-technologies">
                                <span class="tech-tag">HTML5</span>
                                <span class="tech-tag">CSS3</span>
                                <span class="tech-tag">JavaScript</span>
                                <span class="tech-tag">WordPress</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Dashboard Application -->
            <div class="col-md-6 col-lg-4 portfolio-item business">
                <div class="portfolio-card">
                    <div class="portfolio-image">
                        <div class="portfolio-placeholder">
                            <i class="fas fa-chart-line"></i>
                            <span>Dashboard</span>
                        </div>
                    </div>
                    <div class="portfolio-overlay">
                        <div class="portfolio-content">
                            <h3 class="portfolio-title">DataViz Pro</h3>
                            <p class="portfolio-category">Business</p>
                            <div class="portfolio-description">
                                Comprehensive dashboard for data visualization with real-time analytics.
                            </div>
                            <div class="portfolio-technologies">
                                <span class="tech-tag">HTML5</span>
                                <span class="tech-tag">CSS3</span>
                                <span class="tech-tag">JavaScript</span>
                                <span class="tech-tag">Chart.js</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="testimonials-section">
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title">Client <span class="highlight-text">Feedback</span></h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">What our clients say about our work</p>
        </div>
        
        <div class="row g-4 mt-4">
            <div class="col-md-6 col-lg-4">
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="testimonial-text">
                            "DevCraft Studios transformed our outdated website into a modern, user-friendly platform that has significantly increased our online conversions. Their attention to detail and technical expertise is outstanding."
                        </p>
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">
                            <div class="avatar-placeholder">JM</div>
                        </div>
                        <div class="testimonial-info">
                            <h4 class="testimonial-name">James Miller</h4>
                            <p class="testimonial-position">CEO, TechGear</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <p class="testimonial-text">
                            "Working with DevCraft was a breeze. They understood our vision from the start and delivered a website that perfectly represents our brand. The design is beautiful and our customers love the ease of use."
                        </p>
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">
                            <div class="avatar-placeholder">SR</div>
                        </div>
                        <div class="testimonial-info">
                            <h4 class="testimonial-name">Sarah Rodriguez</h4>
                            <p class="testimonial-position">Owner, Gourmet Bistro</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-rating">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <p class="testimonial-text">
                            "I needed a portfolio that would showcase my photography work in the best light possible. DevCraft delivered beyond my expectations. The site is fast, responsive, and has a clean design that lets my work shine."
                        </p>
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">
                            <div class="avatar-placeholder">DK</div>
                        </div>
                        <div class="testimonial-info">
                            <h4 class="testimonial-name">David Kim</h4>
                            <p class="testimonial-position">Professional Photographer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="cta-section">
    <div class="container">
        <div class="cta-content text-center">
            <h2 class="cta-title">Like What You See?</h2>
            <p class="cta-description">Let's work together to create your next amazing website.</p>
            <a href="{{ url_for('contact') }}" class="btn btn-primary btn-lg btn-glow">Start Your Project</a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    // Portfolio filter functionality
    document.addEventListener('DOMContentLoaded', function() {
        const filterItems = document.querySelectorAll('.filter-item');
        const portfolioItems = document.querySelectorAll('.portfolio-item');
        
        filterItems.forEach(item => {
            item.addEventListener('click', function() {
                // Remove active class from all filter items
                filterItems.forEach(filter => filter.classList.remove('active'));
                
                // Add active class to clicked filter
                this.classList.add('active');
                
                // Get filter value
                const filterValue = this.getAttribute('data-filter');
                
                // Filter portfolio items
                portfolioItems.forEach(project => {
                    if (filterValue === 'all' || project.classList.contains(filterValue)) {
                        project.style.display = 'block';
                        setTimeout(() => {
                            project.style.opacity = '1';
                            project.style.transform = 'scale(1)';
                        }, 50);
                    } else {
                        project.style.opacity = '0';
                        project.style.transform = 'scale(0.8)';
                        setTimeout(() => {
                            project.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });
    });
</script>
{% endblock %}