{% extends "layouts/base.html" %}

{% block title %}Secure Cloud Storage for Everyone - Retoor's Cloud Solutions{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/index.css">
{% endblock %}

{% block content %}
<main>
    {#
    <section class="hero-section">
        <div class="hero-content">
            <h1>Your files, safe and accessible everywhere</h1>
            <p class="hero-subtitle">Store, sync, and share your files with enterprise-grade security. Access from any device, anytime, anywhere.</p>
            <div class="hero-ctas">
                <a href="/register" class="btn-primary hero-btn">Get Started Free</a>
                <a href="/pricing" class="btn-outline hero-btn">View Pricing</a>
            </div>
            <p class="hero-subtext">No credit card required • 10 GB free storage</p>
        </div>
    </section>

    <section class="features-section">
        <div class="features-header">
            <h2>Everything you need to work smarter</h2>
            <p>Powerful features designed to keep your data secure and accessible</p>
        </div>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    </svg>
                </div>
                <h3>Bank-level Security</h3>
                <p>256-bit AES encryption and TLS 1.3 protocol ensure your files stay private and protected</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
                    </svg>
                </div>
                <h3>Access Anywhere</h3>
                <p>Seamlessly sync across all your devices. Desktop, mobile, or web - your files are always there</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                    </svg>
                </div>
                <h3>Easy Sharing</h3>
                <p>Share files and folders with anyone using secure links. Control access with permissions</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                    </svg>
                </div>
                <h3>High Performance</h3>
                <p>Lightning-fast upload and download speeds powered by enterprise infrastructure</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <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"/>
                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
                        <line x1="12" y1="22.08" x2="12" y2="12"/>
                    </svg>
                </div>
                <h3>Auto Backup</h3>
                <p>Never lose important files. Automatic backups keep multiple versions of your documents</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </div>
                <h3>24/7 Support</h3>
                <p>Expert support team ready to help whenever you need. Email, chat, and phone support available</p>
            </div>
        </div>
    </section>
    #}
    <section class="use-cases-section">
        <h2>Storage for every need</h2>
        <div class="use-cases-grid">
            <div class="use-case-card">
                <img src="/static/images/icon-families.svg" alt="Families Icon" class="use-case-icon">
                <h3>For Families</h3>
                <p>Keep precious memories safe. Share photos and videos with family members securely.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-professionals.svg" alt="Professionals Icon" class="use-case-icon">
                <h3>For Professionals</h3>
                <p>Collaborate on projects, share documents, and work from anywhere with confidence.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-students.svg" alt="Students Icon" class="use-case-icon">
                <h3>For Students</h3>
                <p>Store all your coursework, projects, and study materials in one secure place.</p>
            </div>
        </div>
    </section>

    <section class="cta-section">
        <div class="cta-content">
            <h2>Start storing your files securely today</h2>
            <p>Join thousands of users who trust Retoor's Cloud Solutions</p>
            <a href="/register" class="btn-primary cta-btn">Create Free Account</a>
        </div>
    </section>
</main>
{% endblock %}