// page-home.jsx — Redesigned home (v2)

function shuffleArray(arr) {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

function PageHome() {
  const { data: fundraising } = useFundraising();
  const { data: players }     = usePlayers();

  const amount     = fundraising ? fundraising.current   : 0;
  const goal       = fundraising ? fundraising.goal      : 300000;
  const milestones = fundraising ? fundraising.milestones : [];
  const roster     = players    ? players.filter((p) => p.active) : [];

  const [shuffled, setShuffled] = React.useState([]);
  React.useEffect(() => {
    if (roster.length > 0 && shuffled.length === 0) {
      setShuffled(shuffleArray(roster));
    }
  }, [roster.length]);

  const trackRef  = React.useRef(null);
  const pausedRef = React.useRef(false);
  const posRef    = React.useRef(0);
  const halfRef   = React.useRef(0);

  React.useEffect(() => {
    if (shuffled.length === 0) return;
    const track = trackRef.current;
    if (!track) return;

    posRef.current  = 0;
    halfRef.current = 0;
    let rafId, lastTs = null;

    const loop = (ts) => {
      // Measure half on first frame once cards are in DOM
      if (!halfRef.current && track.children[shuffled.length]) {
        halfRef.current = track.children[shuffled.length].offsetLeft;
      }
      if (halfRef.current && lastTs !== null && !pausedRef.current) {
        posRef.current += 40 * (ts - lastTs) / 1000;
        if (posRef.current >= halfRef.current) posRef.current -= halfRef.current;
        track.style.transform = `translateX(-${posRef.current}px)`;
      }
      lastTs = ts;
      rafId = requestAnimationFrame(loop);
    };

    let touchStartX = 0, touchStartY = 0, touchStartPos = 0, isHoriz = null;

    const onTouchStart = (e) => {
      pausedRef.current = true;
      touchStartX = e.touches[0].clientX;
      touchStartY = e.touches[0].clientY;
      touchStartPos = posRef.current;
      isHoriz = null;
    };
    const onTouchMove = (e) => {
      if (!halfRef.current) return;
      const dx = e.touches[0].clientX - touchStartX;
      const dy = e.touches[0].clientY - touchStartY;
      if (isHoriz === null) isHoriz = Math.abs(dx) > Math.abs(dy);
      if (!isHoriz) return;
      e.preventDefault();
      posRef.current = ((touchStartPos - dx) % halfRef.current + halfRef.current) % halfRef.current;
      track.style.transform = `translateX(-${posRef.current}px)`;
    };
    const onTouchEnd = () => { setTimeout(() => { pausedRef.current = false; }, 1500); };

    track.addEventListener("touchstart", onTouchStart, { passive: true });
    track.addEventListener("touchmove",  onTouchMove,  { passive: false });
    track.addEventListener("touchend",   onTouchEnd,   { passive: true });
    rafId = requestAnimationFrame(loop);

    return () => {
      cancelAnimationFrame(rafId);
      track.removeEventListener("touchstart", onTouchStart);
      track.removeEventListener("touchmove",  onTouchMove);
      track.removeEventListener("touchend",   onTouchEnd);
    };
  }, [shuffled.length]);

  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track || !halfRef.current) return;
    pausedRef.current = true;
    const step = (track.children[0]?.offsetWidth ?? 260) + 18;
    posRef.current = ((posRef.current + dir * step) % halfRef.current + halfRef.current) % halfRef.current;
    track.style.transform = `translateX(-${posRef.current}px)`;
    setTimeout(() => { pausedRef.current = false; }, 2000);
  };

  return (
    <div className="home">
      {/* ============== HERO ============== */}
      <section className="hero">
        <div className="hero__bg">
          <img src="/assets/hero.png" alt="" />
          <div className="hero__overlay" />
        </div>

        <div className="hero__content wrap wrap--wide">
          <div className="hero__top">
            <span className="chip chip--paper">
              <span className="dot" /> Est. 2026 · Wargön
            </span>
            <span className="eyebrow eyebrow--paper hero__meta">
              Säsong 2026 / 27
            </span>
          </div>

          <div className="hero__center">
            <h1 className="display display-xl hero__title">WRÖK</h1>
            <p className="hero__motto">
              En resa <span className="hero__motto-sep">·</span> Flera mål
            </p>
          </div>

          <div className="hero__bottom">
            <p className="hero__pitch text-paper">
              En ideell förening som samlar laget, engagemanget
              och drömmen om en gemensam tour söderut.
            </p>
            <div className="hero__actions">
              <Link to="/support/donate" className="btn btn--maroon">
                Stötta touren <Arrow />
              </Link>
              <Link to="/tour" className="btn btn--ghost-paper">
                Om touren
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* ============== STAT BAND ============== */}
      <section className="stat-band">
        <div className="wrap">
          <dl className="stat-band__row">
            <div className="stat-band__cell">
              <dt className="display display-m">2026</dt>
              <dd className="eyebrow">Grundat</dd>
            </div>
            <div className="stat-band__cell">
              <dt className="display display-m" style={{ color: "var(--maroon)" }}>2029</dt>
              <dd className="eyebrow">Tour-år</dd>
            </div>
            <div className="stat-band__cell">
              <dt className="display display-m">Wargön</dt>
              <dd className="eyebrow">Hemmastad</dd>
            </div>
            <div className="stat-band__cell">
              <dt className="display display-m" style={{ color: "var(--maroon)" }}>
                {fundraising ? (amount / 1000).toFixed(1) + "k" : "—"}
              </dt>
              <dd className="eyebrow">Insamlat av {goal / 1000}k</dd>
            </div>
          </dl>
        </div>
      </section>

      <Ticker
        items={[
          "Est. 2026",
          "Wargön · Sverige",
          "En resa · Flera mål",
          "Tour 2029",
          "300 000 kr tourmål",
          "Allt för laget · Allt för touren",
        ]}
      />

      {/* ============== MANIFEST ============== */}
      <section className="section manifest">
        <div className="wrap">
          <div className="manifest__grid">
            <div>
              <p className="eyebrow eyebrow--maroon">Om föreningen</p>
              <h2 className="display display-l" style={{ marginTop: 14, maxWidth: 600 }}>
                En förening<br />byggd kring laget.
              </h2>
            </div>
            <div>
              <p className="lede" style={{ maxWidth: 540 }}>
                WRÖK finns för att stötta laget och skapa något mer än träning
                och matcher — gemenskap, äventyr och en resa värd att minnas.
                Rugbyverksamheten drivs av Vänersborgs Rugbyklubb. WRÖK är de
                runt laget.
              </p>
              <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Link to="/about" className="btn btn--ink">
                  Vår historia <Arrow />
                </Link>
                <Link to="/about/connection" className="btn btn--ghost">
                  WRÖK &amp; VRK
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============== FUND PROGRESS ============== */}
      <section className="section section--ink">
        <div className="wrap">
          <div className="fund-head">
            <div>
              <p className="eyebrow eyebrow--paper">Tour 2029</p>
              <h2 className="display display-l" style={{ marginTop: 12, color: "var(--cream)" }}>
                På väg söderut.
              </h2>
              <p className="text-paper-muted" style={{ marginTop: 14, maxWidth: 460 }}>
                Varje krona räknas. Här ser du hur långt vi kommit
                och vad som väntar längs vägen.
              </p>
            </div>
            <Link to="/tour" className="btn btn--paper">
              Läs om touren <Arrow />
            </Link>
          </div>

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

      {/* ============== TEAM PREVIEW ============== */}
      {shuffled.length > 0 && (
      <section className="section team-preview">
        <div className="wrap">
          <div className="team-preview__head">
            <div>
              <p className="eyebrow eyebrow--maroon">Truppen</p>
              <h2 className="display display-l" style={{ marginTop: 12 }}>
                Spelarna<br />bakom WRÖK.
              </h2>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <div className="team-preview__arrows">
                <button type="button" className="team-preview__arrow" onClick={() => scrollByCard(-1)} aria-label="Föregående">
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                    <path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square"/>
                  </svg>
                </button>
                <button type="button" className="team-preview__arrow" onClick={() => scrollByCard(1)} aria-label="Nästa">
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square"/>
                  </svg>
                </button>
              </div>
              <Link to="/team" className="btn btn--ink">
                Hela laget <Arrow />
              </Link>
            </div>
          </div>

          <div className="team-preview__track-wrap">
            <div className="team-preview__grid" ref={trackRef}>
              {[...shuffled, ...shuffled].map((p, i) => (
                <article className="player-card" key={i}>
                  <Link to="/team" className="player-card__img">
                    <img src={p.image} alt={p.name} loading="lazy" />
                    <div className="player-card__num display display-l">
                      {p.number.padStart(2, "0")}
                    </div>
                  </Link>
                  <div className="player-card__meta">
                    <p className="display display-s">{p.name}</p>
                    <p className="eyebrow">{p.position}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>
      )}

      {/* ============== INSTAGRAM ============== */}
      <section className="section section--paper2" style={{ paddingBottom: "var(--section-y)" }}>
        <InstagramFeed />
      </section>

      {/* ============== CTA BAND ============== */}
      <section className="cta-band section--ink">
        <div className="wrap">
          <div className="cta-band__grid">
            <div>
              <p className="eyebrow eyebrow--paper">Stötta WRÖK</p>
              <h2 className="display display-l" style={{ marginTop: 12, color: "var(--cream)" }}>
                Varje krona<br />
                <span style={{ color: "var(--gold)" }}>tar oss söderut.</span>
              </h2>
            </div>
            <div className="cta-band__cards">
              <Link to="/support/donate" className="cta-card">
                <div className="cta-card__top">
                  <span className="cta-card__num display display-m">01</span>
                  <Arrow size={18} />
                </div>
                <p className="display display-s">Donera privat</p>
                <p className="text-paper-muted">Swish, bankgiro eller annat sätt — direkt till laget.</p>
              </Link>
              <Link to="/support/sponsor" className="cta-card">
                <div className="cta-card__top">
                  <span className="cta-card__num display display-m">02</span>
                  <Arrow size={18} />
                </div>
                <p className="display display-s">Bli sponsor</p>
                <p className="text-paper-muted">För företag som vill ha synlighet och något konkret tillbaka.</p>
              </Link>
              <Link to="/support/sales" className="cta-card">
                <div className="cta-card__top">
                  <span className="cta-card__num display display-m">03</span>
                  <Arrow size={18} />
                </div>
                <p className="display display-s">Handla &amp; stötta</p>
                <p className="text-paper-muted">Newbody, Tradera och säsongs-kampanjer.</p>
              </Link>
              <Link to="/support/member" className="cta-card">
                <div className="cta-card__top">
                  <span className="cta-card__num display display-m">04</span>
                  <Arrow size={18} />
                </div>
                <p className="display display-s">Bli medlem</p>
                <p className="text-paper-muted">365 kr / år — 1 kr om dagen. Lott, förmåner och mer.</p>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageHome });