// ---------- FAQ section ----------
// Fancy accordion. Big serif italic question, Inter answer, oversized index
// number in the margin, animated plus-to-cross toggle. The "donate without
// seeing the animals" question shows an inline placeholder QR code.

function QRPlaceholder({ accent }) {
  // Real, scannable QR code for the donation URL, rendered as SVG modules.
  // We over-correct (level H) so the center "om" medallion doesn't break it.
  const DONATE_URL = "https://www.samenlooprosmalen.nl/donate-0mqdar";
  const { size, cells } = React.useMemo(() => {
    const qr = window.qrcode(0, "H");
    qr.addData(DONATE_URL);
    qr.make();
    const n = qr.getModuleCount();
    const out = [];
    for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        if (qr.isDark(y, x)) out.push([x, y]);
      }
    }
    return { size: n, cells: out };
  }, []);

  const cx = size / 2;

  return (
    <a
      className="faq-qr"
      href={DONATE_URL}
      target="_blank"
      rel="noopener"
      aria-label="Donate"
    >
      <svg
        viewBox={`-1 -1 ${size + 2} ${size + 2}`}
        width="148"
        height="148"
        style={{ color: "var(--ink)" }}
        aria-hidden="true"
      >
        <rect x="-1" y="-1" width={size + 2} height={size + 2} rx="2" fill="white" />
        {cells.map(([x, y], i) => (
          <rect key={i} x={x} y={y} width="1" height="1" fill="currentColor" />
        ))}
        {/* center logo medallion — sits inside the level-H error budget */}
        <g transform={`translate(${cx}, ${cx})`}>
          <circle r="3.6" fill="white" />
          <circle r="2.6" fill={accent} />
          <text
            y="0.95"
            textAnchor="middle"
            fontSize="2.8"
            fontFamily="Fraunces, Georgia, serif"
            fontStyle="italic"
            fontWeight="600"
            fill="white"
          >
            om
          </text>
        </g>
      </svg>
    </a>
  );
}

function FaqItem({ index, open, onToggle, question, answer, accent, qrCaption, withQR }) {
  const bodyRef = React.useRef(null);
  const [maxH, setMaxH] = React.useState(0);

  React.useLayoutEffect(() => {
    if (!bodyRef.current) return;
    setMaxH(bodyRef.current.scrollHeight);
  }, [open, withQR, answer]);

  return (
    <div className={`faq-item ${open ? "is-open" : ""}`}>
      <button
        type="button"
        className="faq-row"
        onClick={onToggle}
        aria-expanded={open}
      >
        <span
          className="faq-num"
          style={open ? { color: accent } : undefined}
          aria-hidden="true"
        >
          {String(index + 1).padStart(2, "0")}
        </span>
        <span className="faq-q">{question}</span>
        <span
          className="faq-toggle"
          style={open ? { background: accent, borderColor: accent, color: "white" } : undefined}
          aria-hidden="true"
        >
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
            <path d="M5 12h14" />
            <path d="M12 5v14" className="faq-toggle-v" />
          </svg>
        </span>
      </button>
      <div
        className="faq-body-wrap"
        style={{ maxHeight: open ? maxH + "px" : "0px" }}
      >
        <div className="faq-body" ref={bodyRef}>
          <div className="faq-body-inner">
            <span className="faq-num faq-num--ghost" aria-hidden="true" />
            <div className="faq-a-wrap">
              <p
                className="faq-a"
                dangerouslySetInnerHTML={{ __html: answer }}
              />
              {withQR && (
                <div className="faq-qr-block">
                  <QRPlaceholder accent={accent} />
                  <span className="faq-qr-caption">{qrCaption}</span>
                </div>
              )}
            </div>
            <span className="faq-num faq-num--ghost" aria-hidden="true" />
          </div>
        </div>
      </div>
    </div>
  );
}

function Faq({ t, tHtml, accent, markStyle = "card" }) {
  const [open, setOpen] = React.useState(0); // first one open
  const items = [1, 2, 3, 4, 5, 6, 7].map((n) => ({
    q: t(`faq_q_${n}`),
    a: t(`faq_a_${n}`),
    qr: n === 5,
  }));

  return (
    <section className="faq" id="faq">
      <div className="faq-head">
        <div className="faq-head-left">
          <div className="section-eyebrow">{t("faq_eyebrow")}</div>
          <h2 className="section-title" {...tHtml("faq_title")} />
        </div>
        <div className={`faq-head-right faq-head-right--${markStyle}`}>
          <FaqMark style={markStyle} accent={accent} count={items.length} t={t} />
          {markStyle !== "card" && (
            <p className="faq-head-note">{t("faq_note")}</p>
          )}
        </div>
      </div>

      <div className="faq-list">
        {items.map((it, i) => (
          <FaqItem
            key={i}
            index={i}
            open={open === i}
            onToggle={() => setOpen(open === i ? -1 : i)}
            question={it.q}
            answer={it.a}
            accent={accent}
            withQR={it.qr}
            qrCaption={t("faq_qr_caption")}
          />
        ))}
      </div>
    </section>
  );
}

