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

{% block content %}
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-3 fw-bold mb-4">Automate Your <span class="text-coral">Facebook</span> Conversations</h1>
                <p class="lead mb-5 opacity-75">Build powerful, multi-page chatbots with a simple flow builder. Scale your customer service 24/7 without breaking a sweat.</p>
                <div class="d-flex gap-3">
                    <a href="/admin/login/" class="btn btn-coral btn-lg px-4 py-3">Get Started Free</a>
                    <a href="#features" class="btn btn-outline-light btn-lg px-4 py-3">How it Works</a>
                </div>
            </div>
            <div class="col-lg-5 offset-lg-1 d-none d-lg-block">
                <div class="glass-card">
                    <div class="d-flex mb-4 align-items-center">
                        <div class="bg-coral rounded-circle p-2 me-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                        </div>
                        <h5 class="mb-0">Smart Auto-Reply</h5>
                    </div>
                    <div class="bg-white rounded p-3 mb-3 text-dark shadow-sm">
                        <small class="text-muted d-block mb-1">Customer</small>
                        "What are your opening hours?"
                    </div>
                    <div class="bg-indigo rounded p-3 text-white shadow-sm ms-5">
                        <small class="text-coral d-block mb-1">FlowBot</small>
                        "Hi there! We are open from 9 AM to 6 PM daily. Would you like to see our menu?"
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="features" class="py-5">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="display-5 fw-bold">Why Choose FlowBot?</h2>
            <p class="text-muted">The ultimate tool for multi-fanpage management.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="text-coral mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
                    </div>
                    <h4>Multi-Page Support</h4>
                    <p class="text-muted">Connect and manage unlimited Fanpages from a single dashboard. Each page can have its own unique flow.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="text-coral mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                    </div>
                    <h4>Flow Builder</h4>
                    <p class="text-muted">Design complex conversation trees with buttons, quick replies, and images. No coding required.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="text-coral mb-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                    </div>
                    <h4>Real-time Analytics</h4>
                    <p class="text-muted">Track bot performance and view chat history in real-time to optimize your customer experience.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
