// page-about.jsx — About page (v2)

function PageAbout({ sub }) {
  const subRoutes = [
    { slug: "",           label: "Historia" },
    { slug: "purpose",    label: "Syfte & mål" },
    { slug: "connection", label: "VRK-kopplingen" },
    { slug: "contact",    label: "Kontakt" },
  ];
  const currentSlug = sub || "";

  return (
    <div className="about-page">
      <section className="about-hero section--ink">
        <div className="wrap">
          <p className="eyebrow eyebrow--paper">Om föreningen</p>
          <h1 className="display display-xl" style={{ color: "var(--cream)", marginTop: 12 }}>
            Det här är WRÖK.
          </h1>
          <p className="lede text-paper" style={{ marginTop: 22, maxWidth: 620 }}>
            En ideell förening som finns för att stötta laget runt Vänersborgs
            Rugbyklubb och skapa något mer än träning och matcher.
          </p>
        </div>

        <div className="about-subnav">
          <div className="wrap about-subnav__inner">
            {subRoutes.map((r) => (
              <Link
                key={r.slug}
                to={"/about" + (r.slug ? "/" + r.slug : "")}
                className={"about-subnav__link " + (currentSlug === r.slug ? "is-active" : "")}
              >
                {r.label}
              </Link>
            ))}
          </div>
        </div>
      </section>

      {currentSlug === ""           && <AboutHistory />}
      {currentSlug === "purpose"    && <AboutPurpose />}
      {currentSlug === "connection" && <AboutConnection />}
      {currentSlug === "contact"    && <AboutContact />}
    </div>
  );
}

/* ---------- HISTORY ---------- */
function AboutHistory() {
  return (
    <>
      <section className="section">
        <div className="wrap wrap--narrow">
          <p className="eyebrow eyebrow--maroon">Kapitel 01 · Hur det började</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Det började<br />med en idé.
          </h2>

          <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 18 }}>
            <p className="lede">
              WRÖK startades av tränare, spelare och föräldrar runt laget
              med en enkel tanke — att skapa så bra förutsättningar som
              möjligt för rugbyn och människorna runt den.
            </p>
            <p className="text-body">
              Genom en egen ideell förening kan vi tillsammans organisera
              aktiviteter, engagemang och initiativ som hjälper laget framåt.
              Det handlar både om att skapa upplevelser tillsammans och
              att bygga en stark lagkänsla runt sporten.
            </p>
          </div>
        </div>
      </section>

      {/* Logo + motto card */}
      <section className="section section--paper2">
        <div className="wrap">
          <div className="crest-card">
            <div className="crest-card__crest">
              <img src="/assets/wrok-logo.png" alt="WRÖK crest" />
            </div>
            <div className="crest-card__copy">
              <p className="eyebrow eyebrow--maroon">Vapnet</p>
              <h3 className="display display-l" style={{ marginTop: 12 }}>
                En resa,<br />flera mål.
              </h3>
              <p className="text-body" style={{ marginTop: 18, maxWidth: 480 }}>
                Sporten bygger laget. WRÖK bygger resten.
              </p>
              <p className="text-body" style={{ marginTop: 14, maxWidth: 480 }}>
                Det som händer vid sidan av planen — resorna, gemenskapen,
                insatserna — det är vad föreningen finns för.
              </p>
            </div>
          </div>
        </div>
      </section>

      <NextChapterCTA next="purpose" />
    </>
  );
}

