{% extends "base.html" %}
{% block content %}
<section class="hero">
    <canvas class="hero__canvas" id="hero-particles"></canvas>
    <div class="hero__inner">
        <h1 class="hero__title"><span class="text-accent">{{ config.extra.hero_title | default(value=config.title) }}</span></h1>
        {%- if config.extra.hero_subtitle or config.description %}
        <p class="hero__sub">{{ config.extra.hero_subtitle | default(value=config.description) }}</p>
        {%- endif %}
        {%- if config.extra.hero_actions %}
        <div class="hero__actions">
            {%- for action in config.extra.hero_actions %}
            <a href="{{ action.url }}" class="button{% if action.style | default(value="") == "outline" %} button--outline{% endif %}"{% if action.external | default(value=false) %} target="_blank" rel="noopener"{% endif %}>{{ action.name }}</a>
            {%- endfor %}
        </div>
        {%- endif %}
    </div>
</section>
{%- if config.extra.features %}
<section class="features" id="features">
    <h2 class="features__heading">Features</h2>
    <div class="features__grid">
        {%- for feature in config.extra.features %}
        {%- if feature.url %}
        <a href="{{ feature.url }}" class="feature-card feature-card--link">
            <h3 class="feature-card__name">{{ feature.name }}</h3>
            <p class="feature-card__desc">{{ feature.description }}</p>
        </a>
        {%- else %}
        <div class="feature-card">
            <h3 class="feature-card__name">{{ feature.name }}</h3>
            <p class="feature-card__desc">{{ feature.description }}</p>
        </div>
        {%- endif %}
        {%- endfor %}
    </div>
</section>
{%- endif %}
{%- if section.content %}
<section class="demo" id="demo">
    <div class="demo__body">{{ section.content | safe }}</div>
</section>
{%- endif %}
{% endblock content %}
{% block extra_body %}
<script>
(function() {
  const canvas = document.getElementById('hero-particles');
  if (!canvas) return;
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduced) { canvas.style.display = 'none'; return; }
  const ctx = canvas.getContext('2d');
  const colors = [
    [59, 130, 246],  // blue
    [52, 211, 153],  // green
    [40, 170, 200],  // teal blend
  ];
  let particles = [];
  const count = 60;
  const fpsInterval = 1000 / 30;
  let lastTime = 0;

  function resize() {
    canvas.width = canvas.parentElement.offsetWidth;
    canvas.height = canvas.parentElement.offsetHeight;
    if (particles.length === 0) init();
  }

  function init() {
    particles = [];
    for (let i = 0; i < count; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        r: 1 + Math.random() * 2.5,
        vx: (Math.random() - 0.5) * 0.3,
        vy: (Math.random() - 0.5) * 0.2,
        color: colors[Math.floor(Math.random() * colors.length)],
        phase: Math.random() * Math.PI * 2,
      });
    }
  }

  function draw(now) {
    requestAnimationFrame(draw);
    if (now - lastTime < fpsInterval) return;
    lastTime = now;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];
      p.x += p.vx;
      p.y += p.vy;

      // wrap around edges
      if (p.x < -10) p.x = canvas.width + 10;
      if (p.x > canvas.width + 10) p.x = -10;
      if (p.y < -10) p.y = canvas.height + 10;
      if (p.y > canvas.height + 10) p.y = -10;

      // gentle pulse
      const pulse = 0.08 + 0.07 * Math.sin(now * 0.001 + p.phase);
      const c = p.color;

      // soft glow
      const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 8);
      grad.addColorStop(0, 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + pulse + ')');
      grad.addColorStop(0.4, 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + (pulse * 0.3) + ')');
      grad.addColorStop(1, 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',0)');
      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r * 8, 0, Math.PI * 2);
      ctx.fill();

      // bright core
      ctx.fillStyle = 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + (pulse * 1.5) + ')';
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.fill();
    }


  }

  resize();
  window.addEventListener('resize', resize);
  requestAnimationFrame(draw);
})();
</script>
{% endblock extra_body %}