/**
 * Content Loader — Fetches messaging.json and injects ALL visitor-facing content.
 * No hardcoded copy in index.html — everything comes from the JSON.
 * Falls back gracefully if fetch fails (empty sections, no crash).
 */

(async function loadContent() {
  let data;
  try {
    const res = await fetch('/strategy/messaging.json');
    if (!res.ok) throw new Error(res.status);
    data = await res.json();
  } catch (e) {
    console.warn('Content loader: messaging.json unavailable.');
    return;
  }

  // --- Hero ---
  setText('[data-content="hero-headline"]', data.brand.hero_headline);
  setText('[data-content="hero-subheading"]', data.brand.hero_subheading);
  setText('[data-content="urgency-line"]', data.brand.urgency_line);

  // --- Problem ---
  setText('[data-content="problem-headline"]', data.problem.short_headline);
  setText('[data-content="problem-description"]', data.problem.short_description);

  // --- How It Works ---
  const howSteps = document.querySelectorAll('[data-content="how-step"]');
  howSteps.forEach((el, i) => {
    if (data.how_it_works[i]) {
      setText('[data-content="step-title"]', data.how_it_works[i].title, el);
      setText('[data-content="step-description"]', data.how_it_works[i].description, el);
    }
  });

  // --- Use Cases (dynamic generation) ---
  const useCasesGrid = document.getElementById('use-cases-grid');
  if (useCasesGrid && data.use_cases) {
    useCasesGrid.innerHTML = data.use_cases.map(uc => `
      <div class="snap-start shrink-0 w-72 md:w-80 border border-gray-200 rounded-lg p-6 hover:-translate-y-1 hover:shadow-xl transition duration-300 bg-white">
        <img src="${esc(uc.image)}" alt="${esc(uc.title)}" class="w-full h-40 object-cover rounded-md mb-4">
        <h3 class="text-xl font-bold mb-3">${esc(uc.title)}</h3>
        <p class="text-gray-600 text-base">${esc(uc.description)}</p>
      </div>
    `).join('');
  }

  // --- Chat Demo (tabbed: whatsapp_screening + checkin) ---
  const demoKeys = ['whatsapp_screening', 'checkin'];
  const demos = demoKeys.map(k => data.chat_examples[k]).filter(Boolean);

  if (demos.length) {
    // Build tabs
    const tabsContainer = document.getElementById('chat-demo-tabs');
    if (tabsContainer) {
      tabsContainer.innerHTML = demos.map((demo, i) => `
        <button class="demo-tab px-5 py-2 rounded-full text-sm font-semibold transition ${i === 0 ? 'bg-black text-white' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}" data-demo-index="${i}">
          ${esc(demo.label)}
        </button>
      `).join('');
    }

    function renderDemo(index) {
      const demo = demos[index];
      // Update tab styles
      document.querySelectorAll('.demo-tab').forEach((tab, i) => {
        tab.className = `demo-tab px-5 py-2 rounded-full text-sm font-semibold transition ${i === index ? 'bg-black text-white' : 'bg-gray-200 text-gray-600 hover:bg-gray-300'}`;
      });
      // Render chat
      const container = document.getElementById('chat-demo-container');
      if (container) {
        container.innerHTML = `
          <div class="flex items-center gap-2 mb-4 sticky top-0 bg-white pb-2 z-10">
            <div class="w-8 h-8 bg-black rounded-full flex items-center justify-center text-white text-xs font-bold">S</div>
            <span class="text-sm font-semibold text-gray-500 uppercase tracking-wide">${esc(demo.type)}</span>
          </div>
        `;
        demo.messages.forEach(msg => {
          const div = document.createElement('div');
          div.className = msg.sender === 'sophie' ? 'flex justify-start' : 'flex justify-end';
          const bubble = document.createElement('div');
          bubble.className = msg.sender === 'sophie'
            ? 'chat-bubble-sophie text-gray-700 text-[15px]'
            : 'chat-bubble-user text-[15px]';
          bubble.textContent = msg.text;
          div.appendChild(bubble);
          container.appendChild(div);
        });
        container.scrollTop = 0;
      }
      // Render signals
      const signalsLabel = document.getElementById('chat-demo-signals-label');
      if (signalsLabel) signalsLabel.textContent = demo.signals_label || '';
      const signalsContainer = document.getElementById('chat-demo-signals');
      if (signalsContainer && demo.signals) {
        const colors = ['bg-green-100 text-green-700', 'bg-blue-100 text-blue-700', 'bg-amber-100 text-amber-700', 'bg-purple-100 text-purple-700', 'bg-rose-100 text-rose-700'];
        const icons = ['✓', '★', '⚡', '●', '◆'];
        signalsContainer.innerHTML = demo.signals.map((signal, i) => `
          <div class="flex items-center gap-3">
            <span class="w-8 h-8 ${colors[i % colors.length]} rounded-lg flex items-center justify-center text-sm font-bold">${icons[i % icons.length]}</span>
            <p class="font-semibold text-sm">${esc(signal)}</p>
          </div>
        `).join('');
      }
      const signalCount = document.getElementById('chat-demo-signal-count');
      if (signalCount && demo.signals) {
        signalCount.textContent = `${demo.signals.length} signals`;
      }
    }

    // Initial render
    renderDemo(0);

    // Tab click handlers
    document.querySelectorAll('.demo-tab').forEach(tab => {
      tab.addEventListener('click', () => renderDemo(parseInt(tab.dataset.demoIndex)));
    });
  }

  // --- Intelligence Routing ---
  const routePaths = document.querySelectorAll('[data-content="route-path"]');
  routePaths.forEach((el, i) => {
    if (data.intelligence_routing[i]) {
      setText('[data-content="route-title"]', data.intelligence_routing[i].title, el);
      setText('[data-content="route-description"]', data.intelligence_routing[i].description, el);
      setText('[data-content="route-emoji"]', data.intelligence_routing[i].emoji, el);
    }
  });

  // --- Math of Scale ---
  setText('[data-content="math-headline"]', data.math_of_scale.headline);
  setText('[data-content="math-tagline"]', data.math_of_scale.tagline);
  setText('[data-content="human-stat"]', data.math_of_scale.human.stat);
  setText('[data-content="human-unit"]', data.math_of_scale.human.unit);
  setText('[data-content="sophie-stat"]', data.math_of_scale.sophie.stat);
  setText('[data-content="sophie-unit"]', data.math_of_scale.sophie.unit);

  // --- FAQ (dynamic generation with accordion) ---
  const faqContainer = document.getElementById('faq-container');
  if (faqContainer && data.faq) {
    faqContainer.innerHTML = data.faq.map((item, i) => `
      <div class="border border-gray-200 rounded-lg">
        <button class="faq-button w-full px-6 py-4 text-left font-bold text-lg flex justify-between items-center hover:bg-gray-50 transition" data-target="faq-${i + 1}">
          <span>${esc(item.question)}</span>
          <span class="toggle-icon">+</span>
        </button>
        <div id="faq-${i + 1}" class="faq-content hidden px-6 py-4 bg-gray-50 text-gray-600 border-t border-gray-200">
          <p>${esc(item.answer)}</p>
        </div>
      </div>
    `).join('');

    // Attach accordion behavior
    faqContainer.querySelectorAll('.faq-button').forEach(button => {
      button.addEventListener('click', function() {
        const target = this.getAttribute('data-target');
        const content = document.getElementById(target);
        const toggleIcon = this.querySelector('.toggle-icon');
        faqContainer.querySelectorAll('.faq-content').forEach(item => {
          if (item.id !== target) {
            item.classList.add('hidden');
            item.previousElementSibling.querySelector('.toggle-icon').textContent = '+';
          }
        });
        content.classList.toggle('hidden');
        toggleIcon.textContent = content.classList.contains('hidden') ? '+' : '−';
      });
    });
  }

  // --- Integrations ---
  setText('[data-content="integrations-headline"]', data.integrations.headline);
  setText('[data-content="integrations-subheading"]', data.integrations.subheading);
  setText('[data-content="integrations-description"]', data.integrations.description);

  // --- CTA ---
  document.querySelectorAll('[data-content="cta-primary"]').forEach(btn => {
    btn.textContent = data.cta.primary_text;
  });
  setText('[data-content="footer-headline"]', data.cta.footer_headline);

  // --- Testimonials ---
  const cards = document.querySelectorAll('[data-content="testimonial-card"]');
  cards.forEach((el, i) => {
    const idx = i % data.testimonials.length;
    const t = data.testimonials[idx];
    setText('[data-content="testimonial-quote"]', t.quote, el);
    setText('[data-content="testimonial-rating"]', '⭐ ' + t.rating, el);
    const img = el.querySelector('[data-content="testimonial-image"]');
    if (img) img.src = t.image;
  });

  // --- Helpers ---
  function setText(selector, text, parent) {
    const el = (parent || document).querySelector(selector);
    if (el) el.textContent = text;
  }

  function esc(str) {
    const d = document.createElement('div');
    d.textContent = str;
    return d.innerHTML;
  }
})();