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

{% block title %}AI Career Advisor{% endblock %}

{% block content %}
<main>
    <section class="hero-section">
        <div class="container">
            <h1>Unlock Your Potential with AI Career Advisor</h1>
            <p>Get personalized career path recommendations, skill development roadmaps, and job matching powered by advanced AI.</p>
            <a href="#" class="hero-button">Start Your Assessment</a>
        </div>
    </section>

    <section class="how-it-works-section py-5">
        <div class="container text-center">
            <h2 class="mb-4">How It Works</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="icon-box p-3">
                        <img src="{% static 'images/icon-assess.svg' %}" alt="Assess Icon" class="img-fluid mb-3" style="width: 80px;">
                        <h3>1. Assess Your Skills</h3>
                        <p>Take our AI-powered assessments to identify your strengths, interests, and potential career aptitudes.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="icon-box p-3">
                        <img src="{% static 'images/icon-plan.svg' %}" alt="Plan Icon" class="img-fluid mb-3" style="width: 80px;">
                        <h3>2. Plan Your Path</h3>
                        <p>Receive a personalized career roadmap with recommended courses, projects, and learning resources.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="icon-box p-3">
                        <img src="{% static 'images/icon-achieve.svg' %}" alt="Achieve Icon" class="img-fluid mb-3" style="width: 80px;">
                        <h3>3. Achieve Your Goals</h3>
                        <p>Track your progress, earn certifications, and get matched with relevant job and internship opportunities.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="success-stories-section py-5 bg-light">
        <div class="container text-center">
            <h2 class="mb-4">Success Stories</h2>
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <blockquote class="blockquote">
                        <p class="mb-0">"The AI Career Advisor helped me discover my true calling and provided a clear path to achieve my dreams. I'm now pursuing a career I'm passionate about!"</p>
                        <footer class="blockquote-footer">Priya S., <cite title="Source Title">Successful Software Engineer</cite></footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </section>

    <section class="featured-careers-section py-5">
        <div class="container text-center">
            <h2 class="mb-4">Featured Career Paths</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="career-card p-3 border rounded mb-3">
                        <h4>Data Scientist</h4>
                        <p>Leverage data to solve complex problems and drive business decisions.</p>
                        <a href="#" class="btn btn-outline-primary">Explore Path</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="career-card p-3 border rounded mb-3">
                        <h4>AI/ML Engineer</h4>
                        <p>Build intelligent systems and algorithms that learn and adapt.</p>
                        <a href="#" class="btn btn-outline-primary">Explore Path</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="career-card p-3 border rounded mb-3">
                        <h4>Full-Stack Developer</h4>
                        <p>Develop both front-end and back-end components of web applications.</p>
                        <a href="#" class="btn btn-outline-primary">Explore Path</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
{% endblock %}
