// ============================================================
// Listing.html — the detail page.
// Hero, gallery, editorial description, sticky info panel, map,
// "Featured in" guides (same GuideCard system), related nearby.
// The structured layer beneath the guide experience.
// ============================================================
const { LISTINGS } = window.QC;

function ListingDetail() {
  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 id = param("id") || LISTINGS[0].id;
  const l = window.QC.getListing(id) || LISTINGS[0];
  const guides = window.QC.guidesForListing(l.id);
  const related = window.QC.relatedListings(l.id, 3);
  const gallery = (l.gallery && l.gallery.length ? l.gallery : []);

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

      {/* HERO */}
      <section className="dhero" data-screen-label="Listing hero">
        {l.photo
          ? <div className="dhero-img" style={{ backgroundImage: `url(${l.photo})` }}></div>
          : <div className="dhero-img"><div className={`ph tone-${l.tone}`}><span className="ph-glyph">{l.name[0]}</span></div></div>}
        <div className="dhero-grain"></div>
        <div className="wrap" style={{ position: "relative" }}>
          <div className="dhero-inner" style={{ paddingBottom: 96 }}>
            <div className="dhero-breadcrumb">
              <a href={href.directory}>Directory</a>
              <span className="sep">/</span>
              <a href={href.category(l.categoryId)}>{l.category}</a>
              <span className="sep">/</span>
              <span>{l.city}</span>
            </div>
            <span className="dhero-eyebrow" style={{ marginTop: 6 }}>{l.kicker}</span>
            <h1 style={{ marginBottom: 14 }}>{l.name}</h1>
            <p className="dhero-sub">{l.descriptor}</p>
          </div>
        </div>
      </section>

      <section className="d-section" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="ld-wrap">
            {/* MAIN */}
            <div className="ld-main">
              {/* gallery */}
              {gallery.length > 0 && (
                <div className="ld-gallery">
                  <figure className="g-main"><img src={gallery[0]} alt={l.name} /></figure>
                  <figure className="g-sub"><img src={gallery[1] || gallery[0]} alt="" /></figure>
                  <figure className="g-sub">
                    <img src={gallery[2] || gallery[0]} alt="" />
                    {gallery.length > 3 && (
                      <a className="more" href={l.website || "#"} target="_blank" rel="noopener noreferrer">
                        +{gallery.length - 3} photos
                      </a>
                    )}
                  </figure>
                </div>
              )}

              {/* meta row */}
              <div className="ld-meta-row">
                <span className="city"><DIcon name="pin" size={14} />{l.neighborhood} · {l.city}</span>
                {l.price && <span className="city"><DIcon name="star" size={14} />{l.price}</span>}
                <span style={{ flex: 1 }}></span>
                <span className="lcard-tags" style={{ marginTop: 0 }}>
                  {l.tags.map((t) => <Tag key={t}>{t}</Tag>)}
                </span>
              </div>

              {/* editorial */}
              <p className="ld-lede">{l.descriptor}</p>
              <div className="ld-body">
                <p>{l.editorial}</p>
                <p>
                  {l.name} sits in {l.neighborhood}, one of the QC&rsquo;s most characterful pockets —
                  a short walk or drive from the riverfront and easy to fold into a longer evening.
                  It&rsquo;s the kind of place that shows up again and again on our curated guides,
                  and once you&rsquo;ve been, you&rsquo;ll see why.
                </p>
              </div>

              {/* map */}
              <div style={{ marginTop: 36 }}>
                <Eyebrow>/ On the map</Eyebrow>
                <div style={{ marginTop: 16, borderRadius: 8, overflow: "hidden", border: "1px solid var(--rule)" }}>
                  {l.lat && l.lng
                    ? <iframe
                        title={`Map — ${l.name}`}
                        width="100%"
                        height="280"
                        style={{ display: "block", border: 0 }}
                        loading="lazy"
                        allowFullScreen
                        src={`https://maps.google.com/maps?q=${l.lat},${l.lng}&z=15&output=embed`}
                      />
                    : <iframe
                        title={`Map — ${l.name}`}
                        width="100%"
                        height="280"
                        style={{ display: "block", border: 0 }}
                        loading="lazy"
                        allowFullScreen
                        src={`https://maps.google.com/maps?q=${encodeURIComponent(l.address || l.name + " Quad Cities")}&z=15&output=embed`}
                      />
                  }
                </div>
                <div className="lcard-city" style={{ marginTop: 12 }}>
                  <DIcon name="pin" size={13} />{l.address}
                </div>
              </div>
            </div>

            {/* STICKY PANEL */}
            <aside>
              <div className="ld-panel">
                <div className="ld-panel-body">
                  <div className="ld-panel-row"><span className="ico"><DIcon name="clock" size={17} /></span>
                    <div><b className="ld-open">{l.hours}</b><br /><span style={{ color: "var(--ink-3)", fontSize: 13 }}>Hours vary by season</span></div></div>
                  <div className="ld-panel-row"><span className="ico"><DIcon name="pin" size={17} /></span>
                    <div>{l.address}</div></div>
                  {l.phone && <div className="ld-panel-row"><span className="ico"><DIcon name="phone" size={17} /></span><div>{l.phone}</div></div>}
                  <div className="ld-panel-row"><span className="ico"><DIcon name="star" size={17} /></span>
                    <div>Price · <b>{l.price}</b></div></div>
                </div>
                <div className="ld-panel-actions">
                  <a className="btn btn-brand btn-lg" target="_blank" rel="noopener noreferrer"
                     href={l.lat && l.lng
                       ? `https://www.google.com/maps/dir/?api=1&destination=${l.lat},${l.lng}`
                       : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(l.address || l.name)}`}
                     style={{ justifyContent: "center" }}>
                    <DIcon name="pin" size={16} /> Get directions
                  </a>
                  <div style={{ display: "flex", gap: 8 }}>
                    <a className="btn btn-ghost" href="#" style={{ flex: 1, justifyContent: "center" }}><DIcon name="bookmark" size={15} /> Save</a>
                    <a className="btn btn-ghost" href="#" style={{ flex: 1, justifyContent: "center" }}><DIcon name="share" size={15} /> Share</a>
                  </div>
                </div>
                {guides.length > 0 && (
                  <div className="ld-feature-strip">
                    <div className="lbl">Featured in {guides.length} guide{guides.length > 1 ? "s" : ""}</div>
                    {guides.map((g) => (
                      <a key={g.id} className="ld-feature-link" href={href.guide(g.id)}>
                        <span className="gn">{g.title}</span>
                        <span className="arrow"><DIcon name="arrow" size={14} /></span>
                      </a>
                    ))}
                  </div>
                )}
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* FEATURED IN — guides, as full guide cards (same system) */}
      {guides.length > 0 && (
        <section className="d-section" data-screen-label="Featured in guides">
          <div className="wrap">
            <DHead
              eyebrow="/ Featured in"
              title={`${l.name} shows up in these guides.`}
              sub="One listing, many stories — the same record, curated into the guides locals trust."
              link={href.guides} linkLabel="All guides"
            />
            <div className={`guide-grid ${guides.length === 2 ? "cols-2" : ""}`}>
              {guides.map((g) => <GuideCard key={g.id} g={g} />)}
            </div>
          </div>
        </section>
      )}

      {/* RELATED / EXPLORE NEARBY */}
      <section className="d-section" data-screen-label="Related listings">
        <div className="wrap">
          <DHead
            eyebrow="/ Explore more nearby"
            title="If you like this, you&rsquo;ll like these."
            link={href.browse} linkLabel="Browse all"
          />
          <div className="card-grid">
            {related.map((r) => <ListingCard key={r.id} l={r} />)}
          </div>
        </div>
      </section>

      <SiteFooter />
    </>
  );
}

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