/* ---------- PURPOSE ---------- */
function AboutPurpose() {
  return (
    <>
      <section className="section">
        <div className="wrap wrap--narrow">
          <p className="eyebrow eyebrow--maroon">Kapitel 02 · Varför vi finns</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Syfte<br />&amp; mål.
          </h2>
          <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 18 }}>
            <p className="lede">
              WRÖK finns för att stötta laget och skapa så bra förutsättningar
              som möjligt för spelarna runt rugbyverksamheten.
            </p>
            <p className="text-body">
              Föreningen drivs av människor runt laget som vill bidra med
              engagemang, idéer och initiativ som stärker både laget och
              upplevelsen runt sporten.
            </p>
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="wrap">
          <div className="purpose-grid">
            {[
              { num: "01", t: "Stärka laget", b: "Genom aktiviteter och initiativ runt laget bidrar vi till sammanhållning, engagemang och en stark lagkänsla." },
              { num: "02", t: "Skapa möjligheter", b: "Gemensamma insatser ger laget chansen att göra saker tillsammans som stärker både utveckling och gemenskap." },
              { num: "03", t: "Engagemang", b: "WRÖK bygger på att människor runt laget engagerar sig och bidrar på olika sätt för att stötta verksamheten." },
            ].map((it) => (
              <article className="purpose-card" key={it.num}>
                <span className="purpose-card__num display display-l">{it.num}</span>
                <p className="display display-s">{it.t}</p>
                <p className="text-body" style={{ marginTop: 10 }}>{it.b}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap wrap--narrow">
          <h3 className="display display-m">Ett gemensamt mål.</h3>
          <p className="text-body" style={{ marginTop: 16 }}>
            Ett tydligt mål för föreningen är att laget i framtiden ska kunna
            åka på en tour tillsammans. Resan i sig är en viktig del, men
            minst lika viktigt är vägen dit.
          </p>
          <p className="text-body" style={{ marginTop: 12 }}>
            Genom att arbeta tillsammans mot ett gemensamt mål skapas
            engagemang, ansvar och laganda — värden som också speglar
            rugbyns grundidé.
          </p>
        </div>
      </section>

      <NextChapterCTA next="connection" />
    </>
  );
}

/* ---------- CONNECTION ---------- */
function AboutConnection() {
  return (
    <>
      <section className="section">
        <div className="wrap wrap--narrow">
          <p className="eyebrow eyebrow--maroon">Kapitel 03 · Strukturen</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            WRÖK &amp;<br />VRK.
          </h2>
          <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 18 }}>
            <p className="lede">
              Rugbyverksamheten bedrivs av <strong>Vänersborgs Rugbyklubb</strong>.
              Det är där laget tränar, spelar matcher och är registrerat
              inom rugbyförbundet.
            </p>
            <p className="text-body">
              WRÖK är en fristående ideell förening runt laget. Föreningen
              finns för att samla engagemang och skapa möjligheter runt
              laget genom initiativ, aktiviteter och gemensamma insatser.
            </p>
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="wrap">
          <div className="connection-grid">
            <article className="connection-card">
              <div className="connection-card__head">
                <span className="eyebrow eyebrow--maroon">Rugbyklubb</span>
                <span className="connection-card__num display display-m">VRK</span>
              </div>
              <h3 className="display display-m" style={{ marginTop: 14 }}>
                Vänersborgs Rugbyklubb
              </h3>
              <p className="text-body" style={{ marginTop: 12 }}>
                VRK är där rugbyverksamheten bedrivs. Här sker träningar,
                matcher och den ordinarie idrottsverksamheten inom sporten.
              </p>
              <a
                href="https://www.svenskalag.se/vrk"
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn--ghost"
                style={{ marginTop: 24, alignSelf: "flex-start" }}
              >
                Besök VRK ↗
              </a>
            </article>

            <article className="connection-card connection-card--accent">
              <div className="connection-card__head">
                <span className="eyebrow eyebrow--paper">Stödförening</span>
                <span className="connection-card__num display display-m" style={{ color: "var(--cream)" }}>WRÖK</span>
              </div>
              <h3 className="display display-m" style={{ marginTop: 14, color: "var(--cream)" }}>
                Föreningen runt laget
              </h3>
              <p className="text-paper-muted" style={{ marginTop: 12 }}>
                WRÖK fungerar som en stödförening runt laget och samlar
                människor som vill bidra till aktiviteter, initiativ och
                gemensamma mål.
              </p>
              <Link to="/support" className="btn btn--maroon" style={{ marginTop: 24, alignSelf: "flex-start" }}>
                Stötta WRÖK <Arrow />
              </Link>
            </article>
          </div>

          <div className="connection-footer">
            <p className="display display-s" style={{ maxWidth: 720, marginInline: "auto", textAlign: "center" }}>
              Tillsammans skapar VRK och WRÖK förutsättningar för både
              <span style={{ color: "var(--maroon)" }}> rugbyverksamheten</span> och
              <span style={{ color: "var(--gold)" }}> gemenskapen runt laget.</span>
            </p>
          </div>
        </div>
      </section>

      <NextChapterCTA next="contact" />
    </>
  );
}

