// page-support.jsx — Support layout with sub-routes: donate, sponsor, sales, faq

function PageSupport({ sub }) {
  const subRoutes = [
    { slug: "donate",   label: "Donera" },
    { slug: "member",   label: "Bli medlem" },
    { slug: "sponsor",  label: "Bli sponsor" },
    { slug: "partners", label: "Partners" },
    { slug: "shop",     label: "Shop" },
    { slug: "sales",    label: "Försäljningar" },
    { slug: "faq",      label: "FAQ" },
  ];
  const currentSlug = sub || "donate";

  const scrollRef = React.useRef(null);
  const [canLeft,  setCanLeft]  = React.useState(false);
  const [canRight, setCanRight] = React.useState(false);

  const updateArrows = React.useCallback(() => {
    const el = scrollRef.current;
    if (!el) return;
    const overflow = el.scrollWidth > el.clientWidth + 2;
    setCanLeft(overflow  && el.scrollLeft > 4);
    setCanRight(overflow && el.scrollLeft < el.scrollWidth - el.clientWidth - 4);
  }, []);

  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    updateArrows();
    el.addEventListener("scroll", updateArrows, { passive: true });
    window.addEventListener("resize", updateArrows);
    return () => {
      el.removeEventListener("scroll", updateArrows);
      window.removeEventListener("resize", updateArrows);
    };
  }, []);

  React.useEffect(() => {
    const el = scrollRef.current;
    const active = el && el.querySelector(".is-active");
    if (active) active.scrollIntoView({ inline: "center", block: "nearest" });
    updateArrows();
  }, [currentSlug]);

  const scrollBy = (dir) => {
    const el = scrollRef.current;
    if (el) el.scrollBy({ left: dir * 150, behavior: "smooth" });
  };

  return (
    <div className="support-page">
      {/* HERO */}
      <section className="support-hero section--ink">
        <div className="wrap">
          <p className="eyebrow eyebrow--paper">Stötta WRÖK</p>
          <h1 className="display display-xl" style={{ color: "var(--paper)", marginTop: 12 }}>
            Hjälp oss<br />
            <span style={{ color: "var(--rust)" }}>söderut.</span>
          </h1>
          <p className="lede text-paper" style={{ marginTop: 24, maxWidth: 620 }}>
            Det finns flera sätt att hjälpa laget. Välj det som passar dig
            bäst — varje krona går direkt in i verksamheten.
          </p>
        </div>

        {/* Sub-nav */}
        <div className="about-subnav">
          <div className="wrap about-subnav__wrap">
            <div className="about-subnav__inner" ref={scrollRef}>
              {subRoutes.map((r) => (
                <Link
                  key={r.slug}
                  to={"/support/" + r.slug}
                  className={"about-subnav__link " + (currentSlug === r.slug ? "is-active" : "")}
                >
                  {r.label}
                </Link>
              ))}
            </div>
            {canLeft  && <button className="subnav-arr subnav-arr--l" onClick={() => scrollBy(-1)} aria-hidden="true" tabIndex={-1}>‹</button>}
            {canRight && <button className="subnav-arr subnav-arr--r" onClick={() => scrollBy(1)}  aria-hidden="true" tabIndex={-1}>›</button>}
          </div>
        </div>
      </section>

      {currentSlug === "donate"   && <SupportDonate />}
      {currentSlug === "member"   && <SupportMember />}
      {currentSlug === "sponsor"  && <SupportSponsor />}
      {currentSlug === "partners" && <SupportPartners />}
      {currentSlug === "shop"     && <SupportShop />}
      {currentSlug === "sales"    && <SupportSales />}
      {currentSlug === "faq"      && <SupportFaq />}
    </div>
  );
}

/* =================================================
   DONATE
   ================================================= */
