/* Slow Weekend — Collections index + single collection view.
   Exports CollectionsIndex, CollectionView. Relies on globals from cards.jsx
   (TextureBlock, CAT_ACCENT) and data on window.SLOW_WEEKEND_DATA. */

function outingById(id) {
  return window.SLOW_WEEKEND_DATA.outings.find((o) => o.id === id);
}

/* ---- Collections index ---- */

function CollectionTile({ col, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={() => onOpen(col.id)}
      style={{
        cursor: "pointer", borderRadius: 18, overflow: "hidden", background: "#FFFFFF",
        border: "1px solid rgba(47,47,47,0.06)",
        boxShadow: hover ? "0 22px 50px -28px rgba(47,47,47,0.32)" : "0 14px 40px -30px rgba(47,47,47,0.26)",
        transform: hover ? "translateY(-3px)" : "none",
        transition: "box-shadow 0.7s cubic-bezier(.2,.6,.2,1), transform 0.7s cubic-bezier(.2,.6,.2,1)",
      }}>
      <TextureBlock tones={col.tones} style={{ height: 124 }}>
        {col.partner && (
          <span style={{ position: "absolute", left: 16, top: 14, display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,255,255,0.92)", borderRadius: 999, padding: "3px 11px" }}>
            <span style={{ width: 13, height: 13, borderRadius: "50%", background: "radial-gradient(circle at 35% 30%, #C58FA0, #B0764F)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 8 }}>✦</span>
            <span style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "#9A6238", fontWeight: 600 }}>Partner</span>
          </span>
        )}
        {col.season && (
          <span style={{ position: "absolute", left: 16, top: 14, display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,255,255,0.92)", borderRadius: 999, padding: "3px 11px" }}>
            <span className="sw-breath" style={{ width: 6, height: 6, borderRadius: "50%", background: "#B0764F" }} />
            <span style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "#9A6238", fontWeight: 600 }}>In season now</span>
          </span>
        )}
        {col.flagship && (
          <span style={{ position: "absolute", left: 16, top: 14, display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,255,255,0.92)", borderRadius: 999, padding: "3px 11px" }}>
            <span style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "#5d6b58", fontWeight: 600 }}>{col.voice === "founder" ? "✍ From the founder" : "★ Signature"}</span>
          </span>
        )}
      </TextureBlock>
      <div style={{ padding: "24px 26px 26px" }}>
        <h3 style={{ font: "500 23px/1.2 'Source Serif 4', serif", color: "#2F2F2F", margin: "0 0 10px", letterSpacing: "-0.01em" }}>{col.title}</h3>
        <p style={{ margin: "0 0 18px", fontSize: 14.5, lineHeight: 1.55, color: "rgba(47,47,47,0.62)" }}>{col.tagline}</p>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 12.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(47,47,47,0.42)" }}>{col.items.length} outings</span>
          <span style={{ fontSize: 14, color: "#7E9078", fontWeight: 600, transition: "transform 0.5s", transform: hover ? "translateX(4px)" : "none" }}>→</span>
        </div>
      </div>
    </div>
  );
}

function CollectionGrid({ cols, onOpen }) {
  return (
    <div style={{ display: "grid", gap: 24, gridTemplateColumns: "repeat(auto-fit, minmax(290px, 1fr))" }}>
      {cols.map((c, i) => (
        <div key={c.id} className="sw-rise" style={{ animationDelay: `${0.08 + i * 0.06}s` }}>
          <CollectionTile col={c} onOpen={onOpen} />
        </div>
      ))}
    </div>
  );
}

