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

{% block title %}MarketMatchr - Connect with Influencers{% endblock %}

{% block content %}
<div class="container-fluid hero-section">
    <div class="row text-center">
        <div class="col">
            <h1>Find the Perfect Influencer for Your Brand</h1>
            <p class="lead">Connect with top influencers and launch successful campaigns.</p>
            <div class="search-bar-container mt-4">
                <input type="text" class="form-control" placeholder="Search by niche, e.g., 'fashion', 'gaming', 'travel'">
                <button class="btn btn-primary">Search</button>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5">
    <div class="row text-center">
        <div class="col">
            <h2>Featured Influencers</h2>
        </div>
    </div>
    <div class="row mt-4">
        <!-- Placeholder Influencer Tiles -->
        <div class="col-md-4">
            <div class="card influencer-card">
                <img src="https://via.placeholder.com/300" class="card-img-top" alt="Influencer">
                <div class="card-body">
                    <h5 class="card-title">Influencer Name</h5>
                    <p class="card-text">Fashion | 1.2M Followers</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card influencer-card">
                <img src="https://via.placeholder.com/300" class="card-img-top" alt="Influencer">
                <div class="card-body">
                    <h5 class="card-title">Another Influencer</h5>
                    <p class="card-text">Gaming | 800k Followers</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card influencer-card">
                <img src="https://via.placeholder.com/300" class="card-img-top" alt="Influencer">
                <div class="card-body">
                    <h5 class="card-title">Top Creator</h5>
                    <p class="card-text">Travel | 2.5M Followers</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="how-it-works" class="container-fluid how-it-works-section mt-5 py-5">
    <div class="row text-center">
        <div class="col">
            <h2>How It Works</h2>
        </div>
    </div>
    <div class="row mt-4 text-center">
        <div class="col-md-4">
            <div class="step">
                <h3>1. Find Influencers</h3>
                <p>Use our powerful search to discover influencers in your niche.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="step">
                <h3>2. Launch Campaigns</h3>
                <p>Create campaigns and invite influencers to collaborate.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="step">
                <h3>3. Drive Results</h3>
                <p>Track your campaign performance and grow your brand.</p>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5">
    <div class="row text-center">
        <div class="col">
            <h2>Join MarketMatchr Today!</h2>
            <p class="lead">Sign up now and start connecting with the best influencers.</p>
            <a href="{% url 'signup' %}" class="btn btn-primary btn-lg">Join For Free</a>
        </div>
    </div>
</div>
{% endblock %}
