{% extends "base.html" %}
{% load static %}
{% block title %}{{ SITE_NAME }}{% if SITE_TAGLINE %} · {{ SITE_TAGLINE }}{% endif %}{% endblock %}
{% block og_title %}{{ SITE_NAME }}{% endblock %}
{% block twitter_title %}{{ SITE_NAME }}{% endblock %}
{% block meta_description %}{{ SITE_NAME }}{% if SITE_TAGLINE %} — {{ SITE_TAGLINE }}.{% endif %} {{ CONTACT_SERVICE_AREA }}. Custom 3D printed toys, ready to ship.{% endblock %}
{% block og_description %}{{ SITE_NAME }}{% if SITE_TAGLINE %} — {{ SITE_TAGLINE }}.{% endif %} {{ CONTACT_SERVICE_AREA }}.{% endblock %}
{% block twitter_description %}{{ SITE_NAME }}{% if SITE_TAGLINE %} — {{ SITE_TAGLINE }}.{% endif %} {{ CONTACT_SERVICE_AREA }}.{% endblock %}
{% block structured_data %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Store",
  "name": "{{ SITE_NAME|escapejs }}",
  "url": "{{ PUBLIC_SITE_URL }}/",
  "image": "{{ PUBLIC_SITE_URL }}{% static 'images/slider-image-01-1132x657.jpg' %}",
  "telephone": "{{ CONTACT_PHONE|escapejs }}",
  "email": "{{ CONTACT_EMAIL|escapejs }}",
  "description": "{{ SITE_TAGLINE|escapejs }}"{% if CONTACT_ADDRESS %},
  "address": "{{ CONTACT_ADDRESS|escapejs }}"{% endif %}{% if CONTACT_SERVICE_AREA %},
  "areaServed": "{{ CONTACT_SERVICE_AREA|escapejs }}"{% endif %}
}
</script>
{% endblock %}
{% block content %}
  <section class="section swiper-container swiper-slider swiper-slider-4" data-autoplay="5000" data-simulate-touch="false" data-slide-effect="fade">
    <div class="swiper-wrapper">
      <div class="swiper-slide bg-gray-100">
        <div class="swiper-slide-caption section-lg section-inset-2">
          <div class="container">
            <div class="row">
              <div class="col-lg-6 index-1">
                <h1 class="swiper-title decorative-line" data-caption-animate="fadeIn" data-caption-delay="100">Your <span class="font-weight-thin text-italic">Best<br class="d-none d-lg-block"></span> Toy
                </h1>
                <h4 class="swiper-title-2" data-caption-animate="fadeInUp" data-caption-delay="250">Print Forge makes 3D printed toys you can hold, play with, and gift — from ready-to-ship favorites to custom prints.</h4>
                <div class="swiper-button" data-caption-animate="fadeInUp" data-caption-delay="400">
                  {% if "shop" in enabled_features %}
                  <a class="button button-lg button-primary" href="{% url 'shop:list' %}" data-tianji-event="hero_cta">shop now</a>
                  {% else %}
                  <a class="button button-lg button-primary" href="{% url 'public:contact' %}" data-tianji-event="hero_cta">get in touch</a>
                  {% endif %}
                </div>
              </div>
              <div class="col-lg-6 position-static">
                <div class="float-img swiper-slide-custom"><img src="{% static 'images/slider-image-01-1132x657.jpg' %}" alt="3D printer laying down orange parts on the build plate" width="1132" height="657"/></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide text-left bg-gray-100">
        <div class="swiper-slide-caption section-lg section-inset-2">
          <div class="container">
            <div class="row">
              <div class="col-lg-6 index-1">
                <h1 class="swiper-title decorative-line" data-caption-animate="fadeInDown" data-caption-delay="100">Made <span class="font-weight-thin text-italic">to<br class="d-none d-lg-block"></span> Order
                </h1>
                <h4 class="swiper-title-2" data-caption-animate="fadeInUp" data-caption-delay="250">Need something you do not see in the shop? Call or email and we will print a custom piece{% if CONTACT_SERVICE_AREA %} for {{ CONTACT_SERVICE_AREA }} and beyond{% endif %}.</h4>
                <div class="swiper-button" data-caption-animate="fadeInUp" data-caption-delay="400">
                  <a class="button button-lg button-primary" href="{% url 'public:contact' %}">custom request</a>
                </div>
              </div>
              <div class="col-lg-6 position-static">
                <div class="float-img swiper-slide-custom"><img src="{% static 'images/slider-image-02-1132x657.jpg' %}" alt="3D printer running in the workshop" width="1132" height="657"/></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </section>

  <section class="section section-xl bg-default text-center">
    <div class="container">
      <h2 class="wow fadeInDown">Featured <span class="text-italic font-weight-thin">Toys</span></h2>
      {% if featured_products %}
      <div class="row row-xl row-30 row-md-50 row-xl-70">
        {% for product in featured_products %}
        {% cycle 'product-1-292x256.png' 'product-2-292x256.png' 'product-3-292x256.png' 'product-4-292x256.png' 'product-5-292x256.png' 'product-6-292x256.png' as product_img silent %}
        <div class="col-sm-6 col-lg-4 wow fadeInUp">
          {% include "shop/_product_card.html" with product=product product_img=product_img %}
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p class="big">The shop is warming up. Browse soon — or ask us to print a custom toy today.</p>
      <a class="button button-lg button-primary" href="{% url 'public:contact' %}">Request a custom toy</a>
      {% endif %}
    </div>
  </section>

  <section class="section section-xxl section-offset-1">
    <div class="container">
      <div class="row row-50 align-items-center justify-content-center justify-content-lg-between">
        <div class="col-sm-8 col-md-6 col-lg-5 wow fadeInLeft">
          <div class="box-nina">
            <img class="media-1" src="{% static 'images/box-nina-img-364x474.jpg' %}" alt="3D printer finishing a silver figurine" width="364" height="474"/>
            <img class="media-2" src="{% static 'images/box-nina-img-mini-217x328.jpg' %}" alt="Orange filament feeding into a printer" width="217" height="328"/>
            <div class="text">About</div>
          </div>
        </div>
        <div class="col-md-6 col-lg-5">
          <div class="row row-30 row-lg-50">
            <div class="col-sm-6 col-md-12 wow fadeInRight">
              <article class="box-creative text-center text-sm-left">
                <div class="unit unit-spacing-1 flex-column flex-md-row align-items-center align-items-sm-start">
                  <div class="unit-left"><div class="box-creative-icon linearicons-cube"></div></div>
                  <div class="unit-body">
                    <div class="heading-4 box-creative-title">3D Printed</div>
                    <div class="big box-creative-text">Every toy is printed in-house so details stay sharp and pieces stay playable.</div>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-sm-6 col-md-12 wow fadeInRight">
              <article class="box-creative text-center text-sm-left">
                <div class="unit unit-spacing-1 flex-column flex-md-row align-items-center align-items-sm-start">
                  <div class="unit-left"><div class="box-creative-icon linearicons-mustache-glasses"></div></div>
                  <div class="unit-body">
                    <div class="heading-4 box-creative-title">Custom Design</div>
                    <div class="big box-creative-text">Bring a character, a gift idea, or a classroom set — we will quote a print.</div>
                  </div>
                </div>
              </article>
            </div>
            <div class="col-sm-6 col-md-12 wow fadeInRight">
              <article class="box-creative text-center text-sm-left">
                <div class="unit unit-spacing-1 flex-column flex-md-row align-items-center align-items-sm-start">
                  <div class="unit-left"><div class="box-creative-icon linearicons-truck"></div></div>
                  <div class="unit-body">
                    <div class="heading-4 box-creative-title">Ships Nationwide</div>
                    <div class="big box-creative-text">Orders pack and ship on weekdays. Local {{ CONTACT_SERVICE_AREA }} pickup by request.</div>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-xxl bg-gray-100">
    <div class="container">
      <div class="row row-8 gutter-8" data-lightgallery="group">
        <div class="col-md-6">
          <div class="row row-8 gutter-8">
            <div class="col-lg-11 col-xl-9 box-style-2 wow fadeInLeft">
              <h2>Latest <span class="text-italic font-weight-thin">Prints</span></h2>
              <p class="big text-gray-800">A look at the kinds of toys and figures we print — colorful, detailed, and ready to play.</p>
            </div>
            <div class="col-lg-12 offset-top-6 wow fadeInUp">
              <article class="thumbnail thumbnail-1"><a class="thumbnail-figure" data-lightgallery="item" href="{% static 'images/gallery-22-1200x800-original.jpg' %}"><img src="{% static 'images/gallery-22-582x299.jpg' %}" alt="3D printer finishing a silver figurine" width="582" height="299"/><div class="thumbnail-overlay"><div class="thumbnail-text">Printed figurines</div></div></a></article>
            </div>
            <div class="col-sm-6 col-md-12 col-lg-6 wow fadeInUp">
              <article class="thumbnail thumbnail-1"><a class="thumbnail-figure" data-lightgallery="item" href="{% static 'images/gallery-4-1200x800-original.jpg' %}"><img src="{% static 'images/gallery-23-287x252.jpg' %}" alt="Red and white 3D printed ornaments on the build plate" width="287" height="252"/><div class="thumbnail-overlay"><div class="thumbnail-text">Colorful prints</div></div></a></article>
            </div>
            <div class="col-sm-6 col-md-12 col-lg-6 wow fadeInUp" data-wow-delay=".05s">
              <article class="thumbnail thumbnail-1"><a class="thumbnail-figure" data-lightgallery="item" href="{% static 'images/gallery-23-1200x800-original.jpg' %}"><img src="{% static 'images/quote-1-287x252.jpg' %}" alt="Fresh orange prints lifted off the build plate" width="287" height="252"/><div class="thumbnail-overlay"><div class="thumbnail-text">Off the bed</div></div></a></article>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="row row-8 gutter-8">
            <div class="col-sm-6 col-md-12 col-lg-6 wow fadeInUp">
              <article class="thumbnail thumbnail-1"><a class="thumbnail-figure" data-lightgallery="item" href="{% static 'images/gallery-20-800x1200-original.jpg' %}"><img src="{% static 'images/gallery-20-287x252.jpg' %}" alt="Orange filament spool on the printer" width="287" height="252"/><div class="thumbnail-overlay"><div class="thumbnail-text">Color and filament</div></div></a></article>
            </div>
            <div class="col-sm-6 col-md-12 col-lg-6 wow fadeInUp" data-wow-delay=".05s">
              <article class="thumbnail thumbnail-1"><a class="thumbnail-figure" data-lightgallery="item" href="{% static 'images/gallery-2-1200x800-original.jpg' %}"><img src="{% static 'images/gallery-21-287x252.jpg' %}" alt="Close-up of a 3D printer laying down a layer" width="287" height="252"/><div class="thumbnail-overlay"><div class="thumbnail-text">In the printer</div></div></a></article>
            </div>
            <div class="col-lg-12 wow fadeInUp" data-wow-delay=".05s">
              <article class="thumbnail thumbnail-1"><a class="thumbnail-figure" data-lightgallery="item" href="{% static 'images/gallery-21-1200x800-original.jpg' %}"><img src="{% static 'images/gallery-22-582x558.jpg' %}" alt="Desktop 3D printer in a workshop" width="582" height="558"/><div class="thumbnail-overlay"><div class="thumbnail-text">Custom work</div></div></a></article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-xl bg-gray-100 text-center">
    <div class="container">
      <div class="row justify-content-md-center">
        <div class="col-md-11 col-lg-9 col-xl-8">
          <h2>Have a <span class="text-italic font-weight-thin">Question?</span></h2>
          <h5>Call {{ CONTACT_PHONE }} or email {{ CONTACT_EMAIL }} — or send a note and we will reply.</h5>
          <a class="button button-lg button-primary" href="{% url 'public:contact' %}">Contact Print Forge</a>
        </div>
      </div>
    </div>
  </section>
{% endblock %}