// ============================================================
// Guide.html — single guide template.
// Hero, atmospheric intro, quick-nav, the reusable FeatureBlock
// system (kicker / name / image / location / description / View
// Listing), then Related Guides + Related Listings + Explore Nearby.
// ============================================================
function GuidePage() {
  const [dataVersion, setDataVersion] = React.useState(0);
  React.useEffect(() => {
    const handler = () => setDataVersion((v) => v + 1);
    window.addEventListener("qc:data-loaded", handler);
    return () => window.removeEventListener("qc:data-loaded", handler);
  }, []);

  const GUIDES = window.QC.GUIDES;
  const id = param("id") || GUIDES[0].id;
  const g = window.QC.getGuide(id) || GUIDES[0];
  const entries = window.QC.listingsInGuide(g.id);
  const relatedGuides = window.QC.relatedGuides(g.id, 3);

  // "explore more nearby": listings NOT already in this guide
  const inGuide = new Set(g.listings);
  const nearby = window.QC.LISTINGS.filter((l) => !inGuide.has(l.id)).slice(0, 3);

  return (
    <>
      <SiteNav active="guides" />

      {/* HERO */}
      <section className="dhero" data-screen-label="Guide hero">
        {g.photo
          ? <div className="dhero-img" style={{ backgroundImage: `url(${g.photo})` }}></div>
          : <div className="dhero-img"><div className={`ph tone-${g.tone}`}><span className="ph-glyph">{g.title.replace("Best ","")[0]}</span></div></div>}
        <div className="dhero-grain"></div>
        <div className="wrap" style={{ position: "relative" }}>
          <div className="dhero-inner">
            <div className="dhero-breadcrumb">
              <a href={href.guides}>Guides</a>
              <span className="sep">/</span>
              <span>{g.title}</span>
            </div>
            <span className="dhero-eyebrow" style={{ marginTop: 6 }}>Guide · {g.count} spots · updated this week</span>
            <h1>{g.title} <em>in the QC</em></h1>
            <p className="dhero-sub">{g.descriptor}</p>
          </div>
          <div className="dhero-credit">We Are Quad Cities · Guides</div>
        </div>
      </section>

      {/* ATMOSPHERIC INTRO + QUICK NAV */}
      <section className="d-section" data-screen-label="Guide intro" style={{ paddingBottom: 40 }}>
        <div className="wrap">
          <div className="guide-intro">
            <Eyebrow>/ The brief</Eyebrow>
            <p style={{ marginTop: 16 }}>{g.intro}</p>
            <div className="guide-nav">
              <span className="guide-nav-label">In this guide — {g.count} places</span>
              {entries.map((l) => (
                <a key={l.id} href={`#${l.id}`}>{l.name}</a>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FEATURE BLOCKS — the reusable guide entry system */}
      <section data-screen-label="Guide entries">
        <div className="wrap">
          {entries.map((l, i) => <FeatureBlock key={l.id} l={l} index={i + 1} />)}
        </div>
      </section>

      {/* RELATED GUIDES */}
      <section className="d-section" data-screen-label="Related guides">
        <div className="wrap">
          <DHead
            eyebrow="/ Keep exploring"
            title="Related guides."
            sub="Many of these places appear across multiple guides — follow the thread."
            link={href.guides} linkLabel="All guides"
          />
          <div className="guide-grid">
            {relatedGuides.map((rg) => <GuideCard key={rg.id} g={rg} />)}
          </div>
        </div>
      </section>

      {/* EXPLORE MORE NEARBY — listings */}
      <section className="d-section" data-screen-label="Explore nearby">
        <div className="wrap">
          <DHead
            eyebrow="/ Explore more nearby"
            title="More of the QC worth your time."
            link={href.browse} linkLabel="Browse the directory"
          />
          <div className="card-grid">
            {nearby.map((l) => <ListingCard key={l.id} l={l} />)}
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<GuidePage />);