/* FAQ page direction — engineered for both human readability and
   machine extraction (Google AI Overviews, ChatGPT, Perplexity).

   For each Q:
     - <h3> question
     - One-sentence "answer" lead paragraph (extractable snippet)
     - Longer "detail" paragraph (context for LLMs)
   All visible by default — no JS-hidden content.
   FAQPage JSON-LD is injected in the HTML head (not here).
*/

const { useState: useStateFaq, useEffect: useEffectFaq, useMemo: useMemoFaq } = React;

function FaqDirection({ lang, setLang, accent, palette, revealAll, noNav }) {
  const cart = useCart();
  const drop = window.DROP_DATA.drop;
  const cd = useCountdown(drop.iso);
  const seo = window.AWOTOWA_SEO;
  const cats = seo.faq.categories;
  const items = seo.faq.items;

  // Group items by category, preserving order
  const grouped = useMemoFaq(() => {
    const map = {};
    cats.forEach(c => { map[c.id] = []; });
    items.forEach(it => { (map[it.cat] || (map[it.cat] = [])).push(it); });
    return map;
  }, [items, cats]);

  const f = { stack: "'Newsreader', 'Times New Roman', serif", body: 500, display: 600 };

  return (
    <div style={{
      background: "#222222", color: "#ece5d8", minHeight: "100vh",
      fontFamily: "var(--mf-serif)",
      fontWeight: "var(--mf-body-weight, 500)",
      ["--mf-serif"]: f.stack,
      ["--mf-body-weight"]: f.body,
      ["--mf-display-weight"]: f.display,
    }}>
      {!noNav && <MfNav lang={lang} setLang={setLang} accent={accent} cart={cart} cd={cd} revealAll={revealAll} />}

      <FaqHero lang={lang} accent={accent} items={items} />
      {!noNav && <MfBergenStrip palette={palette} />}
      <FaqToc lang={lang} accent={accent} cats={cats} grouped={grouped} />

      <main>
        {cats.map((c, ci) => (
          <FaqCategory
            key={c.id}
            cat={c}
            index={ci}
            items={grouped[c.id] || []}
            startN={items.findIndex(it => it.cat === c.id)}
            lang={lang}
            accent={accent}
          />
        ))}
      </main>

      <FaqCta lang={lang} accent={accent} />
      <MfFooter lang={lang} accent={accent} drop={drop} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// HERO
// ─────────────────────────────────────────────────────────────────
function FaqHero({ lang, accent, items }) {
  return (
    <section id="top" style={{
      padding: "24px 4vw 64px",
      borderBottom: "1px solid rgba(236,229,216,0.08)",
    }}>
      <div style={{ maxWidth: 1400, display: "flex", flexDirection: "column", gap: 48 }}>
        <div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.34em",
            color: "rgba(236,229,216,0.55)", textTransform: "uppercase", marginBottom: 24,
          }}>
            {lang === "no" ? "Ofte stilte spørsmål" : "Frequently asked questions"} · BGO · {items.length.toString().padStart(2, "0")} {lang === "no" ? "innlegg" : "entries"}
          </div>

          <h1 style={{
            margin: 0,
            fontFamily: "var(--mf-serif)", fontWeight: "var(--mf-display-weight, 700)",
            fontSize: "clamp(40px, 7vw, 120px)", lineHeight: 0.96, letterSpacing: "-0.03em",
            color: "#ece5d8",
          }}>
            <div>{lang === "no" ? "Spørsmål," : "Questions,"}</div>
            <div style={{ fontStyle: "italic" }}>
              {lang === "no" ? "stort sett besvart." : "mostly answered."}
            </div>
          </h1>
        </div>

        <p style={{
          margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic",
          fontWeight: "var(--mf-body-weight, 500)",
          fontSize: 22, lineHeight: 1.5,
          color: "rgba(236,229,216,0.85)",
          maxWidth: 760,
        }}>
          {lang === "no"
            ? "Det vi vet — og det vi fortsatt finner ut av. Hvis svaret ditt ikke står her, skriv til "
            : "What we know — and what we are still figuring out. If your answer is not here, write to "}
          <a href="mailto:info@awotowa.com" style={{ color: accent }}>info@awotowa.com</a>.
        </p>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// TOC — quick jump to a category
// ─────────────────────────────────────────────────────────────────
function FaqToc({ lang, accent, cats, grouped }) {
  return (
    <nav aria-label={lang === "no" ? "Kategorier" : "Categories"} style={{
      padding: "40px 4vw", maxWidth: 1400, margin: "0 auto",
    }}>
      <ul style={{
        listStyle: "none", margin: 0, padding: 0,
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        gap: 1,
        background: "rgba(236,229,216,0.12)",
        border: "1px solid rgba(236,229,216,0.12)",
      }}>
        {cats.map((c, i) => (
          <li key={c.id} style={{ background: "#222" }}>
            <a href={`#${c.id}`} data-interactive="true" style={{
              display: "flex", justifyContent: "space-between", alignItems: "baseline",
              padding: "20px 22px",
              color: "rgba(236,229,216,0.9)", textDecoration: "none",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em",
              textTransform: "uppercase",
              transition: "all 180ms ease",
              borderLeft: `2px solid transparent`,
            }} onMouseEnter={(e) => {
              e.currentTarget.style.background = "rgba(236,229,216,0.04)";
              e.currentTarget.style.borderLeftColor = accent;
              e.currentTarget.style.color = "#ece5d8";
            }} onMouseLeave={(e) => {
              e.currentTarget.style.background = "transparent";
              e.currentTarget.style.borderLeftColor = "transparent";
              e.currentTarget.style.color = "rgba(236,229,216,0.9)";
            }}>
              <span>
                <span style={{ color: accent, marginRight: 12 }}>0{i + 1}</span>
                {c[lang]}
              </span>
              <span style={{ color: "rgba(236,229,216,0.4)" }}>
                {(grouped[c.id] || []).length.toString().padStart(2, "0")}
              </span>
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────────
// CATEGORY block
// ─────────────────────────────────────────────────────────────────
function FaqCategory({ cat, index, items, startN, lang, accent }) {
  if (!items.length) return null;
  return (
    <section id={cat.id} style={{ padding: "100px 4vw 0", maxWidth: 1400, margin: "0 auto" }}>
      <header style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        paddingBottom: 22, borderBottom: "1px solid rgba(236,229,216,0.18)",
        marginBottom: 56, gap: 32, flexWrap: "wrap",
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.32em",
          color: accent, textTransform: "uppercase",
        }}>0{index + 1} · {(items.length).toString().padStart(2, "0")} {lang === "no" ? "spørsmål" : "questions"}</div>
        <h2 style={{
          margin: 0, fontFamily: "var(--mf-serif)", fontStyle: "italic",
          fontWeight: "var(--mf-display-weight, 700)",
          fontSize: "clamp(36px, 5.4vw, 78px)", lineHeight: 0.98, letterSpacing: "-0.02em",
          color: "#ece5d8",
          textAlign: "right",
          flex: 1,
        }}>{cat[lang]}</h2>
      </header>

      <div style={{ maxWidth: 1100 }}>
        {items.map((it, i) => (
          <FaqItem key={i} it={it} n={i + 1} lang={lang} accent={accent} />
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// FAQ item — uses <article> for semantic grouping; visible always.
// ─────────────────────────────────────────────────────────────────
function FaqItem({ it, n, lang, accent }) {
  return (
    <article itemScope itemProp="mainEntity" itemType="https://schema.org/Question"
      style={{
        display: "grid",
        gridTemplateColumns: "60px 1fr",
        gap: 24,
        padding: "44px 0",
        borderBottom: "1px solid rgba(236,229,216,0.1)",
      }} className="faq-item">

      <div aria-hidden="true" style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em",
        color: "rgba(236,229,216,0.4)",
        paddingTop: 10,
      }}>Q.{n.toString().padStart(2, "0")}</div>

      <div>
        <h3 itemProp="name" style={{
          margin: 0,
          fontFamily: "var(--mf-serif)", fontStyle: "italic",
          fontWeight: "var(--mf-display-weight, 700)",
          fontSize: "clamp(26px, 2.6vw, 38px)", lineHeight: 1.15, letterSpacing: "-0.01em",
          color: "#ece5d8",
        }}>{it.q[lang]}</h3>

        <div itemScope itemProp="acceptedAnswer" itemType="https://schema.org/Answer">
          {/* Direct one-sentence answer — what AI Overviews / LLMs extract */}
          <p itemProp="text" style={{
            margin: "22px 0 0",
            fontFamily: "var(--mf-serif)",
            fontWeight: "var(--mf-body-weight, 500)",
            fontSize: 20, lineHeight: 1.55,
            color: "rgba(236,229,216,0.95)",
            borderLeft: `2px solid ${accent}`,
            paddingLeft: 18,
          }}>
            <span style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.26em",
              color: accent, textTransform: "uppercase", display: "block", marginBottom: 8,
            }}>{lang === "no" ? "Kort svar" : "TL;DR"}</span>
            {it.answer[lang]}
          </p>

          {/* Longer detail — context for LLMs */}
          <p style={{
            margin: "22px 0 0",
            fontFamily: "var(--mf-serif)",
            fontWeight: "var(--mf-body-weight, 500)",
            fontSize: 17, lineHeight: 1.6,
            color: "rgba(236,229,216,0.7)",
          }}>{it.detail[lang]}</p>
        </div>
      </div>

      <style>{`
        @media (max-width: 640px) {
          .faq-item { grid-template-columns: 1fr !important; gap: 16px !important; }
          .faq-item > div:first-child { padding-top: 0 !important; }
        }
      `}</style>
    </article>
  );
}

// ─────────────────────────────────────────────────────────────────
// CTA — still have a question?
// ─────────────────────────────────────────────────────────────────
function FaqCta({ lang, accent }) {
  return (
    <section style={{ padding: "140px 4vw 120px", maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.32em",
        color: "rgba(236,229,216,0.55)", textTransform: "uppercase",
        marginBottom: 18,
      }}>{lang === "no" ? "Fortsatt et spørsmål?" : "Still got a question?"}</div>
      <h2 style={{
        margin: "0 0 24px",
        fontFamily: "var(--mf-serif)", fontStyle: "italic",
        fontWeight: "var(--mf-display-weight, 700)",
        fontSize: "clamp(36px, 6vw, 84px)", lineHeight: 1, letterSpacing: "-0.02em",
        color: "#ece5d8",
      }}>
        {lang === "no" ? "Skriv til oss. Vi svarer." : "Write to us. We answer."}
      </h2>
      <a href="mailto:info@awotowa.com" data-interactive="true" style={{
        display: "inline-block",
        padding: "16px 26px",
        background: accent, color: "#fff",
        fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.28em",
        textTransform: "uppercase", textDecoration: "none",
        borderRadius: 8,
      }}>info@awotowa.com →</a>
    </section>
  );
}

Object.assign(window, { FaqDirection });
