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

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <h1 class="display-3 mb-4">Websites Built for <span class="accent-text">Business Growth</span></h1>
                <p class="lead text-secondary mb-5 fs-4">We create modern, clean, and professional websites that help business owners build trust and attract more clients.</p>
                <div class="d-flex gap-3">
                    <a href="#contact" class="btn btn-accent px-5">Get Started</a>
                    <a href="#services" class="btn btn-outline-accent px-5">Our Services</a>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <!-- Placeholder for a clean graphic/3D shape -->
                <div style="width: 100%; height: 400px; background: rgba(198, 167, 78, 0.1); border-radius: 24px; border: 1px dashed var(--fb-accent); display: flex; align-items: center; justify-content: center; transform: rotate(3deg);">
                    <div style="width: 200px; height: 200px; background: var(--fb-accent); border-radius: 50%; filter: blur(80px); opacity: 0.3;"></div>
                    <span class="accent-text h3" style="transform: rotate(-3deg);">Professional. Clean. Confident.</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section id="services" class="section-padding bg-section">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="h1 mb-3">Our Services</h2>
            <div style="width: 80px; height: 4px; background: var(--fb-accent); margin: 0 auto;"></div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="mb-4 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="var(--fb-accent)" viewBox="0 0 16 16"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg></div>
                    <h3 class="h4">Custom Web Design</h3>
                    <p class="text-secondary">Tailor-made websites designed to reflect your brand's unique identity and professional values.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="mb-4 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="var(--fb-accent)" viewBox="0 0 16 16"><path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/><path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg></div>
                    <h3 class="h4">Mobile Optimization</h3>
                    <p class="text-secondary">Ensuring your business looks great on every device—from desktops to smartphones.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4">
                    <div class="mb-4 text-accent"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="var(--fb-accent)" viewBox="0 0 16 16"><path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z"/><path d="m10.5 5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V6.707L7.854 11.854a.5.5 0 1 1-.708-.708L12.293 6H10.5a.5.5 0 0 1 0-1z"/></svg></div>
                    <h3 class="h4">Performance & Speed</h3>
                    <p class="text-secondary">Fast-loading pages designed to keep your visitors engaged and improve search rankings.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section id="how-it-works" class="section-padding">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="h1 mb-3">How It Works</h2>
            <div style="width: 80px; height: 4px; background: var(--fb-accent); margin: 0 auto;"></div>
        </div>
        <div class="row g-5">
            <div class="col-md-4 text-center">
                <div class="h2 accent-text mb-3">01</div>
                <h3 class="h5">Consultation</h3>
                <p class="text-secondary">We discuss your business goals and target audience to understand your needs.</p>
            </div>
            <div class="col-md-4 text-center">
                <div class="h2 accent-text mb-3">02</div>
                <h3 class="h5">Design & Build</h3>
                <p class="text-secondary">Our team crafts a professional website tailored to your business requirements.</p>
            </div>
            <div class="col-md-4 text-center">
                <div class="h2 accent-text mb-3">03</div>
                <h3 class="h5">Launch</h3>
                <p class="text-secondary">Your new professional website goes live, ready to serve your customers.</p>
            </div>
        </div>
    </div>
</section>

<!-- Portfolio Section -->
<section id="portfolio" class="section-padding bg-section">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="h1 mb-3">Featured Work</h2>
            <div style="width: 80px; height: 4px; background: var(--fb-accent); margin: 0 auto;"></div>
        </div>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div style="height: 300px; background: #122a24; display: flex; align-items: center; justify-content: center;">
                        <span class="text-secondary">Law Firm Website</span>
                    </div>
                    <div class="p-4">
                        <h3 class="h5">Apex Legal Partners</h3>
                        <p class="text-secondary small">Clean, corporate, and trustworthy design.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div style="height: 300px; background: #122a24; display: flex; align-items: center; justify-content: center;">
                        <span class="text-secondary">Medical Clinic Website</span>
                    </div>
                    <div class="p-4">
                        <h3 class="h5">Green Valley Health</h3>
                        <p class="text-secondary small">Patient-focused and easy to navigate.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="section-padding">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card p-5">
                    <div class="text-center mb-4">
                        <h2 class="h3">Book Your Consultation</h2>
                        <p class="text-secondary">Ready to elevate your business? Let's talk.</p>
                    </div>
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            {{ form.name }}
                        </div>
                        <div class="mb-3">
                            {{ form.email }}
                        </div>
                        <div class="mb-3">
                            {{ form.company }}
                        </div>
                        <div class="mb-4">
                            {{ form.message }}
                        </div>
                        <button type="submit" class="btn btn-accent w-100">Send Request</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