function SectionHead({ kicker, title }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 12, margin: "0 0 20px" }}>
      <h2 style={{ font: "500 22px 'Source Serif 4', serif", color: "#2F2F2F", margin: 0, letterSpacing: "-0.01em" }}>{title}</h2>
      {kicker && <span style={{ fontSize: 12.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(47,47,47,0.4)" }}>{kicker}</span>}
    </div>
  );
}

function CollectionsIndex({ onOpenCollection, onOpenGuide, onOpenOuting }) {
  const now = new Date();
  const all = window.SLOW_WEEKEND_DATA.collections;
  // Plans lead this tab (promoted from the bottom of Home, IDEAS 2026-06-21):
  // all pairings, weekly-rotated for freshness via the same planPicks the home uses.
  const pairings = SW.planPicks(window.SLOW_WEEKEND_DATA.pairings || [], (window.SLOW_WEEKEND_DATA.outings || []).map((o) => o.id));
  // Three sections, each a distinct KIND (§18): seasonal guides appear and retire
  // automatically; Signature = our flagships, partner picks, and founder lists;
  // everything else is the everyday mood/theme browse.
  const inSeason = all.filter((c) => c.season && SW.inSeason(c.season, now));
  const evergreen = all.filter((c) => !c.season); // out-of-season seasonal cols are hidden
  const isSignature = (c) => c.partner || c.flagship || c.voice === "founder";
  const signature = evergreen.filter(isSignature);
  const moodTheme = evergreen.filter((c) => !isSignature(c));
  const guides = window.SLOW_WEEKEND_DATA.guides || [];
  return (
    <div style={{ maxWidth: 1080, margin: "0 auto", padding: "clamp(40px,6vw,72px) clamp(20px,6vw,64px) 110px" }}>
      <div className="sw-rise" style={{ maxWidth: 600, marginBottom: 48 }}>
        <span style={{ fontSize: 13, letterSpacing: "0.22em", textTransform: "uppercase", color: "rgba(47,47,47,0.42)" }}>Explore</span>
        <h1 style={{ font: "500 clamp(30px,4.4vw,46px)/1.1 'Source Serif 4', serif", letterSpacing: "-0.02em", color: "#2F2F2F", margin: "18px 0 16px" }}>
          Ready-made plans, and small lists for the weekend you need.
        </h1>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: "rgba(47,47,47,0.6)", margin: 0 }}>
          Plans pair an outing with a second beat. Collections are a few hand-picked lists for a mood, a season, or a particularly tired Tuesday. Never a directory.
        </p>
      </div>

      {pairings.length > 0 && (
        <div className="sw-rise" style={{ marginBottom: 48 }}>
          <SectionHead kicker="not events, plans" title="Plans" />
          <p style={{ margin: "-6px 0 20px", fontSize: 14.5, color: "rgba(47,47,47,0.5)", maxWidth: 560, lineHeight: 1.55 }}>
            An outing paired with a second beat, so an hour becomes a morning.
          </p>
          <div className="sw-lane" style={{ display: "flex", gap: 16, overflowX: "auto", paddingBottom: 6, margin: "0 -4px", padding: "0 4px 6px" }}>
            {pairings.map((p) => <PairingCard key={p.id} pairing={p} onOpen={onOpenOuting} fixedWidth={272} />)}
          </div>
        </div>
      )}

      {inSeason.length > 0 && (
        <div className="sw-rise" style={{ marginBottom: 48 }}>
          <SectionHead kicker="here and gone" title="In season now" />
          <CollectionGrid cols={inSeason} onOpen={onOpenCollection} />
        </div>
      )}

      {signature.length > 0 && (
        <div className="sw-rise" style={{ marginBottom: 48 }}>
          <SectionHead kicker="flagships, partner picks & founder lists" title="Signature" />
          <CollectionGrid cols={signature} onOpen={onOpenCollection} />
        </div>
      )}

      <div className="sw-rise">
        <SectionHead kicker="for the mood or the plan" title="By mood & theme" />
        <CollectionGrid cols={moodTheme} onOpen={onOpenCollection} />
      </div>

      {guides.map((g) => <GuidePromo key={g.id} guide={g} onOpen={onOpenGuide} />)}
    </div>
  );
}

// Premium guide promo — honest waitlist framing for a paid one-off in progress.
function GuidePromo({ guide, onOpen }) {
  return (
    <div className="sw-rise" onClick={() => onOpen(guide.id)} style={{ cursor: "pointer", marginTop: 56, borderRadius: 20, overflow: "hidden", border: "1px solid rgba(47,47,47,0.07)", background: "#FFFFFF", display: "grid", gridTemplateColumns: "minmax(0,1fr) 200px", boxShadow: "0 16px 44px -32px rgba(47,47,47,0.5)" }}>
      <div style={{ padding: "30px 32px" }}>
        <span style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "#9A6238", fontWeight: 600 }}>Premium guide · in the works</span>
        <h3 style={{ font: "500 26px/1.2 'Source Serif 4', serif", color: "#2F2F2F", margin: "12px 0 8px", letterSpacing: "-0.01em" }}>{guide.title}</h3>
        <p style={{ margin: "0 0 16px", fontSize: 15, lineHeight: 1.55, color: "rgba(47,47,47,0.62)", maxWidth: 460 }}>{guide.blurb}</p>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, color: "#7E9078", fontWeight: 600 }}>
          {guide.price} when it’s ready, join the list <span>→</span>
        </span>
      </div>
      <TextureBlock tones={guide.tones} style={{ minHeight: 150 }} />
    </div>
  );
}

/* ---- Single collection ---- */

