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

{% block title %}Sustainability{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <h1>Sustainability</h1>
        <p>Our commitment to ethical and eco-friendly jewelry</p>
    </div>
</div>

<section class="content-page">
    <div class="container">
        <div class="grid">
            <div class="medium-6">
                <h2>Our Commitment</h2>
                <p>At Artistica Jewelry, sustainability is at the heart of everything we do. We believe that beautiful jewelry should not come at the cost of our planet or its people. That's why we have implemented comprehensive sustainable practices across our entire production process.</p>
                <p>From using recycled materials to reducing waste and conserving energy, we are constantly striving to minimize our environmental footprint while maximizing our positive social impact.</p>
            </div>
            <div class="medium-6">
                <h2>Our Sustainable Practices</h2>
                <ul>
                    <li><strong>Recycled Materials</strong> — We use recycled silver, gold, and other metals to reduce mining impact</li>
                    <li><strong>Lead & Nickel Free</strong> — All our jewelry is hypoallergenic and free from harmful substances</li>
                    <li><strong>Waste Reduction</strong> — We recycle metal scraps and minimize waste in our production process</li>
                    <li><strong>Energy Efficiency</strong> — Our workshop uses energy-efficient equipment and practices</li>
                    <li><strong>Water Conservation</strong> — We treat and recycle water used in our production processes</li>
                    <li><strong>Eco-Friendly Packaging</strong> — Our packaging is made from recycled and biodegradable materials</li>
                </ul>
            </div>
        </div>

        <h2>UN Sustainable Development Goals</h2>
        <p>Our practices align with the United Nations Sustainable Development Goals (SDGs):</p>
        <div class="grid">
            <div class="medium-4">
                <div class="mission-card">
                    <h3>Goal 8</h3>
                    <p><strong>Decent Work and Economic Growth</strong></p>
                    <p>Providing fair wages, safe working conditions, and economic opportunities for local artisans.</p>
                </div>
            </div>
            <div class="medium-4">
                <div class="mission-card">
                    <h3>Goal 12</h3>
                    <p><strong>Responsible Consumption and Production</strong></p>
                    <p>Implementing sustainable production practices and promoting responsible consumption.</p>
                </div>
            </div>
            <div class="medium-4">
                <div class="mission-card">
                    <h3>Goal 13</h3>
                    <p><strong>Climate Action</strong></p>
                    <p>Reducing our carbon footprint through energy efficiency and sustainable materials.</p>
                </div>
            </div>
        </div>

        <h2>Materials Transparency</h2>
        <div class="grid">
            <div class="medium-4">
                <div style="padding: 30px; background: var(--color-bg-card); border-radius: var(--radius); border: 1px solid var(--color-border); text-align: center;">
                    <p style="font-size: 2rem; color: var(--color-primary); font-family: var(--font-heading);">100%</p>
                    <p>Recycled Silver</p>
                </div>
            </div>
            <div class="medium-4">
                <div style="padding: 30px; background: var(--color-bg-card); border-radius: var(--radius); border: 1px solid var(--color-border); text-align: center;">
                    <p style="font-size: 2rem; color: var(--color-primary); font-family: var(--font-heading);">100%</p>
                    <p>Lead & Nickel Free</p>
                </div>
            </div>
            <div class="medium-4">
                <div style="padding: 30px; background: var(--color-bg-card); border-radius: var(--radius); border: 1px solid var(--color-border); text-align: center;">
                    <p style="font-size: 2rem; color: var(--color-primary); font-family: var(--font-heading);">95%</p>
                    <p>Waste Recycled</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}