<!--
  templateType: section
  label: Hero Banner
  isAvailableForNewContent: true
  screenshotPath: ../images/section-previews/hero-banner.png
  description: "Full-width hero banner with background image and text overlay"
-->
{% dnd_section
  background_image={
    "backgroundPosition": "MIDDLE_CENTER",
    "backgroundSize": "cover",
    "imageUrl": context.background_image or get_asset_url("../images/sample/hero-main.jpg")
  },
  padding={"top": 120, "bottom": 120, "left": 20, "right": 20},
  max_width=1200,
  vertical_alignment="MIDDLE"
%}
  {% dnd_row %}
    {% dnd_column width=12 %}
      {% dnd_module "hero_content"
        path="@hubspot/rich_text",
        label="Hero Content",
        html={{ context.content or '<div style="text-align: center; color: white;">
          <h1 style="margin-bottom: 1.5rem; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">Transform Your Revenue Operations</h1>
          <p style="font-size: clamp(1.125rem, 2.5vw, 1.5rem); margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">Unlock the full potential of HubSpot with expert RevOps strategies that drive predictable growth</p>
        </div>' }}
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
  {% dnd_row %}
    {% dnd_column width=12 %}
      {% dnd_module "hero_button"
        path="../modules/button.module",
        label="Hero Button",
        button_text={{ context.button_text or "Get Started" }},
        styles={
          "background": {
            "color": {"color": "#ff7a59", "opacity": 100}
          },
          "text": {
            "font": {"color": "#ffffff"}
          },
          "alignment": {
            "alignment": {
              "horizontal_align": "CENTER"
            }
          }
        }
      %}
      {% end_dnd_module %}
    {% end_dnd_column %}
  {% end_dnd_row %}
{% end_dnd_section %}
