/* NeighborhoodGuide.jsx — renders one area guide (data from neighborhoods.js).
 *
 * SEO long-tail landing page: hero, intro copy, the real villas in that area
 * (pulled live from the catalog, linked to booking), highlights, nearby points,
 * and an FAQ. Runtime SEO (title/meta/canonical + Place/FAQ JSON-LD) is applied
 * from the guide data. */
function NeighborhoodGuide({ slug }) {
  const data = (window.NOVUS_NEIGHBORHOODS || {})[slug];
  const [props, setProps] = React.useState([]);

  // Load the live catalog, then keep only this area's listings (by id/slug→UUID).
  React.useEffect(() => {
    if (!data) return;
    let alive = true;
    const wanted = data.propertyIds || [];
    const pick = (all) => {
      const byId = {};
      all.forEach((p) => { byId[p.id] = p; });
      const resolve = (window.NovusCatalog && window.NovusCatalog.resolveId) || ((x) => x);
      return wanted.map((id) => byId[resolve(id)] || byId[id]).filter(Boolean);
    };
    const seed = (window.NovusCatalog ? window.NovusCatalog.getProperties() : (window.NOVUS_PROPERTIES || []));
    setProps(pick(seed));
    if (window.NovusCatalog && window.NovusCatalog.load) {
      window.NovusCatalog.load().then((all) => { if (alive && all) setProps(pick(all)); });
    }
    return () => { alive = false; };
  }, [slug]);

  // Runtime SEO + Place / FAQ schema.
  React.useEffect(() => {
    if (!data) return;
    const url = 'https://novusresidentials.com/ui_kits/website/' + slug + '.html';
    if (window.NovusSeo) {
      window.NovusSeo.upsertCanonical(url);
      window.NovusSeo.upsertMeta('name', 'description', data.metaDesc);
      window.NovusSeo.upsertMeta('name', 'robots', 'index, follow, max-image-preview:large');
      window.NovusSeo.upsertMeta('property', 'og:title', data.title);
      window.NovusSeo.upsertMeta('property', 'og:description', data.metaDesc);
      window.NovusSeo.upsertMeta('property', 'og:image', data.hero);
      window.NovusSeo.upsertMeta('property', 'og:url', url);
      window.NovusSeo.upsertMeta('name', 'twitter:card', 'summary_large_image');
      window.NovusSeo.upsertMeta('name', 'twitter:image', data.hero);
      window.NovusSeo.setJsonLd('novus-ld-place', {
        '@context': 'https://schema.org', '@type': 'Place',
        name: data.name + ', ' + data.region, url: url, image: data.hero,
        description: data.metaDesc,
      });
      window.NovusSeo.setJsonLd('novus-ld-faq', {
        '@context': 'https://schema.org', '@type': 'FAQPage',
        mainEntity: (data.faqs || []).map(([q, a]) => ({
          '@type': 'Question', name: q, acceptedAnswer: { '@type': 'Answer', text: a },
        })),
      });
    }
    document.title = data.title;
  }, [slug]);

  if (!data) {
    return (
      <PageChrome active="villas">
        <div className="container" style={{ padding: '80px 0', textAlign: 'center' }}>
          <h1 style={{ fontFamily: 'var(--font-display)' }}>Area not found</h1>
          <a href="villas.html" className="btn btn-primary" style={{ marginTop: 16 }}>Browse all villas →</a>
        </div>
      </PageChrome>
    );
  }

  return (
    <PageChrome active="villas">
      <style>{`
        .ng-hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
        .ng-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
        .ng-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,51,0.25), rgba(10,31,51,0.82)); }
        .ng-hero-inner { position: relative; z-index: 1; padding: 0 6vw 56px; max-width: 1200px; margin: 0 auto; width: 100%; }
        .ng-hero-overline { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--horizon-200); font-weight: 600; }
        .ng-hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.02em; margin: 14px 0 14px; text-wrap: balance; }
        .ng-hero-lede { font-size: clamp(15px, 1.6vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.9); max-width: 640px; }
        .ng-section { max-width: 1100px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) 6vw; }
        .ng-intro p { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.75; color: var(--ink-700); margin: 0 0 18px; }
        .ng-grid3 { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 8px; }
        @media (min-width: 760px) { .ng-grid3 { grid-template-columns: repeat(3, 1fr); } }
        .ng-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
        .ng-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--navy-900); margin: 0 0 8px; }
        .ng-card p { font-size: 14px; line-height: 1.6; color: var(--ink-700); margin: 0; }
        .ng-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
        .ng-nearby { display: flex; flex-wrap: wrap; gap: 10px; }
        .ng-chip { background: var(--sand-100); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--navy-900); }
        .ng-chip strong { color: var(--sun-coral); font-weight: 600; margin-left: 6px; }
      `}</style>

      <section className="ng-hero">
        <div className="ng-hero-bg" style={{ backgroundImage: `url('${data.hero}')` }} />
        <div className="ng-hero-inner">
          <div className="ng-hero-overline">{data.overline} · {data.region}</div>
          <h1 className="ng-hero-title">{data.name}</h1>
          <p className="ng-hero-lede">{data.lede}</p>
        </div>
      </section>

      <section className="ng-section ng-intro">
        {data.intro.map((para, i) => <p key={i}>{para}</p>)}
        <div className="ng-grid3">
          {data.highlights.map((h) => (
            <div key={h.title} className="ng-card">
              <h3>{h.title}</h3>
              <p>{h.body}</p>
            </div>
          ))}
        </div>
      </section>

      {props.length > 0 && (
        <section className="ng-section" style={{ paddingTop: 0 }}>
          <SectionOpener overline="Stay here" title={`Villas in ${data.name}`} />
          <div className="ng-props">
            {props.map((p) => (
              <PropertyCard key={p.id} p={p} onSelect={(x) => { window.location.href = `property.html?id=${x.id}`; }} />
            ))}
          </div>
        </section>
      )}

      <section className="ng-section" style={{ paddingTop: 0 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(24px,3vw,36px)', color: 'var(--navy-900)', margin: '0 0 18px' }}>
          Getting around
        </h2>
        <div className="ng-nearby">
          {data.nearby.map(([place, time]) => (
            <span key={place} className="ng-chip">{place}<strong>{time}</strong></span>
          ))}
        </div>
      </section>

      <section className="ng-section" style={{ paddingTop: 0 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(24px,3vw,36px)', color: 'var(--navy-900)', margin: '0 0 18px' }}>
          Frequently asked
        </h2>
        {data.faqs.map(([q, a]) => <FaqRow key={q} q={q} a={a} />)}
      </section>

      <section style={{ background: 'var(--navy-900)', color: '#fff', padding: 'clamp(56px,9vw,110px) 6vw', textAlign: 'center' }}>
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
          <div className="ng-hero-overline" style={{ color: 'var(--sun-amber)' }}>Book direct</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px,5vw,52px)', margin: '14px 0 16px', lineHeight: 1.1 }}>
            Stay in {data.name}
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 16, lineHeight: 1.6, margin: '0 0 28px' }}>
            Best rate, real concierge, secure deposit — booked directly with Novus.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="booking.html" className="btn btn-primary" style={{ padding: '14px 32px' }}>Check availability</a>
            <a href="contact.html" className="btn btn-on-dark" style={{ padding: '14px 32px' }}>Talk to a host</a>
          </div>
        </div>
      </section>
    </PageChrome>
  );
}

function FaqRow({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(o => !o)} aria-expanded={open} style={{
        width: '100%', background: 'none', border: 0, cursor: 'pointer', textAlign: 'left',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        padding: '20px 4px', fontFamily: 'var(--font-display)', fontWeight: 400,
        fontSize: 'clamp(17px,2vw,21px)', color: 'var(--navy-900)',
      }}>
        <span>{q}</span>
        <span style={{ color: 'var(--sun-coral)', fontSize: 24, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 240ms' }}>+</span>
      </button>
      {open && <p style={{ padding: '0 4px 22px', margin: 0, fontSize: 15, lineHeight: 1.7, color: 'var(--ink-700)' }}>{a}</p>}
    </div>
  );
}

window.NeighborhoodGuide = NeighborhoodGuide;