{% extends "base.html" %}

{% block title %}Codingo - AI-Powered Recruitment Platform{% endblock %}
{% block page_class %}landing{% endblock %}

{% block hero %}
<section class="hero">
    <div class="container">
        <div class="hero-content hero-split">
            <div class="hero-copy">
            <span class="eyebrow"><span class="dot"></span> AI-Powered Recruitment</span>
            <h1>Meet <span class="grad-text">LUNA</span>, your AI recruiter</h1>
            <p>She screens CVs, runs real voice interviews, and scores every answer against a live question
                database — so you find the right technical talent faster, and fairer.</p>
            <div class="hero-buttons">
                <a href="{{ url_for('jobs') }}" class="btn btn-primary">Find Jobs</a>
                <a href="https://www.youtube.com/watch?v=P6HG27fsJgU" class="btn btn-outline">▶  Watch Demo</a>
            </div>
            </div>
            <div class="hero-stage">
                <div class="luna-avatar-container">
                    <div class="luna-glow"></div>
                    <div class="luna-avatar">
                        <img src="{{ url_for('static', filename='images/LUNA.png') }}" alt="LUNA — your AI recruiter">
                    </div>
                </div>
                <span class="float-chip tl"><span class="ico">🎙️</span> Live voice interview</span>
                <span class="float-chip br"><span class="ico">⚡</span> Scored instantly</span>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block content %}
<section class="content-section" id="features">
    <div class="section-title">
        <h2>Platform Features</h2>
        <p>Codingo streamlines every step of your technical hiring process with cutting-edge AI technology</p>
    </div>
    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">
                <span>🤖</span>
            </div>
            <div class="feature-content">
                <h3>AI CV Analysis</h3>
                <p>LUNA automatically analyzes resumes, matching candidates to job requirements with precision and
                    eliminating unconscious bias.</p>
            </div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <span>🎯</span>
            </div>
            <div class="feature-content">
                <h3>Smart Shortlisting</h3>
                <p>Our 70% skill match threshold ensures you only interview candidates who meet your technical
                    requirements.</p>
            </div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">
                <span>🖥️</span>
            </div>
            <div class="feature-content">
                <h3>AI-Led Interviews</h3>
                <p>Structured interview sessions assess soft skills, technical knowledge, and coding abilities with
                    real-time monitoring.</p>
            </div>
        </div>
    </div>
</section>

<section class="pipeline" id="how">
    <div class="section-title">
        <h2>How Codingo Works</h2>
        <p>From job post to ranked shortlist — one intelligent, automated pipeline powered by LUNA.</p>
    </div>
    <div class="pipe-track">
        <div class="pipe-step">
            <div class="pipe-node">📝</div>
            <span class="pipe-num">Step 1</span>
            <h4>Post a Job</h4>
            <p>Recruiters define the role, skills, and how many questions the interview should cover.</p>
        </div>
        <div class="pipe-step">
            <div class="pipe-node">📄</div>
            <span class="pipe-num">Step 2</span>
            <h4>Apply &amp; Parse CV</h4>
            <p>Candidates upload a resume — Codingo auto-extracts skills, education, and experience.</p>
        </div>
        <div class="pipe-step">
            <div class="pipe-node">🎙️</div>
            <span class="pipe-num">Step 3</span>
            <h4>LUNA Interviews</h4>
            <p>LUNA conducts a real voice interview, asking role-specific questions and follow-ups.</p>
        </div>
        <div class="pipe-step">
            <div class="pipe-node">🧠</div>
            <span class="pipe-num">Step 4</span>
            <h4>Score from the Database</h4>
            <p>Every answer is evaluated against a live question bank of thousands of Q&amp;A pairs.</p>
        </div>
        <div class="pipe-step">
            <div class="pipe-node">🏆</div>
            <span class="pipe-num">Step 5</span>
            <h4>Rank Candidates</h4>
            <p>The recruiter dashboard ranks applicants by skill match and interview performance.</p>
        </div>
    </div>
</section>

<section class="cta">
    <div class="container">
        <h2>Ready to Transform Your Technical Hiring?</h2>
        <p>Join hundreds of companies finding their perfect tech talent faster and more efficiently with Codingo.</p>
        <a href="{{ url_for('jobs') }}" class="btn btn-primary">Browse Available Jobs</a>
    </div>
</section>
{% endblock %}