function SupportDonate() {
  return (
    <>
      <section className="section">
        <div className="wrap donate-layout">
          {/* Primary Swish — hero-feel card */}
          <div className="donate-swish">
            <div className="donate-swish__top">
              <p className="eyebrow eyebrow--paper">Enklast — Swish</p>
              <span className="chip chip--paper">
                <span className="dot" /> Aktivt
              </span>
            </div>
            <p className="donate-swish__number display">
              123 120 77 78
            </p>
            <p className="text-paper-muted" style={{ marginTop: 14, maxWidth: 480 }}>
              Swisha valfritt belopp direkt till WRÖK Rugby.
              Skriv "Donation" som meddelande om du vill.
            </p>

            <div className="donate-swish__qr">
              <div className="donate-swish__qr-img">
                <img src="/assets/swish-qr.png" alt="Swish QR-kod för WRÖK Rugby" />
              </div>
              <div>
                <p className="eyebrow eyebrow--paper">Skanna med kameran</p>
                <p className="text-paper-muted" style={{ marginTop: 8, fontSize: 13 }}>
                  Funkar med iOS Kamera och Swish-appen.
                </p>
                <a href="/assets/swish-qr.png" download="WROK-Rugby-Swish-QR.png"
                   className="btn btn--ghost-paper btn--sm" style={{ marginTop: 14 }}>
                  Ladda ner QR
                </a>
              </div>
            </div>
          </div>

          {/* Secondary methods */}
          <div className="donate-secondary">
            <div className="donate-method">
              <p className="eyebrow eyebrow--maroon">Bankgiro</p>
              <p className="display display-m" style={{ marginTop: 10, fontVariantNumeric: "tabular-nums" }}>
                5274-9553
              </p>
              <p className="text-muted" style={{ marginTop: 8, fontSize: 13 }}>
                Mottagare: WRÖK Rugby
              </p>
            </div>
            <div className="donate-method">
              <p className="eyebrow eyebrow--maroon">Något annat?</p>
              <p className="text-body" style={{ marginTop: 10 }}>
                Hör av dig — vi hittar något som funkar för dig.
              </p>
              <Link to="/about/contact" className="btn btn--ink btn--sm" style={{ marginTop: 16 }}>
                Kontakta oss <Arrow />
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Where the money goes */}
      <section className="section section--paper2">
        <div className="wrap">
          <div className="money-head">
            <p className="eyebrow eyebrow--maroon">Transparens</p>
            <h2 className="display display-l" style={{ marginTop: 12 }}>Vart går pengarna?</h2>
            <p className="text-body" style={{ marginTop: 14, maxWidth: 580 }}>
              Varje krona används direkt i verksamheten — inget försvinner
              i administration. Vi är en ideell förening.
            </p>
          </div>

          <div className="money-grid">
            <article className="money-card money-card--feature">
              <span className="eyebrow eyebrow--paper">Huvudmålet · ~70%</span>
              <p className="display display-l" style={{ color: "var(--paper)", marginTop: 14 }}>Touren</p>
              <p className="text-paper-muted" style={{ marginTop: 14, maxWidth: 400 }}>
                Det mesta sparas till en gemensam resa där vi spelar rugby
                utomlands. En tour är inte bara matcher — det är ett lagminne
                som håller i hela livet.
              </p>
            </article>
            <article className="money-card">
              <span className="eyebrow eyebrow--maroon">~20%</span>
              <p className="display display-m" style={{ marginTop: 12 }}>Träning &amp; aktiviteter</p>
              <p className="text-body" style={{ marginTop: 12 }}>
                Aktiviteter och träning som gör laget bättre — på och utanför planen.
              </p>
            </article>
            <article className="money-card">
              <span className="eyebrow eyebrow--maroon">~10%</span>
              <p className="display display-m" style={{ marginTop: 12 }}>Lagkänsla</p>
              <p className="text-body" style={{ marginTop: 12 }}>
                Det som bygger sammanhållning och gör gruppen starkare tillsammans.
              </p>
            </article>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap wrap--narrow" style={{ textAlign: "center" }}>
          <p className="eyebrow eyebrow--maroon">Tack</p>
          <h3 className="display display-l" style={{ marginTop: 14 }}>
            Du behöver inte ha spelat rugby<br />
            <span style={{ color: "var(--pine)" }}>en dag i ditt liv</span> för att vara med.
          </h3>
          <p className="text-body" style={{ marginTop: 20, maxWidth: 540, marginInline: "auto" }}>
            Oavsett belopp hjälper du oss framåt — och vi är tacksamma för varenda krona.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Link to="/support/sponsor" className="btn btn--ghost">Hellre företagssponsor?</Link>
            <Link to="/tour" className="btn btn--ink">Läs om touren <Arrow /></Link>
          </div>
        </div>
      </section>
    </>
  );
}