/* ---------- CONTACT ---------- */
function AboutContact() {
  const [form, setForm] = React.useState({ name: "", email: "", subject: "", message: "" });
  const [submitted, setSubmitted] = React.useState(false);

  const handle = (e) => setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  return (
    <section className="section">
      <div className="wrap contact-grid">
        <div className="contact-grid__copy">
          <p className="eyebrow eyebrow--maroon">Kapitel 04 · Kontakt</p>
          <h2 className="display display-l" style={{ marginTop: 12 }}>
            Hör av dig.
          </h2>
          <p className="lede" style={{ marginTop: 22 }}>
            Frågor om sponsring, donation, lagets verksamhet eller bara
            nyfiken? Skicka ett meddelande så återkommer vi.
          </p>

          <div className="contact-direct">
            <div>
              <p className="eyebrow">E-post</p>
              <a href="mailto:info@wrok.se" className="display display-s" style={{ marginTop: 6, display: "block" }}>
                info@wrok.se
              </a>
            </div>
            <div>
              <p className="eyebrow">Plats</p>
              <p className="display display-s" style={{ marginTop: 6 }}>Wargön, Sverige</p>
            </div>
            <div>
              <p className="eyebrow">Org.nr</p>
              <p className="text-body" style={{ marginTop: 6, fontVariantNumeric: "tabular-nums" }}>802555-7581</p>
            </div>
            <div>
              <p className="eyebrow">Instagram</p>
              <a href="https://www.instagram.com/wrokrugby/" target="_blank" rel="noopener noreferrer" className="text-body" style={{ marginTop: 6, display: "block" }}>
                @wrokrugby ↗
              </a>
            </div>
            <div>
              <p className="eyebrow">Facebook</p>
              <a href="https://www.facebook.com/profile.php?id=61578471341956" target="_blank" rel="noopener noreferrer" className="text-body" style={{ marginTop: 6, display: "block" }}>
                WRÖK Rugby ↗
              </a>
            </div>
          </div>
        </div>

        <form className="contact-form card" onSubmit={submit}>
          {submitted ? (
            <div className="contact-form__success">
              <p className="eyebrow eyebrow--maroon">Skickat</p>
              <h3 className="display display-m" style={{ marginTop: 10 }}>Tack — vi hörs!</h3>
              <p className="text-body" style={{ marginTop: 12 }}>
                Vi återkommer så fort vi kan, normalt inom någon dag.
              </p>
              <button type="button" className="btn btn--ghost" style={{ marginTop: 20 }}
                      onClick={() => { setSubmitted(false); setForm({ name: "", email: "", subject: "", message: "" }); }}>
                Skicka ett till
              </button>
            </div>
          ) : (
            <>
              <div className="form-row">
                <div>
                  <label className="label" htmlFor="name">Namn *</label>
                  <input className="input" id="name" name="name" required value={form.name} onChange={handle} />
                </div>
                <div>
                  <label className="label" htmlFor="email">E-post *</label>
                  <input className="input" id="email" name="email" type="email" required value={form.email} onChange={handle} />
                </div>
              </div>
              <div>
                <label className="label" htmlFor="subject">Ärendet gäller *</label>
                <select className="select" id="subject" name="subject" required value={form.subject} onChange={handle}>
                  <option value="">Välj ärende</option>
                  <option>Allmän fråga</option>
                  <option>Sponsring</option>
                  <option>Donation</option>
                  <option>Försäljning</option>
                  <option>Spela rugby</option>
                  <option>Övrigt</option>
                </select>
              </div>
              <div>
                <label className="label" htmlFor="message">Meddelande *</label>
                <textarea className="textarea" id="message" name="message" rows="6" required value={form.message} onChange={handle} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
                <p className="text-muted" style={{ fontSize: 12 }}>
                  Vi använder uppgifterna enbart för att svara dig.
                </p>
                <button type="submit" className="btn btn--ink">
                  Skicka <Arrow />
                </button>
              </div>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

/* ---------- Next chapter pagination ---------- */
function NextChapterCTA({ next }) {
  const map = {
    purpose:    { slug: "/about/purpose",    label: "Syfte & mål",     kapitel: "Kapitel 02" },
    connection: { slug: "/about/connection", label: "VRK-kopplingen",  kapitel: "Kapitel 03" },
    contact:    { slug: "/about/contact",    label: "Kontakt",         kapitel: "Kapitel 04" },
  };
  const nx = map[next];
  if (!nx) return null;
  return (
    <Link to={nx.slug} className="next-chapter">
      <div className="wrap next-chapter__inner">
        <div>
          <p className="eyebrow eyebrow--maroon">Nästa · {nx.kapitel}</p>
          <p className="display display-l" style={{ marginTop: 10 }}>{nx.label}</p>
        </div>
        <Arrow size={26} />
      </div>
    </Link>
  );
}

Object.assign(window, { PageAbout });