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

{% block title %}ACA — Register as Vendor{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
<style>
.reg-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: var(--black, #080808); }
.reg-card {
    width: 100%; max-width: 520px;
    background: var(--off-black, #111);
    border: 1px solid var(--border, #222);
    border-radius: var(--radius, 4px);
    overflow: hidden;
}
.reg-header {
    padding: 32px 36px 24px;
    border-bottom: 1px solid var(--border, #222);
    background: var(--charcoal, #1c1c1c);
    text-align: center;
}
.reg-brand-mark {
    width: 36px; height: 36px;
    background: var(--gold, #c9a96e);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    margin: 0 auto 18px;
}
.reg-header h1 {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.reg-header p { color: var(--text-dim, #8a8580); font-size: 13px; font-weight: 300; }

.pricing-pill {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 8px 18px;
    border-radius: 2px;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.pricing-pill.paid {
    background: var(--gold-glow, rgba(201,169,110,0.12));
    border: 1px solid rgba(201,169,110,0.3);
    color: var(--gold, #c9a96e);
}
.pricing-pill.free {
    background: rgba(42,157,143,0.12);
    border: 1px solid rgba(42,157,143,0.3);
    color: #2a9d8f;
}
.pricing-pill .pill-amount {
    font-size: 16px; font-weight: 800; letter-spacing: 0;
}

.reg-body { padding: 28px 36px; }
.reg-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0;
    font-family: var(--font-display, 'Syne', sans-serif);
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted, #4a4742);
}
.reg-divider::before, .reg-divider::after { content: ''; flex: 1; height: 1px; background: var(--border, #222); }

.pay-note {
    background: var(--gold-glow, rgba(201,169,110,0.08));
    border: 1px solid rgba(201,169,110,0.2);
    border-radius: var(--radius, 4px);
    padding: 12px 16px; margin-bottom: 20px;
    font-size: 12px; font-weight: 300; color: var(--text-dim, #8a8580); line-height: 1.65;
}
.pay-note strong { color: var(--gold, #c9a96e); font-weight: 600; }

.free-note {
    background: rgba(42,157,143,0.06);
    border: 1px solid rgba(42,157,143,0.2);
    border-radius: var(--radius, 4px);
    padding: 12px 16px; margin-bottom: 20px;
    font-size: 12px; font-weight: 300; color: var(--text-dim, #8a8580); line-height: 1.65;
}
.free-note strong { color: #2a9d8f; font-weight: 600; }

.reg-footer {
    padding: 16px 36px 24px;
    text-align: center;
    font-size: 12px; color: var(--text-muted, #4a4742); font-weight: 300;
}
.reg-footer a { color: var(--gold-dim, #7a6340); }
.reg-footer a:hover { color: var(--gold, #c9a96e); }
</style>
{% endblock %}

{% block body %}
<div class="reg-page">
    <div class="reg-card">
        <div class="reg-header">
            <div class="reg-brand-mark"></div>
            <h1>Become a Vendor</h1>
            <p>Sell through ACA's AI shopping assistant</p>

            {% if settings.vendor_registration_free %}
            <div class="pricing-pill free">
                <span>Free for <span class="pill-amount">{{ settings.vendor_free_duration_months }} month{{ settings.vendor_free_duration_months|pluralize }}</span></span>
            </div>
            {% else %}
            <div class="pricing-pill paid">
                <span class="pill-amount">GHS {{ settings.vendor_registration_fee }}</span>
                <span>/ {{ settings.vendor_subscription_months }} months</span>
            </div>
            {% endif %}
        </div>

        <div class="reg-body">
            {% if errors %}
            <div class="form-errors">
                {% for err in errors %}<p>{{ err }}</p>{% endfor %}
            </div>
            {% endif %}

            {% if settings.vendor_registration_free %}
            <div class="free-note">
                <strong>Free registration is active.</strong>
                Your store will be active for <strong>{{ settings.vendor_free_duration_months }} month{{ settings.vendor_free_duration_months|pluralize }}</strong> at no charge. You can renew when it expires.
            </div>
            {% else %}
            <div class="pay-note">
                After submitting, you'll be taken to <strong>Paystack</strong> to complete payment of <strong>GHS {{ settings.vendor_registration_fee }}</strong>. Your store activates instantly once payment is confirmed.
            </div>
            {% endif %}

            <form method="post">
                {% csrf_token %}

                <div class="reg-divider">Account</div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" id="username" name="username" required
                               placeholder="yourhandle"
                               value="{{ form_data.username|default:'' }}">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required
                               placeholder="you@example.com"
                               value="{{ form_data.email|default:'' }}">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" id="password" name="password" required
                               placeholder="Min 6 characters">
                    </div>
                    <div class="form-group">
                        <label for="password2">Confirm Password</label>
                        <input type="password" id="password2" name="password2" required
                               placeholder="Repeat password">
                    </div>
                </div>

                <div class="reg-divider">Store</div>

                <div class="form-group">
                    <label for="store_name">Store Name</label>
                    <input type="text" id="store_name" name="store_name" required
                           placeholder="Your store name"
                           value="{{ form_data.store_name|default:'' }}">
                </div>
                <div class="form-group">
                    <label for="description">Description <span class="optional-tag">optional</span></label>
                    <textarea id="description" name="description" rows="2"
                              placeholder="What does your store sell?"
                              style="width:100%;padding:10px 14px;background:var(--black);border:1px solid var(--border-light);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:13px;outline:none;resize:vertical;">{{ form_data.description|default:'' }}</textarea>
                </div>
                <div class="form-group">
                    <label for="phone">Phone <span class="optional-tag">optional</span></label>
                    <input type="text" id="phone" name="phone"
                           placeholder="0244XXXXXX"
                           value="{{ form_data.phone|default:'' }}">
                </div>

                {% if settings.vendor_registration_free %}
                <button type="submit" class="btn btn-primary btn-full btn-lg" style="margin-top:8px;">
                    Create My Store — Free
                </button>
                {% else %}
                <button type="submit" class="btn btn-primary btn-full btn-lg" style="margin-top:8px;">
                    Continue to Payment — GHS {{ settings.vendor_registration_fee }}
                </button>
                {% endif %}
            </form>
        </div>

        <div class="reg-footer">
            Already have an account? <a href="/accounts/login/?next=/vendor/dashboard/">Sign in</a>
        </div>
    </div>
</div>
{% endblock %}