/* =================================================
   SPONSOR
   ================================================= */
function SupportSponsor() {
  const tiers = [
    {
      tag: "Nollkostnad",
      title: "Pantpartner",
      price: "0 kr",
      desc: "Ni bidrar utan att det kostar något. Vi ställer ut en insamlingstunna på er arbetsplats — eller kommer och hämtar pant direkt.",
      bullets: [
        "Tunna att ställa ut på kontoret",
        "Vi hämtar och sköter allt",
        "Hållbart och uppskattat lokalt engagemang",
      ],
    },
    {
      tag: "Från 5 000 kr",
      title: "Eventsponsor",
      price: "5 000+",
      desc: "Sponsrar ni laget med 5 000 kr ställer vi upp på ert nästa företagsevent. Vi grillar korv, servar och bidrar till god stämning.",
      bullets: [
        "Vi grillar och servar på ert event",
        "Passar AW, personaldag, kick-off",
        "Logotyp på hemsidan + omnämnande",
      ],
      featured: true,
    },
    {
      tag: "Valfritt belopp",
      title: "Logosponsor",
      price: "—",
      desc: "Stötta laget ekonomiskt och syns tillsammans med WRÖK. Er logotyp visas på hemsidan och ni omnämns som samarbetspartner.",
      bullets: [
        "Logotyp synlig på hemsidan",
        "Omnämnande som sponsor",
        "Långsiktigt samarbete på er nivå",
      ],
    },
  ];

  return (
    <>
      <section className="section">
        <div className="wrap">
          <div className="sponsor-intro">
            <div>
              <p className="eyebrow eyebrow--maroon">För företag</p>
              <h2 className="display display-l" style={{ marginTop: 14 }}>
                Synas med ett<br />engagerat lag.
              </h2>
            </div>
            <p className="text-body" style={{ maxWidth: 480 }}>
              Sponsring med oss är inte bara en logotyp på en hemsida.
              Vi hjälper till på plats, bidrar i er verksamhet och gör
              det till ett konkret samarbete.
            </p>
          </div>

          <div className="tier-grid">
            {tiers.map((t, i) => (
              <article key={i} className={"tier " + (t.featured ? "tier--featured" : "")}>
                <div className="tier__head">
                  <p className="eyebrow" style={{ color: t.featured ? "var(--rust)" : undefined }}>
                    {t.tag}
                  </p>
                  <p className="tier__price display display-l" style={{ color: t.featured ? "var(--rust)" : undefined }}>
                    {t.price}
                  </p>
                </div>
                <p className="display display-m" style={{ marginTop: 14 }}>{t.title}</p>
                <p className="text-body" style={{ marginTop: 14 }}>{t.desc}</p>
                <ul className="tier__bullets">
                  {t.bullets.map((b, j) => (
                    <li key={j}>
                      <span className="tier__bullet-marker">→</span>
                      {b}
                    </li>
                  ))}
                </ul>
                <a href="mailto:info@wrok.se" className={"btn " + (t.featured ? "btn--maroon" : "btn--ghost")} style={{ marginTop: "auto" }}>
                  Hör av er <Arrow />
                </a>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="wrap sponsor-why">
          <div>
            <p className="eyebrow eyebrow--maroon">Varför stötta lokal idrott?</p>
            <h3 className="display display-m" style={{ marginTop: 14 }}>
              Något konkret tillbaka.
            </h3>
            <p className="text-body" style={{ marginTop: 16 }}>
              Att sponsra WRÖK är ett konkret sätt att investera i det
              lokala samhället. Det stärker ert varumärke och visar att
              ni engagerar er i mer än affärer.
            </p>
            <ul className="sponsor-why__list">
              {[
                "Synlighet i ett lokalt sammanhang med engagerade människor",
                "CSR-värde — att stötta idrott är ett tydligt samhällsansvar",
                "Flexibelt upplägg — vi anpassar samarbetet efter er situation",
                "Ni stöttar ett lag som är med från start och växer långsiktigt",
              ].map((it, i) => (
                <li key={i}>
                  <span className="sponsor-why__bullet">{(i + 1).toString().padStart(2, "0")}</span>
                  {it}
                </li>
              ))}
            </ul>
          </div>

          <div className="sponsor-allocation card">
            <p className="eyebrow eyebrow--maroon">Vad sponsringen bidrar till</p>
            <h4 className="display display-m" style={{ marginTop: 14 }}>Fördelning</h4>
            <div className="alloc-grid" style={{ marginTop: 24 }}>
              {[
                { t: "Tour",       d: "Resa, boende, lagets utlandstur" },
                { t: "Utrustning", d: "Träningsmaterial och kringutrustning" },
                { t: "Gemenskap",  d: "Aktiviteter som stärker lagandan" },
                { t: "Utveckling", d: "Möjligheter att ta nästa steg" },
              ].map((a, i) => (
                <div key={i} className="alloc">
                  <p className="display display-s">{a.t}</p>
                  <p className="text-muted" style={{ fontSize: 13, marginTop: 6 }}>{a.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section section--ink">
        <div className="wrap" style={{ textAlign: "center" }}>
          <p className="eyebrow eyebrow--paper">Intresserad?</p>
          <h3 className="display display-l" style={{ color: "var(--paper)", marginTop: 14 }}>
            Hör av er — vi berättar mer.
          </h3>
          <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="mailto:info@wrok.se" className="btn btn--maroon">
              info@wrok.se <Arrow />
            </a>
            <Link to="/about/contact" className="btn btn--ghost-paper">
              Kontaktformulär
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}

/* =================================================
   SALES
   ================================================= */
const SALE_STATUS_LABEL = { active: "Aktiv", upcoming: "Kommer snart", ended: "Avslutad" };

function SupportSales() {
  const { data: sales } = useSales();
  const all      = sales || [];
  const active   = all.filter((s) => s.status === "active");
  const upcoming = all.filter((s) => s.status !== "active");

  return (
    <section className="section">
      <div className="wrap">
        <div className="sales-intro">
          <p className="eyebrow eyebrow--maroon">Försäljning</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Handla — stötta.
          </h2>
          <p className="text-body" style={{ marginTop: 16, maxWidth: 580 }}>
            När du handlar via någon av våra försäljningar bidrar du direkt
            till laget. Utbudet varierar över tid.
          </p>
        </div>

        {/* Active */}
        <div className="sales-section">
          <div className="sales-section__head">
            <span className="dot dot--active" />
            <p className="display display-s">Aktiva nu</p>
            <span className="eyebrow">
              {active.length.toString().padStart(2, "0")} st
            </span>
          </div>
          <div className="sales-grid">
            {active.map((s) => (
              <article key={s._id} className="sale-card">
                <div className="sale-card__top">
                  <p className="eyebrow eyebrow--maroon">{s.category}</p>
                  <span className="chip">
                    <span className="dot" />{SALE_STATUS_LABEL[s.status] || s.status}
                  </span>
                </div>
                <h3 className="display display-m" style={{ marginTop: 16 }}>{s.title}</h3>
                <p className="text-body" style={{ marginTop: 12, flex: 1 }}>{s.desc}</p>
                <a
                  href={s.url}
                  target={s.external ? "_blank" : null}
                  rel={s.external ? "noopener noreferrer" : null}
                  className="btn btn--ink"
                  style={{ marginTop: 20, alignSelf: "flex-start" }}
                >
                  {s.cta} {s.external && "↗"}
                </a>
              </article>
            ))}
          </div>
        </div>

        {/* Upcoming */}
        <div className="sales-section">
          <div className="sales-section__head">
            <p className="display display-s">Kommer snart</p>
            <span className="eyebrow">
              {upcoming.length.toString().padStart(2, "0")} st
            </span>
          </div>
          <div className="sales-grid">
            {upcoming.map((s) => (
              <article key={s._id} className="sale-card sale-card--upcoming">
                <div className="sale-card__top">
                  <p className="eyebrow">{s.category}</p>
                  <span className="chip">{SALE_STATUS_LABEL[s.status] || s.status}</span>
                </div>
                <h3 className="display display-m" style={{ marginTop: 16, color: "var(--stone)" }}>{s.title}</h3>
                <p className="text-muted" style={{ marginTop: 12, flex: 1 }}>{s.desc}</p>
              </article>
            ))}
          </div>
        </div>

        <div className="sales-footer card" style={{ marginTop: 64 }}>
          <div>
            <h3 className="display display-m">Tipsa om försäljning</h3>
            <p className="text-body" style={{ marginTop: 12, maxWidth: 540 }}>
              Vet du om någon kampanj eller webbshop som passar oss?
              Tipsa gärna — vi lägger upp nya möjligheter löpande här.
            </p>
          </div>
          <Link to="/about/contact" className="btn btn--ink">
            Tipsa oss <Arrow />
          </Link>
        </div>
      </div>
    </section>
  );
}

/* =================================================
   FAQ
   ================================================= */
function SupportFaq() {
  const { data: categories } = useFaq();
  const cats = categories || [];
  const [open, setOpen] = React.useState({ "0-0": true });

  return (
    <section className="section">
      <div className="wrap wrap--narrow">
        {cats.map((cat, ci) => (
          <div key={cat._id} className="faq-cat">
            <h3 className="faq-cat__title display display-m">
              <span className="faq-cat__num">{(ci + 1).toString().padStart(2, "0")}</span>
              {cat.title}
            </h3>
            <div className="faq-list">
              {cat.items.map((item, i) => {
                const k = `${ci}-${i}`;
                const isOpen = !!open[k];
                return (
                  <div key={k} className={"faq-item " + (isOpen ? "is-open" : "")}>
                    <button
                      className="faq-item__q"
                      onClick={() => setOpen((o) => ({ ...o, [k]: !o[k] }))}
                      aria-expanded={isOpen}
                    >
                      <span>{item.q}</span>
                      <span className="faq-item__icon">
                        {isOpen ? "−" : "+"}
                      </span>
                    </button>
                    {isOpen && <div className="faq-item__a"><p className="text-body">{item.a}</p></div>}
                  </div>
                );
              })}
            </div>
          </div>
        ))}

        <div className="faq-footer card card--ink">
          <p className="eyebrow eyebrow--maroon">Hittar du inte svaret?</p>
          <p className="display display-m" style={{ color: "var(--paper)", marginTop: 12 }}>
            Vi svarar gärna.
          </p>
          <Link to="/about/contact" className="btn btn--maroon" style={{ marginTop: 24, alignSelf: "flex-start" }}>
            Kontakta oss <Arrow />
          </Link>
        </div>
      </div>
    </section>
  );
}

/* =================================================
   PARTNERS — Sponsors showcase
   ================================================= */
function SupportPartners() {
  const { useState, useEffect } = React;
  const { data: sponsors } = useSponsors();
  const all = sponsors ? sponsors.filter((s) => s.active) : null;

  const tiers = [
    { key: "gold",   label: "Guld",   color: "var(--gold)" },
    { key: "silver", label: "Silver", color: "var(--stone)" },
    { key: "bronze", label: "Brons",  color: "var(--maroon)" },
  ];

  return (
    <>
      <section className="section">
        <div className="wrap">
          <div className="partners-intro">
            <p className="eyebrow eyebrow--maroon">Våra samarbetspartners</p>
            <h2 className="display display-l" style={{ marginTop: 12 }}>
              Företagen bakom laget.
            </h2>
            <p className="text-body" style={{ marginTop: 16, maxWidth: 600 }}>
              Utan dem vore resan omöjlig. Dessa företag och organisationer har valt att stötta
              WRÖK — och vi är djupt tacksamma för varje samarbete.
            </p>
          </div>

          {all && tiers.map((tier) => {
            const group = all.filter((s) => s.tier === tier.key);
            if (!group.length) return null;
            return (
              <div key={tier.key} className="partners-tier">
                <div className="partners-tier-head">
                  <span className="eyebrow" style={{ color: tier.color }}>
                    {tier.label}sponsorer
                  </span>
                  <span className="eyebrow" style={{ color: "var(--stone)", marginLeft: 12 }}>
                    {group.length.toString().padStart(2, "0")} st
                  </span>
                </div>
                <div className="partners-grid">
                  {group.map((s) => (
                    <article
                      key={s._id}
                      className={"partner-card partner-card--" + (s.tier || "bronze")}
                    >
                      <div className="partner-card__logo">
                        {s.logo ? (
                          <img src={s.logo} alt={s.name + " logotyp"} />
                        ) : (
                          <span className="partner-card__logo-placeholder">
                            {s.name.charAt(0)}
                          </span>
                        )}
                      </div>
                      <p className="display display-s" style={{ marginTop: 8 }}>{s.name}</p>
                      {s.tagline && (
                        <p className="eyebrow eyebrow--maroon" style={{ marginTop: 8 }}>
                          {s.tagline}
                        </p>
                      )}
                      {s.description && (
                        <p className="text-body" style={{ marginTop: 10, fontSize: 14, flex: 1 }}>
                          {s.description}
                        </p>
                      )}
                      {s.url && (
                        <a
                          href={s.url}
                          className="btn btn--ghost btn--sm"
                          target="_blank"
                          rel="noopener noreferrer"
                          style={{ marginTop: 16, alignSelf: "flex-start" }}
                        >
                          Besök <Arrow />
                        </a>
                      )}
                    </article>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <section className="section section--ink">
        <div className="wrap" style={{ textAlign: "center" }}>
          <p className="eyebrow eyebrow--paper">Vill ni synas här?</p>
          <h3 className="display display-l" style={{ color: "var(--paper)", marginTop: 14 }}>
            Bli partner med WRÖK.
          </h3>
          <p className="text-paper-muted" style={{ marginTop: 16, maxWidth: 520, marginInline: "auto" }}>
            Vi söker fler samarbetspartners. Alla typer av stöd är välkomna — från logosponsor
            till eventsponsor.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Link to="/support/sponsor" className="btn btn--maroon">
              Läs mer om sponsring <Arrow />
            </Link>
            <a href="mailto:info@wrok.se" className="btn btn--ghost-paper">
              info@wrok.se
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

/* =================================================
   SHOP — Amazon Creator Store / affiliate
   ================================================= */
function SupportShop() {
  const { data: shop } = useShop();
  const products = shop ? (shop.products || []).filter((p) => p.url) : [];
  const isLive   = shop ? !!shop.store_live : false;
  const storeUrl = shop ? shop.store_url : null;

  return (
    <section className="section">
      <div className="wrap">
        <div className="shop-intro">
          <p className="eyebrow eyebrow--maroon">Amazon-butik</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Handla — stötta WRÖK.
          </h2>
          <p className="text-body" style={{ marginTop: 16, maxWidth: 600 }}>
            Via vår Amazon Creator Store kan du handla produkter vi rekommenderar — rugbyutrustning,
            träningsprylar och mer. Vi tjänar en liten provision på varje köp. Det kostar inget
            extra för dig, och hela provisionen går direkt till laget.
          </p>
        </div>

        {isLive && storeUrl && (
          <div className="shop-store-cta">
            <div>
              <p className="eyebrow eyebrow--paper">Butiken är live</p>
              <h3 className="display display-m" style={{ color: "var(--paper)", marginTop: 10 }}>
                WRÖK Creator Store
              </h3>
              <p className="text-paper-muted" style={{ marginTop: 10, maxWidth: 460 }}>
                Bläddra bland alla produkter vi rekommenderar. Allt vi listar har vi testat
                och använder själva.
              </p>
            </div>
            <a
              href={storeUrl}
              className="btn btn--gold"
              target="_blank"
              rel="noopener noreferrer"
            >
              Öppna butiken ↗
            </a>
          </div>
        )}

        {!isLive && (
          <div className="shop-coming-soon">
            <p className="eyebrow eyebrow--maroon">Kommer snart</p>
            <h3 className="display display-m" style={{ marginTop: 14 }}>
              Butiken är under uppbyggnad.
            </h3>
            <p className="text-body" style={{ marginTop: 16 }}>
              Vi håller på att sätta upp vår Amazon Creator Store med rekommenderade
              produkter — rugbyutrustning, träningsprylar och mer. Kom tillbaka snart!
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <a href="mailto:info@wrok.se" className="btn btn--ink btn--sm">
                Tipsa om produkt
              </a>
              <Link to="/support/sales" className="btn btn--ghost btn--sm">
                Se övriga försäljningar
              </Link>
            </div>
          </div>
        )}

        {products.length > 0 && (
          <div style={{ marginTop: 64 }}>
            <div className="shop-products-head">
              <p className="eyebrow eyebrow--maroon">Rekommenderat</p>
              <span className="eyebrow" style={{ color: "var(--stone)" }}>
                {products.length.toString().padStart(2, "0")} produkter
              </span>
            </div>
            <div className="shop-grid">
              {products.map((p) => (
                <article key={p._id} className="shop-card">
                  <div className="shop-card__image">
                    {p.image ? (
                      <img src={p.image} alt={p.name} />
                    ) : (
                      <span className="shop-card__image-placeholder">{p.category}</span>
                    )}
                  </div>
                  <p className="eyebrow eyebrow--maroon" style={{ marginTop: 4 }}>{p.category}</p>
                  <h3 className="display display-s" style={{ marginTop: 8 }}>{p.name}</h3>
                  <p className="text-body" style={{ marginTop: 8, fontSize: 14, flex: 1 }}>{p.description}</p>
                  {p.price_range && (
                    <p className="eyebrow" style={{ marginTop: 10 }}>{p.price_range}</p>
                  )}
                  <a
                    href={p.url}
                    className="btn btn--ink btn--sm"
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ marginTop: 16, alignSelf: "flex-start" }}
                  >
                    Handla på Amazon ↗
                  </a>
                </article>
              ))}
            </div>
          </div>
        )}

        <div className="shop-affiliate-note">
          <p className="eyebrow eyebrow--maroon" style={{ marginBottom: 8 }}>
            Hur affiliate fungerar
          </p>
          <p className="text-body" style={{ fontSize: 14 }}>
            När du klickar på en länk och handlar på Amazon via vår butik, tjänar WRÖK en liten
            provision (ca 1–10% beroende på kategori). Det tillkommer inga extra kostnader för
            dig — priset är exakt detsamma som om du sökt produkten direkt.
          </p>
        </div>
      </div>
    </section>
  );
}

/* =================================================
   MEMBER
   ================================================= */
function SupportMember() {
  const perks = [
    {
      num: "01",
      title: "Ditt eget medlemskort",
      desc: "Kanonfint. Bär det med stolthet — du är officiellt med i WRÖK.",
    },
    {
      num: "02",
      title: "1 timme gratis arbete",
      desc: "Gäller vid bokning av Snickerifirma D. Johansson på arbeten 8 timmar eller mer.",
    },
    {
      num: "03",
      title: "Exklusiva erbjudanden",
      desc: "Tillgång till särskilda medlemserbjudanden och kampanjer löpande under året.",
    },
    {
      num: "04",
      title: "Lott till årets lotteri",
      desc: "En lott till WRÖK:s årliga lotteri — med chansen att vinna fina priser.",
    },
  ];

  return (
    <>
      <section className="section">
        <div className="wrap">
          <div className="member-intro">
            <div className="member-intro__text">
              <p className="eyebrow eyebrow--maroon">Bli medlem i WRÖK</p>
              <h2 className="display display-xl" style={{ marginTop: 14 }}>
                1 krona<br />om dagen.
              </h2>
              <p className="lede" style={{ marginTop: 20, maxWidth: 480 }}>
                365 kr om året. Inget mer. Och du är en del av WRÖK —
                med förmåner som faktiskt är värda något.
              </p>
              <p className="text-body" style={{ marginTop: 20, maxWidth: 480 }}>
                Pengarna går direkt till verksamheten och hjälper oss
                ta laget ett steg närmre touren 2029.
              </p>
            </div>

            <div className="member-price-card">
              <p className="eyebrow eyebrow--paper">Årsmedlemskap</p>
              <div className="member-price-card__price">
                <span className="display display-xl" style={{ color: "var(--gold)" }}>365 kr</span>
                <span className="member-price-card__day">= 1 kr / dag</span>
              </div>

              <ul className="member-perks">
                {perks.map((p) => (
                  <li key={p.num} className="member-perk">
                    <span className="member-perk__num">{p.num}</span>
                    <span>{p.title}</span>
                  </li>
                ))}
              </ul>

              <div className="member-how">
                <p className="eyebrow eyebrow--paper" style={{ marginBottom: 10 }}>Så här blir du medlem</p>
                <p style={{ fontSize: 14, opacity: 0.7, lineHeight: 1.6 }}>
                  Swisha <strong style={{ opacity: 1 }}>365 kr</strong> till{" "}
                  <strong style={{ opacity: 1 }}>123 120 77 78</strong> med
                  meddelandet <em>"Medlemskap"</em>.
                </p>
                <p style={{ fontSize: 14, opacity: 0.7, lineHeight: 1.6, marginTop: 10 }}>
                  Vill du ha kortet hemskickat? Lägg till din adress i
                  meddelandet — porto tillkommer med <strong style={{ opacity: 1 }}>+22 kr</strong>{" "}
                  (swisha alltså 387 kr). Annars ordnar vi överlämning.
                </p>
              </div>

              <Link
                to="/support/donate"
                className="btn btn--maroon"
                style={{ marginTop: 28, alignSelf: "flex-start" }}
              >
                Swisha direkt <Arrow />
              </Link>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="wrap">
          <p className="eyebrow eyebrow--maroon">Vad du får</p>
          <div className="member-perk-grid">
            {perks.map((p) => (
              <article key={p.num} className="member-perk-card">
                <span className="member-perk-card__num display display-l">{p.num}</span>
                <p className="display display-s" style={{ marginTop: 16 }}>{p.title}</p>
                <p className="text-body" style={{ marginTop: 10, flex: 1 }}>{p.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--ink">
        <div className="wrap" style={{ textAlign: "center" }}>
          <p className="eyebrow eyebrow--paper">Redo?</p>
          <h3 className="display display-l" style={{ color: "var(--paper)", marginTop: 14 }}>
            Gå med i WRÖK.
          </h3>
          <p className="text-paper-muted" style={{ marginTop: 16, maxWidth: 520, marginInline: "auto" }}>
            Swisha 365 kr med meddelandet "Medlemskap" och du är med.
            Vill du ha kortet hemskickat — lägg till din adress i meddelandet och swisha 387 kr (porto +22 kr).
          </p>
          <p className="display display-xl" style={{ color: "var(--gold)", marginTop: 20, letterSpacing: "0.04em" }}>
            123 120 77 78
          </p>
          <div style={{ marginTop: 28, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Link to="/about/contact" className="btn btn--maroon">
              Frågor? Hör av dig <Arrow />
            </Link>
            <Link to="/support/donate" className="btn btn--ghost-paper">
              Andra sätt att stötta
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageSupport });