{% extends 'base.html' %}

{% block title %}Pricing & Packages - 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">Pricing</span></h1>
        <div class="page-breadcrumb">
            <a href="{{ url_for('index') }}">Home</a> / Pricing
        </div>
    </div>
</section>

<!-- Pricing Plans Section -->
<section class="pricing-section">
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title">Choose Your <span class="highlight-text">Package</span></h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">Transparent pricing with no hidden fees</p>
        </div>
        
        <div class="row g-4 mt-5">
            <!-- Basic Package -->
            <div class="col-lg-4">
                <div class="pricing-card starter detailed">
                    <div class="pricing-header">
                        <h3 class="pricing-title">Basic</h3>
                        <div class="pricing-price">$200</div>
                        <p class="pricing-description">Perfect for small businesses and personal websites</p>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li><i class="fas fa-check"></i> Responsive design</li>
                            <li><i class="fas fa-check"></i> Up to 5 pages</li>
                            <li><i class="fas fa-check"></i> Mobile optimization</li>
                            <li><i class="fas fa-check"></i> Contact form</li>
                            <li><i class="fas fa-check"></i> Basic SEO setup</li>
                            <li><i class="fas fa-check"></i> Fast loading speed</li>
                            <li><i class="fas fa-check"></i> Social media links</li>
                            <li><i class="fas fa-check"></i> Google Maps integration</li>
                            <li><i class="fas fa-check"></i> Basic analytics setup</li>
                            <li><i class="fas fa-check"></i> 1 month support</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <div class="pricing-action">
                            <a href="{{ url_for('contact') }}?package=Basic" class="btn btn-outline-primary btn-block">Choose Basic</a>
                        </div>
                        <div class="pricing-timeframe">
                            <i class="fas fa-clock"></i> Delivery: 1-2 weeks
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Professional Package -->
            <div class="col-lg-4">
                <div class="pricing-card professional detailed">
                    <div class="pricing-badge">Popular</div>
                    <div class="pricing-header">
                        <h3 class="pricing-title">Professional</h3>
                        <div class="pricing-price">$500</div>
                        <p class="pricing-description">For growing businesses with more complex needs</p>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li><i class="fas fa-check"></i> <strong>Everything in Basic, plus:</strong></li>
                            <li><i class="fas fa-check"></i> Up to 10 pages</li>
                            <li><i class="fas fa-check"></i> Advanced SEO optimization</li>
                            <li><i class="fas fa-check"></i> Content management system</li>
                            <li><i class="fas fa-check"></i> Blog functionality</li>
                            <li><i class="fas fa-check"></i> Custom animations</li>
                            <li><i class="fas fa-check"></i> Social media integration</li>
                            <li><i class="fas fa-check"></i> Newsletter signup</li>
                            <li><i class="fas fa-check"></i> Advanced analytics</li>
                            <li><i class="fas fa-check"></i> Performance optimization</li>
                            <li><i class="fas fa-check"></i> 3 months support</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <div class="pricing-action">
                            <a href="{{ url_for('contact') }}?package=Professional" class="btn btn-primary btn-glow btn-block">Choose Professional</a>
                        </div>
                        <div class="pricing-timeframe">
                            <i class="fas fa-clock"></i> Delivery: 2-4 weeks
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Enterprise Package -->
            <div class="col-lg-4">
                <div class="pricing-card enterprise detailed">
                    <div class="pricing-header">
                        <h3 class="pricing-title">Enterprise</h3>
                        <div class="pricing-price">$1000+</div>
                        <p class="pricing-description">For large businesses with comprehensive requirements</p>
                    </div>
                    <div class="pricing-features">
                        <ul>
                            <li><i class="fas fa-check"></i> <strong>Everything in Professional, plus:</strong></li>
                            <li><i class="fas fa-check"></i> Unlimited pages</li>
                            <li><i class="fas fa-check"></i> E-commerce functionality</li>
                            <li><i class="fas fa-check"></i> Custom backend development</li>
                            <li><i class="fas fa-check"></i> Payment gateway integration</li>
                            <li><i class="fas fa-check"></i> User account system</li>
                            <li><i class="fas fa-check"></i> Advanced security features</li>
                            <li><i class="fas fa-check"></i> Multilingual support</li>
                            <li><i class="fas fa-check"></i> Custom API integrations</li>
                            <li><i class="fas fa-check"></i> Database design</li>
                            <li><i class="fas fa-check"></i> 1 year maintenance & support</li>
                        </ul>
                    </div>
                    <div class="pricing-footer">
                        <div class="pricing-action">
                            <a href="{{ url_for('contact') }}?package=Enterprise" class="btn btn-outline-primary btn-block">Choose Enterprise</a>
                        </div>
                        <div class="pricing-timeframe">
                            <i class="fas fa-clock"></i> Delivery: 4-8 weeks
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Process Section -->
<section class="process-section">
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title">Our <span class="highlight-text">Process</span></h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">How we bring your vision to life</p>
        </div>
        
        <div class="process-timeline">
            <div class="process-item">
                <div class="process-icon">
                    <i class="fas fa-comments"></i>
                    <div class="process-step">01</div>
                </div>
                <div class="process-content">
                    <h3 class="process-title">Consultation</h3>
                    <p class="process-description">We discuss your needs, goals, and vision for your website to establish a clear direction.</p>
                </div>
            </div>
            
            <div class="process-item">
                <div class="process-icon">
                    <i class="fas fa-pencil-ruler"></i>
                    <div class="process-step">02</div>
                </div>
                <div class="process-content">
                    <h3 class="process-title">Design Phase</h3>
                    <p class="process-description">We create wireframes and mockups of your website for your approval before moving to development.</p>
                </div>
            </div>
            
            <div class="process-item">
                <div class="process-icon">
                    <i class="fas fa-code"></i>
                    <div class="process-step">03</div>
                </div>
                <div class="process-content">
                    <h3 class="process-title">Development</h3>
                    <p class="process-description">Our skilled developers build your website with clean, efficient code and modern technologies.</p>
                </div>
            </div>
            
            <div class="process-item">
                <div class="process-icon">
                    <i class="fas fa-vial"></i>
                    <div class="process-step">04</div>
                </div>
                <div class="process-content">
                    <h3 class="process-title">Testing & Refinement</h3>
                    <p class="process-description">We thoroughly test your website for functionality, responsiveness, and performance.</p>
                </div>
            </div>
            
            <div class="process-item">
                <div class="process-icon">
                    <i class="fas fa-rocket"></i>
                    <div class="process-step">05</div>
                </div>
                <div class="process-content">
                    <h3 class="process-title">Launch</h3>
                    <p class="process-description">We deploy your website to a live server and ensure everything is working perfectly.</p>
                </div>
            </div>
            
            <div class="process-item">
                <div class="process-icon">
                    <i class="fas fa-tools"></i>
                    <div class="process-step">06</div>
                </div>
                <div class="process-content">
                    <h3 class="process-title">Support & Maintenance</h3>
                    <p class="process-description">We provide ongoing support and maintenance to keep your website running smoothly.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section">
    <div class="container">
        <div class="section-header text-center">
            <h2 class="section-title">Frequently Asked <span class="highlight-text">Questions</span></h2>
            <div class="section-divider"></div>
            <p class="section-subtitle">Common questions about our services</p>
        </div>
        
        <div class="row mt-5">
            <div class="col-lg-6">
                <div class="accordion" id="faqAccordion1">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                How long does it take to build a website?
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion1">
                            <div class="accordion-body">
                                The timeline varies depending on the complexity of your project. A basic website typically takes 1-2 weeks, while more complex projects can take 4-8 weeks or longer. We'll provide you with a specific timeline during our initial consultation.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Do you offer website hosting?
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion1">
                            <div class="accordion-body">
                                While we don't directly provide hosting services, we can help you select the best hosting provider for your needs and assist with the setup process. We'll ensure your website is properly deployed and functioning on your chosen hosting platform.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingThree">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Can I update my website myself after it's built?
                            </button>
                        </h2>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion1">
                            <div class="accordion-body">
                                Yes! Our Professional and Enterprise packages include a content management system (CMS) that allows you to easily update content without technical knowledge. We also provide training to ensure you're comfortable making changes to your site.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="accordion" id="faqAccordion2">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingFour">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                What payment methods do you accept?
                            </button>
                        </h2>
                        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion2">
                            <div class="accordion-body">
                                We primarily accept Cash App as our main payment method for all services. For larger projects, we typically require a 50% deposit upfront with the remaining balance due upon completion.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingFive">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                Do you offer ongoing maintenance?
                            </button>
                        </h2>
                        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion2">
                            <div class="accordion-body">
                                Yes, we offer monthly maintenance packages to keep your website secure, updated, and running smoothly. Our Enterprise package includes 1 year of maintenance and support as standard, while other packages include shorter support periods.
                            </div>
                        </div>
                    </div>
                    
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingSix">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                Will my website be mobile-friendly?
                            </button>
                        </h2>
                        <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#faqAccordion2">
                            <div class="accordion-body">
                                Absolutely! All our websites are built with responsive design principles, ensuring they look and function perfectly on all devices, from desktop computers to tablets and smartphones. Mobile optimization is included in all our packages.
                            </div>
                        </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">Ready to Start Your Project?</h2>
            <p class="cta-description">Contact us today to discuss your website needs and get a custom quote.</p>
            <a href="{{ url_for('contact') }}" class="btn btn-primary btn-lg btn-glow">Get in Touch</a>
        </div>
    </div>
</section>
{% endblock %}