{% extends 'base.html' %}
{% block title %}{{ page.meta_title|default:page.title }}{% endblock %}
{% block meta_description %}{{ page.meta_description|default:page.subheadline }}{% endblock %}
{% block extra_head %}
<style>
  :root { --landing-color: {{ page.theme_color|default:"#1a8754" }}; }
  .landing-hero { background: linear-gradient(135deg, var(--landing-color), #0a3622); color: #fff; padding: 6rem 0; }
  .landing-hero.has-img { background: none; position: relative; }
  .landing-hero.has-img::before { content:''; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
  .landing-hero .container { position: relative; z-index: 1; }
  .landing-cta { background: var(--landing-color); color: #fff; }
</style>
{% endblock %}
{% block content %}
<section class="landing-hero {% if page.hero_image %}has-img{% endif %}" {% if page.hero_image %}style="background: url('{{ page.hero_image.url }}') center/cover;"{% endif %}>
  <div class="container text-center">
    <h1 class="display-4 fw-bold">{{ page.headline }}</h1>
    {% if page.subheadline %}<p class="lead">{{ page.subheadline }}</p>{% endif %}
    <div class="mt-4">
      {% if page.cta_phone %}<a href="tel:{{ page.cta_phone }}" class="btn btn-light btn-lg me-2"><i class="bi bi-telephone-fill"></i> Call {{ page.cta_phone }}</a>{% endif %}
      <a href="#inquiry" class="btn btn-warning btn-lg">{{ page.cta_text|default:"Get In Touch" }}</a>
    </div>
  </div>
</section>

{% if page.body_html %}
<section class="section"><div class="container" style="max-width: 900px;">{{ page.body_html|safe }}</div></section>
{% endif %}

{% if properties %}
<section class="section bg-light">
  <div class="container">
    <h2 class="text-center mb-4">Available Properties</h2>
    <div class="row g-4">
      {% for property in properties %}<div class="col-md-6 col-lg-4">{% include 'partials/property_card.html' %}</div>{% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% if page.show_inquiry_form %}
<section class="section landing-cta" id="inquiry">
  <div class="container" style="max-width: 600px;">
    <h2 class="text-center mb-4">Request Information</h2>
    <form method="post" action="{% url 'landing_pages:inquiry' slug=page.slug %}" class="contact-form-card text-dark">
      {% csrf_token %}
      <div class="row g-3">
        <div class="col-md-6"><input type="text" name="name" class="form-control" placeholder="Full name *" required></div>
        <div class="col-md-6"><input type="email" name="email" class="form-control" placeholder="Email"></div>
        <div class="col-md-12"><input type="text" name="phone" class="form-control" placeholder="Phone number *" required></div>
        <div class="col-md-12"><textarea name="message" class="form-control" rows="3" placeholder="Tell us what you need..."></textarea></div>
        <div class="col-md-12"><button class="btn btn-primary btn-lg w-100">Send Request</button></div>
      </div>
    </form>
  </div>
</section>
{% endif %}
{% endblock %}