{% extends "base.html" %}

{% block title %}{{ config.title }}{% endblock title %}

{% block content %}
<section class="hero" id="top">
    <div class="hero__inner">
        <div class="hero__text">
            <h1 class="hero__title">{{ config.extra.hero_title | safe }}</h1>
            <p class="hero__subtitle">{{ config.extra.hero_subtitle }}</p>
            {%- if config.extra.hero_cta %}
            <a href="{{ config.extra.hero_cta_url | default(value="#contact") }}" class="hero__cta">{{ config.extra.hero_cta }}</a>
            {%- endif %}
        </div>
        {%- if config.extra.logo_image %}
        <div class="hero__image">
            <img src="{{ config.extra.logo_image }}" alt="{{ config.title }}" class="hero__image-img">
        </div>
        {%- endif %}
    </div>
</section>

{%- if config.extra.services %}
<section class="services" id="services" aria-labelledby="services-heading">
    <div class="section-inner">
        <h2 class="section-heading" id="services-heading">{{ config.extra.services_heading | default(value="Our Services") }}</h2>
        {%- if config.extra.services_subheading %}
        <p class="section-subheading">{{ config.extra.services_subheading }}</p>
        {%- endif %}
        <div class="services__grid">
            {%- for item in config.extra.services %}
            <div class="service-card">
                <div class="service-card__icon">
                    {%- if item.icon == "star" %}
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                    {%- elif item.icon == "shield" %}
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    {%- elif item.icon == "bolt" %}
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                    {%- elif item.icon == "heart" %}
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                    {%- elif item.icon == "check" %}
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {%- elif item.icon == "globe" %}
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                    {%- else %}
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
                    {%- endif %}
                </div>
                <h3 class="service-card__name">{{ item.name }}</h3>
                <p class="service-card__desc">{{ item.description }}</p>
                {%- if item.price %}
                <span class="service-card__price">{{ item.price }}</span>
                {%- endif %}
            </div>
            {%- endfor %}
        </div>
    </div>
</section>
{%- endif %}

{%- if config.extra.steps %}
<section class="steps" id="how-it-works" aria-labelledby="steps-heading">
    <div class="section-inner">
        <h2 class="section-heading" id="steps-heading">{{ config.extra.steps_heading | default(value="How It Works") }}</h2>
        {%- if config.extra.steps_subheading %}
        <p class="section-subheading">{{ config.extra.steps_subheading }}</p>
        {%- endif %}
        <ol class="steps__grid">
            {%- for step in config.extra.steps %}
            <li class="step">
                <div class="step__number" aria-hidden="true">{{ step.number }}</div>
                <h3 class="step__title">{{ step.title }}</h3>
                <p class="step__desc">{{ step.description }}</p>
            </li>
            {%- endfor %}
        </ol>
    </div>
</section>
{%- endif %}

{%- if config.extra.about_paragraphs %}
<section class="about" id="about" aria-labelledby="about-heading">
    <div class="section-inner">
        <h2 class="section-heading" id="about-heading">{{ config.extra.about_heading | default(value="About Us") }}</h2>
        {%- if config.extra.logo_image %}
        <div class="about__avatar">
            <img src="{{ config.extra.logo_image }}" alt="{{ config.title }}" class="about__avatar-img" loading="lazy">
        </div>
        {%- endif %}
        <div class="about__content">
            {%- for paragraph in config.extra.about_paragraphs %}
            <p>{{ paragraph }}</p>
            {%- endfor %}
        </div>
    </div>
</section>
{%- endif %}

<section class="contact" id="contact" aria-labelledby="contact-heading">
    <div class="section-inner">
        <h2 class="contact__heading" id="contact-heading">{{ config.extra.contact_heading | default(value="Contact Us") }}</h2>
        {%- if config.extra.contact_subheading %}
        <p class="contact__subheading">{{ config.extra.contact_subheading }}</p>
        {%- endif %}
        <form class="contact__form" id="contact-form">
            <input type="hidden" name="_site" value="{{ config.base_url | replace(from="https://", to="") | replace(from="http://", to="") }}">
            <input type="hidden" name="_form" value="contact">
            <input type="hidden" name="_hp" value="" style="display:none" tabindex="-1" autocomplete="off">
            <div class="contact__field">
                <label for="cf-name">Name</label>
                <input type="text" id="cf-name" name="name" required>
            </div>
            <div class="contact__field">
                <label for="cf-email">Email</label>
                <input type="email" id="cf-email" name="email" required>
            </div>
            <div class="contact__field">
                <label for="cf-message">Message</label>
                <textarea id="cf-message" name="message" rows="4" required></textarea>
            </div>
            <button type="submit" class="contact__submit">Send message</button>
            <div class="contact__feedback" id="contact-feedback"></div>
        </form>
        <div class="contact__methods">
            {%- if config.extra.contact_email %}
            <a href="mailto:{{ config.extra.contact_email }}" class="contact__method">
                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                <span>{{ config.extra.contact_email }}</span>
            </a>
            {%- endif %}
            {%- if config.extra.contact_phone %}
            <a href="tel:{{ config.extra.contact_phone }}" class="contact__method">
                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                <span>{{ config.extra.contact_phone }}</span>
            </a>
            {%- endif %}
            {%- if config.extra.location %}
            <div class="contact__method">
                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                <span>{{ config.extra.location }}</span>
            </div>
            {%- endif %}
        </div>
    </div>
</section>

{%- if section.content %}
<section class="extra-content">
    <div class="section-inner">
        {{ section.content | safe }}
    </div>
</section>
{%- endif %}
{% endblock content %}

{% block extra_body %}
<script>
(function() {
  var form = document.getElementById('contact-form');
  if (!form) return;

  var feedback = document.getElementById('contact-feedback');
  var submitBtn = form.querySelector('.contact__submit');

  form.addEventListener('submit', function(e) {
    e.preventDefault();

    var data = {};
    var formData = new FormData(form);
    formData.forEach(function(value, key) { data[key] = value; });

    submitBtn.disabled = true;
    submitBtn.textContent = 'Sending...';
    feedback.textContent = '';
    feedback.className = 'contact__feedback';

    var url = location.hostname === 'localhost' || location.hostname === '127.0.0.1'
      ? 'http://localhost:1317/submit'
      : 'https://forms.dkdc.dev/submit';

    fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
    .then(function(res) {
      if (res.status === 429) {
        throw new Error('Too many requests. Please wait a moment and try again.');
      }
      return res.json();
    })
    .then(function(json) {
      if (json.ok) {
        feedback.textContent = 'Message sent! We\'ll get back to you soon.';
        feedback.className = 'contact__feedback contact__feedback--success';
        submitBtn.textContent = 'Sent';
        Array.from(form.elements).forEach(function(el) { el.disabled = true; });
        form.style.opacity = '0.5';
      } else {
        feedback.textContent = json.error || 'Something went wrong. Please try again.';
        feedback.className = 'contact__feedback contact__feedback--error';
      }
    })
    .catch(function(err) {
      feedback.textContent = err.message || 'Network error. Please try again.';
      feedback.className = 'contact__feedback contact__feedback--error';
    })
    .finally(function() {
      if (form.style.opacity !== '0.5') {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Send message';
      }
    });
  });
})();
</script>
{% endblock extra_body %}