Roasify Shopify Theme Core

{%- style -%}
  .hero-{{ section.id }} {
    background-color: {{ section.settings.bg_color }};
    min-height: {{ section.settings.hero_height }}px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .hero-overlay-{{ section.id }} {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(5,5,5,0.95) 100%);
    z-index: 1;
  }
  .hero-container-{{ section.id }} {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    z-index: 2;
  }
  .hero-accent-{{ section.id }} {
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: {{ section.settings.accent_color }};
    font-weight: 600;
  }
{%- endstyle -%}

<section class="hero-{{ section.id }}">
  <div class="hero-overlay-{{ section.id }}"></div>
  
  {%- if section.settings.bg_image != blank -%}
    <img 
      src="{{ section.settings.bg_image | image_url: width: 1920 }}" 
      alt="{{ section.settings.title }}"
      class="absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
      loading="eager"
    >
  {%- endif -%}

  <div class="hero-container-{{ section.id }}">
    <div style="max-width: 600px;">
      <span class="hero-accent-{{ section.id }}">{{ section.settings.subtitle }}</span>
      <h1 style="color: #fff; font-size: 48px; text-transform: uppercase; margin: 15px 0; font-family: var(--font-display);">
        {{ section.settings.title }}
      </h1>
      <p style="color: #a3a3a3; font-size: 14px; line-height: 1.6; margin-bottom: 30px;">
        {{ section.settings.description }}
      </p>
      
      {%- if section.settings.cta_link != blank -%}
        <a 
          href="{{ section.settings.cta_link }}" 
          style="background-color: #fff; color: #000; padding: 15px 35px; text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: bold;"
        >
          {{ section.settings.cta_text }}
        </a>
      {%- endif -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Roasify Premium Hero",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading text",
      "default": "Architectural Posture"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Tagline",
      "default": "Capsule Core Release v1.0"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description Paragraph",
      "default": "Engineered street garments featuring rigid silhouettes and organic elements."
    },
    {
      "type": "image_picker",
      "id": "bg_image",
      "label": "Background Hero Image"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Fallback BG color",
      "default": "#050505"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent Color",
      "default": "#0047ff"
    },
    {
      "type": "range",
      "id": "hero_height",
      "label": "Height (px)",
      "min": 400,
      "max": 900,
      "step": 50,
      "default": 650
    },
    {
      "type": "text",
      "id": "cta_text",
      "label": "CTA Button Label",
      "default": "Explore Drops"
    },
    {
      "type": "url",
      "id": "cta_link",
      "label": "CTA Redirection URL"
    }
  ],
  "presets": [
    {
      "name": "Roasify Premium Hero",
      "category": "Image with text overlay"
    }
  ]
}
{% endschema %}