Boys

{% schema %}
{
  "name": "Boys Collection Story",
  "tag": "section",
  "class": "section boys-collection-story",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Sprig & Swell Boys"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "For Boys Who Ride, Explore & Get Salty"
    },
    {
      "type": "textarea",
      "id": "intro",
      "label": "Intro Copy",
      "default": "Built for the rhythm of coastal life in Seabrook, the Sprig & Swell Boys Collection is designed for movement, durability, and effortless style. From early morning bike rides to sunset beach hangs, every piece is chosen to keep up with active days and changing weather."
    },
    {
      "type": "textarea",
      "id": "brand_copy",
      "label": "Brand Copy",
      "default": "Featuring Jetty, Vissla, Feather 4 Arrow, Patagonia, Trek Bikes, and outdoor goods for kids, this collection brings together surf, trail, and everyday layers for boys ages 6–16."
    },
    {
      "type": "text",
      "id": "feature_1",
      "label": "Feature 1",
      "default": "Built for Play"
    },
    {
      "type": "text",
      "id": "feature_1_copy",
      "label": "Feature 1 Copy",
      "default": "Durable enough for bikes, trails, beach days, and everyday movement."
    },
    {
      "type": "text",
      "id": "feature_2",
      "label": "Feature 2",
      "default": "Layer-Ready"
    },
    {
      "type": "text",
      "id": "feature_2_copy",
      "label": "Feature 2 Copy",
      "default": "Perfect for Pacific Northwest weather shifts and cool coastal mornings."
    },
    {
      "type": "text",
      "id": "feature_3",
      "label": "Feature 3",
      "default": "Adventure Style"
    },
    {
      "type": "text",
      "id": "feature_3_copy",
      "label": "Feature 3 Copy",
      "default": "Surf + outdoor inspired looks boys actually want to wear."
    },
    {
      "type": "text",
      "id": "feature_4",
      "label": "Feature 4",
      "default": "Curated Quality"
    },
    {
      "type": "text",
      "id": "feature_4_copy",
      "label": "Feature 4 Copy",
      "default": "Thoughtfully selected brands and gear for life outside."
    },
    {
      "type": "text",
      "id": "style_heading",
      "label": "Style Block Heading",
      "default": "Style It Their Way"
    },
    {
      "type": "text",
      "id": "style_1",
      "label": "Style 1",
      "default": "Beach Ready"
    },
    {
      "type": "text",
      "id": "style_1_copy",
      "label": "Style 1 Copy",
      "default": "Boardshorts + tee + hoodie"
    },
    {
      "type": "text",
      "id": "style_2",
      "label": "Style 2",
      "default": "Ride Ready"
    },
    {
      "type": "text",
      "id": "style_2_copy",
      "label": "Style 2 Copy",
      "default": "Shorts + windbreaker + helmet"
    },
    {
      "type": "text",
      "id": "style_3",
      "label": "Style 3",
      "default": "Trail Ready"
    },
    {
      "type": "text",
      "id": "style_3_copy",
      "label": "Style 3 Copy",
      "default": "Fleece + joggers + beanie"
    },
    {
      "type": "text",
      "id": "cross_sell_heading",
      "label": "Cross Sell Heading",
      "default": "Complete the Adventure"
    },
    {
      "type": "textarea",
      "id": "cross_sell_copy",
      "label": "Cross Sell Copy",
      "default": "Pair outfits with Trek bikes, helmets, ride accessories, backpacks, beach layers, and outdoor essentials for kids on the go."
    },
    {
      "type": "url",
      "id": "button_1_link",
      "label": "Button 1 Link"
    },
    {
      "type": "text",
      "id": "button_1_label",
      "label": "Button 1 Label",
      "default": "Shop Bikes"
    },
    {
      "type": "url",
      "id": "button_2_link",
      "label": "Button 2 Link"
    },
    {
      "type": "text",
      "id": "button_2_label",
      "label": "Button 2 Label",
      "default": "Shop Accessories"
    },
    {
      "type": "text",
      "id": "closing",
      "label": "Closing Line",
      "default": "Because the best days aren’t planned — they’re ridden, climbed, and discovered."
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#F6F1E8"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#2F3A32"
    }
  ],
  "presets": [
    {
      "name": "Boys Collection Story"
    }
  ]
}
{% endschema %}

<section class="collection-story-block" style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }};">
  <div class="page-width">
    <div class="collection-story-block__header">
      <p class="eyebrow">{{ section.settings.eyebrow }}</p>
      <h2>{{ section.settings.heading }}</h2>
      <p>{{ section.settings.intro }}</p>
      <p>{{ section.settings.brand_copy }}</p>
    </div>

    <div class="collection-story-block__features">
      <div>
        <h3>{{ section.settings.feature_1 }}</h3>
        <p>{{ section.settings.feature_1_copy }}</p>
      </div>
      <div>
        <h3>{{ section.settings.feature_2 }}</h3>
        <p>{{ section.settings.feature_2_copy }}</p>
      </div>
      <div>
        <h3>{{ section.settings.feature_3 }}</h3>
        <p>{{ section.settings.feature_3_copy }}</p>
      </div>
      <div>
        <h3>{{ section.settings.feature_4 }}</h3>
        <p>{{ section.settings.feature_4_copy }}</p>
      </div>
    </div>

    <div class="collection-story-block__styles">
      <h3>{{ section.settings.style_heading }}</h3>
      <div class="style-grid">
        <div>
          <strong>{{ section.settings.style_1 }}</strong>
          <p>{{ section.settings.style_1_copy }}</p>
        </div>
        <div>
          <strong>{{ section.settings.style_2 }}</strong>
          <p>{{ section.settings.style_2_copy }}</p>
        </div>
        <div>
          <strong>{{ section.settings.style_3 }}</strong>
          <p>{{ section.settings.style_3_copy }}</p>
        </div>
      </div>
    </div>

    <div class="collection-story-block__cross-sell">
      <h3>{{ section.settings.cross_sell_heading }}</h3>
      <p>{{ section.settings.cross_sell_copy }}</p>
      <div class="button-row">
        {% if section.settings.button_1_link != blank %}
          <a href="{{ section.settings.button_1_link }}" class="button">{{ section.settings.button_1_label }}</a>
        {% endif %}
        {% if section.settings.button_2_link != blank %}
          <a href="{{ section.settings.button_2_link }}" class="button button--secondary">{{ section.settings.button_2_label }}</a>
        {% endif %}
      </div>
    </div>

    <div class="collection-story-block__closing">
      <p><em>{{ section.settings.closing }}</em></p>
    </div>
  </div>
</section>

<style>
.collection-story-block {
  padding: 56px 0;
}
.collection-story-block__header {
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
}
.collection-story-block .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  margin-bottom: 10px;
}
.collection-story-block h2 {
  margin-bottom: 16px;
}
.collection-story-block__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 36px 0;
}
.collection-story-block__features div,
.collection-story-block__styles,
.collection-story-block__cross-sell {
  background: rgba(255,255,255,0.45);
  padding: 20px;
  border-radius: 16px;
}
.style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.button-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.collection-story-block__closing {
  text-align: center;
  margin-top: 28px;
}
@media screen and (max-width: 989px) {
  .collection-story-block__features,
  .style-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 749px) {
  .collection-story-block {
    padding: 40px 0;
  }
  .collection-story-block__features,
  .style-grid {
    grid-template-columns: 1fr;
  }
}
</style>