// ============================================================
// Guides.html — "Quad Cities Guides"
// The editorial centerpiece. Big photography, a featured guide,
// then the full set. Same GuideCard system as everywhere else.
// ============================================================
function GuidesHome() {
  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, PH } = window.QC;
  const featured = window.QC.getGuide("river-views");
  const rest = GUIDES.filter((g) => g.id !== "river-views");

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

      {/* HERO */}
      <section className="dhero" data-screen-label="Guides hero">
        <div className="dhero-img" style={{ backgroundImage: `url(${PH.skywalk})`, backgroundPosition: "center 60%" }}></div>
        <div className="dhero-grain"></div>
        <div className="wrap" style={{ position: "relative" }}>
          <div className="dhero-inner">
            <span className="dhero-eyebrow"><span className="live-dot"></span>Quad Cities Guides · curated by locals</span>
            <h1>Quad Cities <em>Guides</em>.</h1>
            <p className="dhero-sub">
              Curated local favorites, hidden gems, river views, patios, restaurants, coffee
              shops, live music, and experiences worth discovering — a beautifully kept
              companion to the QC, written by the people who live here.
            </p>
            <div className="dhero-chips" style={{ marginTop: 30 }}>
              <span>Jump to:</span>
              <a href={href.guide("river-views")}>River views</a>
              <a href={href.guide("patios")}>Patios</a>
              <a href={href.guide("date-night")}>Date night</a>
              <a href={href.guide("hidden-gems")}>Hidden gems</a>
              <a href={href.guide("visitors")}>Take visitors</a>
            </div>
          </div>
          <div className="dhero-credit">Mississippi River dawn · Quad Cities</div>
        </div>
      </section>

      {/* FEATURED GUIDE (big) */}
      <section className="d-section" data-screen-label="Featured guide">
        <div className="wrap">
          <DHead eyebrow="/ 01 — Editor&rsquo;s feature" title="This week&rsquo;s guide." tight />
          <GuideCard g={featured} big />
        </div>
      </section>

      {/* ALL GUIDES */}
      <section className="d-section" data-screen-label="All guides">
        <div className="wrap">
          <DHead
            eyebrow="/ 02 — Every guide"
            title="The QC, <em>sorted by feeling.</em>"
            sub="Not a blog, not a top-ten list — a growing library of the places worth your evening."
          />
          <div className="guide-grid">
            {rest.map((g) => <GuideCard key={g.id} g={g} />)}
          </div>
        </div>
      </section>

      {/* CROSS-LINK TO DIRECTORY */}
      <section className="d-section" data-screen-label="Directory cross-link">
        <div className="wrap">
          <div className="xband" style={{ minHeight: 320 }}>
            <div className="xband-img" style={{ backgroundImage: `url(${PH.marina})` }}></div>
            <div style={{ position: "relative", maxWidth: 620 }}>
              <div className="xband-eyebrow">/ The data underneath</div>
              <h2>Every guide is built from the <em>directory</em>.</h2>
              <p>
                Tap any place in a guide to see its full listing — hours, map, photos, and every
                other guide it appears in. Same building, different room.
              </p>
              <a className="btn btn-brand btn-lg" href={href.directory}>Open the Directory <DIcon name="arrow" size={15} /></a>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

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