// ---------- FAQ header mark — multiple visual treatments ----------
function FaqMark({ style, accent, count, t }) {
  if (style === "card") {
    // Tilted catalog / library index card with stamped metadata.
    // The cheeky note lives inside the card as the bottom quote.
    const rows = [
      [t("faq_card_row1_label"), t("faq_card_row1_value")],
      [t("faq_card_row2_label"), t("faq_card_row2_value")],
      [t("faq_card_row3_label"), t("faq_card_row3_value")],
    ];
    return (
      <div className="faq-card" role="img" aria-label="FAQ catalog card">
        {/* punched hole at the top, like a real card */}
        <span className="faq-card-hole" aria-hidden="true" />
        <div className="faq-card-head">
          <span className="faq-card-title">FAQ</span>
          <span className="faq-card-no">{t("faq_card_no")} 07</span>
        </div>
        <div className="faq-card-rule" aria-hidden="true" />
        <ul className="faq-card-rows">
          {rows.map(([label, value], i) => (
            <li key={i} className="faq-card-row">
              <span className="faq-card-row-label">{label}</span>
              <span className="faq-card-row-dots" aria-hidden="true" />
              <span className="faq-card-row-value">{value}</span>
            </li>
          ))}
        </ul>
        <div className="faq-card-rule" aria-hidden="true" />
        <p className="faq-card-note">
          <span className="faq-card-quote" aria-hidden="true">“</span>
          {t("faq_note")}
          <span className="faq-card-quote faq-card-quote--close" aria-hidden="true">”</span>
        </p>
        {/* wax-seal style dot */}
        <span
          className="faq-card-seal"
          aria-hidden="true"
          style={{ background: accent }}
        >
          OM
        </span>
      </div>
    );
  }

  if (style === "stamp") {
    // Tilted dashed circular stamp, postal/passport vibe.
    return (
      <div className="faq-mark faq-mark--stamp" aria-hidden="true" style={{ color: accent }}>
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <defs>
            <path id="faq-stamp-arc-top" d="M 18 60 A 42 42 0 0 1 102 60" fill="none" />
            <path id="faq-stamp-arc-bot" d="M 102 60 A 42 42 0 0 1 18 60" fill="none" />
          </defs>
          <circle cx="60" cy="60" r="54" fill="none" stroke="currentColor" strokeWidth="1.4" strokeDasharray="2 3" opacity="0.55" />
          <circle cx="60" cy="60" r="46" fill="none" stroke="currentColor" strokeWidth="1.4" />
          <text fill="currentColor" fontFamily="Inter, sans-serif" fontWeight="700" fontSize="7" letterSpacing="2.4">
            <textPath href="#faq-stamp-arc-top" startOffset="50%" textAnchor="middle">ONLY · MOLES · FAQ</textPath>
          </text>
          <text fill="currentColor" fontFamily="Inter, sans-serif" fontWeight="600" fontSize="6" letterSpacing="2">
            <textPath href="#faq-stamp-arc-bot" startOffset="50%" textAnchor="middle">{`0 1 — 0 ${count}`}</textPath>
          </text>
          <text x="60" y="78" textAnchor="middle" fontFamily="Fraunces, Georgia, serif" fontStyle="italic" fontWeight="500" fontSize="58" fill="currentColor">?</text>
          <g fill="currentColor" opacity="0.7">
            <circle cx="14" cy="60" r="1.2" />
            <circle cx="106" cy="60" r="1.2" />
          </g>
        </svg>
      </div>
    );
  }

  if (style === "bubble") {
    return (
      <div className="faq-mark faq-mark--bubble" aria-hidden="true" style={{ color: accent }}>
        <svg viewBox="0 0 140 120" width="100%" height="100%">
          <path
            d="M 18 14 Q 8 14 8 26 L 8 78 Q 8 92 22 92 L 50 92 L 56 110 L 70 92 L 118 92 Q 132 92 132 78 L 132 26 Q 132 14 120 14 Z"
            fill="currentColor"
            opacity="0.12"
          />
          <path
            d="M 18 14 Q 8 14 8 26 L 8 78 Q 8 92 22 92 L 50 92 L 56 110 L 70 92 L 118 92 Q 132 92 132 78 L 132 26 Q 132 14 120 14 Z"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinejoin="round"
          />
          <text x="70" y="68" textAnchor="middle" fontFamily="Fraunces, Georgia, serif" fontStyle="italic" fontWeight="500" fontSize="52" fill="currentColor">?</text>
        </svg>
      </div>
    );
  }

  // "ring" — original spinning dashed circle
  return (
    <div className="faq-mark faq-mark--ring" aria-hidden="true" style={{ color: accent }}>
      <svg viewBox="0 0 120 120" width="100%" height="100%">
        <circle cx="60" cy="60" r="58" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="3 5" opacity="0.85" />
        <text x="60" y="86" textAnchor="middle" fontFamily="Fraunces, Georgia, serif" fontStyle="italic" fontWeight="500" fontSize="92" fill="currentColor">?</text>
      </svg>
    </div>
  );
}

Object.assign(window, { Faq, FaqMark });