function OutingRow({ outing, onOpen }) {
  const accent = CAT_ACCENT[outing.category];
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onClick={() => onOpen(outing.id)}
      style={{
        cursor: "pointer", display: "grid", gridTemplateColumns: "84px 1fr auto", gap: 22, alignItems: "center",
        padding: "18px 22px", borderRadius: 16, background: hover ? "#FFFFFF" : "transparent",
        border: "1px solid", borderColor: hover ? "rgba(47,47,47,0.07)" : "transparent",
        boxShadow: hover ? "0 16px 40px -30px rgba(47,47,47,0.3)" : "none",
        transition: "all 0.4s ease",
      }}>
      <TextureBlock tones={outing.tones} style={{ width: 84, height: 84, borderRadius: 13 }} />
      <div style={{ minWidth: 0 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 7 }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: accent }} />
          <span style={{ fontSize: 11.5, letterSpacing: "0.14em", textTransform: "uppercase", color: accent, fontWeight: 600 }}>{outing.category}</span>
        </div>
        <h3 style={{ font: "500 20px/1.25 'Source Serif 4', serif", color: "#2F2F2F", margin: "0 0 6px", letterSpacing: "-0.01em" }}>{outing.title}</h3>
        {outing.trail && <div style={{ marginBottom: 7 }}><DrawHint pick={outing} accent={accent} /></div>}
        <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 12px", alignItems: "center" }}>
          {[outing.city, SW.whenLabel(outing), outing.ageRange].map((m, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span style={{ width: 3, height: 3, borderRadius: "50%", background: "rgba(47,47,47,0.25)" }} />}
              <span style={{ fontSize: 13, color: "rgba(47,47,47,0.55)", whiteSpace: "nowrap" }}>{m}</span>
            </React.Fragment>
          ))}
          {outing.energyLevel && <EnergyBadge level={outing.energyLevel} />}
        </div>
        {outing.facts && <div style={{ marginTop: 8 }}><OutingFacts facts={outing.facts} /></div>}
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2, paddingLeft: 8 }}>
        <span style={{ font: "600 22px 'Source Serif 4', serif", color: "#2F2F2F" }}>{outing.calmScore}</span>
        <span style={{ fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(47,47,47,0.4)" }}>fit</span>
      </div>
    </div>
  );
}

function CollectionView({ id, onBack, onOpenOuting }) {
  const col = window.SLOW_WEEKEND_DATA.collections.find((c) => c.id === id);
  const items = col.items.map(outingById).filter(Boolean);
  return (
    <div className="sw-fade" style={{ maxWidth: 760, margin: "0 auto", padding: "28px clamp(20px,6vw,64px) 110px" }}>
      <button onClick={onBack} style={{ border: "none", background: "none", cursor: "pointer", font: "inherit", fontSize: 14.5, color: "rgba(47,47,47,0.6)", display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 0", marginBottom: 26, whiteSpace: "nowrap" }}>
        ← All collections
      </button>

      <TextureBlock tones={col.tones} style={{ height: 168, borderRadius: 20, marginBottom: 32 }} />

      <span style={{ fontSize: 12.5, letterSpacing: "0.16em", textTransform: "uppercase", color: col.season ? "#9A6238" : "rgba(47,47,47,0.42)" }}>{col.partner ? "Partner collection" : col.voice === "founder" ? "From the founder" : col.flagship ? "Signature collection" : col.season ? "In season now" : "Collection"} · {items.length} outings</span>
      <h1 style={{ font: "500 clamp(28px,4vw,40px)/1.12 'Source Serif 4', serif", letterSpacing: "-0.02em", color: "#2F2F2F", margin: "16px 0 14px" }}>{col.title}</h1>
      <p style={{ font: "400 19px/1.5 'Source Serif 4', serif", color: "rgba(47,47,47,0.65)", margin: "0 0 22px", maxWidth: 560 }}>{col.tagline}</p>
      <div style={{ marginBottom: 28 }}><ShareButton route={{ type: "collection", id: col.id }} label="Share this collection" /></div>
      {col.partner && <div style={{ marginBottom: 36 }}><PartnerBadge partnerKey={col.partner} variant="full" /></div>}

      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {items.map((o, i) => (
          <React.Fragment key={o.id}>
            {i > 0 && <div style={{ height: 1, background: "rgba(47,47,47,0.07)", margin: "0 22px" }} />}
            <OutingRow outing={o} onOpen={onOpenOuting} />
          </React.Fragment>
        ))}
      </div>

      <p style={{ marginTop: 40, paddingTop: 22, borderTop: "1px solid rgba(47,47,47,0.08)", fontSize: 13.5, lineHeight: 1.6, color: "rgba(47,47,47,0.45)", textAlign: "center" }}>
        Every outing here cleared the Slow Weekend Filter at 8 or higher.
      </p>
    </div>
  );
}

Object.assign(window, { CollectionsIndex, CollectionView, CollectionTile, OutingRow, CollectionGrid, GuidePromo });