// page-tour.jsx — Tour page

function PageTour() {
  const { data: fundraising } = useFundraising();
  const { data: tour }        = useTour();

  const amount     = fundraising ? fundraising.current    : 0;
  const goal       = fundraising ? fundraising.goal       : 300000;
  const milestones = fundraising ? fundraising.milestones : [];

  const hero     = tour ? tour.hero     : null;
  const pillars  = tour ? tour.pillars  : [];
  const bildning = tour ? tour.bildning : null;
  const fundSec  = tour ? tour.fund_section : null;
  const cta      = tour ? tour.cta      : null;

  return (
    <div className="tour-page">
      {/* HERO */}
      <section className="tour-hero section--navy">
        <div className="hero__bg" aria-hidden="true">
          <img src="/assets/tour-hero.png" alt="" />
          <div className="hero__overlay tour-hero__overlay" />
        </div>
        <div className="wrap tour-hero__content">
          <div>
            <p className="eyebrow eyebrow--paper">
              {hero ? hero.eyebrow : "WRÖK Tour 2029"}
            </p>
            <h1 className="display display-xl" style={{ color: "var(--cream)", marginTop: 14 }}>
              {hero ? hero.heading : "Söderut."}
            </h1>
            <p className="lede text-paper" style={{ marginTop: 22, maxWidth: 540 }}>
              {hero ? hero.tagline : ""}
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <Link to="/support/donate" className="btn btn--maroon">
                Stötta touren <Arrow />
              </Link>
              <Link to="/support/sponsor" className="btn btn--ghost-paper">
                Bli sponsor
              </Link>
            </div>
          </div>

          {hero && (
            <aside className="tour-hero__quote">
              <span className="tour-hero__quote-mark">"</span>
              <p className="display display-s" style={{ color: "var(--cream)" }}>
                {hero.quote}
              </p>
            </aside>
          )}
        </div>
      </section>

      {/* PILLARS */}
      <section className="section pillars">
        <div className="wrap">
          <div className="pillars__head">
            <p className="eyebrow eyebrow--maroon">Resan i tre delar</p>
            <h2 className="display display-l" style={{ marginTop: 12, maxWidth: 720 }}>
              Det är ingen vanlig rugbyresa.
            </h2>
          </div>

          <div className="pillars__grid">
            {pillars.map((p, i) => (
              <article key={i} className={"pillar " + (p.accent ? "pillar--accent" : "")}>
                <div
                  className="pillar__num display display-l"
                  style={p.accent ? { color: "var(--maroon)" } : undefined}
                >
                  {(i + 1).toString().padStart(2, "0")}
                </div>
                <div>
                  <p className="display display-s">{p.title}</p>
                  <p className="text-body" style={{ marginTop: 12 }}>{p.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* PROGRESS */}
      <section className="section section--ink">
        <div className="wrap">
          <div className="fund-head">
            <div>
              <p className="eyebrow eyebrow--paper">
                {fundSec ? fundSec.eyebrow : "Tourkassan"}
              </p>
              <h2 className="display display-l" style={{ marginTop: 12, color: "var(--cream)" }}>
                {fundSec ? fundSec.heading : "Så långt har vi kommit."}
              </h2>
              <p className="text-paper-muted" style={{ marginTop: 14, maxWidth: 480 }}>
                {fundSec ? fundSec.body : ""}
              </p>
            </div>
            <Link to="/support/donate" className="btn btn--maroon">
              Stötta nu <Arrow />
            </Link>
          </div>

          {fundraising && (
            <FundProgress amount={amount} goal={goal} milestones={milestones} animate />
          )}
        </div>
      </section>

      {/* BILDNINGSRESA */}
      {bildning && (
        <section className="section section--paper2 bildning">
          <div className="wrap wrap--narrow">
            <p className="eyebrow eyebrow--maroon">Bildningsresa</p>
            <h2 className="display display-l" style={{ marginTop: 14 }}>
              En resa med mening.
            </h2>
            <p className="lede" style={{ marginTop: 24 }}>{bildning.intro}</p>
            <p className="text-body" style={{ marginTop: 16 }}>{bildning.body}</p>

            <blockquote className="bildning__quote">
              <p className="display display-m">
                "{bildning.quote}"
              </p>
            </blockquote>
          </div>
        </section>
      )}

      {/* CTA */}
      <section className="section section--ink">
        <div className="wrap tour-cta">
          <div>
            <h2 className="display display-l" style={{ color: "var(--cream)", maxWidth: 700 }}>
              {cta ? cta.heading : "Hjälp WRÖK nå Europa."}
            </h2>
            <p className="text-paper-muted" style={{ maxWidth: 480, marginTop: 16 }}>
              {cta ? cta.body : ""}
            </p>
          </div>
          <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <Link to="/support/donate" className="btn btn--maroon">Donera</Link>
            <Link to="/support/sponsor" className="btn btn--ghost-paper">Bli sponsor</Link>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageTour });