// FAQ — 2-column: left companion panel + existing accordion (unchanged)

const FAQ_ITEMS = [
  {
    q: "How fast can we start a sprint?",
    a: "Most engagements kick off within 7 business days of a signed SOW. Discovery calls in the same week.",
  },
  {
    q: "Do you work with our existing engineers?",
    a: "Yes — pods are designed to embed. We pair with your team in your repo, your stack, and your standups.",
  },
  {
    q: "Which models and providers do you support?",
    a: "OpenAI, Anthropic, Google, open-weight Llama / Qwen / Mistral, and on-prem deployments via vLLM or Ollama.",
  },
  {
    q: "Can you sign our enterprise paperwork?",
    a: "MSAs, DPAs, BAAs, SOC 2 Type II, and custom security review questionnaires — yes to all.",
  },
  {
    q: "What happens after a sprint ends?",
    a: "You own the code, the evals, and the deployment. We offer optional retainers for monitoring and iteration.",
  },
];

// ─── AI platform data ─────────────────────────────────────────
const AI_PLATFORMS = [
  { name: "ChatGPT",    href: "https://chatgpt.com/?q=What+is+Blan.ma%3F",          icon: "assets/ai icons/chat-gpt-logo.svg"  },
  { name: "Claude",     href: "https://claude.ai/new?q=What+is+Blan.ma%3F",         icon: "assets/ai icons/claude-logo.svg"    },
  { name: "Perplexity", href: "https://www.perplexity.ai/?q=What+is+Blan.ma%3F",    icon: "assets/ai icons/preplex-logo.svg"   },
  { name: "Gemini",     href: "https://gemini.google.com/app?q=What+is+Blan.ma%3F", icon: "assets/ai icons/gemini-logo.svg"    },
  { name: "Grok",       href: "https://x.com/i/grok?text=What+is+Blan.ma%3F",       icon: "assets/ai icons/grok-logo.svg"      },
];

// ─── Accordion (unchanged) ────────────────────────────────────
const FAQItem = ({ q, a, open, onToggle }) => (
  <div className={"ag-faq__item" + (open ? " is-open" : "")}>
    <button className="ag-faq__row" onClick={onToggle} aria-expanded={open}>
      <span className="ag-faq__q">{q}</span>
      <span className="ag-faq__icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
          <line x1="5" y1="12" x2="19" y2="12"/>
          {!open && <line x1="12" y1="5" x2="12" y2="19"/>}
        </svg>
      </span>
    </button>
    {open && (
      <div className="ag-faq__body">{a}</div>
    )}
  </div>
);

// ─── FAQ ──────────────────────────────────────────────────────
const FAQ = ({ data, lang }) => {
  const hasSection = data !== null && data !== undefined;
  const faqItems = hasSection
    ? (Array.isArray(data) ? data.map(f => ({ q: i18(f.question, lang) || '', a: i18(f.answer, lang) || '' })) : [])
    : FAQ_ITEMS;

  const [openIdx,      setOpenIdx]      = React.useState(0);
  const [bookingOpen,  setBookingOpen]  = React.useState(false);
  const scrollTo = (id) =>
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });

  // FAQ structured data — injected once per render cycle
  React.useEffect(() => {
    const items = faqItems.filter(f => f.q && f.a);
    if (!items.length) return;
    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.id   = 'faq-schema';
    script.textContent = JSON.stringify({
      '@context':  'https://schema.org',
      '@type':     'FAQPage',
      mainEntity:  items.map(f => ({
        '@type': 'Question',
        name:    f.q,
        acceptedAnswer: { '@type': 'Answer', text: f.a },
      })),
    });
    document.head.appendChild(script);
    return () => document.getElementById('faq-schema')?.remove();
  }, [faqItems]);

  return (
    <>
    <section className="ag-faq" id="ag-section-faq">
      <div className="ag-faq__grid">

        {/* ── Left companion panel ── */}
        <aside className="ag-faq__aside">

          {/* Heading + AI row */}
          <div className="ag-faq__ai-block">
            <h2 className="ag-faq__ai-heading">{t('faq.heading', lang)}</h2>
            <p className="ag-faq__ai-sub">{t('faq.aiSub', lang)}</p>
            <div className="ag-faq__ai-btns" role="list" aria-label="Ask AI platforms">
              {AI_PLATFORMS.map((p) => (
                <a
                  key={p.name}
                  href={p.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="ag-faq__ai-btn"
                  aria-label={`Ask ${p.name}: What is Blan.ma?`}
                  role="listitem"
                >
                  <img src={p.icon} alt={p.name} width="22" height="22" />
                </a>
              ))}
            </div>
          </div>

          {/* Support card */}
          <div className="ag-faq__support">
            <div className="ag-faq__support-text">
              <p className="ag-faq__support-title">{t('faq.supportTitle', lang)}</p>
              <p className="ag-faq__support-body">{t('faq.supportBody', lang)}</p>
            </div>
            <button
              type="button"
              className="ag-faq__book-btn ag-btn ag-btn--dark"
              onClick={() => setBookingOpen(true)}
            >
              {t('faq.bookCall', lang)}
              <span className="ag-faq__book-avatars" aria-hidden="true">
                <span
                  className="ag-faq__book-avatar"
                  style={{ backgroundImage: "url('assets/team-aria.jpg')" }}
                />
                <span
                  className="ag-faq__book-avatar"
                  style={{ backgroundImage: "url('assets/team-leo.jpg')" }}
                />
              </span>
            </button>
          </div>

        </aside>

        {/* ── Right: accordion ── */}
        <div className={"ag-faq__list" + ((lang === 'dar' || lang === 'ar') ? ' faq--rtl' : '')}>
          {faqItems.map((it, i) => (
            <FAQItem
              key={it.q}
              {...it}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>

      </div>
    </section>
    {bookingOpen && <BookingModal onClose={() => setBookingOpen(false)} />}
    </>
  );
};

window.FAQ = FAQ;