{% extends "base.html" %}
{% block content %}
<section class="hero">
    <canvas class="hero__canvas" id="binary-rain"></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 %}
        <div class="feature-card">
            <h3 class="feature-card__name">{{ feature.name }}</h3>
            <p class="feature-card__desc">{{ feature.description }}</p>
        </div>
        {%- 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('binary-rain');
  if (!canvas) return;
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    canvas.style.display = 'none';
    return;
  }
  const ctx = canvas.getContext('2d');
  const violet = [167, 139, 250];
  const cyan = [34, 211, 238];
  let columns, drops, speeds;
  const fontSize = 14;
  const fpsInterval = 1000 / 15;
  let lastTime = 0;
  let lastWidth = 0;
  function resize() {
    var w = canvas.parentElement.offsetWidth;
    if (w !== lastWidth) {
      lastWidth = w;
      canvas.width = w;
      canvas.height = canvas.parentElement.offsetHeight;
      columns = Math.floor(w / fontSize);
      drops = new Array(columns).fill(0).map(() => Math.random() * -50);
      speeds = new Array(columns).fill(0).map(() => 0.3 + Math.random() * 0.7);
    }
  }
  function lerp(a, b, t) {
    return a.map((v, i) => Math.round(v + (b[i] - v) * t));
  }
  function draw(now) {
    requestAnimationFrame(draw);
    if (now - lastTime < fpsInterval) return;
    lastTime = now;
    ctx.fillStyle = 'rgba(15, 13, 26, 0.12)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.font = fontSize + 'px monospace';
    for (let i = 0; i < columns; i++) {
      const char = Math.random() > 0.5 ? '1' : '0';
      const x = i * fontSize;
      const y = drops[i] * fontSize;
      const t = (Math.sin(now * 0.0005 + i * 0.3) + 1) / 2;
      const rgb = lerp(violet, cyan, t);
      const alpha = 0.15 + Math.random() * 0.15;
      ctx.fillStyle = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + alpha + ')';
      ctx.fillText(char, x, y);
      if (y > canvas.height && Math.random() > 0.98) {
        drops[i] = 0;
        speeds[i] = 0.3 + Math.random() * 0.7;
      }
      drops[i] += speeds[i];
    }
  }
  resize();
  window.addEventListener('resize', resize);
  requestAnimationFrame(draw);
})();
</script>
{% endblock extra_body %}
